3. Zwischenstand

frontend/components/materialComposing.vue

@@ -72,18 +72,26 @@ const setRowData = (row) => {
       + Artikel
     </UButton>
 
-    <table class="w-full mt-3">
-      <tr>
-        <th>Artikel</th>
-        <th>Menge</th>
-        <th>Einheit</th>
-        <th>Verkaufspreis</th>
-      </tr>
-      <tr
-          v-for="product in props.item.materialComposition"
-      >
-        <td>
+    <div class="mt-3 overflow-x-auto">
+      <table class="w-full min-w-[44rem] table-fixed">
+        <thead>
+          <tr class="border-b border-gray-200 dark:border-gray-800">
+            <th class="px-2 py-2 text-left font-medium">Artikel</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">Verkaufspreis</th>
+            <th class="w-12 px-2 py-2"></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+              v-for="product in props.item.materialComposition"
+              :key="product.id"
+              class="border-b border-gray-100 align-top dark:border-gray-800"
+          >
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="products"
             label-key="name"
             value-key="id"
@@ -91,38 +99,45 @@ const setRowData = (row) => {
             :filter-fields="['name']"
             v-model="product.product"
             :color="product.product ? 'primary' : 'error'"
-            @change="setRowData(product)"
+            @update:model-value="setRowData(product)"
           >
             <template #default>
-              {{products.find(i => i.id === product.product) ? products.find(i => i.id === product.product).name : 'Kein Artikel ausgewählt'}}
+              {{ products.find(i => i.id === product.product)?.name || 'Kein Artikel ausgewählt' }}
             </template>
           </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="product.quantity"
             :step="units.find(i => i.id === product.unit) ? units.find(i => i.id === product.unit).step : 1"
             @change="calculateTotalMaterialPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <USelectMenu
+            class="w-full"
             :items="units"
             label-key="name"
             value-key="id"
             v-model="product.unit"
-          ></USelectMenu>
+          >
+            <template #default>
+              {{ units.find(i => i.id === product.unit)?.name || 'Einheit wählen' }}
+            </template>
+          </USelectMenu>
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UInput
+            class="w-full"
             type="number"
             v-model="product.price"
             step="0.01"
             @change="calculateTotalMaterialPrice"
           />
         </td>
-        <td>
+        <td class="px-2 py-2">
           <UButton
             icon="i-heroicons-x-mark"
             @click="removeProductFromMaterialComposition(product.id)"
@@ -130,8 +145,10 @@ const setRowData = (row) => {
             color="error"
           />
         </td>
-      </tr>
-    </table>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </UCard>
 </template>