Reffractored vendors,vehicles,services,servicecategories,products,productcategories, projects, plants, customers, contracts, contacts

pages/vehicles/index.vue

@@ -1,60 +1,8 @@
 <template>
-  <UDashboardNavbar title="Fahrzeuge" :badge="filteredRows.length">
-    <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(`/vehicles/create`)">+ Fahrzeug</UButton>
-    </template>
-  </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="filteredRows"
-      :columns="columns"
-      class="w-full"
-      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
-      @select="(i) => router.push(`/vehicles/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
-  >
-    <template #active-data="{row}">
-      <UIcon
-          :name="row.active ? 'i-heroicons-check' : 'i-heroicons-x-mark'"
-          :class="['w-5', 'h-5', ... row.active ? ['text-primary-500'] : ['text-rose-600'] ]"
-      />
-
-    </template>
-    <template #licensePlate-data="{row}">
-      <span v-if="row === filteredRows[selectedItem]" class="font-bold text-primary-500">{{row.licensePlate}}</span>
-      <span v-else>{{row.licensePlate}}</span>
-    </template>
-  </UTable>
+  <EntityList
+    :items="items"
+    type="vehicles"
+  />
 </template>
 
 <script setup>
@@ -63,77 +11,12 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/vehicles/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/vehicles/show/${filteredRows.value[selectedItem.value].id}`)
-    }
-  },
-  'arrowdown': () => {
-    if(selectedItem.value < filteredRows.value.length - 1) {
-      selectedItem.value += 1
-    } else {
-      selectedItem.value = 0
-    }
-  },
-  'arrowup': () => {
-    if(selectedItem.value === 0) {
-      selectedItem.value = filteredRows.value.length - 1
-    } else {
-      selectedItem.value -= 1
-    }
-  }
-})
-
-const dataStore = useDataStore()
-const router = useRouter()
-
 const items = ref([])
-const selectedItem = ref(0)
-
 const setupPage = async () => {
   items.value = await useSupabaseSelect("vehicles","*")
 }
 
 setupPage()
-
-const templateColumns = [
-  {
-    key: 'active',
-    label: "Aktiv:",
-    sortable: true
-  },{
-    key: 'licensePlate',
-    label: "Kennzeichen:",
-    sortable: true
-  },{
-    key: 'vin',
-    label: "Identifikationnr.:",
-    sortable: true
-  },
-  {
-    key: "type",
-    label: "Typ:",
-    sortable: true
-  }
-]
-const selectedColumns = ref(templateColumns)
-const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
-
-const searchString = ref('')
-
-const filteredRows = computed(() => {
-  return useListFilter(searchString.value, items.value)
-})
 </script>
 
 <style scoped>