fix(Flow): adapt to registration fixes at workflowengine

- fixes compatibility issues with newer nextcloud-vue

Signed-off-by: Arthur Schiwon <[email protected]>

Author: blizzz

package-lock.json

@@ -43,6 +43,7 @@
     "@nextcloud/sharing": "^0.2.4",
     "@nextcloud/upload": "^1.8.0",
     "@nextcloud/vue": "^8.23.1",
+    "@vue/web-component-wrapper": "^1.3.0",
     "@vueuse/components": "^11.3.0",
     "@vueuse/core": "^11.2.0",
     "base64-js": "^1.5.1",

package.json

@@ -3,11 +3,24 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import wrap from '@vue/web-component-wrapper'
+import Vue from 'vue'
+
 import FlowPostToConversation from './views/FlowPostToConversation.vue'
 
+const FlowPostToConversationComponent = wrap(Vue, FlowPostToConversation)
+const webComponentId = 'oca-spreed-flow_post_to_conversation'
+window.customElements.define(webComponentId, FlowPostToConversationComponent)
+
+// In Vue 2, wrap doesn't support disabling shadow :(
+// Disable with a hack
+Object.defineProperty(FlowPostToConversationComponent.prototype, 'attachShadow', { value() { return this } })
+Object.defineProperty(FlowPostToConversationComponent.prototype, 'shadowRoot', { get() { return this } })
+
 window.OCA.WorkflowEngine.registerOperator({
 	id: 'OCA\\Talk\\Flow\\Operation',
 	color: '#0082c9',
 	operation: '',
-	options: FlowPostToConversation,
+	component: webComponentId,
+	options: FlowPostToConversation // backward "compatibility"
 })

src/flow.js

@@ -9,13 +9,13 @@
 			:options="roomOptions"
 			:aria-label-combobox="t('spreed', 'Select a conversation')"
 			label="displayName"
-			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': currentMode.id, 't': newValue.token }))" />
+			@input="newValue => emitEvents(currentMode.id, newValue.token)" />
 
 		<NcSelect :model-value="currentMode"
 			:options="modeOptions"
 			:aria-label-combobox="t('spreed', 'Select a mode')"
 			label="text"
-			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': newValue.id, 't': currentRoom.token }))" />
+			@input="newValue => emitEvents(newValue.id, currentRoom.token)" />
 	</div>
 </template>
 
@@ -35,13 +35,18 @@ export default {
 	name: 'FlowPostToConversation',
 	components: { NcSelect },
 	props: {
+		modelValue: {
+			default: '',
+			type: String,
+		},
+		// keep "value" for backwards compatibility, up to NC 31
 		value: {
 			default: JSON.stringify({ m: '0', t: '' }),
 			type: String,
 		},
 	},
 
-	emits: ['input'],
+	emits: ['input', 'update:model-value'],
 
 	data() {
 		return {
@@ -64,21 +69,21 @@ export default {
 	},
 	computed: {
 		currentRoom() {
-			if (this.value === '') {
+			if (this.modelValue === '' && this.value === '') {
 				return ''
 			}
-			const selectedRoom = JSON.parse(this.value).t
+			const selectedRoom = JSON.parse(this.modelValue || this.value).t
 			const newValue = this.roomOptions.find(option => option.token === selectedRoom)
 			if (typeof newValue === 'undefined') {
 				return ''
 			}
 			return newValue
 		},
 		currentMode() {
-			if (this.value === '') {
+			if (this.modelValue === '' && this.value === '') {
 				return this.modeOptions[0]
 			}
-			const selectedMode = JSON.parse(this.value).m
+			const selectedMode = JSON.parse(this.modelValue || this.value).m
 			const newValue = this.modeOptions.find(option => option.id === selectedMode)
 			if (typeof newValue === 'undefined') {
 				return this.modeOptions[0]
@@ -100,6 +105,13 @@ export default {
 				})
 			})
 		},
+		emitEvents(mode, token) {
+			if (mode === null || token === null) {
+				return
+			}
+			this.$emit('input', JSON.stringify({ m: mode, t: token }))
+			this.$emit('update:model-value', JSON.stringify({ m: mode, t: token }))
+		}
 	},
 }