From 99e1063a5715dcfe3451e8d9d00c013f30d852b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 9 Sep 2019 16:52:11 +0200
Subject: [PATCH] Add user group selector
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 .../src/components/Checks/FileMimeType.vue    |  3 +-
 .../src/components/Checks/FileSystemTag.vue   | 86 +++++++++----------
 .../components/Checks/MultiselectTag/api.js   | 10 +--
 .../src/components/Checks/RequestTime.vue     |  4 +-
 .../src/components/Checks/RequestURL.vue      | 12 +--
 .../components/Checks/RequestUserAgent.vue    |  7 +-
 .../components/Checks/RequestUserGroup.vue    | 77 +++++++++++++++++
 .../src/components/Checks/file.js             |  2 +-
 .../src/components/Checks/request.js          |  5 +-
 apps/workflowengine/src/css/multiselect.css   | 11 +++
 apps/workflowengine/src/mixins/valueMixin.js  | 54 ++++++++++++
 11 files changed, 208 insertions(+), 63 deletions(-)
 create mode 100644 apps/workflowengine/src/components/Checks/RequestUserGroup.vue
 create mode 100644 apps/workflowengine/src/css/multiselect.css
 create mode 100644 apps/workflowengine/src/mixins/valueMixin.js

diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue
index a3e3798304..e99bf679f0 100644
--- a/apps/workflowengine/src/components/Checks/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue
@@ -16,7 +16,8 @@
 				<span class="option__title">{{ props.option.label }}</span>
 			</template>
 		</Multiselect>
-		<input type="text" :value="currentValue.pattern" @input="updateCustom" v-if="!isPredefined">
+		<input v-if="!isPredefined" type="text" :value="currentValue.pattern"
+			@input="updateCustom">
 	</div>
 </template>
 
diff --git a/apps/workflowengine/src/components/Checks/FileSystemTag.vue b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
index ead4edf60c..2875b64d48 100644
--- a/apps/workflowengine/src/components/Checks/FileSystemTag.vue
+++ b/apps/workflowengine/src/components/Checks/FileSystemTag.vue
@@ -22,59 +22,59 @@
 
 <template>
 	<MultiselectTag v-model="newValue" :multiple="false"
-					label="Select a tag"
-					@input="update" />
+		label="Select a tag"
+		@input="update" />
 </template>
 
 <script>
-	import { MultiselectTag } from './MultiselectTag'
+import { MultiselectTag } from './MultiselectTag'
 
