Rebuild General Layout to Nuxt UI PRO Dashboard

spaces/pages/tasks/index.vue

@@ -1,25 +1,64 @@
 <template>
+  <UDashboardPage>
+    <UDashboardPanel grow>
+      <UDashboardNavbar title="Aufgaben" :badge="filteredRows.length">
+        <template #right>
+          <UInput
+              ref="input"
+              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>
 
-  <div>
-    <Toolbar>
-      <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+          <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+        </template>
+      </UDashboardNavbar>
 
-      <UInput
-          v-model="searchString"
-          placeholder="Suche..."
-      />
+      <UDashboardToolbar>
+        <template #left>
+<!--          <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+
+          <UInput
+              v-model="searchString"
+              placeholder="Suche..."
+          />-->
+
+          <UCheckbox
+              label="Erledigte Anzeigen"
+              v-model="showDone"
+          />
+        </template>
+
+        <template #right>
+          <USelectMenu
+              v-model="selectedColumns"
+              icon="i-heroicons-adjustments-horizontal-solid"
+              :options="templateColumns"
+              multiple
+              class="hidden lg:block"
+          >
+            <template #label>
+              Spalten
+            </template>
+          </USelectMenu>
+        </template>
+      </UDashboardToolbar>
 
-      <UCheckbox
-          label="Erledigte Anzeigen"
-          v-model="showDone"
-      />
-    </Toolbar>
-    <div class="table">
       <UTable
+          v-model:sort="sort"
           :rows="filteredRows"
           :columns="columns"
-          @select="selectItem"
-          :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+          sort-mode="manual"
+          class="w-full"
+          :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+          @select="(i) => router.push(`/tasks/show/${i.id}`) "
       >
         <template #finish-data="{row}">
           <UButton
@@ -44,27 +83,37 @@
           {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : "" }}
         </template>
       </UTable>
-    </div>
-
-  </div>
+    </UDashboardPanel>
+  </UDashboardPage>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import  dayjs from "dayjs";
 
 definePageMeta({
   middleware: "auth"
 })
+const input = ref<{ input: HTMLInputElement }>()
 
 const dataStore = useDataStore()
 const router = useRouter()
 const mode = ref("show")
 
-const columns = [
 
-  {
+defineShortcuts({
+  '/': () => {
+    input.value?.input?.focus()
+  },
+  '+': () => {
+    router.push("/tasks/create")
+  }
+})
+
+const templateColumns = [
+
+  /*{
     key:"finish"
-  },{
+  },*/{
     key: "created_at",
     label: "Erstellt am:",
     sortable: true
@@ -95,6 +144,10 @@ const columns = [
   }
 ]
 
+const selectedColumns = ref(templateColumns)
+const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
+
+
 const searchString = ref('')
 const showDone = ref(false)