From 5d0adf434159e9d3f39110871422bad17a960510 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Mon, 30 Dec 2024 14:26:25 +0100
Subject: [PATCH] feat:select existing talk roomfor convesations

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/Editor/AddTalkModal.vue | 252 +++++++++++++++++++++++++
 src/services/talkService.js            |   2 +-
 src/store/calendarObjectInstance.js    |   2 +-
 src/views/EditSidebar.vue              | 105 ++++++++++-
 4 files changed, 356 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Editor/AddTalkModal.vue

diff --git a/src/components/Editor/AddTalkModal.vue b/src/components/Editor/AddTalkModal.vue
new file mode 100644
index 0000000000..b6189303fb
--- /dev/null
+++ b/src/components/Editor/AddTalkModal.vue
@@ -0,0 +1,252 @@
+<template>
+	<NcModal size="normal"
+		class="modal"
+		:name="t('calendar', 'Select a Talk Room')"
+		@close="$emit('close', $event)">
+		<div class="modal-content">
+			<h2>{{ t('calendar', 'Add Talk conversation') }}</h2>
+			<div class="talk-room-list">
+				<NcEmptyContent v-if="loading"
+					icon="icon-loading"
+					class="modal__content__loading"
+					:description="t('calendar','Fetching Talk rooms...')" />
+				<NcEmptyContent v-else-if="talkConversations.length === 0"
+					:description="t('calendar','No Talk room available')" />
+				<ul v-else>
+					<li v-for="conversation in talkConversations"
+						:key="conversation.id"
+						:class="{ selected: selectedRoom && selectedRoom.id === conversation.id }"
+						class="talk-room-list__item"
+						@click="selectRoom(conversation)">
+						<NcAvatar :url="avatarUrl(conversation)"
+							:size="28"
+							:disable-tooltip="true" />
+						<span>{{ conversation.displayName }}</span>
+					</li>
+				</ul>
+			</div>
+			<div class="sticky-footer">
+				<NcButton class="talk_new-room" :disabled="creatingTalkRoom" @click="createTalkRoom">
+					<template #icon>
+						<IconAdd :size="20" />
+					</template>
+					{{ t('calendar', 'Create a new conversation') }}
+				</NcButton>
+				<NcButton type="primary"
+					class="talk_select-room"
+					:disabled="!selectedRoom"
+					@click="selectConversation(selectedRoom)">
+					{{ t('calendar', 'Select conversation') }}
+				</NcButton>
+			</div>
+		</div>
+	</NcModal>
+</template>
+
+<script>
+import {
+	NcButton,
+	NcModal,
+	NcAvatar,
+	NcEmptyContent,
+} from '@nextcloud/vue'
+import axios from '@nextcloud/axios'
+import { createTalkRoom, generateURLForToken } from '../../services/talkService.js'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import { generateOcsUrl } from '@nextcloud/router'
+import IconAdd from 'vue-material-design-icons/Plus.vue'
+import useCalendarObjectInstanceStore from '../../store/calendarObjectInstance.js'
+import { mapStores } from 'pinia'
+
+// Ref https://github.com/nextcloud/spreed/blob/main/docs/constants.md
+const CONVERSATION_TYPE_GROUP = 2
+const CONVERSATION_TYPE_PUBLIC = 3
+const CONVERSATION_OBJECT_TYPE_VIDEO_VERIFICATION = 'share:password'
+const PARTICIPANT_TYPE_OWNER = 1
+const PARTICIPANT_TYPE_MODERATOR = 2
+
+export default {
+	name: 'AddTalkModal',
+	components: {
+		NcButton,
+		NcModal,
+		IconAdd,
+		NcAvatar,
+		NcEmptyContent,
+	},
+	props: {
+		calendarObjectInstance: {
+			type: Object,
+			required: true,
+		},
+		conversations: {
+			type: Array,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			talkConversations: [],
+			selectedConversation: null,
+			creatingTalkRoom: false,
+			selectedRoom: false,
+			loading: true,
+		}
+	},
+	computed: {
+		...mapStores(useCalendarObjectInstanceStore, ['calendarObjectInstance']),
+	},
+	async mounted() {
+		await this.fetchTalkConversations()
+	},
+	methods: {
+		avatarUrl(conversation) {
+			return generateOcsUrl('apps/spreed/api/v1/room/{token}/avatar', {
+				token: conversation.token,
+			})
+		},
+		async fetchTalkConversations() {
+			try {
+				const response = await axios.get(generateOcsUrl('apps/spreed/api/v4/room'))
+				this.talkConversations = response.data.ocs.data.filter(conversation =>
+					(conversation.participantType === PARTICIPANT_TYPE_OWNER
+						|| conversation.participantType === PARTICIPANT_TYPE_MODERATOR)
+					&& (conversation.type === CONVERSATION_TYPE_GROUP
+						|| (conversation.type === CONVERSATION_TYPE_PUBLIC
+							&& conversation.objectType !== CONVERSATION_OBJECT_TYPE_VIDEO_VERIFICATION)),
+				)
+			} catch (error) {
+				console.error('Error fetching Talk conversations:', error)
+				showError(this.$t('calendar', 'Error fetching Talk conversations.'))
+			} finally {
+				this.loading = false
+			}
+		},
+		selectRoom(conversation) {
+			this.selectedRoom = conversation
+		},
+
+		async selectConversation(conversation) {
+			try {
+				const url = generateURLForToken(conversation.token)
+
+				if (!url) {
+					showError(this.$t('calendar', 'Conversation does not have a valid URL.'))
+					return
+				}
+
+				if ((this.calendarObjectInstance.location ?? '').trim() === '') {
+					this.calendarObjectInstanceStore.changeLocation({
+						calendarObjectInstance: this.calendarObjectInstance,
+						location: url,
+					})
+					showSuccess(this.$t('calendar', 'Successfully added Talk room link to location.'))
+				} else {
+					const NEW_LINE = '\r\n'
+					const updatedDescription = this.calendarObjectInstance.description
+						? this.calendarObjectInstance.description + NEW_LINE + NEW_LINE + url
+						: url
+
+					this.calendarObjectInstanceStore.changeDescription({
+						calendarObjectInstance: this.calendarObjectInstance,
+						description: updatedDescription,
+					})
+					showSuccess(this.$t('calendar', 'Successfully added Talk room link to description.'))
+				}
+
+				this.selectedConversation = conversation
+			} catch (error) {
+				console.error('Error applying conversation to event:', error)
+				showError(this.$t('calendar', 'Failed to apply Talk room.'))
+			} finally {
+				this.closeModal()
+			}
+		},
+
+		async createTalkRoom() {
+			const NEW_LINE = '\r\n'
+			try {
+				this.creatingTalkRoom = true
+				const url = await createTalkRoom(
+					this.calendarObjectInstance.title,
+					this.calendarObjectInstance.description,
+				)
+
+				if (!url) {
+					throw new Error('No URL returned from createTalkRoom')
+				}
+
+				if ((this.calendarObjectInstance.location ?? '').trim() === '') {
+					this.$emit('update-location', url)
+					showSuccess(this.$t('calendar', 'Successfully added Talk room link to location.'))
+				} else {
+					const newDescription = this.calendarObjectInstance.description
+						? this.calendarObjectInstance.description + NEW_LINE + NEW_LINE + url + NEW_LINE
+						: url
+
+					this.$emit('update-description', newDescription)
+					showSuccess(this.$t('calendar', 'Successfully added Talk room link to description.'))
+				}
+			} catch (error) {
+				console.error('Error creating Talk room:', error)
+				showError(this.$t('calendar', 'Error creating Talk room.'))
+			} finally {
+				this.creatingTalkRoom = false
+			}
+		},
+		closeModal() {
+			this.$emit('close')
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.talk-room-list {
+	flex: 1;
+	overflow-y: auto;
+	padding: 10px;
+	font-weight: 600;
+
+	&__item {
+		display: flex;
+		gap: calc(var(--default-grid-baseline) * 2);
+		align-items: center;
+		padding: 6px 6px 6px 9px;
+		height: 34px;
+		&:hover {
+			background-color: var(--color-background-hover);
+			border-radius: var(--border-radius-large);
+
+		}
+		&.selected {
+			background-color: var(--color-primary-element);
+			border-radius: var(--border-radius-large);
+			color: white;
+		}
+	}
+}
+
+.sticky-footer {
+	position: sticky;
+	bottom: 0;
+	padding: 16px;
+	text-align: right;
+	display: flex;
+}
+.talk_new-room {
+	margin-right: auto;
+}
+
+.talk_select-room {
+	margin-left: auto;
+}
+
+h2 {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	height: 30px;
+}
+</style>
diff --git a/src/services/talkService.js b/src/services/talkService.js
index 08de68be1b..eed7a85b95 100644
--- a/src/services/talkService.js
+++ b/src/services/talkService.js
@@ -126,7 +126,7 @@ export function doesContainTalkLink(text) {
  * @param {string} token The token to the call room
  * @return {string}
  */
-function generateURLForToken(token = '') {
+export function generateURLForToken(token = '') {
 	return window.location.protocol + '//' + window.location.host + generateUrl('/call/' + token)
 }
 
diff --git a/src/store/calendarObjectInstance.js b/src/store/calendarObjectInstance.js
index 641ddd24f2..0d00c43ea0 100644
--- a/src/store/calendarObjectInstance.js
+++ b/src/store/calendarObjectInstance.js
@@ -421,7 +421,7 @@ export default defineStore('calendarObjectInstance', {
 		 * @param {string=} data.language Preferred language of the attendee
 		 * @param {string=} data.timezoneId Preferred timezone of the attendee
 		 * @param {object=} data.organizer Principal of the organizer to be set if not present
-		 * @param {string|array} data.member Group membership(s)
+		 * @param {string | Array} data.member Group membership(s)
 		 */
 		addAttendee({
 			calendarObjectInstance,
diff --git a/src/views/EditSidebar.vue b/src/views/EditSidebar.vue
index 7e96b9ea72..cb851f583a 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditSidebar.vue
@@ -82,7 +82,23 @@
 				@update-end-time="updateEndTime"
 				@update-end-timezone="updateEndTimezone"
 				@toggle-all-day="toggleAllDay" />
-
+			<div v-if="isCreateTalkRoomButtonVisible"
+				class="property-text property-add-talk">
+				<AddTalkModal v-if="isModalOpen"
+					:conversations="talkConversations"
+					:calendar-object-instance="calendarObjectInstance"
+					@close="closeModal"
+					@update-location="updateLocation"
+					@update-description="updateDescription" />
+				<IconVideo :size="20"
+					class="property-text__icon property-add-talk__icon" />
+				<NcButton type="tertiary"
+					class="property-add-talk__button"
+					:disabled="isCreateTalkRoomButtonDisabled"
+					@click="openModal">
+					{{ t('calendar','Add Talk conversation') }}
+				</NcButton>
+			</div>
 			<PropertyText class="property-location"
 				:is-read-only="isReadOnly"
 				:prop-model="rfcProps.location"
@@ -314,10 +330,15 @@ import usePrincipalsStore from '../store/principals.js'
 import useSettingsStore from '../store/settings.js'
 import useCalendarObjectInstanceStore from '../store/calendarObjectInstance.js'
 import { mapStores, mapState } from 'pinia'
+import AddTalkModal from '../components/Editor/AddTalkModal.vue'
+import { createTalkRoom, doesContainTalkLink } from '../services/talkService.js'
+import { showError, showSuccess } from '@nextcloud/dialogs'
+import IconVideo from 'vue-material-design-icons/Video.vue'
 
 export default {
 	name: 'EditSidebar',
 	components: {
+		AddTalkModal,
 		ResourceList,
 		PropertyColor,
 		PropertySelectMultiple,
@@ -348,6 +369,7 @@ export default {
 		AttachmentsList,
 		CalendarPickerHeader,
 		PropertyTitle,
+		IconVideo,
 	},
 	mixins: [
 		EditorMixin,
@@ -361,6 +383,10 @@ export default {
 			showModalUsers: [],
 			sharedProgress: 0,
 			showPreloader: false,
+			isModalOpen: false,
+			talkConversations: [],
+			selectedConversation: null,
+
 		}
 	},
 	computed: {
@@ -372,6 +398,7 @@ export default {
 			showResources: 'showResources',
 		}),
 		...mapState(useCalendarObjectInstanceStore, ['calendarObjectInstance']),
+		...mapState(useSettingsStore, ['talkEnabled']),
 		accessClass() {
 			return this.calendarObjectInstance?.accessClass || null
 		},
@@ -406,6 +433,21 @@ export default {
 		currentUser() {
 			return this.principalsStore.getCurrentUserPrincipal || null
 		},
+		isCreateTalkRoomButtonDisabled() {
+			if (this.creatingTalkRoom) {
+				return true
+			}
+
+			if (doesContainTalkLink(this.calendarObjectInstance.location)) {
+				return true
+			}
+			return doesContainTalkLink(this.calendarObjectInstance.description)
+
+		},
+		isCreateTalkRoomButtonVisible() {
+			return this.talkEnabled
+		},
+
 	},
 	mounted() {
 		window.addEventListener('keydown', this.keyboardCloseEditor)
@@ -420,6 +462,56 @@ export default {
 		window.removeEventListener('keydown', this.keyboardDuplicateEvent)
 	},
 	methods: {
+		openModal() {
+			this.isModalOpen = true
+		},
+
+		updateLocation(url) {
+			this.calendarObjectInstance.location = url
+		},
+		updateDescription(description) {
+			this.calendarObjectInstance.description = description
+		},
+		closeModal() {
+			this.isModalOpen = false
+		},
+
+		async createTalkRoom() {
+			const NEW_LINE = '\r\n'
+			try {
+				this.creatingTalkRoom = true
+				const url = await createTalkRoom(
+					this.calendarObjectInstance.title,
+					this.calendarObjectInstance.description,
+				)
+
+				// Store in LOCATION property if it's missing/empty. Append to description otherwise.
+				if ((this.calendarObjectInstance.location ?? '').trim() === '') {
+					this.calendarObjectInstanceStore.changeLocation({
+						calendarObjectInstance: this.calendarObjectInstance,
+						location: url,
+					})
+					showSuccess(this.$t('calendar', 'Successfully appended link to talk room to location.'))
+				} else {
+					if (!this.calendarObjectInstance.description) {
+						this.calendarObjectInstanceStore.changeDescription({
+							calendarObjectInstance: this.calendarObjectInstance,
+							description: url,
+						})
+					} else {
+						this.calendarObjectInstanceStore.changeDescription({
+							calendarObjectInstance: this.calendarObjectInstance,
+							description: this.calendarObjectInstance.description + NEW_LINE + NEW_LINE + url + NEW_LINE,
+						})
+					}
+					showSuccess(this.$t('calendar', 'Successfully appended link to talk room to description.'))
+				}
+			} catch (error) {
+				showError(this.$t('calendar', 'Error creating Talk room'))
+			} finally {
+				this.creatingTalkRoom = false
+			}
+		},
 		/**
 		 * Update the start and end date of this event
 		 *
@@ -676,8 +768,15 @@ export default {
 	height: auto;
 	border-radius: var(--border-radius);
 }
-.property-location {
-	margin-top: 10px;
+.property-add-talk {
+	&__icon {
+		padding-top: 8px !important;
+	}
+
+	&__button {
+		display: flex;
+		align-items: center;
+	}
 }
 .property-description {
 	margin-bottom: 10px;