Replace vue-multiselect with a custom component (#366)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/366
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/tasks/partials/editAssignees.vue

@@ -1,37 +1,24 @@
 <template>
 	<multiselect
-		:clear-on-select="true"
-		:close-on-select="false"
-		:disabled="disabled"
-		:hide-selected="true"
-		:internal-search="true"
 		:loading="listUserService.loading"
+		placeholder="Type to assign a user..."
+		:disabled="disabled"
 		:multiple="true"
-		:options="foundUsers"
-		:options-limit="300"
-		:searchable="true"
-		:showNoOptions="false"
-		@search-change="findUser"
+		@search="findUser"
+		:search-results="foundUsers"
 		@select="addAssignee"
 		label="username"
-		placeholder="Type to assign a user..."
-		select-label="Assign this user"
-		track-by="id"
+		select-placeholder="Assign this user"
 		v-model="assignees"
 	>
-		<template slot="tag" slot-scope="{ option }">
-			<user :avatar-size="30" :show-username="false" :user="option"/>
-			<a @click="removeAssignee(option)" class="remove-assignee" v-if="!disabled">
-				<icon icon="times"/>
-			</a>
+		<template v-slot:tag="props">
+			<span class="assignee">
+				<user :avatar-size="32" :show-username="false" :user="props.item"/>
+				<a @click="removeAssignee(props.item)" class="remove-assignee" v-if="!disabled">
+					<icon icon="times"/>
+				</a>
+			</span>
 		</template>
-		<template slot="clear" slot-scope="props">
-			<div
-				@mousedown.prevent.stop="clearAllFoundUsers(props.search)"
-				class="multiselect__clear"
-				v-if="newAssignee !== null && newAssignee.id !== 0"></div>
-		</template>
-		<span slot="noResult">No user found. Consider changing the search query.</span>
 	</multiselect>
 </template>
 
@@ -42,19 +29,13 @@ import UserModel from '../../../models/user'
 import ListUserService from '../../../services/listUsers'
 import TaskAssigneeService from '../../../services/taskAssignee'
 import User from '../../misc/user'
-import LoadingComponent from '../../misc/loading'
-import ErrorComponent from '../../misc/error'
+import Multiselect from '@/components/input/multiselect'
 
 export default {
 	name: 'editAssignees',
 	components: {
 		User,
-		multiselect: () => ({
-			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		Multiselect,
 	},
 	props: {
 		taskId: {

src/components/tasks/partials/editLabels.vue

@@ -1,42 +1,25 @@
 <template>
 	<multiselect
-		:clear-on-select="true"
-		:close-on-select="false"
-		:disabled="disabled"
-		:hide-selected="true"
-		:internal-search="true"
 		:loading="labelService.loading || labelTaskService.loading"
-		:multiple="true"
-		:options="foundLabels"
-		:options-limit="300"
-		:searchable="true"
-		:showNoOptions="false"
-		:taggable="true"
-		@search-change="findLabel"
-		@select="label => addLabel(label)"
-		@tag="createAndAddLabel"
-		label="title"
 		placeholder="Type to add a new label..."
-		tag-placeholder="Add this as new label"
-		track-by="id"
+		:multiple="true"
+		@search="findLabel"
+		:search-results="foundLabels"
+		@select="addLabel"
+		label="title"
+		:creatable="true"
+		@create="createAndAddLabel"
+		create-placeholder="Add this as new label"
 		v-model="labels"
 	>
-		<template
-			slot="tag"
-			slot-scope="{ option }">
+		<template v-slot:tag="props">
 			<span
-				:style="{'background': option.hexColor, 'color': option.textColor}"
-				class="tag">
-				<span>{{ option.title }}</span>
-				<a @click="removeLabel(option)" class="delete is-small"></a>
+				:style="{'background': props.item.hexColor, 'color': props.item.textColor}"
+				class="tag ml-2 mt-2">
+				<span>{{ props.item.title }}</span>
+				<a @click="removeLabel(props.item)" class="delete is-small"></a>
 			</span>
 		</template>
-		<template slot="clear" slot-scope="props">
-			<div
-				@mousedown.prevent.stop="clearAllLabels(props.search)"
-				class="multiselect__clear"
-				v-if="labels.length"></div>
-		</template>
 	</multiselect>
 </template>
 
@@ -46,8 +29,8 @@ import differenceWith from 'lodash/differenceWith'
 import LabelService from '../../../services/label'
 import LabelModel from '../../../models/label'
 import LabelTaskService from '../../../services/labelTask'
-import LoadingComponent from '../../misc/loading'
-import ErrorComponent from '../../misc/error'
+
+import Multiselect from '@/components/input/multiselect'
 
 export default {
 	name: 'edit-labels',
@@ -75,12 +58,7 @@ export default {
 		}
 	},
 	components: {
-		multiselect: () => ({
-			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		Multiselect,
 	},
 	watch: {
 		value(newLabels) {

src/components/tasks/partials/listSearch.vue

@@ -1,39 +1,27 @@
 <template>
 	<multiselect
-		:internal-search="true"
-		:loading="listSerivce.loading"
-		:multiple="false"
-		:options="foundLists"
-		:searchable="true"
-		:showNoOptions="false"
-		@search-change="findLists"
-		@select="select"
 		class="control is-expanded"
-		label="title"
-		placeholder="Type to search for a list..."
-		track-by="id"
 		v-focus
+		:loading="listSerivce.loading"
+		placeholder="Type to search for a list..."
+		@search="findLists"
+		:search-results="foundLists"
+		@select="select"
+		label="title"
 		v-model="list"
+		select-placeholder="Click or press enter to select this list"
 	>
-		<template slot="clear" slot-scope="props">
-			<div
-				@mousedown.prevent.stop="clearAll(props.search)"
-				class="multiselect__clear"
-				v-if="list !== null && list.id !== 0"></div>
-		</template>
-		<template slot="option" slot-scope="props">
+		<template v-slot:searchResult="props">
 			<span class="list-namespace-title">{{ namespace(props.option.namespaceId) }} ></span>
 			{{ props.option.title }}
 		</template>
-		<span slot="noResult">No list found. Consider changing the search query.</span>
 	</multiselect>
 </template>
 
 <script>
 import ListService from '../../../services/list'
 import ListModel from '../../../models/list'
-import LoadingComponent from '../../misc/loading'
-import ErrorComponent from '../../misc/error'
+import Multiselect from '@/components/input/multiselect'
 
 export default {
 	name: 'listSearch',
@@ -45,12 +33,7 @@ export default {
 		}
 	},
 	components: {
-		multiselect: () => ({
-			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		Multiselect,
 	},
 	beforeMount() {
 		this.listSerivce = new ListService()

src/components/tasks/partials/relatedTasks.vue

@@ -15,29 +15,16 @@
 			</label>
 			<div class="field">
 				<multiselect
-					:internal-search="true"
-					:loading="taskService.loading"
-					:multiple="false"
-					:options="foundTasks"
-					:searchable="true"
-					:showNoOptions="false"
-					:taggable="true"
-					@search-change="findTasks"
-					@tag="createAndRelateTask"
-					label="title"
 					placeholder="Type search for a new task to add as related..."
-					tag-placeholder="Add this as new related task"
-					track-by="id"
+					@search="findTasks"
+					:loading="taskService.loading"
+					:search-results="foundTasks"
+					label="title"
 					v-model="newTaskRelationTask"
-				>
-					<template slot="clear" slot-scope="props">
-						<div
-							@mousedown.prevent.stop="clearAllFoundTasks(props.search)"
-							class="multiselect__clear"
-							v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"></div>
-					</template>
-					<span slot="noResult">No task found. Consider changing the search query.</span>
-				</multiselect>
+					:creatable="true"
+					create-placeholder="Add this as new related task"
+					@create="createAndRelateTask"
+				/>
 			</div>
 			<div class="field has-addons">
 				<div class="control is-expanded">
@@ -60,7 +47,7 @@
 			<template v-if="rts.length > 0">
 				<span class="title">{{ relationKindTitle(kind, rts.length) }}</span>
 				<div class="tasks noborder">
-					<div :key="t.id" class="task" v-for="t in rts">
+					<div :key="t.id" class="task" v-for="t in rts.filter(t => t)">
 						<router-link :to="{ name: $route.name, params: { id: t.id } }">
 							<span :class="{ 'done': t.done}" class="tasktext">
 								<span
@@ -107,8 +94,7 @@ import TaskRelationService from '../../../services/taskRelation'
 import relationKinds from '../../../models/relationKinds'
 import TaskRelationModel from '../../../models/taskRelation'
 
-import LoadingComponent from '../../misc/loading'
-import ErrorComponent from '../../misc/error'
+import Multiselect from '@/components/input/multiselect'
 
 export default {
 	name: 'relatedTasks',
@@ -127,12 +113,7 @@ export default {
 		}
 	},
 	components: {
-		multiselect: () => ({
-			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-			loading: LoadingComponent,
-			error: ErrorComponent,
-			timeout: 60000,
-		}),
+		Multiselect,
 	},
 	props: {
 		taskId: {
@@ -171,11 +152,6 @@ export default {
 	},
 	methods: {
 		findTasks(query) {
-			if (query === '') {
-				this.clearAllFoundTasks()
-				return
-			}
-
 			this.taskService.getAll({}, {s: query})
 				.then(response => {
 					this.$set(this, 'foundTasks', response)
@@ -184,9 +160,6 @@ export default {
 					this.error(e, this)
 				})
 		},
-		clearAllFoundTasks() {
-			this.$set(this, 'foundTasks', [])
-		},
 		addTaskRelation() {
 			let rel = new TaskRelationModel({
 				taskId: this.taskId,
@@ -199,7 +172,7 @@ export default {
 						this.$set(this.relatedTasks, this.newTaskRelationKind, [])
 					}
 					this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-					this.newTaskRelationTask = new TaskModel()
+					this.newTaskRelationTask = null
 					this.saved = true
 					setTimeout(() => {
 						this.saved = false

src/components/tasks/partials/repeatAfter.vue

@@ -92,15 +92,6 @@ p {
 	padding-top: 6px;
 }
 
-.field.has-addons {
-
-	margin-bottom: .5rem;
-
-	.control .select select {
-		height: 2.5em;
-	}
-}
-
 .columns {
 	align-items: center;
 }