550 lines
12 KiB
Vue
550 lines
12 KiB
Vue
<script setup>
|
|
|
|
const dataStore = useDataStore()
|
|
const colorMode = useColorMode()
|
|
const { isHelpSlideoverOpen } = useDashboard()
|
|
const userProfile = dataStore.getOwnProfile
|
|
const supabase = useSupabaseClient()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
|
|
dataStore.initializeData((await supabase.auth.getUser()).data.user.id)
|
|
|
|
|
|
const isLight = computed({
|
|
get() {
|
|
return colorMode.value !== 'dark'
|
|
},
|
|
set() {
|
|
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
|
}
|
|
})
|
|
|
|
const navLinks = [
|
|
{
|
|
label: "Home",
|
|
to: "/",
|
|
icon: 'i-heroicons-home'
|
|
},
|
|
{
|
|
label: "Kontakte",
|
|
icon: 'i-heroicons-user-group',
|
|
children: [
|
|
{
|
|
label: "Kunden",
|
|
to: "/customers",
|
|
icon: "i-heroicons-user-group"
|
|
},
|
|
{
|
|
label: "Lieferanten",
|
|
to: "/vendors",
|
|
icon: "i-heroicons-truck"
|
|
},
|
|
{
|
|
label: "Ansprechpartner",
|
|
to: "/contacts",
|
|
icon: "i-heroicons-user-group"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Buchhaltung",
|
|
icon: 'i-heroicons-document-chart-bar',
|
|
children: [
|
|
{
|
|
label: "Belege",
|
|
to: "/receipts",
|
|
icon: "i-heroicons-document-text"
|
|
},
|
|
{
|
|
label: "Bank",
|
|
to: "/banking",
|
|
icon: "i-heroicons-currency-euro"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Aufträge",
|
|
icon: "i-heroicons-square-3-stack-3d",
|
|
children: [
|
|
{
|
|
label: "Projekte",
|
|
to: "/projects",
|
|
icon: "i-heroicons-clipboard-document-check"
|
|
},
|
|
{
|
|
label: "Verträge",
|
|
to: "/contracts",
|
|
icon: "i-heroicons-clipboard-document"
|
|
},
|
|
{
|
|
label: "Objekte",
|
|
to: "/plants",
|
|
icon: "i-heroicons-clipboard-document"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Verwaltung",
|
|
icon: "i-heroicons-square-3-stack-3d",
|
|
children: [
|
|
{
|
|
label: "Aufgaben",
|
|
to: "/tasks",
|
|
icon: "i-heroicons-rectangle-stack"
|
|
},
|
|
{
|
|
label: "Plantafel",
|
|
to: "/calendar/timeline",
|
|
icon: "i-heroicons-calendar-days"
|
|
},
|
|
{
|
|
label: "Kalender",
|
|
to: "/calendar/grid",
|
|
icon: "i-heroicons-calendar-days"
|
|
},
|
|
{
|
|
label: "Dokumente",
|
|
to: "/documents",
|
|
icon: "i-heroicons-document"
|
|
},
|
|
{
|
|
label: "E-Mail",
|
|
to: "/email",
|
|
icon: "i-heroicons-envelope"
|
|
},
|
|
]
|
|
},/*
|
|
{
|
|
label: "Chat",
|
|
to: "/chat",
|
|
icon:'i-heroicons-chat-bubble-left-right'
|
|
},*/
|
|
{
|
|
label: "Mitarbeiter",
|
|
icon: 'i-heroicons-user',
|
|
children: [
|
|
{
|
|
label: "Zeiterfassung",
|
|
to: "/employees/timetracking",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Anwesenheiten",
|
|
to: "/workingtimes",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Abwesenheiten",
|
|
to: "/absenceRequests",
|
|
icon: "i-heroicons-document-text"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
label: "Lager",
|
|
icon: 'i-heroicons-home',
|
|
children: [
|
|
{
|
|
label: "Steuerung",
|
|
to: "/inventory",
|
|
icon: "i-heroicons-square-3-stack-3d"
|
|
},
|
|
{
|
|
label: "Artikelstamm",
|
|
to: "/products",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},
|
|
{
|
|
label: "Lagerplätze",
|
|
to: "/spaces",
|
|
icon: "i-heroicons-square-3-stack-3d"
|
|
},
|
|
{
|
|
label: "Fahrzeuge",
|
|
to: "/vehicles",
|
|
icon: "i-heroicons-truck"
|
|
}, {
|
|
label: "Inventar",
|
|
to: "/inventoryitems",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},
|
|
]
|
|
},
|
|
]
|
|
|
|
const showUserMenu = ref(false)
|
|
const userMenuItems = ref([
|
|
/*{
|
|
label: "Profil",
|
|
badge: dataStore.notifications.filter(item => item.read).length,
|
|
icon: "i-heroicons-user-20-solid"
|
|
},*/
|
|
{
|
|
label: "Nummernkreise",
|
|
icon: "i-heroicons-cog-8-tooth",
|
|
to: "/settings/numberRanges"
|
|
},
|
|
{
|
|
label: "Einstellungen",
|
|
icon: "i-heroicons-cog-8-tooth",
|
|
to: "/settings"
|
|
},
|
|
{
|
|
label: 'Benutzer',
|
|
icon: 'i-heroicons-user-group',
|
|
to: "/users"
|
|
}
|
|
])
|
|
|
|
const linksold = [[{
|
|
label: "Dashboard",
|
|
to: "/",
|
|
icon: "i-heroicons-home"
|
|
}],
|
|
[{
|
|
label: "Aufgaben",
|
|
to: "/tasks",
|
|
icon: "i-heroicons-rectangle-stack"
|
|
}, {
|
|
label: "Plantafel",
|
|
to: "/calendar/timeline",
|
|
icon: "i-heroicons-calendar-days"
|
|
},
|
|
{
|
|
label: "Kalender",
|
|
to: "/calendar/grid",
|
|
icon: "i-heroicons-calendar-days"
|
|
},
|
|
{
|
|
label: "Dokumente",
|
|
to: "/documents",
|
|
icon: "i-heroicons-document"
|
|
},
|
|
{
|
|
label: "E-Mail",
|
|
to: "/email",
|
|
icon: "i-heroicons-envelope"
|
|
}],[{
|
|
label: "Kunden",
|
|
to: "/customers",
|
|
icon: "i-heroicons-user-group"
|
|
},
|
|
{
|
|
label: "Lieferanten",
|
|
to: "/vendors",
|
|
icon: "i-heroicons-truck"
|
|
},
|
|
{
|
|
label: "Ansprechpartner",
|
|
to: "/contacts",
|
|
icon: "i-heroicons-user-group"
|
|
}], [{
|
|
label: "Belege",
|
|
to: "/receipts",
|
|
icon: "i-heroicons-document-text"
|
|
},
|
|
/* {
|
|
label: "Bank",
|
|
to: "/banking",
|
|
icon: "i-heroicons-currency-euro"
|
|
}*/], [{
|
|
label: "Projekte",
|
|
to: "/projects",
|
|
icon: "i-heroicons-clipboard-document-check"
|
|
},
|
|
{
|
|
label: "Verträge",
|
|
to: "/contracts",
|
|
icon: "i-heroicons-clipboard-document"
|
|
},
|
|
{
|
|
label: "Objekte",
|
|
to: "/plants",
|
|
icon: "i-heroicons-clipboard-document"
|
|
}],[{
|
|
label: "Zeiterfassung",
|
|
to: "/employees/timetracking",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Anwesenheiten",
|
|
to: "/workingtimes",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Abwesenheiten",
|
|
to: "/absenceRequests",
|
|
icon: "i-heroicons-document-text"
|
|
}],[{
|
|
label: "Steuerung",
|
|
to: "/inventory",
|
|
icon: "i-heroicons-square-3-stack-3d"
|
|
},
|
|
{
|
|
label: "Artikelstamm",
|
|
to: "/products",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},{
|
|
label: "Leistungsstamm",
|
|
to: "/services",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},
|
|
{
|
|
label: "Lagerplätze",
|
|
to: "/spaces",
|
|
icon: "i-heroicons-square-3-stack-3d"
|
|
},
|
|
{
|
|
label: "Fahrzeuge",
|
|
to: "/vehicles",
|
|
icon: "i-heroicons-truck"
|
|
}, {
|
|
label: "Inventar",
|
|
to: "/inventoryitems",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},],[{
|
|
label: "Einstellungen",
|
|
to:"/settings",
|
|
icon: "i-heroicons-cog-8-tooth"
|
|
}]
|
|
]
|
|
|
|
let links = [
|
|
{
|
|
id: 'dashboard',
|
|
label: "Dashboard",
|
|
to: "/",
|
|
icon: "i-heroicons-home"
|
|
},
|
|
{
|
|
label: "Organisation",
|
|
icon: "i-heroicons-rectangle-stack",
|
|
defaultOpen: false,
|
|
children: [
|
|
{
|
|
label: "Aufgaben",
|
|
to: "/tasks",
|
|
icon: "i-heroicons-rectangle-stack"
|
|
},
|
|
{
|
|
label: "Plantafel",
|
|
to: "/calendar/timeline",
|
|
icon: "i-heroicons-calendar-days"
|
|
},
|
|
{
|
|
label: "Kalender",
|
|
to: "/calendar/grid",
|
|
icon: "i-heroicons-calendar-days"
|
|
},
|
|
{
|
|
label: "Dokumente",
|
|
to: "/documents",
|
|
icon: "i-heroicons-document"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "E-Mail",
|
|
to: "/email",
|
|
icon: "i-heroicons-envelope"
|
|
},
|
|
{
|
|
label: "Kontakte",
|
|
defaultOpen: false,
|
|
icon: "i-heroicons-user-group",
|
|
children: [
|
|
{
|
|
label: "Kunden",
|
|
to: "/customers",
|
|
icon: "i-heroicons-user-group"
|
|
},
|
|
{
|
|
label: "Lieferanten",
|
|
to: "/vendors",
|
|
icon: "i-heroicons-truck"
|
|
},
|
|
{
|
|
label: "Ansprechpartner",
|
|
to: "/contacts",
|
|
icon: "i-heroicons-user-group"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Mitarbeiter",
|
|
defaultOpen:false,
|
|
icon: "i-heroicons-user-group",
|
|
children: [
|
|
{
|
|
label: "Zeiterfassung",
|
|
to: "/employees/timetracking",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Anwesenheiten",
|
|
to: "/workingtimes",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Abwesenheiten",
|
|
to: "/absenceRequests",
|
|
icon: "i-heroicons-document-text"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Lager",
|
|
icon: "i-heroicons-puzzle-piece",
|
|
defaultOpen: false,
|
|
children: [
|
|
{
|
|
label: "Steuerung",
|
|
to: "/inventory",
|
|
icon: "i-heroicons-square-3-stack-3d"
|
|
},
|
|
{
|
|
label: "Lagerplätze",
|
|
to: "/spaces",
|
|
icon: "i-heroicons-square-3-stack-3d"
|
|
},
|
|
{
|
|
label: "Inventar",
|
|
to: "/inventoryitems",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Stammdaten",
|
|
defaultOpen: false,
|
|
icon: "i-heroicons-clipboard-document",
|
|
children: [
|
|
{
|
|
label: "Artikelstamm",
|
|
to: "/products",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},{
|
|
label: "Leistungsstamm",
|
|
to: "/services",
|
|
icon: "i-heroicons-puzzle-piece"
|
|
},{
|
|
label: "Fahrzeuge",
|
|
to: "/vehicles",
|
|
icon: "i-heroicons-truck"
|
|
},
|
|
]
|
|
},
|
|
{
|
|
label: "Belege",
|
|
to: "/receipts",
|
|
icon: "i-heroicons-document-text"
|
|
},{
|
|
label: "Projekte",
|
|
to: "/projects",
|
|
icon: "i-heroicons-clipboard-document-check"
|
|
},
|
|
{
|
|
label: "Verträge",
|
|
to: "/contracts",
|
|
icon: "i-heroicons-clipboard-document"
|
|
},
|
|
{
|
|
label: "Objekte",
|
|
to: "/plants",
|
|
icon: "i-heroicons-clipboard-document"
|
|
},
|
|
]
|
|
|
|
const groups = [{
|
|
key: 'links',
|
|
label: 'Go to',
|
|
commands: links.map(link => ({ ...link, shortcuts: link.tooltip?.shortcuts }))
|
|
}, {
|
|
key: 'code',
|
|
label: 'Code',
|
|
commands: [{
|
|
id: 'source',
|
|
label: 'View page source',
|
|
icon: 'i-simple-icons-github',
|
|
click: () => {
|
|
window.open(`https://github.com/nuxt-ui-pro/dashboard/blob/main/pages${route.path === '/' ? '/index' : route.path}.vue`, '_blank')
|
|
}
|
|
}]
|
|
}]
|
|
const footerLinks = [/*{
|
|
label: 'Invite people',
|
|
icon: 'i-heroicons-plus',
|
|
to: '/settings/members'
|
|
}, */{
|
|
label: 'Hilfe & Support',
|
|
icon: 'i-heroicons-question-mark-circle',
|
|
click: () => isHelpSlideoverOpen.value = true
|
|
}]
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardLayout v-if="dataStore.loaded">
|
|
|
|
<UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
|
|
<UDashboardNavbar class="!border-transparent" :ui="{ left: 'flex-1' }">
|
|
<template #left>
|
|
<TeamsDropdown />
|
|
</template>
|
|
</UDashboardNavbar>
|
|
|
|
<UDashboardSidebar id="sidebar">
|
|
<template #header>
|
|
<UDashboardSearchButton />
|
|
</template>
|
|
|
|
<UDashboardSidebarLinks :links="links" />
|
|
|
|
<!--
|
|
<UDivider />
|
|
|
|
<UDashboardSidebarLinks :links="[{ label: 'Colors', draggable: true, children: colors }]" @update:links="colors => defaultColors = colors" />
|
|
|
|
-->
|
|
<div class="flex-1" />
|
|
|
|
<UDashboardSidebarLinks :links="footerLinks" />
|
|
|
|
<UDivider class="sticky bottom-0" />
|
|
|
|
<template #footer>
|
|
<!-- ~/components/UserDropdown.vue -->
|
|
<UserDropdown />
|
|
</template>
|
|
</UDashboardSidebar>
|
|
</UDashboardPanel>
|
|
<slot />
|
|
|
|
<!-- ~/components/HelpSlideover.vue -->
|
|
<HelpSlideover />
|
|
<!-- ~/components/NotificationsSlideover.vue -->
|
|
<NotificationsSlideover />
|
|
|
|
<ClientOnly>
|
|
<LazyUDashboardSearch :groups="groups" />
|
|
</ClientOnly>
|
|
</UDashboardLayout>
|
|
<div
|
|
v-else
|
|
class="flex-col mx-auto my-auto mt-10 w-3/4"
|
|
>
|
|
<img
|
|
:src="!isLight ? '/spaces.svg' : '/spaces_hell.svg'"
|
|
alt="Logo"
|
|
class="w-1/3 mx-auto"
|
|
/>
|
|
<UProgress animation="carousel"/>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |