aboutsummaryrefslogtreecommitdiffstats
path: root/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
diff options
context:
space:
mode:
Diffstat (limited to 'apps/workflowengine/src/components/Checks/RequestUserAgent.vue')
-rw-r--r--apps/workflowengine/src/components/Checks/RequestUserAgent.vue143
1 files changed, 65 insertions, 78 deletions
diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index c4a5265ac99..825a112f6fc 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -1,76 +1,64 @@
<!--
- - @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>
- <NcMultiselect :value="currentValue"
+ <NcSelect v-model="currentValue"
:placeholder="t('workflowengine', 'Select a user agent')"
label="label"
- track-by="pattern"
:options="options"
- :multiple="false"
- :tagging="false"
+ :clearable="false"
@input="setValue">
- <template slot="singleLabel" slot-scope="props">
- <span class="option__icon" :class="props.option.icon" />
- <!-- v-html can be used here as t() always passes our translated strings though DOMPurify.sanitize -->
- <!-- eslint-disable-next-line vue/no-v-html -->
- <span class="option__title option__title_single" v-html="props.option.label" />
+ <template #option="option">
+ <span class="option__icon" :class="option.icon" />
+ <span class="option__title">
+ <NcEllipsisedOption :name="String(option.label)" />
+ </span>
</template>
- <template slot="option" slot-scope="props">
- <span class="option__icon" :class="props.option.icon" />
- <!-- eslint-disable-next-line vue/no-v-html -->
- <span v-if="props.option.$groupLabel" class="option__title" v-html="props.option.$groupLabel" />
- <!-- eslint-disable-next-line vue/no-v-html -->
- <span v-else class="option__title" v-html="props.option.label" />
+ <template #selected-option="selectedOption">
+ <span class="option__icon" :class="selectedOption.icon" />
+ <span class="option__title">
+ <NcEllipsisedOption :name="String(selectedOption.label)" />
+ </span>
</template>
- </NcMultiselect>
+ </NcSelect>
<input v-if="!isPredefined"
+ v-model="newValue"
type="text"
- :value="currentValue.pattern"
@input="updateCustom">
</div>
</template>
<script>
-import NcMultiselect from '@nextcloud/vue/dist/Components/NcMultiselect'
-import valueMixin from '../../mixins/valueMixin'
+import NcEllipsisedOption from '@nextcloud/vue/components/NcEllipsisedOption'
+import NcSelect from '@nextcloud/vue/components/NcSelect'
+import valueMixin from '../../mixins/valueMixin.js'
export default {
name: 'RequestUserAgent',
components: {
- NcMultiselect,
+ NcEllipsisedOption,
+ NcSelect,
},
mixins: [
valueMixin,
],
+ props: {
+ modelValue: {
+ type: String,
+ default: '',
+ },
+ },
+ emits: ['update:model-value'],
data() {
return {
newValue: '',
predefinedTypes: [
- { pattern: 'android', label: t('workflowengine', 'Android client'), icon: 'icon-phone' },
- { pattern: 'ios', label: t('workflowengine', 'iOS client'), icon: 'icon-phone' },
- { pattern: 'desktop', label: t('workflowengine', 'Desktop client'), icon: 'icon-desktop' },
- { pattern: 'mail', label: t('workflowengine', 'Thunderbird & Outlook addons'), icon: 'icon-mail' },
+ { id: 'android', label: t('workflowengine', 'Android client'), icon: 'icon-phone' },
+ { id: 'ios', label: t('workflowengine', 'iOS client'), icon: 'icon-phone' },
+ { id: 'desktop', label: t('workflowengine', 'Desktop client'), icon: 'icon-desktop' },
+ { id: 'mail', label: t('workflowengine', 'Thunderbird & Outlook addons'), icon: 'icon-mail' },
],
}
},
@@ -80,7 +68,7 @@ export default {
},
matchingPredefined() {
return this.predefinedTypes
- .find((type) => this.newValue === type.pattern)
+ .find((type) => this.newValue === type.id)
},
isPredefined() {
return !!this.matchingPredefined
@@ -89,18 +77,23 @@ export default {
return {
icon: 'icon-settings-dark',
label: t('workflowengine', 'Custom user agent'),
- pattern: '',
+ id: '',
}
},
- currentValue() {
- if (this.matchingPredefined) {
- return this.matchingPredefined
- }
- return {
- icon: 'icon-settings-dark',
- label: t('workflowengine', 'Custom user agent'),
- pattern: 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,43 +105,37 @@ export default {
setValue(value) {
// TODO: check if value requires a regex and set the check operator according to that
if (value !== null) {
- this.newValue = value.pattern
- this.$emit('input', this.newValue)
+ this.newValue = value.id
+ 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)
},
},
}
</script>
<style scoped>
- .multiselect, input[type='text'] {
+ .v-select,
+ input[type='text'] {
width: 100%;
}
- .multiselect .multiselect__content-wrapper li>span {
- display: flex;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .multiselect::v-deep .multiselect__single {
- width: 100%;
- display: flex;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ input[type='text'] {
+ min-height: 48px;
}
+
.option__icon {
display: inline-block;
min-width: 30px;
- background-position: left;
+ background-position: center;
+ vertical-align: middle;
}
+
.option__title {
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ display: inline-flex;
+ width: calc(100% - 36px);
+ vertical-align: middle;
}
</style>
generated by cgit v1.2.3 (git 2.39.1) at 2025-08-15 03:12:50 +0000