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"/>
        </q-td>
      </q-tr>
    </template>
    <template #bottom>
      <div class="full-width row justify-end">
        <new-volume :cost_price_pro_volume="drink.cost_price_pro_volume" @addVolume="addVolume($event, drink)" />
      </div>
    </template>
    <template #no-data>
      <div class="full-width row justify-end">
        <new-volume :cost_price_pro_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 {CompositionAPIEmit} from 'vue-typed-emit';
import {SetupContext} from 'vue'

interface Events {
  updateDrink: undefined
}

interface ExtendedSetupContext extends Omit<SetupContext, 'emit'> {
  emit: CompositionAPIEmit<Events>
}

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 {
  props: {
    visibleColumns: {
      type: Array,
      default: columns
    },
    columns: {
      type: Array,
      default: columns
    },
    rows: {
      type: [] as Array<DrinkPriceVolume>,
      required: true,
    },
    drink: {
      type: Object as () => Drink,
      required: true
    }

  },
  name: 'DrinkPriceVolumsTable',
  components: { PriceTable, Ingredients, NewVolume },
  setup(_: any, {emit}: ExtendedSetupContext) {
    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',
      },
    ];

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

<style scoped>

</style>