FEDEO/spaces/layouts/default.vue

<script setup>

const dataStore = useDataStore()
const colorMode = useColorMode()

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 links = [[{
  label: 'Profil',
  avatar: {
    alt: userProfile ? userProfile.fullName : "XY"
  }
},{
  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"
}]
]

</script>

<template>
  <div v-if="dataStore.loaded" class="flex justify-center flex-row">
    <!--    <UHeader :links="navLinks" :to="null">
          <template #logo>
            <div id="logo">
              <img
                  :src="!isLight  ? '/spaces.svg' : '/spaces_hell.svg'"
                  alt="Logo"
              />
            </div>

          </template>

          <template #panel>
            <UNavigationTree :links="navLinks"/>
          </template>

          <template #right>

            <GlobalSearch/>

            <UButton
                @click="showUserMenu = true"
                variant="ghost"
                color="gray"
            >
              <UAvatar
                  :alt="userProfile ? userProfile.firstName + ' ' + userProfile.lastName : '' "
                  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"
              >

                <div v-if="dataStore.getOwnProfile.tenants.length > 1">
                  <UDivider
                      class="my-3"
                      label="Tenant"
                  />

                  <USelectMenu
                      :options="dataStore.getOwnProfile.tenants"
                      option-attribute="name"
                      value-attribute="id"
                      v-model="dataStore.currentTenant"
                      @change="dataStore.changeTenant()"
                  />
                </div>


                <UDivider
                    class="my-3"
                    label="Menü"
                />

                <UVerticalNavigation
                    :links="userMenuItems"
                />

    &lt;!&ndash;            <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()
                    }"
                />&ndash;&gt;



                <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>

          </template>
        </UHeader>
        <UDivider />-->
    <div class="ml-2 mt-3" id="menuLeft">

      <UVerticalNavigation
          :links="links"
      >
        <template #avatar="{link}">
          <UAvatar
            v-if="link.avatar"
            v-bind="link.avatar"

          />
        </template>
      </UVerticalNavigation>
    </div>

    <div class="pl-3 pr-3 mt-3" id="contentContainer">
      <slot id="content"/>
    </div>
  </div>
  <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>
#menuLeft {
  height: 95vh;
  width: 20vw;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#menuLeft::-webkit-scrollbar {
  display: none;
}

#contentContainer {
  width: 77vw;
  height: 95vh;
  overflow-y: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#contentContainer::-webkit-scrollbar {
  display: none;
}

</style>