Use router parameter to trigger card change

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

src/components/board/Board.vue

@@ -80,9 +80,8 @@ export default {
 		} */
 	},
 	watch: {
-		'$route': 'fetchData',
+		id: 'fetchData',
 		showArchived() {
-
 			this.fetchData()
 		}
 	},

src/components/board/BoardSidebar.vue

@@ -63,6 +63,11 @@ export default {
 		DeletedTabSidebar,
 		TimelineTabSidebard
 	},
+	props: {
+		id: {
+			type: Number
+		}
+	},
 	computed: {
 		...mapState({
 			board: state => state.currentBoard,

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() {
+		'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

src/router.js

@@ -86,15 +86,29 @@ 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)
 							}
 						}
+					},
+				}
 			]
 		}
 	]