flaschengeist-frontend/src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue

<template>
  <q-table
    :columns="columns"
    :rows="rows"
    dense
    :visible-columns="visibleColumns"
    row-key="id"
    flat
  >
    <template #header="props">
      <q-tr :props="props">
        <q-th auto-width />
        <q-th v-for="col in props.cols" :key="col.name" :props="props">
          {{ col.label }}
        </q-th>
      </q-tr>
    </template>

    <template #body="props">
      <q-tr :props="props">
        <q-td auto-width>
          <q-btn
            v-if="!drink.cost_price_pro_volume"
            size="sm"
            color="accent"
            round
            dense
            :icon="props.expand ? 'mdi-chevron-up' : 'mdi-chevron-down'"
            @click="props.expand = !props.expand"
          />
          <q-btn
            v-if="props.row.ingredients.length === 0 && props.row.prices.length === 0"
            size="xs"
            color="negative"
            round
            dense
            icon="mdi-delete"
            class="q-mx-sm"
            @click="deleteVolume(props.row, drink)"
          />
        </q-td>
        <q-td key="volume" :props="props">
          {{ parseFloat(props.row.volume).toFixed(3) }}L
          <q-popup-edit
            v-if="rows.cost_price_pro_volume"
            v-model="props.row.volume"
            buttons
            label-cancel="Abbrechen"
            label-set="Speichern"
            @save="updateVolume(props.row, drink)"
          >
            <q-input v-model.number="props.row.volume" dense filled type="number" suffix="L" />
          </q-popup-edit>
        </q-td>
        <q-td key="min_prices" :props="props">
          <div
            v-for="(min_price, index) in props.row.min_prices"
            :key="`min_prices` + index"
            class="row justify-between"
          >
            <div class="col">
              <q-badge color="primary">{{ min_price.percentage }}%</q-badge>
            </div>
            <div class="col" style="text-align: end">
              {{ min_price.price ? min_price.price.toFixed(3) : Number(0).toFixed(2) }}€
            </div>
          </div>
        </q-td>
        <q-td key="prices" :props="props">
          <price-table
            :columns="column_prices"
            :rows="props.row.prices"
            :row="props.row"
            :visible-columns="visibleColumns"
            @updateDrink="updateDrink"
          />
        </q-td>
      </q-tr>
      <q-tr v-show="props.expand" :props="props">
        <q-td colspan="100%">
          <ingredients
            :ingredients="props.row.ingredients"
            :volume="props.row"
            @updateDrink="updateDrink"
            @addIngredient="addIngredient"
            @deleteIngredient="deleteIngredient"
          />
        </q-td>
      </q-tr>
    </template>
    <template #bottom>
      <div class="full-width row justify-end">
        <new-volume
          :price-per-volume="drink.cost_price_pro_volume"
          @addVolume="addVolume($event, drink)"
        />
      </div>
    </template>
    <template #no-data>
      <div class="full-width row justify-end">
        <new-volume
          :price-per-volume="drink.cost_price_pro_volume"
          @addVolume="addVolume($event, drink)"
        />
      </div>
    </template>
  </q-table>
</template>

<script lang="ts">
import { Drink, DrinkPriceVolume, usePricelistStore } from '../../store';
import PriceTable from 'src/plugins/pricelist/components/CalculationTable/PriceTable.vue';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
import NewVolume from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumeTable/NewVolume.vue';
import { PropType, defineComponent } from 'vue';

const columns = [
  {
    name: 'volume',
    label: 'Abgabe in l',
    field: 'volume',
  },
  {
    name: 'min_prices',
    label: 'Minimal Preise',
    field: 'min_prices',
  },
  {
    name: 'prices',
    label: 'Preise',
    field: 'prices',
  },
];

export default defineComponent({
  name: 'DrinkPriceVolumsTable',
  components: { PriceTable, Ingredients, NewVolume },
  props: {
    visibleColumns: {
      type: Array,
      default: columns,
    },
    columns: {
      type: Array,
      default: columns,
    },
    rows: {
      type: Array as PropType<Array<DrinkPriceVolume>>,
      required: true,
    },
    drink: {
      type: Object as PropType<Drink>,
      required: true,
    },
  },
  emits: { updateDrink: () => true },
  setup(_, { emit }) {
    const store = usePricelistStore();

    function addVolume(volume: DrinkPriceVolume, drink: Drink) {
      drink.volumes.push(volume);
      updateDrink();
    }

    function updateDrink() {
      emit('updateDrink');
    }
    function deleteVolume(volume: FG.DrinkPriceVolume, drink: FG.Drink) {
      store.deleteVolume(volume, drink);
    }
    const column_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',
      },
    ];

    function addIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
      volume.ingredients.push(ingredient);
      updateDrink();
    }
    function deleteIngredient(ingredient: FG.Ingredient, volume: DrinkPriceVolume) {
      store.deleteIngredient(ingredient, volume);
    }

    return { addVolume, updateDrink, deleteVolume, column_prices, addIngredient, deleteIngredient };
  },
});
</script>

<style scoped></style>