[pricelist][calculation] update grid view
This commit is contained in:
parent
741216ac3e
commit
f5b370e743
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<!--v-model:pagination="pagination"-->
|
||||
<q-table
|
||||
v-model:pagination="pagination"
|
||||
title="Kalkulationstabelle"
|
||||
:columns="columns"
|
||||
:rows="drinks"
|
||||
|
|
@ -9,6 +9,9 @@
|
|||
:filter="search"
|
||||
:filter-method="filter"
|
||||
:grid="grid"
|
||||
:style="grid ? '' : 'max-height: 80vh;'"
|
||||
:virtual-scroll="!grid"
|
||||
:rows-per-page-options="[0]"
|
||||
>
|
||||
<template #header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -26,7 +29,7 @@
|
|||
<min-price-setting />
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn label="neues Getränk" color="positive" icon-right="add">
|
||||
<q-btn label="neues Getränk" color="positive" icon-right="mdi-plus">
|
||||
<q-menu v-model="showNewDrink" anchor="center middle" self="center middle" persistent>
|
||||
<new-drink @close="showNewDrink = false" />
|
||||
</q-menu>
|
||||
|
|
@ -388,6 +391,63 @@
|
|||
{{ tag.name }}
|
||||
</q-badge>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="fit row">
|
||||
<q-input
|
||||
v-if="props.row.article_id"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:model-value="props.row.article_id"
|
||||
outlined
|
||||
readonly
|
||||
label="Artikelnummer"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.row.volume"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:model-value="props.row.volume"
|
||||
outlined
|
||||
readonly
|
||||
label="Inhalt"
|
||||
dense
|
||||
suffix="L"
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.row.package_size"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:model-value="props.row.package_size"
|
||||
outlined
|
||||
readonly
|
||||
label="Gebindegröße"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.row.cost_per_package"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm"
|
||||
:model-value="props.row.cost_per_package"
|
||||
outlined
|
||||
readonly
|
||||
label="Preis Gebinde"
|
||||
suffix="€"
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.row.cost_per_volume"
|
||||
class="col-xs-12 col-sm-6 q-pa-sm q-pb-lg"
|
||||
:model-value="props.row.cost_per_volume"
|
||||
outlined
|
||||
readonly
|
||||
label="Preis pro L"
|
||||
hint="Inkl. 19% Mehrwertsteuer"
|
||||
suffix="€"
|
||||
dense
|
||||
/>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-if="props.row.volumes.length > 0">
|
||||
<drink-price-volumes :props="props.row" />
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -403,13 +463,21 @@ import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vu
|
|||
import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
|
||||
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
|
||||
import SearchInput from './SearchInput.vue';
|
||||
import DrinkPriceVolumes from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue';
|
||||
import { filter, Search } from '../utils/filter';
|
||||
import { Notify } from 'quasar';
|
||||
import { sort } from '../utils/sort';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'CalculationTable',
|
||||
components: { SearchInput, MinPriceSetting, NewDrink, BuildManual, DrinkPriceVolumesTable },
|
||||
components: {
|
||||
SearchInput,
|
||||
MinPriceSetting,
|
||||
NewDrink,
|
||||
BuildManual,
|
||||
DrinkPriceVolumesTable,
|
||||
DrinkPriceVolumes,
|
||||
},
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
const store = usePricelistStore();
|
||||
|
|
@ -643,7 +711,7 @@ export default defineComponent({
|
|||
key: '',
|
||||
label: '',
|
||||
});
|
||||
const grid = ref(false);
|
||||
const grid = ref(true);
|
||||
return {
|
||||
drinks: computed(() => store.drinks),
|
||||
pagination,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<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 props.volumes" :key="volume.id" :name="volume.id">
|
||||
<q-input
|
||||
class="q-pa-sm"
|
||||
:model-value="volume.volume"
|
||||
outlined
|
||||
readonly
|
||||
dense
|
||||
label="Inhalt"
|
||||
mask="#.###"
|
||||
fill-mask="0"
|
||||
suffix="L"
|
||||
/>
|
||||
<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 class="text-body1 col-xs-12 col-md-4">{{ price.price.toFixed(2) }}€</div>
|
||||
<div class="text-body1 col-xs-12 col-md-4">
|
||||
<q-toggle
|
||||
:model-value="price.public"
|
||||
disable
|
||||
checked-icon="mdi-earth"
|
||||
unchecked-icon="mdi-earth-off"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-body1 col-xs-12 col-md-4">
|
||||
{{ price.description }}
|
||||
</div>
|
||||
</div>
|
||||
<q-separator v-if="index < volume.prices.length - 1" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pa-sm">
|
||||
<ingredients :ingredients="volume.ingredients" :volume="volume" />
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref } from 'vue';
|
||||
import { Drink } from 'src/plugins/pricelist/store';
|
||||
import Ingredients from 'src/plugins/pricelist/components/CalculationTable/Ingredients.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DrinkPriceVolume',
|
||||
components: { Ingredients },
|
||||
props: {
|
||||
props: {
|
||||
type: Object as PropType<Drink>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const _volume = ref<number>();
|
||||
const volume = computed({
|
||||
get: () => {
|
||||
if (_volume.value !== undefined) {
|
||||
return _volume.value;
|
||||
}
|
||||
if (props.props.volumes.length > 0) {
|
||||
return props.props.volumes[0].id;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
set: (val: number) => (_volume.value = val),
|
||||
});
|
||||
return { volume };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
<q-separator />
|
||||
</div>
|
||||
<div class="full-width row justify-end q-py-xs">
|
||||
<q-btn size="sm" icon-right="add" color="positive" label="Zutat hinzufügen">
|
||||
<q-btn size="sm" icon-right="mdi-plus" color="positive" label="Zutat hinzufügen">
|
||||
<q-menu anchor="center middle" self="center middle">
|
||||
<div class="full-width row justify-around q-gutter-sm q-pa-sm">
|
||||
<div class="col">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<template>
|
||||
<div>
|
||||
<q-dialog v-model="edittype">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
|
|
@ -15,16 +14,15 @@
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<q-page padding>
|
||||
<q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns">
|
||||
<q-table
|
||||
title="Getränkearten"
|
||||
:rows="rows"
|
||||
:row-key="(row) => row.id"
|
||||
:columns="columns"
|
||||
style="height: 100%"
|
||||
>
|
||||
<template #top-right>
|
||||
<q-input
|
||||
v-model="newDrinkType"
|
||||
class="q-px-sm"
|
||||
dense
|
||||
placeholder="Neue Getränkeart"
|
||||
filled
|
||||
/>
|
||||
<q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
|
||||
|
||||
<div></div>
|
||||
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
|
||||
|
|
@ -41,8 +39,6 @@
|
|||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -60,7 +56,7 @@ export default defineComponent({
|
|||
const actualDrinkType = ref(emptyDrinkType);
|
||||
|
||||
onBeforeMount(() => {
|
||||
void store.getDrinkTypes();
|
||||
void store.getDrinkTypes(true);
|
||||
});
|
||||
const rows = computed(() => store.drinkTypes);
|
||||
const columns = [
|
||||
|
|
|
|||
Loading…
Reference in New Issue