Changed to new Layout System

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>

spaces/components/TeamsDropdown.vue

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

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>

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

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>

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

spaces/pages/employees/timetracking.vue

@@ -216,7 +216,11 @@ const setState = async (newState) => {
 </script>
 
 <template>
-  <InputGroup>
+  <UDashboardNavbar title="Zeiterfassung">
+
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
       <UButton
           @click="startTime"
           :disabled="runningTimeInfo.id "
@@ -245,8 +249,8 @@ const setState = async (newState) => {
           {{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
         </template>
       </USelectMenu>
-  </InputGroup>
-
+    </template>
+  </UDashboardToolbar>
   <div v-if="runningTimeInfo.id" class="mt-3">
 
     Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}

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,25 +24,39 @@
       >
         + Rechnung
       </UButton>
-
-      <UInput
-          v-model="searchString"
-          placeholder="Suche..."
-      />
-
+    </template>
+  </UDashboardNavbar>
+  <UDashboardToolbar>
+    <template #left>
       <UCheckbox
           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"
+      :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: 'Noch keine Einträge' }"
+      :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>
@@ -88,9 +111,6 @@
     </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 {

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>

spaces/pages/workingtimes.vue

@@ -26,6 +26,9 @@ const timeColumns = [
 </script>
 
 <template>
+  <UDashboardNavbar title="Anwesenheiten">
+
+  </UDashboardNavbar>
   <UTable
     :rows="dataStore.workingtimes"
     :columns="timeColumns"