Don't use collaboration endpoint to trigger RoomSelector

Deck plugin now creates its own Vue VM to instantiate the
RoomSelector.
RoomSelector now allows to specify properties for dialog title and
whether the result list should be filtered.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

1 files changed, 75 insertions, 42 deletions

diff --git a/src/deck.js b/src/deck.js
index 582d71bf3..d0f63f047 100644
--- a/src/deck.js
+++ b/src/deck.js
@@ -26,53 +26,86 @@ import { getRequestToken } from '@nextcloud/auth'
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { showSuccess, showError } from '@nextcloud/dialogs'
 import { postRichObjectToConversation } from './services/messagesService'
+import RoomSelector from './views/RoomSelector'
 
-// CSP config for webpack dynamic chunk loading
-// eslint-disable-next-line
-__webpack_nonce__ = btoa(getRequestToken())
+(function(OC, OCA, t, n) {
+	async function postCardToRoom(card, token) {
+		try {
+			const response = await postRichObjectToConversation(token, {
+				objectType: 'deck-card',
+				objectId: card.id,
+				metaData: JSON.stringify(card),
+			})
+			const messageId = response.data.ocs.data.id
+			const targetUrl = generateUrl('/call/{token}#message_{messageId}', { token, messageId })
+			showSuccess(t('spreed', 'Deck card has been posted to the selected <a href="{link}">conversation</a>.', {
+				link: targetUrl,
+			}), {
+				isHTML: true,
+			})
+		} catch (exception) {
+			console.error('Error posting deck card to conversation', exception, exception.response?.status)
+			if (exception.response?.status === 403) {
+				showError(t('spreed', 'No permission to post messages in this conversation'))
+			} else {
+				showError(t('spreed', 'An error occurred while posting deck card to conversation.'))
+			}
+		}
+	}
+
+	function init() {
+		if (!OCA.Deck) {
+			return
+		}
 
-// Correct the root of the app for chunk loading
-// OC.linkTo matches the apps folders
-// OC.generateUrl ensure the index.php (or not)
-// We do not want the index.php since we're loading files
-// eslint-disable-next-line
-__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
+		OCA.Deck.registerCardAction({
+			label: t('spreed', 'Post to a conversation'),
+			icon: 'icon-talk',
+			callback: (card) => {
+				const container = document.createElement('div')
+				container.id = 'spreed-post-card-to-room-select'
+				const body = document.getElementById('body-user')
+				body.appendChild(container)
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-Vue.prototype.OC = OC
-Vue.prototype.OCA = OCA
+				const ComponentVM = Vue.extend(RoomSelector)
+				const vm = new ComponentVM({
+					el: container,
+					propsData: {
+						dialogTitle: t('spreed', 'Post to conversation'),
+						showPostableOnly: true,
+					},
+				})
 
-document.addEventListener('DOMContentLoaded', function() {
+				vm.$root.$on('close', () => {
+					vm.$el.remove()
+					vm.$destroy()
+				})
+				vm.$root.$on('select', (token) => {
+					vm.$el.remove()
+					vm.$destroy()
 
-	if (!window.OCA.Deck) {
-		return
+					postCardToRoom(card, token)
+				})
+			},
+		})
 	}
 
-	window.OCA.Deck.registerCardAction({
-		label: t('spreed', 'Post to a conversation'),
-		icon: 'icon-talk',
-		callback: (card) => {
-			OCP.Collaboration.trigger('room').then(async(token) => {
-				try {
-					const response = await postRichObjectToConversation(token, {
-						objectType: 'deck-card',
-						objectId: card.id,
-						metaData: JSON.stringify(card),
-					})
-					const messageId = response.data.ocs.data.id
-					const targetUrl = generateUrl('/call/{token}#message_{messageId}', { token, messageId })
-					showSuccess(t('spreed', 'Deck card has been posted to the selected <a href="{link}">conversation</a>.', {
-						link: targetUrl,
-					}), {
-						isHTML: true,
-					})
-				} catch (exception) {
-					console.error('Error posting deck card to conversation', exception, exception.response?.status)
-					showError(t('spreed', 'An error occurred while posting deck card to conversation.'))
-				}
-			})
-		},
-	})
+	// CSP config for webpack dynamic chunk loading
+	// eslint-disable-next-line
+	__webpack_nonce__ = btoa(getRequestToken())
+
+	// Correct the root of the app for chunk loading
+	// OC.linkTo matches the apps folders
+	// OC.generateUrl ensure the index.php (or not)
+	// We do not want the index.php since we're loading files
+	// eslint-disable-next-line
+	__webpack_public_path__ = generateFilePath('spreed', '', 'js/')
+
+	Vue.prototype.t = translate
+	Vue.prototype.n = translatePlural
+	Vue.prototype.OC = OC
+	Vue.prototype.OCA = OCA
+
+	document.addEventListener('DOMContentLoaded', init)
 
-})
+})(window.OC, window.OCA, t, n)