feat(LeftSidebar): use AvatarWrapper for users, add fast creating opt…

…ion for federated users - lint import order Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Mar 27, 2024 · 1bfff6e · 1bfff6e
1 parent d22242a
commit 1bfff6e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 11 deletions.
diff --git a/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue b/src/components/LeftSidebar/CallPhoneDialog/CallPhoneDialog.vue
@@ -67,9 +67,9 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
-import DialpadPanel from '../../UIShared/DialpadPanel.vue'
 import LoadingComponent from '../../LoadingComponent.vue'
 import SelectPhoneNumber from '../../SelectPhoneNumber.vue'
+import DialpadPanel from '../../UIShared/DialpadPanel.vue'
 
 import { CONVERSATION, PARTICIPANT } from '../../../constants.js'
 import { callSIPDialOut } from '../../../services/callsService.js'

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -223,7 +223,7 @@
 							:name="item.label"
 							@click="createAndJoinConversation(item)">
 							<template #icon>
-								<ConversationIcon :item="iconData(item)" />
+								<AvatarWrapper v-bind="iconData(item)" />
 							</template>
 							<template #subname>
 								{{ t('spreed', 'New private conversation') }}
@@ -266,6 +266,23 @@
 								</template>
 							</NcListItem>
 						</template>
+
+						<!-- New conversations: Federated users -->
+						<template v-if="searchResultsFederated.length !== 0">
+							<NcAppNavigationCaption :name="t('spreed', 'Federated users')" />
+							<NcListItem v-for="item of searchResultsFederated"
+								:key="`federated_${item.id}`"
+								:data-nav-id="`federated_${item.id}`"
+								:name="item.label"
+								@click="createAndJoinConversation(item)">
+								<template #icon>
+									<AvatarWrapper v-bind="iconData(item)" />
+								</template>
+								<template #subname>
+									{{ t('spreed', 'New group conversation') }}
+								</template>
+							</NcListItem>
+						</template>
 					</template>
 
 					<!-- Search results: no results (yet) -->
@@ -327,10 +344,11 @@ import Conversation from './ConversationsList/Conversation.vue'
 import ConversationsListVirtual from './ConversationsList/ConversationsListVirtual.vue'
 import InvitationHandler from './InvitationHandler.vue'
 import OpenConversationsList from './OpenConversationsList/OpenConversationsList.vue'
-import SearchBox from '../UIShared/SearchBox.vue'
+import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 import ConversationIcon from '../ConversationIcon.vue'
-import Hint from '../UIShared/Hint.vue'
 import NewConversationDialog from '../NewConversationDialog/NewConversationDialog.vue'
+import Hint from '../UIShared/Hint.vue'
+import SearchBox from '../UIShared/SearchBox.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'
@@ -360,6 +378,7 @@ export default {
 	name: 'LeftSidebar',
 
 	components: {
+		AvatarWrapper,
 		CallPhoneDialog,
 		InvitationHandler,
 		NcAppNavigation,
@@ -424,6 +443,7 @@ export default {
 			searchResultsUsers: [],
 			searchResultsGroups: [],
 			searchResultsCircles: [],
+			searchResultsFederated: [],
 			searchResultsListedConversations: [],
 			contactsLoading: false,
 			listedConversationsLoading: false,
@@ -714,6 +734,10 @@ export default {
 				})
 				this.searchResultsGroups = this.searchResults.filter((match) => match.source === ATTENDEE.ACTOR_TYPE.GROUPS)
 				this.searchResultsCircles = this.searchResults.filter((match) => match.source === ATTENDEE.ACTOR_TYPE.CIRCLES)
+				this.searchResultsFederated = this.searchResults.filter((match) => match.source === ATTENDEE.ACTOR_TYPE.REMOTES)
+					.map((item) => {
+						return { ...item, source: ATTENDEE.ACTOR_TYPE.FEDERATED_USERS }
+					})
 				this.contactsLoading = false
 			} catch (exception) {
 				if (CancelableRequest.isCancel(exception)) {
@@ -971,11 +995,15 @@ export default {
 		},
 
 		iconData(item) {
-			if (item.source === ATTENDEE.ACTOR_TYPE.USERS) {
+			if (item.source === ATTENDEE.ACTOR_TYPE.USERS
+				|| item.source === ATTENDEE.ACTOR_TYPE.FEDERATED_USERS) {
 				return {
-					type: CONVERSATION.TYPE.ONE_TO_ONE,
-					displayName: item.label,
-					name: item.id,
+					id: item.id,
+					name: item.label,
+					source: item.source,
+					disableMenu: true,
+					token: 'new',
+					showUserStatus: true,
 				}
 			}
 			return {

diff --git a/src/components/NewConversationDialog/NewConversationContactsPage.vue b/src/components/NewConversationDialog/NewConversationContactsPage.vue
@@ -83,10 +83,10 @@ import { showError } from '@nextcloud/dialogs'
 
 import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
-import ContactSelectionBubble from '../UIShared/ContactSelectionBubble.vue'
-import DialpadPanel from '../UIShared/DialpadPanel.vue'
 import ParticipantSearchResults from '../RightSidebar/Participants/ParticipantsSearchResults.vue'
 import SelectPhoneNumber from '../SelectPhoneNumber.vue'
+import ContactSelectionBubble from '../UIShared/ContactSelectionBubble.vue'
+import DialpadPanel from '../UIShared/DialpadPanel.vue'
 import TransitionWrapper from '../UIShared/TransitionWrapper.vue'
 
 import { useArrowNavigation } from '../../composables/useArrowNavigation.js'

diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -80,10 +80,10 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import ParticipantsList from './ParticipantsList.vue'
 import ParticipantsListVirtual from './ParticipantsListVirtual.vue'
 import ParticipantsSearchResults from './ParticipantsSearchResults.vue'
+import SelectPhoneNumber from '../../SelectPhoneNumber.vue'
 import DialpadPanel from '../../UIShared/DialpadPanel.vue'
 import Hint from '../../UIShared/Hint.vue'
 import SearchBox from '../../UIShared/SearchBox.vue'
-import SelectPhoneNumber from '../../SelectPhoneNumber.vue'
 
 import { useArrowNavigation } from '../../../composables/useArrowNavigation.js'
 import { useGetParticipants } from '../../../composables/useGetParticipants.js'