Preload labels and use locally stored in vuex

src/components/home/contentAuth.vue

@@ -55,6 +55,7 @@ export default {
 	},
 	created() {
 		this.renewTokenOnFocus()
+		this.loadLabels()
 	},
 	computed: mapState({
 		namespaces(state) {
@@ -126,6 +127,12 @@ export default {
 		showKeyboardShortcuts() {
 			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
 		},
+		loadLabels() {
+			this.$store.dispatch('labels/loadAllLabels')
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
 	},
 }
 </script>

src/components/list/partials/filters.vue

@@ -131,7 +131,6 @@
 			<label class="label">Labels</label>
 			<div class="control">
 				<multiselect
-					:loading="labelService.loading"
 					placeholder="Type to search for a label..."
 					@search="findLabels"
 					:search-results="foundLabels"
@@ -202,7 +201,6 @@ import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect'
 import Multiselect from '@/components/input/multiselect'
 
 import UserService from '@/services/user'
-import LabelService from '@/services/label'
 import ListService from '@/services/list'
 import NamespaceService from '@/services/namespace'
 import {mapState} from 'vuex'
@@ -249,8 +247,7 @@ export default {
 			foundusers: [],
 			users: [],
 
-			labelService: LabelService,
-			foundLabels: [],
+			labelQuery: '',
 			labels: [],
 
 			listsService: ListService,
@@ -264,7 +261,6 @@ export default {
 	},
 	created() {
 		this.usersService = new UserService()
-		this.labelService = new LabelService()
 		this.listsService = new ListService()
 		this.namespaceService = new NamespaceService()
 	},
@@ -284,19 +280,30 @@ export default {
 			this.prepareFilters()
 		},
 	},
-	computed: mapState({
-		flatPickerConfig: state => ({
-			altFormat: 'j M Y H:i',
-			altInput: true,
-			dateFormat: 'Y-m-d H:i',
-			enableTime: true,
-			time_24hr: true,
-			mode: 'range',
-			locale: {
-				firstDayOfWeek: state.auth.settings.weekStart,
-			},
-		})
-	}),
+	computed: {
+		foundLabels() {
+			const labels = (Object.values(this.$store.state.labels.labels).filter(l => {
+				return l.title.toLowerCase().includes(this.labelQuery.toLowerCase())
+			}) ?? [])
+
+			return differenceWith(labels, this.labels, (first, second) => {
+				return first.id === second.id
+			})
+		},
+		...mapState({
+			flatPickerConfig: state => ({
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				mode: 'range',
+				locale: {
+					firstDayOfWeek: state.auth.settings.weekStart,
+				},
+			}),
+		}),
+	},
 	methods: {
 		change() {
 			this.$emit('input', this.params)
@@ -566,25 +573,8 @@ export default {
 			this.$set(this.filters, filterName, ids.join(','))
 			this.setSingleValueFilter(filterName, filterName, '', 'in')
 		},
-		clearLabels() {
-			this.$set(this, 'foundLabels', [])
-		},
 		findLabels(query) {
-
-			if (query === '') {
-				this.clearLabels()
-			}
-
-			this.labelService.getAll({}, {s: query})
-				.then(response => {
-					// Filter the results to not include labels already selected
-					this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
-						return first.id === second.id
-					}))
-				})
-				.catch(e => {
-					this.error(e, this)
-				})
+			this.labelQuery = query
 		},
 		addLabel() {
 			this.$nextTick(() => {

src/components/tasks/partials/editLabels.vue

@@ -1,6 +1,6 @@
 <template>
 	<multiselect
-		:loading="labelService.loading || labelTaskService.loading"
+		:loading="loading"
 		placeholder="Type to add a new label..."
 		:multiple="true"
 		@search="findLabel"
@@ -39,11 +39,11 @@
 <script>
 import differenceWith from 'lodash/differenceWith'
 
-import LabelService from '../../../services/label'
 import LabelModel from '../../../models/label'
 import LabelTaskService from '../../../services/labelTask'
 
 import Multiselect from '@/components/input/multiselect'
+import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
 
 export default {
 	name: 'edit-labels',
@@ -62,12 +62,10 @@ export default {
 	},
 	data() {
 		return {
-			labelService: LabelService,
 			labelTaskService: LabelTaskService,
-			foundLabels: [],
 			labelTimeout: null,
 			labels: [],
-			searchQuery: '',
+			query: '',
 		}
 	},
 	components: {
@@ -79,38 +77,26 @@ export default {
 		},
 	},
 	created() {
-		this.labelService = new LabelService()
 		this.labelTaskService = new LabelTaskService()
 		this.labels = this.value
 	},
+	computed: {
+		foundLabels() {
+			const labels = (Object.values(this.$store.state.labels.labels).filter(l => {
+				return l.title.toLowerCase().includes(this.query.toLowerCase())
+			}) ?? [])
+
+			return differenceWith(labels, this.labels, (first, second) => {
+				return first.id === second.id
+			})
+		},
+		loading() {
+			return this.labelTaskService.loading || (this.$store.state[LOADING] && this.$store.state[LOADING_MODULE] === 'labels')
+		},
+	},
 	methods: {
 		findLabel(query) {
-			this.searchQuery = query
-			if (query === '') {
-				this.clearAllLabels()
-				return
-			}
-
-			if (this.labelTimeout !== null) {
-				clearTimeout(this.labelTimeout)
-			}
-
-			// Delay the search 300ms to not send a request on every keystroke
-			this.labelTimeout = setTimeout(() => {
-				this.labelService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
-							return first.id === second.id
-						}))
-						this.labelTimeout = null
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			}, 300)
-		},
-		clearAllLabels() {
-			this.$set(this, 'foundLabels', [])
+			this.query = query
 		},
 		addLabel(label, showNotification = true) {
 			this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
@@ -141,8 +127,8 @@ export default {
 				})
 		},
 		createAndAddLabel(title) {
-			let newLabel = new LabelModel({title: title})
-			this.labelService.create(newLabel)
+			const newLabel = new LabelModel({title: title})
+			this.$store.dispatch('labels/createLabel', newLabel)
 				.then(r => {
 					this.addLabel(r, false)
 					this.labels.push(r)
@@ -156,7 +142,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-
-</style>