some small changes

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

src/components/board/Board.vue

@@ -103,8 +103,8 @@ export default {
 					this.$store.dispatch('setCurrentBoard', board)
 					this.$store.dispatch('loadStacks', board)
 					this.loading = false
-					console.log(board);
-					this.$store.state.labels = board.labels;
+					console.log(board)
+					this.$store.state.labels = board.labels
 				})
 		},
 		onDropStack({ removedIndex, addedIndex }) {

src/components/board/BoardSidebar.vue

@@ -36,7 +36,7 @@
 			<div class="tabsContainer">
 				<div class="tab">
 					<div v-if="activeTab === 'Sharing'">
-						<SharingTabSidebard :board="board"></SharingTabSidebard>
+						<SharingTabSidebard :board="board" />
 					</div>
 
 					<div

src/components/board/DeletedTabSidebard.vue

@@ -10,18 +10,16 @@ export default {
 	name: 'DeletedTabSidebard',
 	components: {
 
-	},
-	props: {
-	},
-	data() {
-		return {
-		}
 	},
 	props: {
 		board: {
 			type: Object,
 			default: undefined
 		}
+	},
+	data() {
+		return {
+		}
 	}
 
 }

src/components/board/SharingTabSidebard.vue

@@ -1,6 +1,6 @@
 <template>
 	<div>
-			<multiselect :options="sharees" @search-change="asyncFind" label="label">
+		<multiselect :options="sharees" label="label" @search-change="asyncFind">
 			<template #option="scope">
 				{{ scope.option.label }}
 			</template>
@@ -34,7 +34,13 @@ export default {
 	name: 'SharingTabSidebard',
 	components: {
 		Avatar,
-		Multiselect,
+		Multiselect
+	},
+	props: {
+		board: {
+			type: Object,
+			default: undefined
+		}
 	},
 	data() {
 		return {
@@ -46,22 +52,14 @@ export default {
 			sharees: 'sharees'
 		})
 	},
-	props: {
-		board: {
-			type: Object,
-			default: undefined
-		}
-	},
 	methods: {
 		asyncFind(query) {
 			this.isLoading = true
 			this.$store.dispatch('loadSharees').then(response => {
 				this.isLoading = false
 			})
-		},
 		}
-
-
+	}
 
 }
 </script>

src/components/board/TagsTabSidebard.vue

@@ -4,15 +4,15 @@
 			<li v-for="label in labels" :key="label.id">
 				<template v-if="editingLabelId === label.id">
 					<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: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }" />
+					<compact-picker :value="editingLabel.color" :palette="defaultColors" @input="updateColor" />
+					<button v-tooltip="{content: missingDataLabel, show: !editLabelObjValidated, trigger: 'manual' }" :disabled="!editLabelObjValidated" class="icon-checkmark"
+						@click="updateLabel(label)" />
 
 					<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="editingLabelId = null" />
 				</template>
 				<template v-else>
 					<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>{{ label.title }}</span>
 					</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)" />
@@ -22,9 +22,9 @@
 			<li v-if="addLabel">
 				<template>
 					<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: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" />
+					<compact-picker :palette="defaultColors" value="" @input="updateColor" />
+					<button v-tooltip="{content: missingDataLabel, show: !addLabelObjValidated, trigger: 'manual' }" :disabled="!addLabelObjValidated" class="icon-checkmark"
+						@click="clickAddLabel()" />
 					<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="addLabel=false" />
 				</template>
 			</li>
@@ -41,10 +41,10 @@ import { Compact } from 'vue-color'
 
 export default {
 	name: 'TagsTabSidebard',
-	mixins: [Color],
 	components: {
 		'compact-picker': Compact
 	},
+	mixins: [Color],
 	data() {
 		return {
 			editingLabelId: null,
@@ -60,23 +60,32 @@ export default {
 			labels: 'currentBoardLabels'
 		}),
 		addLabelObjValidated() {
-			if (this.addLabelObj.title == '') return false;
-			if (this.addLabelObj.color == '' || 
-			this.addLabelObj.color.length != 6) return false;
-			return true;
+			if (this.addLabelObj.title === '') {
+				return false
+			}
+
+			if (this.colorIsValid(this.addLabelObj.color) === false) {
+				return false
+			}
+
+			return true
 		},
 		editLabelObjValidated() {
-			console.log(this.editingLabel.color)
-			if (this.editingLabel.title == '') return false;
-			if (this.editingLabel.color == '' || 
-			this.editingLabel.color.length != 6) return false;
-			return true;
+			if (this.editingLabel.title === '') {
+				return false
+			}
+
+			if (this.colorIsValid(this.editingLabel.color) === false) {
+				return false
+			}
+
+			return true
 		}
 
 	},
 	methods: {
 		updateColor(c) {
-			if (this.editingLabel == null) {
+			if (this.editingLabel === null) {
 				this.addLabelObj.color = c.hex.substring(1, 7)
 			} else {
 				this.editingLabel.color = c.hex.substring(1, 7)

src/components/board/TimelineTabSidebard.vue

@@ -10,18 +10,16 @@ export default {
 	name: 'TimelineTabSidebard',
 	components: {
 
-	},
-	props: {
-	},
-	data() {
-		return {
-		}
 	},
 	props: {
 		board: {
 			type: Object,
 			default: undefined
 		}
+	},
+	data() {
+		return {
+		}
 	}
 
 }

src/mixins/color.js

@@ -81,6 +81,15 @@ export default {
 				return '#000000'
 			}
 
+		},
+		colorIsValid(hex) {
+
+			var re = new RegExp('[A-Fa-f0-9]{6}')
+			if (re.test(hex)) {
+				return true
+			}
+			return false
+
 		}
 
 	}

src/store/main.js

@@ -246,20 +246,20 @@ export default new Vuex.Store({
 		removeLabelFromCurrentBoard({ commit }, label) {
 			apiClient.deleteLabel(label)
 				.then((label) => {
-				commit('removeLabelFromCurrentBoard', label.id);
+					commit('removeLabelFromCurrentBoard', label.id)
 				})
 		},
 		updateLabelFromCurrentBoard({ commit }, newLabel) {
 			apiClient.updateLabel(newLabel)
 				.then((newLabel) => {
-				commit('updateLabelFromCurrentBoard', newLabel);
+					commit('updateLabelFromCurrentBoard', newLabel)
 				})
 		},
 		addLabelToCurrentBoard({ commit }, newLabel) {
 			newLabel.boardId = this.state.currentBoard.id
 			apiClient.createLabel(newLabel)
 				.then((newLabel) => {
-				commit('addLabelToCurrentBoard', newLabel);
+					commit('addLabelToCurrentBoard', newLabel)
 				})
 		}
 	}