From be347225c4c42ff26c4e9e57fc0d860166d3a044 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Sat, 17 Apr 2021 14:44:25 +0200
Subject: [PATCH] [pricelist] some more style

---
 .../BuildManual/BuildManualVolume.vue         | 15 ++++-
 .../pricelist/components/CalculationTable.vue |  3 -
 .../CalculationTable/DrinkPriceVolumes.vue    |  2 +-
 .../CalculationTable/Ingredients.vue          | 60 ++++++++++---------
 .../pricelist/components/DrinkTypes.vue       |  6 ++
 .../pricelist/components/ExtraIngredients.vue | 39 ++++--------
 .../pricelist/components/Pricelist.vue        |  1 +
 src/plugins/pricelist/components/Tags.vue     | 13 +++-
 src/plugins/pricelist/store.ts                |  3 -
 9 files changed, 78 insertions(+), 64 deletions(-)

diff --git a/src/plugins/pricelist/components/BuildManual/BuildManualVolume.vue b/src/plugins/pricelist/components/BuildManual/BuildManualVolume.vue
index 855ea46..66b1fcd 100644
--- a/src/plugins/pricelist/components/BuildManual/BuildManualVolume.vue
+++ b/src/plugins/pricelist/components/BuildManual/BuildManualVolume.vue
@@ -6,13 +6,17 @@
     animated
     swipeable
     control-color="primary"
-    navigation
     arrows
   >
     <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
       <build-manual-volume-part :volume="volume" />
     </q-carousel-slide>
   </q-carousel>
+  <div class="full-width row justify-center q-pa-sm">
+    <div class="q-px-sm">
+      <q-btn-toggle v-model="volume" :options="btn_options" rounded />
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { defineComponent, PropType, ref, computed } from 'vue';
@@ -45,7 +49,14 @@ export default defineComponent({
       });
       return ret;
     });
-    return { volume, options };
+    const btn_options = computed<Array<{ label: string; value: number }>>(() => {
+      const retVal: Array<{ label: string; value: number }> = [];
+      props.volumes.forEach((volume: DrinkPriceVolume) => {
+        retVal.push({ label: `${(<number>volume.volume).toFixed(3)}L`, value: volume.id });
+      });
+      return retVal;
+    });
+    return { volume, options, btn_options };
   },
 });
 </script>
