[pricelist][calculation] start add grid view

src/plugins/pricelist/components/CalculationTable.vue

@@ -1,16 +1,14 @@
 <template>
+  <!--v-model:pagination="pagination"-->
   <q-table
-    v-model:pagination="pagination"
     title="Kalkulationstabelle"
     :columns="columns"
     :rows="drinks"
     :visible-columns="visibleColumn"
-    :dense="$q.screen.lt.md"
+    dense
-    row-key="id"
-    virtual-scroll
-    :rows-per-page-options="[0]"
     :filter="search"
     :filter-method="filter"
+    :grid="grid"
   >
     <template #header="props">
       <q-tr :props="props">
@@ -46,6 +44,7 @@
           option-value="name"
           options-cover
         />
+        <q-btn label="grid" @click="grid = !grid" />
       </div>
     </template>
     <template #body="drinks_props">
@@ -357,25 +356,41 @@
             @deleteStep="deleteStep($event, drinks_props.row)"
             @addStep="addStep($event, drinks_props.row)"
           />
-          <!--<q-popup-edit
-            v-slot="scope"
-            v-model="drinks_props.row.receipt"
-            buttons
-            label-cancel="Abbrechen"
-            label-set="Speichern"
-            @update:modelValue="updateDrink(drinks_props.row)"
-          >
-            <q-input
-              v-model="scope.value"
-              type="textarea"
-              autofocus
-              counter
-              @keyup.enter.stop
-            />
-          </q-popup-edit>-->
         </q-td>
       </q-tr>
     </template>
+    <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="
+              props.row.uuid ? `/api/pricelist/picture/${props.row.uuid}?size=256` : 'no-image.svg'
+            "
+          >
+            <div class="absolute-bottom-right justify-end">
+              <div class="text-subtitle1 text-right">
+                {{ props.row.name }}
+              </div>
+              <div class="text-caption text-right">
+                {{ props.row.type.name }}
+              </div>
+            </div>
+          </q-img>
+          <q-card-section>
+            <q-badge
+              v-for="tag in props.row.tags"
+              :key="`${props.row.id}-${tag.id}`"
+              class="text-caption"
+              rounded
+              :style="`background-color: ${tag.color}`"
+            >
+              {{ tag.name }}
+            </q-badge>
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
   </q-table>
 </template>
 
@@ -383,7 +398,7 @@
 import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
 import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
 import { useMainStore } from 'src/stores';
-import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
+import { Drink, usePricelistStore, DrinkPriceVolume } from 'src/plugins/pricelist/store';
 import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
 import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
 import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
@@ -394,17 +409,17 @@ import { sort } from '../utils/sort';
 
 export default defineComponent({
   name: 'CalculationTable',
-  components: { SearchInput, BuildManual, MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
+  components: { SearchInput, MinPriceSetting, NewDrink, BuildManual, DrinkPriceVolumesTable },
   setup() {
     const mainStore = useMainStore();
     const store = usePricelistStore();
 
     onBeforeMount(() => {
-      void store.getDrinkTypes(true);
+      // void store.getDrinkTypes(true);
-      void store.getTags();
+      // void store.getTags();
-      void store.getExtraIngredients();
+      //void store.getDrinks();
-      void store.get_min_prices();
+      //void store.get_min_prices();
-      store.getPriceCalcColumn(user);
+      void store.getPriceCalcColumn(user);
     });
 
     const user = mainStore.currentUser.userid;
@@ -490,12 +505,34 @@ export default defineComponent({
         name: 'volumes',
         label: 'Preiskalkulation',
         field: 'volumes',
+        format: (val: Array<DrinkPriceVolume>) => {
+          let retVal = '';
+          val.forEach((val, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += val.id;
+          });
+          return retVal;
+        },
+        sortable: false,
       },
       {
         name: 'receipt',
         label: 'Bauanleitung',
         field: 'receipt',
+        format: (val: Array<string>) => {
+          let retVal = '';
+          val.forEach((value, index) => {
+            if (index > 0) {
+              retVal += ', ';
+            }
+            retVal += value;
+          });
+          return retVal;
+        },
         filterable: true,
+        sortable: false,
       },
     ];
     const column_calc = [
@@ -542,9 +579,10 @@ export default defineComponent({
 
     const search_keys = computed(() => columns.filter((column) => column.filterable));
 
-    // eslint-disable-next-line vue/return-in-computed-property
+    const pagination = ref({
-    const pagination = computed(() => {
+      sortBy: 'name',
-      rowsPerPage: store.drinks.length;
+      descending: false,
+      rowsPerPage: store.drinks.length,
     });
 
     const drinkTypes = computed(() => store.drinkTypes);
@@ -605,6 +643,7 @@ export default defineComponent({
       key: '',
       label: '',
     });
+    const grid = ref(false);
     return {
       drinks: computed(() => store.drinks),
       pagination,
@@ -625,6 +664,7 @@ export default defineComponent({
       search,
       filter,
       search_keys,
+      grid,
       tags: computed(() => store.tags),
     };
   },

src/plugins/pricelist/pages/Settings.vue

@@ -59,7 +59,7 @@ import { usePricelistStore } from 'src/plugins/pricelist/store';
 
 export default defineComponent({
   name: 'Settings',
-  components: { ExtraIngredients, DrinkTypes, CalculationTable, Tags },
+  components: { ExtraIngredients, DrinkTypes, Tags, CalculationTable },
   setup() {
     interface Tab {
       name: string;
@@ -73,6 +73,7 @@ export default defineComponent({
           console.log(store.extraIngredients);
         })
         .catch((err) => console.log(err));
+      void store.getTags();
       void store.getDrinkTypes();
       void store.getDrinks();
       void store.get_min_prices();