flaschengeist-frontend/src/plugins/pricelist/components/Pricelist.vue

<template>
  <div>
    <q-table
      title="Getränke"
      :columns="columns_drinks"
      :rows="drinks"
      row-key="name"
      :visible-columns="visibleColumn"
    >
      <template #top-right>
        <q-select
          v-model="visibleColumn"
          multiple
          filled
          dense
          options-dense
          display-value="Sichtbarkeit"
          emit-value
          map-options
          :options="[...columns_drinks, ...columns_volumes, ...columns_prices]"
          option-value="name"
          options-cover
        />
      </template>
      <template #body-cell-volumes="props">
        <q-td :props="props">
          <q-table
            :columns="columns_volumes"
            :rows="props.row.volumes"
            hide-header
            :hide-bottom="props.row.volumes.length < 5"
            flat
          >
            <template #body-cell-prices="props_volumes">
              <q-td :props="props_volumes">
                <q-table
                  :columns="columns_prices"
                  :rows="props_volumes.row.prices"
                  hide-header
                  :hide-bottom="props_volumes.row.prices.length < 5"
                  flat
                >
                  <template #body-cell-public="props_prices">
                    <q-td :props="props_prices">
                      <q-toggle v-model="props_prices.row.public" disable />
                    </q-td>
                  </template>
                </q-table>
              </q-td>
            </template>
          </q-table>
        </q-td>
      </template>
      <template #body-cell-picture="drinks_props">
        <q-td :props="drinks_props" style="min-width: 256px">
          <q-img
            loading="lazy"
            :src="
              drinks_props.row.uuid
                ? `/api/pricelist/picture/${drinks_props.row.uuid}?size=256`
                : 'no-image.svg'
            "
            placeholder-src="no-image.svg"
          >
            <template #error>
              <div class="absolute-full flex flex-center bg-negative text-white">
                Cannot load image
              </div>
            </template>
          </q-img>
        </q-td>
      </template>
    </q-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from 'vue';
import { usePricelistStore } from '../store';
import { useMainStore } from 'src/store';

export default defineComponent({
  name: 'Pricelist',
  filters: {
    setVolume(volume: number) {
      if (volume * 10 > 1) {
        return `${volume}l`;
      }
      return `${volume * 100}cl`;
    },
    setCurrency(price: number) {
      return `${price.toFixed(2)}€`;
    },
  },
  setup() {
    onBeforeMount(() => {
      store.getPriceCalcColumn(user);
    });
    const store = usePricelistStore();

    onBeforeMount(() => {
      void store.getDrinks();
    });
    const drinks = computed(() => store.drinks);
    const columns_drinks = [
      {
        name: 'picture',
        label: 'Bild',
      },
      {
        name: 'name',
        label: 'Getränk',
        field: 'name',
        align: 'center',
      },
      {
        name: 'volumes',
        label: 'Preise',
        field: 'volumes',
        align: 'center',
      },
    ];
    const columns_volumes = [
      {
        name: 'volume',
        label: 'Inhalt',
        field: 'volume',
        format: (val: number) => `${val.toFixed(3)}L`,
        align: 'left',
      },
      {
        name: 'prices',
        label: 'Preise',
        field: 'prices',
      },
    ];
    const columns_prices = [
      {
        name: 'price',
        label: 'Preis',
        field: 'price',
        format: (val: number) => `${val.toFixed(2)}€`,
      },
      {
        name: 'description',
        label: 'Beschreibung',
        field: 'description',
      },
      {
        name: 'public',
        label: 'Öffentlich',
        field: 'public',
      },
    ];
    const visibleColumn = computed({
      get: () => store.pricecalc_columns,
      set: (val) => {
        store.updatePriceCalcColumn(user, val);
      },
    });
    const mainStore = useMainStore();
    const user = mainStore.currentUser.userid;
    return { columns_drinks, columns_volumes, columns_prices, drinks, visibleColumn };
  },
});
</script>