From a0c4732f81d8c13d6362c17f7a6da1d96306d794 Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Thu, 30 Jan 2020 20:49:00 +0000
Subject: [PATCH] Add moment.js for date related things (#50)

Fix saving

Use mixin everywhere

Format attachment dates

Add format date mixing

Use moment js on task list page

Use moment js on home page tasks

Add moment js

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/50
---
 package.json                                  | 1 +
 src/components/tasks/ShowListTasks.vue        | 2 +-
 src/components/tasks/ShowTasks.vue            | 5 +----
 src/components/tasks/reusable/attachments.vue | 3 +--
 src/main.js                                   | 9 +++++++++
 src/models/attachment.js                      | 1 +
 src/services/attachment.js                    | 5 +++++
 src/services/task.js                          | 9 +++++++++
 src/styles/components/tasks.scss              | 3 ++-
 9 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 82d86b82e0..6196f96bfa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "bulma": "^0.8.0",
     "copy-to-clipboard": "^3.2.0",
     "lodash": "^4.17.15",
+    "moment": "^2.24.0",
     "register-service-worker": "^1.6.2",
     "v-tooltip": "^2.0.2",
     "verte": "^0.0.12",
diff --git a/src/components/tasks/ShowListTasks.vue b/src/components/tasks/ShowListTasks.vue
index 81e3ec283b..c689c47612 100644
--- a/src/components/tasks/ShowListTasks.vue
+++ b/src/components/tasks/ShowListTasks.vue
@@ -46,7 +46,7 @@
 									<span>{{ label.title }}</span>
 								</span>
 								<img :src="gravatar(a)" :alt="a.username" v-for="(a, i) in l.assignees" class="avatar" :key="l.id + 'assignee' + a.id + i"/>
-								<i v-if="l.dueDate > 0" :class="{'overdue': (l.dueDate <= new Date())}"> - Due on {{new Date(l.dueDate).toLocaleString()}}</i>
+								<i v-if="l.dueDate > 0" :class="{'overdue': l.dueDate <= new Date() && !l.done}" v-tooltip="formatDate(l.dueDate)"> - Due {{formatDateSince(l.dueDate)}}</i>
 								<priority-label :priority="l.priority"/>
 							</router-link>
 						</span>
diff --git a/src/components/tasks/ShowTasks.vue b/src/components/tasks/ShowTasks.vue
index d6b452d8a8..05d655c041 100644
--- a/src/components/tasks/ShowTasks.vue
+++ b/src/components/tasks/ShowTasks.vue
@@ -21,7 +21,7 @@
 					</div>
 					<span class="tasktext">
 						{{l.text}}
-						<i v-if="l.dueDate > 0" :class="{'overdue': (new Date(l.dueDate * 1000) <= new Date())}"> - Due on {{formatUnixDate(l.dueDate)}}</i>
+						<i v-if="l.dueDate > 0" :class="{'overdue': l.dueDate <= new Date()}" v-tooltip="formatDate(l.dueDate)"> - Due {{formatDateSince(l.dueDate)}}</i>
 						<priority-label :priority="l.priority"/>
 					</span>
 				</label>
@@ -84,9 +84,6 @@
 						message.error(e, this)
 					})
 			},
-			formatUnixDate(dateUnix) {
-				return (new Date(dateUnix * 1000)).toLocaleString()
-			},
 			gotoList(lid) {
 				router.push({name: 'showList', params: {id: lid}})
 			},
diff --git a/src/components/tasks/reusable/attachments.vue b/src/components/tasks/reusable/attachments.vue
index 258e000cf9..380323f72e 100644
--- a/src/components/tasks/reusable/attachments.vue
+++ b/src/components/tasks/reusable/attachments.vue
@@ -31,8 +31,7 @@
 				</td>
 				<td>{{ a.file.getHumanSize() }}</td>
 				<td>{{ a.file.mime }}</td>
-<!--				FIXME: This needs a better solution-->
-				<td>{{ new Date(a.created) }}</td>
+				<td v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</td>
 				<td>
 					<div class="buttons has-addons">
 						<a class="button is-primary noshadow" @click="downloadAttachment(a)" v-tooltip="'Download this attachment'">
diff --git a/src/main.js b/src/main.js
index 7aca0fa14f..0653d04b20 100644
--- a/src/main.js
+++ b/src/main.js
@@ -120,6 +120,15 @@ Vue.directive('focus', {
 // Check the user's auth status when the app starts
 auth.checkAuth()
 
+// Format date mixin
+import moment from 'moment'
+Vue.mixin({
+	methods: {
+		formatDateSince: date => moment(date).fromNow(),
+		formatDate: date => moment(date).format('LLL'),
+	}
+})
+
 new Vue({
     router,
     render: h => h(App)
diff --git a/src/models/attachment.js b/src/models/attachment.js
index 369fa1f510..1c8650e0ef 100644
--- a/src/models/attachment.js
+++ b/src/models/attachment.js
@@ -7,6 +7,7 @@ export default class AttachmentModel extends AbstractModel {
 		super(data)
 		this.created_by = new UserModel(this.created_by)
 		this.file = new FileModel(this.file)
+		this.created = new Date(this.created * 1000)
 	}
 
 	defaults() {
diff --git a/src/services/attachment.js b/src/services/attachment.js
index 8a600444dd..19eef1e3ea 100644
--- a/src/services/attachment.js
+++ b/src/services/attachment.js
@@ -82,4 +82,9 @@ export default class AttachmentService extends AbstractService {
 				cancel()
 			})
 	}
+
+	processModel(model) {
+		model.created = Math.round(+new Date(model.created) / 1000)
+		return model
+	}
 }
diff --git a/src/services/task.js b/src/services/task.js
index b91585b0c2..a390309025 100644
--- a/src/services/task.js
+++ b/src/services/task.js
@@ -1,5 +1,6 @@
 import AbstractService from './abstractService'
 import TaskModel from '../models/task'
+import AttachmentService from './attachment'
 
 export default class TaskService extends AbstractService {
 	constructor() {
@@ -81,6 +82,14 @@ export default class TaskService extends AbstractService {
 			})
 		})
 
+		// Process all attachments to preven parsing errors
+		if(model.attachments.length > 0) {
+			const attachmentService = new AttachmentService()
+			model.attachments.map(a => {
+				return attachmentService.processModel(a)
+			})
+		}
+
 		return model
 	}
 }
\ No newline at end of file
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index df9b999dc9..30655b5cad 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -33,7 +33,8 @@
       display: inline-block;
       cursor: pointer;
 
-      .tasktext {
+      .tasktext,
+      &.tasktext {
         vertical-align: top;
         white-space: nowrap;
         text-overflow: ellipsis;