enh(NewConversationDialog): refactor and split component

src/components/LeftSidebar/NewGroupConversation/SetContacts/ContactSelectionBubble/ContactSelectionBubble.vue → src/components/ContactSelectionBubble.vue

@@ -3,7 +3,7 @@
   -
   - @author Marco Ambrosini <[email protected]>
   -
-  - @license GNU AGPL version 3 or any later version
+  - @license AGPL-3.0-or-later
   -
   - This program is free software: you can redistribute it and/or modify
   - it under the terms of the GNU Affero General Public License as
@@ -33,7 +33,7 @@
 		</span>
 		<NcButton type="tertiary-no-background"
 			:aria-label="removeLabel"
-			@click="removeParticipantFromSelection(participant)">
+			@click="$emit('update', participant)">
 			<template #icon>
 				<Close :size="16" />
 			</template>
@@ -46,9 +46,9 @@ import Close from 'vue-material-design-icons/Close.vue'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
-import AvatarWrapper from '../../../../AvatarWrapper/AvatarWrapper.vue'
+import AvatarWrapper from './AvatarWrapper/AvatarWrapper.vue'
 
-import { AVATAR } from '../../../../../constants.js'
+import { AVATAR } from '../constants.js'
 
 export default {
 	name: 'ContactSelectionBubble',
@@ -66,6 +66,8 @@ export default {
 		},
 	},
 
+	emits: ['update'],
+
 	setup() {
 		return { AVATAR }
 	},
@@ -81,12 +83,6 @@ export default {
 			return t('spreed', 'Remove participant {name}', { name: this.displayName })
 		},
 	},
-
-	methods: {
-		removeParticipantFromSelection(participant) {
-			this.$store.dispatch('updateSelectedParticipants', participant)
-		},
-	},
 }
 </script>
 

src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue

@@ -101,10 +101,6 @@ export default {
 		container() {
 			return this.$store.getters.getMainContainerSelector()
 		},
-
-		displaySearchHint() {
-			return !this.contactsLoading && this.searchText === ''
-		},
 	},
 
 	expose: ['showModal'],

src/components/LeftSidebar/LeftSidebar.vue

@@ -123,7 +123,7 @@
 			<OpenConversationsList ref="openConversationsList" />
 
 			<!-- New Conversation dialog-->
-			<NewGroupConversation ref="newGroupConversation" :can-moderate-sip-dial-out="canModerateSipDialOut" />
+			<NewConversationDialog ref="newConversationDialog" :can-moderate-sip-dial-out="canModerateSipDialOut" />
 
 			<!-- New Conversation dialog-->
 			<CallPhoneDialog ref="callPhoneDialog" />
@@ -298,11 +298,11 @@ import { useIsMobile } from '@nextcloud/vue/dist/Composables/useIsMobile.js'
 import CallPhoneDialog from './CallPhoneDialog/CallPhoneDialog.vue'
 import Conversation from './ConversationsList/Conversation.vue'
 import ConversationsListVirtual from './ConversationsListVirtual.vue'
-import NewGroupConversation from './NewGroupConversation/NewGroupConversation.vue'
 import OpenConversationsList from './OpenConversationsList/OpenConversationsList.vue'
 import SearchBox from './SearchBox/SearchBox.vue'
 import ConversationIcon from '../ConversationIcon.vue'
 import Hint from '../Hint.vue'
+import NewConversationDialog from '../NewConversationDialog/NewConversationDialog.vue'
 import TransitionWrapper from '../TransitionWrapper.vue'
 
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
@@ -336,7 +336,7 @@ export default {
 		NcButton,
 		Hint,
 		SearchBox,
-		NewGroupConversation,
+		NewConversationDialog,
 		OpenConversationsList,
 		Conversation,
 		NcListItem,
@@ -595,7 +595,7 @@ export default {
 
 	methods: {
 		showModalNewConversation() {
-			this.$refs.newGroupConversation.showModal()
+			this.$refs.newConversationDialog.showModal()
 		},
 
 		showModalListConversations() {
@@ -714,7 +714,7 @@ export default {
 				}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
 			} else {
 				// For other types, show the modal directly
-				this.$refs.newGroupConversation.showModalForItem(item)
+				this.$refs.newConversationDialog.showModalForItem(item)
 			}
 		},
 

src/components/LeftSidebar/NewGroupConversation/SetContacts/SetContacts.vue → src/components/NewConversationDialog/NewConversationContactsPage.vue

@@ -52,7 +52,8 @@
 			group>
 			<ContactSelectionBubble v-for="participant in selectedParticipants"
 				:key="participant.source + participant.id"
-				:participant="participant" />
+				:participant="participant"
+				@update="updateSelectedParticipants" />
 		</TransitionWrapper>
 
 		<!-- Search results -->
@@ -61,13 +62,12 @@
 			:value="searchText"
 			:participant-phone-item.sync="participantPhoneItem"
 			@select="addParticipantPhone" />
-		<ParticipantSearchResults :add-on-click="false"
-			:search-results="searchResults"
+		<ParticipantSearchResults :search-results="searchResults"
 			:contacts-loading="contactsLoading"
 			:no-results="noResults"
-			:scrollable="true"
-			:display-search-hint="displaySearchHint"
-			:selectable="true"
+			scrollable
+			show-search-hints
+			@click="updateSelectedParticipants"
 			@click-search-hint="focusInput" />
 	</div>
 </template>
@@ -83,18 +83,19 @@ import { showError } from '@nextcloud/dialogs'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
-import ContactSelectionBubble from './ContactSelectionBubble/ContactSelectionBubble.vue'
-import DialpadPanel from '../../../DialpadPanel.vue'
-import ParticipantSearchResults from '../../../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
-import SelectPhoneNumber from '../../../SelectPhoneNumber.vue'
-import TransitionWrapper from '../../../TransitionWrapper.vue'
+import ContactSelectionBubble from '../ContactSelectionBubble.vue'
+import DialpadPanel from '../DialpadPanel.vue'
+import ParticipantSearchResults from '../RightSidebar/Participants/ParticipantsSearchResults/ParticipantsSearchResults.vue'
+import SelectPhoneNumber from '../SelectPhoneNumber.vue'
+import TransitionWrapper from '../TransitionWrapper.vue'
 
-import { useArrowNavigation } from '../../../../composables/useArrowNavigation.js'
-import { searchPossibleConversations } from '../../../../services/conversationsService.js'
-import CancelableRequest from '../../../../utils/cancelableRequest.js'
+import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
+import { searchPossibleConversations } from '../../services/conversationsService.js'
+import CancelableRequest from '../../utils/cancelableRequest.js'
 
 export default {
-	name: 'SetContacts',
+	name: 'NewConversationContactsPage',
+
 	components: {
 		ContactSelectionBubble,
 		DialpadPanel,
@@ -113,12 +114,19 @@ export default {
 			required: true,
 		},
 
+		selectedParticipants: {
+			type: Array,
+			required: true,
+		},
+
 		canModerateSipDialOut: {
 			type: Boolean,
 			default: false,
 		},
 	},
 
+	emits: ['update:selected-participants'],
+
 	setup() {
 		const wrapper = ref(null)
 		const setContacts = ref(null)
@@ -148,21 +156,9 @@ export default {
 	},
 
 	computed: {
-		selectedParticipants() {
-			return this.$store.getters.selectedParticipants
-		},
 		hasSelectedParticipants() {
 			return this.selectedParticipants.length !== 0
 		},
-		/**
-		 * Search hint at the bottom of the participants list, displayed only if
-		 * the user is not searching
-		 *
-		 * @return {boolean}
-		 */
-		displaySearchHint() {
-			return !this.contactsLoading && this.searchText === ''
-		},
 
 		isSearching() {
 			return this.searchText !== ''
@@ -252,12 +248,25 @@ export default {
 			this.setContacts.focus()
 		},
 
+		updateSelectedParticipants(participant) {
+			const isSelected = this.selectedParticipants.some(selected => {
+				return selected.id === participant.id && selected.source === participant.source
+			})
+			const payload = isSelected
+				? this.selectedParticipants.filter(selected => {
+					return selected.id !== participant.id || selected.source !== participant.source
+				})
+				: [...this.selectedParticipants, participant]
+
+			this.$emit('update:selected-participants', payload)
+		},
+
 		addParticipantPhone() {
 			if (!this.participantPhoneItem?.phoneNumber) {
 				return
 			}
 
-			this.$store.dispatch('updateSelectedParticipants', this.participantPhoneItem)
+			this.updateSelectedParticipants(this.participantPhoneItem)
 		}
 	},
 }