Allow to use card item without being available in global card store

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

src/components/cards/CardBadges.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="badges">
+	<div v-if="card" class="badges">
 		<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>

src/components/cards/CardItem.vue

@@ -25,7 +25,7 @@
   -->
 
 <template>
-	<AttachmentDragAndDrop :card-id="id" class="drop-upload--card">
+	<AttachmentDragAndDrop v-if="card" :card-id="card.id" class="drop-upload--card">
 		<div :class="{'compact': compactMode, 'current-card': currentCard, 'has-labels': card.labels && card.labels.length > 0, 'is-editing': editing}"
 			tag="div"
 			class="card"
@@ -67,7 +67,7 @@
 				</li>
 			</transition-group>
 			<div v-show="!compactMode" class="card-controls compact-item" @click="openCard">
-				<CardBadges :id="id" />
+				<CardBadges :card="card" />
 			</div>
 		</div>
 	</AttachmentDragAndDrop>
@@ -95,6 +95,10 @@ export default {
 			type: Number,
 			default: null,
 		},
+		item: {
+			type: Object,
+			default: null,
+		},
 	},
 	data() {
 		return {
@@ -113,10 +117,10 @@ export default {
 			'isArchived',
 		]),
 		card() {
-			return this.$store.getters.cardById(this.id)
+			return this.item ? this.item : this.$store.getters.cardById(this.id)
 		},
 		currentCard() {
-			return this.$route.params.cardId === this.id
+			return this.card && this.$route && this.$route.params.cardId === this.card.id
 		},
 		relativeDate() {
 			const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
@@ -144,7 +148,8 @@ export default {
 	},
 	methods: {
 		openCard() {
-			this.$router.push({ name: 'card', params: { cardId: this.id } }).catch(() => {})
+			const boardId = this.item ? this.item.boardId : this.$route.params.id
+			this.$router.push({ name: 'card', params: { id: boardId, cardId: this.card.id } }).catch(() => {})
 		},
 		startEditing(card) {
 			this.copiedCard = Object.assign({}, card)

src/components/dashboards/Dashboards.vue

@@ -28,24 +28,29 @@
 			<div class="dashboard-column">
 				<h2>overdue</h2>
 				<div v-for="card in withDueDashboardGroup.overdue" :key="card.id">
-					<!-- <CardItem :id="card.id" /> -->
-					{{ card.title }}
+					<CardItem :item="card" />
 				</div>
 			</div>
 
 			<div class="dashboard-column">
 				<h2>today</h2>
-				{{ withDueDashboardGroup.today }}
+				<div v-for="card in withDueDashboardGroup.today" :key="card.id">
+					<CardItem :item="card" />
+				</div>
 			</div>
 
 			<div class="dashboard-column">
 				<h2>tomorrow</h2>
-				{{ withDueDashboardGroup.tomorrow }}
+				<div v-for="card in withDueDashboardGroup.tomorrow" :key="card.id">
+					<CardItem :item="card" />
+				</div>
 			</div>
 
 			<div class="dashboard-column">
 				<h2>this week</h2>
-				{{ withDueDashboardGroup.thisWeek }}
+				<div v-for="card in withDueDashboardGroup.thisWeek" :key="card.id">
+					<CardItem :item="card" />
+				</div>
 			</div>
 		</div>
 
@@ -53,26 +58,31 @@
 			<div class="dashboard-column">
 				<h2>overdue</h2>
 				<div v-for="card in assignedCardsDashboardGroup.overdue" :key="card.id">
-					{{ card.title }}
+					<CardItem :item="card" />
 				</div>
 			</div>
 
 			<div class="dashboard-column">
 				<h2>today</h2>
-				{{ assignedCardsDashboardGroup.today }}
+				<div v-for="card in assignedCardsDashboardGroup.today" :key="card.id">
+					<CardItem :item="card" />
+				</div>
 			</div>
 
 			<div class="dashboard-column">
 				<h2>tomorrow</h2>
-				{{ assignedCardsDashboardGroup.tomorrow }}
+				<div v-for="card in assignedCardsDashboardGroup.tomorrow" :key="card.id">
+					<CardItem :item="card" />
+				</div>
 			</div>
 
 			<div class="dashboard-column">
 				<h2>this week</h2>
-				{{ assignedCardsDashboardGroup.thisWeek }}
+				<div v-for="card in assignedCardsDashboardGroup.thisWeek" :key="card.id">
+					<CardItem :item="card" />
+				</div>
 			</div>
 		</div>
-
 	</div>
 </template>
 
@@ -81,6 +91,7 @@
 import Controls from '../Controls'
 import CardItem from '../cards/CardItem'
 import { mapGetters } from 'vuex'
+import moment from '@nextcloud/moment'
 
 export default {
 	name: 'Dashboards',
@@ -106,6 +117,9 @@ export default {
 			return this.groupByDue(this.assignedCardsDashboard)
 		},
 	},
+	created() {
+		this.$store.dispatch('loadDashboards')
+	},
 	methods: {
 		groupByDue(dataset) {
 			const all = {