From 488cdbcd93e553e18218084c1ae2750c805979a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 13 Nov 2023 15:54:20 +0100
Subject: [PATCH] fix: Properly handle adding new tags through multiselect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/CardSidebarTabDetails.vue |  3 +-
 src/components/card/TagSelector.vue           | 29 ++++++-------------
 src/mixins/color.js                           |  2 +-
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/components/card/CardSidebarTabDetails.vue b/src/components/card/CardSidebarTabDetails.vue
index 387298cfa..df21c0ecb 100644
--- a/src/components/card/CardSidebarTabDetails.vue
+++ b/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) {
diff --git a/src/components/card/TagSelector.vue b/src/components/card/TagSelector.vue
index 6bf6e4d0e..323a447b1 100644
--- a/src/components/card/TagSelector.vue
+++ b/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)
 		},
-	},
-	watch: {
-		card() {
-			this.initialize()
+		assignedLabels() {
+			return [...this.card.labels].local((a, b) => (a.title < b.title) ? -1 : 1)
 		},
 	},
-	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)
 		},
diff --git a/src/mixins/color.js b/src/mixins/color.js
index ddc386017..09c4e099a 100644
--- a/src/mixins/color.js
+++ b/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}/