[pricelist] clean styele extraIngredients

src/plugins/pricelist/components/DrinkTypes.vue

@@ -7,12 +7,12 @@
     style="height: 100%"
   >
     <template #top-right>
-      <q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
-
-      <div></div>
-      <q-btn round color="primary" icon="mdi-plus" @click="addType">
-        <q-tooltip> Getränkeart hinzufügen </q-tooltip>
-      </q-btn>
+      <div class="full-width row q-gutter-sm">
+        <q-input v-model="newDrinkType" dense placeholder="Neue Getränkeart" filled />
+        <q-btn round color="primary" icon="mdi-plus" @click="addType">
+          <q-tooltip> Getränkeart hinzufügen </q-tooltip>
+        </q-btn>
+      </div>
     </template>
     <template #body="props">
       <q-tr :props="props">

src/plugins/pricelist/components/ExtraIngredients.vue

@@ -28,33 +28,59 @@
     <q-page padding>
       <q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns">
         <template #top-right>
-          <q-input
-            v-model="newExtraIngredient.name"
-            class="q-px-sm"
-            dense
-            placeholder="Neue Zutatenbezeichnung"
-            label="Neue Zutatenbezeichnung"
-            filled
-          />
-          <q-input
-            v-model.number="newExtraIngredient.price"
-            class="q-px-sm"
-            dense
-            placeholder="Preis"
-            label="Preis"
-            filled
-            type="number"
-            min="0"
-            step="0.1"
-            suffix="€"
-          />
-          <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addExtraIngredient" />
+          <div class="full-width row q-gutter-sm">
+            <q-input
+              v-model="newExtraIngredient.name"
+              dense
+              placeholder="Neue Zutatenbezeichnung"
+              label="Neue Zutatenbezeichnung"
+              filled
+            />
+            <q-input
+              v-model.number="newExtraIngredient.price"
+              dense
+              placeholder="Preis"
+              label="Preis"
+              filled
+              type="number"
+              min="0"
+              step="0.1"
+              suffix="€"
+            />
+            <q-btn color="primary" icon="mdi-plus" round @click="addExtraIngredient">
+              <q-tooltip> Zutat hinzufügen </q-tooltip>
+            </q-btn>
+          </div>
         </template>
-        <template #body-cell-actions="props">
-          <q-td :props="props" align="right" :auto-width="true">
-            <q-btn round flat icon="mdi-pencil" @click="editType(props.row)" />
-            <q-btn round flat icon="mdi-delete" @click="deleteType(props.row)" />
-          </q-td>
+        <template #body="props">
+          <q-tr :props="props">
+            <q-td key="name" :props="props" align="left">
+              {{ props.row.name }}
+              <q-popup-edit
+                v-model="props.row.name"
+                buttons
+                label-set="Speichern"
+                label-cancel="Abbrechen"
+                @save="saveChanges(props.row)"
+              >
+                <template #default="scope">
+                  <q-input v-model="scope.value" dense label="name" filled />
+                </template>
+              </q-popup-edit>
+            </q-td>
+            <q-td key="price" :props="props" align="right">
+              {{ props.row.price.toFixed(2) }}€
+            </q-td>
+            <q-td key="actions" :props="props" align="right" auto-width>
+              <q-btn
+                round
+                icon="mdi-delete"
+                color="negative"
+                size="sm"
+                @click="deleteType(props.row)"
+              />
+            </q-td>
+          </q-tr>
         </template>
       </q-table>
     </q-page>
@@ -75,8 +101,6 @@ export default defineComponent({
       id: -1,
     };
     const newExtraIngredient = ref<FG.ExtraIngredient>(emptyExtraIngredient);
-    const edittype = ref(false);
-    const actualExtraIngredient = ref(emptyExtraIngredient);
 
     const rows = computed(() => store.extraIngredients);
     const columns = [
@@ -93,6 +117,7 @@ export default defineComponent({
         field: 'price',
         sortable: true,
         format: (val: number) => `${val.toFixed(2)}€`,
+        align: 'right',
       },
       {
         name: 'actions',
@@ -108,21 +133,18 @@ export default defineComponent({
       discardChanges();
     }
 
-    function editType(extraIngredient: FG.ExtraIngredient) {
-      edittype.value = true;
-      actualExtraIngredient.value = extraIngredient;
-    }
-
-    async function saveChanges() {
-      await store.updateExtraIngredient(actualExtraIngredient.value);
-      setTimeout(() => discardChanges(), 200);
+    function saveChanges(ingredient: FG.ExtraIngredient) {
+      setTimeout(() => {
+        const _ingredient = store.extraIngredients.find((a) => a.id === ingredient.id);
+        if (_ingredient) {
+          void store.updateExtraIngredient(_ingredient);
+        }
+      }, 50);
     }
 
     function discardChanges() {
-      actualExtraIngredient.value = emptyExtraIngredient;
       newExtraIngredient.value.name = '';
       newExtraIngredient.value.price = 0;
-      edittype.value = false;
     }
 
     function deleteType(extraIngredient: FG.ExtraIngredient) {
@@ -135,9 +157,6 @@ export default defineComponent({
       addExtraIngredient,
       newExtraIngredient,
       deleteType,
-      edittype,
-      editType,
-      actualExtraIngredient,
       discardChanges,
       saveChanges,
     };