fix: Move all actions to the duedate section

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

src/components/card/CardDetailEntry.vue

@@ -0,0 +1,27 @@
+<template>
+	<div class="selector-wrapper" :aria-label="label">
+		<div class="selector-wrapper--icon">
+			<slot name="icon" />
+		</div>
+		<div class="selector-wrapper--content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'CardDetailEntry',
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+	},
+})
+</script>
+<style lang="scss">
+@import '../../css/selector';
+</style>

src/components/card/CardSidebarTabDetails.vue

@@ -22,31 +22,6 @@
 
 <template>
 	<div v-if="copiedCard">
-		<div class="section-wrapper">
-			<div class="section-details">
-				<div class="button-group">
-					<NcButton v-if="!card.done" type="secondary" @click="changeCardDoneStatus()">
-						<template #icon>
-							<CheckIcon :size="20" />
-						</template>
-						{{ t('deck', 'Mark as done') }}
-					</NcButton>
-					<NcButton v-if="card.done" type="tertiary" @click="changeCardDoneStatus()">
-						<template #icon>
-							<ClearIcon :size="20" />
-						</template>
-						{{ t('deck', 'Mark as not done') }}
-					</NcButton>
-					<NcButton type="tertiary" @click="archiveUnarchiveCard()">
-						<template #icon>
-							<ArchiveIcon :size="20" />
-						</template>
-						{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
-					</NcButton>
-				</div>
-			</div>
-		</div>
-
 		<TagSelector :card="card"
 			:labels="currentBoard.labels"
 			:disabled="!canEdit"
@@ -60,17 +35,7 @@
 			@select="assignUserToCard"
 			@remove="removeUserFromCard" />
 
-		<div v-if="card.done">
+		<DueDateSelector :card="card"
-			<div class="done">
-				<CheckIcon :size="20" /> {{ t('deck', 'Done') }}
-				<div v-if="card.done" class="done-label">
-					{{ stringify(card.done) }}
-				</div>
-			</div>
-		</div>
-
-		<DueDateSelector v-else
-			:card="card"
 			:can-edit="canEdit && !saving"
 			@change="updateCardDue" />
 
@@ -92,10 +57,6 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import moment from '@nextcloud/moment'
-import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
-import CheckIcon from 'vue-material-design-icons/Check.vue'
-import ClearIcon from 'vue-material-design-icons/Close.vue'
-import { NcButton } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 
 import { CollectionList } from 'nextcloud-vue-collections'
@@ -116,10 +77,6 @@ export default {
 		TagSelector,
 		Description,
 		CollectionList,
-		NcButton,
-		ArchiveIcon,
-		CheckIcon,
-		ClearIcon,
 	},
 	mixins: [Color],
 	props: {
@@ -166,12 +123,6 @@ export default {
 			this.$store.dispatch('updateCardDesc', { ...this.card, description: newDesc })
 			this.copiedCard.description = newDesc
 		},
-		changeCardDoneStatus() {
-			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
-		},
-		archiveUnarchiveCard() {
-			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
-		},
 		async initialize() {
 			if (!this.card) {
 				return

src/components/card/DueDateSelector.vue

@@ -1,9 +1,8 @@
 <template>
-	<div class="selector-wrapper" :aria-label="t('deck', 'Assign a due date to this card…')">
+	<CardDetailEntry :label="t('deck', 'Assign a due date to this card…')">
-		<div class="selector-wrapper--icon">
+		<Calendar v-if="!card.done" slot="icon" :size="20" />
-			<Calendar :size="20" />
+		<CalendarCheck v-else slot="icon" :size="20" />
-		</div>
+		<template v-if="!card.done && !card.archived">
-		<div class="duedate-selector">
 			<NcDateTimePickerNative v-if="duedate"
 				id="card-duedate-picker"
 				v-model="duedate"
@@ -43,23 +42,77 @@
 					{{ t('deck', 'Remove due date') }}
 				</NcActionButton>
 			</NcActions>
+
+			<NcButton v-if="!card.done"
+				type="secondary"
+				class="completed-button"
+				@click="changeCardDoneStatus()">
+				<template #icon>
+					<CheckIcon :size="20" />
+				</template>
+				{{ t('deck', 'Completed') }}
+			</NcButton>
+		</template>
+		<template v-else>
+			<div class="done-info">
+				<span v-if="card.done" class="done-info--done">
+					{{ formatReadableDate(card.done) }}
+				</span>
+				<span v-if="duedate" class="done-info--duedate" :class="{ 'dimmed': card.done }">
+					{{ t('deck', 'Due at:') }}
+					{{ formatReadableDate(duedate) }}
+				</span>
 			</div>
+			<div class="due-actions">
+				<NcButton v-if="!card.archived"
+					type="tertiary"
+					:title="t('deck', 'Not completed')"
+					@click="changeCardDoneStatus()">
+					<template #icon>
+						<ClearIcon :size="20" />
+					</template>
+				</NcButton>
+				<NcButton type="secondary" @click="archiveUnarchiveCard()">
+					<template #icon>
+						<ArchiveIcon :size="20" />
+					</template>
+					{{ card.archived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
+				</NcButton>
 			</div>
 		</template>
+	</CardDetailEntry>
+</template>
 
 <script>
 import { defineComponent } from 'vue'
-import { NcActionButton, NcActions, NcActionSeparator, NcDateTimePickerNative } from '@nextcloud/vue'
+import {
+	NcActionButton,
+	NcActions,
+	NcActionSeparator,
+	NcButton,
+	NcDateTimePickerNative,
+} from '@nextcloud/vue'
 import { getDayNamesMin, getFirstDay, getMonthNamesShort } from '@nextcloud/l10n'
+import moment from '@nextcloud/moment'
+import ArchiveIcon from 'vue-material-design-icons/Archive.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import Calendar from 'vue-material-design-icons/Calendar.vue'
-import moment from '@nextcloud/moment'
+import CalendarCheck from 'vue-material-design-icons/CalendarCheck.vue'
+import CheckIcon from 'vue-material-design-icons/Check.vue'
+import ClearIcon from 'vue-material-design-icons/Close.vue'
+import CardDetailEntry from './CardDetailEntry.vue'
 
 export default defineComponent({
 	name: 'DueDateSelector',
 	components: {
+		NcButton,
+		ArchiveIcon,
+		ClearIcon,
+		CardDetailEntry,
 		Plus,
 		Calendar,
+		CalendarCheck,
+		CheckIcon,
 		NcActions,
 		NcActionButton,
 		NcActionSeparator,
@@ -166,13 +219,38 @@ export default defineComponent({
 		getTimestamp(momentObject) {
 			return momentObject?.minute(0).second(0).millisecond(0).toDate() || null
 		},
+		changeCardDoneStatus() {
+			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+		},
+		archiveUnarchiveCard() {
+			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
+		},
+		formatReadableDate(date) {
+			return moment(date).format('lll')
+		},
 	},
 })
 </script>
-<style lang="scss">
+<style scoped lang="scss">
-@import '../../css/selector';
+.done-info {
+	flex-grow: 1;
+}
 
-.duedate-selector {
+.done-info--duedate,
+.done-info--done {
 	display: flex;
+	padding-top: 10px;
+	&.dimmed {
+		color: var(--color-text-maxcontrast);
+	}
+}
+
+.completed-button {
+	margin-left: auto;
+}
+
+.due-actions {
+	display: flex;
+	align-items: flex-start;
 }
 </style>

src/css/selector.scss

@@ -33,4 +33,9 @@
 	&--selector {
 		width: 100%;
 	}
+
+	&--content {
+		display: flex;
+		flex-grow: 1;
+	}
 }