135 lines
3.2 KiB
Vue
135 lines
3.2 KiB
Vue
<script setup>
|
|
import { ref, computed, watch, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useStore } from 'vuex';
|
|
import { useMapGetter } from 'dashboard/composables/store';
|
|
import ConversationHeader from './ConversationHeader.vue';
|
|
import DashboardAppFrame from '../DashboardApp/Frame.vue';
|
|
import EmptyState from './EmptyState/EmptyState.vue';
|
|
import MessagesView from './MessagesView.vue';
|
|
|
|
defineProps({
|
|
inboxId: {
|
|
type: [Number, String],
|
|
default: '',
|
|
required: false,
|
|
},
|
|
isInboxView: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isOnExpandedLayout: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const { t } = useI18n();
|
|
const store = useStore();
|
|
|
|
const currentChat = useMapGetter('getSelectedChat');
|
|
const dashboardApps = useMapGetter('dashboardApps/getRecords');
|
|
|
|
const activeIndex = ref(0);
|
|
|
|
const dashboardAppTabs = computed(() => [
|
|
{
|
|
key: 'messages',
|
|
index: 0,
|
|
name: t('CONVERSATION.DASHBOARD_APP_TAB_MESSAGES'),
|
|
},
|
|
...dashboardApps.value.map((dashboardApp, index) => ({
|
|
key: `dashboard-${dashboardApp.id}`,
|
|
index: index + 1,
|
|
name: dashboardApp.title,
|
|
})),
|
|
]);
|
|
|
|
const fetchLabels = () => {
|
|
if (!currentChat.value.id) {
|
|
return;
|
|
}
|
|
store.dispatch('conversationLabels/get', currentChat.value.id);
|
|
};
|
|
|
|
const onDashboardAppTabChange = index => {
|
|
activeIndex.value = index;
|
|
};
|
|
|
|
watch(
|
|
() => currentChat.value.inbox_id,
|
|
inboxId => {
|
|
if (inboxId) {
|
|
store.dispatch('inboxAssignableAgents/fetch', [inboxId]);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => currentChat.value.id,
|
|
() => {
|
|
fetchLabels();
|
|
activeIndex.value = 0;
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
fetchLabels();
|
|
store.dispatch('dashboardApps/get');
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="conversation-details-wrap flex flex-col min-w-0 w-full bg-n-surface-1 relative"
|
|
:class="{
|
|
'border-l rtl:border-l-0 rtl:border-r border-n-weak': !isOnExpandedLayout,
|
|
}"
|
|
>
|
|
<ConversationHeader
|
|
v-if="currentChat.id"
|
|
:chat="currentChat"
|
|
:is-on-expanded-view="isOnExpandedLayout"
|
|
:show-back-button="isOnExpandedLayout && !isInboxView"
|
|
:class="{ 'border-b border-n-weak !pb-3': !dashboardApps.length }"
|
|
/>
|
|
<woot-tabs
|
|
v-if="dashboardApps.length && currentChat.id"
|
|
:index="activeIndex"
|
|
class="h-10"
|
|
@change="onDashboardAppTabChange"
|
|
>
|
|
<woot-tabs-item
|
|
v-for="tab in dashboardAppTabs"
|
|
:key="tab.key"
|
|
:index="tab.index"
|
|
:name="tab.name"
|
|
:show-badge="false"
|
|
is-compact
|
|
/>
|
|
</woot-tabs>
|
|
<div v-show="!activeIndex" class="flex h-full min-h-0 m-0">
|
|
<MessagesView
|
|
v-if="currentChat.id"
|
|
:inbox-id="inboxId"
|
|
:is-inbox-view="isInboxView"
|
|
/>
|
|
<EmptyState
|
|
v-if="!currentChat.id && !isInboxView"
|
|
:is-on-expanded-layout="isOnExpandedLayout"
|
|
/>
|
|
<slot />
|
|
</div>
|
|
<DashboardAppFrame
|
|
v-for="(dashboardApp, index) in dashboardApps"
|
|
v-show="activeIndex - 1 === index"
|
|
:key="currentChat.id + '-' + dashboardApp.id"
|
|
:is-visible="activeIndex - 1 === index"
|
|
:config="dashboardApps[index].content"
|
|
:position="index"
|
|
:current-chat="currentChat"
|
|
/>
|
|
</div>
|
|
</template>
|