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

components/EntityList.vue

@@ -122,6 +122,7 @@ const filteredRows = computed(() => {
         </template>
       </USelectMenu>
       <USelectMenu
+          v-if="selectableFilters.length > 0"
           icon="i-heroicons-adjustments-horizontal-solid"
           multiple
           v-model="selectedFilters"
@@ -133,7 +134,6 @@ const filteredRows = computed(() => {
       </USelectMenu>
     </template>
   </UDashboardToolbar>
-
   <UTable
       :rows="filteredRows"
       :columns="columns"
@@ -142,8 +142,35 @@ const filteredRows = computed(() => {
       @select="(i) => router.push(`/projects/show/${i.id}`) "
       :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
   >
+    <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"
+        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate')"
         v-slot:[`${column.key}-data`]="{row}">
       <component v-if="column.component" :is="column.component" :row="row"></component>
       <span v-else>{{row[column.key]}}</span>

components/MainNav.vue

@@ -68,11 +68,6 @@ const links = computed(() => {
         }
       ]
     },
-    /*{
-      label: "E-Mail",
-      to: "/email",
-      icon: "i-heroicons-envelope"
-    },*/
     ... dataStore.ownTenant.features.contacts ? [{
       label: "Kontakte",
       defaultOpen: false,
@@ -223,7 +218,7 @@ const links = computed(() => {
       to: "/contracts",
       icon: "i-heroicons-clipboard-document"
     }] : [],
-    ... (role.checkRight("objects") && dataStore.ownTenant.features.objects) ? [{
+    ... (role.checkRight("plants") && dataStore.ownTenant.features.objects) ? [{
       label: "Objekte",
       to: "/plants",
       icon: "i-heroicons-clipboard-document"

components/columnRenderings/active.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.active ? 'Ja' : 'Nein'}}</span>
+</template>

components/columnRenderings/sellingPrice.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.sellingPrice ? useCurrency(props.row.sellingPrice) : ''}}</span>
+</template>

components/columnRenderings/unit.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.unit ? props.row.unit.name : ''}}</span>
+</template>

components/columnRenderings/vendor.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps({
+  row: {
+    type: Object,
+    required: true,
+    default: {}
+  }
+})
+</script>
+
+<template>
+  <span>{{props.row.vendor ? props.row.vendor.name : ''}}</span>
+</template>

composables/useCurrency.js

@@ -0,0 +1,3 @@
+export const useCurrency = (value,currencyString = " €") => {
+    return `${Number(value).toFixed(2).replace(".",",")} ${currencyString}`
+}

composables/useRole.js

@@ -1,28 +1,5 @@
 
 
-/*const rights2 = ref({
-    projects: {
-        label: "Projekte",
-        children: {
-            viewOwnProjects: {label: "Eigene Projekte sehen"},
-            viewAllProjects: {label: "Alle Projekte sehen"},
-        }
-    },
-    createUser: {label: "Benutzer erstellen"},
-    modifyUser: {label: "Benutzer bearbeiten"},
-    deactivateUser: {label: "Benutzer sperren"},
-    createProject: {label: "Projekt erstellen"},
-
-    createTask: {label: "Aufgabe erstellen"},
-    viewOwnTasks: {label:"Eigene Aufgaben sehen"},
-    viewAllTasks: {label: "Alle Aufgaben sehen"},
-    trackOwnTime: {label:"Eigene Zeite erfassen"},
-    createOwnTime: {label:"Eigene Zeiten erstellen"},
-    createTime: {label:"Zeiten erstellen"},
-    viewOwnTimes: {label:"Eigene Zeiten anzeigen"},
-    viewTimes: {label:"Zeiten anzeigen"},
-})*/
-
 
 
 

pages/contacts/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <UDashboardNavbar title="Ansprechpartner" :badge="filteredRows.length">
+  <EntityList
+      type="contacts"
+      :items="items"
+  ></EntityList>
+
+  <!--  <UDashboardNavbar title="Ansprechpartner" :badge="filteredRows.length">
     <template #right>
       <UInput
           id="searchinput"
@@ -58,53 +63,17 @@
     <template #vendor-data="{row}">
       {{row.vendor ? row.vendor.name : ""}}
     </template>
-  </UTable>
+  </UTable>-->
 </template>
 
 <script setup>
-
+import EntityList from "~/components/EntityList.vue";
-import {useSearch} from "~/composables/useSearch.js";
 
 definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/contacts/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/contacts/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("contacts","*, customer(name), vendor(name)")
@@ -112,49 +81,9 @@ const setupPage = async () => {
 
 setupPage()
 
-
-
 const templateColumns = [
 
-  {
+
-    key: "fullName",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "customer",
-    label: "Kunde",
-    sortable: true
-  },
-  {
-    key: "vendor",
-    label: "Lieferant",
-    sortable: true
-  },
-  {
-    key: "role",
-    label: "Rolle",
-  },
-  {
-    key: "email",
-    label: "E-Mail",
-  },
-  {
-    key: "phoneMobile",
-    label: "Mobil",
-  },
-  {
-    key: "phoneHome",
-    label: "Festnetz",
-  },
-  {
-    key: "active",
-    label: "Aktiv",
-  },
-  {
-    key: "birtday",
-    label: "Geburtstag",
-  }
 ]
 const selectedColumns = ref(templateColumns)
 const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))

pages/contracts/index.vue

@@ -1,54 +1,8 @@
 <template>
-  <UDashboardNavbar title="Verträge" :badge="filteredRows.length">
+  <EntityList
-    <template #right>
+    :items="items"
-      <UInput
+    type="contracts"
-          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(`/contracts/create`)">+ Vertrag</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(`/contracts/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Verträge anzuzeigen' }"
-  >
-    <template #customer-data="{row}">
-      <span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.customer ? row.customer.name : ""}}</span>
-      <span v-else>{{row.customer ? row.customer.name : ""}}</span>
-    </template>
-  </UTable>
 </template>
 
 <script setup>
@@ -56,74 +10,12 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/contracts/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/contracts/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("contracts","*, customer(id,name)")
 }
 
 setupPage()
-
-const templateColumns = [
-  {
-    key: 'customer',
-    label: "Kunde",
-    sortable: true
-  },
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "notes",
-    label: "Notizen"
-  }
-]
-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>

