Many Changes

spaces/app.vue

@@ -2,6 +2,8 @@
 
 
 
+import GlobalSearch from "~/components/GlobalSearch.vue";
+
 const user = useSupabaseUser()
 //console.log(user.value)
 const router = useRouter()
@@ -12,11 +14,6 @@ const tenants = (await supabase.from("tenants").select()).data
 
 const dataStore = useDataStore()
 
-
-const userProfile = (user.value ? dataStore.getProfileById(user.value.id) : {})
-//console.log(userProfile)
-
-
 const isLight = computed({
   get () {
     return colorMode.value !== 'dark'
@@ -26,6 +23,32 @@ const isLight = computed({
   }
 })
 
+const userProfile = (user.value ? dataStore.getProfileById(user.value.id) : {})
+//console.log(userProfile)
+
+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: 'Benutzer',
+    icon: 'i-heroicons-user-group',
+    to: "/settings/users"
+  }
+])
+
+
+
+
+
 const viewport = useViewport()
 
 watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
@@ -56,7 +79,7 @@ const navLinks = [
         icon: "i-heroicons-truck"
       },
       {
-        label: "Kontakte",
+        label: "Ansprechpartner",
         to: "/contacts",
         icon: "i-heroicons-user-group"
       },
@@ -131,9 +154,14 @@ const navLinks = [
     children: [
       {
         label: "Zeiterfassung",
-        to: "/timetracking",
+        to: "/employees/timetracking",
         icon: "i-heroicons-clock"
       },
+      {
+        label: "Abwesenheiten",
+        to: "/employees/absenceRequests",
+        icon: "i-heroicons-document-text"
+      }
     ]
   },
   {
@@ -141,15 +169,15 @@ const navLinks = [
     icon: 'i-heroicons-home',
     children: [
       {
-        label: "Artikel",
-        to: "/products",
-        icon: "i-heroicons-puzzle-piece"
-      },
-      {
-        label: "Inventar",
+        label: "Steuerung",
         to: "/inventory",
         icon: "i-heroicons-square-3-stack-3d"
       },
+      {
+        label: "Artikelstamm",
+        to: "/products",
+        icon: "i-heroicons-puzzle-piece"
+      },
       {
         label: "Lagerplätze",
         to: "/inventory/spaces",
@@ -166,37 +194,7 @@ const navLinks = [
 
 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()
 
 
 
@@ -223,6 +221,9 @@ useSeoMeta({
   twitterCard: 'summary_large_image'
 })
 
+
+
+
 const items = [
   [{
     label: user.value ? user.value.email : "",
@@ -250,7 +251,7 @@ const items = [
     label: 'Status',
     icon: 'i-heroicons-signal'
   }],*/ [{
-    label: 'Sign out',
+    label: 'Ausloggen',
     icon: 'i-heroicons-arrow-left-on-rectangle',
     click: async () => {
       await supabase.auth.signOut()
@@ -279,8 +280,12 @@ const items = [
       <UNavigationTree :links="navLinks"/>
     </template>
 
-    <template #right  v-if="user">
-      <ClientOnly>
+    <template #right>
+
+
+
+
+<!--      <ClientOnly>
         <UButton
             :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
             color="gray"
@@ -292,11 +297,128 @@ const items = [
         <template #fallback>
           <div class="w-8 h-8" />
         </template>
-      </ClientOnly>
-      <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
+      </ClientOnly>-->
+      <GlobalSearch/>
+
+
+<!--      <UPopover :popper="{placement: 'bottom-start'}">
+        <ClientOnly>
+          <UChip
+            :show="dataStore.notifications.filter(notification => !notification.read).length > 0"
+            inset
+          >
+            <UButton
+                icon="i-heroicons-envelope-20-solid"
+                variant="ghost"
+                color="gray"
+                class="mx-2"
+            />
+          </UChip>
+
+          <template #fallback>
+            <div class="w-8 h-8" />
+          </template>
+        </ClientOnly>
+
+
+
+        <template #panel>
+          <div class="w-60 p-3">
+
+            <UAlert
+                class="mb-3"
+                v-for="(notification,index) in dataStore.notifications"
+                :color="!notification.read ? 'primary' : 'grey'"
+                variant="outline"
+                :description="notification.text"
+                :title="notification.title"
+            />
+          </div>
+        </template>
+      </UPopover>-->
+      <UButton
+          @click="showUserMenu = true"
+          variant="ghost"
+          color="gray"
+      >
         <UAvatar
             :alt="userProfile ? userProfile.firstName + ' ' + userProfile.lastName : '' "
-            icon="i-heroicons-photo"
+            icon="i-heroicons-user-20-solid"
+            :chip-color="dataStore.notifications.filter(item => !item.read).length > 0 ? 'primary' : null"
+
+        />
+      </UButton>
+
+      <USlideover
+          v-model="showUserMenu"
+      >
+        <UCard
+            class="h-full"
+        >
+
+          <UDivider
+              class="my-3"
+              label="Menü"
+          />
+
+          <UVerticalNavigation
+              :links="userMenuItems"
+          />
+
+          <UDivider
+              class="my-3"
+              label="Benachrichtigungen"
+          />
+
+          <UAlert
+              class="mb-3"
+              v-for="(notification) in dataStore.notifications"
+              :color="!notification.read ? 'primary' : 'white'"
+              :variant="!notification.read ? 'outline' : 'soft'"
+              :description="notification.text"
+              :title="notification.title"
+              :close-button="!notification.read ? { icon: 'i-heroicons-x-mark-20-solid', color: 'gray', variant: 'link', padded: false } : null"
+              @close="async () => {
+                  const {error} = await supabase.from('notifications').update({read:true}).eq('id', notification.id)
+                  if(error) console.log(error)
+                  dataStore.fetchNotifications()
+                }"
+          />
+
+
+
+          <template #footer>
+            <InputGroup>
+              <UButton
+                  :icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+                  color="white"
+                  variant="outline"
+                  aria-label="Theme"
+                  @click="isLight = !isLight"
+              />
+              <UButton
+                  color="rose"
+                  variant="outline"
+                  @click="async () => {
+                  showUserMenu = false
+                  await supabase.auth.signOut()
+                  await dataStore.clearStore()
+                  await router.push('/login')
+
+              }"
+              >
+                Ausloggen
+              </UButton>
+            </InputGroup>
+
+          </template>
+
+        </UCard>
+      </USlideover>
+<!--      <UDropdown :items="items" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
+        <UAvatar
+            :alt="userProfile ? userProfile.firstName + ' ' + userProfile.lastName : '' "
+            icon="i-heroicons-user-20-solid"
         />
 
         <template #account="{ item }">
@@ -315,7 +437,7 @@ const items = [
 
           <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
         </template>
-      </UDropdown>
+      </UDropdown>-->
     </template>
   </UHeader>
   <UDivider />