Create new labels on the fly

src/components/lists/ShowList.vue

@@ -229,7 +229,6 @@
 												:clear-on-select="false"
 												:close-on-select="false"
 												:options-limit="300"
-												:show-no-results="false"
 												:hide-selected="true"
 												v-model="taskEditTask.labels"
 												:options="foundLabels"
@@ -240,17 +239,21 @@
 												@select="addLabel"
 												placeholder="Type to search"
 												label="title"
-												track-by="id">
+												track-by="id"
+												:taggable="true"
+												@tag="createAndAddLabel"
+												tag-placeholder="Add this as new label"
+										>
 											<template slot="tag" slot-scope="{ option, remove }">
-												<span class="tag" :style="{'background': '#' + option.hex_color, 'color': option.hasDarkColor() ? '#e5e5e5' : '#4a4a4a'}">
+												<span class="tag" :style="{'background': '#' + option.hex_color, 'color': option.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'}">
 													<span>{{ option.title }}</span>
-													<button class="delete is-small" @click="removeLabel(option)"></button>
+													<a class="delete is-small" @click="removeLabel(option)"></a>
 												</span>
 											</template>
 											<template slot="clear" slot-scope="props">
 												<div class="multiselect__clear" v-if="taskEditTask.labels.length" @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
 											</template>
-											<span slot="noResult">No label found. Change the search query <br/>or hit enter to create the label.</span>
+											<template slot="noOptions">no</template>
 										</multiselect>
 									</div>
 								</div>
@@ -317,6 +320,7 @@
 	import LabelTaskService from '../../services/labelTask'
 	import LabelService from '../../services/label'
 	import LabelTaskModel from '../../models/labelTask'
+	import LabelModel from '../../models/label'
 
 	export default {
 		data() {
@@ -558,6 +562,17 @@
 					.catch(e => {
 						message.error(e, this)
 					})
+			},
+			createAndAddLabel(title) {
+				let newLabel = new LabelModel({title: title})
+				this.labelService.create(newLabel)
+					.then(r => {
+						this.addLabel(r)
+						this.taskEditTask.labels.push(r)
+					})
+					.catch(e => {
+						message.error(e, this)
+					})
 			}
 		}
 	}

src/models/label.js

@@ -22,6 +22,10 @@ export default class LabelModel extends AbstractModel {
 	}
 	
 	hasDarkColor() {
+		if (this.hex_color === '') {
+			return true // Defaults to dark
+		}
+		
 		let rgb = parseInt(this.hex_color, 16);   // convert rrggbb to decimal
 		let r = (rgb >> 16) & 0xff;  // extract red
 		let g = (rgb >>  8) & 0xff;  // extract green
@@ -29,6 +33,6 @@ export default class LabelModel extends AbstractModel {
 		
 		// luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest
 		let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
-		return luma < 128
+		return luma > 128
 	}
 }

src/services/label.js

@@ -1,4 +1,5 @@
 import AbstractService from "./abstractService";
+import LabelModel from '../models/label'
 
 export default class LabelService extends AbstractService {
 	constructor() {
@@ -10,4 +11,8 @@ export default class LabelService extends AbstractService {
 			delete: '/labels/{id}',
 		})
 	}
+	
+	modelFactory(data) {
+		return new LabelModel(data)
+	}
 }

src/styles/tasks.scss

@@ -142,6 +142,7 @@
 
   .tag{
     margin-right: 0.5em;
+    margin-bottom: 0.5em;
 
     &:last-child{
       margin-right: 0;

todo.md

@@ -96,6 +96,8 @@
   * User should be able to search for a label
   * if none is found, "enter" should create and add it to the task
   * multiselect -> action dispatcher + styling
+  * [ ] Label overview + edit
+  * [ ] Delay when searching to not search for the character I entered 5 minutes ago
 * [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend
 
 ## Other features