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

pages/customers/index.vue

@@ -1,166 +1,24 @@
 <template>
-  <UDashboardNavbar title="Kunden" :badge="filteredRows.length">
-    <template #right>
-      <UInput
-          id="searchinput"
-          name="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(`/customers/create/`)">+ Kunde</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(`/customers/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Kunden anzuzeigen' }"
-  >
-    <template #name-data="{row}">
-      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.name}}</span>
-      <span v-else>{{row.name}}</span>
-    </template>
-    <template #isCompany-data="{row}">
-      <span v-if="row.isCompany">Firmenkunden</span>
-      <span v-else>Privatkunde</span>
-    </template>
-    <template #active-data="{row}">
-      <span v-if="row.active" class="text-primary-500">Aktiv</span>
-      <span v-else class="text-rose-500">Gesperrt</span>
-    </template>
-    <template #address-data="{row}">
-      {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip ? row.infoData.zip : ""}} {{row.infoData.city ? `${row.infoData.city}, ` : ''}} {{row.infoData.country}}
-    </template>
-  </UTable>
+  <EntityList
+      type="customers"
+      :items="items"
+  ></EntityList>
 </template>
 
 <script setup>
+import EntityList from "~/components/EntityList.vue";
+
 definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/customers/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/customers/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 supabase = useSupabaseClient()
-
 const items = ref([])
-const selectedItem = ref(0)
 
 const setupPage = async () => {
   items.value = await useSupabaseSelect("customers",null,"customerNumber")
 }
 
 setupPage()
-
-
-
-const templateColumns = [
-  {
-    key: 'customerNumber',
-    label: "Kundennr.",
-    sortable: true
-  },
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "isCompany",
-    label: "Typ",
-    sortable: true
-  },
-  {
-    key: "notes",
-    label: "Notizen",
-    sortable: true
-  },
-  {
-    key: "active",
-    label: "Aktiv",
-    sortable: true
-  },
-  {
-    key: "address",
-    label: "Adresse",
-    sortable: true
-  }
-]
-const selectedColumns = ref(templateColumns)
-const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
-
-
-const searchString = ref('')
-
-const filteredRows = computed(() => {
-  return useSearch(searchString.value, items.value)
-
-
-})
 </script>
 
 <style scoped>