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

<template>
  <q-carousel
    v-model="volume"
    transition-prev="slide-right"
    transition-next="slide-left"
    animated
    swipeable
    control-color="primary"
    navigation
    arrows
  >
    <q-carousel-slide v-for="volume in volumes" :key="volume.id" :name="volume.id">
      <q-input
        v-model.number="volume.volume"
        class="q-pa-sm"
        :outlined="!editable"
        :filled="editable"
        :readonly="!editable"
        dense
        label="Inhalt"
        mask="#.###"
        fill-mask="0"
        suffix="L"
        min="0"
        step="0.001"
      />
      <div class="full-width row q-gutter-sm q-pa-sm justify-around">
        <div v-for="(min_price, index) in volume.min_prices" :key="index">
          <q-badge class="text-body1" color="primary"> {{ min_price.percentage }}% </q-badge>
          <div class="text-body1">{{ min_price.price.toFixed(3) }}€</div>
        </div>
      </div>
      <div class="q-pa-sm">
        <div v-for="(price, index) in volume.prices" :key="price.id">
          <div class="fit row justify-around q-py-sm">
            <div v-if="!editable" class="text-body1 col-xs-12 col-md-3">
              {{ price.price.toFixed(2) }}€
            </div>
            <q-input
              v-else
              v-model.number="price.price"
              class="col-xs-12 col-md-3"
              type="number"
              min="0"
              step="0.01"
              suffix="€"
              filled
              dense
              label="Preis"
            />
            <div class="text-body1 col-xs-12 col-md-2">
              <q-toggle
                v-model="price.public"
                :disable="!editable"
                checked-icon="mdi-earth"
                unchecked-icon="mdi-earth-off"
              />
            </div>
            <div v-if="!editable" class="text-body1 col-xs-12 col-md-5">
              {{ price.description }}
            </div>
            <q-input
              v-else
              v-model="price.description"
              class="col-xs-12 col-md-5"
              filled
              dense
              label="Beschreibung"
            />
          </div>
          <q-separator v-if="index < volume.prices.length - 1" />
        </div>
      </div>
      <div class="q-pa-sm">
        <ingredients v-model="volume.ingredients" :editable="editable" />
      </div>
    </q-carousel-slide>
  </q-carousel>
  <q-btn-toggle v-model="volume" :options="options" />
</template>

<script lang="ts">
import { computed, defineComponent, PropType, ref, onBeforeMount } from 'vue';
import { DrinkPriceVolume } from 'src/plugins/pricelist/store';
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';

export default defineComponent({
  name: 'DrinkPriceVolume',
  components: { Ingredients },
  props: {
    modelValue: {
      type: Array as PropType<Array<DrinkPriceVolume>>,
      required: true,
    },
    editable: {
      type: Boolean,
      default: false,
    },
  },
  emits: {
    'update:modelValue': (val: Array<DrinkPriceVolume>) => val,
  },
  setup(props, { emit }) {
    onBeforeMount(() => {
      volumes.value = <Array<DrinkPriceVolume>>[...props.modelValue];
    });
    const volumes = ref<Array<DrinkPriceVolume>>([]);
    const _volume = ref<number | undefined>();
    const volume = computed<number | undefined>({
      get: () => {
        if (_volume.value !== undefined) {
          return _volume.value;
        }
        if (volumes.value.length > 0) {
          return volumes.value[0].id;
        }
        return undefined;
      },
      set: (val: number | undefined) => (_volume.value = val),
    });
    const options = computed<Array<{ label: string; value: number }>>(() => {
      const retVal: Array<{ label: string; value: number }> = [];
      volumes.value.forEach((volume: DrinkPriceVolume) => {
        retVal.push({ label: `${<number>volume.volume}L`, value: volume.id });
      });
      return retVal;
    });

    function updateVolume() {
      emit('update:modelValue', volumes.value);
    }

    return { volumes, volume, options, updateVolume };
  },
});
</script>

<style scoped></style>