[pricelist][receipt] change to table with grid, add search

src/plugins/pricelist/components/BuildManual/BuildManualVolume.vue

@@ -28,7 +28,16 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const volume = ref(props.volumes[0].id);
+    const _volume = ref<number>();
+    const volume = computed({
+      get: () => {
+        if (_volume.value !== undefined) {
+          return _volume.value;
+        }
+        return props.volumes[0].id;
+      },
+      set: (val: number) => (_volume.value = val),
+    });
     const options = computed(() => {
       let ret: Array<{ label: number; value: number }> = [];
       props.volumes.forEach((volume: DrinkPriceVolume) => {

src/plugins/pricelist/components/CalculationTable.vue

@@ -29,7 +29,7 @@
           </q-menu>
         </q-btn>
         <q-btn label="neues Getränk" color="positive" icon-right="add">
-          <q-menu v-model="showNewDrink" anchor="center middle" self="center middle">
+          <q-menu v-model="showNewDrink" anchor="center middle" self="center middle" persistent>
             <new-drink @close="showNewDrink = false" />
           </q-menu>
         </q-btn>

src/plugins/pricelist/pages/Receipts.vue

@@ -1,33 +1,58 @@
 <template>
-  <div class="q-pa-sm full-width full-height row q-gutter-sm">
-    <q-card v-for="drink in drinks" :key="drink.id" style="max-width: 400px; width: 400px">
-      <q-img
-        style="max-height: 256px"
-        loading="lazy"
-        :src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'"
-        placeholder-src="no-image.svg"
-      >
-        <div class="absolute-bottom-right text-subtitle2">
-          {{ drink.name }}
-        </div>
-      </q-img>
-      <build-manual-volume :volumes="drink.volumes" />
-      <q-card-section>
-        <div class="text-h6">Anleitung</div>
-        <build-manual :steps="drink.receipt" :editable="false" />
-      </q-card-section>
-    </q-card>
-  </div>
+  <q-table
+    grid
+    title="Rezepte"
+    :rows="drinks"
+    row-key="id"
+    hide-header
+    :filter="search"
+    :filter-method="filter"
+    :columns="options"
+  >
+    <template #top-right>
+      <search-input v-model="search" :keys="options" />
+    </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"
+            loading="lazy"
+            :src="
+              props.row.uuid ? `/api/pricelist/picture/${props.row.uuid}?size=256` : 'no-image.svg'
+            "
+            placeholder-src="no-image.svg"
+          >
+            <div class="absolute-bottom-right text-subtitle2">
+              {{ props.row.name }}
+            </div>
+          </q-img>
+          <build-manual-volume :volumes="props.row.volumes" />
+          <q-card-section>
+            <div class="text-h6">Anleitung</div>
+            <build-manual :steps="props.row.receipt" :editable="false" />
+          </q-card-section>
+        </q-card>
+      </div>
+    </template>
+  </q-table>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onBeforeMount } from 'vue';
+import { computed, defineComponent, onBeforeMount, ref } from 'vue';
 import { usePricelistStore } from 'src/plugins/pricelist/store';
 import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
 import BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
+import SearchInput from '../components/SearchInput.vue';
+import { filter } from '../utils/filter';
+function sort(a: string | number, b: string | number) {
+  if (a > b) return 1;
+  if (b > a) return -1;
+  return 0;
+}
 export default defineComponent({
   name: 'Reciepts',
-  components: { BuildManual, BuildManualVolume },
+  components: { BuildManual, BuildManualVolume, SearchInput },
   setup() {
     const store = usePricelistStore();
     onBeforeMount(() => {
@@ -39,7 +64,73 @@ export default defineComponent({
       })
     );
 
-    return { drinks };
+    const columns_drinks = [
+      {
+        name: 'picture',
+        label: 'Bild',
+        align: 'center',
+      },
+      {
+        name: 'name',
+        label: 'Getränk',
+        field: 'name',
+        align: 'center',
+        sortable: true,
+      },
+      {
+        name: 'drink_type',
+        label: 'Kategorie',
+        field: 'type',
+        format: (val: FG.DrinkType) => `${val.name}`,
+        sortable: true,
+        sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
+      },
+      {
+        name: 'volumes',
+        label: 'Preise',
+        field: 'volumes',
+        align: 'center',
+      },
+    ];
+    const columns_volumes = [
+      {
+        name: 'volume',
+        label: 'Inhalt',
+        field: 'volume',
+        align: 'left',
+      },
+      {
+        name: 'prices',
+        label: 'Preise',
+        field: 'prices',
+      },
+    ];
+    const columns_prices = [
+      {
+        name: 'price',
+        label: 'Preis',
+        field: 'price',
+      },
+      {
+        name: 'description',
+        label: 'Beschreibung',
+        field: 'description',
+      },
+      {
+        name: 'public',
+        label: 'Öffentlich',
+        field: 'public',
+      },
+    ];
+
+    const search = ref({ value: '', key: '', label: '' });
+
+    return {
+      drinks,
+      options: [...columns_drinks, ...columns_volumes, ...columns_prices],
+      search,
+      filter,
+    };
   },
 });
 </script>