time calc all 10 secs and checkbox icon

Signed-off-by: Jakob <jakob.roehrl@web.de>

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() {
+		updateRelativeTimestamps() {
-			console.log(this.currentCard.lastModified)
+			this.lastModifiedRelative = OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
-			return OC.Util.relativeModifiedDate(this.currentCard.lastModified * 1000)
+			this.lastCreatedRemative = OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
-		},
-		lastCreatedRemative() {
-			return OC.Util.relativeModifiedDate(this.currentCard.createdAt * 1000)
 		},
 		setDue() {
 			this.$store.dispatch('updateCardDue', this.copiedCard)

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 && checkListCount > 0" class="card-tasks icon icon-checkmark">
-		<div v-if="card.description && card.description.match(/\[\s*\]/g)" class="card-tasks icon icon-checkmark">
+			<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
-			<!-- TODO: get checkbox values -->
-			<span>0/0</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>