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

<template>
  <div>
    <q-table title="Getränke" :columns="columns_drinks" :rows="drinks" row-key="name">
      <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>
    </q-table>
  </div>
</template>
<script lang="ts">
import { defineComponent, onBeforeMount, computed } from 'vue';
import { usePricelistStore } from '../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() {
    const store = usePricelistStore();

    onBeforeMount(() => {
      void store.getDrinks();
    });
    const drinks = computed(() => store.drinks);
    const columns_drinks = [
      {
        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',
      },
    ];
    return { columns_drinks, columns_volumes, columns_prices, drinks };
  },
});
</script>