From 49e1d8e8ec3a32e4526e5266abd30f0ce4bb3b67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20R=C3=B6hrl?= <jakob.roehrl@web.de>
Date: Wed, 24 Apr 2019 12:28:10 +0200
Subject: [PATCH] added picker, button update and small changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Jakob Röhrl <jakob.roehrl@web.de>
---
 src/components/board/TagsTabSidebard.vue | 44 ++++++++++++++++--------
 src/services/BoardApi.js                 |  2 +-
 src/store/main.js                        |  2 +-
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/board/TagsTabSidebard.vue b/src/components/board/TagsTabSidebard.vue
index 712fdf4e6..defb2707e 100644
--- a/src/components/board/TagsTabSidebard.vue
+++ b/src/components/board/TagsTabSidebard.vue
@@ -3,31 +3,28 @@
 		<ul class="labels">
 			<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">
+					<input v-model="editingLabel.title">
+					<compact-picker :value=editingLabel.color @input="updateColor" :palette=defaultColors></compact-picker>
 					<button class="icon-checkmark" @click="updateLabel(label)" :disabled="!editLabelObjValidated" 
-					v-tooltip="{content: 'title and color must be provided', 
-					show: !editLabelObjValidated, trigger: 'manual' }" />
+					v-tooltip="{content: missingDataLabel, 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 :style="{ backgroundColor: `#${label.color}`, color:textColor(label.color) }" class="label-title">
 						<span v-if="label.title">{{ label.title }}</span><i v-if="!label.title"><br></i>
 					</span>
 					 <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">
+				<input v-model="addLabelObj.title">
+				<compact-picker value="#fff" @input="updateColor" :palette=defaultColors></compact-picker>
 				<button class="icon-checkmark" @click="clickAddLabel()" :disabled="!addLabelObjValidated" 
-					v-tooltip="{content: 'title and color must be provided', 
-					show: !addLabelObjValidated, trigger: 'manual' }" />
+					v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" />
 				<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="addLabel=false" />
 				</template>
 			</li>
@@ -39,15 +36,23 @@
 <script>
 
 import { mapGetters } from 'vuex'
+import Color from '../../mixins/color'
+import { Compact } from 'vue-color'
 
 export default {
 	name: 'TagsTabSidebard',
+	mixins: [Color],
+	components: {
+		'compact-picker': Compact
+	},
 	data() {
 		return {
 			editingLabelId: null,
 			editingLabel: null,
 			addLabelObj: null,
 			addLabel: false,
+			missingDataLabel: t('deck', 'title and color value must be provided'),
+			defaultColors: ['#31CC7C', '#317CCC', '#FF7A66', '#F1DB50', '#7C31CC', '#CC317C', '#3A3B3D', '#CACBCD']
 		}
 	},
 	computed: {
@@ -56,16 +61,27 @@ export default {
 		}), 
 		addLabelObjValidated() {
 			if (this.addLabelObj.title == '') return false;
-			if (this.addLabelObj.color == '') return false;
+			if (this.addLabelObj.color == '' || 
+			this.addLabelObj.color.length != 6) return false;
 			return true;
 		},
 		editLabelObjValidated() {
+			console.log(this.editingLabel.color)
 			if (this.editingLabel.title == '') return false;
-			if (this.editingLabel.color == '') return false;
+			if (this.editingLabel.color == '' || 
+			this.editingLabel.color.length != 6) return false;
 			return true;
 		}
+		
 	},
 	methods: {
+		updateColor(c) {
+			if (this.editingLabel == null) {
+				this.addLabelObj.color = c.hex.substring(1,7)
+			} else {
+				this.editingLabel.color = c.hex.substring(1,7)
+			}
+		},
 		clickEdit(label) {
 			this.editingLabelId = label.id
 			this.editingLabel = Object.assign({}, label)
@@ -78,14 +94,14 @@ export default {
 			this.editingLabelId = null
 		},
 		clickShowAddLabel() {
-			this.addLabelObj = { boardId: 1, cardId: null, color: '000', title: 'new'}
+			this.addLabelObj = { cardId: null, color: '000', title: ''}
 			this.addLabel=true
 		},
 		clickAddLabel() {
 			this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)
 			this.addLabel = false
 			this.addLabelObj = null
-		},
+		}
 	}
 }
 </script>
diff --git a/src/services/BoardApi.js b/src/services/BoardApi.js
index a5e66b43a..fbfc699c0 100644
--- a/src/services/BoardApi.js
+++ b/src/services/BoardApi.js
@@ -152,7 +152,7 @@ export class BoardApi {
 	}
 
 	updateLabel(label) {
-		return axios.put(this.url('/labels/${label.id}'), label)
+		return axios.put(this.url(`/labels/${label.id}`), label)
 		.then(
 			(response) => {
 				return Promise.resolve(response.data)
diff --git a/src/store/main.js b/src/store/main.js
index 8b416de67..f83fc9cc2 100644
--- a/src/store/main.js
+++ b/src/store/main.js
@@ -139,7 +139,6 @@ export default new Vuex.Store({
 
 		// label mutators
 		removeLabelFromCurrentBoard(state, labelId) {
-			console.log(labelId)
 			const removeIndex = state.currentBoard.labels.findIndex((l) => {
 				return labelId === l.id
 			})
@@ -252,6 +251,7 @@ export default new Vuex.Store({
 			})	
 		}, 
 		addLabelToCurrentBoard({ commit }, newLabel) {
+			newLabel.boardId = this.state.currentBoard.id
 			apiClient.createLabel(newLabel)
 			.then((newLabel) => {
 				commit('addLabelToCurrentBoard', newLabel);