Changes

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>