122 lines
4.3 KiB
Vue
122 lines
4.3 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useUISettings } from 'dashboard/composables/useUISettings';
|
|
import { formatNumber } from '@chatwoot/utils';
|
|
import wootConstants from 'dashboard/constants/globals';
|
|
|
|
import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
|
|
import SwitchLayout from 'dashboard/routes/dashboard/conversation/search/SwitchLayout.vue';
|
|
import NextButton from 'dashboard/components-next/button/Button.vue';
|
|
|
|
const props = defineProps({
|
|
pageTitle: { type: String, required: true },
|
|
hasAppliedFilters: { type: Boolean, required: true },
|
|
hasActiveFolders: { type: Boolean, required: true },
|
|
activeStatus: { type: String, required: true },
|
|
isOnExpandedLayout: { type: Boolean, required: true },
|
|
conversationStats: { type: Object, required: true },
|
|
isListLoading: { type: Boolean, required: true },
|
|
isFilterModalOpen: { type: Boolean, default: false },
|
|
});
|
|
|
|
const emit = defineEmits(['basicFilterChange', 'filtersModal']);
|
|
|
|
const { uiSettings, updateUISettings } = useUISettings();
|
|
|
|
const onBasicFilterChange = (value, type) => {
|
|
emit('basicFilterChange', value, type);
|
|
};
|
|
|
|
const hasAppliedFiltersOrActiveFolders = computed(() => {
|
|
return props.hasAppliedFilters || props.hasActiveFolders;
|
|
});
|
|
|
|
const allCount = computed(() => props.conversationStats?.allCount || 0);
|
|
const formattedAllCount = computed(() => formatNumber(allCount.value));
|
|
|
|
const toggleConversationLayout = () => {
|
|
const { LAYOUT_TYPES } = wootConstants;
|
|
const {
|
|
conversation_display_type: conversationDisplayType = LAYOUT_TYPES.CONDENSED,
|
|
} = uiSettings.value;
|
|
const newViewType =
|
|
conversationDisplayType === LAYOUT_TYPES.CONDENSED
|
|
? LAYOUT_TYPES.EXPANDED
|
|
: LAYOUT_TYPES.CONDENSED;
|
|
updateUISettings({
|
|
conversation_display_type: newViewType,
|
|
previously_used_conversation_display_type: newViewType,
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-between gap-2 px-4 h-[3.25rem]">
|
|
<div class="flex items-center justify-center min-w-0">
|
|
<h1 class="text-heading-2 truncate text-n-slate-12" :title="pageTitle">
|
|
{{ pageTitle }}
|
|
</h1>
|
|
<span
|
|
v-if="
|
|
allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
|
|
"
|
|
class="px-2 py-1 my-0.5 mx-1 rounded-lg capitalize -outline-offset-1 outline outline-1 outline-n-container bg-n-button-color text-xxs text-n-slate-12 shrink-0"
|
|
:title="allCount"
|
|
>
|
|
{{ formattedAllCount }}
|
|
</span>
|
|
<span
|
|
v-if="!hasAppliedFiltersOrActiveFolders"
|
|
class="px-2 py-1 my-0.5 mx-1 rounded-lg capitalize -outline-offset-1 outline outline-1 outline-n-container bg-n-button-color text-xxs text-n-slate-12 shrink-0"
|
|
>
|
|
{{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<ConversationBasicFilter
|
|
v-if="!hasAppliedFiltersOrActiveFolders"
|
|
:is-on-expanded-layout="isOnExpandedLayout"
|
|
@change-filter="onBasicFilterChange"
|
|
/>
|
|
<template v-if="hasActiveFolders">
|
|
<div class="relative">
|
|
<NextButton
|
|
id="toggleConversationFilterButton"
|
|
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
|
|
icon="i-lucide-pen-line"
|
|
slate
|
|
sm
|
|
:variant="isFilterModalOpen ? 'faded' : 'ghost'"
|
|
@click="emit('filtersModal')"
|
|
/>
|
|
<div
|
|
id="conversationFilterTeleportTarget"
|
|
class="absolute z-50 mt-2"
|
|
:class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<div v-else class="relative">
|
|
<NextButton
|
|
id="toggleConversationFilterButton"
|
|
v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
|
|
icon="i-lucide-list-filter"
|
|
slate
|
|
sm
|
|
:variant="isFilterModalOpen ? 'faded' : 'ghost'"
|
|
@click="emit('filtersModal')"
|
|
/>
|
|
<div
|
|
id="conversationFilterTeleportTarget"
|
|
class="absolute z-50 mt-2"
|
|
:class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
|
|
/>
|
|
</div>
|
|
<SwitchLayout
|
|
:is-on-expanded-layout="isOnExpandedLayout"
|
|
@toggle="toggleConversationLayout"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|