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

@@ -1,7 +1,7 @@
 <template>
-		<div>
-			deleted
-		</div>
+	<div>
+		deleted
+	</div>
 </template>
 
 <script>
@@ -9,20 +9,18 @@
 export default {
 	name: 'DeletedTabSidebard',
 	components: {
-		
-	},
-	props: {
-	},
-	data() {
-		return {
-		}
+
 	},
 	props: {
 		board: {
 			type: Object,
 			default: undefined
 		}
+	},
+	data() {
+		return {
+		}
 	}
-		
+
 }
 </script>

src/components/board/SharingTabSidebard.vue

@@ -1,29 +1,29 @@
 <template>
-		<div>
-			<multiselect :options="sharees" @search-change="asyncFind" label="label">
-				<template #option="scope">
-					{{ scope.option.label }}
-				</template>
-			</multiselect>
+	<div>
+		<multiselect :options="sharees" label="label" @search-change="asyncFind">
+			<template #option="scope">
+				{{ scope.option.label }}
+			</template>
+		</multiselect>
 
-			<ul
-				id="shareWithList"
-				class="shareWithList"
-			>
-				<li>
-					<avatar :user="board.owner.uid" />
-					<span class="has-tooltip username">
-						{{ board.owner.displayname }}
-					</span>
-				</li>
-				<li v-for="acl in board.acl" :key="acl.participant.uid">
-					<avatar :user="acl.participant.uid" />
-					<span class="has-tooltip username">
-						{{ acl.participant.displayname }}
-					</span>
-				</li>
-			</ul>
-		</div>
+		<ul
+			id="shareWithList"
+			class="shareWithList"
+		>
+			<li>
+				<avatar :user="board.owner.uid" />
+				<span class="has-tooltip username">
+					{{ board.owner.displayname }}
+				</span>
+			</li>
+			<li v-for="acl in board.acl" :key="acl.participant.uid">
+				<avatar :user="acl.participant.uid" />
+				<span class="has-tooltip username">
+					{{ acl.participant.displayname }}
+				</span>
+			</li>
+		</ul>
+	</div>
 </template>
 
 <script>
@@ -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) {
+		asyncFind(query) {
 			this.isLoading = true
 			this.$store.dispatch('loadSharees').then(response => {
 				this.isLoading = false
 			})
-		},
+		}
 	}
 
-
-
 }
 </script>

src/components/board/TagsTabSidebard.vue

@@ -4,28 +4,28 @@
 			<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', '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">
-				<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' }" />
-				<button v-tooltip="t('deck', 'Cancel')" class="icon-close" @click="addLabel=false" />
+					<input v-model="addLabelObj.title">
+					<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>
 			<button v-tooltip="t('deck', 'Add')" class="icon-add" @click="clickShowAddLabel()" />
@@ -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,
@@ -58,28 +58,37 @@ export default {
 	computed: {
 		...mapGetters({
 			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) {
-				this.addLabelObj.color = c.hex.substring(1,7)
+			if (this.editingLabel === null) {
+				this.addLabelObj.color = c.hex.substring(1, 7)
 			} else {
-				this.editingLabel.color = c.hex.substring(1,7)
+				this.editingLabel.color = c.hex.substring(1, 7)
 			}
 		},
 		clickEdit(label) {
@@ -94,8 +103,8 @@ export default {
 			this.editingLabelId = null
 		},
 		clickShowAddLabel() {
-			this.addLabelObj = { cardId: null, color: '000', title: ''}
-			this.addLabel=true
+			this.addLabelObj = { cardId: null, color: '000', title: '' }
+			this.addLabel = true
 		},
 		clickAddLabel() {
 			this.$store.dispatch('addLabelToCurrentBoard', this.addLabelObj)

src/components/board/TimelineTabSidebard.vue

@@ -1,7 +1,7 @@
 <template>
-		<div>
-			timeline
-		</div>
+	<div>
+		timeline
+	</div>
 </template>
 
 <script>
@@ -9,20 +9,18 @@
 export default {
 	name: 'TimelineTabSidebard',
 	components: {
-		
-	},
-	props: {
-	},
-	data() {
-		return {
-		}
+
 	},
 	props: {
 		board: {
 			type: Object,
 			default: undefined
 		}
+	},
+	data() {
+		return {
+		}
 	}
-		
+
 }
 </script>

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/models/index.js

@@ -52,4 +52,4 @@
  * @typedef {Object} Label
  * @property {String} title
  * @property {String} color
- */
+ */

src/services/BoardApi.js

@@ -138,47 +138,47 @@ export class BoardApi {
 	// Label API Calls
 	deleteLabel(id) {
 		return axios.delete(this.url(`/labels/${id}`))
-		.then(
-			(response) => {
-				return Promise.resolve(response.data)
-			},
-			(err) => {
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((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) => {
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((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) => {
+			.then(
+				(response) => {
+					return Promise.resolve(response.data)
+				},
+				(err) => {
+					return Promise.reject(err)
+				}
+			)
+			.catch((err) => {
 				return Promise.reject(err)
-			}
-		)
-		.catch((err) => {
-			return Promise.reject(err)
-		})
+			})
 	}
 
 }

src/store/main.js

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