Show notification text based on their content

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) {

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

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 ''
+	}
 }

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
 	///////////////

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;
 			}
 		}
 	}