[pricelist][calculation] update grid view

src/plugins/pricelist/components/CalculationTable.vue

@@ -1,6 +1,6 @@
 <template>
-  <!--v-model:pagination="pagination"-->
   <q-table
+    v-model:pagination="pagination"
     title="Kalkulationstabelle"
     :columns="columns"
     :rows="drinks"
@@ -9,6 +9,9 @@
     :filter="search"
     :filter-method="filter"
     :grid="grid"
+    :style="grid ? '' : 'max-height: 80vh;'"
+    :virtual-scroll="!grid"
+    :rows-per-page-options="[0]"
   >
     <template #header="props">
       <q-tr :props="props">
@@ -26,7 +29,7 @@
             <min-price-setting />
           </q-menu>
         </q-btn>
-        <q-btn label="neues Getränk" color="positive" icon-right="add">
+        <q-btn label="neues Getränk" color="positive" icon-right="mdi-plus">
           <q-menu v-model="showNewDrink" anchor="center middle" self="center middle" persistent>
             <new-drink @close="showNewDrink = false" />
           </q-menu>
@@ -388,6 +391,63 @@
               {{ tag.name }}
             </q-badge>
           </q-card-section>
+          <q-card-section>
+            <div class="fit row">
+              <q-input
+                v-if="props.row.article_id"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.article_id"
+                outlined
+                readonly
+                label="Artikelnummer"
+                dense
+              />
+              <q-input
+                v-if="props.row.volume"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.volume"
+                outlined
+                readonly
+                label="Inhalt"
+                dense
+                suffix="L"
+              />
+              <q-input
+                v-if="props.row.package_size"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.package_size"
+                outlined
+                readonly
+                label="Gebindegröße"
+                dense
+              />
+              <q-input
+                v-if="props.row.cost_per_package"
+                class="col-xs-12 col-sm-6 q-pa-sm"
+                :model-value="props.row.cost_per_package"
+                outlined
+                readonly
+                label="Preis Gebinde"
+                suffix="€"
+                dense
+              />
+              <q-input
+                v-if="props.row.cost_per_volume"
+                class="col-xs-12 col-sm-6 q-pa-sm q-pb-lg"
+                :model-value="props.row.cost_per_volume"
+                outlined
+                readonly
+                label="Preis pro L"
+                hint="Inkl. 19% Mehrwertsteuer"
+                suffix="€"
+                dense
+              />
+            </div>
+          </q-card-section>
+
+          <q-card-section v-if="props.row.volumes.length > 0">
+            <drink-price-volumes :props="props.row" />
+          </q-card-section>
         </q-card>
       </div>
     </template>
@@ -403,13 +463,21 @@ import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vu
 import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
 import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
 import SearchInput from './SearchInput.vue';
