Added Searching in Service & Product Selection

Introduced Service Categories

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>