Add label handling to the main store

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

src/components/board/BoardSidebar.vue

@@ -22,39 +22,38 @@
 
 <template>
 	<div class="sidebar">
-		<div class="sidebar-header">
-			<h3>{{ board.title }}</h3>
-		</div>
+		<div v-if="board">
+			<div class="sidebar-header">
+				<h3>{{ board.title }}</h3>
+			</div>
 
-		<ul class="tab-headers">
-			<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name">
-				<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a>
-			</li>
-		</ul>
+			<ul class="tab-headers">
+				<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name">
+					<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a>
+				</li>
+			</ul>
 
-		<div class="tabsContainer">
-			<div class="tab">
-				<div v-if="activeTab === 'Sharing'">
-					<SharingTabSidebard :board="board"></SharingTabSidebard>
-				</div>
+			<div class="tabsContainer">
+				<div class="tab">
+					<div v-if="activeTab === 'Sharing'">
+						<SharingTabSidebard :board="board"></SharingTabSidebard>
+					</div>
 
-				<div
-					v-if="activeTab === 'Tags'"
-					id="board-detail-labels"
-				>
-					<TagsTabSidebard :board="board" :labels="labels" />
-				</div>
+					<div
+						v-if="activeTab === 'Tags'"
+						id="board-detail-labels">
+						<TagsTabSidebard :board="board" />
+					</div>
 
-				<div
-					v-if="activeTab === 'Deleted items'"
-				>
-					<DeletedTabSidebard :board="board" />
-				</div>
+					<div
+						v-if="activeTab === 'Deleted items'">
+						<DeletedTabSidebard :board="board" />
+					</div>
 
-				<div
-					v-if="activeTab === 'Timeline'"
-				>
-					<TimelineTabSidebard :board="board" />
+					<div
+						v-if="activeTab === 'Timeline'">
+						<TimelineTabSidebard :board="board" />
+					</div>
 				</div>
 			</div>
 		</div>

src/components/board/TagsTabSidebard.vue

@@ -1,19 +1,17 @@
 <template>
 	<div>
-		{{labelByCurrentBoard}}
 		<ul class="labels">
 			<li v-for="label in labels" :key="label.id">
 				<template v-if="editingLabelId === label.id">
-				<input :value="label.title"><input :value="label.color">
-				<button @click="updateLabel()">save</button><button @click="editingLabelId = null">cancel</button>
+					<input :value="label.title"><input :value="label.color">
+					<button @click="updateLabel()">save</button><button @click="editingLabelId = null">cancel</button>
 				</template>
 				<template v-else>
-				<span :style="{ backgroundColor: `#${label.color}`, color: `#white` }" class="label-title">
-					<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
-				</span>
-				<button @click="editingLabelId=label.id">edit</button><button @click="deleteLabel(label.id)">delete</button>
+					<span :style="{ backgroundColor: `#${label.color}`, color: `#white` }" class="label-title">
+						<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
+					</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,
-		}
-	},
-	props: {
-		labels: {
-			type: Object,
-			default: undefined
-		}
-	},
-	methods: {
-		deleteLabel(id) {
-			this.$store.dispatch('removeLabel', id)
-		},
-		updateLabel(id, name) {
-			
+			editingLabelId: null
 		}
 	},
 	computed: {
-		labelByCurrentBoard() {
-			return (id) => this.$store.getters.labelByCurrentBoard()
-		}
+		...mapGetters({
+			labels: 'currentBoardLabels'
+		})
 	},
-	
-		
+	methods: {
+		deleteLabel(id) {
+			this.$store.dispatch('removeLabelFromCurrentBoard', id)
+		},
+		updateLabel(id, name) {
+
+		}
+	}
 }
 </script>