Changed to new Layout System

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")}}

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 {

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"