update, delete and create are working

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

src/components/board/TagsTabSidebard.vue

@@ -4,15 +4,34 @@
 			<li v-for="label in labels" :key="label.id">
 				<template v-if="editingLabelId === label.id">
 					<input v-model="editingLabel.title"><input v-model="editingLabel.color">
-					<button @click="updateLabel(label)">save</button><button @click="editingLabelId = null">cancel</button>
+					<button class="icon-checkmark" @click="updateLabel(label)" :disabled="!editLabelObjValidated" 
+					v-tooltip="{content: 'title and color must be provided', 
+					show: !editLabelObjValidated, trigger: 'manual' }" />
+
+					<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="editingLabelId = null" />
 				</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="clickEdit(label)">edit</button><button @click="deleteLabel(label.id)">delete</button>
+					 <button v-tooltip="t('deck', 'Edit')" class="icon-rename" @click="clickEdit(label)" />
+					
+				
+					<button v-tooltip="t('deck', 'Delete')" class="icon-delete" @click="deleteLabel(label.id)" />
+
 				</template>
 			</li>
+			
+			<li v-if="addLabel">
+				<template>
+				<input v-model="addLabelObj.title"><input v-model="addLabelObj.color">
+				<button class="icon-checkmark" @click="clickAddLabel()" :disabled="!addLabelObjValidated" 
+					v-tooltip="{content: 'title and color must be provided', 
+					show: !addLabelObjValidated, trigger: 'manual' }" />
+				<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="addLabel=false" />
+				</template>
+			</li>
+			<button v-tooltip="t('deck', 'Add')" class="icon-add" @click="clickShowAddLabel()" />
 		</ul>
 	</div>
 </template>
@@ -26,13 +45,25 @@ export default {
 	data() {
 		return {
 			editingLabelId: null,
-			editingLabel: null
+			editingLabel: null,
+			addLabelObj: null,
+			addLabel: false,
 		}
 	},
 	computed: {
 		...mapGetters({
 			labels: 'currentBoardLabels'
-		})
+		}), 
+		addLabelObjValidated() {
+			if (this.addLabelObj.title == '') return false;
+			if (this.addLabelObj.color == '') return false;
+			return true;
+		},
+		editLabelObjValidated() {
+			if (this.editingLabel.title == '') return false;
+			if (this.editingLabel.color == '') return false;
+			return true;
+		}
 	},
 	methods: {
 		clickEdit(label) {
@@ -45,7 +76,16 @@ export default {
 		updateLabel(label) {
 			this.$store.dispatch('updateLabelFromCurrentBoard', this.editingLabel)
 			this.editingLabelId = null
-		}
+		},
+		clickShowAddLabel() {
+			this.addLabelObj = { boardId: 1, cardId: null, color: '000', title: 'new'}
+			this.addLabel=true
+		},
+		clickAddLabel() {
+			this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)
+			this.addLabel = false
+			this.addLabelObj = null
+		},
 	}
 }
 </script>

src/services/BoardApi.js

@@ -135,4 +135,50 @@ export class BoardApi {
 			})
 	}
 
+	// Label API Calls
+	deleteLabel(id) {
+		return axios.delete(this.url(`/labels/${id}`))
+		.then(
+			(response) => {
+				return Promise.resolve(response.data)
+			},
+			(err) => {
+				return Promise.reject(err)
+			}
+		)
+		.catch((err) => {
+			return Promise.reject(err)
+		})
+	}
+
+	updateLabel(label) {
+		return axios.put(this.url('/labels/${label.id}'), label)
+		.then(
+			(response) => {
+				return Promise.resolve(response.data)
+			},
+			(err) => {
+				return Promise.reject(err)
+			}
+		)
+		.catch((err) => {
+			return Promise.reject(err)
+		})
+	}
+
+	createLabel(labelData) {
+		return axios.post(this.url('/labels'), labelData)
+		.then(
+			(response) => {
+				return Promise.resolve(response.data)
+			},
+			(err) => {
+				return Promise.reject(err)
+			}
+		)
+		.catch((err) => {
+			return Promise.reject(err)
+		})
+	}
+
 }

src/store/main.js

@@ -139,6 +139,7 @@ export default new Vuex.Store({
 
 		// label mutators
 		removeLabelFromCurrentBoard(state, labelId) {
+			console.log(labelId)
 			const removeIndex = state.currentBoard.labels.findIndex((l) => {
 				return labelId === l.id
 			})
@@ -155,6 +156,10 @@ export default new Vuex.Store({
 
 			labelToUpdate.title = newLabel.title
 			labelToUpdate.color = newLabel.color
+		},
+		addLabelToCurrentBoard(state, newLabel) {
+
+			state.currentBoard.labels.push(newLabel)
 		}
 	},
 	actions: {
@@ -234,11 +239,23 @@ export default new Vuex.Store({
 		},
 
 		// label actions
-		removeLabelFromCurrentBoard({ commit }, labelId) {
+		removeLabelFromCurrentBoard({ commit }, label) {
-			commit('removeLabelFromCurrentBoard', labelId);
+			apiClient.deleteLabel(label)
+			.then((label) => {
+				commit('removeLabelFromCurrentBoard', label.id);
+			})	
 		}, 
 		updateLabelFromCurrentBoard({ commit }, newLabel) {
+			apiClient.updateLabel(newLabel)
+			.then((newLabel) => {
 				commit('updateLabelFromCurrentBoard', newLabel);
+			})	
 		}, 
+		addLabelToCurrentBoard({ commit }, newLabel) {
+			apiClient.createLabel(newLabel)
+			.then((newLabel) => {
+				commit('addLabelToCurrentBoard', newLabel);
+			})	
+		}
 	}
 })