label update

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>

src/components/board/TagsTabSidebard.vue

@@ -3,14 +3,14 @@
 		<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 v-model="editingLabel.title" ><input v-model="editingLabel.color">
+					<button @click="updateLabel(label)">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>
+					<button @click="clickEdit(label)">edit</button><button @click="deleteLabel(label.id)">delete</button>
 				</template>
 			</li>
 		</ul>
@@ -25,7 +25,8 @@ export default {
 	name: 'TagsTabSidebard',
 	data() {
 		return {
-			editingLabelId: null
+			editingLabelId: null,
+			editingLabel: null
 		}
 	},
 	computed: {
@@ -34,11 +35,16 @@ export default {
 		})
 	},
 	methods: {
+		clickEdit(label) {
+			this.editingLabelId = label.id
+			this.editingLabel = Object.assign({}, label)
+		},
 		deleteLabel(id) {
 			this.$store.dispatch('removeLabelFromCurrentBoard', id)
 		},
-		updateLabel(id, name) {
-
+		updateLabel(label) {
+			this.$store.dispatch('updateLabelFromCurrentBoard', this.editingLabel)
+			this.editingLabelId = null
 		}
 	}
 }

src/store/main.js

@@ -140,12 +140,21 @@ export default new Vuex.Store({
 		// label mutators
 		removeLabelFromCurrentBoard(state, labelId) {
 			const removeIndex = state.currentBoard.labels.findIndex((l) => {
-				return labelId !== l.id
+				return labelId === l.id
 			})
 
 			if (removeIndex > -1) {
 				state.currentBoard.labels.splice(removeIndex, 1)
 			}
+		},
+		updateLabelFromCurrentBoard(state, newLabel) {
+
+			let labelToUpdate = state.currentBoard.labels.find((l) => {
+				return newLabel.id === l.id
+			})
+
+			labelToUpdate.title = newLabel.title
+			labelToUpdate.color = newLabel.color
 		}
 	},
 	actions: {
@@ -227,6 +236,9 @@ export default new Vuex.Store({
 		// label actions
 		removeLabelFromCurrentBoard({ commit }, labelId) {
 			commit('removeLabelFromCurrentBoard', labelId);
-		}
+		}, 
+		updateLabelFromCurrentBoard({ commit }, newLabel) {
+			commit('updateLabelFromCurrentBoard', newLabel);
+		}, 
 	}
-})
+})