diff --git a/src/plugins/pricelist/components/CalculationTable.vue b/src/plugins/pricelist/components/CalculationTable.vue
index 334ee73..80e92cd 100644
--- a/src/plugins/pricelist/components/CalculationTable.vue
+++ b/src/plugins/pricelist/components/CalculationTable.vue
@@ -438,7 +438,6 @@ export default defineComponent({
       for (const volume of toDeleteObjects.volumes) {
         await store.deleteVolume(volume, drink);
       }
-      console.log(drink);
       if (drink.id > 0) {
         await store.updateDrink(drink);
       } else {
@@ -474,7 +473,6 @@ export default defineComponent({
 
     function image(uuid: string | undefined) {
       if (uuid) {
-        console.log(baseURL.value);
         return `${baseURL.value}/pricelist/picture/${uuid}?size=256`;
       }
       return 'no-image.svg';
@@ -493,7 +491,6 @@ export default defineComponent({
       drinkPic,
       savePicture,
       deletePicture,
-      console,
       search,
       filter,
       search_keys,
diff --git a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue
index 9fd8611..d7dca5f 100644
--- a/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue
+++ b/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue
@@ -126,7 +126,7 @@
   </q-carousel>
   <div class="full-width row justify-center q-pa-sm">
     <div class="q-px-sm">
-      <q-btn-toggle v-model="volume" :options="options" />
+      <q-btn-toggle v-model="volume" :options="options" rounded />
     </div>
     <div v-if="editable" class="q-px-sm">
       <q-btn class="q-px-sm" round icon="mdi-plus" color="primary" size="sm" @click="newVolume">
diff --git a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
index 0eba5e1..7090199 100644
--- a/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
+++ b/src/plugins/pricelist/components/CalculationTable/Ingredients.vue
@@ -100,7 +100,7 @@
     <div v-if="editable" class="full-width row justify-end q-py-xs">
       <q-btn size="sm" round icon="mdi-plus" color="primary">
         <q-tooltip> Neue Zutat hinzufügen </q-tooltip>
-        <q-menu anchor="center middle" self="center middle">
+        <q-menu anchor="center middle" self="center middle" persistent>
           <div class="full-width row justify-around q-gutter-sm q-pa-sm">
             <div class="col">
               <q-select
@@ -113,35 +113,39 @@
               />
             </div>
             <div class="col">
-              <q-input
-                v-if="newIngredient && newIngredient.volume"
-                v-model.number="newIngredientVolume"
-                filled
-                dense
-                label="Volume"
-                type="number"
-                step="0.01"
-                min="0"
-                suffix="L"
-              />
-              <q-input
-                v-else-if="newIngredient && newIngredient.price"
-                v-model="newIngredient.price"
-                filled
-                dense
-                label="Preis"
-                disable
-                min="0"
-                step="0.1"
-                fill-mask="0"
-                mask="#.##"
-                suffix="€"
-              />
+              <q-slide-transition>
+                <q-input
+                  v-if="newIngredient && newIngredient.volume"
+                  v-model.number="newIngredientVolume"
+                  filled
+                  dense
+                  label="Volume"
+                  type="number"
+                  step="0.01"
+                  min="0"
+                  suffix="L"
+                />
+              </q-slide-transition>
+              <q-slide-transition>
+                <q-input
+                  v-if="newIngredient && newIngredient.price"
+                  v-model="newIngredient.price"
+                  filled
+                  dense
+                  label="Preis"
+                  disable
+                  min="0"
+                  step="0.1"
+                  fill-mask="0"
+                  mask="#.##"
+                  suffix="€"
+                />
+              </q-slide-transition>
             </div>
           </div>
-          <div class="full-width row jusitfy-between q-gutter-sm q-pa-sm">
-            <q-btn v-close-popup label="Abbrechen" @click="cancelAddIngredient" />
-            <q-btn v-close-popup label="Speichern" color="primary" @click="addIngredient" />
+          <div class="full-width row justify-around q-gutter-sm q-pa-sm">
+            <q-btn v-close-popup flat label="Abbrechen" @click="cancelAddIngredient" />
+            <q-btn v-close-popup flat label="Speichern" color="primary" @click="addIngredient" />
           </div>
         </q-menu>
       </q-btn>
diff --git a/src/plugins/pricelist/components/DrinkTypes.vue b/src/plugins/pricelist/components/DrinkTypes.vue
index 8502da0..517e4c6 100644
--- a/src/plugins/pricelist/components/DrinkTypes.vue
+++ b/src/plugins/pricelist/components/DrinkTypes.vue
@@ -5,6 +5,7 @@
     :row-key="(row) => row.id"
     :columns="columns"
     style="height: 100%"
+    :pagination="pagination"
   >
     <template #top-right>
       <div class="full-width row q-gutter-sm">
@@ -91,6 +92,10 @@ export default defineComponent({
     function deleteType(id: number) {
       void store.removeDrinkType(id);
     }
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
 
     return {
       columns,
@@ -99,6 +104,7 @@ export default defineComponent({
       newDrinkType,
       deleteType,
       saveChanges,
+      pagination,
     };
   },
 });
diff --git a/src/plugins/pricelist/components/ExtraIngredients.vue b/src/plugins/pricelist/components/ExtraIngredients.vue
index b8252b3..171d801 100644
--- a/src/plugins/pricelist/components/ExtraIngredients.vue
+++ b/src/plugins/pricelist/components/ExtraIngredients.vue
@@ -1,32 +1,13 @@
 <template>
   <div>
-    <q-dialog v-model="edittype">
-      <q-card>
-        <q-card-section>
-          <div class="text-h6">Editere Extrazutaten {{ actualExtraIngredient.name }}</div>
-        </q-card-section>
-        <q-card-section>
-          <q-input v-model="actualExtraIngredient.name" dense label="Name" filled />
-          <q-input
-            v-model.number="actualExtraIngredient.price"
-            dense
-            label="Preis"
-            filled
-            type="number"
-            min="0"
-            step="0.1"
-            suffix="€"
-          />
-        </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-page padding>
-      <q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns">
+      <q-table
+        title="Getränkearten"
+        :rows="rows"
+        :row-key="(row) => row.id"
+        :columns="columns"
+        :pagination="pagination"
+      >
         <template #top-right>
           <div class="full-width row q-gutter-sm">
             <q-input
@@ -151,6 +132,11 @@ export default defineComponent({
       void store.deleteExtraIngredient(extraIngredient);
     }
 
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
+
     return {
       columns,
       rows,
@@ -159,6 +145,7 @@ export default defineComponent({
       deleteType,
       discardChanges,
       saveChanges,
+      pagination,
     };
   },
 });
diff --git a/src/plugins/pricelist/components/Pricelist.vue b/src/plugins/pricelist/components/Pricelist.vue
index 0b64103..24fef58 100644
--- a/src/plugins/pricelist/components/Pricelist.vue
+++ b/src/plugins/pricelist/components/Pricelist.vue
@@ -96,6 +96,7 @@ export default defineComponent({
         field: 'name',
         sortable: true,
         filterable: true,
+        align: 'left',
       },
       {
         name: 'type',
diff --git a/src/plugins/pricelist/components/Tags.vue b/src/plugins/pricelist/components/Tags.vue
index 67c0430..1cb3be8 100644
--- a/src/plugins/pricelist/components/Tags.vue
+++ b/src/plugins/pricelist/components/Tags.vue
@@ -1,7 +1,13 @@
 <template>
   <div>
     <q-page padding>
-      <q-table title="Tags" :rows="rows" :row-key="(row) => row.id" :columns="columns">
+      <q-table
+        title="Tags"
+        :rows="rows"
+        :row-key="(row) => row.id"
+        :columns="columns"
+        :pagination="pagination"
+      >
         <template #top-right>
           <q-btn color="primary" icon="mdi-plus" round>
             <q-tooltip> Tag hinzufügen </q-tooltip>
@@ -143,6 +149,10 @@ export default defineComponent({
       }
       return true;
     }
+    const pagination = ref({
+      sortBy: 'name',
+      rowsPerPage: 10,
+    });
     return {
       columns,
       rows,
@@ -152,6 +162,7 @@ export default defineComponent({
       updateTag: store.updateTag,
       notExists,
       deleteTag: store.deleteTag,
+      pagination,
     };
   },
 });
diff --git a/src/plugins/pricelist/store.ts b/src/plugins/pricelist/store.ts
index 1bdcefd..3fd34a2 100644
--- a/src/plugins/pricelist/store.ts
+++ b/src/plugins/pricelist/store.ts
@@ -147,7 +147,6 @@ export const usePricelistStore = defineStore({
         this.drinks.push(_drink);
       });
       calc_all_min_prices(this.drinks, this.min_prices);
-      console.log(this.drinks);
     },
     sortPrices(volume: DrinkPriceVolume) {
       volume.prices.sort((a, b) => {
@@ -196,7 +195,6 @@ export const usePricelistStore = defineStore({
         this.drinks[index] = _drink;
       }
       calc_all_min_prices(this.drinks, this.min_prices);
-      console.log('update drink', drink);
     },
     deleteDrink(drink: Drink) {
       api
@@ -291,7 +289,6 @@ export const usePricelistStore = defineStore({
           });
         });
       });
-      console.log(retVal);
       return retVal;
     },
   },