Restructured Project Rep
This commit is contained in:
508
layouts/default.vue
Normal file
508
layouts/default.vue
Normal file
@@ -0,0 +1,508 @@
|
||||
<script setup>
|
||||
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const colorMode = useColorMode()
|
||||
const { isHelpSlideoverOpen } = useDashboard()
|
||||
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 activeFeatures = dataStore.tenants.find(dataStore.currentTenant).features
|
||||
|
||||
let links = computed(() => {
|
||||
return [
|
||||
{
|
||||
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"
|
||||
},
|
||||
... dataStore.ownTenant.features.planningBoard ? [{
|
||||
label: "Plantafel",
|
||||
to: "/calendar/timeline",
|
||||
icon: "i-heroicons-calendar-days"
|
||||
}] : [],
|
||||
... dataStore.ownTenant.features.calendar ? [{
|
||||
label: "Kalender",
|
||||
to: "/calendar/grid",
|
||||
icon: "i-heroicons-calendar-days"
|
||||
}] : [],
|
||||
... dataStore.ownTenant.features.calendar ? [{
|
||||
label: "Termine",
|
||||
to: "/events",
|
||||
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: [
|
||||
... dataStore.ownTenant.features.timeTracking ? [{
|
||||
label: "Zeiterfassung",
|
||||
to: "/employees/timetracking",
|
||||
icon: "i-heroicons-clock"
|
||||
}] : [],
|
||||
... dataStore.ownTenant.features.workingTimeTracking ? [{
|
||||
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"
|
||||
},
|
||||
... dataStore.ownTenant.features.vehicles ? [{
|
||||
label: "Fahrzeuge",
|
||||
to: "/vehicles",
|
||||
icon: "i-heroicons-truck"
|
||||
}] : [],
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "Belege",
|
||||
to: "/receipts",
|
||||
icon: "i-heroicons-document-text"
|
||||
},
|
||||
{
|
||||
label: "Bank",
|
||||
to: "/banking",
|
||||
icon: "i-heroicons-document-text"
|
||||
},{
|
||||
label: "Projekte",
|
||||
to: "/projects",
|
||||
icon: "i-heroicons-clipboard-document-check"
|
||||
},
|
||||
... dataStore.ownTenant.features.contracts ? [{
|
||||
label: "Verträge",
|
||||
to: "/contracts",
|
||||
icon: "i-heroicons-clipboard-document"
|
||||
}] : [],
|
||||
{
|
||||
label: "Objekte",
|
||||
to: "/plants",
|
||||
icon: "i-heroicons-clipboard-document"
|
||||
},
|
||||
{
|
||||
label: "Einstellungen",
|
||||
defaultOpen: false,
|
||||
icon: "i-heroicons-cog-8-tooth",
|
||||
children: [
|
||||
{
|
||||
label: "Nummernkreise",
|
||||
to: "/settings/numberRanges",
|
||||
icon: "i-heroicons-clipboard-document-list"
|
||||
},{
|
||||
label: "Mitarbeiter",
|
||||
to: "/profiles",
|
||||
icon: "i-heroicons-clipboard-document-list"
|
||||
},{
|
||||
label: "Bankkonten",
|
||||
to: "/settings/banking",
|
||||
icon: "i-heroicons-clipboard-document-list"
|
||||
},{
|
||||
label: "Firmeneinstellungen",
|
||||
to: "/settings/tenant",
|
||||
icon: "i-heroicons-clipboard-document-list"
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const actions = [
|
||||
{
|
||||
id: 'new-customer',
|
||||
label: 'Kunde hinzufügen',
|
||||
icon: 'i-heroicons-user-group',
|
||||
to: "/customers/create" ,
|
||||
},
|
||||
{
|
||||
id: 'new-vendor',
|
||||
label: 'Lieferant hinzufügen',
|
||||
icon: 'i-heroicons-truck',
|
||||
to: "/vendors/create" ,
|
||||
},
|
||||
{
|
||||
id: 'new-contact',
|
||||
label: 'Ansprechpartner hinzufügen',
|
||||
icon: 'i-heroicons-user-group',
|
||||
to: "/contacts/create" ,
|
||||
},
|
||||
{
|
||||
id: 'new-task',
|
||||
label: 'Aufgabe hinzufügen',
|
||||
icon: 'i-heroicons-rectangle-stack',
|
||||
to: "/tasks/create" ,
|
||||
},
|
||||
{
|
||||
id: 'new-plant',
|
||||
label: 'Objekt hinzufügen',
|
||||
icon: 'i-heroicons-clipboard-document',
|
||||
to: "/plants/create" ,
|
||||
},
|
||||
{
|
||||
id: 'new-product',
|
||||
label: 'Artikel hinzufügen',
|
||||
icon: 'i-heroicons-puzzle-piece',
|
||||
to: "/products/create" ,
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const groups = computed(() =>
|
||||
[{
|
||||
key: 'actions',
|
||||
commands: actions
|
||||
},{
|
||||
key: "customers",
|
||||
label: "Kunden",
|
||||
commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
|
||||
},{
|
||||
key: "vendors",
|
||||
label: "Lieferanten",
|
||||
commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
|
||||
},{
|
||||
key: "contacts",
|
||||
label: "Ansprechpartner",
|
||||
commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
|
||||
},{
|
||||
key: "products",
|
||||
label: "Artikel",
|
||||
commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
|
||||
},{
|
||||
key: "tasks",
|
||||
label: "Aufgaben",
|
||||
commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
|
||||
},{
|
||||
key: "plants",
|
||||
label: "Objekte",
|
||||
commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
|
||||
}
|
||||
].filter(Boolean))
|
||||
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>
|
||||
<ProfileDropdown class="w-full" />
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UDashboardSidebar id="sidebar">
|
||||
<template #header>
|
||||
<UDashboardSearchButton label="Suche..."/>
|
||||
</template>
|
||||
|
||||
<UDashboardSidebarLinks :links="links" />
|
||||
|
||||
<div class="flex-1" />
|
||||
|
||||
<UDashboardSidebarLinks :links="footerLinks" />
|
||||
|
||||
<UDivider class="sticky bottom-0" />
|
||||
|
||||
<template #footer>
|
||||
<!-- ~/components/UserDropdown.vue -->
|
||||
<UserDropdown />
|
||||
</template>
|
||||
</UDashboardSidebar>
|
||||
</UDashboardPanel>
|
||||
|
||||
<UDashboardPage>
|
||||
<UDashboardPanel grow>
|
||||
<slot />
|
||||
</UDashboardPanel>
|
||||
</UDashboardPage>
|
||||
|
||||
|
||||
|
||||
<!-- ~/components/HelpSlideover.vue -->
|
||||
<HelpSlideover />
|
||||
<!-- ~/components/NotificationsSlideover.vue -->
|
||||
<NotificationsSlideover />
|
||||
|
||||
<ClientOnly>
|
||||
<LazyUDashboardSearch :groups="groups" />
|
||||
</ClientOnly>
|
||||
</UDashboardLayout>
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col"
|
||||
>
|
||||
<UColorModeImage
|
||||
light="/Logo.png"
|
||||
dark="/Logo_Dark.png"
|
||||
class="w-1/3 mx-auto my-10"
|
||||
/>
|
||||
|
||||
<UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user