-	export default {
-		name: 'SizeValue',
-		components: {
-			MultiselectTag
-		},
-		props: {
-			value: {
-				type: String,
-				default: ''
-			}
-		},
-		data() {
-			return {
-				valid: false,
-				newValue: []
-			}
-		},
-		beforeMount() {
+export default {
+	name: 'FileSystemTag',
+	components: {
+		MultiselectTag
+	},
+	props: {
+		value: {
+			type: String,
+			default: ''
+		}
+	},
+	data() {
+		return {
+			valid: false,
+			newValue: []
+		}
+	},
+	watch: {
+		value() {
 			this.updateValue()
-		},
-		watch: {
-			value() {
-				this.updateValue()
+		}
+	},
+	beforeMount() {
+		this.updateValue()
+	},
+	methods: {
+		updateValue() {
+			if (this.value !== '') {
+				this.newValue = this.value
+			} else {
+				this.newValue = null
 			}
 		},
-		methods: {
-			updateValue() {
-				if (this.value !== "") {
-					this.newValue = this.value
-				} else {
-					this.newValue = null
-				}
-			},
-			validate() {
-				return true
-			},
-			update() {
-				if (this.validate()) {
-					this.$emit('input', this.newValue || '')
-					this.valid = false
-				} else {
-					this.valid = false
-				}
+		validate() {
+			return true
+		},
+		update() {
+			if (this.validate()) {
+				this.$emit('input', this.newValue || '')
+				this.valid = false
+			} else {
+				this.valid = false
 			}
 		}
 	}
+}
 </script>
 
 <style scoped>
diff --git a/apps/workflowengine/src/components/Checks/MultiselectTag/api.js b/apps/workflowengine/src/components/Checks/MultiselectTag/api.js
index f371a4b71d..bdbab2b974 100644
--- a/apps/workflowengine/src/components/Checks/MultiselectTag/api.js
+++ b/apps/workflowengine/src/components/Checks/MultiselectTag/api.js
@@ -46,11 +46,11 @@ const parseXml = (xml) => {
 }
 
 const xmlToTagList = (xml) => {
-	let json = xmlToJson(parseXml(xml))
-	let list = json['d:multistatus']['d:response']
-	let result = []
-	for (let index in list) {
-		let tag = list[index]['d:propstat']
+	const json = xmlToJson(parseXml(xml))
+	const list = json['d:multistatus']['d:response']
+	const result = []
+	for (const index in list) {
+		const tag = list[index]['d:propstat']
 
 		if (tag['d:status']['#text'] !== 'HTTP/1.1 200 OK') {
 			continue
diff --git a/apps/workflowengine/src/components/Checks/RequestTime.vue b/apps/workflowengine/src/components/Checks/RequestTime.vue
index b150e67b00..d41f76c2c2 100644
--- a/apps/workflowengine/src/components/Checks/RequestTime.vue
+++ b/apps/workflowengine/src/components/Checks/RequestTime.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="timeslot">
-		<Multiselect v-model="newValue.timezone" :options="timezones" />
+		<Multiselect v-model="newValue.timezone" :options="timezones" @input="update" />
 		<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"
@@ -11,7 +11,7 @@
 <script>
 import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
 import moment from 'moment-timezone'
-import valueMixin from '../../mixins/valueMixin';
+import valueMixin from '../../mixins/valueMixin'
 
 const zones = moment.tz.names()
 export default {
diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue
index 8f3bb76658..7de8b0637f 100644
--- a/apps/workflowengine/src/components/Checks/RequestURL.vue
+++ b/apps/workflowengine/src/components/Checks/RequestURL.vue
@@ -40,15 +40,15 @@
 				<span class="option__title">{{ props.option.label }} {{ props.option.$groupLabel }}</span>
 			</template>
 		</Multiselect>
-		<input type="text" :value="currentValue.pattern"
-			   :placeholder="placeholder"
-			   @input="updateCustom" v-if="!isPredefined">
+		<input v-if="!isPredefined" type="text"
+			:value="currentValue.pattern"
+			:placeholder="placeholder" @input="updateCustom">
 	</div>
 </template>
 
 <script>
 import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
-import valueMixin from '../../mixins/valueMixin';
+import valueMixin from '../../mixins/valueMixin'
 
 export default {
 	name: 'RequestURL',
@@ -65,7 +65,7 @@ export default {
 				{
 					label: t('workflowengine', 'Predefined URLs'),
 					children: [
-						{ pattern: 'webdav', label: t('workflowengine', 'Files WebDAV')},
+						{ pattern: 'webdav', label: t('workflowengine', 'Files WebDAV') }
 					]
 				}
 			]
@@ -108,7 +108,7 @@ export default {
 			return {
 				icon: 'icon-settings-dark',
 				label: t('workflowengine', 'Custom URL'),
-				pattern: this.newValue,
+				pattern: this.newValue
 			}
 		}
 	},
diff --git a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
index c5ea6bd4ee..c65bba5035 100644
--- a/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
+++ b/apps/workflowengine/src/components/Checks/RequestUserAgent.vue
@@ -40,13 +40,14 @@
 				<span class="option__title">{{ props.option.label }} {{ props.option.$groupLabel }}</span>
 			</template>
 		</Multiselect>
-		<input type="text" :value="currentValue.pattern" @input="updateCustom" v-if="!isPredefined">
+		<input v-if="!isPredefined" type="text" :value="currentValue.pattern"
+			@input="updateCustom">
 	</div>
 </template>
 
 <script>
 import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
-import valueMixin from '../../mixins/valueMixin';
+import valueMixin from '../../mixins/valueMixin'
 
 export default {
 	name: 'RequestUserAgent',
@@ -103,7 +104,7 @@ export default {
 			return {
 				icon: 'icon-settings-dark',
 				label: t('workflowengine', 'Custom user agent'),
-				pattern: this.newValue,
+				pattern: this.newValue
 			}
 		}
 	},
diff --git a/apps/workflowengine/src/components/Checks/RequestUserGroup.vue b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
new file mode 100644
index 0000000000..843bbf127e
--- /dev/null
+++ b/apps/workflowengine/src/components/Checks/RequestUserGroup.vue
@@ -0,0 +1,77 @@
+<!--
+  - @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>
+	<div>
+		<Multiselect v-model="newValue"
+			:class="{'icon-loading-small': groups.length === 0}" :options="groups"
+			:multiple="false"
+			label="displayname" track-by="id"
+			@input="setValue" />
+	</div>
+</template>
+
+<script>
+import { Multiselect } from 'nextcloud-vue/dist/Components/Multiselect'
+import valueMixin from '../../mixins/valueMixin'
+import axios from 'nextcloud-axios'
+export default {
+	name: 'RequestUserGroup',
+	components: {
+		Multiselect
+	},
+	mixins: [
+		valueMixin
+	],
+	data() {
+		return {
+			groups: []
+		}
+	},
+	beforeMount() {
+		axios.get(OC.linkToOCS('cloud', 2) + 'groups').then((response) => {
+			this.groups = response.data.ocs.data.groups.reduce((obj, item) => {
+				obj.push({
+					id: item,
+					displayname: item
+				})
+				return obj
+			}, [])
+			this.updateInternalValue(this.value)
+		}, (error) => {
+			console.error('Error while loading group list', error.response)
+		})
+	},
+	methods: {
+		updateInternalValue() {
+			this.newValue = this.groups.find(group => group.id === this.value) || null
+		},
+		setValue(value) {
+			if (value !== null) {
+				this.$emit('input', this.newValue.id)
+			}
+		}
+	}
+}
+</script>
+
+<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 431a3f9358..80bd120079 100644
--- a/apps/workflowengine/src/components/Checks/file.js
+++ b/apps/workflowengine/src/components/Checks/file.js
@@ -22,7 +22,7 @@
 
 import FileMimeType from './FileMimeType'
 import { stringValidator, validateIPv4, validateIPv6 } from './../../helpers/validators'
-import FileSystemTag from './FileSystemTag';
+import FileSystemTag from './FileSystemTag'
 const FileChecks = [
 	{
 		class: 'OCA\\WorkflowEngine\\Check\\FileName',
diff --git a/apps/workflowengine/src/components/Checks/request.js b/apps/workflowengine/src/components/Checks/request.js
index ee574f9de9..1059bf45b5 100644
--- a/apps/workflowengine/src/components/Checks/request.js
+++ b/apps/workflowengine/src/components/Checks/request.js
@@ -23,6 +23,7 @@
 import RequestUserAgent from './RequestUserAgent'
 import RequestTime from './RequestTime'
 import RequestURL from './RequestURL'
+import RequestUserGroup from './RequestUserGroup'
 
 const RequestChecks = [
 	{
@@ -62,8 +63,8 @@ const RequestChecks = [
 		operators: [
 			{ operator: 'is', name: t('workflowengine', 'is member of') },
 			{ operator: '!is', name: t('workflowengine', 'is not member of') }
-		]
-		// TODO: implement component
+		],
+		component: RequestUserGroup
 	}
 ]
 
diff --git a/apps/workflowengine/src/css/multiselect.css b/apps/workflowengine/src/css/multiselect.css
new file mode 100644
index 0000000000..8eb7583744
--- /dev/null
+++ b/apps/workflowengine/src/css/multiselect.css
@@ -0,0 +1,11 @@
+.multiselect::v-deep .multiselect__single {
+	display: flex;
+}
+
+.option__icon {
+	min-width: 25px;
+}
+
+input, .multiselect {
+	width: 100%;
+}
diff --git a/apps/workflowengine/src/mixins/valueMixin.js b/apps/workflowengine/src/mixins/valueMixin.js
new file mode 100644
index 0000000000..e6ea5bbdcf
--- /dev/null
+++ b/apps/workflowengine/src/mixins/valueMixin.js
@@ -0,0 +1,54 @@
+/*
+ * @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/>.
+ *
+ */
+
+const valueMixin = {
+	props: {
+		value: {
+			type: String,
+			default: ''
+		},
+		check: {
+			type: Object,
+			default: () => { return {} }
+		}
+	},
+	data() {
+		return {
+			newValue: ''
+		}
+	},
+	watch: {
+		value: {
+			immediate: true,
+			handler: function(value) {
+				this.updateInternalValue(value)
+			}
+		}
+	},
+	methods: {
+		updateInternalValue(value) {
+			this.newValue = value
+		}
+	}
+}
+
+export default valueMixin