Fix loading labels when editing a saved filter

src/components/list/partials/filters.vue

@@ -132,24 +132,7 @@
 		<div class="field">
 			<label class="label">{{ $t('task.attributes.labels') }}</label>
 			<div class="control">
-				<multiselect
+				<edit-labels v-model="labels" @change="changeLabelFilter"/>
-					:placeholder="$t('label.search')"
-					@search="findLabels"
-					:search-results="foundLabels"
-					@select="label => addLabel(label)"
-					label="title"
-					:multiple="true"
-					v-model="labels"
-				>
-					<template v-slot:tag="props">
-							<span
-								: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>
-				</multiselect>
 			</div>
 		</div>
 
@@ -205,10 +188,12 @@ import Multiselect from '@/components/input/multiselect'
 import UserService from '@/services/user'
 import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
+import EditLabels from '@/components/tasks/partials/editLabels'
 
 export default {
 	name: 'filters',
 	components: {
+		EditLabels,
 		PrioritySelect,
 		Fancycheckbox,
 		flatPickr,
@@ -319,9 +304,12 @@ export default {
 			this.prepareSingleValue('percent_done', 'percentDone', 'usePercentDone', true)
 			this.prepareDate('reminders')
 			this.prepareRelatedObjectFilter('users', 'assignees')
-			this.prepareRelatedObjectFilter('labels', 'labels', 'label')
 			this.prepareRelatedObjectFilter('lists', 'list_id')
 			this.prepareRelatedObjectFilter('namespace')
+
+			this.prepareSingleValue('labels')
+			const labelIds = (typeof this.filters.labels === 'string' ? this.filters.labels : '').split(',').map(i => parseInt(i))
+			this.labels = (Object.values(this.$store.state.labels.labels).filter(l => labelIds.includes(l.id)) ?? [])
 		},
 		removePropertyFromFilter(propertyName) {
 			// Because of the way arrays work, we can only ever remove one element at once.

src/components/tasks/partials/editLabels.vue

@@ -55,7 +55,8 @@ export default {
 		},
 		taskId: {
 			type: Number,
-			required: true,
+			required: false,
+			default: () => 0,
 		},
 		disabled: {
 			default: false,
@@ -100,9 +101,19 @@ export default {
 			this.query = query
 		},
 		addLabel(label, showNotification = true) {
+			const bubble = () => {
+				this.$emit('input', this.labels)
+				this.$emit('change', this.labels)
+			}
+			
+			if (this.taskId === 0) {
+				bubble()
+				return
+			}
+
 			this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
 				.then(() => {
-					this.$emit('input', this.labels)
+					bubble()
 					if (showNotification) {
 						this.success({message: this.$t('task.label.addSuccess')})
 					}
@@ -112,15 +123,24 @@ export default {
 				})
 		},
 		removeLabel(label) {
+			const removeFromState = () => {
+				for (const l in this.labels) {
+					if (this.labels[l].id === label.id) {
+						this.labels.splice(l, 1)
+					}
+				}
+				this.$emit('input', this.labels)
+				this.$emit('change', this.labels)
+			}
+
+			if (this.taskId === 0) {
+				removeFromState()
+				return
+			}
+
 			this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
 				.then(() => {
-					// Remove the label from the list
+					removeFromState()
-					for (const l in this.labels) {
-						if (this.labels[l].id === label.id) {
-							this.labels.splice(l, 1)
-						}
-					}
-					this.$emit('input', this.labels)
 					this.success({message: this.$t('task.label.removeSuccess')})
 				})
 				.catch(e => {
@@ -128,6 +148,10 @@ export default {
 				})
 		},
 		createAndAddLabel(title) {
+			if (this.taskId === 0) {
+				return
+			}
+
 			const newLabel = new LabelModel({title: title})
 			this.$store.dispatch('labels/createLabel', newLabel)
 				.then(r => {