From 35e7c7dbe7535e893a44b019f36b3df2021593ad Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Fri, 16 Aug 2019 10:30:50 +0200
Subject: [PATCH 1/4] changed time calculation

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/card/CardSidebar.vue |  4 ++--
 src/components/cards/CardBadges.vue | 22 ++--------------------
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 8545310f0..4d2362d7c 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -108,8 +108,8 @@ export default {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
-			let lastModified = this.currentCard.lastModified
-			let createdAt = this.currentCard.createdAt
+			let lastModified = OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
+			let createdAt = OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
 
 			return t('deck', 'Modified') + ': ' + lastModified + ' ' + t('deck', 'Created') + ': ' + createdAt
 		},
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 047f84009..ded079ab7 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -59,7 +59,7 @@ export default {
 		dueIcon() {
 			let timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
 
-			if (timeInHours === 1) {
+			if (timeInHours >= 1) {
 				return 'icon-calendar-dark due icon next'
 			}
 			if (timeInHours === 0) {
@@ -70,25 +70,7 @@ export default {
 			}
 		},
 		dueTimeDiff() {
-			let unit = 'Minutes'
-			let timeInMin = (Date.parse(this.card.duedate) - Date.now()) / 60000
-
-			if (timeInMin > 59) {
-				timeInMin /= 60
-				unit = 'Hours'
-			}
-
-			if (timeInMin > 23) {
-				timeInMin /= 24
-				unit = 'Days'
-			}
-
-			if (timeInMin > 355) {
-				timeInMin /= 355
-				unit = 'Years'
-			}
-
-			return Math.round(timeInMin) + ' ' + unit
+			return OC.Util.relativeModifiedDate(this.card.duedate)
 		},
 		card() {
 			return this.$store.getters.cardById(this.id)

From f63eef36b7aca963a811a474f1467da1c07c0933 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Fri, 16 Aug 2019 12:23:17 +0200
Subject: [PATCH 2/4] time calc all 10 secs

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/card/CardSidebar.vue | 30 ++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 4d2362d7c..be16c4021 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -99,6 +99,14 @@ export default {
 			desc: null
 		}
 	},
+	created() {
+		setInterval(this.lastModifiedRelative, 10000)		
+		setInterval(this.lastCreatedRemative, 10000)
+	},
+	destroyed() {
+		clearInterval(this.lastModifiedRelative)
+		clearInterval(this.lastCreatedRemative)
+	},
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
@@ -108,10 +116,7 @@ export default {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
-			let lastModified = OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
-			let createdAt = OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
-
-			return t('deck', 'Modified') + ': ' + lastModified + ' ' + t('deck', 'Created') + ': ' + createdAt
+			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative() + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative()
 		},
 		toolbarActions() {
 			return [
@@ -133,7 +138,7 @@ export default {
 		}
 	},
 	watch: {
-		'currentCard': {
+		/* currentCard: {
 			immediate: true,
 			handler() {
 				this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
@@ -141,13 +146,28 @@ export default {
 				this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
 				this.desc = this.currentCard.description
 			}
+		}, */
+		currentCard() {
+			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
+			this.allLabels = this.currentCard.labels
+			this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
+			this.desc = this.currentCard.description
+			console.log("change card" + this.desc)
 		},
+
 		desc() {
 			this.copiedCard.description = this.desc
 			this.saveDesc()
 		}
 	},
 	methods: {
+		lastModifiedRelative() {
+			console.log(this.currentCard.lastModified)
+			return OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
+		},
+		lastCreatedRemative() {
+			return OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
+		},
 		setDue() {
 			this.$store.dispatch('updateCardDue', this.copiedCard)
 		},

From c0a95978779a04d3448d914e05c90c535c23a5b2 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Fri, 16 Aug 2019 12:50:30 +0200
Subject: [PATCH 3/4] time calc all 10 secs and checkbox icon

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/card/CardSidebar.vue | 52 +++++++++++-------------
 src/components/cards/CardBadges.vue | 61 +++++++++++++++++++----------
 2 files changed, 63 insertions(+), 50 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index be16c4021..444ac2701 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -52,8 +52,10 @@
 
 			<DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en"
 				format="YYYY-MM-DD HH:mm" confirm @change="setDue()" />
-			<button v-tooltip="t('deck', 'Delete')" v-if="copiedCard.duedate" class="icon-delete"
-				@click="removeDue()" />
+			
+			<Actions>
+				<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">{{ t('deck', 'Remove due date') }}</ActionButton>
+			</Actions>
 
 			<markdown-editor ref="markdownEditor" v-model="desc" :configs="{autofocus: true, autosave: {enabled: true, uniqueId: 'unique'}, toolbar: false}" />
 		</AppSidebarTab>
@@ -73,6 +75,8 @@
 import { AppSidebar, AppSidebarTab, Multiselect, DatetimePicker } from 'nextcloud-vue'
 import { mapState } from 'vuex'
 import markdownEditor from 'vue-easymde/src/markdown-editor'
+import { Actions } from 'nextcloud-vue/dist/Components/Actions'
+import { ActionButton } from 'nextcloud-vue/dist/Components/ActionButton'
 
 export default {
 	name: 'CardSidebar',
@@ -81,7 +85,9 @@ export default {
 		AppSidebarTab,
 		Multiselect,
 		DatetimePicker,
-		markdownEditor
+		markdownEditor,
+		Actions,
+		ActionButton
 	},
 	props: {
 		id: {
@@ -96,17 +102,11 @@ export default {
 			isLoading: false,
 			copiedCard: null,
 			allLabels: null,
-			desc: null
+			desc: null,
+			lastModifiedRelative: null,
+			lastCreatedRemative: null
 		}
 	},
-	created() {
-		setInterval(this.lastModifiedRelative, 10000)		
-		setInterval(this.lastCreatedRemative, 10000)
-	},
-	destroyed() {
-		clearInterval(this.lastModifiedRelative)
-		clearInterval(this.lastCreatedRemative)
-	},
 	computed: {
 		...mapState({
 			currentBoard: state => state.currentBoard,
@@ -116,7 +116,7 @@ export default {
 			return this.$store.getters.cardById(this.id)
 		},
 		subtitle() {
-			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative() + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative()
+			return t('deck', 'Modified') + ': ' + this.lastModifiedRelative + ' ' + t('deck', 'Created') + ': ' + this.lastCreatedRemative
 		},
 		toolbarActions() {
 			return [
@@ -138,21 +138,12 @@ export default {
 		}
 	},
 	watch: {
-		/* currentCard: {
-			immediate: true,
-			handler() {
-				this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
-				this.allLabels = this.currentCard.labels
-				this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
-				this.desc = this.currentCard.description
-			}
-		}, */
 		currentCard() {
 			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
 			this.allLabels = this.currentCard.labels
 			this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
 			this.desc = this.currentCard.description
-			console.log("change card" + this.desc)
+			this.updateRelativeTimestamps()
 		},
 
 		desc() {
@@ -160,13 +151,16 @@ export default {
 			this.saveDesc()
 		}
 	},
+	created() {
+		setInterval(this.updateRelativeTimestamps, 10000)
+	},
+	destroyed() {
+		clearInterval(this.updateRelativeTimestamps)
+	},
 	methods: {
-		lastModifiedRelative() {
-			console.log(this.currentCard.lastModified)
-			return OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
-		},
-		lastCreatedRemative() {
-			return OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
+		updateRelativeTimestamps() {
+			this.lastModifiedRelative = OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
+			this.lastCreatedRemative = OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
 		},
 		setDue() {
 			this.$store.dispatch('updateCardDue', this.copiedCard)
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index ded079ab7..3077a6879 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -1,3 +1,5 @@
+cardbadges
+
 <!--
   - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
   -
@@ -27,12 +29,10 @@
 		<div v-if="card.description" class="card-comments icon icon-filetype-text" />
 
 		<div v-if="card.duedate" :class="dueIcon">
-			<span>{{ dueTimeDiff }}</span>
+			<span>{{ dueTime }}</span>
 		</div>
-
-		<div v-if="card.description && card.description.match(/\[\s*\]/g)" class="card-tasks icon icon-checkmark">
-			<!-- TODO: get checkbox values -->
-			<span>0/0</span>
+		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
+			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
 		</div>
 
 		<div v-if="card.assignedUsers" class="card-assigned-users">
@@ -52,29 +52,48 @@ export default {
 			default: null
 		}
 	},
+	data() {
+		return {
+			dueTime: null,
+			dueIcon: null
+		}
+	},
 	computed: {
+		checkListCount() {
+			return (this.card.description.match(/\[\s*\x*\]/g) || []).length
+		},
+		checkListCheckedCount() {
+			return (this.card.description.match(/\[\s*x\s*\]/g) || []).length
+		},
 		compactMode() {
 			return false
 		},
-		dueIcon() {
-			let timeInHours = Math.round((Date.parse(this.card.duedate) - Date.now()) / 1000 / 60 / 60 / 24)
-
-			if (timeInHours >= 1) {
-				return 'icon-calendar-dark due icon next'
-			}
-			if (timeInHours === 0) {
-				return 'icon-calendar-dark due icon now'
-			}
-			if (timeInHours < 0) {
-				return 'icon-calendar-dark due icon overdue'
-			}
-		},
-		dueTimeDiff() {
-			return OC.Util.relativeModifiedDate(this.card.duedate)
-		},
 		card() {
 			return this.$store.getters.cardById(this.id)
 		}
+	},
+	created() {
+		this.updateDueTime()
+		setInterval(this.updateDueTime, 10000)
+	},
+	destroyed() {
+		clearInterval(this.updateDueTime)
+	},
+	methods: {
+		updateDueTime() {
+			this.dueTime = OC.Util.relativeModifiedDate(this.card.duedate)
+
+			let 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) {
+				this.dueIcon = 'icon-calendar-dark due icon now'
+			}
+			if (timeInHours < 0) {
+				this.dueIcon = 'icon-calendar-dark due icon overdue'
+			}
+		}
 	}
 }
 </script>

From 0de1c581e8e712a0f18444b91debd7d181b97395 Mon Sep 17 00:00:00 2001
From: Jakob <jakob.roehrl@web.de>
Date: Tue, 20 Aug 2019 11:23:43 +0200
Subject: [PATCH 4/4] watcher readded

Signed-off-by: Jakob <jakob.roehrl@web.de>
---
 src/components/card/CardSidebar.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 444ac2701..d9e6d3d8b 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -52,7 +52,7 @@
 
 			<DatetimePicker v-model="copiedCard.duedate" type="datetime" lang="en"
 				format="YYYY-MM-DD HH:mm" confirm @change="setDue()" />
-			
+
 			<Actions>
 				<ActionButton v-if="copiedCard.duedate" icon="icon-delete" @click="removeDue()">{{ t('deck', 'Remove due date') }}</ActionButton>
 			</Actions>
@@ -138,12 +138,15 @@ export default {
 		}
 	},
 	watch: {
-		currentCard() {
-			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
-			this.allLabels = this.currentCard.labels
-			this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
-			this.desc = this.currentCard.description
-			this.updateRelativeTimestamps()
+		'currentCard': {
+			immediate: true,
+			handler() {
+				this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
+				this.allLabels = this.currentCard.labels
+				this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
+				this.desc = this.currentCard.description
+				this.updateRelativeTimestamps()
+			}
 		},
 
 		desc() {