diff options
Diffstat (limited to 'apps/workflowengine/src/components')
14 files changed, 324 insertions, 280 deletions
diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue index 7402eba0da6..136f6d21280 100644 --- a/apps/workflowengine/src/components/Check.vue +++ b/apps/workflowengine/src/components/Check.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div v-click-outside="hideDelete" class="check" @click="showDelete"> <NcSelect ref="checkSelector" @@ -15,8 +19,18 @@ :clearable="false" :placeholder="t('workflowengine', 'Select a comparator')" @input="updateCheck" /> + <component :is="currentElement" + v-if="currentElement" + ref="checkComponent" + :disabled="!currentOption" + :operator="check.operator" + :model-value="check.value" + class="option" + @update:model-value="updateCheck" + @valid="(valid=true) && validate()" + @invalid="!(valid=false) && validate()" /> <component :is="currentOption.component" - v-if="currentOperator && currentComponent" + v-else-if="currentOperator && currentComponent" v-model="check.value" :disabled="!currentOption" :check="check" @@ -43,12 +57,11 @@ </template> <script> -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcSelect from '@nextcloud/vue/components/NcSelect' import CloseIcon from 'vue-material-design-icons/Close.vue' - import ClickOutside from 'vue-click-outside' export default { @@ -95,6 +108,12 @@ export default { } return operators }, + currentElement() { + if (!this.check.class) { + return false + } + return this.checks[this.check.class].element + }, currentComponent() { if (!this.currentOption) { return [] } return this.checks[this.currentOption.class].component @@ -116,6 +135,15 @@ export default { this.currentOption = this.checks[this.check.class] this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator) + if (this.currentElement) { + // If we do not set it, the check`s value would remain empty. Unsure why Vue behaves this way. + this.$refs.checkComponent.modelValue = undefined + } else if (this.currentOption?.component) { + // 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: `CheckPlugin.options` is deprecated. Use `CheckPlugin.element` instead.') + } + if (this.check.class === null) { this.$nextTick(() => this.$refs.checkSelector.$el.focus()) } @@ -137,11 +165,15 @@ export default { this.check.invalid = !this.valid this.$emit('validate', this.valid) }, - updateCheck() { - const matchingOperator = this.operators.findIndex((operator) => this.check.operator === operator.operator) + updateCheck(event) { + const selectedOperator = event?.operator || this.currentOperator?.operator || this.check.operator + const matchingOperator = this.operators.findIndex((operator) => selectedOperator === operator.operator) if (this.check.class !== this.currentOption.class || matchingOperator === -1) { this.currentOperator = this.operators[0] } + if (event?.detail) { + this.check.value = event.detail[0] + } // eslint-disable-next-line vue/no-mutating-props this.check.class = this.currentOption.class // eslint-disable-next-line vue/no-mutating-props @@ -161,7 +193,7 @@ export default { flex-wrap: wrap; align-items: flex-start; // to not stretch components vertically width: 100%; - padding-right: 20px; + padding-inline-end: 20px; & > *:not(.close) { width: 180px; @@ -182,13 +214,15 @@ export default { & > .v-select, & > .button-vue, & > input[type=text] { - margin-right: 5px; + margin-inline-end: 5px; margin-bottom: 5px; } } + input[type=text] { margin: 0; } + .invalid { border-color: var(--color-error) !important; } diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue index 941347f0aa2..6817b128e27 100644 --- a/apps/workflowengine/src/components/Checks/FileMimeType.vue +++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue @@ -1,27 +1,10 @@ <!-- - - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - - - - @author Julius Härtl <jus@bitgrid.net> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div> - <NcSelect :value="currentValue" + <NcSelect :model-value="currentValue" :placeholder="t('workflowengine', 'Select a file type')" label="label" :options="options" @@ -47,17 +30,16 @@ </template> </NcSelect> <input v-if="!isPredefined" - type="text" :value="currentValue.id" + type="text" :placeholder="t('workflowengine', 'e.g. httpd/unix-directory')" @input="updateCustom"> </div> </template> <script> -import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' -import valueMixin from './../../mixins/valueMixin.js' +import NcEllipsisedOption from '@nextcloud/vue/components/NcEllipsisedOption' +import NcSelect from '@nextcloud/vue/components/NcSelect' import { imagePath } from '@nextcloud/router' export default { @@ -66,9 +48,15 @@ export default { NcEllipsisedOption, NcSelect, }, - mixins: [ - valueMixin, - ], + props: { + modelValue: { + type: String, + default: '', + }, + }, + + emits: ['update:model-value'], + data() { return { predefinedTypes: [ @@ -93,6 +81,7 @@ export default { id: 'application/pdf', }, ], + newValue: '', } }, computed: { @@ -125,21 +114,30 @@ export default { } }, }, + watch: { + modelValue() { + this.updateInternalValue() + }, + }, + methods: { validateRegex(string) { const regexRegex = /^\/(.*)\/([gui]{0,3})$/ const result = regexRegex.exec(string) return result !== null }, + updateInternalValue() { + this.newValue = this.modelValue + }, setValue(value) { if (value !== null) { this.newValue = value.id - this.$emit('input', this.newValue) + this.$emit('update:model-value', this.newValue) } }, updateCustom(event) { - this.newValue = event.target.value - this.$emit('input', this.newValue) + this.newValue = event.target.value || event.detail[0] + this.$emit('update:model-value', this.newValue) }, }, } diff --git a/apps/workflowengine/src/components/Checks/FileSystemTag.vue b/apps/workflowengine/src/components/Checks/FileSystemTag.vue index 2d59c8f36d4..e71b0cd259a 100644 --- a/apps/workflowengine/src/components/Checks/FileSystemTag.vue +++ b/apps/workflowengine/src/components/Checks/FileSystemTag.vue @@ -1,25 +1,7 @@ <!-- - - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - - - - @author Julius Härtl <jus@bitgrid.net> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <NcSelectTags v-model="newValue" :multiple="false" @@ -27,7 +9,7 @@ </template> <script> -import NcSelectTags from '@nextcloud/vue/dist/Components/NcSelectTags.js' +import NcSelectTags from '@nextcloud/vue/components/NcSelectTags' export default { name: 'FileSystemTag', @@ -35,18 +17,21 @@ export default { NcSelectTags, }, props: { - value: { + modelValue: { type: String, default: '', }, }, + + emits: ['update:model-value'], + data() { return { newValue: [], } }, watch: { - value() { + modelValue() { this.updateValue() }, }, @@ -55,19 +40,15 @@ 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 || '') }, }, } </script> - -<style scoped> - -</style> diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue index 36177e6ad65..5b1a4ef1cfa 100644 --- a/apps/workflowengine/src/components/Checks/RequestTime.vue +++ b/apps/workflowengine/src/components/Checks/RequestTime.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="timeslot"> <input v-model="newValue.startTime" @@ -21,9 +25,8 @@ </template> <script> -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' import moment from 'moment-timezone' -import valueMixin from '../../mixins/valueMixin.js' const zones = moment.tz.names() export default { @@ -31,15 +34,13 @@ export default { components: { NcSelect, }, - mixins: [ - valueMixin, - ], props: { - value: { + modelValue: { type: String, - default: '', + default: '[]', }, }, + emits: ['update:model-value'], data() { return { timezones: zones, @@ -49,21 +50,31 @@ export default { endTime: null, timezone: moment.tz.guess(), }, + stringifiedValue: '[]', } }, - mounted() { - this.validate() + watch: { + modelValue() { + this.updateInternalValue() + }, + }, + beforeMount() { + // this is necessary to keep so the value is re-applied when a different + // check is being removed. + this.updateInternalValue() }, methods: { - updateInternalValue(value) { + updateInternalValue() { try { - const data = JSON.parse(value) + const data = JSON.parse(this.modelValue) if (data.length === 2) { this.newValue = { startTime: data[0].split(' ', 2)[0], endTime: data[1].split(' ', 2)[0], timezone: data[0].split(' ', 2)[1], } + this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]` + this.validate() } } catch (e) { // ignore invalid values @@ -85,8 +96,8 @@ export default { this.newValue.timezone = moment.tz.guess() } if (this.validate()) { - const output = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]` - this.$emit('input', output) + this.stringifiedValue = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]` + this.$emit('update:model-value', this.stringifiedValue) } }, }, @@ -105,7 +116,7 @@ export default { margin-bottom: 5px; } - .multiselect::v-deep .multiselect__tags:not(:hover):not(:focus):not(:active) { + .multiselect:deep(.multiselect__tags:not(:hover):not(:focus):not(:active)) { border: 1px solid transparent; } @@ -116,7 +127,7 @@ export default { min-height: 48px; &.timeslot--start { - margin-right: 5px; + margin-inline-end: 5px; width: calc(50% - 5px); } } diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue index ce5e009cde9..21b3a9cacbe 100644 --- a/apps/workflowengine/src/components/Checks/RequestURL.vue +++ b/apps/workflowengine/src/components/Checks/RequestURL.vue @@ -1,28 +1,11 @@ <!-- - - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - - - - @author Julius Härtl <jus@bitgrid.net> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div> - <NcSelect :value="currentValue" + <NcSelect v-model="newValue" + :value="currentValue" :placeholder="t('workflowengine', 'Select a request URL')" label="label" :clearable="false" @@ -50,8 +33,8 @@ </template> <script> -import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcEllipsisedOption from '@nextcloud/vue/components/NcEllipsisedOption' +import NcSelect from '@nextcloud/vue/components/NcSelect' import valueMixin from '../../mixins/valueMixin.js' export default { @@ -63,6 +46,19 @@ export default { mixins: [ valueMixin, ], + props: { + modelValue: { + type: String, + default: '', + }, + operator: { + type: String, + default: '', + }, + }, + + emits: ['update:model-value'], + data() { return { newValue: '', @@ -80,7 +76,7 @@ export default { return [...this.predefinedTypes, this.customValue] }, placeholder() { - if (this.check.operator === 'matches' || this.check.operator === '!matches') { + if (this.operator === 'matches' || this.operator === '!matches') { return '/^https\\:\\/\\/localhost\\/index\\.php$/i' } return 'https://localhost/index.php' @@ -120,12 +116,12 @@ export default { // TODO: check if value requires a regex and set the check operator according to that if (value !== null) { this.newValue = value.id - this.$emit('input', this.newValue) + this.$emit('update:model-value', this.newValue) } }, updateCustom(event) { this.newValue = event.target.value - this.$emit('input', this.newValue) + this.$emit('update:model-value', this.newValue) }, }, } @@ -135,6 +131,7 @@ export default { input[type='text'] { width: 100%; } + input[type='text'] { min-height: 48px; } diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue index eccf76ae58c..825a112f6fc 100644 --- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue +++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue @@ -1,28 +1,10 @@ <!-- - - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - - - - @author Julius Härtl <jus@bitgrid.net> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div> - <NcSelect :value="currentValue" + <NcSelect v-model="currentValue" :placeholder="t('workflowengine', 'Select a user agent')" label="label" :options="options" @@ -42,15 +24,15 @@ </template> </NcSelect> <input v-if="!isPredefined" + v-model="newValue" type="text" - :value="currentValue.pattern" @input="updateCustom"> </div> </template> <script> -import NcEllipsisedOption from '@nextcloud/vue/dist/Components/NcEllipsisedOption.js' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcEllipsisedOption from '@nextcloud/vue/components/NcEllipsisedOption' +import NcSelect from '@nextcloud/vue/components/NcSelect' import valueMixin from '../../mixins/valueMixin.js' export default { @@ -62,6 +44,13 @@ export default { mixins: [ valueMixin, ], + props: { + modelValue: { + type: String, + default: '', + }, + }, + emits: ['update:model-value'], data() { return { newValue: '', @@ -91,15 +80,20 @@ export default { id: '', } }, - currentValue() { - if (this.matchingPredefined) { - return this.matchingPredefined - } - return { - icon: 'icon-settings-dark', - label: t('workflowengine', 'Custom user agent'), - id: this.newValue, - } + currentValue: { + get() { + if (this.matchingPredefined) { + return this.matchingPredefined + } + return { + icon: 'icon-settings-dark', + label: t('workflowengine', 'Custom user agent'), + id: this.newValue, + } + }, + set(value) { + this.newValue = value + }, }, }, methods: { @@ -112,12 +106,12 @@ export default { // TODO: check if value requires a regex and set the check operator according to that if (value !== null) { this.newValue = value.id - this.$emit('input', this.newValue) + this.$emit('update:model-value', this.newValue) } }, - updateCustom(event) { - this.newValue = event.target.value - this.$emit('input', this.newValue) + updateCustom() { + this.newValue = this.currentValue.id + this.$emit('update:model-value', this.newValue) }, }, } @@ -127,6 +121,7 @@ export default { input[type='text'] { width: 100%; } + input[type='text'] { min-height: 48px; } diff --git a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue index ee774b7939f..f9606b7ca26 100644 --- a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue +++ b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue @@ -1,25 +1,7 @@ <!-- - - @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - - - - @author Julius Härtl <jus@bitgrid.net> - - - - @license GNU AGPL version 3 or any later version - - - - This program is free software: you can redistribute it and/or modify - - it under the terms of the GNU Affero General Public License as - - published by the Free Software Foundation, either version 3 of the - - License, or (at your option) any later version. - - - - This program is distributed in the hope that it will be useful, - - but WITHOUT ANY WARRANTY; without even the implied warranty of - - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - - GNU Affero General Public License for more details. - - - - You should have received a copy of the GNU Affero General Public License - - along with this program. If not, see <http://www.gnu.org/licenses/>. - - - --> - + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div> <NcSelect :aria-label-combobox="t('workflowengine', 'Select groups')" @@ -28,10 +10,10 @@ :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> @@ -40,9 +22,10 @@ import { translate as t } from '@nextcloud/l10n' import { generateOcsUrl } from '@nextcloud/router' import axios from '@nextcloud/axios' -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' const groups = [] +const wantedGroups = [] const status = { isLoading: false, } @@ -53,7 +36,7 @@ export default { NcSelect, }, props: { - value: { + modelValue: { type: String, default: '', }, @@ -62,15 +45,28 @@ export default { default: () => { return {} }, }, }, + emits: ['update:model-value'], data() { return { groups, status, + wantedGroups, + newValue: '', } }, computed: { - currentValue() { - return this.groups.find(group => group.id === this.value) || null + currentValue: { + get() { + return this.groups.find(group => group.id === this.newValue) || null + }, + set(value) { + this.newValue = value + }, + }, + }, + watch: { + modelValue() { + this.updateInternalValue() }, }, async mounted() { @@ -79,8 +75,8 @@ 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) } }, methods: { @@ -88,6 +84,13 @@ export default { searchAsync(searchQuery) { if (this.status.isLoading) { + if (searchQuery) { + // The first 20 groups are loaded up front (indicated by an + // empty searchQuery parameter), afterwards we may load + // groups that have not been fetched yet, but are used + // in existing rules. + this.enqueueWantedGroup(searchQuery) + } return } @@ -100,16 +103,49 @@ export default { }) }) this.status.isLoading = false + this.findGroupByQueue() }, (error) => { console.error('Error while loading group list', error.response) }) }, + async updateInternalValue() { + if (!this.newValue) { + await this.searchAsync(this.modelValue) + } + this.newValue = this.modelValue + }, addGroup(group) { const index = this.groups.findIndex((item) => item.id === group.id) if (index === -1) { this.groups.push(group) } }, + hasGroup(group) { + const index = this.groups.findIndex((item) => item.id === group) + return index > -1 + }, + update(value) { + this.newValue = value.id + this.$emit('update:model-value', this.newValue) + }, + enqueueWantedGroup(expectedGroupId) { + const index = this.wantedGroups.findIndex((groupId) => groupId === expectedGroupId) + if (index === -1) { + this.wantedGroups.push(expectedGroupId) + } + }, + async findGroupByQueue() { + let nextQuery + do { + nextQuery = this.wantedGroups.shift() + if (this.hasGroup(nextQuery)) { + nextQuery = undefined + } + } while (!nextQuery && this.wantedGroups.length > 0) + if (nextQuery) { + await this.searchAsync(nextQuery) + } + }, }, } </script> diff --git a/apps/workflowengine/src/components/Checks/file.js b/apps/workflowengine/src/components/Checks/file.js index 627eb393706..568efc81cd3 100644 --- a/apps/workflowengine/src/components/Checks/file.js +++ b/apps/workflowengine/src/components/Checks/file.js @@ -1,27 +1,10 @@ /** - * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - * - * @author Arthur Schiwon <blizzz@arthur-schiwon.de> - * @author Julius Härtl <jus@bitgrid.net> - * - * @license AGPL-3.0-or-later - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ import { stringValidator, validateIPv4, validateIPv6 } from '../../helpers/validators.js' +import { registerCustomElement } from '../../helpers/window.js' import FileMimeType from './FileMimeType.vue' import FileSystemTag from './FileSystemTag.vue' @@ -52,7 +35,7 @@ const FileChecks = [ class: 'OCA\\WorkflowEngine\\Check\\FileMimeType', name: t('workflowengine', 'File MIME type'), operators: stringOrRegexOperators, - component: FileMimeType, + element: registerCustomElement(FileMimeType, 'oca-workflowengine-checks-file_mime_type'), }, { @@ -98,7 +81,7 @@ const FileChecks = [ { operator: 'is', name: t('workflowengine', 'is tagged with') }, { operator: '!is', name: t('workflowengine', 'is not tagged with') }, ], - component: FileSystemTag, + element: registerCustomElement(FileSystemTag, 'oca-workflowengine-file_system_tag'), }, ] diff --git a/apps/workflowengine/src/components/Checks/index.js b/apps/workflowengine/src/components/Checks/index.js index e342b3571c7..fc52f95f78a 100644 --- a/apps/workflowengine/src/components/Checks/index.js +++ b/apps/workflowengine/src/components/Checks/index.js @@ -1,23 +1,6 @@ /** - * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - * - * @author Julius Härtl <jus@bitgrid.net> - * - * @license AGPL-3.0-or-later - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ import FileChecks from './file.js' diff --git a/apps/workflowengine/src/components/Checks/request.js b/apps/workflowengine/src/components/Checks/request.js index e04ed1b9c93..b91f00baef0 100644 --- a/apps/workflowengine/src/components/Checks/request.js +++ b/apps/workflowengine/src/components/Checks/request.js @@ -1,25 +1,9 @@ /** - * @copyright Copyright (c) 2019 Julius Härtl <jus@bitgrid.net> - * - * @author Julius Härtl <jus@bitgrid.net> - * - * @license AGPL-3.0-or-later - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see <http://www.gnu.org/licenses/>. - * + * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + * SPDX-License-Identifier: AGPL-3.0-or-later */ +import { registerCustomElement } from '../../helpers/window.js' import RequestUserAgent from './RequestUserAgent.vue' import RequestTime from './RequestTime.vue' import RequestURL from './RequestURL.vue' @@ -35,7 +19,7 @@ const RequestChecks = [ { operator: 'matches', name: t('workflowengine', 'matches') }, { operator: '!matches', name: t('workflowengine', 'does not match') }, ], - component: RequestURL, + element: registerCustomElement(RequestURL, 'oca-workflowengine-checks-request_url'), }, { class: 'OCA\\WorkflowEngine\\Check\\RequestTime', @@ -44,7 +28,7 @@ const RequestChecks = [ { operator: 'in', name: t('workflowengine', 'between') }, { operator: '!in', name: t('workflowengine', 'not between') }, ], - component: RequestTime, + element: registerCustomElement(RequestTime, 'oca-workflowengine-checks-request_time'), }, { class: 'OCA\\WorkflowEngine\\Check\\RequestUserAgent', @@ -55,7 +39,7 @@ const RequestChecks = [ { operator: 'matches', name: t('workflowengine', 'matches') }, { operator: '!matches', name: t('workflowengine', 'does not match') }, ], - component: RequestUserAgent, + element: registerCustomElement(RequestUserAgent, 'oca-workflowengine-checks-request_user_agent'), }, { class: 'OCA\\WorkflowEngine\\Check\\UserGroupMembership', @@ -64,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'), }, ] diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue index c9b93f3f097..f170101b4e9 100644 --- a/apps/workflowengine/src/components/Event.vue +++ b/apps/workflowengine/src/components/Event.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="event"> <div v-if="operation.isComplex && operation.fixedEntity !== ''" class="isComplex"> @@ -26,7 +30,7 @@ </template> <script> -import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js' +import NcSelect from '@nextcloud/vue/components/NcSelect' import { showWarning } from '@nextcloud/dialogs' export default { @@ -90,6 +94,7 @@ export default { max-width: 550px; } } + .isComplex { img { vertical-align: text-top; @@ -101,7 +106,7 @@ export default { } .option__title { - margin-left: 5px; + margin-inline-start: 5px; color: var(--color-main-text); } diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue index 7f338b20172..df0b78dad89 100644 --- a/apps/workflowengine/src/components/Operation.vue +++ b/apps/workflowengine/src/components/Operation.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div class="actions__item" :class="{'colored': colored}" :style="{ backgroundColor: colored ? operation.color : 'transparent' }"> <div class="icon" :class="operation.iconClass" :style="{ backgroundImage: operation.iconClass ? '' : `url(${operation.icon})` }" /> @@ -15,7 +19,7 @@ </template> <script> -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' +import NcButton from '@nextcloud/vue/components/NcButton' export default { name: 'Operation', @@ -36,5 +40,5 @@ export default { </script> <style scoped lang="scss"> - @import "./../styles/operation"; +@use "./../styles/operation" as *; </style> diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue index e641d8cffb8..1c321fd014c 100644 --- a/apps/workflowengine/src/components/Rule.vue +++ b/apps/workflowengine/src/components/Rule.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div v-if="operation" class="section rule" :style="{ borderLeftColor: operation.color || '' }"> <div class="trigger"> @@ -25,8 +29,12 @@ <div class="flow-icon icon-confirm" /> <div class="action"> <Operation :operation="operation" :colored="false"> + <component :is="operation.element" + v-if="operation.element" + :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> @@ -53,13 +61,13 @@ </template> <script> -import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js' -import NcActions from '@nextcloud/vue/dist/Components/NcActions.js' -import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import ArrowRight from 'vue-material-design-icons/ArrowRight.vue' -import CheckMark from 'vue-material-design-icons/Check.vue' -import Close from 'vue-material-design-icons/Close.vue' +import NcActions from '@nextcloud/vue/components/NcActions' +import NcActionButton from '@nextcloud/vue/components/NcActionButton' +import NcButton from '@nextcloud/vue/components/NcButton' +import Tooltip from '@nextcloud/vue/directives/Tooltip' +import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue' +import IconCheckMark from 'vue-material-design-icons/Check.vue' +import IconClose from 'vue-material-design-icons/Close.vue' import Event from './Event.vue' import Check from './Check.vue' @@ -68,10 +76,7 @@ import Operation from './Operation.vue' export default { name: 'Rule', components: { - ArrowRight, Check, - CheckMark, - Close, Event, NcActionButton, NcActions, @@ -94,9 +99,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) }, @@ -104,15 +114,15 @@ export default { if (this.error || !this.rule.valid || this.rule.checks.length === 0 || this.rule.checks.some((check) => check.invalid === true)) { return { title: t('workflowengine', 'The configuration is invalid'), - icon: 'Close', + icon: IconClose, type: 'warning', tooltip: { placement: 'bottom', show: true, content: this.error }, } } if (!this.dirty) { - return { title: t('workflowengine', 'Active'), icon: 'CheckMark', type: 'success' } + return { title: t('workflowengine', 'Active'), icon: IconCheckMark, type: 'success' } } - return { title: t('workflowengine', 'Save'), icon: 'ArrowRight', type: 'primary' } + return { title: t('workflowengine', 'Save'), icon: IconArrowRight, type: 'primary' } }, lastCheckComplete() { @@ -122,13 +132,25 @@ export default { }, mounted() { this.originalRule = JSON.parse(JSON.stringify(this.rule)) + if (this.operation?.element) { + this.inputValue = 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) { + validate(/* state */) { this.error = null this.$store.dispatch('updateRule', this.rule) }, @@ -163,6 +185,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 @@ -192,16 +215,16 @@ export default { justify-content: end; button { - margin-left: 5px; + margin-inline-start: 5px; } button:last-child{ - margin-right: 10px; + margin-inline-end: 10px; } } .error-message { float: right; - margin-right: 10px; + margin-inline-end: 10px; } .flow-icon { @@ -211,7 +234,7 @@ export default { .rule { display: flex; flex-wrap: wrap; - border-left: 5px solid var(--color-primary-element); + border-inline-start: 5px solid var(--color-primary-element); .trigger, .action { @@ -225,19 +248,20 @@ export default { } .icon-confirm { background-position: right 27px; - padding-right: 20px; - margin-right: 20px; + padding-inline-end: 20px; + margin-inline-end: 20px; } } + .trigger p, .action p { min-height: 34px; display: flex; & > span { min-width: 50px; - text-align: right; + text-align: end; color: var(--color-text-maxcontrast); - padding-right: 10px; + padding-inline-end: 10px; padding-top: 6px; } .multiselect { @@ -245,9 +269,11 @@ export default { max-width: 300px; } } + .trigger p:first-child span { padding-top: 3px; } + .trigger p:last-child { padding-top: 8px; } @@ -255,13 +281,13 @@ export default { .check--add { background-position: 7px center; background-color: transparent; - padding-left: 6px; + padding-inline-start: 6px; margin: 0; width: 180px; border-radius: var(--border-radius); color: var(--color-text-maxcontrast); font-weight: normal; - text-align: left; + text-align: start; font-size: 1em; } diff --git a/apps/workflowengine/src/components/Workflow.vue b/apps/workflowengine/src/components/Workflow.vue index 342e7113251..03ec2a79324 100644 --- a/apps/workflowengine/src/components/Workflow.vue +++ b/apps/workflowengine/src/components/Workflow.vue @@ -1,3 +1,7 @@ +<!-- + - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors + - SPDX-License-Identifier: AGPL-3.0-or-later +--> <template> <div id="workflowengine"> <NcSettingsSection :name="t('workflowengine', 'Available flows')" @@ -61,10 +65,10 @@ <script> import Rule from './Rule.vue' import Operation from './Operation.vue' -import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' -import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js' -import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' -import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js' +import NcButton from '@nextcloud/vue/components/NcButton' +import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent' +import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper' +import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection' import { mapGetters, mapState } from 'vuex' import { generateUrl } from '@nextcloud/router' import { loadState } from '@nextcloud/initial-state' @@ -136,9 +140,12 @@ export default { </script> <style scoped lang="scss"> + @use "./../styles/operation"; + #workflowengine { border-bottom: 1px solid var(--color-border); } + .section { max-width: 100vw; @@ -147,6 +154,7 @@ export default { margin-bottom: 0; } } + .actions { display: flex; flex-wrap: wrap; @@ -156,6 +164,7 @@ export default { flex-basis: 250px; } } + .actions__more { margin-bottom: 10px; } @@ -194,8 +203,6 @@ export default { padding-bottom: 0; } - @import "./../styles/operation"; - .actions__item.more { background-color: var(--color-background-dark); } |