[pricelist] clean style drinkType

src/plugins/pricelist/components/CalculationTable.vue

@@ -33,10 +33,7 @@
     <template #item="props">
       <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
         <q-card>
-          <q-img
-            style="max-height: 256px"
-            :src="image(props.row.uuid)"
-          >
+          <q-img style="max-height: 256px" :src="image(props.row.uuid)">
             <div
               v-if="!public && !nodetails && editable"
               class="absolute-top-right justify-end"
@@ -477,7 +474,7 @@ export default defineComponent({
 
     function image(uuid: string | undefined) {
       if (uuid) {
-        console.log(baseURL.value)
+        console.log(baseURL.value);
         return `${baseURL.value}/pricelist/picture/${uuid}?size=256`;
       }
       return 'no-image.svg';
@@ -509,7 +506,7 @@ export default defineComponent({
       newDrink,
       hasPermission,
       PERMISSIONS,
-      image
+      image,
     };
   },
 });

src/plugins/pricelist/components/DrinkTypes.vue

@@ -1,19 +1,4 @@
 <template>
-  <q-dialog v-model="edittype">
-    <q-card>
-      <q-card-section>
-        <div class="text-h6">Editere Getränkeart {{ actualDrinkType.name }}</div>
-      </q-card-section>
-      <q-card-section>
-        <q-input v-model="newDrinkTypeName" dense label="name" filled />
-      </q-card-section>
-      <q-card-actions>
-        <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
-        <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
   <q-table
     title="Getränkearten"
     :rows="rows"
@@ -25,18 +10,36 @@
       <q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
 
       <div></div>
-      <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
+      <q-btn round color="primary" icon="mdi-plus" @click="addType">
+        <q-tooltip> Getränkeart hinzufügen </q-tooltip>
+      </q-btn>
     </template>
-    <template #body-cell-actions="props">
-      <q-td :props="props" align="right" :auto-width="true">
-        <q-btn
-          round
-          flat
-          icon="mdi-pencil"
-          @click="editType({ id: props.row.id, name: props.row.name })"
-        />
-        <q-btn round flat icon="mdi-delete" @click="deleteType(props.row.id)" />
-      </q-td>
+    <template #body="props">
+      <q-tr :props="props">
+        <q-td key="drinkTypeName" :props="props">
+          {{ 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="actions" :props="props">
+          <q-btn
+            round
+            icon="mdi-delete"
+            color="negative"
+            size="sm"
+            @click="deleteType(props.row.id)"
+          />
+        </q-td>
+      </q-tr>
     </template>
   </q-table>
 </template>
@@ -50,10 +53,6 @@ export default defineComponent({
   setup() {
     const store = usePricelistStore();
     const newDrinkType = ref('');
-    const newDrinkTypeName = ref('');
-    const edittype = ref(false);
-    const emptyDrinkType: FG.DrinkType = { id: -1, name: '' };
-    const actualDrinkType = ref(emptyDrinkType);
 
     onBeforeMount(() => {
       void store.getDrinkTypes(true);
@@ -80,25 +79,13 @@ export default defineComponent({
       newDrinkType.value = '';
     }
 
-    function editType(drinkType: FG.DrinkType) {
-      edittype.value = true;
-      actualDrinkType.value = drinkType;
-    }
-
-    async function saveChanges() {
-      try {
-        await store.changeDrinkTypeName({
-          id: actualDrinkType.value.id,
-          name: newDrinkTypeName.value,
-        });
-      } catch (e) {}
-      discardChanges();
-    }
-
-    function discardChanges() {
-      actualDrinkType.value = emptyDrinkType;
-      newDrinkTypeName.value = '';
-      edittype.value = false;
+    function saveChanges(drinkType: FG.DrinkType) {
+      setTimeout(() => {
+        const _drinkType = store.drinkTypes.find((a) => a.id === drinkType.id);
+        if (_drinkType) {
+          void store.changeDrinkTypeName(drinkType);
+        }
+      }, 50);
     }
 
     function deleteType(id: number) {
@@ -111,11 +98,6 @@ export default defineComponent({
       addType,
       newDrinkType,
       deleteType,
-      edittype,
-      editType,
-      actualDrinkType,
-      newDrinkTypeName,
-      discardChanges,
       saveChanges,
     };
   },