feat: add due date tab

Signed-off-by: Luka Trovic <luka@nextcloud.com>

src/components/card/CardModal.vue

@@ -39,7 +39,7 @@
 				<i class="icon icon-tag" />
 				Tags
 			</div>
-			<div class="tab due-date">
+			<div class="tab due-date" :class="{active: activeTab === 'duedate'}" @click="activeTab = 'duedate'">
 				<i class="icon icon-calendar-dark" />
 				Due date
 			</div>
@@ -56,6 +56,7 @@
 			<div class="content-tabs">
 				<MembersTab :card="currentCard" @click="activeTab = 'members'" @active-tab="changeActiveTab" />
 				<TagsTab :card="currentCard" @click="activeTab = 'tags'" @active-tab="changeActiveTab" />
+				<DueDateTab :card="currentCard" @click="activeTab = 'duedate'" @active-tab="changeActiveTab" />
 			</div>
 			<Description :key="currentCard.id" :card="currentCard" @change="descriptionChanged" />
 		</div>
@@ -88,13 +89,14 @@ import { showError } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
 import MembersTab from './MembersTab.vue'
 import TagsTab from './TagsTab.vue'
+import DueDateTab from './DueDateTab.vue'
 import Description from './Description.vue'
 
 const capabilities = window.OC.getCapabilities()
 
 export default {
 	name: 'CardModal',
-	components: { Avatar, MembersTab, Description, TagsTab },
+	components: { Avatar, MembersTab, Description, TagsTab, DueDateTab },
 	mixins: [relativeDate],
 	props: {
 		id: {
@@ -198,7 +200,7 @@ export default {
 <style lang="scss" scoped>
 .content-tabs {
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-columns: 1fr 2fr 1fr;
 	align-items: center;
 }
 

src/components/card/DueDateTab.vue

@@ -0,0 +1,139 @@
+<template>
+	<div class="section-details">
+		<div @click="$emit('active-tab', 'duedate')">
+			<DatetimePicker v-model="duedate"
+				:placeholder="t('deck', 'Set a due date')"
+				type="datetime"
+				:minute-step="5"
+				:show-second="false"
+				:lang="lang"
+				:disabled="saving || !canEdit"
+				:shortcuts="shortcuts"
+				confirm />
+		</div>
+	</div>
+</template>
+<script>
+import { DatetimePicker } from '@nextcloud/vue'
+import { mapState, mapGetters } from 'vuex'
+import Color from '../../mixins/color'
+import labelStyle from '../../mixins/labelStyle'
+import {
+	getDayNamesMin,
+	getFirstDay,
+	getMonthNamesShort,
+} from '@nextcloud/l10n'
+import moment from '@nextcloud/moment'
+
+export default {
+	components: { DatetimePicker },
+	mixins: [Color, labelStyle],
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+	data() {
+		return {
+			saving: false,
+			copiedCard: null,
+			lang: {
+				days: getDayNamesMin(),
+				months: getMonthNamesShort(),
+				formatLocale: {
+					firstDayOfWeek: getFirstDay() === 0 ? 7 : getFirstDay(),
+				},
+				placeholder: {
+					date: t('deck', 'Select Date'),
+				},
+			},
+			format: {
+				stringify: this.stringify,
+				parse: this.parse,
+			},
+			shortcuts: [
+				{
+					text: t('deck', 'Today'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate())
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+				{
+					text: t('deck', 'Tomorrow'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate() + 1)
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+				{
+					text: t('deck', 'Next week'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate() + 7)
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+				{
+					text: t('deck', 'Next month'),
+					onClick() {
+						const date = new Date()
+						date.setDate(date.getDate() + 30)
+						date.setHours(23)
+						date.setMinutes(59)
+						return date
+					},
+				},
+			],
+		}
+	},
+	computed: {
+		...mapState({
+			currentBoard: state => state.currentBoard,
+		}),
+		...mapGetters(['canEdit']),
+		labelsSorted() {
+			return [...this.currentBoard.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
+		},
+		duedate: {
+			get() {
+				return this.card.duedate ? new Date(this.card.duedate) : null
+			},
+			async set(val) {
+				this.saving = true
+				await this.$store.dispatch('updateCardDue', {
+					...this.copiedCard,
+					duedate: val ? moment(val).format('YYYY-MM-DD H:mm:ss') : null,
+				})
+				this.saving = false
+			},
+		},
+	},
+	watch: {
+		card() {
+			this.initialize()
+		},
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		async initialize() {
+			if (!this.card) {
+				return
+			}
+
+			this.copiedCard = JSON.parse(JSON.stringify(this.card))
+		},
+	},
+}
+</script>

src/components/card/TagsTab.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="section-details">
-		<div v-if="showSelelectTags" @mouseleave="showSelelectTags = false">
+		<div v-if="showSelelectTags || card.labels.length <= 0" @mouseleave="showSelelectTags = false">
 			<Multiselect v-model="assignedLabels"
 				:multiple="true"
 				:disabled="!canEdit"