From c6b24dd8f146ae6f9e0e10aafa55fd921e188e2a Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 21 Sep 2021 11:29:40 +0200
Subject: [PATCH] feat: add Done component

---
 src/components/misc/Done.vue                  | 55 +++++++++++++++++++
 src/components/tasks/partials/heading.vue     | 12 +++-
 src/components/tasks/partials/kanban-card.vue | 14 ++---
 src/styles/components/task.scss               | 18 ------
 src/views/list/views/Table.vue                |  9 +--
 5 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 src/components/misc/Done.vue

diff --git a/src/components/misc/Done.vue b/src/components/misc/Done.vue
new file mode 100644
index 000000000..4dcdf0380
--- /dev/null
+++ b/src/components/misc/Done.vue
@@ -0,0 +1,55 @@
+<template>
+    <div
+			v-if="isDone"
+			class="is-done"
+			:class="{ 'is-done--small': variant === variants.SMALL }"
+		>
+			{{ $t('task.attributes.done') }}
+		</div>
+</template>
+
+<script>
+const VARIANTS = {
+	DEFAULT: 'default',
+	SMALL: 'small',
+}
+
+export default {
+	name: 'Done',
+
+	data() {
+		return {
+			variants: VARIANTS,
+		}
+	},
+
+	props: {
+		isDone: {
+			type: Boolean,
+			default: false,
+		},
+		variant: {
+			type: String,
+			default: VARIANTS.DEFAULT,
+			validator: (variant) => Object.values(VARIANTS).includes(variant),
+		},
+	},
+}
+</script>
+
+
+<style lang="scss" scoped>
+.is-done {
+  background: $green;
+  color: $white;
+  padding: .5rem;
+  font-weight: bold;
+  line-height: 1;
+  border-radius: 4px;
+  text-align: center;
+}
+
+.is-done--small {
+	padding: .2rem .3rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/heading.vue b/src/components/tasks/partials/heading.vue
index 326b94e16..982315eb7 100644
--- a/src/components/tasks/partials/heading.vue
+++ b/src/components/tasks/partials/heading.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="heading">
 		<h1 class="title task-id">{{ textIdentifier }}</h1>
-		<div class="is-done" v-if="task.done">Done</div>
+		<Done class="heading__done" :is-done="task.done" />
 		<h1
 			class="title input"
 			:class="{'disabled': !canWrite}"
@@ -28,8 +28,13 @@
 <script>
 import {mapState} from 'vuex'
 
+import Done from '@/components/misc/Done.vue'
+
 export default {
 	name: 'heading',
+	components: {
+		Done,
+	},
 	data() {
 		return {
 			showSavedMessage: false,
@@ -90,3 +95,8 @@ export default {
 }
 </script>
 
+<style lang="scss" scoped>
+.heading__done {
+	margin-left: .5rem;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 1367063e6..5b63b341a 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -12,7 +12,7 @@
 		class="task loader-container draggable"
 	>
 		<span class="task-id">
-			<span class="is-done" v-if="task.done">Done</span>
+			<Done class="kanban-card__done" :is-done="task.done" variant="small" />
 			<template v-if="task.identifier === ''">
 				#{{ task.index }}
 			</template>
@@ -66,6 +66,7 @@
 import {playPop} from '../../../helpers/playPop'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
+import Done from '@/components/misc/Done.vue'
 import Labels from '../../../components/tasks/partials/labels'
 import ChecklistSummary from './checklist-summary'
 
@@ -73,6 +74,7 @@ export default {
 	name: 'kanban-card',
 	components: {
 		ChecklistSummary,
+		Done,
 		PriorityLabel,
 		User,
 		Labels,
@@ -230,12 +232,6 @@ $task-background: $white;
 		display: flex;
 	}
 
-	.is-done {
-		font-size: .75rem;
-		padding: .2rem .3rem;
-		margin: 0 .25rem 0 0;
-	}
-
 	&.is-moving {
 		opacity: .5;
 	}
@@ -264,4 +260,8 @@ $task-background: $white;
 		}
 	}
 }
+
+.kanban-card__done {
+	margin-right: .25rem;
+}
 </style>
\ No newline at end of file
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index f66d4da19..3db356444 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -3,24 +3,6 @@
   background: transparent;
 }
 
-// FIXME: create <Done> component
-// used in
-// - heading.vue
-// - kanban-card.vue
-// - Kanban.vue
-// - Table.vue
-.is-done {
-  background: $green;
-  color: $white;
-  padding: .5rem;
-  font-size: 1rem;
-  margin-left: .5rem;
-  font-weight: bold;
-  line-height: 1;
-  border-radius: 4px;
-  text-align: center;
-}
-
 // FIXME: should be a prop of TaskDetailView.vue
 .modal-container .task-view {
   border-radius: $radius;
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index f359a5d11..f90a597d3 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -134,7 +134,7 @@
 							</router-link>
 						</td>
 						<td v-if="activeColumns.done">
-							<div class="is-done" v-if="t.done">Done</div>
+							<Done :is-done="t.done" variant="small" />
 						</td>
 						<td v-if="activeColumns.title">
 							<router-link :to="{name: 'task.detail', params: { id: t.id }}">{{ t.title }}</router-link>
@@ -190,6 +190,7 @@
 
 <script>
 import taskList from '../../../components/tasks/mixins/taskList'
+import Done from '@/components/misc/Done.vue'
 import User from '../../../components/misc/user'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import Labels from '../../../components/tasks/partials/labels'
@@ -203,6 +204,7 @@ import Pagination from '@/components/misc/pagination.vue'
 export default {
 	name: 'Table',
 	components: {
+		Done,
 		FilterPopup,
 		Sort,
 		Fancycheckbox,
@@ -319,11 +321,6 @@ export default {
 		.user {
 			margin: 0;
 		}
-
-		.is-done {
-			font-size: .9rem;
-			margin: 0;
-		}
 	}
 }
 </style>
\ No newline at end of file