Migrate plugins to vuex store

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

3 files changed, 37 insertions, 14 deletions

diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index b2e8e13c29b..5f8140f2222 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -3,12 +3,12 @@
 		<Multiselect ref="checkSelector" v-model="currentOption" :options="options"
 			label="name" track-by="class" :allow-empty="false"
 			:placeholder="t('workflowengine', 'Select a filter')" @input="updateCheck" />
-		<Multiselect v-if="currentOption" v-model="currentOperator" :options="operators"
+		<Multiselect :disabled="!currentOption" v-model="currentOperator" :options="operators"
 			label="name" track-by="operator" :allow-empty="false"
 			:placeholder="t('workflowengine', 'Select a comparator')" @input="updateCheck" />
-		<component :is="currentOption.component()" v-if="currentOperator && currentComponent" v-model="check.value" />
-		<input v-else-if="currentOperator" v-model="check.value" type="text"
-			@input="updateCheck">
+		<component :is="currentOption.component" v-if="currentOperator && currentComponent" v-model="check.value" :disabled="!currentOption" />
+		<input v-else v-model="check.value" type="text"
+			@input="updateCheck" :disabled="!currentOption">
 		<Actions>
 			<ActionButton v-if="deleteVisible || !currentOption" icon="icon-delete" @click="$emit('remove')" />
 		</Actions>
@@ -16,9 +16,9 @@
 </template>
 
 <script>
-import { Checks } from '../services/Operation'
 import { Multiselect, Actions, ActionButton } from 'nextcloud-vue'
 import ClickOutside from 'vue-click-outside'
+import { mapState } from 'vuex'
 
 export default {
 	name: 'Check',
@@ -45,19 +45,22 @@ export default {
 		}
 	},
 	computed: {
+		...mapState({
+			Checks: (state) => state.plugins.checks
+		}),
 		operators() {
 			if (!this.currentOption) { return [] }
-			return Checks[this.currentOption.class].operators
+			return this.Checks[this.currentOption.class].operators
 		},
 		currentComponent() {
 			if (!this.currentOption) { return [] }
-			const currentComponent = Checks[this.currentOption.class].component
-			return currentComponent && currentComponent()
+			const currentComponent = this.Checks[this.currentOption.class].component
+			return currentComponent
 		}
 	},
 	mounted() {
-		this.options = Object.values(Checks)
-		this.currentOption = Checks[this.check.class]
+		this.options = Object.values(this.Checks)
+		this.currentOption = this.Checks[this.check.class]
 		this.currentOperator = this.operators.find((operator) => operator.operator === this.check.operator)
 	},
 	methods: {
@@ -82,6 +85,12 @@ export default {
 <style scoped lang="scss">
 	.check {
 		display: flex;
+		flex-wrap: wrap;
+		width: 100%;
+		padding-right: 20px;
+		& > *:not(.icon-delete) {
+			width: 200px;
+		}
 		& > .multiselect,
 		& > input[type=text] {
 			margin-right: 5px;
@@ -93,4 +102,8 @@ export default {
 	::placeholder {
 		font-size: 10px;
 	}
+	.icon-delete {
+		margin-top: -5px;
+		margin-bottom: -5px;
+	}
 </style>
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 8a446dd7ae9..6a8757c5b3f 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -12,7 +12,7 @@
 			</p>
 			<p>
 				<span />
-				<input v-if="lastCheckComplete" type="button" class="check--add"
+				<di<input v-if="lastCheckComplete" type="button" class="check--add"
 					value="Add a new filter" @click="rule.checks.push({class: null, operator: null, value: null})">
 			</p>
 		</div>
@@ -174,9 +174,10 @@ export default {
 		.trigger, .action {
 			flex-grow: 1;
 			min-height: 100px;
-			max-width: 700px;
+			max-width: 900px;
 		}
 		.action {
+			max-width: 400px;
 			position: relative;
 			.buttons {
 				position: absolute;
@@ -212,7 +213,8 @@ export default {
 		background-position: 7px center;
 		background-color: transparent;
 		padding-left: 6px;
-		width: 160px;
+		margin: 0;
+		width: 200px;
 		border-radius: var(--border-radius);
 		font-weight: normal;
 		text-align: left;
diff --git a/apps/workflowengine/src/components/Values/FileMimeType.vue b/apps/workflowengine/src/components/Values/FileMimeType.vue
index 9913dc1e858..75729af8073 100644
--- a/apps/workflowengine/src/components/Values/FileMimeType.vue
+++ b/apps/workflowengine/src/components/Values/FileMimeType.vue
@@ -1,5 +1,5 @@
 <template>
-	<input type="text">
+	<input type="text" v-model="test">
 </template>
 
 <script>
@@ -12,6 +12,7 @@ export default {
 	},
 	data() {
 		return {
+			test: 'test',
 			predefinedTypes: [
 				{
 					icon: 'icon-picture',
@@ -30,6 +31,13 @@ export default {
 				}
 			]
 		}
+	},
+	methods: {
+		validateRegex(string) {
+			var regexRegex = /^\/(.*)\/([gui]{0,3})$/
+			var result = regexRegex.exec(string)
+			return result !== null
+		}
 	}
 }
 </script>