add flow operation, frontend part

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

4 files changed, 116 insertions, 4 deletions

diff --git a/lib/Flow/Operation.php b/lib/Flow/Operation.php
index 5d0d5a6e4..a8cdcf890 100644
--- a/lib/Flow/Operation.php
+++ b/lib/Flow/Operation.php
@@ -24,6 +24,7 @@ declare(strict_types=1);
 
 namespace OCA\Talk\Flow;
 
+use OC_Util;
 use OCA\Talk\Chat\ChatManager;
 use OCA\Talk\Exceptions\ParticipantNotFoundException;
 use OCA\Talk\Exceptions\RoomNotFoundException;
@@ -73,6 +74,7 @@ class Operation implements IOperation {
 		$dispatcher->addListener(FlowManager::EVENT_NAME_REG_OPERATION, function (GenericEvent $event) {
 			$operation = \OC::$server->query(Operation::class);
 			$event->getSubject()->registerOperation($operation);
+			OC_Util::addScript('spreed', 'flow');
 		});
 	}
 
@@ -142,16 +144,14 @@ class Operation implements IOperation {
 
 	protected function parseOperationConfig(string $raw): array {
 		/**
-		 * We expect $operation be a base64 encoded json string, containing
+		 * We expect $operation be a json string, containing
 		 * 	't' => string, the room token
 		 *  'm' => int 1..3, the mention-mode (none, yourself, room)
-		 *  'u' => string, the applicable user id
 		 *
 		 * setting up room mentions are only permitted to moderators
 		 */
 
-		$decoded = base64_decode($raw);
-		$opConfig = \json_decode($decoded, true);
+		$opConfig = \json_decode($raw, true);
 		if(!is_array($opConfig) || empty($opConfig)) {
 			throw new UnexpectedValueException('Cannot decode operation details');
 		}
diff --git a/src/PostToConversation.vue b/src/PostToConversation.vue
new file mode 100644
index 000000000..854c67670
--- /dev/null
+++ b/src/PostToConversation.vue
@@ -0,0 +1,103 @@
+<template>
+	<div>
+		<Multiselect :value="currentRoom"
+			:options="roomOptions"
+			track-by="token"
+			label="displayName"
+			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': currentMode.id, 't': newValue.token }))" />
+
+		<Multiselect :value="currentMode"
+			:options="modeOptions"
+			track-by="id"
+			label="text"
+			@input="(newValue) => newValue !== null && $emit('input', JSON.stringify({'m': newValue.id, 't': currentRoom.token }))" />
+	</div>
+</template>
+
+<script>
+import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
+import axios from '@nextcloud/axios'
+
+const conversationModeOptions = [
+	{
+		id: 1,
+		text: t('spreed', 'Message without mention'),
+	},
+	{
+		id: 2,
+		text: t('spreed', 'Mention myself'),
+	},
+	{
+		id: 3,
+		text: t('spreed', 'Mention room'),
+	},
+]
+
+export default {
+	name: 'PostToConversation',
+	components: { Multiselect },
+	props: {
+		value: {
+			default: JSON.stringify({ 'm': '0', 't': '' }),
+			type: String,
+		},
+	},
+	data() {
+		return {
+			modeOptions: conversationModeOptions,
+			roomOptions: [],
+		}
+	},
+	computed: {
+		currentRoom() {
+			console.debug('room ' + this.value)
+			if (this.value === '') {
+				return ''
+			}
+			const selectedRoom = JSON.parse(this.value).t
+			const newValue = this.roomOptions.find(option => option.token === selectedRoom)
+			if (typeof newValue === 'undefined') {
+				return ''
+			}
+			console.debug('sel room ' + selectedRoom)
+			return newValue
+		},
+		currentMode() {
+			console.debug('mode ' + this.value)
+			if (this.value === '') {
+				console.debug('def mode ' + conversationModeOptions[0].id)
+				return conversationModeOptions[0].id
+			}
+			const selectedMode = JSON.parse(this.value).m
+			const newValue = conversationModeOptions.find(option => option.id === selectedMode)
+			if (typeof newValue === 'undefined') {
+				console.debug('def mode2 ' + conversationModeOptions[0].id)
+				return conversationModeOptions[0].id
+			}
+			console.debug('sel mode ' + selectedMode)
+			return newValue
+		},
+	},
+	beforeMount() {
+		this.fetchRooms()
+	},
+	methods: {
+		fetchRooms() {
+			axios.get(OC.linkToOCS('/apps/spreed/api/v1', 2) + 'room').then((response) => {
+				this.roomOptions = response.data.ocs.data.filter(function(room) {
+					return room.readOnly === 0
+				})
+			})
+		},
+	},
+}
+
+</script>
+
+<style scoped>
+	.multiselect {
+		width: 100%;
+		margin: auto;
+		text-align: center;
+	}
+</style>
diff --git a/src/flow.js b/src/flow.js
new file mode 100644
index 000000000..ac447ee27
--- /dev/null
+++ b/src/flow.js
@@ -0,0 +1,8 @@
+import PostToConversation from './PostToConversation'
+
+window.OCA.WorkflowEngine.registerOperator({
+	id: 'OCA\\Talk\\Flow\\Operation',
+	color: 'tomato',
+	operation: '',
+	options: PostToConversation,
+})
diff --git a/webpack.common.js b/webpack.common.js
index e20bb387d..6e269b0f6 100644
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -14,6 +14,7 @@ module.exports = {
 		'talk': path.join(__dirname, 'src', 'main.js'),
 		'talk-chat-tab': path.join(__dirname, 'src', 'mainChatTab.js'),
 		'files-sidebar-tab': path.join(__dirname, 'src', 'mainSidebarTab.js'),
+		'flow': path.join(__dirname, 'src', 'flow.js')
 	},
 	output: {
 		path: path.resolve(__dirname, './js'),