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

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

2 files changed, 26 insertions, 6 deletions

diff --git a/apps/workflowengine/src/components/Checks/FileSystemTag.vue b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
index ee880aec075..e71b0cd259a 100644
--- a/apps/workflowengine/src/components/Checks/FileSystemTag.vue
+++ b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
@@ -17,18 +17,21 @@ export default {
 		NcSelectTags,
 	},
 	props: {
-		value: {
+		modelValue: {
 			type: String,
 			default: '',
 		},
 	},
+
+	emits: ['update:model-value'],
+
 	data() {
 		return {
 			newValue: [],
 		}
 	},
 	watch: {
-		value() {
+		modelValue() {
 			this.updateValue()
 		},
 	},
@@ -37,14 +40,14 @@ export default {
 	},
 	methods: {
 		updateValue() {
-			if (this.value !== '') {
-				this.newValue = parseInt(this.value)
+			if (this.modelValue !== '') {
+				this.newValue = parseInt(this.modelValue)
 			} else {
 				this.newValue = null
 			}
 		},
 		update() {
-			this.$emit('input', this.newValue || '')
+			this.$emit('update:model-value', this.newValue || '')
 		},
 	},
 }
diff --git a/apps/workflowengine/src/components/Checks/file.js b/apps/workflowengine/src/components/Checks/file.js
index 246f46ff55b..5a5b5d22b41 100644
--- a/apps/workflowengine/src/components/Checks/file.js
+++ b/apps/workflowengine/src/components/Checks/file.js
@@ -80,8 +80,25 @@ const FileChecks = [
 			{ operator: 'is', name: t('workflowengine', 'is tagged with') },
 			{ operator: '!is', name: t('workflowengine', 'is not tagged with') },
 		],
-		component: FileSystemTag,
+		webComponent: registerWebComponent(FileSystemTag, 'oca-workflowengine-file_system_tag'),
 	},
 ]
 
+/**
+ *
+ * @param VueComponent
+ * @param webComponentId
+ */
+function registerWebComponent(VueComponent, webComponentId) {
+	const WrappedComponent = wrap(Vue, VueComponent)
+	window.customElements.define(webComponentId, WrappedComponent)
+
+	// In Vue 2, wrap doesn't support disabling shadow :(
+	// Disable with a hack
+	Object.defineProperty(WrappedComponent.prototype, 'attachShadow', { value() { return this } })
+	Object.defineProperty(WrappedComponent.prototype, 'shadowRoot', { get() { return this } })
+
+	return webComponentId
+}
+
 export default FileChecks