Added Productcategories

2024-09-18 20:00:12 +02:00
parent 1e4d0153b4
commit c546e2cf3c
5 changed files with 449 additions and 53 deletions
--- a/pages/productcategories/[mode]/[[id]].vue
+++ b/pages/productcategories/[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("/productcategories")
+  },
+  '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("productcategories",route.params.id,"*")
+  }
+
+
+}
+
+const cancelEditorCreate = () => {
+  if(itemInfo.value) {
+    router.push(`/productcategories/show/${itemInfo.value.id}`)
+  } else {
+    router.push(`/productcategories/`)
+  }
+}
+
+
+
+
+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(`/productcategories`)"
+      >
+        Artikelkategorien
+      </UButton>
+    </template>
+    <template #center>
+      <h1
+          v-if="itemInfo"
+          class="text-xl font-medium"
+      >{{itemInfo.name ? `Artikelkategorie: ${itemInfo.name}` : (mode === 'create' ? 'Artikelkategorie erstellen' : 'Artikelkategorie bearbeiten')}}</h1>
+    </template>
+    <template #right>
+      <UButton
+          v-if="mode === 'edit'"
+          @click="dataStore.updateItem('productcategories',itemInfo)"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode === 'create'"
+          @click="dataStore.createNewItem('productcategories',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(`/productcategories/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>
--- a/pages/productcategories/index.vue
+++ b/pages/productcategories/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <UDashboardNavbar title="Artikelkategorien" :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(`/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>
+
+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>
+
+</style>
--- a/pages/products/[mode]/[[id]].vue
+++ b/pages/products/[mode]/[[id]].vue
@@ -25,6 +25,7 @@ defineShortcuts({
 })

 const dataStore = useDataStore()
+const supabase = useSupabaseClient()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -34,16 +35,23 @@ const id = ref(route.params.id ? route.params.id : null )
 const mode = ref(route.params.mode || "show")
 const itemInfo = ref({
    unit: 1,
-    tags: []
+    tags: [],
+    productcategories: []
 })
 const openTab = ref(0)

+const productcategories = ref([])
+const units = ref([])
+
 //Functions
 const setupPage = async () => {
  if(mode.value === "show" || mode.value === "edit"){
    itemInfo.value = await useSupabaseSelectSingle("products",route.params.id,"*")
  }

+  productcategories.value = await useSupabaseSelect("productcategories","*")
+  units.value = (await supabase.from("units").select()).data
+  console.log(units.value[0])

 }

@@ -118,64 +126,100 @@ setupPage()
    </template>
  </UDashboardNavbar>
  <UTabs
-    :items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'},{label: 'Dokumente'}]"
+    :items="[{label: 'Informationen'},{label: 'Bestand'},{label: 'Dokumente'}]"
    v-if="mode === 'show' && itemInfo"
    class="p-5"
    v-model="openTab"
  >
    <template #item="{item}">
-      <UCard class="mt-5">
-        <div
-          v-if="item.label === 'Informationen'"
-        >
-          <UBadge
-              v-for="tag in itemInfo.tags"
-              class="mr-2"
+      <div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
+        <div class="w-1/2 mr-5">
+          <UCard>
+            <UBadge
+                v-for="tag in itemInfo.tags"
+                class="mr-2"

-          >
-            {{tag}}
-          </UBadge>
-          <UDivider
-              class="my-2"
-          />
+            >
+              {{tag}}
+            </UBadge>
+            <UDivider
+                class="my-2"
+            />

-          <UButton @click="printLabel(itemInfo.ean)">Print Label</UButton>
-          {{itemInfo}}
+<!--
+            <UButton @click="printLabel(itemInfo.ean)">Print Label</UButton>
+-->

-          <span v-if="itemInfo.manufacturer">Hersteller: {{itemInfo.manufacturer}}<br></span>
-          <span v-if="itemInfo.manufacturerNumber">Herstellernummer: {{itemInfo.manufacturerNumber}}<br></span>
-          <span v-if="itemInfo.description">Beschreibung: {{itemInfo.description}}<br></span>
-          <span v-if="itemInfo.purchasePrice">Einkaufspreis: {{Number(itemInfo.purchasePrice).toFixed(2)}} €<br></span>
+            <table class="w-full">
+              <tr>
+                <td>Name:</td>
+                <td>{{itemInfo.name}}</td>
+              </tr>
+              <tr>
+                <td>Hersteller:</td>
+                <td>{{itemInfo.manufacturer}}</td>
+              </tr>
+              <tr>
+                <td>Herstellernummer:</td>
+                <td>{{itemInfo.manufacturerNumber}}</td>
+              </tr>
+              <tr>
+                <td>Einheit:</td>
+                <td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : ""}}</td>
+              </tr>
+              <tr>
+                <td>Tags:</td>
+                <td>{{itemInfo.tags.join(", ")}}</td>
+              </tr>
+              <tr>
+                <td>Artikelkategorien:</td>
+                <td>{{itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}</td>
+              </tr>
+              <tr>
+                <td>EAN:</td>
+                <td>{{itemInfo.ean}}</td>
+              </tr>
+              <tr>
+                <td>Verkaufspreis:</td>
+                <td>{{itemInfo.sellingPrice}}</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>
-        <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
-          v-if="item.label === 'Dokumente'"
-        >
-          <Toolbar>
-            <DocumentUpload
+        <div class="w-1/2">
+          <UCard>
+            <HistoryDisplay
                type="product"
+                v-if="itemInfo"
                :element-id="itemInfo.id"
            />
-          </Toolbar>
-
-
-          <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
+          </UCard>
        </div>
-      </UCard>
+      </div>
+      <div
+          v-if="item.label === 'Bestand'"
+      >
+        <UCard>
+          Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
+        </UCard>
+      </div>
+      <div
+          v-if="item.label === 'Dokumente'"
+      >
+        <Toolbar>
+          <DocumentUpload
+              type="product"
+              :element-id="itemInfo.id"
+          />
+        </Toolbar>
+
+
+        <DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
+      </div>
    </template>
  </UTabs>
  <UForm
@@ -231,6 +275,21 @@ setupPage()
        </template>
      </USelectMenu>
    </UFormGroup>
+    <UFormGroup
+        label="Artikelkategorien:"
+    >
+      <USelectMenu
+          v-model="itemInfo.productcategories"
+          :options="productcategories"
+          value-attribute="id"
+          option-attribute="name"
+          multiple
+      >
+        <template #label>
+          {{itemInfo.productcategories.length > 0 ? itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
    <UFormGroup
        label="EAN:"
    >
@@ -269,5 +328,10 @@ setupPage()
 </template>

 <style scoped>
-
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
 </style>
--- a/pages/products/index.vue
+++ b/pages/products/index.vue
@@ -68,8 +68,8 @@
    <template #stock-data="{row}">
      {{`${dataStore.getStockByProductId(row.id)} ${(dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : "")}`}}
    </template>
-    <template #purchasePrice-data="{row}">
-      {{row.purchasePrice ? Number(row.purchasePrice).toFixed(2) + " €" : ""}}
+    <template #sellingPrice-data="{row}">
+      {{row.sellingPrice ? (Number(row.sellingPrice).toFixed(2) + " €").replace(".",",") : ""}}
    </template>
    <template #tags-data="{row}">
      <UBadge
@@ -84,6 +84,9 @@
    <template #unit-data="{row}">
      {{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
    </template>
+    <template #productcategories-data="{row}">
+      {{row.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}
+    </template>
  </UTable>

 </template>
@@ -129,10 +132,12 @@ const dataStore = useDataStore()
 const router = useRouter()

 const items = ref([])
+const productcategories = ref([])
 const selectedItem = ref(0)

 const setupPage = async () => {
  items.value = await useSupabaseSelect("products","*")
+  productcategories.value = await useSupabaseSelect("productcategories", "*")
 }

 setupPage()
@@ -164,14 +169,19 @@ const templateColumns = [
    sortable: true
  },
  {
-    key: "purchasePrice",
-    label: "Einkaufspreis",
+    key: "sellingPrice",
+    label: "Verkaufpreispreis",
    sortable: true
  },
  {
    key: "tags",
    label: "Tags",
    sortable: true
+  },
+  {
+    key: "productcategories",
+    label: "Artikelkategorien",
+    sortable: true
  }
 ]
 const selectedColumns = ref(templateColumns)