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

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

src/App.vue

@@ -85,7 +85,6 @@ export default {
 	created() {
 		this.$store.dispatch('loadBoards')
 		this.$store.dispatch('loadSharees')
-		this.$store.dispatch('loadDashboards')
 	},
 }
 

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 = {

src/services/DashboardApi.js

@@ -0,0 +1,53 @@
+/*
+ * @copyright Copyright (c) 2020 Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @author Jakob Röhrl <jakob.roehrl@web.de>
+ *
+ * @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/>.
+ *
+ */
+
+import axios from '@nextcloud/axios'
+import { generateOcsUrl, generateRemoteUrl } from '@nextcloud/router'
+
+export class DashboardApi {
+
+	url(url) {
+		url = `/apps/deck${url}`
+		return generateOcsUrl(url)
+	}
+
+	findAllWithDue(data) {
+		return axios.get(this.url(`/api/v1.0/dashboard/dashboard/due`))
+			.then(
+				(response) => Promise.resolve(response.data),
+				(err) => Promise.reject(err)
+			)
+			.catch((err) => Promise.reject(err)
+			)
+	}
+
+	findMyAssignedCards(data) {
+		return axios.get(this.url(`/ocs/v2.php/apps/deck/api/v1.0/dashboard/assigned`))
+			.then(
+				(response) => Promise.resolve(response.data),
+				(err) => Promise.reject(err)
+			)
+			.catch((err) => Promise.reject(err)
+			)
+	}
+
+}

src/store/dashboard.js

@@ -22,10 +22,10 @@
 
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { CardApi } from '../services/CardApi'
+import { DashboardApi } from '../services/DashboardApi'
 Vue.use(Vuex)
 
-const apiClient = new CardApi()
+const apiClient = new DashboardApi()
 export default {
 	state: {
 		withDue: [],
@@ -57,7 +57,7 @@ export default {
 			const assignedCards = await apiClient.findMyAssignedCards()
 			const assignedCardsFlat = assignedCards.flat()
 			commit('setAssignedCards', assignedCardsFlat)
-			
+
 		},
 	},
 }