Implement custom check components and fix linting

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 47 insertions, 38 deletions

diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index 676a4c23178..c5ea6bd4eec 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -22,47 +22,51 @@
 
 <template>
 	<div>
-
-		<multiselect
+		<Multiselect
 			:value="currentValue"
-			placeholder="Select a file type"
+			:placeholder="t('workflowengine', 'Select a user agent')"
 			label="label"
 			track-by="pattern"
-			group-values="children",
-			group-label="text",
-			:options="options" :multiple="false" :tagging="false" @input="setValue">
+			group-values="children"
+			group-label="label"
+			:options="options" :multiple="false" :tagging="false"
+			@input="setValue">
 			<template slot="singleLabel" slot-scope="props">
-				<span class="option__icon" :class="props.option.icon"></span>
+				<span class="option__icon" :class="props.option.icon" />
 				<span class="option__title option__title_single">{{ props.option.label }}</span>
 			</template>
 			<template slot="option" slot-scope="props">
-				<span class="option__icon" :class="props.option.icon"></span>
-				<span class="option__title">{{ props.option.label }}</span>
+				<span class="option__icon" :class="props.option.icon" />
+				<span class="option__title">{{ props.option.label }} {{ props.option.$groupLabel }}</span>
 			</template>
-		</multiselect>
-		<input type="text" :value="currentValue.pattern" @input="updateCustom"/>
+		</Multiselect>
+		<input type="text" :value="currentValue.pattern" @input="updateCustom" v-if="!isPredefined">
 	</div>
 </template>
 
 <script>
 import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
+import valueMixin from '../../mixins/valueMixin';
 
 export default {
-	name: 'UserAgent',
+	name: 'RequestUserAgent',
 	components: {
 		Multiselect
 	},
+	mixins: [
+		valueMixin
+	],
 	data() {
 		return {
-			value: '',
+			newValue: '',
 			predefinedTypes: [
 				{
-					text: t('workflowengine', 'Sync clients'),
+					label: t('workflowengine', 'Sync clients'),
 					children: [
-						{ id: 'android', text: t('workflowengine', 'Android client') },
-						{ id: 'ios', text: t('workflowengine', 'iOS client') },
-						{ id: 'desktop', text: t('workflowengine', 'Desktop client') },
-						{ id: 'mail', text: t('workflowengine', 'Thunderbird & Outlook addons') }
+						{ 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' }
 					]
 				}
 			]
@@ -72,23 +76,34 @@ export default {
 		options() {
 			return [...this.predefinedTypes, this.customValue]
 		},
+		isPredefined() {
+			const matchingPredefined = this.predefinedTypes.map(groups => groups.children).flat().find((type) => this.newValue === type.pattern)
+			if (matchingPredefined) {
+				return true
+			}
+			return false
+		},
 		customValue() {
-			const matchingPredefined = this.predefinedTypes.find((type) => this.value.pattern === type.pattern)
 			return {
-				icon: 'icon-settings-dark',
-				label: t('workflowengine', 'Custom pattern'),
-				pattern: '',
+				label: t('workflowengine', 'Others'),
+				children: [
+					{
+						icon: 'icon-settings-dark',
+						label: t('workflowengine', 'Custom user agent'),
+						pattern: ''
+					}
+				]
 			}
 		},
 		currentValue() {
-			const matchingPredefined = this.predefinedTypes.find((type) => this.value === type.pattern)
+			const matchingPredefined = this.predefinedTypes.map(groups => groups.children).flat().find((type) => this.newValue === type.pattern)
 			if (matchingPredefined) {
 				return matchingPredefined
 			}
 			return {
 				icon: 'icon-settings-dark',
-				label: t('workflowengine', 'Custom pattern'),
-				pattern: this.value,
+				label: t('workflowengine', 'Custom user agent'),
+				pattern: this.newValue,
 			}
 		}
 	},
@@ -98,25 +113,19 @@ export default {
 			var result = regexRegex.exec(string)
 			return result !== null
 		},
-		setValue (value) {
+		setValue(value) {
 			// TODO: check if value requires a regex and set the check operator according to that
 			if (value !== null) {
-				this.value = value.pattern
+				this.newValue = value.pattern
+				this.$emit('input', this.newValue)
 			}
 		},
-		updateCustom (event) {
-			console.log(event)
-			this.value = event.target.value
+		updateCustom(event) {
+			this.newValue = event.target.value
+			this.$emit('input', this.newValue)
 		}
 	}
 }
 </script>
 
-<style scoped>
-	.multiselect::v-deep .multiselect__single {
-		display: flex;
-	}
-	input, .multiselect {
-		width: 100%;
-	}
-</style>
+<style scoped src="./../../css/multiselect.css"></style>