[pricelist][search] add help
This commit is contained in:
parent
5d1df48b9a
commit
736ea04b4a
|
|
@ -22,7 +22,7 @@
|
|||
</template>
|
||||
<template #top-right>
|
||||
<div class="row justify-end q-gutter-sm">
|
||||
<search-input v-model="search" :keys="[...columns, ...column_calc, ...column_prices]" />
|
||||
<search-input v-model="search" :keys="search_keys" />
|
||||
<q-btn label="Aufpreise">
|
||||
<q-menu anchor="center middle" self="center middle">
|
||||
<min-price-setting />
|
||||
|
|
@ -416,10 +416,11 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: 'Getränkename',
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
sortable: true,
|
||||
sort,
|
||||
filterable: true,
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -429,6 +430,7 @@ export default defineComponent({
|
|||
format: (val: FG.DrinkType) => `${val.name}`,
|
||||
sortable: true,
|
||||
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'tags',
|
||||
|
|
@ -444,6 +446,7 @@ export default defineComponent({
|
|||
});
|
||||
return retVal;
|
||||
},
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'article_id',
|
||||
|
|
@ -451,6 +454,7 @@ export default defineComponent({
|
|||
field: 'article_id',
|
||||
sortable: true,
|
||||
sort,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'volume_package',
|
||||
|
|
@ -491,6 +495,7 @@ export default defineComponent({
|
|||
name: 'receipt',
|
||||
label: 'Bauanleitung',
|
||||
field: 'receipt',
|
||||
filterable: true,
|
||||
},
|
||||
];
|
||||
const column_calc = [
|
||||
|
|
@ -535,6 +540,8 @@ 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;
|
||||
|
|
@ -617,6 +624,7 @@ export default defineComponent({
|
|||
console,
|
||||
search,
|
||||
filter,
|
||||
search_keys,
|
||||
tags: computed(() => store.tags),
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,10 +12,7 @@
|
|||
>
|
||||
<template #top-right>
|
||||
<div class="row q-gutter-sm">
|
||||
<search-input
|
||||
v-model="search"
|
||||
:keys="[...columns_drinks, ...columns_volumes, ...columns_prices]"
|
||||
/>
|
||||
<search-input v-model="search" :keys="search_keys" />
|
||||
<q-select
|
||||
v-model="visibleColumn"
|
||||
multiple
|
||||
|
|
@ -150,10 +147,11 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: 'Getränk',
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'drink_type',
|
||||
|
|
@ -162,6 +160,7 @@ export default defineComponent({
|
|||
format: (val: FG.DrinkType) => `${val.name}`,
|
||||
sortable: true,
|
||||
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'tags',
|
||||
|
|
@ -177,6 +176,7 @@ export default defineComponent({
|
|||
});
|
||||
return retVal;
|
||||
},
|
||||
filterable: true,
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -249,7 +249,7 @@ export default defineComponent({
|
|||
return retVal;
|
||||
}
|
||||
const search = ref<Search>({ label: '', value: '', key: '' });
|
||||
|
||||
const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
|
||||
return {
|
||||
columns_drinks,
|
||||
columns_volumes,
|
||||
|
|
@ -258,6 +258,7 @@ export default defineComponent({
|
|||
visibleColumn,
|
||||
search,
|
||||
filter,
|
||||
search_keys,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,12 +1,41 @@
|
|||
<template>
|
||||
<q-dialog v-model="alert">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Suche</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="q-pt-none">
|
||||
<div>
|
||||
Wenn du in die Suche etwas eingibst, wird in allen Spalten gesucht. Mit einem `@` Zeichen,
|
||||
kann man die Suche eingrenzen auf eine Spalte. Zumbeispiel: `Tequilaparty@Tags`
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div>Mögliche Suchbegriffe nach dem @:</div>
|
||||
<div class="fit row q-gutter-sm">
|
||||
<div v-for="key in keys" :key="key.name">
|
||||
{{ key.label }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn v-close-popup flat label="OK" color="primary" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
<q-input v-model="v_model" filled dense>
|
||||
<template #append>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
<template #prepend>
|
||||
<q-btn icon="mdi-help-circle" flat round @click="alert = true" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, PropType } from 'vue';
|
||||
import { defineComponent, computed, PropType, ref } from 'vue';
|
||||
import { Search, Col } from '../utils/filter';
|
||||
export default defineComponent({
|
||||
name: 'SearchInput',
|
||||
|
|
@ -51,7 +80,9 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
});
|
||||
return { v_model };
|
||||
|
||||
const alert = ref(false);
|
||||
return { v_model, alert };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
:columns="options"
|
||||
>
|
||||
<template #top-right>
|
||||
<search-input v-model="search" :keys="options" />
|
||||
<search-input v-model="search" :keys="search_keys" />
|
||||
</template>
|
||||
<template #item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||||
|
|
@ -84,10 +84,11 @@ export default defineComponent({
|
|||
},
|
||||
{
|
||||
name: 'name',
|
||||
label: 'Getränk',
|
||||
label: 'Name',
|
||||
field: 'name',
|
||||
align: 'center',
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'drink_type',
|
||||
|
|
@ -96,6 +97,23 @@ export default defineComponent({
|
|||
format: (val: FG.DrinkType) => `${val.name}`,
|
||||
sortable: true,
|
||||
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'tags',
|
||||
label: 'Tag',
|
||||
field: 'tags',
|
||||
format: (val: Array<FG.Tag>) => {
|
||||
let retVal = '';
|
||||
val.forEach((tag, index) => {
|
||||
if (index > 0) {
|
||||
retVal += ', ';
|
||||
}
|
||||
retVal += tag.name;
|
||||
});
|
||||
return retVal;
|
||||
},
|
||||
filterable: true,
|
||||
},
|
||||
{
|
||||
name: 'volumes',
|
||||
|
|
@ -136,12 +154,13 @@ export default defineComponent({
|
|||
];
|
||||
|
||||
const search = ref<Search>({ value: '', key: '', label: '' });
|
||||
|
||||
const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
|
||||
return {
|
||||
drinks,
|
||||
options: [...columns_drinks, ...columns_volumes, ...columns_prices],
|
||||
search,
|
||||
filter,
|
||||
search_keys,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue