diff options
Diffstat (limited to 'apps/workflowengine/src')
| -rw-r--r-- | apps/workflowengine/src/components/Rule.vue | 28 | ||||
| -rw-r--r-- | apps/workflowengine/src/store.js | 4 | ||||
| -rw-r--r-- | apps/workflowengine/src/workflowengine.js | 12 |
3 files changed, 40 insertions, 4 deletions
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue index f6f0487f0cc..c9632d6c196 100644 --- a/apps/workflowengine/src/components/Rule.vue +++ b/apps/workflowengine/src/components/Rule.vue @@ -29,8 +29,13 @@ <div class="flow-icon icon-confirm" /> <div class="action"> <Operation :operation="operation" :colored="false"> + <component :is="operation.element" + v-if="operation.element" + ref="operationComponent" + :model-value="inputValue" + @update:model-value="updateOperationByEvent" /> <component :is="operation.options" - v-if="operation.options" + v-else-if="operation.options" v-model="rule.operation" @input="updateOperation" /> </Operation> @@ -95,9 +100,14 @@ export default { error: null, dirty: this.rule.id < 0, originalRule: null, + element: null, + inputValue: '', } }, computed: { + /** + * @return {OperatorPlugin} + */ operation() { return this.$store.getters.getOperationForRule(this.rule) }, @@ -123,11 +133,24 @@ export default { }, mounted() { this.originalRule = JSON.parse(JSON.stringify(this.rule)) + + if (this.operation?.element) { + this.$refs.operationComponent.value = this.rule.operation + } else if (this.operation?.options) { + // keeping this in an else for apps that try to be backwards compatible and may ship both + // to be removed in 03/2028 + console.warn('Developer warning: `OperatorPlugin.options` is deprecated. Use `OperatorPlugin.element` instead.') + } }, methods: { async updateOperation(operation) { this.$set(this.rule, 'operation', operation) - await this.updateRule() + this.updateRule() + }, + async updateOperationByEvent(event) { + this.inputValue = event.detail[0] + this.$set(this.rule, 'operation', event.detail[0]) + this.updateRule() }, validate(/* state */) { this.error = null @@ -164,6 +187,7 @@ export default { if (this.rule.id < 0) { this.$store.dispatch('removeRule', this.rule) } else { + this.inputValue = this.originalRule.operation this.$store.dispatch('updateRule', this.originalRule) this.originalRule = JSON.parse(JSON.stringify(this.rule)) this.dirty = false diff --git a/apps/workflowengine/src/store.js b/apps/workflowengine/src/store.js index a07b0989357..84a76a644a8 100644 --- a/apps/workflowengine/src/store.js +++ b/apps/workflowengine/src/store.js @@ -127,6 +127,10 @@ const store = new Store({ return rule1.id - rule2.id || rule2.class - rule1.class }) }, + /** + * @param state + * @return {OperatorPlugin} + */ getOperationForRule(state) { return (rule) => state.operations[rule.class] }, diff --git a/apps/workflowengine/src/workflowengine.js b/apps/workflowengine/src/workflowengine.js index df7412f9f4a..00612ee0478 100644 --- a/apps/workflowengine/src/workflowengine.js +++ b/apps/workflowengine/src/workflowengine.js @@ -30,10 +30,18 @@ import ShippedChecks from './components/Checks/index.js' * @property {string} id - The PHP class name of the check * @property {string} operation - Default value for the operation field * @property {string} color - Custom color code to be applied for the operator selector - * @property {Vue} component - A vue component to handle the rendering of options + * @property {object} [options] - Deprecated: **Use `element` instead** + * + * A vue component to handle the rendering of options. * The component should handle the v-model directive properly, * so it needs a value property to receive data and emit an input - * event once the data has changed + * event once the data has changed. + * + * Will be removed in 03/2028. + * @property {string} [element] - A web component id as used in window.customElements.define()`. + * It is expected that the ID is prefixed with the app namespace, e.g. oca-myapp-flow_do_this_operation + * It has to emit the `update:model-value` event when a value was changed. + * The `model-value` property will be set initially with the rule operation value. */ /** |