Move duedate to separate component

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

src/components/cards/CardBadges.vue

@@ -21,7 +21,11 @@
   -->
 
 <template>
+<<<<<<< HEAD
 	<div v-if="card" class="badges">
+=======
+	<div class="badges" v-if="card">
+>>>>>>> 37196bbf... Move duedate to separate component
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
 		<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -55,7 +59,11 @@ export default {
 			return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*(\s|x)\s*\](.*)$/gim) || []).length
 		},
 		checkListCheckedCount() {
+<<<<<<< HEAD
 			return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
+=======
+			return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
+>>>>>>> 37196bbf... Move duedate to separate component
 		},
 	},
 }

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">
+				<DueDate v-if="!editing" :card="card" />
-					<transition name="zoom">
-						<div v-if="card.duedate" :class="dueIcon">
-							<span>{{ relativeDate }}</span>
-						</div>
-					</transition>
-				</div>
 
 				<CardMenu v-if="!editing && compactMode" :card="card" 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"
@@ -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,
 	},
@@ -128,29 +122,7 @@ export default {
 		currentCard() {
 			return this.card && this.$route && this.$route.params.cardId === this.card.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 (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() {
@@ -226,42 +198,7 @@ export default {
 			}
 		}
 
-		.labels {
+		@import './../../css/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;
-				}
-			}
-		}
 
 		.card-controls {
 			display: flex;
@@ -282,49 +219,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;
 

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>

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;
+		}
+	}
+}