Corrected Incoming Invoice

Added Column Selection to Customers,Vendors and Contacts

spaces/pages/contacts/index.vue

@@ -6,16 +6,40 @@
         v-model="searchString"
         placeholder="Suche..."
     />
+
+    <USelectMenu
+        v-model="selectedColumns"
+        multiple
+        :options="columnTemplate"
+        :uiMenu="{width:'w-40'}"
+        :popper="{placement: 'bottom-start'}"
+        by="key"
+    >
+      <UButton
+          color="gray"
+          variant="ghost"
+          class="flex-1 justify-between"
+          icon="i-heroicons-view-columns"
+      />
+
+      <template #option="{ option }">
+        {{option.label}}
+      </template>
+    </USelectMenu>
   </Toolbar>
 
 
   <div class="table">
     <UTable
         :rows="filteredRows"
-        :columns="itemColumns"
+        :columns="selectedColumns"
         @select="selectItem"
         :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
     >
+      <template #active-data="{row}">
+        <span v-if="row.active" class="text-primary-500">Aktiv</span>
+        <span v-else class="text-rose">Gesperrt</span>
+      </template>
       <template #customer-data="{row}">
         {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : ''}}
       </template>
@@ -37,7 +61,7 @@ const dataStore = useDataStore()
 const router = useRouter()
 const mode = ref("show")
 
-const itemColumns = [
+const columnTemplate = ref([
 
   {
     key: "fullName",
@@ -57,8 +81,45 @@ const itemColumns = [
   {
     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([
+  {
+    key: "fullName",
+    label: "Name",
+    sortable: true
+  },
+  {
+    key: "customer",
+    label: "Kunde",
+    sortable: true
+  },
+  {
+    key: "vendor",
+    label: "Lieferant",
+    sortable: true
+  },
+])
 
 
 const selectItem = (item) => {