From 781e2b0bb2e85fddef1c6f8a17794ae013208be0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 12 Aug 2019 10:47:11 +0200
Subject: [PATCH] Use router parameter to trigger card change
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/board/Board.vue        |  3 +--
 src/components/board/BoardSidebar.vue |  5 +++++
 src/components/card/CardSidebar.vue   | 25 ++++++++++++++++++-------
 src/router.js                         | 18 ++++++++++++++++--
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index c27e7ae12..56d810155 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -80,9 +80,8 @@ export default {
 		} */
 	},
 	watch: {
-		'$route': 'fetchData',
+		id: 'fetchData',
 		showArchived() {
-
 			this.fetchData()
 		}
 	},
diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index b01d41634..5f860e1d2 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/src/components/board/BoardSidebar.vue
@@ -63,6 +63,11 @@ export default {
 		DeletedTabSidebar,
 		TimelineTabSidebard
 	},
+	props: {
+		id: {
+			type: Number
+		}
+	},
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,
diff --git a/src/components/card/CardSidebar.vue b/src/components/card/CardSidebar.vue
index 6c13dc1a4..b6ce565bc 100644
--- a/src/components/card/CardSidebar.vue
+++ b/src/components/card/CardSidebar.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<app-sidebar v-if="currentCard != null"
+	<app-sidebar v-if="currentCard !== null && copiedCard !== null"
 		:actions="toolbarActions"
 		:title="currentCard.title"
 		@close="closeSidebar">
@@ -89,6 +89,11 @@ export default {
 		DatetimePicker,
 		markdownEditor
 	},
+	props: {
+		id: {
+			type: Number
+		}
+	},
 	data() {
 		return {
 			assignedUsers: null,
@@ -101,10 +106,12 @@ export default {
 	},
 	computed: {
 		...mapState({
-			currentCard: state => state.currentCard,
 			currentBoard: state => state.currentBoard,
 			assignableUsers: state => state.assignableUsers
 		}),
+		currentCard() {
+			return this.$store.getters.cardById(this.id)
+		},
 		subtitle() {
 			let lastModified = this.currentCard.lastModified
 			let createdAt = this.currentCard.createdAt
@@ -131,11 +138,15 @@ export default {
 		}
 	},
 	watch: {
-		currentCard() {
-			this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
-			this.allLabels = this.currentCard.labels
-			this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
-			this.desc = this.currentCard.description
+		'currentCard': {
+			immediate: true,
+			handler() {
+				console.log(this.currentCard)
+				this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
+				this.allLabels = this.currentCard.labels
+				this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
+				this.desc = this.currentCard.description
+			}
 		},
 		desc() {
 			this.copiedCard.description = this.desc
diff --git a/src/router.js b/src/router.js
index 29c295607..68aee553e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -86,14 +86,28 @@ export default new Router({
 					components: {
 						default: Boards,
 						sidebar: BoardSidebar
-					}
+					},
+					props: {
+						default: (route) => {
+							return {
+								id: parseInt(route.params.id, 10)
+							}
+						}
+					},
 				},
 				{
 					path: 'cards/:cardId',
 					name: 'card',
 					components: {
 						sidebar: CardSidebar
-					}
+					},
+					props: {
+						sidebar: (route) => {
+							return {
+								id: parseInt(route.params.cardId, 10)
+							}
+						}
+					},
 				}
 			]
 		}