Added Searching in Service & Product Selection

Introduced Service Categories

pages/createDocument/edit/[[id]].vue

@@ -13,6 +13,9 @@ definePageMeta({
   middleware: "auth"
 })
 
+const showProductSelectionModal = ref(false)
+const showServiceSelectionModal = ref(false)
+
 
 const itemInfo = ref({
   type: "invoices",
@@ -58,11 +61,23 @@ const itemInfo = ref({
 
 const letterheads = ref([])
 const createdDocuments = ref([])
+const products = ref([])
+const productcategories = ref([])
+const selectedProductcategorie = ref(null)
+const services = ref([])
+const servicecategories = ref([])
+const selectedServicecategorie = ref(null)
 
 const setupPage = async () => {
 
   letterheads.value = (await useSupabaseSelect("letterheads","*")).filter(i => i.documentTypes.length === 0 || i.documentTypes.includes(itemInfo.value.type))
   createdDocuments.value = (await useSupabaseSelect("createddocuments","*"))
+  services.value = (await useSupabaseSelect("services","*"))
+  servicecategories.value = (await useSupabaseSelect("servicecategories","*"))
+  products.value = (await useSupabaseSelect("products","*"))
+  productcategories.value = (await useSupabaseSelect("productcategories","*"))
+  if(productcategories.value.length > 0) selectedProductcategorie.value = productcategories.value[0].id
+  if(servicecategories.value.length > 0) selectedServicecategorie.value = servicecategories.value[0].id
 
   if(route.params) {
     if(route.params.id) itemInfo.value = dataStore.getCreatedDocumentById(Number(route.params.id))
@@ -1215,24 +1230,67 @@ setupPage()
                       class="w-120"
                       v-else-if="row.mode === 'normal'"
                   >
-                    <USelectMenu
-                        class="max-w-60"
-                        :options="dataStore.products"
-                        :color="row.product ? 'primary' : 'rose'"
-                        option-attribute="name"
-                        value-attribute="id"
-                        searchable
-                        searchable-placeholder="Suche ..."
-                        :search-attributes="['name']"
-                        v-model="row.product"
-                        @change="row.unit = dataStore.getProductById(row.product).unit,
+                    <InputGroup>
+                      <USelectMenu
+                          class="max-w-60"
+                          :options="products"
+                          :color="row.product ? 'primary' : 'rose'"
+                          option-attribute="name"
+                          value-attribute="id"
+                          searchable
+                          searchable-placeholder="Suche ..."
+                          :search-attributes="['name']"
+                          v-model="row.product"
+                          @change="row.unit = dataStore.getProductById(row.product).unit,
                              row.price = (dataStore.getProductById(row.product).sellingPrice || 0),
                              row.description = dataStore.getProductById(row.product).description"
-                    >
-                      <template #label>
-                        <span class="truncate">{{row.product ? dataStore.getProductById(row.product).name : "Kein Produkt ausgewählt" }}</span>
-                      </template>
-                    </USelectMenu>
+                      >
+                        <template #label>
+                          <span class="truncate">{{row.product ? dataStore.getProductById(row.product).name : "Kein Produkt ausgewählt" }}</span>
+                        </template>
+                      </USelectMenu>
+                      <UButton
+                          icon="i-heroicons-magnifying-glass"
+                          @click="showProductSelectionModal = true"
+                      />
+                      <UModal v-model="showProductSelectionModal">
+                        <UCard>
+                          <template #header>
+                            Artikel Auswählen
+                          </template>
+
+                          <InputGroup class="w-full">
+                            <UFormGroup label="Artikelkategorie:">
+                              <USelectMenu
+                                  v-if="productcategories.length > 0"
+                                  :options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
+                                  value-attribute="id"
+                                  option-attribute="name"
+                                  v-model="selectedProductcategorie"
+                              />
+                            </UFormGroup>
+                          </InputGroup>
+                          <UTable
+                            :rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
+                            :columns="[
+                                {key: 'name',label:'Name'},
+                                {key: 'manufacturer',label:'Hersteller'},
+                                {key: 'articleNumber',label:'Artikelnummer'},
+                            ]"
+                            :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
+                            @select=" (i) => {
+                             row.product = i.id
+                             row.unit = dataStore.getProductById(row.product).unit,
+                             row.price = (dataStore.getProductById(row.product).sellingPrice || 0),
+                             row.description = dataStore.getProductById(row.product).description
+                              showProductSelectionModal = false}"
+                          >
+
+                          </UTable>
+                        </UCard>
+                      </UModal>
+                    </InputGroup>
+
 <!--
                     {{dataStore.getProductById(66)}}
 -->
@@ -1241,23 +1299,65 @@ setupPage()
                       class="w-120"
                       v-else-if="row.mode === 'service'"
                   >
-                    <USelectMenu
-                        :options="dataStore.services"
-                        :color="row.service ? 'primary' : 'rose'"
-                        option-attribute="name"
-                        value-attribute="id"
-                        searchable
-                        searchable-placeholder="Suche ..."
-                        :search-attributes="['name']"
-                        v-model="row.service"
-                        @change="row.unit = dataStore.getServiceById(row.service).unit,
-                             row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
-                             row.description = dataStore.getServiceById(row.service).description"
-                    >
-                      <template #label>
-                        <span class="truncate">{{dataStore.getServiceById(row.service) ? dataStore.getServiceById(row.service).name : "Keine Leistung ausgewählt" }}</span>
-                      </template>
-                    </USelectMenu>
+                    <InputGroup>
+                      <USelectMenu
+                          :options="services"
+                          :color="row.service ? 'primary' : 'rose'"
+                          option-attribute="name"
+                          value-attribute="id"
+                          searchable
+                          searchable-placeholder="Suche ..."
+                          :search-attributes="['name']"
+                          v-model="row.service"
+                          @change="row.unit = dataStore.getServiceById(row.service).unit,
+                               row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
+                               row.description = dataStore.getServiceById(row.service).description"
+                      >
+                        <template #label>
+                          <span class="truncate">{{dataStore.getServiceById(row.service) ? dataStore.getServiceById(row.service).name : "Keine Leistung ausgewählt" }}</span>
+                        </template>
+                      </USelectMenu>
+                      <UButton
+                          icon="i-heroicons-magnifying-glass"
+                          @click="showServiceSelectionModal = true"
+                      />
+                      <UModal v-model="showServiceSelectionModal">
+                        <UCard>
+                          <template #header>
+                            Leistung Auswählen
+                          </template>
+
+                          <InputGroup class="w-full">
+                            <UFormGroup label="Leistungskategorie:">
+                              <USelectMenu
+                                  v-if="servicecategories.length > 0"
+                                  :options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
+                                  value-attribute="id"
+                                  option-attribute="name"
+                                  v-model="selectedServicecategorie"
+                              />
+                            </UFormGroup>
+                          </InputGroup>
+                          <UTable
+                              :rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
+                              :columns="[
+                                  {key: 'name',label:'Name'},
+                                  {key: 'serviceNumber',label:'Leistungsnummer'},
+                                  {key: 'sellingPrice',label:'Verkaufspreis'},
+                              ]"
+                              :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
+                              @select=" (i) => {
+                               row.service = i.id
+                               row.unit = dataStore.getServiceById(row.service).unit,
+                               row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
+                               row.description = dataStore.getServiceById(row.service).description
+                                showServiceSelectionModal = false}"
+                          >
+
+                          </UTable>
+                        </UCard>
+                      </UModal>
+                    </InputGroup>
                   </td>
                   <td
                       class="w-20"

pages/servicecategories/[mode]/[[id]].vue

@@ -0,0 +1,179 @@
+<script setup>
+import HistoryDisplay from "~/components/HistoryDisplay.vue";
+import DocumentList from "~/components/DocumentList.vue";
+import DocumentUpload from "~/components/DocumentUpload.vue";
+import {useSupabaseSelect} from "~/composables/useSupabase.js";
+import dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+defineShortcuts({
+  'backspace': () => {
+    router.push("/servicecategories")
+  },
+  'arrowleft': () => {
+    if(openTab.value > 0){
+      openTab.value -= 1
+    }
+  },
+  'arrowright': () => {
+    if(openTab.value < 3) {
+      openTab.value += 1
+    }
+  },
+})
+
+const dataStore = useDataStore()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({})
+const openTab = ref(0)
+
+//Functions
+const setupPage = async () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    itemInfo.value = await useSupabaseSelectSingle("servicecategories",route.params.id,"*")
+  }
+
+
+}
+
+const cancelEditorCreate = () => {
+  if(itemInfo.value) {
+    router.push(`/servicecategories/show/${itemInfo.value.id}`)
+  } else {
+    router.push(`/servicecategories/`)
+  }
+}
+
+
+
+
+setupPage()
+</script>
+
+<template>
+  <UDashboardNavbar
+      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
+  >
+    <template #left>
+      <UButton
+          icon="i-heroicons-chevron-left"
+          variant="outline"
+          @click="router.push(`/servicecategories`)"
+      >
+        Leistungskategorien
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          class="text-xl font-medium"
+      >{{itemInfo.name ? `Leistungskategorie: ${itemInfo.name}` : (mode === 'create' ? 'Leistungskategorie erstellen' : 'Leistungskategorie bearbeiten')}}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('servicecategories',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('servicecategories',itemInfo)"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+          v-if="mode === 'edit' || mode === 'create'"
+      >
+        Abbrechen
+      </UButton>
+      <UButton
+          v-if="mode === 'show'"
+          @click="  router.push(`/servicecategories/edit/${itemInfo.id}`)"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+  </UDashboardNavbar>
+  <UTabs
+    :items="[{label: 'Informationen'}]"
+    v-if="mode === 'show' && itemInfo"
+    class="p-5"
+    v-model="openTab"
+  >
+    <template #item="{item}">
+      <div v-if="item.label === 'Informationen'" class="mr-5 flex flex-row">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <table class="w-full">
+              <tr>
+                <td>Name: </td>
+                <td>{{itemInfo.name}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+            </table>
+          </UCard>
+        </div>
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
+                type="product"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
+                render-headline
+            />
+          </UCard>
+
+        </div>
+      </div>
+
+
+
+
+    </template>
+  </UTabs>
+  <UForm
+      v-else-if="mode == 'edit' || mode == 'create'"
+      class="p-5"
+  >
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+          autofocus
+      />
+    </UFormGroup>
+    <UFormGroup
+        label="Beschreibung:"
+    >
+      <UTextarea
+          v-model="itemInfo.description"
+      />
+    </UFormGroup>
+  </UForm>
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>

pages/servicecategories/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <UDashboardNavbar title="Leistungskategorien" :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(`/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>
+
+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>
+
+</style>

pages/services/[mode]/[[id]].vue

@@ -23,6 +23,7 @@ const dataStore = useDataStore()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
+const supabase = useSupabaseClient()
 const id = ref(route.params.id ? route.params.id : null )
 
 //Working
@@ -34,11 +35,20 @@ const itemInfo = ref({
 
 const openTab = ref(0)
 
+const servicecategories = ref([])
+const units = ref([])
+
 //Functions
-const setupPage = () => {
-  if(mode.value === "show" || mode.value === "edit"){
-    itemInfo.value = dataStore.getServiceById(Number(useRoute().params.id))
+const setupPage = async () => {
+  if(mode.value === "show"){
+    itemInfo.value = await useSupabaseSelectSingle("services",useRoute().params.id, "*")
+  } else if(mode.value === "edit") {
+    itemInfo.value = await useSupabaseSelectSingle("services",useRoute().params.id)
   }
+
+  servicecategories.value = await useSupabaseSelect("servicecategories","*")
+  units.value = (await supabase.from("units").select()).data
+
 }
 
 setupPage()
@@ -76,42 +86,62 @@ setupPage()
     </template>
   </UDashboardNavbar>
   <UTabs
-    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Dokumente'}]"
+    :items="[{label: 'Informationen'},{label: 'Dokumente'}]"
     v-if="mode === 'show'"
     class="p-5"
     v-model="openTab"
   >
     <template #item="{item}">
-      <UCard class="mt-5">
-        <div
-          v-if="item.label === 'Informationen'"
-        >
-          <div class="truncate">
-            <p v-if="itemInfo.sellingPrice">Verkaufspreis: {{String(Number(itemInfo.sellingPrice).toFixed(2)).replace(".",",")}} €</p>
-            <p>Beschreibung:</p>
-            <pre>{{itemInfo.description}}</pre>
-          </div>
-
-
+      <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <table class="w-full">
+              <tr>
+                <td>Name:</td>
+                <td>{{itemInfo.name}}</td>
+              </tr>
+              <tr>
+                <td>Leistungsnummer:</td>
+                <td>{{itemInfo.serviceNumber}}</td>
+              </tr>
+              <tr>
+                <td>Verkaufpreis:</td>
+                <td>{{itemInfo.sellingPrice && itemInfo.sellingPrice.toFixed(2).replace(".", ",") + " €"}}</td>
+              </tr>
+              <tr>
+                <td>Einheit:</td>
+                <td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : itemInfo.unit}}</td>
+              </tr>
+              <tr>
+                <td>Tags:</td>
+                <td>{{itemInfo.tags.join(", ")}}</td>
+              </tr>
+              <tr>
+                <td>Leistungskategorien:</td>
+                <td>{{itemInfo.servicecategories ? itemInfo.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ") : ""}}</td>
+              </tr>
+              <tr>
+                <td>Beschreibung:</td>
+                <td>{{itemInfo.description}}</td>
+              </tr>
+            </table>
+          </UCard>
         </div>
-        <div
-          v-if="item.label === 'Logbuch'"
-        >
-          <HistoryDisplay
-              type="product"
-              v-if="itemInfo"
-              :element-id="itemInfo.id"
-          />
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
+                type="product"
+                v-if="itemInfo"
+                :element-id="itemInfo.id"
+            />
+          </UCard>
         </div>
-        <div
-          v-if="item.label === 'Bestand'"
-        >
-          Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
-
-        </div>
-        <div
+      </div>
+      <div
           v-if="item.label === 'Dokumente'"
-        >
+          class="mt-5"
+      >
+        <UCard>
           <Toolbar>
             <DocumentUpload
                 type="product"
@@ -121,8 +151,9 @@ setupPage()
 
 
           <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
-        </div>
-      </UCard>
+        </UCard>
+
+      </div>
     </template>
   </UTabs>
   <UForm
@@ -171,11 +202,16 @@ setupPage()
       label="Leistungskategorie:"
     >
       <USelectMenu
-        :options="dataStore.serviceCategories"
+        :options="servicecategories"
         option-attribute="name"
         value-attribute="id"
-        v-model="itemInfo.serviceCategorie"
-      ></USelectMenu>
+        v-model="itemInfo.servicecategories"
+        multiple
+      >
+        <template #label>
+          {{itemInfo.servicecategories && itemInfo.servicecategories.length > 0 ? itemInfo.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
+        </template>
+      </USelectMenu>
     </UFormGroup>
 
     <UFormGroup
@@ -203,5 +239,10 @@ setupPage()
 </template>
 
 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>