From 1102cdc30ba8066503a21e7a289cfa7658e67db7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 21 Feb 2021 14:16:19 +0100
Subject: [PATCH] Show notification text based on their content

---
 .../notifications/notifications.vue           |  6 +++-
 src/components/tasks/partials/heading.vue     |  7 ++---
 src/models/notification.js                    | 31 +++++++++++++++++++
 src/models/task.js                            |  8 +++++
 src/styles/components/notifications.scss      | 11 ++-----
 5 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index a302d8213..f620223ff 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -15,7 +15,7 @@
 						v-if="n.notification.doer"/>
 					<span class="detail">
 						<router-link :to="to(n)">
-							{{ n.name }}
+							{{ n.toText(userInfo) }}
 						</router-link>
 						<span class="created" v-tooltip="formatDate(n.created)">
 							{{ formatDateSince(n.created) }}
@@ -32,6 +32,7 @@ import NotificationService from '@/services/notification'
 import User from '@/components/misc/user'
 import names from '@/models/notificationNames.json'
 import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
+import {mapState} from 'vuex'
 
 export default {
 	name: 'notifications',
@@ -53,6 +54,9 @@ export default {
 	beforeDestroy() {
 		document.removeEventListener('click', this.hidePopup)
 	},
+	computed: mapState({
+		userInfo: state => state.auth.info,
+	}),
 	methods: {
 		hidePopup(e) {
 			if (this.showNotifications) {
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index ac10fd51e..04b748a57 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -1,10 +1,7 @@
 <template>
 	<div class="heading">
-		<h1 class="title task-id" v-if="task.identifier === ''">
-			#{{ task.index }}
-		</h1>
-		<h1 class="title task-id" v-else>
-			{{ task.identifier }}
+		<h1 class="title task-id">
+			{{ task.getTextIdentifier() }}
 		</h1>
 		<div class="is-done" v-if="task.done">Done</div>
 		<h1
diff --git a/src/models/notification.js b/src/models/notification.js
index c7f2d1520..779cb7fbd 100644
--- a/src/models/notification.js
+++ b/src/models/notification.js
@@ -50,4 +50,35 @@ export default class NotificationModel extends AbstractModel {
 			readAt: null,
 		}
 	}
+
+	toText(user = null) {
+		let who = ''
+
+		switch (this.name) {
+			case names.TASK_COMMENT:
+				return `commented on ${this.notification.task.getTextIdentifier()}`
+			case names.TASK_ASSIGNED:
+				who = `${this.notification.assignee.getDisplayName()}`
+
+				if (user !== null && user.id === this.notification.assignee.id) {
+					who = 'you'
+				}
+
+				return `assigned ${who} to ${this.notification.task.getTextIdentifier()}`
+			case names.TASK_DELETED:
+				return `deleted ${this.notification.task.getTextIdentifier()}`
+			case names.LIST_CREATED:
+				return `created ${this.notification.list.title}`
+			case names.TEAM_MEMBER_ADDED:
+				who = `${this.notification.member.getDisplayName()}`
+
+				if (user !== null && user.id === this.notification.memeber.id) {
+					who = 'you'
+				}
+
+				return `added ${who} to the ${this.notification.team.title} team`
+		}
+
+		return ''
+	}
 }
diff --git a/src/models/task.js b/src/models/task.js
index 7a9e98cac..9ef7fab68 100644
--- a/src/models/task.js
+++ b/src/models/task.js
@@ -113,6 +113,14 @@ export default class TaskModel extends AbstractModel {
 		}
 	}
 
+	getTextIdentifier() {
+		if(this.identifier === '') {
+			return `#${this.index}`
+		}
+
+		return this.identifier
+	}
+
 	/////////////////
 	// Helper functions
 	///////////////
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
index ad9e4017d..c36bd9d0b 100644
--- a/src/styles/components/notifications.scss
+++ b/src/styles/components/notifications.scss
@@ -33,7 +33,6 @@
 			.user {
 				display: flex;
 				align-items: center;
-				padding-right: .5rem;
 
 				span {
 					font-family: $family-sans-serif;
@@ -44,14 +43,8 @@
 				}
 			}
 
-			.detail {
-				display: flex;
-				justify-content: space-between;
-				width: 100%;
-
-				.created {
-					color: $grey-400;
-				}
+			.detail .created {
+				color: $grey-400;
 			}
 		}
 	}