Add label handling to the main store

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

src/components/board/BoardSidebar.vue

@@ -22,6 +22,7 @@
 
 <template>
 	<div class="sidebar">
+		<div v-if="board">
 			<div class="sidebar-header">
 				<h3>{{ board.title }}</h3>
 			</div>
@@ -40,25 +41,23 @@
 
 					<div
 						v-if="activeTab === 'Tags'"
-					id="board-detail-labels"
+						id="board-detail-labels">
-				>
+						<TagsTabSidebard :board="board" />
-					<TagsTabSidebard :board="board" :labels="labels" />
 					</div>
 
 					<div
-					v-if="activeTab === 'Deleted items'"
+						v-if="activeTab === 'Deleted items'">
-				>
 						<DeletedTabSidebard :board="board" />
 					</div>
 
 					<div
-					v-if="activeTab === 'Timeline'"
+						v-if="activeTab === 'Timeline'">
-				>
 						<TimelineTabSidebard :board="board" />
 					</div>
 				</div>
 			</div>
 		</div>
+	</div>
 </template>
 
 <script>

src/components/board/TagsTabSidebard.vue

@@ -1,6 +1,5 @@
 <template>
 	<div>
-		{{labelByCurrentBoard}}
 		<ul class="labels">
 			<li v-for="label in labels" :key="label.id">
 				<template v-if="editingLabelId === label.id">
@@ -13,7 +12,6 @@
 					</span>
 					<button @click="editingLabelId=label.id">edit</button><button @click="deleteLabel(label.id)">delete</button>
 				</template>
-				
 			</li>
 		</ul>
 	</div>
@@ -21,37 +19,27 @@
 
 <script>
 
+import { mapGetters } from 'vuex'
+
 export default {
 	name: 'TagsTabSidebard',
-	components: {
-		
-	},
-	
 	data() {
 		return {
-			editingLabelId: null,
+			editingLabelId: null
 		}
 	},
-	props: {
+	computed: {
-		labels: {
+		...mapGetters({
-			type: Object,
+			labels: 'currentBoardLabels'
-			default: undefined
+		})
-		}
 	},
 	methods: {
 		deleteLabel(id) {
-			this.$store.dispatch('removeLabel', id)
+			this.$store.dispatch('removeLabelFromCurrentBoard', id)
 		},
 		updateLabel(id, name) {
 
 		}
-	},
-	computed: {
-		labelByCurrentBoard() {
-			return (id) => this.$store.getters.labelByCurrentBoard()
 	}
-	},
-	
-		
 }
 </script>

src/store/label.js

@@ -1,43 +0,0 @@
-import Vue from 'vue'
-
-export default {
-	state: {
-		labels: []
-	},
-	getters: {
-		labelByCurrentBoard() {
-			console.log(state)
-			return state.currentBoard.labels;
-		},
-		labelById: state => (id) => {
-			//return state.cards.find((card) => card.id === id)
-		}
-	},
-	mutations: {
-		addLabel(state, label) {
-			
-		},
-		updateLabel(state, label) {
-
-		},
-		removeLabel(state, id) {
-			
-			
-			console.log(this.state.labels);
-
-
-			this.state.labels = this.state.labels.filter((l) => {
-				return id !== l.id
-			})
-
-			console.log(this.state.labels);
-			
-		},
-		
-	},
-	actions: {
-		removeLabel({ commit }, id) {
-			commit('removeLabel', id)
-		},
-	}
-}

src/store/main.js

@@ -27,7 +27,6 @@ import { boardToMenuItem } from './../helpers/boardToMenuItem'
 import { BoardApi } from './../services/BoardApi'
 import stack from './stack'
 import card from './card'
-import label from './label'
 
 Vue.use(Vuex)
 
@@ -43,8 +42,7 @@ export const BOARD_FILTERS = {
 export default new Vuex.Store({
 	modules: {
 		stack,
-		card,
+		card
-		label
 	},
 	strict: debug,
 	state: {
@@ -82,6 +80,9 @@ export default new Vuex.Store({
 					|| (state.boardFilter === BOARD_FILTERS.SHARED && board.shared === 1)
 			})
 			return boards.map(boardToMenuItem)
+		},
+		currentBoardLabels: state => {
+			return state.currentBoard.labels
 		}
 	},
 	mutations: {
@@ -134,6 +135,17 @@ export default new Vuex.Store({
 		},
 		setCurrentBoard(state, board) {
 			state.currentBoard = board
+		},
+
+		// label mutators
+		removeLabelFromCurrentBoard(state, labelId) {
+			const removeIndex = state.currentBoard.labels.findIndex((l) => {
+				return labelId !== l.id
+			})
+
+			if (removeIndex > -1) {
+				state.currentBoard.labels.splice(removeIndex, 1)
+			}
 		}
 	},
 	actions: {
@@ -210,6 +222,11 @@ export default new Vuex.Store({
 		},
 		setCurrentBoard({ commit }, board) {
 			commit('setCurrentBoard', board)
+		},
+
+		// label actions
+		removeLabelFromCurrentBoard({ commit }, labelId) {
+			commit('removeLabelFromCurrentBoard', labelId);
 		}
 	}
 })