Dashboard widgets: Factor out a card component

Signed-off-by: Marcel Klehr <mklehr@gmx.net>

src/components/dashboard/Card.vue

@@ -0,0 +1,81 @@
+<template>
+	<a :key="card.id"
+		:href="cardLink"
+		target="_blank"
+		class="card">
+		<div class="card--header">
+			<DueDate class="right" :card="card" />
+			<span class="title">{{ card.title }}</span>
+		</div>
+		<ul v-if="card.labels && card.labels.length"
+			class="labels">
+			<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
+				<span>{{ label.title }}</span>
+			</li>
+		</ul>
+	</a>
+</template>
+
+<script>
+import DueDate from '../cards/badges/DueDate.vue'
+import { generateUrl } from '@nextcloud/router'
+import labelStyle from '../../mixins/labelStyle.js'
+
+export default {
+	name: 'Card',
+	components: { DueDate },
+	mixins: [labelStyle],
+	props: {
+		card: {
+		  type: Object,
+			required: true,
+		},
+	},
+	computed: {
+		cardLink() {
+			return generateUrl('/apps/deck') + `#/board/${this.card.boardId}/card/${this.card.id}`
+		},
+	},
+}
+</script>
+
+<style  lang="scss" scoped>
+	@import '../../css/labels.scss';
+
+	.card {
+		display: block;
+		border-radius: var(--border-radius-large);
+		padding: 8px;
+		height: 60px;
+
+	&:hover {
+		 background-color: var(--color-background-hover);
+	 }
+	}
+
+	.card--header {
+		overflow: hidden;
+		.title {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			display: block;
+		}
+	}
+
+	.labels {
+		margin-left: 0;
+	}
+
+	.duedate::v-deep {
+		.due {
+			margin: 0 0 0 10px;
+			padding: 2px 4px;
+			font-size: 90%;
+		}
+	}
+
+	.right {
+		float: right;
+	}
+</style>

src/views/DashboardToday.vue

@@ -30,21 +30,7 @@
 		@hide="() => {}"
 		@markDone="() => {}">
 		<template #default="{ item }">
-			<a :key="item.id"
+			<Card :card="item" />
-				:href="cardLink(item)"
-				target="_blank"
-				class="card">
-				<div class="card--header">
-					<DueDate class="right" :card="item" />
-					<span class="title">{{ item.title }}</span>
-				</div>
-				<ul v-if="item.labels && item.labels.length"
-					class="labels">
-					<li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)">
-						<span>{{ label.title }}</span>
-					</li>
-				</ul>
-			</a>
 		</template>
 	</DashboardWidget>
 </template>
@@ -52,17 +38,15 @@
 <script>
 import { DashboardWidget } from '@nextcloud/vue-dashboard'
 import { mapGetters } from 'vuex'
-import labelStyle from './../mixins/labelStyle.js'
+import Card from '../components/dashboard/Card.vue'
-import DueDate from '../components/cards/badges/DueDate.vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'DashboardToday',
 	components: {
-		DueDate,
 		DashboardWidget,
+		Card,
 	},
-	mixins: [labelStyle],
 	data() {
 		return {
 			loading: false,
@@ -86,11 +70,6 @@ export default {
 			})
 			return list
 		},
-		cardLink() {
-			return (card) => {
-				return generateUrl('/apps/deck') + `#/board/${card.boardId}/card/${card.id}`
-			}
-		},
 		showMoreUrl() {
 			return this.cards.length > 7 ? generateUrl('/apps/deck') : null
 		},
@@ -105,47 +84,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import './../css/labels';
-
 	#deck-widget-empty-content {
 		text-align: center;
 		margin-top: 5vh;
 	}
-
-	.card {
-		display: block;
-		border-radius: var(--border-radius-large);
-		padding: 8px;
-		height: 60px;
-
-		&:hover {
-			background-color: var(--color-background-hover);
-		}
-	}
-
-	.card--header {
-		overflow: hidden;
-		.title {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			display: block;
-		}
-	}
-
-	.labels {
-		margin-left: 0;
-	}
-
-	.duedate::v-deep {
-		.due {
-			margin: 0 0 0 10px;
-			padding: 2px 4px;
-			font-size: 90%;
-		}
-	}
-
-	.right {
-		float: right;
-	}
 </style>

src/views/DashboardTomorrow.vue

@@ -30,21 +30,7 @@
 		@hide="() => {}"
 		@markDone="() => {}">
 		<template #default="{ item }">