pages/customers/index.vue

@@ -1,166 +1,24 @@
 <template>
-  <UDashboardNavbar title="Kunden" :badge="filteredRows.length">
+  <EntityList
-    <template #right>
+      type="customers"
-      <UInput
+      :items="items"
-          id="searchinput"
+  ></EntityList>
-          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>
 </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>

pages/plants/index.vue

@@ -1,137 +1,22 @@
 <template>
-  <UDashboardNavbar title="Objekte" :badge="filteredRows.length" >
+  <EntityList
-    <template #right>
+    :items="items"
-      <UInput
+    type="plants"
-          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(`/plants/create`)">+ Objekt</UButton>
-    </template>
-  </UDashboardNavbar>
-
-  <UDashboardToolbar>
-    <template #left>
-
-
-      <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"
-          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(`/plants/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Objekte anzuzeigen' }"
-  >
-    <template #customer-data="{row}">
-      {{row.customer ? row.customer.name : ""}}
-    </template>
-  </UTable>
-
 </template>
 
 <script setup>
-
-import {useListFilter} from "~/composables/useSearch.js";
-
 definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/plants/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/plants/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("plants","*, customer(id,name)")
 }
 
 setupPage()
 
-const templateColumns = [
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },{
-    key: "customer",
-    label: "Kunde",
-    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>

pages/productcategories/index.vue

@@ -1,58 +1,8 @@
 <template>
-  <UDashboardNavbar title="Artikelkategorien" :badge="filteredRows.length">
+  <EntityList
-    <template #right>
+    :items="items"
-      <UInput
+    type="productcategories"
-          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(`/productcategories/create`)">+ Artikelkategorie</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(`/productcategories/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikelkategorien 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>
-  </UTable>
-
 </template>
 
 <script setup>
@@ -61,77 +11,12 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/productscategories/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/productscategories/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("productcategories","*")
 }
 
 setupPage()
