Implement custom check components and fix linting

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

6 files changed, 103 insertions, 155 deletions

diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue
index 02e68db1783..a3e3798304d 100644
--- a/apps/workflowengine/src/components/Checks/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue
@@ -1,35 +1,39 @@
 <template>
 	<div>
-		<multiselect
+		<Multiselect
 			:value="currentValue"
-			placeholder="Select a user agent"
+			:placeholder="t('workflowengine', 'Select a file type')"
 			label="label"
 			track-by="pattern"
-			:options="options" :multiple="false" :tagging="false" @input="setValue">
+			: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__icon" :class="props.option.icon" />
 				<span class="option__title">{{ props.option.label }}</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 { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
+import valueMixin from './../../mixins/valueMixin'
 
 export default {
 	name: 'FileMimeType',
 	components: {
 		Multiselect
 	},
+	mixins: [
+		valueMixin
+	],
 	data() {
 		return {
-			value: '',
 			predefinedTypes: [
 				{
 					icon: 'icon-picture',
@@ -53,23 +57,29 @@ export default {
 		options() {
 			return [...this.predefinedTypes, this.customValue]
 		},
+		isPredefined() {
+			const matchingPredefined = this.predefinedTypes.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', 'Custom mimetype'),
+				pattern: ''
 			}
 		},
 		currentValue() {
-			const matchingPredefined = this.predefinedTypes.find((type) => this.value === type.pattern)
+			const matchingPredefined = this.predefinedTypes.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 mimetype'),
+				pattern: this.newValue
 			}
 		}
 	},
@@ -79,25 +89,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>
diff --git a/apps/workflowengine/src/components/Checks/FileSystemTag.vue b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
deleted file mode 100644
index b8c24bf118a..00000000000
--- a/apps/workflowengine/src/components/Checks/FileSystemTag.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<!--
-  - @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/>.
-  -
-  -->
-
-<template>
-	<MultiselectTag v-model="newValue" :multiple="false" type="text" placeholder="1 MB"
-					@input="update"/>
-</template>
-
-<script>
-import { MultiselectTag } from 'nextcloud-vue'
-
-export default {
-	name: 'SizeValue',
-	components: {
-		MultiselectTag
-	},
-	props: {
-		value: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {
-			valid: false,
-			newValue: this.value
-		}
-	},
-	watch: {
-		value() {
-			this.newValue = this.value
-		}
-	},
-	methods: {
-		update() {
-			if (this.validate()) {
-				this.$emit('input', this.newValue)
-				this.valid = false
-			} else {
-				this.valid = false
-			}
-		}
-	}
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue
index 9ea211874fe..b150e67b004 100644
--- a/apps/workflowengine/src/components/Checks/RequestTime.vue
+++ b/apps/workflowengine/src/components/Checks/RequestTime.vue
@@ -1,14 +1,17 @@
 <template>
 	<div class="timeslot">
-		<multiselect v-model="newValue.timezone" :options="timezones"></multiselect>
-		<input type="text" class="timeslot--start" v-model="newValue.startTime" placeholder="08:00" @input="update"/>
-		<input type="text" v-model="newValue.endTime" placeholder="18:00" @input="update"/>
+		<Multiselect v-model="newValue.timezone" :options="timezones" />
+		<input v-model="newValue.startTime" type="text" class="timeslot--start"
+			placeholder="08:00" @input="update">
+		<input v-model="newValue.endTime" type="text" placeholder="18:00"
+			@input="update">
 	</div>
 </template>
 
 <script>
 import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
 import moment from 'moment-timezone'
+import valueMixin from '../../mixins/valueMixin';
 
 const zones = moment.tz.names()
 export default {
@@ -16,6 +19,9 @@ export default {
 	components: {
 		Multiselect
 	},
+	mixins: [
+		valueMixin
+	],
 	props: {
 		value: {
 			type: String,
@@ -29,7 +35,7 @@ export default {
 				startTime: null,
 				endTime: null,
 				timezone: moment.tz.guess()
-			},
+			}
 		}
 	},
 	computed: {
@@ -37,8 +43,8 @@ export default {
 			return zones
 		}
 	},
-	watch: {
-		'value': function(value) {
+	methods: {
+		updateInternalValue(value) {
 			var data = JSON.parse(value)
 			var startTime = data[0].split(' ', 2)[0]
 			var endTime = data[1].split(' ', 2)[0]
@@ -48,13 +54,11 @@ export default {
 				endTime: endTime,
 				timezone: timezone
 			}
-		}
-	},
-	methods: {
+		},
 		validate() {
-			return this.newValue.startTime && this.newValue.startTime.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/i) !== null &&
-				this.newValue.endTime && this.newValue.endTime.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/i) !== null &&
-				moment.tz.zone(this.newValue.timezone) !== null
+			return this.newValue.startTime && this.newValue.startTime.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/i) !== null
+				&& this.newValue.endTime && this.newValue.endTime.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/i) !== null
+				&& moment.tz.zone(this.newValue.timezone) !== null
 		},
 		update() {
 			if (this.validate()) {
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>
diff --git a/apps/workflowengine/src/components/Checks/file.js b/apps/workflowengine/src/components/Checks/file.js
index 146ac045cee..816aaa73a65 100644
--- a/apps/workflowengine/src/components/Checks/file.js
+++ b/apps/workflowengine/src/components/Checks/file.js
@@ -20,8 +20,8 @@
  *
  */
 
-import FileMimeType from './FileMimeType';
-import { stringValidator, validateIPv4, validateIPv6} from './../../helpers/validators'
+import FileMimeType from './FileMimeType'
+import { stringValidator, validateIPv4, validateIPv6 } from './../../helpers/validators'
 const FileChecks = [
 	{
 		class: 'OCA\\WorkflowEngine\\Check\\FileName',
@@ -77,7 +77,7 @@ const FileChecks = [
 		],
 		placeholder: (check) => {
 			if (check.operator === 'matchesIPv6' || check.operator === '!matchesIPv6') {
-				return '::1/128';
+				return '::1/128'
 			}
 			return '127.0.0.1/32'
 		},
diff --git a/apps/workflowengine/src/components/Checks/request.js b/apps/workflowengine/src/components/Checks/request.js
index 8b36b89a9e8..5550555cf02 100644
--- a/apps/workflowengine/src/components/Checks/request.js
+++ b/apps/workflowengine/src/components/Checks/request.js
@@ -20,8 +20,8 @@
  *
  */
 
-import RequestUserAgent from './RequestUserAgent';
-import RequestTime from './RequestTime';
+import RequestUserAgent from './RequestUserAgent'
+import RequestTime from './RequestTime'
 
 const RequestChecks = [
 	{
@@ -32,7 +32,7 @@ const RequestChecks = [
 			{ operator: '!is', name: t('workflowengine', 'is not') },
 			{ operator: 'matches', name: t('workflowengine', 'matches') },
 			{ operator: '!matches', name: t('workflowengine', 'does not match') }
-		],
+		]
 		// TODO: implement component
 	},
 	{
@@ -53,8 +53,7 @@ const RequestChecks = [
 			{ operator: 'matches', name: t('workflowengine', 'matches') },
 			{ operator: '!matches', name: t('workflowengine', 'does not match') }
 		],
-		// TODO: implement component
-		// component: RequestUserAgent
+		component: RequestUserAgent
 	},
 	{
 		class: 'OCA\\WorkflowEngine\\Check\\UserGroupMembership',
@@ -62,7 +61,7 @@ const RequestChecks = [
 		operators: [
 			{ operator: 'is', name: t('workflowengine', 'is member of') },
 			{ operator: '!is', name: t('workflowengine', 'is not member of') }
-		],
+		]
 		// TODO: implement component
 	}
 ]