fix(workflowengine): adapt check operator RequestUserGroup to use web component

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

2 files changed, 28 insertions, 8 deletions

diff --git a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
index 4ea53295162..e53a8309b47 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
@@ -10,10 +10,11 @@
 			: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>
 
@@ -35,7 +36,7 @@ export default {
 		NcSelect,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
@@ -48,11 +49,17 @@ export default {
 		return {
 			groups,
 			status,
+			newValue: '',
 		}
 	},
 	computed: {
-		currentValue() {
-			return this.groups.find(group => group.id === this.value) || null
+		currentValue: {
+			get: function () {
+				return this.groups.find(group => group.id === this.newValue) || null
+			},
+			set: function (value) {
+				this.newValue = value
+			}
 		},
 	},
 	async mounted() {
@@ -61,10 +68,16 @@ 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)
 		}
 	},
+	emits: ['update:model-value'],
+	watch: {
+		modelValue() {
+			this.updateInternalValue()
+		},
+	},
 	methods: {
 		t,
 
@@ -86,12 +99,19 @@ export default {
 				console.error('Error while loading group list', error.response)
 			})
 		},
+		updateInternalValue() {
+			this.newValue = this.modelValue
+		},
 		addGroup(group) {
 			const index = this.groups.findIndex((item) => item.id === group.id)
 			if (index === -1) {
 				this.groups.push(group)
 			}
 		},
+		update(value) {
+			this.newValue = value.id
+			this.$emit('update:model-value', this.newValue)
+		}
 	},
 }
 </script>
diff --git a/apps/workflowengine/src/components/Checks/request.js b/apps/workflowengine/src/components/Checks/request.js
index fa5bbffca54..b91f00baef0 100644
--- a/apps/workflowengine/src/components/Checks/request.js
+++ b/apps/workflowengine/src/components/Checks/request.js
@@ -48,7 +48,7 @@ const RequestChecks = [
 			{ operator: 'is', name: t('workflowengine', 'is member of') },
 			{ operator: '!is', name: t('workflowengine', 'is not member of') },
 		],
-		component: RequestUserGroup,
+		element: registerCustomElement(RequestUserGroup, 'oca-workflowengine-checks-request_user_group'),
 	},
 ]