Fix labels randomly changing color after saving

src/helpers/color/colorFromHex.js

@@ -0,0 +1,13 @@
+/**
+ * Returns the hex color code without the '#' if it has one.
+ *
+ * @param color
+ * @returns {string}
+ */
+export const colorFromHex = color => {
+	if (color.substring(0, 1) === '#') {
+		color = color.substring(1, 7)
+	}
+
+	return color
+}

src/helpers/color/colorFromHex.test.js

@@ -0,0 +1,11 @@
+import {colorFromHex} from './colorFromHex'
+
+test('hex', () => {
+	const color = '#ffffff'
+	expect(colorFromHex(color)).toBe('ffffff')
+})
+
+test('no hex', () => {
+	const color = 'ffffff'
+	expect(colorFromHex(color)).toBe('ffffff')
+})

src/helpers/color/colorIsDark.test.js

@@ -0,0 +1,16 @@
+import {colorIsDark} from './colorIsDark'
+
+test('dark color', () => {
+	const color = '#111111'
+	expect(colorIsDark(color)).toBe(false)
+})
+
+test('light color', () => {
+	const color = '#DDDDDD'
+	expect(colorIsDark(color)).toBe(true)
+})
+
+test('default dark', () => {
+	const color = ''
+	expect(colorIsDark(color)).toBe(true)
+})

src/main.js

@@ -68,7 +68,7 @@ import vueShortkey from 'vue-shortkey'
 // Mixins
 import message from './message'
 import {format, formatDistance} from 'date-fns'
-import {colorIsDark} from './helpers/colorIsDark'
+import {colorIsDark} from './helpers/color/colorIsDark'
 import {setTitle} from './helpers/setTitle'
 // Vuex
 import {store} from './store'

src/models/label.js

@@ -1,6 +1,6 @@
 import AbstractModel from './abstractModel'
 import UserModel from './user'
-import {colorIsDark} from '@/helpers/colorIsDark'
+import {colorIsDark} from '@/helpers/color/colorIsDark'
 
 export default class LabelModel extends AbstractModel {
 	constructor(data) {

src/services/label.js

@@ -1,6 +1,7 @@
 import AbstractService from './abstractService'
 import LabelModel from '../models/label'
 import {formatISO} from 'date-fns'
+import {colorFromHex} from '@/helpers/color/colorFromHex'
 
 export default class LabelService extends AbstractService {
 	constructor() {
@@ -16,7 +17,7 @@ export default class LabelService extends AbstractService {
 	processModel(label) {
 		label.created = formatISO(new Date(label.created))
 		label.updated = formatISO(new Date(label.updated))
-		label.hexColor = label.hexColor.substring(1, 7)
+		label.hexColor = colorFromHex(label.hexColor)
 		return label
 	}
 

src/services/list.js

@@ -2,6 +2,7 @@ import AbstractService from './abstractService'
 import ListModel from '../models/list'
 import TaskService from './task'
 import {formatISO} from 'date-fns'
+import {colorFromHex} from '@/helpers/color/colorFromHex'
 
 export default class ListService extends AbstractService {
 	constructor() {
@@ -29,12 +30,12 @@ export default class ListService extends AbstractService {
 		model.tasks = model.tasks.map(task => {
 			return taskService.beforeUpdate(task)
 		})
-		model.hexColor = model.hexColor.substring(1, 7)
+		model.hexColor = colorFromHex(model.hexColor)
 		return model
 	}
 
 	beforeCreate(list) {
-		list.hexColor = list.hexColor.substring(1, 7)
+		list.hexColor = colorFromHex(list.hexColor)
 		return list
 	}
 

src/services/namespace.js

@@ -1,6 +1,7 @@
 import AbstractService from './abstractService'
 import NamespaceModel from '../models/namespace'
 import {formatISO} from 'date-fns'
+import {colorFromHex} from '@/helpers/color/colorFromHex'
 
 export default class NamespaceService extends AbstractService {
 	constructor() {
@@ -24,12 +25,12 @@ export default class NamespaceService extends AbstractService {
 	}
 
 	beforeUpdate(namespace) {
-		namespace.hexColor = namespace.hexColor.substring(1, 7)
+		namespace.hexColor = colorFromHex(namespace.hexColor)
 		return namespace
 	}
 
 	beforeCreate(namespace) {
-		namespace.hexColor = namespace.hexColor.substring(1, 7)
+		namespace.hexColor = colorFromHex(namespace.hexColor)
 		return namespace
 	}
 }

src/services/task.js

@@ -4,6 +4,7 @@ import AttachmentService from './attachment'
 import LabelService from './label'
 
 import {formatISO} from 'date-fns'
+import {colorFromHex} from '@/helpers/color/colorFromHex'
 
 const parseDate = date => {
 	if (date) {
@@ -86,9 +87,7 @@ export default class TaskService extends AbstractService {
 		}
 		model.repeatAfter = repeatAfterSeconds
 
-		if (model.hexColor.substring(0, 1) === '#') {
+		model.hexColor = colorFromHex(model.hexColor)
-			model.hexColor = model.hexColor.substring(1, 7)
-		}
 
 		// Do the same for all related tasks
 		Object.keys(model.relatedTasks).forEach(relationKind => {