Subscriptions and notifications for namespaces, tasks and lists (#410)

Co-authored-by: kolaente <k@knt.li> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/410 Co-authored-by: konrad <konrad@kola-entertainments.de> Co-committed-by: konrad <konrad@kola-entertainments.de>
2021-02-14 19:18:51 +00:00
parent b384c8ecde
commit 3f20ae89a8
10 changed files with 223 additions and 1 deletions
--- a/src/components/misc/subscription.vue
+++ b/src/components/misc/subscription.vue
@ -0,0 +1,121 @@
+<template>
+	<x-button
+		type="secondary"
+		:icon="icon"
+		v-tooltip="tooltipText"
+		@click="changeSubscription"
+		:disabled="disabled"
+		v-if="isButton"
+	>
+		{{ buttonText }}
+	</x-button>
+	<a
+		v-tooltip="tooltipText"
+		@click="changeSubscription"
+		:class="{'is-disabled': disabled}"
+		v-else
+	>
+		<span class="icon">
+			<icon :icon="icon"/>
+		</span>
+		{{ buttonText }}
+	</a>
+</template>
+
+<script>
+import SubscriptionService from '@/services/subscription'
+import SubscriptionModel from '@/models/subscription'
+
+export default {
+	name: 'task-subscription',
+	data() {
+		return {
+			subscriptionService: SubscriptionService,
+		}
+	},
+	props: {
+		entity: {
+			required: true,
+			type: String,
+		},
+		subscription: {
+			required: true,
+		},
+		entityId: {
+			required: true,
+		},
+		isButton: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	created() {
+		this.subscriptionService = new SubscriptionService()
+	},
+	computed: {
+		tooltipText() {
+			if(this.disabled) {
+				return `You can't unsubscribe here because you are subscribed to this ${this.entity} through its ${this.subscription.entity}.`
+			}
+
+			return this.subscription !== null ?
+				`You are currently subscribed to this ${this.entity} and will receive notifications for changes.` :
+				`You are not subscribed to this ${this.entity} and won't receive notifications for changes.`
+		},
+		buttonText() {
+			return this.subscription !== null ? 'Unsubscribe' : 'Subscribe'
+		},
+		icon() {
+			return this.subscription !== null ? ['far', 'bell-slash'] : 'bell'
+		},
+		disabled() {
+			if (this.subscription === null) {
+				return false
+			}
+
+			return this.subscription.entity !== this.entity
+		},
+	},
+	methods: {
+		changeSubscription() {
+			if(this.disabled) {
+				return
+			}
+
+			if (this.subscription === null) {
+				this.subscribe()
+			} else {
+				this.unsubscribe()
+			}
+		},
+		subscribe() {
+			const subscription = new SubscriptionModel({
+				entity: this.entity,
+				entityId: this.entityId,
+			})
+			this.subscriptionService.create(subscription)
+				.then(() => {
+					this.$emit('change', subscription)
+					this.success({message: `You are now subscribed to this ${this.entity}`}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		unsubscribe() {
+			const subscription = new SubscriptionModel({
+				entity: this.entity,
+				entityId: this.entityId,
+			})
+			this.subscriptionService.delete(subscription)
+				.then(() => {
+					this.$emit('change', null)
+					this.success({message: `You are now unsubscribed to this ${this.entity}`}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		}
+	},
+}
+</script>