Added Personal Composition

components/EntityEdit.vue

@@ -1,6 +1,7 @@
 <script setup>
 import dayjs from "dayjs";
 import MaterialComposing from "~/components/materialComposing.vue";
+import PersonalComposing from "~/components/personalComposing.vue";
 
 const props = defineProps({
   type: {
@@ -545,6 +546,10 @@ const updateItem = async () => {
                   v-else-if="datapoint.inputType === 'materialComposing'"
                   :item="item"
               />
+              <PersonalComposing
+                  v-else-if="datapoint.inputType === 'personalComposing'"
+                  :item="item"
+              />
 
               <UButton
                   v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
@@ -791,6 +796,10 @@ const updateItem = async () => {
             v-else-if="datapoint.inputType === 'materialComposing'"
             :item="item"
           />
+          <PersonalComposing
+              v-else-if="datapoint.inputType === 'personalComposing'"
+              :item="item"
+          />
 
           <UButton
               v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"

components/personalComposing.vue

@@ -0,0 +1,149 @@
+<script setup>
+
+import { v4 as uuidv4 } from 'uuid';
+
+const supabase = useSupabaseClient()
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true
+  }
+})
+
+const hourrates = ref([])
+const units = ref([])
+
+const setup = async () => {
+  hourrates.value = await useSupabaseSelect("hourrates")
+  units.value = (await supabase.from("units").select()).data
+}
+
+setup()
+
+const addRowToPersonalComposition = () => {
+
+  if(!props.item.personalComposition) props.item.personalComposition = []
+
+  props.item.personalComposition.push({
+    id: uuidv4(),
+    unit: 6,
+    quantity: 1,
+    price: 0,
+    name: "Standard"
+  })
+  calculateTotalPersonalPrice()
+}
+
+const removeRowFromPersonalComposition = (id) => {
+  props.item.personalComposition = props.item.personalComposition.filter((item) => item.id !== id)
+  calculateTotalPersonalPrice()
+}
+
+const calculateTotalPersonalPrice = () => {
+  let total = 0
+
+  props.item.personalComposition.forEach((item) => {
+    let rowSum = item.quantity * item.price
+    total += rowSum
+  })
+
+  props.item.sellingPriceComposed.worker = Number(total.toFixed(2))
+   props.item.sellingPriceComposed.total = Number((props.item.sellingPriceComposed.worker + props.item.sellingPriceComposed.material).toFixed(2))
+}
+
+const setRowData = (row) => {
+  let hourrate = hourrates.value.find(i => i.id === row.hourrate)
+
+  row.purchasePrice = hourrate.purchasePrice
+  row.price = hourrate.sellingPrice
+}
+
+</script>
+
+<template>
+  <UCard class="w-full">
+    <UButton
+        @click="addRowToPersonalComposition"
+    >
+      + Stundensatz
+    </UButton>
+
+    <table class="w-full mt-3">
+      <tr>
+        <th>Name</th>
+        <th>Menge</th>
+        <th>Einheit</th>
+        <th>Einkaufpreis</th>
+        <th>Verkaufspreis</th>
+      </tr>
+      <tr
+          v-for="row in props.item.personalComposition"
+      >
+        <td>
+          <USelectMenu
+              searchable
+              :search-attributes="['name']"
+              :options="hourrates"
+              value-attribute="id"
+              option-attribute="name"
+              v-model="row.hourrate"
+              :color="row.hourrate ? 'primary' : 'rose'"
+              @change="setRowData(row)"
+          >
+<!--            <template #label>
+              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+            </template>-->
+          </USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="row.quantity"
+            :step="units.find(i => i.id === row.unit) ? units.find(i => i.id === row.unit).step : 1"
+            @change="calculateTotalPersonalPrice"
+          />
+        </td>
+        <td>
+          <USelectMenu
+            :options="units"
+            disabled
+            value-attribute="id"
+            option-attribute="name"
+            v-model="row.unit"
+          ></USelectMenu>
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="row.purchasePrice"
+            step="0.01"
+            @change="calculateTotalPersonalPrice"
+          />
+        </td>
+        <td>
+          <UInput
+            type="number"
+            v-model="row.price"
+            step="0.01"
+            @change="calculateTotalPersonalPrice"
+          />
+        </td>
+        <td>
+          <UButton
+            icon="i-heroicons-x-mark"
+            @click="removeRowFromPersonalComposition(row.id)"
+            variant="outline"
+            color="rose"
+          />
+        </td>
+      </tr>
+    </table>
+  </UCard>
+</template>
+
+<style scoped>
+td {
+  margin-bottom: 0.5em;
+}
+</style>