diff options
Diffstat (limited to 'apps/workflowengine/src/components/Checks/RequestTime.vue')
| -rw-r--r-- | apps/workflowengine/src/components/Checks/RequestTime.vue | 47 |
1 files changed, 30 insertions, 17 deletions
diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue index d8bfaff63a5..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" @@ -12,33 +16,31 @@ <p v-if="!valid" class="invalid-hint"> {{ t('workflowengine', 'Please enter a valid time span') }} </p> - <NcMultiselect v-show="valid" + <NcSelect v-show="valid" v-model="newValue.timezone" + :clearable="false" :options="timezones" @input="update" /> </div> </template> <script> -import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect' +import NcSelect from '@nextcloud/vue/components/NcSelect' import moment from 'moment-timezone' -import valueMixin from '../../mixins/valueMixin' const zones = moment.tz.names() export default { name: 'RequestTime', components: { - NcMultiselect, + NcSelect, }, - mixins: [ - valueMixin, - ], props: { - value: { + modelValue: { type: String, - default: '', + default: '[]', }, }, + emits: ['update:model-value'], data() { return { timezones: zones, @@ -48,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 @@ -84,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) } }, }, @@ -104,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; } @@ -112,9 +124,10 @@ export default { width: 50%; margin: 0; margin-bottom: 5px; + min-height: 48px; &.timeslot--start { - margin-right: 5px; + margin-inline-end: 5px; width: calc(50% - 5px); } } |