Initial

spaces/pages/products.vue

@@ -0,0 +1,198 @@
+<template>
+  <div id="main">
+    <div id="left">
+
+      <UButton @click="showCreateProduct = true" >+ Artikel</UButton>
+      <UModal v-model="showCreateProduct">
+        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+          <template #header>
+            Artikel erstellen
+          </template>
+
+          <UFormGroup
+            label="Name:"
+          >
+            <UInput
+              v-model="createProductData.name"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Hersteller:"
+          >
+            <UInput
+                v-model="createProductData.manufacturer"
+            />
+          </UFormGroup>
+          <UFormGroup
+            label="Einheit:"
+          >
+            <UInput
+                v-model="createProductData.unit"
+            />
+          </UFormGroup>
+
+          <template #footer>
+            <UButton @click="createProduct">Erstellen</UButton>
+          </template>
+        </UCard>
+      </UModal>
+
+      <div class="listContainer">
+        <a v-for="item in products" @click="selectItem(item)">
+          <UCard class="listItem">
+            <UBadge>{{item.id}}</UBadge> {{item.attributes.name}} - {{item.attributes.manufacturer}}
+          </UCard>
+        </a>
+      </div>
+
+
+
+
+    </div>
+    <div id="right">
+      <div v-if="false">
+        <img
+            v-if="selectedItem.attributes.image"
+            :src="'http://localhost:1337' + selectedItem.attributes.image.data.attributes.url"/>
+        {{selectedItem.attributes.image.data.attributes.url}}
+      </div>
+
+      <UCard v-if="selectedItem.attributes">
+        <template #header>
+          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
+        </template>
+<!--        <UBadge
+          v-for="tag in selectedItem.tags"
+          class="mr-2"
+        >
+          {{tag}}
+        </UBadge>-->
+        <UDivider class="my-3"/>
+        <div v-if="selectedItem.attributes">
+          Hersteller: {{selectedItem.attributes.manufacturer}}<br>
+          Einkaufspreis: {{selectedItem.attributes.purchasePriceNet.toFixed(2)}} €<br>
+          Aufschlag: {{selectedItem.attributes.profitPercentage}} %<br>
+          Verkaufspreis: {{selectedItem.attributes.retailPriceNet.toFixed(2)}} €<br>
+        </div>
+
+        <UDivider class="my-3"/>
+        <p>Verlauf:</p>
+
+        <table>
+          <tr
+            v-for="item in history"
+            class="historyItem"
+          >
+            <td>
+              {{item.position}}
+            </td>
+            <td>
+              {{item.date}}
+            </td>
+            <td>
+              <UBadge>{{item.user}}</UBadge>
+            </td>
+            <td>
+              {{item.message}}
+            </td>
+
+          </tr>
+        </table>
+
+
+<!--        <div
+          v-for="item in history"
+          class="historyItem"
+        >
+          <p>{{item.message}}</p>
+          <UBadge>{{item.user}}</UBadge>
+        </div>-->
+
+
+
+      </UCard>        {{selectedItem}}
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const {find,create} = useStrapi4()
+const products = (await find('products',{populate: "*"})).data
+
+const showCreateProduct = ref(false)
+const createProductData = ref({})
+
+
+let selectedItem = ref({})
+
+const history = ref([
+  {
+    position: 0,
+    message: "Produkt erstellt",
+    date: "2023-11-20",
+    user: "flfeders"
+  }
+])
+
+
+const selectItem = (item) => {
+  selectedItem.value = item
+  console.log(item)
+}
+
+const createProduct = async () => {
+  await create('products', createProductData.value)
+  showCreateProduct.value = false
+  createProductData.value = {}
+
+}
+
+</script>
+
+<style scoped>
+#main {
+  display: flex;
+  flex-direction: row;
+}
+#left {
+  width: 25vw;
+  overflow: hidden;
+}
+
+#right {
+  width: 60vw;
+  padding-left: 3vw;
+}
+
+.listContainer {
+  height: 75vh;
+  overflow: auto;
+  margin-top: 3vh;
+}
+
+
+
+.historyItem >td {
+  border: 0.5px solid grey;
+  border-radius: 15px;
+  padding: 1em
+}
+
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.listContainer::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.listContainer {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+</style>