[pricelist][receipt] change to table with grid, add search

This commit is contained in:
Tim Gröger 2021-03-31 15:17:43 +02:00
parent fb14df0c43
commit f25651a71e
3 changed files with 124 additions and 24 deletions

View File

@ -28,7 +28,16 @@ export default defineComponent({
},
},
setup(props) {
const volume = ref(props.volumes[0].id);
const _volume = ref<number>();
const volume = computed({
get: () => {
if (_volume.value !== undefined) {
return _volume.value;
}
return props.volumes[0].id;
},
set: (val: number) => (_volume.value = val),
});
const options = computed(() => {
let ret: Array<{ label: number; value: number }> = [];
props.volumes.forEach((volume: DrinkPriceVolume) => {

View File

@ -29,7 +29,7 @@
</q-menu>
</q-btn>
<q-btn label="neues Getränk" color="positive" icon-right="add">
<q-menu v-model="showNewDrink" anchor="center middle" self="center middle">
<q-menu v-model="showNewDrink" anchor="center middle" self="center middle" persistent>
<new-drink @close="showNewDrink = false" />
</q-menu>
</q-btn>

View File

@ -1,33 +1,58 @@
<template>
<div class="q-pa-sm full-width full-height row q-gutter-sm">
<q-card v-for="drink in drinks" :key="drink.id" style="max-width: 400px; width: 400px">
<q-table
grid
title="Rezepte"
:rows="drinks"
row-key="id"
hide-header
:filter="search"
:filter-method="filter"
:columns="options"
>
<template #top-right>
<search-input v-model="search" :keys="options" />
</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"
loading="lazy"
:src="drink.uuid ? `/api/pricelist/picture/${drink.uuid}?size=256` : 'no-image.svg'"
:src="
props.row.uuid ? `/api/pricelist/picture/${props.row.uuid}?size=256` : 'no-image.svg'
"
placeholder-src="no-image.svg"
>
<div class="absolute-bottom-right text-subtitle2">
{{ drink.name }}
{{ props.row.name }}
</div>
</q-img>
<build-manual-volume :volumes="drink.volumes" />
<build-manual-volume :volumes="props.row.volumes" />
<q-card-section>
<div class="text-h6">Anleitung</div>
<build-manual :steps="drink.receipt" :editable="false" />
<build-manual :steps="props.row.receipt" :editable="false" />
</q-card-section>
</q-card>
</div>
</template>
</q-table>
</template>
<script lang="ts">
import { computed, defineComponent, onBeforeMount } from 'vue';
import { computed, defineComponent, onBeforeMount, ref } from 'vue';
import { usePricelistStore } from 'src/plugins/pricelist/store';
import BuildManual from 'src/plugins/pricelist/components/CalculationTable/BuildManual.vue';
import BuildManualVolume from '../components/BuildManual/BuildManualVolume.vue';
import SearchInput from '../components/SearchInput.vue';
import { filter } from '../utils/filter';
function sort(a: string | number, b: string | number) {
if (a > b) return 1;
if (b > a) return -1;
return 0;
}
export default defineComponent({
name: 'Reciepts',
components: { BuildManual, BuildManualVolume },
components: { BuildManual, BuildManualVolume, SearchInput },
setup() {
const store = usePricelistStore();
onBeforeMount(() => {
@ -39,7 +64,73 @@ export default defineComponent({
})
);
return { drinks };
const columns_drinks = [
{
name: 'picture',
label: 'Bild',
align: 'center',
},
{
name: 'name',
label: 'Getränk',
field: 'name',
align: 'center',
sortable: true,
},
{
name: 'drink_type',
label: 'Kategorie',
field: 'type',
format: (val: FG.DrinkType) => `${val.name}`,
sortable: true,
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
},
{
name: 'volumes',
label: 'Preise',
field: 'volumes',
align: 'center',
},
];
const columns_volumes = [
{
name: 'volume',
label: 'Inhalt',
field: 'volume',
align: 'left',
},
{
name: 'prices',
label: 'Preise',
field: 'prices',
},
];
const columns_prices = [
{
name: 'price',
label: 'Preis',
field: 'price',
},
{
name: 'description',
label: 'Beschreibung',
field: 'description',
},
{
name: 'public',
label: 'Öffentlich',
field: 'public',
},
];
const search = ref({ value: '', key: '', label: '' });
return {
drinks,
options: [...columns_drinks, ...columns_volumes, ...columns_prices],
search,
filter,
};
},
});
</script>