Added ability to mark card as done

Closes #534

Signed-off-by: Thanos Kamber <thanos.kamber@gmail.com>

src/components/card/CardSidebarTabDetails.vue

@@ -22,6 +22,31 @@
 
 <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"
@@ -35,7 +60,21 @@
 			@select="assignUserToCard"
 			@remove="removeUserFromCard" />
 
-		<DueDateSelector :card="card" :can-edit="canEdit" @change="updateCardDue" />
+		<div v-if="card.done">
+			<div class="done">
+				<div v-if="!card.duedate && card.done" class="no-due">
+					{{ t('deck', 'No due date') }}
+				</div>
+				<div v-if="card.done" class="done-label">
+					{{ t('deck', 'Done') }}
+				</div>
+			</div>
+		</div>
+
+		<DueDateSelector v-else
+			:card="card"
+			:can-edit="canEdit && !saving"
+			@change="updateCardDue" />
 
 		<div v-if="projectsEnabled" class="section-wrapper">
 			<CollectionList v-if="card.id"
@@ -55,6 +94,10 @@
 <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'
@@ -75,6 +118,10 @@ export default {
 		TagSelector,
 		Description,
 		CollectionList,
+		NcButton,
+		ArchiveIcon,
+		CheckIcon,
+		ClearIcon,
 	},
 	mixins: [Color],
 	props: {
@@ -121,6 +168,12 @@ 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
@@ -218,12 +271,60 @@ export default {
 		display: flex;
 		flex-wrap: wrap;
 
-		button.action-item--single {
-			margin-top: -3px;
+		.remove-due-button{
+			margin-top: -2px;
+			margin-left: 6px;
 		}
 	}
 }
 
+.button-group {
+	width: 100%;
+	display: flex;
+
+	button {
+		width: 100%;
+	}
+}
+
+.done{
+	display: flex;
+	margin-left: 40px;
+
+	.no-due, .done-label{
+		line-height: 30px;
+		align-items: baseline;
+		flex-shrink: 1;
+		z-index: 2;
+		margin: 13px 5px 5px;
+		font-size: 100%;
+	}
+
+	.no-due{
+		padding: 3px;
+		color: var(--color-main-text);
+	}
+
+	.done-label {
+		font-size: 90%;
+		padding: 3px 20px;
+
+		color: var(--color-primary-text);
+		background-color: var(--color-success);
+		border-radius: 15px;
+	}
+}
+
+.tag {
+	flex-grow: 0;
+	flex-shrink: 1;
+	overflow: hidden;
+	padding: 0px 5px;
+	border-radius: 15px;
+	font-size: 85%;
+	margin-right: 3px;
+}
+
 .avatarLabel {
 	padding: 6px
 }

src/components/cards/CardItem.vue

@@ -64,7 +64,8 @@
 					<input type="submit" value="" class="icon-confirm">
 				</form>
 
-				<DueDate v-if="!editing" :card="card" />
+				<DueDate v-if="!editing && !card.done" :card="card" />
+				<Done v-else-if="!editing && card.done" :card="card" />
 
 				<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
 			</div>
@@ -94,12 +95,13 @@ import Color from '../../mixins/color.js'
 import labelStyle from '../../mixins/labelStyle.js'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
 import CardMenu from './CardMenu.vue'
+import Done from './badges/Done.vue'
 import DueDate from './badges/DueDate.vue'
 import CardCover from './CardCover.vue'
 
 export default {
 	name: 'CardItem',
-	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate, CardCover },
+	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate, CardCover, Done },
 	directives: {
 		ClickOutside,
 	},

src/components/cards/CardMenu.vue

@@ -36,6 +36,9 @@
 					@click="unassignCardFromMe()">
 					{{ t('deck', 'Unassign myself') }}
 				</NcActionButton>
+				<NcActionButton icon="icon-checkmark" :close-after-click="true" @click="changeCardDoneStatus()">
+					{{ card.done ? t('deck', 'Mark as not done') : t('deck', 'Mark as done') }}
+				</NcActionButton>
 				<NcActionButton icon="icon-external" :close-after-click="true" @click="modalShow=true">
 					{{ t('deck', 'Move card') }}
 				</NcActionButton>
@@ -157,6 +160,9 @@ export default {
 			this.$store.dispatch('deleteCard', this.card)
 			showUndo(t('deck', 'Card deleted'), () => this.$store.dispatch('cardUndoDelete', this.card))
 		},
+		changeCardDoneStatus() {
+			this.$store.dispatch('changeCardDoneStatus', { ...this.card, done: !this.card.done })
+		},
 		archiveUnarchiveCard() {
 			this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
 		},

src/components/cards/badges/Done.vue

@@ -0,0 +1,68 @@
+<!--
+  - @copyright Copyright (c) 2022 Thanos Kamber <thanos.kamber@gmail.com>
+  -
+  - @author Thanos Kamber <thanos.kamber@gmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div v-if="card" class="done">
+		<transition name="zoom">
+			<div class="icon-check-circle">
+				<CheckCircle :size="20" />
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+
+export default {
+	name: 'Done',
+	components: {
+		CheckCircle,
+	},
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.icon-check-circle {
+		color: var(--color-success);
+		margin: 14px;
+	}
+
+	@media print {
+		.icon-check-circle {
+			span {
+				display: none;
+			}
+
+			&::before {
+				color: var(--color-text-lighter);
+				content: 'Done';
+			}
+		}
+	}
+</style>