From 28050d9cd5fe3e23b2e696ff9eab465c5974b6f0 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 15 Jan 2024 14:00:08 +0100
Subject: [PATCH] fix(labels): make color reset work

---
 src/components/tasks/partials/editLabels.vue | 6 +++++-
 src/helpers/color/colorFromHex.ts            | 4 ++--
 src/models/label.ts                          | 6 +-----
 src/stores/labels.ts                         | 2 +-
 src/stores/tasks.ts                          | 6 +++++-
 src/views/labels/ListLabels.vue              | 4 ++--
 src/views/labels/NewLabel.vue                | 5 ++++-
 7 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index 8d2eb0113..a2c6fc922 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -51,6 +51,7 @@ import Multiselect from '@/components/input/multiselect.vue'
 import type {ILabel} from '@/modelTypes/ILabel'
 import {useLabelStore} from '@/stores/labels'
 import {useTaskStore} from '@/stores/tasks'
+import {getRandomColorHex} from '@/helpers/color/randomColor'
 
 const props = defineProps({
 	modelValue: {
@@ -132,7 +133,10 @@ async function createAndAddLabel(title: string) {
 		return
 	}
 
-	const newLabel = await labelStore.createLabel(new LabelModel({title}))
+	const newLabel = await labelStore.createLabel(new LabelModel({
+		title,
+		hexColor: getRandomColorHex(),
+	}))
 	addLabel(newLabel, false)
 	labels.value.push(newLabel)
 	success({message: t('task.label.addCreateSuccess')})
diff --git a/src/helpers/color/colorFromHex.ts b/src/helpers/color/colorFromHex.ts
index cc2fa0898..69e674da3 100644
--- a/src/helpers/color/colorFromHex.ts
+++ b/src/helpers/color/colorFromHex.ts
@@ -4,8 +4,8 @@
  * @param color
  * @returns {string}
  */
-export function colorFromHex(color: string) {
-	if (color.substring(0, 1) === '#') {
+export function colorFromHex(color: string): string {
+	if (color !== '' && color.substring(0, 1) === '#') {
 		color = color.substring(1, 7)
 	}
 
diff --git a/src/models/label.ts b/src/models/label.ts
index 89b20b251..06de3017c 100644
--- a/src/models/label.ts
+++ b/src/models/label.ts
@@ -24,12 +24,8 @@ export default class LabelModel extends AbstractModel<ILabel> implements ILabel
 	constructor(data: Partial<ILabel> = {}) {
 		super()
 		this.assignData(data)
-		
-		if (this.hexColor === '') {
-			this.hexColor = getRandomColorHex()
-		}
 
-		if (this.hexColor.substring(0, 1) !== '#') {
+		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
 		this.textColor = colorIsDark(this.hexColor) ? '#4a4a4a' : '#fff'
diff --git a/src/stores/labels.ts b/src/stores/labels.ts
index d49f81184..b617e4dcc 100644
--- a/src/stores/labels.ts
+++ b/src/stores/labels.ts
@@ -67,7 +67,7 @@ export const useLabelStore = defineStore('label', () => {
 	}
 
 	function setLabel(label: ILabel) {
-		labels.value[label.id] = label
+		labels.value[label.id] = {...label}
 		update(label)
 	}
 
diff --git a/src/stores/tasks.ts b/src/stores/tasks.ts
index 3ea876dc5..05827fa80 100644
--- a/src/stores/tasks.ts
+++ b/src/stores/tasks.ts
@@ -29,6 +29,7 @@ import {useBaseStore} from '@/stores/base'
 import ProjectUserService from '@/services/projectUsers'
 import {useAuthStore} from '@/stores/auth'
 import TaskCollectionService from '@/services/taskCollection'
+import {getRandomColorHex} from '@/helpers/color/randomColor'
 
 interface MatchedAssignee extends IUser {
 	match: string,
@@ -337,7 +338,10 @@ export const useTaskStore = defineStore('task', () => {
 			let label = validateLabel(Object.values(labelStore.labels), labelTitle)
 			if (typeof label === 'undefined') {
 				// label not found, create it
-				const labelModel = new LabelModel({title: labelTitle})
+				const labelModel = new LabelModel({
+					title: labelTitle,
+					hexColor: getRandomColorHex(),
+				})
 				label = await labelStore.createLabel(labelModel)
 			}
 			return label
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 111476d1e..6efa79ab2 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -150,8 +150,8 @@ function deleteLabel(label: ILabel) {
 }
 
 function editLabelSubmit() {
-		return labelStore.updateLabel(labelEditLabel.value)
-	}
+	return labelStore.updateLabel(labelEditLabel.value)
+}
 
 function editLabel(label: ILabel) {
 	if (label.createdBy.id !== userInfo.value.id) {
diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 9f5edfb61..8e557a4f2 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script setup lang="ts">
-import {computed, ref} from 'vue'
+import {computed, onBeforeMount, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useRouter} from 'vue-router'
 
@@ -46,6 +46,7 @@ import LabelModel from '@/models/label'
 import {useLabelStore} from '@/stores/labels'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import {getRandomColorHex} from '@/helpers/color/randomColor'
 
 const router = useRouter()
 
@@ -55,6 +56,8 @@ useTitle(() => t('label.create.title'))
 const labelStore = useLabelStore()
 const label = ref(new LabelModel())
 
+onBeforeMount(() => label.value.hexColor = getRandomColorHex())
+
 const showError = ref(false)
 const loading = computed(() => labelStore.isLoading)