From 37196bbf1825c6a90892d330831332a6e59bc321 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Sat, 11 Jul 2020 10:41:41 +0200
Subject: [PATCH] Move duedate to separate component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/cards/CardBadges.vue     |  11 +--
 src/components/cards/CardItem.vue       | 122 ++----------------------
 src/components/cards/badges/DueDate.vue | 115 ++++++++++++++++++++++
 src/css/labels.scss                     |  39 ++++++++
 4 files changed, 167 insertions(+), 120 deletions(-)
 create mode 100644 src/components/cards/badges/DueDate.vue
 create mode 100644 src/css/labels.scss

diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 21c0a6103..4e3385099 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="badges">
+	<div class="badges" v-if="card">
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -34,7 +34,7 @@
 
 		<AvatarList :users="card.assignedUsers" />
 
-		<CardMenu :id="id" />
+		<CardMenu :id="card.id" />
 	</div>
 </template>
 <script>
@@ -45,8 +45,8 @@ export default {
 	name: 'CardBadges',
 	components: { AvatarList, CardMenu },
 	props: {
-		id: {
-			type: Number,
+		card: {
+			type: Object,
 			default: null,
 		},
 	},
@@ -57,9 +57,6 @@ export default {
 		checkListCheckedCount() {
 			return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
 		},
-		card() {
-			return this.$store.getters.cardById(this.id)
-		},
 	},
 }
 </script>
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index a6f7d46c3..b0de49061 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -47,17 +47,11 @@
 					<input type="button" class="icon-confirm" @click="finishedEdit(card)">
 				</form>
 
-				<div v-if="!editing" class="duedate right">
-					<transition name="zoom">
-						<div v-if="card.duedate" :class="dueIcon">
-							<span>{{ relativeDate }}</span>
-						</div>
-					</transition>
-				</div>
+				<DueDate v-if="!editing" :card="card" />
 
 				<CardMenu v-if="!editing && compactMode" :id="id" class="right" />
 			</div>
-			<transition-group v-if="card.labels.length"
+			<transition-group v-if="card.labels && card.labels.length"
 				name="zoom"
 				tag="ul"
 				class="labels"
@@ -67,7 +61,7 @@
 				</li>
 			</transition-group>
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
-				<CardBadges :id="id" />
+				<CardBadges :card="card" />
 			</div>
 		</div>
 	</AttachmentDragAndDrop>
@@ -76,16 +70,16 @@
 <script>
 import ClickOutside from 'vue-click-outside'
 import { mapState, mapGetters } from 'vuex'
-import moment from 'moment'
 import CardBadges from './CardBadges'
 import Color from '../../mixins/color'
 import labelStyle from '../../mixins/labelStyle'
 import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
 import CardMenu from './CardMenu'
+import DueDate from './badges/DueDate'
 
 export default {
 	name: 'CardItem',
-	components: { CardBadges, AttachmentDragAndDrop, CardMenu },
+	components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate },
 	directives: {
 		ClickOutside,
 	},
@@ -116,31 +110,11 @@ export default {
 			return this.$store.getters.cardById(this.id)
 		},
 		currentCard() {
-			return this.$route.params.cardId === this.id
-		},
-		relativeDate() {
-			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
-			if (diff >= 0 && diff < 45) {
-				return t('core', 'seconds ago')
-			}
-			return moment(this.card.duedate).fromNow()
-		},
-		dueIcon() {
-			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
-			if (days < 0) {
-				return 'icon-calendar due icon overdue'
-			}
-			if (days === 0) {
-				return 'icon-calendar-dark due icon now'
+			if (this.$route) {
+				return this.$route.params.cardId === this.id
 			}
-			if (days === 1) {
-				return 'icon-calendar-dark due icon next'
-			}
-			return 'icon-calendar-dark due icon'
-		},
-		dueDateTooltip() {
-			return moment(this.card.duedate).format('LLLL')
 		},
+
 	},
 	methods: {
 		openCard() {
@@ -213,42 +187,7 @@ export default {
 			}
 		}
 
-		.labels {
-			flex-grow: 1;
-			flex-shrink: 1;
-			min-width: 0;
-			display: flex;
-			flex-direction: row;
-			margin-left: $card-padding;
-			margin-right: $card-padding;
-			margin-top: -5px;
-
-			li {
-				flex-grow: 0;
-				flex-shrink: 1;
-				display: flex;
-				flex-direction: row;
-				overflow: hidden;
-				padding: 0px 5px;
-				border-radius: 15px;
-				font-size: 85%;
-				margin-right: 3px;
-				margin-bottom: 3px;
-
-				&:hover {
-					overflow: unset;
-				}
-
-				span {
-					flex-grow: 0;
-					flex-shrink: 1;
-					min-width: 0;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-		}
+		@import './../../css/labels';
 
 		.card-controls {
 			display: flex;
@@ -267,49 +206,6 @@ export default {
 		align-items: flex-start;
 	}
 
-	.icon.due {
-		background-position: 4px center;
-		border-radius: 3px;
-		margin-top: 9px;
-		margin-bottom: 9px;
-		padding: 3px 4px;
-		padding-right: 0;
-		font-size: 90%;
-		display: flex;
-		align-items: center;
-		opacity: .5;
-		flex-shrink: 1;
-		z-index: 2;
-
-		.icon {
-			background-size: contain;
-		}
-
-		&.overdue {
-			background-color: var(--color-error);
-			color: var(--color-primary-text);
-			opacity: .7;
-			padding: 3px 4px;
-		}
-		&.now {
-			background-color: var(--color-warning);
-			opacity: .7;
-			padding: 3px 4px;
-		}
-		&.next {
-			background-color: var(--color-background-dark);
-			opacity: .7;
-			padding: 3px 4px;
-		}
-
-		span {
-			margin-left: 20px;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			overflow: hidden;
-		}
-	}
-
 	.compact {
 		min-height: 44px;
 
diff --git a/src/components/cards/badges/DueDate.vue b/src/components/cards/badges/DueDate.vue
new file mode 100644
index 000000000..944feeab8
--- /dev/null
+++ b/src/components/cards/badges/DueDate.vue
@@ -0,0 +1,115 @@
+<!--
+  - @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
+  -
+  - @author Julius Härtl <jus@bitgrid.net>
+  -
+  - @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 class="duedate" v-if="card">
+		<transition name="zoom">
+			<div v-if="card.duedate" :class="dueIcon">
+				<span>{{ relativeDate }}</span>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import moment from '@nextcloud/moment'
+
+export default {
+	name: 'DueDate',
+	props: {
+		card: {
+			type: Object,
+			default: null,
+		},
+	},
+	computed: {
+		dueIcon() {
+			const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
+			if (days < 0) {
+				return 'icon-calendar due icon overdue'
+			}
+			if (days === 0) {
+				return 'icon-calendar-dark due icon now'
+			}
+			if (days === 1) {
+				return 'icon-calendar-dark due icon next'
+			}
+			return 'icon-calendar-dark due icon'
+		},
+		relativeDate() {
+			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
+			if (diff >= 0 && diff < 45) {
+				return t('core', 'seconds ago')
+			}
+			return moment(this.card.duedate).fromNow()
+		},
+		dueDateTooltip() {
+			return moment(this.card.duedate).format('LLLL')
+		},
+	}
+}
+</script>
+
+<style lang="scss" coped>
+	.icon.due {
+		background-position: 4px center;
+		border-radius: 3px;
+		margin-top: 9px;
+		margin-bottom: 9px;
+		padding: 3px 4px;
+		padding-right: 0;
+		font-size: 90%;
+		display: flex;
+		align-items: center;
+		opacity: .5;
+		flex-shrink: 1;
+		z-index: 2;
+
+		.icon {
+			background-size: contain;
+		}
+
+		&.overdue {
+			background-color: var(--color-error);
+			color: var(--color-primary-text);
+			opacity: .7;
+			padding: 3px 4px;
+		}
+		&.now {
+			background-color: var(--color-warning);
+			opacity: .7;
+			padding: 3px 4px;
+		}
+		&.next {
+			background-color: var(--color-background-dark);
+			opacity: .7;
+			padding: 3px 4px;
+		}
+
+		span {
+			margin-left: 20px;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+	}
+</style>
diff --git a/src/css/labels.scss b/src/css/labels.scss
new file mode 100644
index 000000000..95ba9dc12
--- /dev/null
+++ b/src/css/labels.scss
@@ -0,0 +1,39 @@
+$card-spacing: 10px;
+$card-padding: 10px;
+
+.labels {
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-width: 0;
+	display: flex;
+	flex-direction: row;
+	margin-left: $card-padding;
+	margin-right: $card-padding;
+	margin-top: -5px;
+
+	li {
+		flex-grow: 0;
+		flex-shrink: 1;
+		display: flex;
+		flex-direction: row;
+		overflow: hidden;
+		padding: 0px 5px;
+		border-radius: 15px;
+		font-size: 85%;
+		margin-right: 3px;
+		margin-bottom: 3px;
+
+		&:hover {
+			overflow: unset;
+		}
+
+		span {
+			flex-grow: 0;
+			flex-shrink: 1;
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+}