3. Zwischenstand

frontend/components/personalComposing.vue

@@ -73,19 +73,27 @@ const setRowData = (row) => {
       + 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>
+    <div class="mt-3 overflow-x-auto">
+      <table class="w-full min-w-[52rem] table-fixed">
+        <thead>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
+            <th class="px-2 py-2 text-left font-medium">Name</th>
+            <th class="px-2 py-2 text-left font-medium">Menge</th>
+            <th class="px-2 py-2 text-left font-medium">Einheit</th>
+            <th class="px-2 py-2 text-left font-medium">Einkaufspreis</th>
+            <th class="px-2 py-2 text-left font-medium">Verkaufspreis</th>
+            <th class="w-12 px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+              v-for="row in props.item.personalComposition"
+              :key="row.id"
+              class="border-b border-gray-100 align-top dark:border-gray-800"
+          >
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="hourrates"
             label-key="name"
             value-key="id"
@@ -93,47 +101,55 @@ const setRowData = (row) => {
             :filter-fields="['name']"
             v-model="row.hourrate"
             :color="row.hourrate ? 'primary' : 'error'"
-            @change="setRowData(row)"
+            @update:model-value="setRowData(row)"
           >
-<!--            <template #label>
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
-            </template>-->
+            <template #default>
+              {{ hourrates.find(i => i.id === row.hourrate)?.name || 'Kein Stundensatz ausgewählt' }}
+            </template>
           </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             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>
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="units"
             disabled
             label-key="name"
             value-key="id"
             v-model="row.unit"
-          ></USelectMenu>
+          >
+            <template #default>
+              {{ units.find(i => i.id === row.unit)?.name || 'Einheit' }}
+            </template>
+          </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.purchasePrice"
             step="0.01"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="row.price"
             step="0.01"
             @change="calculateTotalPersonalPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UButton
             icon="i-heroicons-x-mark"
             @click="removeRowFromPersonalComposition(row.id)"
@@ -141,8 +157,10 @@ const setRowData = (row) => {
             color="error"
           />
         </td>
-      </tr>
-    </table>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>