akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Fix sidebar

Browse Source
This commit is contained in:
iamsivin
2024-11-11 23:09:30 +05:30
parent 9210d2cecd
commit 74a90c0173
2 changed files with 111 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+109 -91
View File
@@ -7,6 +7,7 @@ import { useMapGetter } from 'dashboard/composables/store';
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import { useStorage } from '@vueuse/core';
import { FEATURE_FLAGS } from 'dashboard/featureFlags';
import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
import SidebarGroup from './SidebarGroup.vue';
@@ -59,7 +60,11 @@ provideSidebarContext({
const inboxes = useMapGetter('inboxes/getInboxes');
const labels = useMapGetter('labels/getLabelsOnSidebar');
const teams = useMapGetter('teams/getMyTeams');
const currentAccountId = useMapGetter('getCurrentAccountId');
const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
const isFeatureEnabledonAccount = useMapGetter(
'accounts/isFeatureEnabledonAccount'
);
const conversationCustomViews = useMapGetter(
'customViews/getConversationCustomViews'
);
@@ -78,6 +83,13 @@ const sortedInboxes = computed(() =>
inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
);
const showV4Feature = computed(() => {
return isFeatureEnabledonAccount.value(
currentAccountId.value,
FEATURE_FLAGS.CHATWOOT_V4
);
});
const menuItems = computed(() => {
return [
{
@@ -168,104 +180,108 @@ const menuItems = computed(() => {
label: t('SIDEBAR.CAPTAIN'),
to: accountScopedRoute('captain'),
},
{
name: 'Contacts',
label: t('SIDEBAR.CONTACTS'),
icon: 'i-lucide-contact',
activeOn: ['contacts_dashboard_index', 'contacts_dashboard_edit_index'],
children: [
{
name: 'All Contacts',
label: t('SIDEBAR.ALL_CONTACTS'),
to: accountScopedRoute('contacts_dashboard_index'),
!showV4Feature.value
? {
name: 'Contacts',
label: t('SIDEBAR.CONTACTS'),
icon: 'i-lucide-contact',
children: [
{
name: 'All Contacts',
label: t('SIDEBAR.ALL_CONTACTS'),
to: accountScopedRoute('contacts_dashboard'),
},
{
name: 'Segments',
icon: 'i-lucide-group',
label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
children: contactCustomViews.value.map(view => ({
name: `${view.name}-${view.id}`,
label: view.name,
to: accountScopedRoute('contacts_segments_dashboard', {
id: view.id,
}),
})),
},
{
name: 'Tagged With',
icon: 'i-lucide-tag',
label: t('SIDEBAR.TAGGED_WITH'),
children: labels.value.map(label => ({
name: `${label.title}-${label.id}`,
label: label.title,
icon: h('span', {
class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
style: { backgroundColor: label.color },
}),
to: accountScopedRoute('contacts_labels_dashboard', {
label: label.title,
}),
})),
},
],
}
: {
name: 'Contacts',
label: t('SIDEBAR.CONTACTS'),
icon: 'i-lucide-contact',
activeOn: [
'contacts_dashboard_index',
'contacts_dashboard_edit_index',
],
},
{
name: 'Segments',
icon: 'i-lucide-group',
label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
children: [
{
name: 'All Contacts',
label: t('SIDEBAR.ALL_CONTACTS'),
to: accountScopedRoute('contacts_dashboard_index'),
activeOn: [
'contacts_dashboard_index',
'contacts_dashboard_edit_index',
],
},
{
name: 'Segments',
icon: 'i-lucide-group',
label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
children: contactCustomViews.value.map(view => ({
name: `${view.name}-${view.id}`,
label: view.name,
to: accountScopedRoute('contacts_dashboard_segments_index', {
segmentId: view.id,
}),
activeOn: [
'contacts_dashboard_segments_index',
'contacts_dashboard_segments_edit_index',
],
})),
},
{
name: 'Tagged With',
icon: 'i-lucide-tag',
label: t('SIDEBAR.TAGGED_WITH'),
activeOn: [
'contacts_dashboard_labels_index',
'contacts_dashboard_labels_edit_index',
children: contactCustomViews.value.map(view => ({
name: `${view.name}-${view.id}`,
label: view.name,
to: accountScopedRoute('contacts_dashboard_segments_index', {
segmentId: view.id,
}),
activeOn: [
'contacts_dashboard_segments_index',
'contacts_dashboard_segments_edit_index',
],
})),
},
{
name: 'Tagged With',
icon: 'i-lucide-tag',
label: t('SIDEBAR.TAGGED_WITH'),
activeOn: [
'contacts_dashboard_labels_index',
'contacts_dashboard_labels_edit_index',
],
children: labels.value.map(label => ({
name: `${label.title}-${label.id}`,
label: label.title,
icon: h('span', {
class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
style: { backgroundColor: label.color },
}),
to: accountScopedRoute('contacts_dashboard_labels_index', {
label: label.title,
}),
activeOn: [
'contacts_dashboard_labels_index',
'contacts_dashboard_labels_edit_index',
],
})),
},
],
children: labels.value.map(label => ({
name: `${label.title}-${label.id}`,
label: label.title,
icon: h('span', {
class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
style: { backgroundColor: label.color },
}),
to: accountScopedRoute('contacts_dashboard_labels_index', {
label: label.title,
}),
activeOn: [
'contacts_dashboard_labels_index',
'contacts_dashboard_labels_edit_index',
],
})),
},
],
},
{
name: 'Contacts',
label: t('SIDEBAR.CONTACTS'),
icon: 'i-lucide-contact',
children: [
{
name: 'All Contacts',
label: t('SIDEBAR.ALL_CONTACTS'),
to: accountScopedRoute('contacts_dashboard'),
},
{
name: 'Segments',
icon: 'i-lucide-group',
label: t('SIDEBAR.CUSTOM_VIEWS_SEGMENTS'),
children: contactCustomViews.value.map(view => ({
name: `${view.name}-${view.id}`,
label: view.name,
to: accountScopedRoute('contacts_segments_dashboard', {
id: view.id,
}),
})),
},
{
name: 'Tagged With',
icon: 'i-lucide-tag',
label: t('SIDEBAR.TAGGED_WITH'),
children: labels.value.map(label => ({
name: `${label.title}-${label.id}`,
label: label.title,
icon: h('span', {
class: `size-[12px] ring-1 ring-n-alpha-1 dark:ring-white/20 ring-inset rounded-sm`,
style: { backgroundColor: label.color },
}),
to: accountScopedRoute('contacts_labels_dashboard', {
label: label.title,
}),
})),
},
],
},
{
name: 'Reports',
label: t('SIDEBAR.REPORTS'),
@@ -493,6 +509,8 @@ const menuItems = computed(() => {
},
];
});
console.log(menuItems.value);
</script>
<template>
app/javascript/dashboard/i18n/locale/en/contact.json
+2 -2
View File
@@ -582,8 +582,8 @@
}
},
"EMPTY_STATE": {
"TITLE": "Your contacts list is empty",
"SUBTITLE": "Start building your customer relationships by adding contacts or importing them from your existing database.",
"TITLE": "No contacts found in this account",
"SUBTITLE": "Start adding new contacts by clicking on the button below",
"BUTTON_LABEL": "Add contact",
"SEARCH_EMPTY_STATE_TITLE": "No contacts found"
}