flaschengeist-frontend/src/plugins/pricelist/pages/Receipts.vue

<template>
  <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, 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, Search } from '../utils/filter';
import { sort } from '../utils/sort';
export default defineComponent({
  name: 'Reciepts',
  components: { BuildManual, BuildManualVolume, SearchInput },
  setup() {
    const store = usePricelistStore();
    onBeforeMount(() => {
      void store.getDrinks();
    });
    const drinks = computed(() =>
      store.drinks.filter((drink) => {
        return drink.volumes.some((volume) => volume.ingredients.length > 0);
      })
    );

    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<Search>({ value: '', key: '', label: '' });

    return {
      drinks,
      options: [...columns_drinks, ...columns_volumes, ...columns_prices],
      search,
      filter,
    };
  },
});
</script>

<style scoped></style>