From 96ec6b812c2db4efb1ad44c8f6162c442f9add77 Mon Sep 17 00:00:00 2001
From: Michael Weimann <mail@michael-weimann.eu>
Date: Sun, 24 Mar 2019 16:49:03 +0100
Subject: [PATCH] Add label handling to the main store

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
---
 src/components/board/BoardSidebar.vue    | 55 ++++++++++++------------
 src/components/board/TagsTabSidebard.vue | 52 +++++++++-------------
 src/store/label.js                       | 43 ------------------
 src/store/main.js                        | 23 ++++++++--
 4 files changed, 67 insertions(+), 106 deletions(-)
 delete mode 100644 src/store/label.js

diff --git a/src/components/board/BoardSidebar.vue b/src/components/board/BoardSidebar.vue
index dad94440d..8776c11af 100644
--- a/src/components/board/BoardSidebar.vue
+++ b/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>
diff --git a/src/components/board/TagsTabSidebard.vue b/src/components/board/TagsTabSidebard.vue
index 84d91ecba..187c41732 100644
--- a/src/components/board/TagsTabSidebard.vue
+++ b/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>
diff --git a/src/store/label.js b/src/store/label.js
deleted file mode 100644
index 2c9767809..000000000
--- a/src/store/label.js
+++ /dev/null
@@ -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)
-		},
-	}
-}
diff --git a/src/store/main.js b/src/store/main.js
index 399a60dbc..d750fe2fe 100644
--- a/src/store/main.js
+++ b/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,
-		label
+		card
 	},
 	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);
 		}
 	}
 })