-
-
-const templateColumns = [
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "description",
-    label: "Beschreibung",
-    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>

pages/products/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <UDashboardNavbar title="Artikel" :badge="filteredRows.length">
+  <EntityList
+    :items="items"
+    type="products"
+  />
+<!--  <UDashboardNavbar title="Artikel" :badge="filteredRows.length">
     <template #right>
       <UInput
           id="searchinput"
@@ -87,7 +91,7 @@
     <template #productcategories-data="{row}">
       {{row.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}
     </template>
-  </UTable>
+  </UTable>-->
 
 </template>
 
@@ -97,122 +101,15 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/products/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/products/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 productcategories = ref([])
-const selectedItem = ref(0)
 
 const setupPage = async () => {
-  items.value = await useSupabaseSelect("products","*")
+  items.value = await useSupabaseSelect("products","*, unit(name)")
   productcategories.value = await useSupabaseSelect("productcategories", "*")
 }
 
 setupPage()
-
-
-const templateColumns = [
-  {
-    key: "stock",
-    label: "Bestand"
-  },
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "description",
-    label: "Beschreibung",
-    sortable: true
-  },
-  {
-    key: "manufacturer",
-    label: "Hersteller",
-    sortable: true
-  },
-  {
-    key: "unit",
-    label: "Einheit",
-    sortable: true
-  },
-  {
-    key: "sellingPrice",
-    label: "Verkaufpreispreis",
-    sortable: true
-  },
-  {
-    key: "tags",
-    label: "Tags",
-    sortable: true
-  },
-  {
-    key: "productcategories",
-    label: "Artikelkategorien",
-    sortable: true
-  }
-]
-const selectedColumns = ref(templateColumns)
-const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
-
-const templateTags = computed(() => {
-  let temp = []
-
-  dataStore.products.forEach(row => {
-    row.tags.forEach(tag => {
-      if(!temp.includes(tag)) temp.push(tag)
-    })
-  })
-
-  return temp
-
-})
-const selectedTags = ref(templateTags.value)
-
-
-const searchString = ref('')
-
-const filteredRows = computed(() => {
-  let temp = items.value.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
-
-  return useSearch(searchString.value, temp)
-
-})
-
-
-
 </script>
 
 <style scoped>

pages/projects/index.vue

@@ -2,7 +2,6 @@
   <EntityList
       type="projects"
       :items="items"
-      :filters="filters"
   ></EntityList>
 </template>
 
@@ -13,11 +12,6 @@ definePageMeta({
   middleware: "auth"
 })
 
-
-
-const dataStore = useDataStore()
-const router = useRouter()
-
 const items = ref([])
 
 const setupPage = async () => {

pages/servicecategories/index.vue

@@ -1,58 +1,8 @@
 <template>
-  <UDashboardNavbar title="Leistungskategorien" :badge="filteredRows.length">
+  <EntityList
-    <template #right>
+    :items="items"
-      <UInput
+    type="servicecategories"
-          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(`/servicecategories/create`)">+ Leistungskategorie</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(`/servicecategories/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungskategorien 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>
-  </UTable>
-
 </template>
 
 <script setup>
@@ -61,77 +11,12 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/servicecategories/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/servicecategories/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("servicecategories","*")
 }
 
 setupPage()
-
-
-const templateColumns = [
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "description",
-    label: "Beschreibung",
-    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>

pages/services/index.vue

@@ -1,66 +1,8 @@
 <template>
-  <UDashboardNavbar title="Leistungen" :badge="filteredRows.length">
+  <EntityList
-    <template #right>
+    :items="items"
-      <UInput
+    type="services"
-          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(`/services/create`)">+ Leistung</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(`/services/show/${i.id}`) "
-      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen 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 #sellingPrice-data="{row}">
-      {{row.sellingPrice ? Number(row.sellingPrice).toFixed(2) + " €" : ""}}
-    </template>
-    <template #unit-data="{row}">
-      {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
-    </template>
-  </UTable>
 
 </template>
 
@@ -69,83 +11,13 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/services/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/services/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 supabase = useSupabaseClient()
-const router = useRouter()
-
 const items = ref([])
-const selectedItem = ref(0)
-
 const setupPage = async () => {
-  items.value = await useSupabaseSelect("services","*")
+  items.value = await useSupabaseSelect("services","*, unit(name)")
 }
 
 setupPage()
 
-
-const templateColumns = [
-  {
-    key: "name",
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "unit",
-    label: "Einheit",
-    sortable: true
-  },
-  {
-    key: "sellingPrice",
-    label: "Verkaufspreis",
-    sortable: true
-  }/*,
-  {
-    key: "tags",
-    label: "Tags",
-    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>

pages/vehicles/index.vue

@@ -1,60 +1,8 @@
 <template>
-  <UDashboardNavbar title="Fahrzeuge" :badge="filteredRows.length">
+  <EntityList
-    <template #right>
+    :items="items"
-      <UInput
+    type="vehicles"
-          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>
 </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>

pages/vendors/index.vue

@@ -1,5 +1,11 @@
 <template>
-  <UDashboardNavbar title="Lieferanten" :badge="filteredRows.length">
+  <EntityList
+    :items="items"
+    type="vendors"
+  />
+
+
+  <!--  <UDashboardNavbar title="Lieferanten" :badge="filteredRows.length">
     <template #right>
       <UInput
           id="searchinput"
@@ -53,7 +59,7 @@
     <template #address-data="{row}">
       {{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
     </template>
-  </UTable>
+  </UTable>-->
 
 </template>
 
@@ -62,35 +68,7 @@ definePageMeta({
   middleware: "auth"
 })
 
-defineShortcuts({
-  '/': () => {
-    //console.log(searchinput)
-    //searchinput.value.focus()
-    document.getElementById("searchinput").focus()
-  },
-  '+': () => {
-    router.push("/vendors/create")
-  },
-  'Enter': {
-    usingInput: true,
-    handler: () => {
-      router.push(`/vendors/show/${filteredRows.value[selectedItem.value].id}`)
-    }
-  },
-  'arrowdown': () => {
-    selectedItem.value += 1
-  },
-  'arrowup': () => {
-    selectedItem.value -= 1
-  }
-})
-
-const dataStore = useDataStore()
-const router = useRouter()
-const mode = ref("show")
-
 const items = ref([])
-const selectedItem = ref(0)
 
 const setupPage = async () => {
   items.value = await useSupabaseSelect("vendors","*","vendorNumber")
@@ -100,30 +78,8 @@ setupPage()
 
 
 const templateColumns = [
-  {
+
-    key: 'vendorNumber',
-    label: "Lieferantennr.",
-    sortable: true
-  },
-  {
-    key: "name",
-    label: "Name",
-    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>

stores/data.js

@@ -8,6 +8,11 @@ import {useNumberRange} from "~/composables/useNumberRange.js";
 import projecttype from "~/components/columnRenderings/projecttype.vue"
 import customer from "~/components/columnRenderings/customer.vue"
 import plant from "~/components/columnRenderings/plant.vue"
+import vendor from "~/components/columnRenderings/vendor.vue"
+import active from "~/components/columnRenderings/active.vue"
+import sellingPrice from "~/components/columnRenderings/sellingPrice.vue";
+import unit from "~/components/columnRenderings/unit.vue";
+
 
 // @ts-ignore
 export const useDataStore = defineStore('data', () => {
@@ -29,18 +34,102 @@ export const useDataStore = defineStore('data', () => {
             labelSingle: "Kunde",
             redirect:true,
             numberRangeHolder: "customerNumber",
-            historyItemHolder: "customer"
+            historyItemHolder: "customer",
+            filters: [],
+            templateColumns: [
+                {
+                    key: 'customerNumber',
+                    label: "Kundennummer",
+                },
+                {
+                    key: "name",
+                    label: "Name"
+                },
+                {
+                    key: "isCompany",
+                    label: "Typ"
+                },
+                {
+                    key: "notes",
+                    label: "Notizen"
+                },
+                {
+                    key: "active",
+                    label: "Aktiv",
+                    component: active
+                },
+                {
+                    key: "address",
+                    label: "Adresse",
+                }
+            ]
         },
         contacts: {
             label: "Kontakte",
             labelSingle: "Kontakt",
             redirect:true,
-            historyItemHolder: "contact"
+            historyItemHolder: "contact",
+            filters: [],
+            templateColumns: [
+                {
+                    key: "fullName",
+                    label: "Name",
+                },
+                {
+                    key: "customer",
+                    label: "Kunde",
+                    component: customer
+                },
+                {
+                    key: "vendor",
+                    label: "Lieferant",
+                    component: vendor
+                },
+                {
+                    key: "role",
+                    label: "Rolle",
+                },
+                {
+                    key: "email",
+                    label: "E-Mail",
+                },
+                {
+                    key: "phoneMobile",
+                    label: "Mobil",
+                },
+                {
+                    key: "phoneHome",
+                    label: "Festnetz",
+                },
+                {
+                    key: "active",
+                    label: "Aktiv",
+                    component: active
+                },
+                {
+                    key: "birtday",
+                    label: "Geburtstag",
+                }
+            ]
         },
         contracts: {
             label: "Verträge",
             labelSingle: "Vertrag",
-            redirect:true
+            redirect:true,
+            filters:[],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name"
+                },{
+                    key: 'customer',
+                    label: "Kunde",
+                    component: customer
+                },{
+                    key: "notes",
+                    label: "Notizen"
+                }
+            ]
         },
         absencerequests: {
             label: "Abwesenheitsanträge",
@@ -51,12 +140,57 @@ export const useDataStore = defineStore('data', () => {
             label: "Objekte",
             labelSingle: "Objekt",
             redirect:true,
-            historyItemHolder: "plant"
+            historyItemHolder: "plant",
+            filters: [],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name"
+                },
+                {
+                    key: "customer",
+                    label: "Kunde",
+                    component: customer
+                }
+            ]
         },
         products: {
             label: "Artikel",
             labelSingle: "Artikel",
-            redirect:true
+            redirect:true,
+            filters: [],
+            templateColumns: [
+                {
+                    key: "name",
+                    label:"Name"
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung"
+                },
+                {
+                    key: "manufacturer",
+                    label: "Hersteller"
+                },
+                {
+                    key: "unit",
+                    label: "Einheit",
+                    component: unit
+                },
+                {
+                    key: "sellingPrice",
+                    label: "Verkaufpreispreis",
+                    component: sellingPrice
+                },
+                {
+                    key: "tags",
+                    label: "Tags"
+                },
+                {
+                    key: "productcategories",
+                    label: "Artikelkategorien"
+                }
+            ]
         },
         projects: {
             label: "Projekte",
@@ -117,14 +251,51 @@ export const useDataStore = defineStore('data', () => {
             label: "Fahrzeuge",
             labelSingle: "Fahrzeug",
             redirect:true,
-            historyItemHolder: "vehicle"
+            historyItemHolder: "vehicle",
+            filters:[],
+            templateColumns:[
+                {
+                    key: 'active',
+                    label: "Aktiv",
+                    component: active
+                },{
+                    key: 'licensePlate',
+                    label: "Kennzeichen"
+                },{
+                    key: 'vin',
+                    label: "Identifikationnummer"
+                },
+                {
+                    key: "type",
+                    label: "Typ",
+                }
+            ]
         },
         vendors: {
             label: "Lieferanten",
             labelSingle: "Lieferant",
             redirect:true,
             numberRangeHolder: "vendorNumber",
-            historyItemHolder: "vendor"
+            historyItemHolder: "vendor",
+            filters: [],
+            templateColumns: [
+                {
+                    key: 'vendorNumber',
+                    label: "Lieferantennummer",
+                },
+                {
+                    key: "name",
+                    label: "Name"
+                },
+                {
+                    key: "address",
+                    label: "Adresse"
+                },
+                {
+                    key: "notes",
+                    label: "Notizen"
+                }
+            ]
         },
         messages: {
             label: "Nachrichten",
@@ -159,7 +330,24 @@ export const useDataStore = defineStore('data', () => {
         services: {
             label: "Leistungen",
             labelSingle: "Leistung",
-            redirect: true
+            redirect: true,
+            filters: [],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name"
+                },
+                {
+                    key: "unit",
+                    label: "Einheit",
+                    component: unit
+                },
+                {
+                    key: "sellingPrice",
+                    label: "Verkaufspreis",
+                    component: sellingPrice
+                }
+            ]
         },
         events: {
             label: "Termine",
@@ -195,12 +383,34 @@ export const useDataStore = defineStore('data', () => {
         productcategories: {
             label: "Artikelkategorien",
             labelSingle: "Artikelkategorie",
-            redirect: true
+            redirect: true,
+            filters: [],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                }
+            ]
         },
         servicecategories: {
             label: "Leistungskategorie",
             labelSingle: "Leistungskategorien",
-            redirect: true
+            redirect: true,
+            filters: [],
+            templateColumns: [
+                {
+                    key: "name",
+                    label: "Name",
+                },
+                {
+                    key: "description",
+                    label: "Beschreibung",
+                }
+            ]
         },
         trackingtrips: {
             label: "Fahrten",