Introduced EntityTable

components/EntityList.vue

@@ -1,6 +1,7 @@
 <script setup>
 import {useTempStore} from "~/stores/temp.js";
 import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
+import EntityTable from "~/components/EntityTable.vue";
 
 const props = defineProps({
   type: {
@@ -57,11 +58,6 @@ const tempStore = useTempStore()
 
 const dataType = dataStore.dataTypes[type]
 
-//Old
-
-const selectedItem = ref(0)
-
-
 const selectedColumns = ref(tempStore.columns[type] ? tempStore.columns[type] : dataType.templateColumns.filter(i => !i.disabledInTable))
 const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
 
@@ -185,53 +181,11 @@ const filteredRows = computed(() => {
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-  <UTable
+  <EntityTable
-      :rows="filteredRows"
+    :type="props.type"
-      :columns="columns"
+    :columns="columns"
-      class="w-full"
+    :rows="filteredRows"
-      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+  />
-      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
-  >
-    <template
-        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
-        v-slot:[`${column.key}-header`]="{row}">
-      <span class="text-nowrap">{{column.label}}</span>
-    </template>
-    <template #name-data="{row}">
-      <span
-          v-if="row.id === filteredRows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.name}}
-      </span>
-      <span v-else>
-        {{row.name}}
-      </span>
-    </template>
-    <template #fullName-data="{row}">
-      <span
-          v-if="row.id === filteredRows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.fullName}}
-      </span>
-      <span v-else>
-        {{row.fullName}}
-      </span>
-    </template>
-    <template #licensePlate-data="{row}">
-      <span
-          v-if="row.id === filteredRows[selectedItem].id"
-          class="text-primary-500 font-bold">{{row.licensePlate}}
-      </span>
-      <span v-else>
-        {{row.licensePlate}}
-      </span>
-    </template>
-    <template
-        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
-        v-slot:[`${column.key}-data`]="{row}">
-      <component v-if="column.component" :is="column.component" :row="row"></component>
-      <span v-else>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
-    </template>
-  </UTable>
 </template>
 
 <style scoped>

components/EntityTable.vue

@@ -0,0 +1,110 @@
+<script setup>
+  defineShortcuts({
+    /*'/': () => {
+      //console.log(searchinput)
+      //searchinput.value.focus()
+      document.getElementById("searchinput").focus()
+    },*/
+    'Enter': {
+      usingInput: true,
+      handler: () => {
+        router.push(`/standardEntity/${props.type}/show/${props.rows.value[selectedItem.value].id}`)
+      }
+    },
+    'arrowdown': () => {
+      if(selectedItem.value < props.rows.length - 1) {
+        selectedItem.value += 1
+      } else {
+        selectedItem.value = 0
+      }
+    },
+    'arrowup': () => {
+      if(selectedItem.value === 0) {
+        selectedItem.value = props.rows.length - 1
+      } else {
+        selectedItem.value -= 1
+      }
+    }
+  })
+
+  const props = defineProps({
+    rows: {
+      type: Array,
+      required: true,
+      default: []
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    }
+  })
+
+  const dataStore = useDataStore()
+
+  const router = useRouter()
+
+  const dataType = dataStore.dataTypes[props.type]
+
+  const selectedItem = ref(0)
+
+
+</script>
+
+<template>
+  <UTable
+      v-if="dataType && columns"
+      :rows="props.rows"
+      :columns="props.columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+  >
+    <template
+        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
+        v-slot:[`${column.key}-header`]="{row}">
+      <span class="text-nowrap">{{column.label}}</span>
+    </template>
+    <template #name-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.name}}
+      </span>
+      <span v-else>
+        {{row.name}}
+      </span>
+    </template>
+    <template #fullName-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.fullName}}
+      </span>
+      <span v-else>
+        {{row.fullName}}
+      </span>
+    </template>
+    <template #licensePlate-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.licensePlate}}
+      </span>
+      <span v-else>
+        {{row.licensePlate}}
+      </span>
+    </template>
+    <template
+        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
+        v-slot:[`${column.key}-data`]="{row}">
+      <component v-if="column.component" :is="column.component" :row="row"></component>
+      <span v-else>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
+    </template>
+  </UTable>
+</template>
+
+<style scoped>
+
+</style>