Skip to content

Commit 6530386

Browse files
blizzzblizzz
authored
Merge pull request #51915 from nextcloud/backport/50783/stable31
[stable31] fix(workflowengine): require a web component as operation plugin
2 parents 11934e5 + 647b265 commit 6530386

18 files changed

Lines changed: 258 additions & 89 deletions

‎apps/workflowengine/src/components/Check.vue‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,18 @@
1919
:clearable="false"
2020
:placeholder="t('workflowengine', 'Select a comparator')"
2121
@input="updateCheck" />
22+
<component :is="currentElement"
23+
v-if="currentElement"
24+
ref="checkComponent"
25+
:disabled="!currentOption"
26+
:operator="check.operator"
27+
:model-value="check.value"
28+
class="option"
29+
@update:model-value="updateCheck"
30+
@valid="(valid=true) && validate()"
31+
@invalid="!(valid=false) && validate()" />
2232
<component :is="currentOption.component"
23-
v-if="currentOperator && currentComponent"
33+
v-else-if="currentOperator && currentComponent"
2434
v-model="check.value"
2535
:disabled="!currentOption"
2636
:check="check"
@@ -52,7 +62,6 @@ import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
5262
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
5363
5464
import CloseIcon from 'vue-material-design-icons/Close.vue'
55-
5665
import ClickOutside from 'vue-click-outside'
5766
5867
export default {
@@ -99,6 +108,12 @@ export default {
99108
}
100109
return operators
101110
},
111+
currentElement() {
112+
if (!this.check.class) {
113+
return false
114+
}
115+
return this.checks[this.check.class].element
116+
},
102117
currentComponent() {
103118
if (!this.currentOption) { return [] }
104119
return this.checks[this.currentOption.class].component
@@ -120,6 +135,15 @@ export default {
120135
this.currentOption = this.checks[this.check.class]
121136
this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
122137
138+
if (this.currentElement) {
139+
// If we do not set it, the check`s value would remain empty. Unsure why Vue behaves this way.
140+
this.$refs.checkComponent.modelValue = undefined
141+
} else if (this.currentOption?.component) {
142+
// keeping this in an else for apps that try to be backwards compatible and may ship both
143+
// to be removed in 03/2028
144+
console.warn('Developer warning: `CheckPlugin.options` is deprecated. Use `CheckPlugin.element` instead.')
145+
}
146+
123147
if (this.check.class === null) {
124148
this.$nextTick(() => this.$refs.checkSelector.$el.focus())
125149
}
@@ -141,11 +165,15 @@ export default {
141165
this.check.invalid = !this.valid
142166
this.$emit('validate', this.valid)
143167
},
144-
updateCheck() {
145-
const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator)
168+
updateCheck(event) {
169+
const selectedOperator = event?.operator || this.currentOperator?.operator || this.check.operator
170+
const matchingOperator = this.operators.findIndex((operator) => selectedOperator === operator.operator)
146171
if (this.check.class !== this.currentOption.class || matchingOperator === -1) {
147172
this.currentOperator = this.operators[0]
148173
}
174+
if (event?.detail) {
175+
this.check.value = event.detail[0]
176+
}
149177
// eslint-disable-next-line vue/no-mutating-props
150178
this.check.class = this.currentOption.class
151179
// eslint-disable-next-line vue/no-mutating-props

‎apps/workflowengine/src/components/Checks/FileMimeType.vue‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
-->
55
<template>
66
<div>
7-
<NcSelect :value="currentValue"
7+
<NcSelect :model-value="currentValue"
88
:placeholder="t('workflowengine', 'Select a file type')"
99
label="label"
1010
:options="options"
@@ -30,8 +30,8 @@
3030
</template>
3131
</NcSelect>
3232
<input v-if="!isPredefined"
33-
type="text"
3433
:value="currentValue.id"
34+
type="text"
3535
:placeholder="t('workflowengine', 'e.g. httpd/unix-directory')"
3636
@input="updateCustom">
3737
</div>
@@ -40,7 +40,6 @@
4040
<script>
4141
import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js'
4242
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
43-
import valueMixin from './../../mixins/valueMixin.js'
4443
import { imagePath } from '@nextcloud/router'
4544
4645
export default {
@@ -49,9 +48,15 @@ export default {
4948
NcEllipsisedOption,
5049
NcSelect,
5150
},
52-
mixins: [
53-
valueMixin,
54-
],
51+
props: {
52+
modelValue: {
53+
type: String,
54+
default: '',
55+
},
56+
},
57+
58+
emits: ['update:model-value'],
59+
5560
data() {
5661
return {
5762
predefinedTypes: [
@@ -76,6 +81,7 @@ export default {
7681
id: 'application/pdf',
7782
},
7883
],
84+
newValue: '',
7985
}
8086
},
8187
computed: {
@@ -108,21 +114,30 @@ export default {
108114
}
109115
},
110116
},
117+
watch: {
118+
modelValue() {
119+
this.updateInternalValue()
120+
},
121+
},
122+
111123
methods: {
112124
validateRegex(string) {
113125
const regexRegex = /^\/(.*)\/([gui]{0,3})$/
114126
const result = regexRegex.exec(string)
115127
return result !== null
116128
},
129+
updateInternalValue() {
130+
this.newValue = this.modelValue
131+
},
117132
setValue(value) {
118133
if (value !== null) {
119134
this.newValue = value.id
120-
this.$emit('input', this.newValue)
135+
this.$emit('update:model-value', this.newValue)
121136
}
122137
},
123138
updateCustom(event) {
124-
this.newValue = event.target.value
125-
this.$emit('input', this.newValue)
139+
this.newValue = event.target.value || event.detail[0]
140+
this.$emit('update:model-value', this.newValue)
126141
},
127142
},
128143
}

‎apps/workflowengine/src/components/Checks/FileSystemTag.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,21 @@ export default {
1717
NcSelectTags,
1818
},
1919
props: {
20-
value: {
20+
modelValue: {
2121
type: String,
2222
default: '',
2323
},
2424
},
25+
26+
emits: ['update:model-value'],
27+
2528
data() {
2629
return {
2730
newValue: [],
2831
}
2932
},
3033
watch: {
31-
value() {
34+
modelValue() {
3235
this.updateValue()
3336
},
3437
},
@@ -37,14 +40,14 @@ export default {
3740
},
3841
methods: {
3942
updateValue() {
40-
if (this.value !== '') {
41-
this.newValue = parseInt(this.value)
43+
if (this.modelValue !== '') {
44+
this.newValue = parseInt(this.modelValue)
4245
} else {
4346
this.newValue = null
4447
}
4548
},
4649
update() {
47-
this.$emit('input', this.newValue || '')
50+
this.$emit('update:model-value', this.newValue || '')
4851
},
4952
},
5053
}

‎apps/workflowengine/src/components/Checks/RequestTime.vue‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,20 @@
2727
<script>
2828
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
2929
import moment from 'moment-timezone'
30-
import valueMixin from '../../mixins/valueMixin.js'
3130
3231
const zones = moment.tz.names()
3332
export default {
3433
name: 'RequestTime',
3534
components: {
3635
NcSelect,
3736
},
38-
mixins: [
39-
valueMixin,
40-
],
4137
props: {
42-
value: {
38+
modelValue: {
4339
type: String,
44-
default: '',
40+
default: '[]',
4541
},
4642
},
43+
emits: ['update:model-value'],
4744
data() {
4845
return {
4946
timezones: zones,
@@ -53,21 +50,31 @@ export default {
5350
endTime: null,
5451
timezone: moment.tz.guess(),
5552
},
53+
stringifiedValue: '[]',
5654
}
5755
},
58-
mounted() {
59-
this.validate()
56+
watch: {
57+
modelValue() {
58+
this.updateInternalValue()
59+
},
60+
},
61+
beforeMount() {
62+
// this is necessary to keep so the value is re-applied when a different
63+
// check is being removed.
64+
this.updateInternalValue()
6065
},
6166
methods: {
62-
updateInternalValue(value) {
67+
updateInternalValue() {
6368
try {
64-
const data = JSON.parse(value)
69+
const data = JSON.parse(this.modelValue)
6570
if (data.length === 2) {
6671
this.newValue = {
6772
startTime: data[0].split(' ', 2)[0],
6873
endTime: data[1].split(' ', 2)[0],
6974
timezone: data[0].split(' ', 2)[1],
7075
}
76+
this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
77+
this.validate()
7178
}
7279
} catch (e) {
7380
// ignore invalid values
@@ -89,8 +96,8 @@ export default {
8996
this.newValue.timezone = moment.tz.guess()
9097
}
9198
if (this.validate()) {
92-
const output = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
93-
this.$emit('input', output)
99+
this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
100+
this.$emit('update:model-value', this.stringifiedValue)
94101
}
95102
},
96103
},

‎apps/workflowengine/src/components/Checks/RequestURL.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
-->
55
<template>
66
<div>
7-
<NcSelect :value="currentValue"
7+
<NcSelect v-model="newValue"
8+
:value="currentValue"
89
:placeholder="t('workflowengine', 'Select a request URL')"
910
label="label"
1011
:clearable="false"
@@ -45,6 +46,19 @@ export default {
4546
mixins: [
4647
valueMixin,
4748
],
49+
props: {
50+
modelValue: {
51+
type: String,
52+
default: '',
53+
},
54+
operator: {
55+
type: String,
56+
default: '',
57+
},
58+
},
59+
60+
emits: ['update:model-value'],
61+
4862
data() {
4963
return {
5064
newValue: '',
@@ -62,7 +76,7 @@ export default {
6276
return [...this.predefinedTypes, this.customValue]
6377
},
6478
placeholder() {
65-
if (this.check.operator === 'matches' || this.check.operator === '!matches') {
79+
if (this.operator === 'matches' || this.operator === '!matches') {
6680
return '/^https\\:\\/\\/localhost\\/index\\.php$/i'
6781
}
6882
return 'https://localhost/index.php'
@@ -102,12 +116,12 @@ export default {
102116
// TODO: check if value requires a regex and set the check operator according to that
103117
if (value !== null) {
104118
this.newValue = value.id
105-
this.$emit('input', this.newValue)
119+
this.$emit('update:model-value', this.newValue)
106120
}
107121
},
108122
updateCustom(event) {
109123
this.newValue = event.target.value
110-
this.$emit('input', this.newValue)
124+
this.$emit('update:model-value', this.newValue)
111125
},
112126
},
113127
}

0 commit comments

Comments
 (0)