Many Changes in Navigation, Shortcuts, Search and Data Pulling directly from Supabase

2024-06-05 14:34:23 +02:00
parent e139eb771c
commit bc24f49476
27 changed files with 779 additions and 337 deletions
--- a/pages/customers/[mode]/[[id]].vue
+++ b/pages/customers/[mode]/[[id]].vue
@@ -1,5 +1,7 @@
 <script setup>

+import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
+
 definePageMeta({
  middleware: "auth"
 })
@@ -26,7 +28,6 @@ const router = useRouter()
 const toast = useToast()
 const id = ref(route.params.id ? route.params.id : null )

-let currentItem = ref(null)
 const openTab = ref(0)


@@ -45,20 +46,19 @@ const oldItemInfo = ref({})
 //Functions
 const setupPage = async () => {
  if(mode.value === "show" || mode.value === "edit"){
-    currentItem.value = await dataStore.getCustomerById(Number(useRoute().params.id))
+    itemInfo.value = await useSupabaseSelectSingle("customers",route.params.id,"*, contacts(*)")
  }

-  if(mode.value === "edit") itemInfo.value = currentItem.value
-  if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
+  if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
 }

 const editItem = async () => {
-  await router.push(`/customers/edit/${currentItem.value.id}`)
+  await router.push(`/customers/edit/${itemInfo.value.id}`)
 }

 const cancelEditorCreate = () => {
-  if(currentItem.value) {
-    router.push(`/customers/show/${currentItem.value.id}`)
+  if(itemInfo.value) {
+    router.push(`/customers/show/${itemInfo.value.id}`)
  } else {
    router.push(`/customers`)
  }
@@ -74,7 +74,7 @@ setupPage()

 <template>
  <UDashboardNavbar
-      :title="currentItem ? `Kunde: ${currentItem.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')"
+      :title="itemInfo ? `Kunde: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')"
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
@@ -88,9 +88,9 @@ setupPage()
    </template>
    <template #center>
      <h1
-          v-if="currentItem"
-          :class="['text-xl','font-medium', ... currentItem.active ? ['text-primary'] : ['text-rose-500']]"
-      >{{currentItem ? `Kunde: ${currentItem.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')}}</h1>
+          v-if="itemInfo"
+          :class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
+      >{{itemInfo ? `Kunde: ${itemInfo.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')}}</h1>
    </template>
    <template #right>
      <UButton
@@ -120,9 +120,9 @@ setupPage()
        Bearbeiten
      </UButton>
    </template>
-    <template #badge v-if="currentItem">
+    <template #badge v-if="itemInfo">
      <UBadge
-          v-if="currentItem.active"
+          v-if="itemInfo.active"
      >
        Aktiv
      </UBadge>
@@ -136,7 +136,7 @@ setupPage()
  </UDashboardNavbar>

  <UTabs
-      v-if="currentItem && mode == 'show'"
+      v-if="itemInfo.id && mode == 'show'"
      :items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
      class="p-5"
      v-model="openTab"
@@ -146,28 +146,28 @@ setupPage()
        <div class="w-1/2 mr-5">
          <UCard >
            <div class="text-wrap">
-              <p>Kundennummer: {{currentItem.customerNumber}}</p>
-              <p>Typ: {{currentItem.isCompany ? 'Firma' : 'Privatperson'}}</p>
-              <p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
-              <p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
-              <p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
-              <p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
-              <p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
-              <p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
-              <p>Notizen:<br> {{currentItem.notes}}</p>
+              <p>Kundennummer: {{itemInfo.customerNumber}}</p>
+              <p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
+              <p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
+              <p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
+              <p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
+              <p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
+              <p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
+              <p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
+              <p>Notizen:<br> {{itemInfo.notes}}</p>
            </div>

          </UCard>
          <UCard class="mt-5">
            <Toolbar>
              <UButton
-                  @click="router.push(`/contacts/create?customer=${currentItem.id}`)"
+                  @click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
              >
                + Ansprechpartner
              </UButton>
            </Toolbar>
            <UTable
-                :rows="dataStore.getContactsByCustomerId(currentItem.id)"
+                :rows="dataStore.getContactsByCustomerId(itemInfo.id)"
                @select="(row) => router.push(`/contacts/show/${row.id}`)"
                :columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
@@ -181,8 +181,8 @@ setupPage()
          <UCard class="h-full">
            <HistoryDisplay
                type="customer"
-                v-if="currentItem"
-                :element-id="currentItem.id"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
                :render-headline="true"
            />
          </UCard>
@@ -197,13 +197,13 @@ setupPage()
      <div v-if="item.label === 'Projekte'">
        <Toolbar>
          <UButton
-              @click="router.push(`/projects/create?customer=${currentItem.id}`)"
+              @click="router.push(`/projects/create?customer=${itemInfo.id}`)"
          >
            + Projekt
          </UButton>
        </Toolbar>
        <UTable
-            :rows="dataStore.getProjectsByCustomerId(currentItem.id)"
+            :rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
            @select="(row) => router.push(`/projects/show/${row.id}`)"
            :columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
@@ -217,13 +217,13 @@ setupPage()
      <div v-else-if="item.label === 'Objekte'">
        <Toolbar>
          <UButton
-              @click="router.push(`/plants/create?customer=${currentItem.id}`)"
+              @click="router.push(`/plants/create?customer=${itemInfo.id}`)"
          >
            + Objekt
          </UButton>
        </Toolbar>
        <UTable
-            :rows="dataStore.getPlantsByCustomerId(currentItem.id)"
+            :rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
            @select="(row) => router.push(`/plants/show/${row.id}`)"
            :columns="[{label: 'Name', key: 'name'}]"
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
@@ -235,13 +235,13 @@ setupPage()
      <div v-else-if="item.label === 'Verträge'">
        <Toolbar>
          <UButton
-              @click="router.push(`/contracts/create?customer=${currentItem.id}`)"
+              @click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
          >
            + Vertrag
          </UButton>
        </Toolbar>
        <UTable
-            :rows="dataStore.getContractsByCustomerId(currentItem.id)"
+            :rows="dataStore.getContractsByCustomerId(itemInfo.id)"
            @select="(row) => router.push(`/contracts/show/${row.id}`)"
            :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
--- a/pages/customers/index.vue
+++ b/pages/customers/index.vue
@@ -46,6 +46,10 @@
      @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>
@@ -74,10 +78,24 @@ defineShortcuts({
  '+': () => {
    router.push("/customers/create")
  },
-  'enter': {
-    usingInput: "searchinput",
+  'Enter': {
+    usingInput: true,
    handler: () => {
-      router.push(`/customers/show/${selectedEntry.value}`)
+      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
    }
  }

@@ -87,6 +105,18 @@ defineShortcuts({

 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 = [
  {
@@ -125,22 +155,11 @@ const columns = computed(() => templateColumns.filter((column) => selectedColumn


 const searchString = ref('')
-const selectedEntry = ref(null)

 const filteredRows = computed(() => {
-  if(!searchString.value) {
-    return dataStore.customers
-  }
+  return useSearch(searchString.value, items.value)

-  let results =  dataStore.customers.filter(item => {
-    return Object.values(item).some((value) => {
-      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
-    })
-  })

-  selectedEntry.value = results[0].id
-
-  return results
 })
 </script>