-			<a :key="item.id"
+			<Card :card="item" />
-				:href="cardLink(item)"
-				target="_blank"
-				class="card">
-				<div class="card--header">
-					<DueDate class="right" :card="item" />
-					<span class="title">{{ item.title }}</span>
-				</div>
-				<ul v-if="item.labels && item.labels.length"
-					class="labels">
-					<li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)">
-						<span>{{ label.title }}</span>
-					</li>
-				</ul>
-			</a>
 		</template>
 	</DashboardWidget>
 </template>
@@ -52,17 +38,15 @@
 <script>
 import { DashboardWidget } from '@nextcloud/vue-dashboard'
 import { mapGetters } from 'vuex'
-import labelStyle from './../mixins/labelStyle.js'
+import Card from '../components/dashboard/Card.vue'
-import DueDate from '../components/cards/badges/DueDate.vue'
 import { generateUrl } from '@nextcloud/router'
 
 export default {
 	name: 'DashboardTomorrow',
 	components: {
-		DueDate,
 		DashboardWidget,
+		Card,
 	},
-	mixins: [labelStyle],
 	data() {
 		return {
 			loading: false,
@@ -87,11 +71,6 @@ export default {
 			})
 			return list
 		},
-		cardLink() {
-			return (card) => {
-				return generateUrl('/apps/deck') + `#/board/${card.boardId}/card/${card.id}`
-			}
-		},
 		showMoreUrl() {
 			return this.cards.length > 7 ? generateUrl('/apps/deck') : null
 		},
@@ -106,47 +85,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import './../css/labels';
-
 	#deck-widget-empty-content {
 		text-align: center;
 		margin-top: 5vh;
 	}
-
-	.card {
-		display: block;
-		border-radius: var(--border-radius-large);
-		padding: 8px;
-		height: 60px;
-
-		&:hover {
-			background-color: var(--color-background-hover);
-		}
-	}
-
-	.card--header {
-		overflow: hidden;
-		.title {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			display: block;
-		}
-	}
-
-	.labels {
-		margin-left: 0;
-	}
-
-	.duedate::v-deep {
-		.due {
-			margin: 0 0 0 10px;
-			padding: 2px 4px;
-			font-size: 90%;
-		}
-	}
-
-	.right {
-		float: right;
-	}
 </style>

src/views/DashboardUpcoming.vue

@@ -30,21 +30,7 @@
 			@hide="() => {}"
 			@markDone="() => {}">
 			<template #default="{ item }">
-				<a :key="item.id"
+				<Card :card="item" />
-					:href="cardLink(item)"
-					target="_blank"
-					class="card">
-					<div class="card--header">
-						<DueDate class="right" :card="item" />
-						<span class="title">{{ item.title }}</span>
-					</div>
-					<ul v-if="item.labels && item.labels.length"
-						class="labels">
-						<li v-for="label in item.labels" :key="label.id" :style="labelStyle(label)">
-							<span>{{ label.title }}</span>
-						</li>
-					</ul>
-				</a>
 			</template>
 		</NcDashboardWidget>
 		<div class="center-button">
@@ -65,8 +51,7 @@
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import { NcButton, NcDashboardWidget, NcModal } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
-import labelStyle from './../mixins/labelStyle.js'
+import Card from '../components/dashboard/Card.vue'
-import DueDate from '../components/cards/badges/DueDate.vue'
 import { generateUrl } from '@nextcloud/router'
 import CreateNewCardCustomPicker from './CreateNewCardCustomPicker.vue'
 
@@ -75,12 +60,11 @@ export default {
 	components: {
 		CreateNewCardCustomPicker,
 		NcModal,
-		DueDate,
 		NcDashboardWidget,
 		NcButton,
 		PlusIcon,
+		Card,
 	},
-	mixins: [labelStyle],
 	data() {
 		return {
 			loading: false,
@@ -102,11 +86,6 @@ export default {
 			})
 			return list.slice(0, 5)
 		},
-		cardLink() {
-			return (card) => {
-				return generateUrl('/apps/deck') + `#/board/${card.boardId}/card/${card.id}`
-			}
-		},
 		showMoreUrl() {
 			return this.cards.length > 7 ? generateUrl('/apps/deck') : null
 		},
@@ -126,8 +105,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-	@import './../css/labels';
-
 	.center-button {
 		display: flex;
 		align-items: center;