+import DrinkPriceVolumes from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue';
 import { filter, Search } from '../utils/filter';
 import { Notify } from 'quasar';
 import { sort } from '../utils/sort';
 
 export default defineComponent({
   name: 'CalculationTable',
-  components: { SearchInput, MinPriceSetting, NewDrink, BuildManual, DrinkPriceVolumesTable },
+  components: {
+    SearchInput,
+    MinPriceSetting,
+    NewDrink,
+    BuildManual,
+    DrinkPriceVolumesTable,
+    DrinkPriceVolumes,
+  },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
@@ -643,7 +711,7 @@ export default defineComponent({
       key: '',
       label: '',
     });
-    const grid = ref(false);
+    const grid = ref(true);
     return {
       drinks: computed(() => store.drinks),
       pagination,

src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue

@@ -0,0 +1,89 @@
+<template>
+  <q-carousel
+    v-model="volume"
+    transition-prev="slide-right"
+    transition-next="slide-left"
+    animated
+    swipeable
+    control-color="primary"
+    navigation
+    arrows
+  >
+    <q-carousel-slide v-for="volume in props.volumes" :key="volume.id" :name="volume.id">
+      <q-input
+        class="q-pa-sm"
+        :model-value="volume.volume"
+        outlined
+        readonly
+        dense
+        label="Inhalt"
+        mask="#.###"
+        fill-mask="0"
+        suffix="L"
+      />
+      <div class="full-width row q-gutter-sm q-pa-sm justify-around">
+        <div v-for="(min_price, index) in volume.min_prices" :key="index">
+          <q-badge class="text-body1" color="primary"> {{ min_price.percentage }}% </q-badge>
+          <div class="text-body1">{{ min_price.price.toFixed(3) }}€</div>
+        </div>
+      </div>
+      <div class="q-pa-sm">
+        <div v-for="(price, index) in volume.prices" :key="price.id">
+          <div class="fit row justify-around q-py-sm">
+            <div class="text-body1 col-xs-12 col-md-4">{{ price.price.toFixed(2) }}€</div>
+            <div class="text-body1 col-xs-12 col-md-4">
+              <q-toggle
+                :model-value="price.public"
+                disable
+                checked-icon="mdi-earth"
+                unchecked-icon="mdi-earth-off"
+              />
+            </div>
+            <div class="text-body1 col-xs-12 col-md-4">
+              {{ price.description }}
+            </div>
+          </div>
+          <q-separator v-if="index < volume.prices.length - 1" />
+        </div>
+      </div>
+      <div class="q-pa-sm">
+        <ingredients :ingredients="volume.ingredients" :volume="volume" />
+      </div>
+    </q-carousel-slide>
+  </q-carousel>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue';
+import { Drink } from 'src/plugins/pricelist/store';
+import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
+
+export default defineComponent({
+  name: 'DrinkPriceVolume',
+  components: { Ingredients },
+  props: {
+    props: {
+      type: Object as PropType<Drink>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const _volume = ref<number>();
+    const volume = computed({
+      get: () => {
+        if (_volume.value !== undefined) {
+          return _volume.value;
+        }
+        if (props.props.volumes.length > 0) {
+          return props.props.volumes[0].id;
+        }
+        return null;
+      },
+      set: (val: number) => (_volume.value = val),
+    });
+    return { volume };
+  },
+});
+</script>
+
+<style scoped></style>

src/plugins/pricelist/components/CalculationTable/Ingredients.vue

@@ -91,7 +91,7 @@
       <q-separator />
     </div>
     <div class="full-width row justify-end q-py-xs">
-      <q-btn size="sm" icon-right="add" color="positive" label="Zutat hinzufügen">
+      <q-btn size="sm" icon-right="mdi-plus" color="positive" label="Zutat hinzufügen">
         <q-menu anchor="center middle" self="center middle">
           <div class="full-width row justify-around q-gutter-sm q-pa-sm">
             <div class="col">

src/plugins/pricelist/components/DrinkTypes.vue

@@ -1,48 +1,44 @@
 <template>
-  <div>
+  <q-dialog v-model="edittype">
-    <q-dialog v-model="edittype">
+    <q-card>
-      <q-card>
+      <q-card-section>
-        <q-card-section>
+        <div class="text-h6">Editere Getränkeart {{ actualDrinkType.name }}</div>
-          <div class="text-h6">Editere Getränkeart {{ actualDrinkType.name }}</div>
+      </q-card-section>
-        </q-card-section>
+      <q-card-section>
-        <q-card-section>
+        <q-input v-model="newDrinkTypeName" dense label="name" filled />
-          <q-input v-model="newDrinkTypeName" dense label="name" filled />
+      </q-card-section>
-        </q-card-section>
+      <q-card-actions>
-        <q-card-actions>
+        <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
-          <q-btn flat color="danger" label="Abbrechen" @click="discardChanges()" />
+        <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
-          <q-btn flat color="primary" label="Speichern" @click="saveChanges()" />
+      </q-card-actions>
-        </q-card-actions>
+    </q-card>
-      </q-card>
+  </q-dialog>
-    </q-dialog>
 
-    <q-page padding>
+  <q-table
-      <q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns">
+    title="Getränkearten"
-        <template #top-right>
+    :rows="rows"
-          <q-input
+    :row-key="(row) => row.id"
-            v-model="newDrinkType"
+    :columns="columns"
-            class="q-px-sm"
+    style="height: 100%"
-            dense
+  >
-            placeholder="Neue Getränkeart"
+    <template #top-right>
-            filled
+      <q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
-          />
 
-          <div></div>
+      <div></div>
-          <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
+      <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
-        </template>
+    </template>
-        <template #body-cell-actions="props">
+    <template #body-cell-actions="props">
-          <q-td :props="props" align="right" :auto-width="true">
+      <q-td :props="props" align="right" :auto-width="true">
-            <q-btn
+        <q-btn
-              round
+          round
-              flat
+          flat
-              icon="mdi-pencil"
+          icon="mdi-pencil"
-              @click="editType({ id: props.row.id, name: props.row.name })"
+          @click="editType({ id: props.row.id, name: props.row.name })"
-            />
+        />
-            <q-btn round flat icon="mdi-delete" @click="deleteType(props.row.id)" />
+        <q-btn round flat icon="mdi-delete" @click="deleteType(props.row.id)" />
-          </q-td>
+      </q-td>
-        </template>
+    </template>
-      </q-table>
+  </q-table>
-    </q-page>
-  </div>
 </template>
 
 <script lang="ts">
@@ -60,7 +56,7 @@ export default defineComponent({
     const actualDrinkType = ref(emptyDrinkType);
 
     onBeforeMount(() => {
-      void store.getDrinkTypes();
+      void store.getDrinkTypes(true);
     });
     const rows = computed(() => store.drinkTypes);
     const columns = [