From 7ada896b7166eacc5fd386abfaff99e6d5b10a97 Mon Sep 17 00:00:00 2001 From: RitvikSardana Date: Sat, 28 Sep 2024 03:52:23 +0530 Subject: [PATCH 01/50] feat: new customer portal --- desk/src/pages/CustomerPortalRoot.vue | 28 +++++++++++++++++++++++++++ desk/src/router/index.js | 9 ++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 desk/src/pages/CustomerPortalRoot.vue diff --git a/desk/src/pages/CustomerPortalRoot.vue b/desk/src/pages/CustomerPortalRoot.vue new file mode 100644 index 000000000..1f65e6c15 --- /dev/null +++ b/desk/src/pages/CustomerPortalRoot.vue @@ -0,0 +1,28 @@ + + + diff --git a/desk/src/router/index.js b/desk/src/router/index.js index 14fc8bf62..980f734e4 100644 --- a/desk/src/router/index.js +++ b/desk/src/router/index.js @@ -30,6 +30,12 @@ export const KB_PUBLIC_CATEGORY = "KBCategoryPublic"; export const CUSTOMER_PORTAL_LANDING = "TicketsCustomer"; export const AGENT_PORTAL_LANDING = AGENT_PORTAL_TICKET_LIST; export const REDIRECT_PAGE = "/login?redirect-to=/helpdesk"; + +export const CUSTOMER_PORTAL_ROUTES = [ + "TicketsCustomer", + "TicketNew", + "TicketCustomer", +]; const routes = [ { path: "", @@ -63,7 +69,8 @@ const routes = [ }, { path: "/my-tickets", - component: () => import("@/pages/CLayout.vue"), + // component: () => import("@/pages/CLayout.vue"), // old customer portal + component: () => import("@/pages/CustomerPortalRoot.vue"), // new customer portal meta: { auth: true, }, From 6d9aa07fe6e0421018df9e750869747f01da0f83 Mon Sep 17 00:00:00 2001 From: RitvikSardana Date: Sat, 28 Sep 2024 03:52:42 +0530 Subject: [PATCH 02/50] fix: show sidebar options according to the route --- desk/src/components/layouts/Sidebar.vue | 57 +++++++++++++++++++++---- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue index b8b6a689b..a0b4ec1cf 100644 --- a/desk/src/components/layouts/Sidebar.vue +++ b/desk/src/components/layouts/Sidebar.vue @@ -8,6 +8,7 @@ > - +
- +
[ +const isCustomerPortal = computed(() => + CUSTOMER_PORTAL_ROUTES.includes(route.name) +); + +const agentPortalSidebarOptions = computed(() => [ { label: "Tickets", icon: LucideTicket, @@ -144,10 +150,34 @@ const menuOptions = computed(() => [ }, ]); -function isActiveTab(to: string) { - return route.name === to; -} -const profileSettings = [ +const customperPortalSidebarOptions = computed(() => [ + { + label: "Tickets", + icon: LucideTicket, + to: "TicketsCustomer", + }, + { + label: "Knowledge base", + icon: LucideBookOpen, + to: "KBHome", + }, +]); + +const menuOptions = computed(() => { + return isCustomerPortal.value + ? customperPortalSidebarOptions.value + : agentPortalSidebarOptions.value; +}); + +const customerPortalDropdown = computed(() => [ + { + label: "Log out", + icon: "log-out", + onClick: () => authStore.logout(), + }, +]); + +const agentPortalDropdown = computed(() => [ { component: markRaw(Apps), }, @@ -173,14 +203,23 @@ const profileSettings = [ label: "Settings", icon: "settings", onClick: () => (showSettingsModal.value = true), - condition: () => authStore.isAdmin, }, { label: "Log out", icon: "log-out", onClick: () => authStore.logout(), }, -]; +]); + +const profileSettings = computed(() => { + return isCustomerPortal.value + ? customerPortalDropdown.value + : agentPortalDropdown.value; +}); + +function isActiveTab(to: string) { + return route.name === to; +} function openCommandPalette() { window.dispatchEvent( From 9fa4298c4c11057aa54c1ca80a73381ae7ca77ca Mon Sep 17 00:00:00 2001 From: RitvikSardana Date: Sat, 28 Sep 2024 04:29:58 +0530 Subject: [PATCH 03/50] fix: customer portal sidebar options in mobile view --- desk/src/components/layouts/MobileSidebar.vue | 81 +++++++------------ desk/src/components/layouts/Sidebar.vue | 77 ++---------------- desk/src/components/layouts/layoutSettings.ts | 65 +++++++++++++++ 3 files changed, 99 insertions(+), 124 deletions(-) create mode 100644 desk/src/components/layouts/layoutSettings.ts diff --git a/desk/src/components/layouts/MobileSidebar.vue b/desk/src/components/layouts/MobileSidebar.vue index 17d514a0b..bc89c8a43 100644 --- a/desk/src/components/layouts/MobileSidebar.vue +++ b/desk/src/components/layouts/MobileSidebar.vue @@ -80,72 +80,39 @@ import SidebarLink from "@/components/SidebarLink.vue"; import { useNotificationStore } from "@/stores/notification"; import { mobileSidebarOpened as sidebarOpened } from "@/composables/mobile"; - -import LucideBookOpen from "~icons/lucide/book-open"; -import LucideCloudLightning from "~icons/lucide/cloud-lightning"; -import LucideContact2 from "~icons/lucide/contact-2"; -import LucideTicket from "~icons/lucide/ticket"; -import LucideUser from "~icons/lucide/user"; -import LucideUserCircle2 from "~icons/lucide/user-circle-2"; -import LucideUsers from "~icons/lucide/users"; import LucideBell from "~icons/lucide/bell"; -import { - AGENT_PORTAL_AGENT_LIST, - AGENT_PORTAL_CONTACT_LIST, - AGENT_PORTAL_CUSTOMER_LIST, - AGENT_PORTAL_TEAM_LIST, - AGENT_PORTAL_TICKET_LIST, - CUSTOMER_PORTAL_LANDING, -} from "@/router"; +import { CUSTOMER_PORTAL_LANDING, CUSTOMER_PORTAL_ROUTES } from "@/router"; import Apps from "../Apps.vue"; +import { + agentPortalSidebarOptions, + customerPortalSidebarOptions, +} from "./layoutSettings"; import { useAuthStore } from "@/stores/auth"; const notificationStore = useNotificationStore(); const route = useRoute(); const router = useRouter(); +const authStore = useAuthStore(); +const isCustomerPortal = computed(() => + CUSTOMER_PORTAL_ROUTES.includes(route.name) +); -const menuOptions = computed(() => [ - { - label: "Tickets", - icon: LucideTicket, - to: AGENT_PORTAL_TICKET_LIST, - }, - { - label: "Agents", - icon: LucideUser, - to: AGENT_PORTAL_AGENT_LIST, - }, - { - label: "Knowledge base", - icon: LucideBookOpen, - to: "DeskKBHome", - }, - { - label: "Teams", - icon: LucideUsers, - to: AGENT_PORTAL_TEAM_LIST, - }, - { - label: "Canned responses", - icon: LucideCloudLightning, - to: "CannedResponses", - }, - { - label: "Customers", - icon: LucideUserCircle2, - to: AGENT_PORTAL_CUSTOMER_LIST, - }, +const menuOptions = computed(() => { + return isCustomerPortal.value + ? customerPortalSidebarOptions + : agentPortalSidebarOptions; +}); + +const customerPortalDropdown = computed(() => [ { - label: "Contacts", - icon: LucideContact2, - to: AGENT_PORTAL_CONTACT_LIST, + label: "Log out", + icon: "log-out", + onClick: () => authStore.logout(), }, ]); -const authStore = useAuthStore(); - -const profileSettings = [ +const agentPortalDropdown = computed(() => [ { component: markRaw(Apps), }, @@ -172,7 +139,13 @@ const profileSettings = [ icon: "log-out", onClick: () => authStore.logout(), }, -]; +]); + +const profileSettings = computed(() => { + return isCustomerPortal.value + ? customerPortalDropdown.value + : agentPortalDropdown.value; +}); function isActiveTab(to: string) { return route.name === to; diff --git a/desk/src/components/layouts/Sidebar.vue b/desk/src/components/layouts/Sidebar.vue index a0b4ec1cf..feea230c7 100644 --- a/desk/src/components/layouts/Sidebar.vue +++ b/desk/src/components/layouts/Sidebar.vue @@ -74,31 +74,20 @@ import { storeToRefs } from "pinia"; import { useAuthStore } from "@/stores/auth"; import { useNotificationStore } from "@/stores/notification"; import { useSidebarStore } from "@/stores/sidebar"; -import { - AGENT_PORTAL_AGENT_LIST, - AGENT_PORTAL_CONTACT_LIST, - AGENT_PORTAL_CUSTOMER_LIST, - AGENT_PORTAL_TEAM_LIST, - AGENT_PORTAL_TICKET_LIST, - CUSTOMER_PORTAL_LANDING, - CUSTOMER_PORTAL_ROUTES, -} from "@/router"; +import { CUSTOMER_PORTAL_LANDING, CUSTOMER_PORTAL_ROUTES } from "@/router"; import { useDevice } from "@/composables"; import { SidebarLink } from "@/components"; import UserMenu from "@/components/UserMenu.vue"; import LucideArrowLeftFromLine from "~icons/lucide/arrow-left-from-line"; import LucideArrowRightFromLine from "~icons/lucide/arrow-right-from-line"; -import LucideBookOpen from "~icons/lucide/book-open"; -import LucideCloudLightning from "~icons/lucide/cloud-lightning"; -import LucideContact2 from "~icons/lucide/contact-2"; import LucideBell from "~icons/lucide/bell"; -import LucideTicket from "~icons/lucide/ticket"; -import LucideUser from "~icons/lucide/user"; -import LucideUserCircle2 from "~icons/lucide/user-circle-2"; -import LucideUsers from "~icons/lucide/users"; import LucideSearch from "~icons/lucide/search"; import SettingsModal from "@/components/Settings/SettingsModal.vue"; import Apps from "@/components/Apps.vue"; +import { + agentPortalSidebarOptions, + customerPortalSidebarOptions, +} from "./layoutSettings"; const route = useRoute(); const router = useRouter(); @@ -107,66 +96,14 @@ const notificationStore = useNotificationStore(); const { isExpanded, width } = storeToRefs(useSidebarStore()); const device = useDevice(); const showSettingsModal = ref(false); - const isCustomerPortal = computed(() => CUSTOMER_PORTAL_ROUTES.includes(route.name) ); -const agentPortalSidebarOptions = computed(() => [ - { - label: "Tickets", - icon: LucideTicket, - to: AGENT_PORTAL_TICKET_LIST, - }, - { - label: "Agents", - icon: LucideUser, - to: AGENT_PORTAL_AGENT_LIST, - }, - { - label: "Knowledge base", - icon: LucideBookOpen, - to: "DeskKBHome", - }, - { - label: "Teams", - icon: LucideUsers, - to: AGENT_PORTAL_TEAM_LIST, - }, - { - label: "Canned responses", - icon: LucideCloudLightning, - to: "CannedResponses", - }, - { - label: "Customers", - icon: LucideUserCircle2, - to: AGENT_PORTAL_CUSTOMER_LIST, - }, - { - label: "Contacts", - icon: LucideContact2, - to: AGENT_PORTAL_CONTACT_LIST, - }, -]); - -const customperPortalSidebarOptions = computed(() => [ - { - label: "Tickets", - icon: LucideTicket, - to: "TicketsCustomer", - }, - { - label: "Knowledge base", - icon: LucideBookOpen, - to: "KBHome", - }, -]); - const menuOptions = computed(() => { return isCustomerPortal.value - ? customperPortalSidebarOptions.value - : agentPortalSidebarOptions.value; + ? customerPortalSidebarOptions + : agentPortalSidebarOptions; }); const customerPortalDropdown = computed(() => [ diff --git a/desk/src/components/layouts/layoutSettings.ts b/desk/src/components/layouts/layoutSettings.ts new file mode 100644 index 000000000..b2ddeae63 --- /dev/null +++ b/desk/src/components/layouts/layoutSettings.ts @@ -0,0 +1,65 @@ +import LucideBookOpen from "~icons/lucide/book-open"; +import LucideCloudLightning from "~icons/lucide/cloud-lightning"; +import LucideContact2 from "~icons/lucide/contact-2"; +import LucideTicket from "~icons/lucide/ticket"; +import LucideUser from "~icons/lucide/user"; +import LucideUserCircle2 from "~icons/lucide/user-circle-2"; +import LucideUsers from "~icons/lucide/users"; +import { + AGENT_PORTAL_AGENT_LIST, + AGENT_PORTAL_CONTACT_LIST, + AGENT_PORTAL_CUSTOMER_LIST, + AGENT_PORTAL_TEAM_LIST, + AGENT_PORTAL_TICKET_LIST, +} from "@/router"; + +export const agentPortalSidebarOptions = [ + { + label: "Tickets", + icon: LucideTicket, + to: AGENT_PORTAL_TICKET_LIST, + }, + { + label: "Agents", + icon: LucideUser, + to: AGENT_PORTAL_AGENT_LIST, + }, + { + label: "Knowledge base", + icon: LucideBookOpen, + to: "DeskKBHome", + }, + { + label: "Teams", + icon: LucideUsers, + to: AGENT_PORTAL_TEAM_LIST, + }, + { + label: "Canned responses", + icon: LucideCloudLightning, + to: "CannedResponses", + }, + { + label: "Customers", + icon: LucideUserCircle2, + to: AGENT_PORTAL_CUSTOMER_LIST, + }, + { + label: "Contacts", + icon: LucideContact2, + to: AGENT_PORTAL_CONTACT_LIST, + }, +]; + +export const customerPortalSidebarOptions = [ + { + label: "Tickets", + icon: LucideTicket, + to: "TicketsCustomer", + }, + { + label: "Knowledge base", + icon: LucideBookOpen, + to: "KBHome", + }, +]; From 54266a79ccbd8c0966dd56b414b0b864fbf04dfd Mon Sep 17 00:00:00 2001 From: RitvikSardana Date: Sun, 29 Sep 2024 19:01:15 +0530 Subject: [PATCH 04/50] feat(listview): add new customer portal ticket list view --- .../components/ticket/TicketsAgentList.vue | 6 +- desk/src/pages/TicketsAgent.vue | 32 ++++++++--- desk/src/pages/TicketsCustomer.vue | 55 +++++++------------ 3 files changed, 49 insertions(+), 44 deletions(-) diff --git a/desk/src/components/ticket/TicketsAgentList.vue b/desk/src/components/ticket/TicketsAgentList.vue index 0f6491b72..a4ef6c1f8 100644 --- a/desk/src/components/ticket/TicketsAgentList.vue +++ b/desk/src/components/ticket/TicketsAgentList.vue @@ -99,7 +99,7 @@ - +