Skip to content

Commit

Permalink
fix: handle in call routing
Browse files Browse the repository at this point in the history
Signed-off-by: Dorra Jaouad <[email protected]>
  • Loading branch information
DorraJaouad committed Jan 16, 2025
1 parent e9a0903 commit 22cc5f2
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 120 deletions.
12 changes: 8 additions & 4 deletions src/components/MessagesList/MessagesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -1157,10 +1157,14 @@ export default {

// TODO: doesn't work if chat is hidden. Need to store
// delayed 'shouldScroll' and call after chat is visible
scrollElement.scrollIntoView({
behavior: smooth ? 'smooth' : 'auto',
block: 'center',
inline: 'nearest',
// FIXME: because scrollToBottom is also triggered and it is wrapped in $nextTick
// We need to trigger this at the same time (nextTick) to avoid focusing and then scrolling to bottom
this.$nextTick(() => {
scrollElement.scrollIntoView({
behavior: smooth ? 'smooth' : 'auto',
block: 'center',
inline: 'nearest',
})
})

if (this.$refs.scroller && !smooth) {
Expand Down
142 changes: 72 additions & 70 deletions src/components/RightSidebar/RightSidebar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<template v-if="!showSearchMessagesTab && getUserId" #secondary-actions>
<NcActionButton type="tertiary"
:title="t('spreed', 'Search messages')"
@click="showSearchMessagesTab=true">
@click="showSearchMessagesTab = true">
<template #icon>
<IconMagnify :size="20" />
</template>
Expand All @@ -33,7 +33,7 @@
<template v-else-if="getUserId" #tertiary-actions>
<NcButton type="tertiary"
:title="t('spreed', 'Back')"
@click="showSearchMessagesTab=false">
@click="showSearchMessagesTab = false">
<template #icon>
<IconArrowLeft :size="20" />
</template>
Expand All @@ -48,76 +48,78 @@
key="search-messages"
:order="0"
:name="t('spreed', 'Search messages')">
<SearchMessagesTab />
<SearchMessagesTab @close="showSearchMessagesTab = false" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="isInCall"
id="chat"
key="chat"
:order="1"
:name="t('spreed', 'Chat')">
<template #icon>
<IconMessage :size="20" />
</template>
<ChatView :is-visible="opened" is-sidebar />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showParticipantsTab && !showSearchMessagesTab"
id="participants"
key="participants"
ref="participantsTab"
:order="2"
:name="participantsText">
<template #icon>
<IconAccountMultiple :size="20" />
</template>
<ParticipantsTab :is-active="activeTab === 'participants'"
:can-search="canSearchParticipants"
:can-add="canAddParticipants" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showBreakoutRoomsTab && !showSearchMessagesTab"
id="breakout-rooms"
key="breakout-rooms"
ref="breakout-rooms"
:order="3"
:name="breakoutRoomsText">
<template #icon>
<IconDotsCircle :size="20" />
</template>
<BreakoutRoomsTab :main-token="mainConversationToken"
:main-conversation="mainConversation"
:is-active="activeTab === 'breakout-rooms'" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showDetailsTab && !showSearchMessagesTab"
id="details-tab"
key="details-tab"
:order="4"
:name="t('spreed', 'Details')">
<template #icon>
<IconInformationOutline :size="20" />
</template>
<SetGuestUsername v-if="!getUserId" />
<SipSettings v-if="showSIPSettings" :conversation="conversation" />
<div v-if="!getUserId" id="app-settings">
<div id="app-settings-header">
<NcButton type="tertiary" @click="showSettings">
<template #icon>
<IconCog :size="20" />
</template>
{{ t('spreed', 'Settings') }}
</NcButton>
<template v-else>
<NcAppSidebarTab v-if="isInCall"
id="chat"
key="chat"
:order="1"
:name="t('spreed', 'Chat')">
<template #icon>
<IconMessage :size="20" />
</template>
<ChatView :is-visible="opened" is-sidebar />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showParticipantsTab"
id="participants"
key="participants"
ref="participantsTab"
:order="2"
:name="participantsText">
<template #icon>
<IconAccountMultiple :size="20" />
</template>
<ParticipantsTab :is-active="activeTab === 'participants'"
:can-search="canSearchParticipants"
:can-add="canAddParticipants" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showBreakoutRoomsTab"
id="breakout-rooms"
key="breakout-rooms"
ref="breakout-rooms"
:order="3"
:name="breakoutRoomsText">
<template #icon>
<IconDotsCircle :size="20" />
</template>
<BreakoutRoomsTab :main-token="mainConversationToken"
:main-conversation="mainConversation"
:is-active="activeTab === 'breakout-rooms'" />
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showDetailsTab"
id="details-tab"
key="details-tab"
:order="4"
:name="t('spreed', 'Details')">
<template #icon>
<IconInformationOutline :size="20" />
</template>
<SetGuestUsername v-if="!getUserId" />
<SipSettings v-if="showSIPSettings" :conversation="conversation" />
<div v-if="!getUserId" id="app-settings">
<div id="app-settings-header">
<NcButton type="tertiary" @click="showSettings">
<template #icon>
<IconCog :size="20" />
</template>
{{ t('spreed', 'Settings') }}
</NcButton>
</div>
</div>
</div>
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showSharedItemsTab && !showSearchMessagesTab"
id="shared-items"
key="shared-items"
ref="sharedItemsTab"
:order="5"
:name="t('spreed', 'Shared items')">
<template #icon>
<IconFolderMultipleImage :size="20" />
</template>
<SharedItemsTab :active="activeTab === 'shared-items'" />
</NcAppSidebarTab>
</NcAppSidebarTab>
<NcAppSidebarTab v-if="showSharedItemsTab"
id="shared-items"
key="shared-items"
ref="sharedItemsTab"
:order="5"
:name="t('spreed', 'Shared items')">
<template #icon>
<IconFolderMultipleImage :size="20" />
</template>
<SharedItemsTab :active="activeTab === 'shared-items'" />
</NcAppSidebarTab>
</template>
</NcAppSidebar>
</template>

Expand Down
65 changes: 28 additions & 37 deletions src/components/RightSidebar/SearchMessages/SearchMessagesTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,8 @@

<script setup lang="ts">
import debounce from 'debounce'
import type { Emitter } from 'mitt'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref, watch, nextTick } from 'vue'
import type { Route } from 'vue-router'
import { useRouter } from 'vue-router/composables'

import IconCalendarRange from 'vue-material-design-icons/CalendarRange.vue'
import IconFilter from 'vue-material-design-icons/Filter.vue'
Expand All @@ -31,9 +29,10 @@ import AvatarWrapper from '../../AvatarWrapper/AvatarWrapper.vue'
import SearchBox from '../../UIShared/SearchBox.vue'
import TransitionWrapper from '../../UIShared/TransitionWrapper.vue'

import { useIsInCall } from '../../../composables/useIsInCall.js'
import { useStore } from '../../../composables/useStore.js'
import { searchMessages } from '../../../services/coreService.ts'
import { EventBus } from '../../../services/EventBus.ts'
import { searchMessages } from '../../../services/messagesService.ts'
import CancelableRequest from '../../../utils/cancelableRequest.js'

type UserFilterObject = {
Expand Down Expand Up @@ -61,15 +60,12 @@ type MessageSearchResultEntry = {
icon: string
rounded: boolean
attributes: MessageSearchResultAttributes
to: Route
}

type Events = {
'route-change': { from: Route; to: Route }
}

type ExtendedEmitter = Emitter<Events>

const typedEventBus = EventBus as ExtendedEmitter
const emit = defineEmits<{
(event: 'close'): void
}>()

const searchBox = ref(null)
const isFocused = ref(false)
Expand All @@ -84,8 +80,8 @@ const searchDetailsOpened = ref(false)
const isFetchingResults = ref(false)
const isSearchExhausted = ref(false)

const router = useRouter()
const store = useStore()
const isInCall = useIsInCall()

const token = computed(() => store.getters.getToken())
const participantsInitialised = computed(() => store.getters.participantsInitialised(token.value))
Expand All @@ -104,22 +100,18 @@ const canLoadMore = computed(() => !isSearchExhausted.value && !isFetchingResult
const hasFilter = computed(() => fromUser.value || sinceDate.value || untilDate.value)

onMounted(() => {
typedEventBus.on('route-change', onRouteChange)
EventBus.on('route-change', onRouteChange)
})

onBeforeUnmount(() => {
typedEventBus.off('route-change', onRouteChange)
EventBus.off('route-change', onRouteChange)
abortSearch()
})

const onRouteChange = ({ from, to }: { from: Route, to: Route }): void => {
if (from.name === 'conversation'
&& to.name === 'conversation'
&& from.params.token === to.params.token) {
return
}
if (to.name === 'conversation') {
if (to.name !== 'conversation' || from.params.token !== to.params.token || (to.hash && isInCall.value)) {
abortSearch()
emit('close')
}
}

Expand Down Expand Up @@ -214,7 +206,20 @@ async function fetchSearchResults(isNew = true) {
}
}

searchResults.value = searchResults.value.concat(entries)
searchResults.value = searchResults.value.concat(entries.map((entry : Omit<MessageSearchResultEntry, 'to'>) => {
return {
...entry,
to: {
name: 'conversation',
hash: `#message_${entry.attributes.messageId}`,
params: {
token: entry.attributes.conversation,
skipLeaveWarning: true
}
}
}
})
)
}
} catch (exception) {
if (CancelableRequest.isCancel(exception)) {
Expand All @@ -227,20 +232,6 @@ async function fetchSearchResults(isNew = true) {
}
}

/**
* Search result on click handler
* @param attributes Attributes from message search results
*/
function onClickMessageSearchResult(attributes: MessageSearchResultAttributes) {
router.push({
name: 'conversation',
hash: `#message_${attributes.messageId}`,
params: {
token: attributes.conversation,
},
}).catch(err => console.debug(`Error while pushing the new conversation's route: ${err}`))
}

const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
</script>

Expand Down Expand Up @@ -337,8 +328,8 @@ const debounceFetchSearchResults = debounce(fetchNewSearchResult, 250)
:key="`message_${item.attributes.messageId}`"
:data-nav-id="`message_${item.attributes.messageId}`"
:name="item.title"
:v-tooltip="item.subline"
@click="onClickMessageSearchResult(item.attributes)">
:to="item.to"
:v-tooltip="item.subline">
<template #icon>
<AvatarWrapper :id="item.attributes.actorId"
:name="item.title"
Expand Down
17 changes: 17 additions & 0 deletions src/services/coreService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ type SearchPayload = {
forceTypes?: typeof SHARE.TYPE[keyof typeof SHARE.TYPE][]
}

type SearchMessagePayload = {
term: string,
person?: string,
since?: string,
until?: string,
cursor?: number,
limit?: number,
conversation?: string }

/**
* Fetch possible conversations
*
Expand Down Expand Up @@ -63,8 +72,16 @@ const deleteTaskById = async function(id: number, options?: object): Promise<nul
return axios.delete(generateOcsUrl('taskprocessing/task/{id}', { id }), options)
}

const searchMessages = async function(params: SearchMessagePayload, options: object) {
return axios.get(generateOcsUrl('search/providers/talk-message/search'), {
...options,
params,
}).catch(() => {})
}

export {
autocompleteQuery,
getTaskById,
deleteTaskById,
searchMessages,
}
9 changes: 0 additions & 9 deletions src/services/messagesService.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ type PostNewMessagePayload = Omit<postNewMessageParams, 'replyTo'> & { token: st
type PostNewMessageOptions = Pick<postNewMessageParams, 'silent'> & object
type DeleteMessagePayload = { token: string, id: number }
type EditMessagePayload = { token: string, messageId: number, updatedMessage: editMessageParams['message'] }
type SearchMessagePayload = { term: string, person?: string, since?: string, until?: string, cursor?: number, limit?: number, conversation?: string }

/**
* Fetches messages that belong to a particular conversation
Expand Down Expand Up @@ -225,13 +224,6 @@ const summarizeChat = async function(token: string, fromMessageId: summarizeChat
} as summarizeChatParams, options)
}

const searchMessages = async function(params: SearchMessagePayload, options: object) {
return axios.get(generateOcsUrl('search/providers/talk-message/search'), {
...options,
params,
}).catch(() => {})
}

export {
fetchMessages,
lookForNewMessages,
Expand All @@ -244,5 +236,4 @@ export {
updateLastReadMessage,
setConversationUnread,
summarizeChat,
searchMessages,
}

0 comments on commit 22cc5f2

Please sign in to comment.