1 files changed, 62 insertions, 8 deletions
diff --git a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
index c639f20e5bd..f9606b7ca26 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
@@ -10,10 +10,10 @@
 			:loading="status.isLoading && groups.length === 0"
 			:placeholder="t('workflowengine', 'Type to search for group …')"
 			:options="groups"
-			:value="currentValue"
+			:model-value="currentValue"
 			label="displayname"
 			@search="searchAsync"
-			@input="(value) => $emit('input', value.id)" />
+			@input="update" />
 	</div>
 </template>
 
@@ -22,9 +22,10 @@ import { translate as t } from '@nextcloud/l10n'
 import { generateOcsUrl } from '@nextcloud/router'
 
 import axios from '@nextcloud/axios'
-import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
 
 const groups = []
+const wantedGroups = []
 const status = {
 	isLoading: false,
 }
@@ -35,7 +36,7 @@ export default {
 		NcSelect,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -44,15 +45,28 @@ export default {
 			default: () => { return {} },
 		},
 	},
+	emits: ['update:model-value'],
 	data() {
 		return {
 			groups,
 			status,
+			wantedGroups,
+			newValue: '',
 		}
 	},
 	computed: {
-		currentValue() {
-			return this.groups.find(group => group.id === this.value) || null
+		currentValue: {
+			get() {
+				return this.groups.find(group => group.id === this.newValue) || null
+			},
+			set(value) {
+				this.newValue = value
+			},
+		},
+	},
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
 		},
 	},
 	async mounted() {
@@ -61,8 +75,8 @@ export default {
 			await this.searchAsync('')
 		}
 		// If a current group is set but not in our list of groups then search for that group
-		if (this.currentValue === null && this.value) {
-			await this.searchAsync(this.value)
+		if (this.currentValue === null && this.newValue) {
+			await this.searchAsync(this.newValue)
 		}
 	},
 	methods: {
@@ -70,6 +84,13 @@ export default {
 
 		searchAsync(searchQuery) {
 			if (this.status.isLoading) {
+				if (searchQuery) {
+					// The first 20 groups are loaded up front (indicated by an
+					// empty searchQuery parameter), afterwards we may load
+					// groups that have not been fetched yet, but are used
+					// in existing rules.
+					this.enqueueWantedGroup(searchQuery)
+				}
 				return
 			}
 
@@ -82,16 +103,49 @@ export default {
 					})
 				})
 				this.status.isLoading = false
+				this.findGroupByQueue()
 			}, (error) => {
 				console.error('Error while loading group list', error.response)
 			})
 		},
+		async updateInternalValue() {
+			if (!this.newValue) {
+				await this.searchAsync(this.modelValue)
+			}
+			this.newValue = this.modelValue
+		},
 		addGroup(group) {
 			const index = this.groups.findIndex((item) => item.id === group.id)
 			if (index === -1) {
 				this.groups.push(group)
 			}
 		},
+		hasGroup(group) {
+			const index = this.groups.findIndex((item) => item.id === group)
+			return index > -1
+		},
+		update(value) {
+			this.newValue = value.id
+			this.$emit('update:model-value', this.newValue)
+		},
+		enqueueWantedGroup(expectedGroupId) {
+			const index = this.wantedGroups.findIndex((groupId) => groupId === expectedGroupId)
+			if (index === -1) {
+				this.wantedGroups.push(expectedGroupId)
+			}
+		},
+		async findGroupByQueue() {
+			let nextQuery
+			do {
+				nextQuery = this.wantedGroups.shift()
+				if (this.hasGroup(nextQuery)) {
+					nextQuery = undefined
+				}
+			} while (!nextQuery && this.wantedGroups.length > 0)
+			if (nextQuery) {
+				await this.searchAsync(nextQuery)
+			}
+		},
 	},
 }
 </script>