179 lines
3.5 KiB
Vue
179 lines
3.5 KiB
Vue
<script setup>
|
|
|
|
|
|
|
|
const user = useSupabaseUser()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const supabase = useSupabaseClient()
|
|
const tenants = (await supabase.from("tenants").select()).data
|
|
|
|
|
|
|
|
|
|
const dataStore = useDataStore()
|
|
const {loaded} = storeToRefs(useDataStore())
|
|
const {fetchData} = dataStore
|
|
fetchData()
|
|
|
|
const navLinks = [
|
|
{
|
|
label: "Home",
|
|
link: "",
|
|
icon: 'i-heroicons-home'
|
|
},
|
|
{
|
|
label: "Aufgaben",
|
|
link: "tasks",
|
|
icon: "i-heroicons-rectangle-stack"
|
|
},
|
|
{
|
|
label: "Kunden",
|
|
link: "customers",
|
|
icon: "i-heroicons-user-group"
|
|
},
|
|
{
|
|
label: "Projekte",
|
|
link: "projects",
|
|
icon: "i-heroicons-clipboard-document-check"
|
|
},
|
|
{
|
|
label: "Zeiterfassung",
|
|
link: "timetracking",
|
|
icon: "i-heroicons-clock"
|
|
},
|
|
{
|
|
label: "Artikel",
|
|
link: "products"
|
|
},
|
|
{
|
|
label: "Dokumente",
|
|
link: "documents",
|
|
icon: "i-heroicons-document"
|
|
},
|
|
{
|
|
label: "Inventar",
|
|
link: "inventory"
|
|
}
|
|
]
|
|
|
|
const linksForBreadcrumbs = ref([])
|
|
|
|
const generateLinks = () => {
|
|
let pathSteps = route.fullPath.split("/")
|
|
let returnArr = []
|
|
|
|
pathSteps.forEach((step,index) => {
|
|
|
|
let stepLink = navLinks.find(link => link.link == step)
|
|
|
|
if(stepLink) {
|
|
returnArr[index] = {
|
|
label: stepLink.label,
|
|
icon: stepLink.icon,
|
|
to: '/' + stepLink.link
|
|
}
|
|
}
|
|
|
|
linksForBreadcrumbs.value = returnArr
|
|
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
watch(
|
|
() => route.path,
|
|
() => {
|
|
generateLinks()
|
|
}
|
|
)
|
|
generateLinks()
|
|
|
|
|
|
|
|
|
|
const userTenant = ref({})
|
|
if(user) userTenant.value = tenants.find(tenant => tenant.id === user.value.app_metadata.tenant)
|
|
const userDropdownItems = [
|
|
[
|
|
{
|
|
label: user.value ? user.value.email : "Profil",
|
|
|
|
},/*{
|
|
label: user ? userTenant.value.name : "",
|
|
|
|
}*/
|
|
],
|
|
[
|
|
{
|
|
label: "Logout",
|
|
click: () => {
|
|
|
|
router.push("/login")
|
|
}
|
|
}
|
|
]
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<UCard id="page">
|
|
<template #header>
|
|
<div id="menu">
|
|
<router-link
|
|
v-for="link in navLinks"
|
|
:to="'/' + link.link"
|
|
class="mr-2"
|
|
>
|
|
<UButton>{{link.label}}</UButton>
|
|
</router-link>
|
|
<!--<router-link to="/customers" class="mr-2"><UButton>Kunden</UButton></router-link>
|
|
<router-link to="/projects" class="mr-2"><UButton>Projekte</UButton></router-link>
|
|
-
|
|
<router-link to="/vendorinvoices" class="mr-2"><UButton>Eingangsrechnungen</UButton></router-link>
|
|
|
|
<router-link to="/timetracking" class="mr-2"><UButton>Zeiterfassung</UButton></router-link>
|
|
<router-link to="/products" class="mr-2"><UButton>Artikel</UButton></router-link>
|
|
<router-link to="/documents" class="mr-2"><UButton>Dokumente</UButton></router-link>
|
|
<router-link to="/inventory" class="mr-2"><UButton>Inventar</UButton></router-link>-->
|
|
<UDropdown :items="userDropdownItems" :popper="{placement: 'bottom-start'}">
|
|
<UButton color="white" label="Benutzer" trailing-icon="i-heroicons-chevron-down-20-solid" />
|
|
</UDropdown>
|
|
</div>
|
|
<UBreadcrumb
|
|
class="my-3"
|
|
:links="linksForBreadcrumbs"
|
|
/>
|
|
</template>
|
|
<NuxtPage
|
|
v-if="loaded"
|
|
/>
|
|
<div
|
|
v-else
|
|
>
|
|
<UProgress animation="carousel" />
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<style >
|
|
|
|
#page {
|
|
width: 98vw;
|
|
height: 95vh;
|
|
margin:1em;
|
|
}
|
|
|
|
.listItem {
|
|
padding: .1em;
|
|
border: 1px solid grey;
|
|
border-radius: 15px;
|
|
margin-top: 1em;
|
|
}
|
|
.listItem:hover {
|
|
border: 1px solid #69c350;
|
|
}
|
|
|
|
</style> |