flaschengeist-pricelist/src/pages/Receipts.vue

<template>
  <q-table
    v-model:pagination="pagination"
    grid
    title="Rezepte"
    :rows="drinks"
    row-key="id"
    hide-header
    @request="onRequest"
    :columns="options"
    :filter="search"
  >
    <!--:filter="search"
      :filter-method="filter"-->
    <template #top-right>
      <search-input v-model="search" :keys="search_keys" />
    </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="image(props.row.uuid)"
            placeholder-src="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>
          <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 BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
import BuildManual from '../components/CalculationTable/BuildManual.vue';
import SearchInput from '../components/SearchInput.vue';
import { filter, Search } from '../utils/filter';
import { usePricelistStore } from '../store';
import { sort } from '../utils/sort';
import { api } from '@flaschengeist/api';

export default defineComponent({
  name: 'Reciepts',
  components: { BuildManual, BuildManualVolume, SearchInput },
  setup() {
    const store = usePricelistStore();
    onBeforeMount(() => {
      //void store.getDrinks();
      onRequest({
        pagination: pagination.value,
        filter: { limit: 10, receipt: true },
      });
    });
    const drinks = computed(
      () =>
        //store.drinks.filter((drink) => {
        //  return drink.volumes.some((volume) => volume.ingredients.length > 0);
        //})
        store.drinks
    );

    const columns_drinks = [
      {
        name: 'picture',
        label: 'Bild',
        align: 'center',
        filterable: false,
      },
      {
        name: 'name',
        label: 'Name',
        field: 'name',
        align: 'center',
        sortable: true,
        filterable: 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),
        filterable: true,
      },
      {
        name: 'tags',
        label: 'Tag',
        field: 'tags',
        format: (val: Array<FG.Tag>) => {
          let retVal = '';
          val.forEach((tag, index) => {
            if (index > 0) {
              retVal += ', ';
            }
            retVal += tag.name;
          });
          return retVal;
        },
        filterable: true,
      },
      {
        name: 'volumes',
        label: 'Preise',
        field: 'volumes',
        align: 'center',
        filterable: false,
      },
    ];
    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: '' });
    const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
    function image(uuid: string | undefined) {
      if (uuid) {
        return `${api.defaults.baseURL || ''}/pricelist/picture/${uuid}?size=256`;
      }
      return 'no-image.svg';
    }
    const loading = ref(false);
    const pagination = ref({
      sortBy: 'name',
      descending: false,
      page: 1,
      rowsPerPage: 10,
      rowsNumber: 10,
    });

    async function onRequest(props: { pagination: PaginationInterface; filter?: Search }) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination;
      loading.value = true;
      console.log('search_keys', search_keys);
      const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
      const startRow = (page - 1) * rowsPerPage;
      try {
        const result = await store.getDrinks({
          offset: startRow,
          limit: fetchCount,
          descending,
          search_name: props.filter.value,
          search_key: props.filter.key,
          receipt: true,
        });
        pagination.value.page = page;
        pagination.value.rowsPerPage = rowsPerPage;
        pagination.value.sortBy = sortBy;
        pagination.value.descending = descending;
        if (result.count) pagination.value.rowsNumber = result.count;
      } catch (error) {
        //..
      }
      loading.value = false;
    }
    interface PaginationInterface {
      sortBy: string;
      descending: boolean;
      page: number;
      rowsPerPage: number;
      rowsNumber: number;
    }
    return {
      drinks,
      options: [...columns_drinks, ...columns_volumes, ...columns_prices],
      search,
      filter,
      search_keys,
      image,
      onRequest,
      loading,
      pagination,
    };
  },
});
</script>

<style scoped></style>