[pricelist][calculation] update grid view

This commit is contained in:
Tim Gröger 2021-04-03 22:39:06 +02:00
parent 741216ac3e
commit f5b370e743
4 changed files with 201 additions and 48 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<!--v-model:pagination="pagination"-->
<q-table <q-table
v-model:pagination="pagination"
title="Kalkulationstabelle" title="Kalkulationstabelle"
:columns="columns" :columns="columns"
:rows="drinks" :rows="drinks"
@ -9,6 +9,9 @@
:filter="search" :filter="search"
:filter-method="filter" :filter-method="filter"
:grid="grid" :grid="grid"
:style="grid ? '' : 'max-height: 80vh;'"
:virtual-scroll="!grid"
:rows-per-page-options="[0]"
> >
<template #header="props"> <template #header="props">
<q-tr :props="props"> <q-tr :props="props">
@ -26,7 +29,7 @@
<min-price-setting /> <min-price-setting />
</q-menu> </q-menu>
</q-btn> </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> <q-menu v-model="showNewDrink" anchor="center middle" self="center middle" persistent>
<new-drink @close="showNewDrink = false" /> <new-drink @close="showNewDrink = false" />
</q-menu> </q-menu>
@ -388,6 +391,63 @@
{{ tag.name }} {{ tag.name }}
</q-badge> </q-badge>
</q-card-section> </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> </q-card>
</div> </div>
</template> </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 NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue'; import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
import SearchInput from './SearchInput.vue'; import SearchInput from './SearchInput.vue';
import DrinkPriceVolumes from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumes.vue';
import { filter, Search } from '../utils/filter'; import { filter, Search } from '../utils/filter';
import { Notify } from 'quasar'; import { Notify } from 'quasar';
import { sort } from '../utils/sort'; import { sort } from '../utils/sort';
export default defineComponent({ export default defineComponent({
name: 'CalculationTable', name: 'CalculationTable',
components: { SearchInput, MinPriceSetting, NewDrink, BuildManual, DrinkPriceVolumesTable }, components: {
SearchInput,
MinPriceSetting,
NewDrink,
BuildManual,
DrinkPriceVolumesTable,
DrinkPriceVolumes,
},
setup() { setup() {
const mainStore = useMainStore(); const mainStore = useMainStore();
const store = usePricelistStore(); const store = usePricelistStore();
@ -643,7 +711,7 @@ export default defineComponent({
key: '', key: '',
label: '', label: '',
}); });
const grid = ref(false); const grid = ref(true);
return { return {
drinks: computed(() => store.drinks), drinks: computed(() => store.drinks),
pagination, pagination,

View File

@ -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>

View File

@ -91,7 +91,7 @@
<q-separator /> <q-separator />
</div> </div>
<div class="full-width row justify-end q-py-xs"> <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"> <q-menu anchor="center middle" self="center middle">
<div class="full-width row justify-around q-gutter-sm q-pa-sm"> <div class="full-width row justify-around q-gutter-sm q-pa-sm">
<div class="col"> <div class="col">

View File

@ -1,5 +1,4 @@
<template> <template>
<div>
<q-dialog v-model="edittype"> <q-dialog v-model="edittype">
<q-card> <q-card>
<q-card-section> <q-card-section>
@ -15,16 +14,15 @@
</q-card> </q-card>
</q-dialog> </q-dialog>
<q-page padding> <q-table
<q-table title="Getränkearten" :rows="rows" :row-key="(row) => row.id" :columns="columns"> title="Getränkearten"
:rows="rows"
:row-key="(row) => row.id"
:columns="columns"
style="height: 100%"
>
<template #top-right> <template #top-right>
<q-input <q-input v-model="newDrinkType" class="q-px-sm" dense placeholder="Neue Getränkeart" filled />
v-model="newDrinkType"
class="q-px-sm"
dense
placeholder="Neue Getränkeart"
filled
/>
<div></div> <div></div>
<q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" /> <q-btn color="primary" icon="mdi-plus" label="Hinzufügen" @click="addType" />
@ -41,8 +39,6 @@
</q-td> </q-td>
</template> </template>
</q-table> </q-table>
</q-page>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -60,7 +56,7 @@ export default defineComponent({
const actualDrinkType = ref(emptyDrinkType); const actualDrinkType = ref(emptyDrinkType);
onBeforeMount(() => { onBeforeMount(() => {
void store.getDrinkTypes(); void store.getDrinkTypes(true);
}); });
const rows = computed(() => store.drinkTypes); const rows = computed(() => store.drinkTypes);
const columns = [ const columns = [