Migrate plugins to vuex store

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

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>

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;

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>

apps/workflowengine/src/legacy/filemimetypeplugin.js

@@ -17,8 +17,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
-import FileMimeType from './../components/Values/FileMimeType'
-
 (function() {
 
 	OCA.WorkflowEngine = OCA.WorkflowEngine || {}
@@ -66,12 +64,6 @@ import FileMimeType from './../components/Values/FileMimeType'
 			var regexRegex = /^\/(.*)\/([gui]{0,3})$/
 			var result = regexRegex.exec(string)
 			return result !== null
-		},
-
-		component: function() {
-			return FileMimeType
 		}
 	}
 })()
-
-OC.Plugins.register('OCA.WorkflowEngine.CheckPlugins', OCA.WorkflowEngine.Plugins.FileMimeTypePlugin)

apps/workflowengine/src/services/Operation.js

@@ -13,16 +13,6 @@ const ALL_CHECKS = [
 	'OCA\\WorkflowEngine\\Check\\UserGroupMembership'
 ]
 
-const Checks = Object.values(OCA.WorkflowEngine.Plugins).map((plugin) => {
-	if (plugin.component) {
-		return { ...plugin.getCheck(), component: plugin.component }
-	}
-	return plugin.getCheck()
-}).reduce((obj, item) => {
-	obj[item.class] = item
-	return obj
-}, {})
-
 const Operators = OCP.InitialState.loadState('workflowengine', 'operators')
 
 /**
@@ -71,7 +61,6 @@ Operators['OCA\\FilesAutomatedTagging\\Operation'] = {
 }
 
 export {
-	Checks,
 	Operators,
 	ALL_CHECKS
 }

apps/workflowengine/src/store.js

@@ -35,6 +35,12 @@ const store = new Vuex.Store({
 		scope: OCP.InitialState.loadState('workflowengine', 'scope'),
 		// TODO: move to backend data
 		operations: Operators,
+
+		plugins: Vue.observable({
+			checks: {},
+			operators: {}
+		}),
+
 		entities: OCP.InitialState.loadState('workflowengine', 'entities').map(entity => {
 			return {
 				...entity,
@@ -63,6 +69,12 @@ const store = new Vuex.Store({
 		removeRule(state, rule) {
 			const index = state.rules.findIndex((item) => rule.id === item.id)
 			state.rules.splice(index, 1)
+		},
+		addPluginCheck(state, plugin) {
+			Vue.set(state.plugins.checks, plugin.class, plugin)
+		},
+		addPluginOperator(state, plugin) {
+			Vue.set(state.plugins.operators, plugin.class, plugin)
 		}
 	},
 	actions: {

apps/workflowengine/src/workflowengine.js

@@ -14,11 +14,41 @@ import Vuex from 'vuex'
 import store from './store'
 
 import Settings from './components/Workflow'
+import FileMimeType from './components/Values/FileMimeType';
+
+window.OCA.WorkflowEngine = Object.assign({}, OCA.WorkflowEngine, {
+	registerCheck: function (Plugin) {
+		store.commit('addPluginCheck', Plugin)
+	},
+	registerOperator: function (Plugin) {
+		store.commit('addPluginOperator', Plugin)
+	}
+})
+
+// Load legacy plugins for now and register them in the new plugin system
+Object.values(OCA.WorkflowEngine.Plugins).map((plugin) => {
+	if (plugin.component) {
+		return { ...plugin.getCheck(), component: plugin.component() }
+	}
+	return plugin.getCheck()
+}).forEach((legacyCheckPlugin) => window.OCA.WorkflowEngine.registerCheck(legacyCheckPlugin))
+
+// new way of registering checks
+window.OCA.WorkflowEngine.registerCheck({
+	class: 'OCA\\WorkflowEngine\\Check\\FileMimeType',
+	name: t('workflowengine', 'File MIME type'),
+	operators: [
+		{ operator: 'is', name: t('workflowengine', 'is') },
+		{ operator: '!is', name: t('workflowengine', 'is not') },
+		{ operator: 'matches', name: t('workflowengine', 'matches') },
+		{ operator: '!matches', name: t('workflowengine', 'does not match') }
+	],
+	component: FileMimeType
+})
 
-window.OCA.WorkflowEngine = OCA.WorkflowEngine
 Vue.use(Vuex)
-
 Vue.prototype.t = t
+
 const View = Vue.extend(Settings)
 new View({
 	store