Make sure due date is properly updated in the UI

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/cards/CardBadges.vue

@@ -26,8 +26,8 @@
 
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
-		<div v-if="card.duedate" v-tooltip="dueDateTooltip" :class="dueIcon">
+		<div v-if="card.duedate" :class="dueIcon">
-			<span>{{ dueTime }}</span>
+			<span>{{ relativeDate }}</span>
 		</div>
 
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -52,12 +52,6 @@ export default {
 			default: null,
 		},
 	},
-	data() {
-		return {
-			dueTime: null,
-			dueIcon: null,
-		}
-	},
 	computed: {
 		checkListCount() {
 			return (this.card.description.match(/\[\s*\x*\]/g) || []).length
@@ -74,36 +68,25 @@ export default {
 		dueDateTooltip() {
 			return moment(this.card.duedate).format('LLLL')
 		},
-	},
+		relativeDate() {
-	created() {
+			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
-		this.updateDueTime()
+			if (diff >= 0 && diff < 45) {
-		setInterval(this.updateDueTime, 10000)
+				return t('core', 'seconds ago')
-	},
-	destroyed() {
-		clearInterval(this.updateDueTime)
-	},
-	methods: {
-		updateDueTime() {
-			if (this.card === undefined) {
-				return
 			}
-
+			return moment(this.card.duedate).fromNow()
-			if (this.card.duedate === null) {
+		},
-				return
+		dueIcon() {
+			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
+			if (days < 0) {
+				return 'icon-calendar due icon overdue'
 			}
-
+			if (days === 0) {
-			this.dueTime = OC.Util.relativeModifiedDate(this.card.duedate)
+				return 'icon-calendar-dark due icon now'
-
-			const timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
-			if (timeInHours >= 1) {
-				this.dueIcon = 'icon-calendar-dark due icon next'
 			}
-			if (timeInHours === 0) {
+			if (days === 1) {
-				this.dueIcon = 'icon-calendar-dark due icon now'
+				return 'icon-calendar-dark due icon next'
-			}
-			if (timeInHours < 0) {
-				this.dueIcon = 'icon-calendar due icon overdue'
 			}
+			return 'icon-calendar-dark due icon'
 		},
 	},
 }
@@ -153,7 +136,7 @@ export default {
 			opacity: .7;
 		}
 		&.next {
-			background-color: var(--color-warning-light);
+			background-color: var(--color-background-dark);
 			opacity: .7;
 		}