fix: Properly handle adding new tags through multiselect

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/card/CardSidebarTabDetails.vue

@@ -172,13 +172,14 @@ export default {
 		},
 
 		async addLabelToBoardAndCard(name) {
-			await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
+			const newLabel = await this.$store.dispatch('addLabelToCurrentBoardAndCard', {
 				card: this.copiedCard,
 				newLabel: {
 					title: name,
 					color: this.randomColor(),
 				},
 			})
+			this.copiedCard.labels.push(newLabel)
 		},
 
 		removeLabelFromCard(removedLabel) {

src/components/card/TagSelector.vue

@@ -12,13 +12,19 @@
 			:taggable="true"
 			label="title"
 			track-by="id"
+			tag-position="bottom"
 			@select="onSelect"
 			@remove="onRemove"
 			@tag="onNewTag">
 			<template #option="scope">
-				<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
+				<div v-if="!scope.option?.isTag" :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
 					{{ scope.option.title }}
 				</div>
+				<div v-else>
+					{{ t('deck', 'Create a new tag:') }} <div class="tag">
+						{{ scope.option.label }}
+					</div>
+				</div>
 			</template>
 			<template #tag="scope">
 				<div :style="{ backgroundColor: '#' + scope.option.color, color: textColor(scope.option.color)}" class="tag">
@@ -52,32 +58,15 @@ export default {
 			default: false,
 		},
 	},
-	data() {
-		return {
-			assignedLabels: null,
-		}
-	},
 	computed: {
 		labelsSorted() {
 			return [...this.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
 		},
-	},
+		assignedLabels() {
-	watch: {
+			return [...this.card.labels].local((a, b) => (a.title < b.title) ? -1 : 1)
-		card() {
-			this.initialize()
 		},
 	},
-	mounted() {
-		this.initialize()
-	},
 	methods: {
-		async initialize() {
-			if (!this.card) {
-				return
-			}
-
-			this.assignedLabels = [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
-		},
 		onSelect(newLabel) {
 			this.$emit('select', newLabel)
 		},

src/mixins/color.js

@@ -25,7 +25,7 @@ import chroma from 'chroma-js'
 export default {
 	methods: {
 		textColor(hex) {
-			return chroma(hex).get('lab.l') > 50 ? '#000000' : '#ffffff'
+			return chroma(hex ?? 'ffffff').get('lab.l') > 50 ? '#000000' : '#ffffff'
 		},
 		colorIsValid(hex) {
 			const re = /[A-Fa-f0-9]{6}/