ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

time calc all 10 secs and checkbox icon

Browse Source 
Signed-off-by: Jakob <jakob.roehrl@web.de>
This commit is contained in:
Jakob
2019-08-16 12:50:30 +02:00
parent f63eef36b7
commit c0a9597877
2 changed files with 63 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/card/CardSidebar.vue
View File

@@ -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)

61
src/components/cards/CardBadges.vue
View File

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