From 3924fd79d2605d4d7c7a26cbd80dd8372c7ec3b8 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Fri, 23 Feb 2024 22:34:39 +0100
Subject: [PATCH] Changed to new Layout System

---
 spaces/components/HelpSlideover.vue     |   4 +-
 spaces/components/TeamsDropdown.vue     |  46 -------
 spaces/components/TenantDropdown.vue    |  25 ++++
 spaces/components/UserDropdown.vue      |  10 +-
 spaces/error.vue                        |  17 +++
 spaces/layouts/default.vue              | 100 +++++++++++----
 spaces/pages/employees/timetracking.vue |  64 ++++-----
 spaces/pages/receipts/index.vue         | 164 ++++++++++++++----------
 spaces/pages/settings/index.vue         |  31 +----
 spaces/pages/workingtimes.vue           |   3 +
 10 files changed, 260 insertions(+), 204 deletions(-)
 delete mode 100644 spaces/components/TeamsDropdown.vue
 create mode 100644 spaces/components/TenantDropdown.vue
 create mode 100644 spaces/error.vue

diff --git a/spaces/components/HelpSlideover.vue b/spaces/components/HelpSlideover.vue
index 8625835..1c263dc 100644
--- a/spaces/components/HelpSlideover.vue
+++ b/spaces/components/HelpSlideover.vue
@@ -66,7 +66,7 @@ const filteredCategories = computed(() => {
 
 <template>
   <UDashboardSlideover v-model="isHelpSlideoverOpen">
-    <template #title>
+<!--    <template #title>
       <UButton
           v-if="shortcuts"
           color="gray"
@@ -102,6 +102,6 @@ const filteredCategories = computed(() => {
     </div>
     <div v-else class="flex flex-col gap-y-3">
       <UButton v-for="(link, index) in links" :key="index" color="white" v-bind="link" />
-    </div>
+    </div>-->
   </UDashboardSlideover>
 </template>
\ No newline at end of file
diff --git a/spaces/components/TeamsDropdown.vue b/spaces/components/TeamsDropdown.vue
deleted file mode 100644
index 0ee32c0..0000000
--- a/spaces/components/TeamsDropdown.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-const teams = [{
-  label: 'Nuxt',
-  /*avatar: {
-    src: 'https://avatars.githubusercontent.com/u/23360933?s=200&v=4'
-  },*/
-  click: () => {
-    team.value = teams[0]
-  }
-}, {
-  label: 'NuxtLabs',
-  /*avatar: {
-    src: 'https://avatars.githubusercontent.com/u/62017400?s=200&v=4'
-  },*/
-  click: () => {
-    team.value = teams[1]
-  }
-}]
-
-const actions = [{
-  label: 'Create team',
-  icon: 'i-heroicons-plus-circle'
-}, {
-  label: 'Manage teams',
-  icon: 'i-heroicons-cog-8-tooth'
-}]
-
-const team = ref(teams[0])
-</script>
-
-<template>
-  <UDropdown
-      v-slot="{ open }"
-      mode="hover"
-      :items="[teams]"
-      class="w-full"
-      :ui="{ width: 'w-full' }"
-      :popper="{ strategy: 'absolute' }"
-  >
-    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
-      <UAvatar v-if="team.avatar" :src="team.avatar.src" size="2xs" />
-
-      <span class="truncate text-gray-900 dark:text-white font-semibold">{{ team.label }}</span>
-    </UButton>
-  </UDropdown>
-</template>
\ No newline at end of file
diff --git a/spaces/components/TenantDropdown.vue b/spaces/components/TenantDropdown.vue
new file mode 100644
index 0000000..377b02b
--- /dev/null
+++ b/spaces/components/TenantDropdown.vue
@@ -0,0 +1,25 @@
+<script setup>
+const dataStore = useDataStore()
+
+const tenants = ref(dataStore.getOwnProfile ? dataStore.getOwnProfile.tenants : [])
+const tenant = ref(dataStore.currentTenant)
+
+
+</script>
+
+<template>
+  <USelectMenu
+    :options="tenants"
+    value-attribute="id"
+    option-attribute="name"
+    class="w-40"
+    @change="dataStore.changeTenant"
+    v-model="dataStore.currentTenant"
+  >
+    <UButton color="gray" variant="ghost" :class="[open && 'bg-gray-50 dark:bg-gray-800']" class="w-full">
+      <UAvatar :alt="tenants.find(i => i.id === dataStore.currentTenant).name" size="md" />
+
+      <span class="truncate text-gray-900 dark:text-white font-semibold">{{ tenants.find(i => i.id === dataStore.currentTenant).name }}</span>
+    </UButton>
+  </USelectMenu>
+</template>
\ No newline at end of file
diff --git a/spaces/components/UserDropdown.vue b/spaces/components/UserDropdown.vue
index 441d715..095592b 100644
--- a/spaces/components/UserDropdown.vue
+++ b/spaces/components/UserDropdown.vue
@@ -13,25 +13,25 @@ const items = computed(() => [
     label: '',
     disabled: true
   }], [{
-    label: 'Settings',
+    label: 'Einstellungen',
     icon: 'i-heroicons-cog-8-tooth',
     to: '/settings'
   }, {
-    label: 'Command menu',
+    label: 'Suche',
     icon: 'i-heroicons-command-line',
     shortcuts: [metaSymbol.value, 'K'],
     click: () => {
       isDashboardSearchModalOpen.value = true
     }
   }, {
-    label: 'Help & Support',
+    label: 'Hilfe & Support',
     icon: 'i-heroicons-question-mark-circle',
     shortcuts: ['?'],
     click: () => isHelpSlideoverOpen.value = true
   }], [{
-    label: 'Documentation',
+    label: 'Webseite',
     icon: 'i-heroicons-book-open',
-    to: 'https://ui.nuxt.com/pro/guide',
+    to: 'https://spaces.software',
     target: '_blank'
   },/* {
     label: 'GitHub repository',
diff --git a/spaces/error.vue b/spaces/error.vue
new file mode 100644
index 0000000..fbeac53
--- /dev/null
+++ b/spaces/error.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const props = defineProps({
+  error: Object as () => NuxtError
+})
+</script>
+
+<template>
+  <div class="flex justify-center h-100 w-100">
+    <div class="mt-20">
+      <h1 class="text-5xl text-center mb-3">Da ist etwas schief gelaufen</h1>
+      <UButton to="/">Zurück</UButton>
+    </div>
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/spaces/layouts/default.vue b/spaces/layouts/default.vue
index b968c55..6d6bdd2 100644
--- a/spaces/layouts/default.vue
+++ b/spaces/layouts/default.vue
@@ -1,5 +1,7 @@
 <script setup>
 
+import TenantDropdown from "~/components/TenantDropdown.vue";
+
 const dataStore = useDataStore()
 const colorMode = useColorMode()
 const { isHelpSlideoverOpen } = useDashboard()
@@ -344,11 +346,11 @@ let links = [
         },
       ]
     },
-    {
+    /*{
       label: "E-Mail",
       to: "/email",
       icon: "i-heroicons-envelope"
-    },
+    },*/
     {
       label: "Kontakte",
       defaultOpen: false,
@@ -456,22 +458,76 @@ let links = [
     },
   ]
 
-const groups = [{
-  key: 'links',
-  label: 'Go to',
-  commands: links.map(link => ({ ...link, shortcuts: link.tooltip?.shortcuts }))
-}, {
-  key: 'code',
-  label: 'Code',
-  commands: [{
-    id: 'source',
-    label: 'View page source',
-    icon: 'i-simple-icons-github',
-    click: () => {
-      window.open(`https://github.com/nuxt-ui-pro/dashboard/blob/main/pages${route.path === '/' ? '/index' : route.path}.vue`, '_blank')
+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',
@@ -491,23 +547,17 @@ const footerLinks = [/*{
     <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
       <UDashboardNavbar class="!border-transparent" :ui="{ left: 'flex-1' }">
         <template #left>
-          <TeamsDropdown />
+          <TenantDropdown />
         </template>
       </UDashboardNavbar>
 
       <UDashboardSidebar id="sidebar">
         <template #header>
-          <UDashboardSearchButton />
+          <UDashboardSearchButton label="Suche..."/>
         </template>
 
         <UDashboardSidebarLinks :links="links" />
 
-<!--
-        <UDivider />
-
-        <UDashboardSidebarLinks :links="[{ label: 'Colors', draggable: true, children: colors }]" @update:links="colors => defaultColors = colors" />
-
--->
         <div class="flex-1" />
 
         <UDashboardSidebarLinks :links="footerLinks" />
diff --git a/spaces/pages/employees/timetracking.vue b/spaces/pages/employees/timetracking.vue
index ab77152..86401a5 100644
--- a/spaces/pages/employees/timetracking.vue
+++ b/spaces/pages/employees/timetracking.vue
@@ -216,37 +216,41 @@ const setState = async (newState) => {
 </script>
 
 <template>
-  <InputGroup>
-    <UButton
-        @click="startTime"
-        :disabled="runningTimeInfo.id "
-    >
-      Start
-    </UButton>
-    <UButton
-        @click="stopStartedTime"
-        :disabled="!runningTimeInfo.id"
-    >
-      Stop
-    </UButton>
-    <UButton
-        @click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date(), user: user.id}; showConfigTimeModal = true"
-    >
-      Erstellen
-    </UButton>
-    <USelectMenu
-        v-if="dataStore.hasRight('viewTimes')"
-      :options="dataStore.profiles"
-      option-attribute="fullName"
-      value-attribute="id"
-      v-model="filterUser"
-    >
-      <template #label>
-        {{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
-      </template>
-    </USelectMenu>
-  </InputGroup>
+  <UDashboardNavbar title="Zeiterfassung">
 
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
+      <UButton
+          @click="startTime"
+          :disabled="runningTimeInfo.id "
+      >
+        Start
+      </UButton>
+      <UButton
+          @click="stopStartedTime"
+          :disabled="!runningTimeInfo.id"
+      >
+        Stop
+      </UButton>
+      <UButton
+          @click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date(), user: user.id}; showConfigTimeModal = true"
+      >
+        Erstellen
+      </UButton>
+      <USelectMenu
+          v-if="dataStore.hasRight('viewTimes')"
+          :options="dataStore.profiles"
+          option-attribute="fullName"
+          value-attribute="id"
+          v-model="filterUser"
+      >
+        <template #label>
+          {{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
   <div v-if="runningTimeInfo.id" class="mt-3">
 
     Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
diff --git a/spaces/pages/receipts/index.vue b/spaces/pages/receipts/index.vue
index 1684a19..03b93a1 100644
--- a/spaces/pages/receipts/index.vue
+++ b/spaces/pages/receipts/index.vue
@@ -1,10 +1,19 @@
 <template>
-  <div id="main">
-
-    <InputGroup>
-<!--
-      <UButton @click="router.push(`/incominginvoices/create/`)">+ Eingangsrechnung</UButton>
--->
+  <UDashboardNavbar>
+    <template #right>
+      <UInput
+          id="searchinput"
+          v-model="searchString"
+          icon="i-heroicons-funnel"
+          autocomplete="off"
+          placeholder="Suche..."
+          class="hidden lg:block"
+          @keydown.esc="$event.target.blur()"
+      >
+        <template #trailing>
+          <UKbd value="/" />
+        </template>
+      </UInput>
       <UButton
           @click="router.push(`/createDocument/edit?type=quotes`)"
       >
@@ -15,82 +24,93 @@
       >
         + Rechnung
       </UButton>
-
-      <UInput
-          v-model="searchString"
-          placeholder="Suche..."
-      />
-
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
       <UCheckbox
-        v-model="showDrafts"
-        label="Entwürfe Anzeigen"
+          v-model="showDrafts"
+          label="Entwürfe Anzeigen"
       />
-    </InputGroup>
+    </template>
 
+    <template #right>
+      <USelectMenu
+          v-model="selectedColumns"
+          icon="i-heroicons-adjustments-horizontal-solid"
+          :options="templateColumns"
+          multiple
+          class="hidden lg:block"
+          by="key"
+      >
+        <template #label>
+          Spalten
+        </template>
+      </USelectMenu>
+    </template>
+  </UDashboardToolbar>
 
-
-    <UTable
-        :rows="filteredRows"
-        :columns="itemColumns"
-        @select="selectItem"
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-    >
-      <template #type-data="{row}">
-        <span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
-        <span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
-      </template>
-      <template #state-data="{row}">
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="selectItem"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
+  >
+    <template #type-data="{row}">
+      <span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
+      <span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
+    </template>
+    <template #state-data="{row}">
         <span
-          v-if="row.state === 'Entwurf'"
-          class="text-rose-500"
+            v-if="row.state === 'Entwurf'"
+            class="text-rose-500"
         >
           {{row.state}}
         </span>
-        <span
+      <span
           v-if="row.state === 'Gebucht'"
           class="text-cyan-500"
-        >
+      >
           {{row.state}}
         </span>
-        <span
+      <span
           v-if="row.state === 'Abgeschlossen'"
           class="text-primary-500"
-        >
+      >
           {{row.state}}
         </span>
-      </template>
-      <template #partner-data="{row}">
-        <span v-if="row.customer">{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ''}}</span>
-        <span v-else-if="row.vendor">{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ''}}</span>
+    </template>
+    <template #partner-data="{row}">
+      <span v-if="row.customer">{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ''}}</span>
+      <span v-else-if="row.vendor">{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ''}}</span>
 
-      </template>
-      <template #reference-data="{row}">
-        <span v-if="row.type === 'incomingInvoice'">{{row.reference}}</span>
-        <span v-else>{{row.documentNumber}}</span>
-      </template>
-      <template #date-data="{row}">
-        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
-      </template>
-      <template #dueDate-data="{row}">
-        <span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
-      </template>
-      <template #paid-data="{row}">
-        <span v-if="row.paid" class="text-primary-500">Bezahlt</span>
-        <span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
-      </template>
-      <template #amount-data="{row}">
-        <div
-            class="text-right font-bold"
-            v-if="row.type === 'incomingInvoice'"
-        >
-          {{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}
-        </div>
-      </template>
-    </UTable>
+    </template>
+    <template #reference-data="{row}">
+      <span v-if="row.type === 'incomingInvoice'">{{row.reference}}</span>
+      <span v-else>{{row.documentNumber}}</span>
+    </template>
+    <template #date-data="{row}">
+      <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
+    </template>
+    <template #dueDate-data="{row}">
+      <span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
+    </template>
+    <template #paid-data="{row}">
+      <span v-if="row.paid" class="text-primary-500">Bezahlt</span>
+      <span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
+    </template>
+    <template #amount-data="{row}">
+      <div
+          class="text-right font-bold"
+          v-if="row.type === 'incomingInvoice'"
+      >
+        {{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}
+      </div>
+    </template>
+  </UTable>
 
-
-
-  </div>
 </template>
 
 <script setup>
@@ -100,11 +120,18 @@ definePageMeta({
   middleware: "auth"
 })
 
+defineShortcuts({
+  '/': () => {
+    //console.log(searchinput)
+    //searchinput.value.focus()
+    document.getElementById("searchinput").focus()
+  }
+})
+
 const dataStore = useDataStore()
 const router = useRouter()
-const mode = ref("show")
 
-const itemColumns = [
+const templateColumns = [
   {
     key: 'type',
     label: "Typ",
@@ -145,6 +172,8 @@ const itemColumns = [
     sortable: true
   },
 ]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 
 const selectItem = (item) => {
@@ -184,12 +213,9 @@ const getRowAmount = (row) => {
 
 const searchString = ref('')
 const showDrafts = ref(false)
-
 const filteredRows = computed(() => {
   let items = [...dataStore.incominginvoices.map(i => {return {...i, type: "incomingInvoice"}}),...dataStore.createddocuments]
 
-  console.log(dataStore.createddocuments)
-
   if(showDrafts.value === true) {
     items = items.filter(i => i.state === "Entwurf")
   } else {
diff --git a/spaces/pages/settings/index.vue b/spaces/pages/settings/index.vue
index a33ed8d..572bdae 100644
--- a/spaces/pages/settings/index.vue
+++ b/spaces/pages/settings/index.vue
@@ -32,27 +32,16 @@ const isLight = computed({
 </script>
 
 <template>
+  <UDashboardNavbar title="Einstellungen">
+
+  </UDashboardNavbar>
   <UTabs
       :items="items"
-      class="h-100"
+      class="h-100 p-5"
   >
     <template #item="{item}">
       <UCard class="mt-5">
         <div v-if="item.label === 'Profil'">
-          <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"
@@ -67,18 +56,6 @@ const isLight = computed({
                 aria-label="Theme"
                 @click="isLight = !isLight"
             />
-            <UButton
-                color="rose"
-                variant="outline"
-                @click="async () => {
-                      await supabase.auth.signOut()
-                      await dataStore.clearStore()
-                      await router.push('/login')
-
-                  }"
-            >
-              Ausloggen
-            </UButton>
           </InputGroup>
 
         </div>
diff --git a/spaces/pages/workingtimes.vue b/spaces/pages/workingtimes.vue
index f7d5c46..40ae919 100644
--- a/spaces/pages/workingtimes.vue
+++ b/spaces/pages/workingtimes.vue
@@ -26,6 +26,9 @@ const timeColumns = [
 </script>
 
 <template>
+  <UDashboardNavbar title="Anwesenheiten">
+
+  </UDashboardNavbar>
   <UTable
     :rows="dataStore.workingtimes"
     :columns="timeColumns"