fix(labels): make color reset work

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')})

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)
 	}
 

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'

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)
 	}
 

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

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) {

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)