[pricelist][calculation] start add grid view
This commit is contained in:
parent
736ea04b4a
commit
284652b002
|
|
@ -1,16 +1,14 @@
|
|||
<template>
|
||||
<!--v-model:pagination="pagination"-->
|
||||
<q-table
|
||||
v-model:pagination="pagination"
|
||||
title="Kalkulationstabelle"
|
||||
:columns="columns"
|
||||
:rows="drinks"
|
||||
:visible-columns="visibleColumn"
|
||||
:dense="$q.screen.lt.md"
|
||||
row-key="id"
|
||||
virtual-scroll
|
||||
:rows-per-page-options="[0]"
|
||||
dense
|
||||
:filter="search"
|
||||
:filter-method="filter"
|
||||
:grid="grid"
|
||||
>
|
||||
<template #header="props">
|
||||
<q-tr :props="props">
|
||||
|
|
@ -46,6 +44,7 @@
|
|||
option-value="name"
|
||||
options-cover
|
||||
/>
|
||||
<q-btn label="grid" @click="grid = !grid" />
|
||||
</div>
|
||||
</template>
|
||||
<template #body="drinks_props">
|
||||
|
|
@ -357,25 +356,41 @@
|
|||
@deleteStep="deleteStep($event, drinks_props.row)"
|
||||
@addStep="addStep($event, drinks_props.row)"
|
||||
/>
|
||||
<!--<q-popup-edit
|
||||
v-slot="scope"
|
||||
v-model="drinks_props.row.receipt"
|
||||
buttons
|
||||
label-cancel="Abbrechen"
|
||||
label-set="Speichern"
|
||||
@update:modelValue="updateDrink(drinks_props.row)"
|
||||
>
|
||||
<q-input
|
||||
v-model="scope.value"
|
||||
type="textarea"
|
||||
autofocus
|
||||
counter
|
||||
@keyup.enter.stop
|
||||
/>
|
||||
</q-popup-edit>-->
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||||
<q-card>
|
||||
<q-img
|
||||
style="max-height: 256px"
|
||||
:src="
|
||||
props.row.uuid ? `/api/pricelist/picture/${props.row.uuid}?size=256` : 'no-image.svg'
|
||||
"
|
||||
>
|
||||
<div class="absolute-bottom-right justify-end">
|
||||
<div class="text-subtitle1 text-right">
|
||||
{{ props.row.name }}
|
||||
</div>
|
||||
<div class="text-caption text-right">
|
||||
{{ props.row.type.name }}
|
||||
</div>
|
||||
</div>
|
||||
</q-img>
|
||||
<q-card-section>
|
||||
<q-badge
|
||||
v-for="tag in props.row.tags"
|
||||
:key="`${props.row.id}-${tag.id}`"
|
||||
class="text-caption"
|
||||
rounded
|
||||
:style="`background-color: ${tag.color}`"
|
||||
>
|
||||
{{ tag.name }}
|
||||
</q-badge>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</template>
|
||||
|
||||
|
|
@ -383,7 +398,7 @@
|
|||
import { defineComponent, onBeforeMount, ComputedRef, computed, ref } from 'vue';
|
||||
import DrinkPriceVolumesTable from 'src/plugins/pricelist/components/CalculationTable/DrinkPriceVolumesTable.vue';
|
||||
import { useMainStore } from 'src/stores';
|
||||
import { Drink, usePricelistStore } from 'src/plugins/pricelist/store';
|
||||
import { Drink, usePricelistStore, DrinkPriceVolume } from 'src/plugins/pricelist/store';
|
||||
import MinPriceSetting from 'src/plugins/pricelist/components/MinPriceSetting.vue';
|
||||
import NewDrink from 'src/plugins/pricelist/components/CalculationTable/NewDrink.vue';
|
||||
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
|
||||
|
|
@ -394,17 +409,17 @@ import { sort } from '../utils/sort';
|
|||
|
||||
export default defineComponent({
|
||||
name: 'CalculationTable',
|
||||
components: { SearchInput, BuildManual, MinPriceSetting, DrinkPriceVolumesTable, NewDrink },
|
||||
components: { SearchInput, MinPriceSetting, NewDrink, BuildManual, DrinkPriceVolumesTable },
|
||||
setup() {
|
||||
const mainStore = useMainStore();
|
||||
const store = usePricelistStore();
|
||||
|
||||
onBeforeMount(() => {
|
||||
void store.getDrinkTypes(true);
|
||||
void store.getTags();
|
||||
void store.getExtraIngredients();
|
||||
void store.get_min_prices();
|
||||
store.getPriceCalcColumn(user);
|
||||
// void store.getDrinkTypes(true);
|
||||
// void store.getTags();
|
||||
//void store.getDrinks();
|
||||
//void store.get_min_prices();
|
||||
void store.getPriceCalcColumn(user);
|
||||
});
|
||||
|
||||
const user = mainStore.currentUser.userid;
|
||||
|
|
@ -490,12 +505,34 @@ export default defineComponent({
|
|||
name: 'volumes',
|
||||
label: 'Preiskalkulation',
|
||||
field: 'volumes',
|
||||
format: (val: Array<DrinkPriceVolume>) => {
|
||||
let retVal = '';
|
||||
val.forEach((val, index) => {
|
||||
if (index > 0) {
|
||||
retVal += ', ';
|
||||
}
|
||||
retVal += val.id;
|
||||
});
|
||||
return retVal;
|
||||
},
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
name: 'receipt',
|
||||
label: 'Bauanleitung',
|
||||
field: 'receipt',
|
||||
format: (val: Array<string>) => {
|
||||
let retVal = '';
|
||||
val.forEach((value, index) => {
|
||||
if (index > 0) {
|
||||
retVal += ', ';
|
||||
}
|
||||
retVal += value;
|
||||
});
|
||||
return retVal;
|
||||
},
|
||||
filterable: true,
|
||||
sortable: false,
|
||||
},
|
||||
];
|
||||
const column_calc = [
|
||||
|
|
@ -542,9 +579,10 @@ export default defineComponent({
|
|||
|
||||
const search_keys = computed(() => columns.filter((column) => column.filterable));
|
||||
|
||||
// eslint-disable-next-line vue/return-in-computed-property
|
||||
const pagination = computed(() => {
|
||||
rowsPerPage: store.drinks.length;
|
||||
const pagination = ref({
|
||||
sortBy: 'name',
|
||||
descending: false,
|
||||
rowsPerPage: store.drinks.length,
|
||||
});
|
||||
|
||||
const drinkTypes = computed(() => store.drinkTypes);
|
||||
|
|
@ -605,6 +643,7 @@ export default defineComponent({
|
|||
key: '',
|
||||
label: '',
|
||||
});
|
||||
const grid = ref(false);
|
||||
return {
|
||||
drinks: computed(() => store.drinks),
|
||||
pagination,
|
||||
|
|
@ -625,6 +664,7 @@ export default defineComponent({
|
|||
search,
|
||||
filter,
|
||||
search_keys,
|
||||
grid,
|
||||
tags: computed(() => store.tags),
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ import { usePricelistStore } from 'src/plugins/pricelist/store';
|
|||
|
||||
export default defineComponent({
|
||||
name: 'Settings',
|
||||
components: { ExtraIngredients, DrinkTypes, CalculationTable, Tags },
|
||||
components: { ExtraIngredients, DrinkTypes, Tags, CalculationTable },
|
||||
setup() {
|
||||
interface Tab {
|
||||
name: string;
|
||||
|
|
@ -73,6 +73,7 @@ export default defineComponent({
|
|||
console.log(store.extraIngredients);
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
void store.getTags();
|
||||
void store.getDrinkTypes();
|
||||
void store.getDrinks();
|
||||
void store.get_min_prices();
|
||||
|
|
|
|||
Loading…
Reference in New Issue