Changes

spaces/app.vue

@@ -1,10 +1,99 @@
 <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 = [
@@ -33,20 +122,39 @@ const userDropdownItems = [
   <UCard id="page">
     <template #header>
       <div id="menu">
-        <router-link to="/tasks" class="mr-2"><UButton>Aufgaben</UButton></router-link>
-        <router-link to="/customers" class="mr-2"><UButton>Kunden</UButton></router-link>
+        <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>
+        <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/>
+    <NuxtPage
+      v-if="loaded"
+    />
+    <div
+      v-else
+    >
+      <UProgress animation="carousel" />
+    </div>
   </UCard>
 </template>