developed
This commit is contained in:
parent
670920fe36
commit
61409dd74d
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<!-- BEGIN: Top Bar -->
|
||||
<div
|
||||
class="top-bar-boxed h-[70px] z-[51] relative border-b border-white/[0.08] mt-12 md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 md:pt-0 mb-12"
|
||||
>
|
||||
class="top-bar-boxed h-[70px] z-[51] relative border-b border-white/[0.08] mt-12 md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 md:pt-0 mb-12">
|
||||
<div class="h-full flex items-center">
|
||||
<!-- BEGIN: Logo -->
|
||||
<a href="" class="-intro-x hidden md:flex items-center">
|
||||
|
|
@ -20,29 +19,21 @@
|
|||
|
||||
<!-- BEGIN: Notifications -->
|
||||
<Dropdown class="intro-x mr-4 sm:mr-6">
|
||||
<DropdownToggle
|
||||
tag="div"
|
||||
role="button"
|
||||
class="notification cursor-pointer"
|
||||
:class="{'notification--bullet': hasMessagesFromAdmin}"
|
||||
>
|
||||
<DropdownToggle tag="div" role="button" class="notification cursor-pointer"
|
||||
:class="{'notification--bullet': hasMessagesFromAdmin}">
|
||||
<BellIcon class="notification__icon dark:text-slate-500" />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="notification-content pt-2">
|
||||
<DropdownContent tag="div" class="notification-content__box overflow-y-auto scrollbar-hidden">
|
||||
<div class="notification-content__title">Notifications</div>
|
||||
<div
|
||||
v-for="(ticket, ticketKey) in ticketList"
|
||||
:key="ticketKey"
|
||||
class="cursor-pointer relative flex items-center"
|
||||
:class="{ 'mt-5': ticketKey }"
|
||||
@click.capture="goToMessagesList(ticket.id)"
|
||||
>
|
||||
|
||||
<div v-for="(ticket, ticketKey) in ticketList" :key="ticketKey"
|
||||
class="cursor-pointer relative flex items-center" :class="{ 'mt-5': ticketKey }"
|
||||
@click.capture="goToMessagesList(ticket.id)">
|
||||
|
||||
<div class="ml-2 overflow-hidden w-full">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="#" class="font-medium truncate mr-5">{{
|
||||
ticket.title
|
||||
ticket.title
|
||||
}}</a>
|
||||
<div class="text-xs text-slate-400 ml-auto whitespace-nowrap">
|
||||
Created {{ normalizeDate(ticket.created_at) }}
|
||||
|
|
@ -52,10 +43,8 @@
|
|||
{{ ticket.content }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="ticket.last_sender === 'admin'"
|
||||
class="w-2 h-2 flex items-center justify-center absolute top-0 left-0 text-xs text-white rounded-full bg-primary font-medium -mt-1 -mr-1"
|
||||
>
|
||||
<div v-if="ticket.last_sender === 'admin'"
|
||||
class="w-2 h-2 flex items-center justify-center absolute top-0 left-0 text-xs text-white rounded-full bg-primary font-medium -mt-1 -mr-1">
|
||||
</div>
|
||||
</div>
|
||||
</DropdownContent>
|
||||
|
|
@ -67,48 +56,29 @@
|
|||
|
||||
<!-- BEGIN: Account Menu -->
|
||||
<Dropdown class="intro-x">
|
||||
<DropdownToggle
|
||||
tag="div"
|
||||
role="button"
|
||||
class="w-6 h-6 rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110"
|
||||
>
|
||||
<DropdownToggle tag="div" role="button"
|
||||
class="w-6 h-6 rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110">
|
||||
<div class="rounded-full">
|
||||
<UserIcon class="text-white" />
|
||||
</div>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu class="w-56">
|
||||
<DropdownContent
|
||||
class="bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"
|
||||
>
|
||||
class="bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white">
|
||||
<DropdownHeader tag="div" class="!font-normal">
|
||||
<div class="font-medium">
|
||||
{{ $f()[0].users[0].name }}
|
||||
</div>
|
||||
<div class="text-xs text-white/60 mt-0.5 dark:text-slate-500">
|
||||
{{ $f()[0].jobs[0] }}
|
||||
<div class="font-medium" v-if="user">
|
||||
{{ user.firstname}} {{ user.lastname }}
|
||||
</div>
|
||||
</DropdownHeader>
|
||||
<DropdownDivider class="border-white/[0.08]" />
|
||||
<DropdownItem class="dropdown-item hover:bg-white/5" @click="onProfileUpdate">
|
||||
<UserIcon class="w-4 h-4 mr-2" />Update Profile</DropdownItem
|
||||
>
|
||||
<DropdownItem class="dropdown-item hover:bg-white/5">
|
||||
<EditIcon class="w-4 h-4 mr-2" /> Add Account</DropdownItem
|
||||
>
|
||||
<DropdownItem class="dropdown-item hover:bg-white/5">
|
||||
<LockIcon class="w-4 h-4 mr-2" /> Reset Password</DropdownItem
|
||||
>
|
||||
<DropdownItem class="dropdown-item hover:bg-white/5">
|
||||
<HelpCircleIcon class="w-4 h-4 mr-2" /> Help</DropdownItem
|
||||
>
|
||||
<UserIcon class="w-4 h-4 mr-2" />Update Profile
|
||||
</DropdownItem>
|
||||
<DropdownDivider class="border-white/[0.08]" />
|
||||
<DropdownItem
|
||||
class="dropdown-item hover:bg-white/5"
|
||||
@click="onLogout"
|
||||
>
|
||||
<DropdownItem class="dropdown-item hover:bg-white/5" @click="onLogout">
|
||||
<ToggleRightIcon class="w-4 h-4 mr-2" />
|
||||
Logout</DropdownItem
|
||||
>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownContent>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
|
|
@ -130,6 +100,9 @@ import { normalizeDate } from "@/helpers";
|
|||
const ticketsStore = useTicketsStore();
|
||||
const { ticketList, hasMessagesFromAdmin } = storeToRefs(ticketsStore);
|
||||
|
||||
const authStore = useAuthStore();
|
||||
const { user } = storeToRefs(authStore);
|
||||
|
||||
const onLogout = () => {
|
||||
console.log("Logout");
|
||||
localStorage.clear();
|
||||
|
|
@ -152,7 +125,7 @@ onUnmounted(() => {
|
|||
});
|
||||
|
||||
const goToMessagesList = (ticketId) => {
|
||||
router.push({ name: "ticket-list", params: {ticketId: ticketId} });
|
||||
router.push({ name: "ticket-list", params: { ticketId: ticketId } });
|
||||
};
|
||||
|
||||
onBeforeMount(async () => {
|
||||
|
|
|
|||
|
|
@ -7,64 +7,46 @@
|
|||
<nav class="top-nav">
|
||||
<ul>
|
||||
<li v-for="(menu, menuKey) in formattedMenu" :key="menuKey">
|
||||
<a
|
||||
:href="
|
||||
menu.subMenu
|
||||
? 'javascript:;'
|
||||
: router.resolve({ name: menu.pageName }).path
|
||||
"
|
||||
class="top-menu"
|
||||
:class="{
|
||||
'top-menu--active': menu.active,
|
||||
}"
|
||||
@click="linkTo(menu, router, $event)"
|
||||
>
|
||||
<a :href="
|
||||
menu.subMenu
|
||||
? 'javascript:;'
|
||||
: router.resolve({ name: menu.pageName }).path
|
||||
" class="top-menu" :class="{
|
||||
'top-menu--active': menu.active,
|
||||
}" @click="linkTo(menu, router, $event)">
|
||||
<div class="top-menu__icon">
|
||||
<component :is="menu.icon" />
|
||||
</div>
|
||||
<div class="top-menu__title">
|
||||
{{ $t(menu.title) }}
|
||||
<ChevronDownIcon v-if="menu.subMenu" class="top-menu__sub-icon" />
|
||||
<ChevronDownIcon v-if="menu.subMenu && menu.subMenu.length" class="top-menu__sub-icon" />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- BEGIN: Second Child -->
|
||||
<ul v-if="menu.subMenu">
|
||||
<li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
|
||||
<a
|
||||
:href="
|
||||
subMenu.subMenu
|
||||
? 'javascript:;'
|
||||
: router.resolve({ name: subMenu.pageName }).path
|
||||
"
|
||||
class="top-menu"
|
||||
@click="linkTo(subMenu, router, $event)"
|
||||
>
|
||||
<a :href="
|
||||
subMenu.subMenu
|
||||
? 'javascript:;'
|
||||
: router.resolve({ name: subMenu.pageName }).path
|
||||
" class="top-menu" @click="linkTo(subMenu, router, $event)">
|
||||
<div class="top-menu__icon">
|
||||
<ActivityIcon />
|
||||
</div>
|
||||
<div class="top-menu__title">
|
||||
{{ subMenu.title }}
|
||||
<ChevronDownIcon
|
||||
v-if="subMenu.subMenu"
|
||||
class="top-menu__sub-icon"
|
||||
/>
|
||||
<ChevronDownIcon v-if="subMenu.subMenu" class="top-menu__sub-icon" />
|
||||
</div>
|
||||
</a>
|
||||
<!-- BEGIN: Third Child -->
|
||||
<ul v-if="subMenu.subMenu">
|
||||
<li
|
||||
v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
|
||||
:key="lastSubMenuKey"
|
||||
>
|
||||
<a
|
||||
:href="
|
||||
lastSubMenu.subMenu
|
||||
? 'javascript:;'
|
||||
: router.resolve({ name: lastSubMenu.pageName }).path
|
||||
"
|
||||
class="top-menu"
|
||||
@click="linkTo(lastSubMenu, router, $event)"
|
||||
>
|
||||
<li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
|
||||
<a :href="
|
||||
lastSubMenu.subMenu
|
||||
? 'javascript:;'
|
||||
: router.resolve({ name: lastSubMenu.pageName }).path
|
||||
" class="top-menu" @click="linkTo(lastSubMenu, router, $event)">
|
||||
<div class="top-menu__icon">
|
||||
<component :is="'zap-icon'" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export const useTopMenuStore = defineStore("topMenu", {
|
|||
menu: [
|
||||
{
|
||||
icon: "UserIcon",
|
||||
pageName: "account",
|
||||
pageName: "profile",
|
||||
title: "ACCOUNT",
|
||||
subMenu: [
|
||||
{
|
||||
|
|
@ -13,6 +13,21 @@ export const useTopMenuStore = defineStore("topMenu", {
|
|||
pageName: "profile",
|
||||
title: "Profile",
|
||||
},
|
||||
// {
|
||||
// icon: "UserIcon",
|
||||
// pageName: "profile",
|
||||
// title: "Personal",
|
||||
// },
|
||||
{
|
||||
icon: "UserIcon",
|
||||
pageName: "contacts",
|
||||
title: "Contacts",
|
||||
},
|
||||
{
|
||||
icon: "UserIcon",
|
||||
pageName: "bank-account",
|
||||
title: "Bank Info",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue