LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update chat list header UI (#10573)

Browse Source
This commit is contained in:
Sivin Varghese
2024-12-12 10:12:07 +05:30
committed by GitHub
parent 86d37622c8
commit 757fac79d1
9 changed files with 161 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/components/ChatList.vue
View File

@@ -794,6 +794,7 @@ watch(conversationFilters, (newVal, oldVal) => {
:has-applied-filters="hasAppliedFilters"
:has-active-folders="hasActiveFolders"
:active-status="activeStatus"
:is-on-expanded-layout="isOnExpandedLayout"
@add-folders="onClickOpenAddFoldersModal"
@delete-folders="onClickOpenDeleteFoldersModal"
@filters-modal="onToggleAdvanceFiltersModal"
@@ -823,6 +824,7 @@ watch(conversationFilters, (newVal, oldVal) => {
v-if="!hasAppliedFiltersOrActiveFolders"
:items="assigneeTabItems"
:active-tab="activeAssigneeTab"
is-compact
@chat-tab-change="updateAssigneeTab"
/>

123
app/javascript/dashboard/components/ChatListHeader.vue
View File

@@ -1,6 +1,13 @@
<script setup>
import { computed } from 'vue';
import { useUISettings } from 'dashboard/composables/useUISettings';
import { useMapGetter } from 'dashboard/composables/store.js';
import wootConstants from 'dashboard/constants/globals';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
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: {
@@ -19,6 +26,10 @@ const props = defineProps({
type: String,
required: true,
},
isOnExpandedLayout: {
type: Boolean,
required: true,
},
});
const emit = defineEmits([
@@ -29,6 +40,13 @@ const emit = defineEmits([
'filtersModal',
]);
const { uiSettings, updateUISettings } = useUISettings();
const currentAccountId = useMapGetter('getCurrentAccountId');
const isFeatureEnabledonAccount = useMapGetter(
'accounts/isFeatureEnabledonAccount'
);
const onBasicFilterChange = (value, type) => {
emit('basicFilterChange', value, type);
};
@@ -36,26 +54,48 @@ const onBasicFilterChange = (value, type) => {
const hasAppliedFiltersOrActiveFolders = computed(() => {
return props.hasAppliedFilters || props.hasActiveFolders;
});
const showV4View = computed(() => {
return isFeatureEnabledonAccount.value(
currentAccountId.value,
FEATURE_FLAGS.CHATWOOT_V4
);
});
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 px-4 py-0"
class="flex items-center justify-between px-4 pb-0"
:class="{
'pb-3 border-b border-slate-75 dark:border-slate-700':
hasAppliedFiltersOrActiveFolders,
'pb-3 border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
'pt-2.5': showV4View,
}"
>
<div class="flex max-w-[85%] justify-center items-center">
<h1
class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
class="text-lg font-medium break-words truncate text-n-slate-12"
:title="pageTitle"
>
{{ pageTitle }}
</h1>
<span
v-if="!hasAppliedFiltersOrActiveFolders"
class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12"
>
{{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
</span>
@@ -63,67 +103,82 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
<div class="flex items-center gap-1">
<template v-if="hasAppliedFilters && !hasActiveFolders">
<div class="relative">
<woot-button
<NextButton
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
size="tiny"
variant="smooth"
color-scheme="secondary"
icon="save"
icon="i-lucide-save"
slate
xs
faded
@click="emit('addFolders')"
/>
<div id="saveFilterTeleportTarget" class="absolute mt-2 z-40" />
<div
id="saveFilterTeleportTarget"
class="absolute z-40 mt-2"
:class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
/>
</div>
<woot-button
<NextButton
v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
size="tiny"
variant="smooth"
color-scheme="alert"
icon="dismiss-circle"
icon="i-lucide-circle-x"
ruby
faded
xs
@click="emit('resetFilters')"
/>
</template>
<template v-if="hasActiveFolders">
<div class="relative">
<woot-button
<NextButton
id="toggleConversationFilterButton"
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
size="tiny"
variant="smooth"
color-scheme="secondary"
icon="edit"
icon="i-lucide-pen-line"
slate
xs
faded
@click="emit('filtersModal')"
/>
<div
id="conversationFilterTeleportTarget"
class="absolute mt-2 z-40"
class="absolute z-40 mt-2"
:class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
/>
</div>
<woot-button
<NextButton
id="toggleConversationFilterButton"
v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
size="tiny"
variant="smooth"
color-scheme="alert"
icon="delete"
icon="i-lucide-trash-2"
ruby
xs
faded
@click="emit('deleteFolders')"
/>
</template>
<div v-else class="relative">
<woot-button
<NextButton
id="toggleConversationFilterButton"
v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
variant="smooth"
color-scheme="secondary"
icon="filter"
size="tiny"
icon="i-lucide-list-filter"
slate
xs
faded
@click="emit('filtersModal')"
/>
<div id="conversationFilterTeleportTarget" class="absolute mt-2 z-40" />
<div
id="conversationFilterTeleportTarget"
class="absolute z-40 mt-2"
:class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
/>
</div>
<ConversationBasicFilter
v-if="!hasAppliedFiltersOrActiveFolders"
:is-on-expanded-layout="isOnExpandedLayout"
@change-filter="onBasicFilterChange"
/>
<SwitchLayout
v-if="showV4View"
:is-on-expanded-layout="isOnExpandedLayout"
@toggle="toggleConversationLayout"
/>
</div>
</div>
</template>

9
app/javascript/dashboard/components/ui/Tabs/Tabs.vue
View File

@@ -11,6 +11,10 @@ const props = defineProps({
type: Boolean,
default: true,
},
isCompact: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['change']);
@@ -59,7 +63,10 @@ onMounted(() => {
<template>
<div
:class="{ 'tabs--container--with-border': border }"
:class="{
'tabs--container--with-border': border,
'tabs--container--compact': isCompact,
}"
class="tabs--container"
>
<button

35
app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue
View File

@@ -3,6 +3,7 @@ import wootConstants from 'dashboard/constants/globals';
import { mapGetters } from 'vuex';
import FilterItem from './FilterItem.vue';
import { useUISettings } from 'dashboard/composables/useUISettings';
import NextButton from 'dashboard/components-next/button/Button.vue';
const CHAT_STATUS_FILTER_ITEMS = Object.freeze([
'open',
@@ -26,6 +27,13 @@ const SORT_ORDER_ITEMS = Object.freeze([
export default {
components: {
FilterItem,
NextButton,
},
props: {
isOnExpandedLayout: {
type: Boolean,
required: true,
},
},
emits: ['changeFilter'],
setup() {
@@ -85,22 +93,25 @@ export default {
<template>
<div class="relative flex">
<woot-button
<NextButton
v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
variant="smooth"
size="tiny"
color-scheme="secondary"
class="selector-button"
icon="sort-icon"
icon="i-lucide-arrow-up-down"
slate
faded
xs
@click="toggleDropdown"
/>
<div
v-if="showActionsDropdown"
v-on-clickaway="closeDropdown"
class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
class="mt-1 dropdown-pane dropdown-pane--open !w-52 !p-4 top-6 border !border-n-weak dark:!border-n-weak !bg-n-alpha-3 dark:!bg-n-alpha-3 backdrop-blur-[100px]"
:class="{
'ltr:left-0 rtl:right-0': !isOnExpandedLayout,
'ltr:right-0 rtl:left-0': isOnExpandedLayout,
}"
>
<div class="flex items-center justify-between last:mt-4">
<span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
<span class="text-xs font-medium text-n-slate-12">{{
$t('CHAT_LIST.CHAT_SORT.STATUS')
}}</span>
<FilterItem
@@ -112,7 +123,7 @@ export default {
/>
</div>
<div class="flex items-center justify-between last:mt-4">
<span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
<span class="text-xs font-medium text-n-slate-12">{{
$t('CHAT_LIST.CHAT_SORT.ORDER_BY')
}}</span>
<FilterItem
@@ -126,9 +137,3 @@ export default {
</div>
</div>
</template>
<style lang="scss" scoped>
.basic-filter {
@apply w-52 p-4 top-6;
}
</style>

2
app/javascript/dashboard/components/widgets/conversation/FilterItem.vue
View File

@@ -40,7 +40,7 @@ export default {
<template>
<select
v-model="activeValue"
class="bg-slate-25 dark:bg-slate-700 text-xs h-6 my-0 mx-1 py-0 pr-6 pl-2 w-32 border border-solid border-slate-75 dark:border-slate-600 text-slate-800 dark:text-slate-100"
class="w-32 h-6 py-0 pl-2 pr-6 mx-1 my-0 text-xs border border-solid bg-n-slate-3 dark:bg-n-solid-3 border-n-weak dark:border-n-weak text-n-slate-12"
@change="onTabChange()"
>
<option v-for="value in items" :key="value" :value="value">