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

@@ -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",

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>

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}})
 			},

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'">

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)

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

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

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

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;