Changes

spaces/pages/services/index.vue

@@ -37,23 +37,21 @@
   </UDashboardToolbar>
 
 
-  <div class="table">
-    <UTable
-        :rows="filteredRows"
-        :columns="columns"
-        class="w-full"
-        :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-        @select="(i) => router.push(`/services/show/${i.id}`) "
-        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
-    >
-      <template #sellingPrice-data="{row}">
-        {{row.sellingPrice ? Number(row.sellingPrice).toFixed(2) + " €" : ""}}
-      </template>
-      <template #unit-data="{row}">
-        {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
-      </template>
-    </UTable>
-  </div>
+  <UTable
+      :rows="filteredRows"
+      :columns="columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/services/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
+  >
+    <template #sellingPrice-data="{row}">
+      {{row.sellingPrice ? Number(row.sellingPrice).toFixed(2) + " €" : ""}}
+    </template>
+    <template #unit-data="{row}">
+      {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
+    </template>
+  </UTable>
 
 </template>
 

spaces/pages/workingtimes.vue

@@ -3,7 +3,7 @@ import dayjs from "dayjs";
 
 const dataStore = useDataStore()
 
-const timeColumns = [
+const templateColumns = [
   {
     key: "state",
     label: "Status"
@@ -20,8 +20,13 @@ const timeColumns = [
   }, {
     key: "end",
     label: "Ende"
+  }, {
+    key: "device",
+    label: "Gerät"
   }
 ]
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
 
 </script>
 
@@ -29,13 +34,33 @@ const timeColumns = [
   <UDashboardNavbar title="Anwesenheiten">
 
   </UDashboardNavbar>
+  <UDashboardToolbar>
+    <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="dataStore.workingtimes"
-    :columns="timeColumns"
+    :columns="columns"
+    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten anzuzeigen' }"
   >
     <template #user-data="{row}">
       {{dataStore.getProfileById(row.user).fullName }}
     </template>
+    <template #device-data="{row}">
+      <!-- TODO: Load devices      -->
+    </template>
   </UTable>
 </template>