release v2.0.0 #4
|
@ -22,7 +22,7 @@
|
||||||
</template>
|
</template>
|
||||||
<template #top-right>
|
<template #top-right>
|
||||||
<div class="row justify-end q-gutter-sm">
|
<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-btn label="Aufpreise">
|
||||||
<q-menu anchor="center middle" self="center middle">
|
<q-menu anchor="center middle" self="center middle">
|
||||||
<min-price-setting />
|
<min-price-setting />
|
||||||
|
@ -416,10 +416,11 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'name',
|
name: 'name',
|
||||||
label: 'Getränkename',
|
label: 'Name',
|
||||||
field: 'name',
|
field: 'name',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
sort,
|
sort,
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
@ -429,6 +430,7 @@ export default defineComponent({
|
||||||
format: (val: FG.DrinkType) => `${val.name}`,
|
format: (val: FG.DrinkType) => `${val.name}`,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'tags',
|
name: 'tags',
|
||||||
|
@ -444,6 +446,7 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
return retVal;
|
return retVal;
|
||||||
},
|
},
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'article_id',
|
name: 'article_id',
|
||||||
|
@ -451,6 +454,7 @@ export default defineComponent({
|
||||||
field: 'article_id',
|
field: 'article_id',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
sort,
|
sort,
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'volume_package',
|
name: 'volume_package',
|
||||||
|
@ -491,6 +495,7 @@ export default defineComponent({
|
||||||
name: 'receipt',
|
name: 'receipt',
|
||||||
label: 'Bauanleitung',
|
label: 'Bauanleitung',
|
||||||
field: 'receipt',
|
field: 'receipt',
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const column_calc = [
|
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
|
// eslint-disable-next-line vue/return-in-computed-property
|
||||||
const pagination = computed(() => {
|
const pagination = computed(() => {
|
||||||
rowsPerPage: store.drinks.length;
|
rowsPerPage: store.drinks.length;
|
||||||
|
@ -617,6 +624,7 @@ export default defineComponent({
|
||||||
console,
|
console,
|
||||||
search,
|
search,
|
||||||
filter,
|
filter,
|
||||||
|
search_keys,
|
||||||
tags: computed(() => store.tags),
|
tags: computed(() => store.tags),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
|
@ -12,10 +12,7 @@
|
||||||
>
|
>
|
||||||
<template #top-right>
|
<template #top-right>
|
||||||
<div class="row q-gutter-sm">
|
<div class="row q-gutter-sm">
|
||||||
<search-input
|
<search-input v-model="search" :keys="search_keys" />
|
||||||
v-model="search"
|
|
||||||
:keys="[...columns_drinks, ...columns_volumes, ...columns_prices]"
|
|
||||||
/>
|
|
||||||
<q-select
|
<q-select
|
||||||
v-model="visibleColumn"
|
v-model="visibleColumn"
|
||||||
multiple
|
multiple
|
||||||
|
@ -150,10 +147,11 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'name',
|
name: 'name',
|
||||||
label: 'Getränk',
|
label: 'Name',
|
||||||
field: 'name',
|
field: 'name',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'drink_type',
|
name: 'drink_type',
|
||||||
|
@ -162,6 +160,7 @@ export default defineComponent({
|
||||||
format: (val: FG.DrinkType) => `${val.name}`,
|
format: (val: FG.DrinkType) => `${val.name}`,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'tags',
|
name: 'tags',
|
||||||
|
@ -177,6 +176,7 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
return retVal;
|
return retVal;
|
||||||
},
|
},
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
|
@ -249,7 +249,7 @@ export default defineComponent({
|
||||||
return retVal;
|
return retVal;
|
||||||
}
|
}
|
||||||
const search = ref<Search>({ label: '', value: '', key: '' });
|
const search = ref<Search>({ label: '', value: '', key: '' });
|
||||||
|
const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
|
||||||
return {
|
return {
|
||||||
columns_drinks,
|
columns_drinks,
|
||||||
columns_volumes,
|
columns_volumes,
|
||||||
|
@ -258,6 +258,7 @@ export default defineComponent({
|
||||||
visibleColumn,
|
visibleColumn,
|
||||||
search,
|
search,
|
||||||
filter,
|
filter,
|
||||||
|
search_keys,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,12 +1,41 @@
|
||||||
<template>
|
<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>
|
<q-input v-model="v_model" filled dense>
|
||||||
<template #append>
|
<template #append>
|
||||||
<q-icon name="mdi-magnify" />
|
<q-icon name="mdi-magnify" />
|
||||||
</template>
|
</template>
|
||||||
|
<template #prepend>
|
||||||
|
<q-btn icon="mdi-help-circle" flat round @click="alert = true" />
|
||||||
|
</template>
|
||||||
</q-input>
|
</q-input>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, computed, PropType } from 'vue';
|
import { defineComponent, computed, PropType, ref } from 'vue';
|
||||||
import { Search, Col } from '../utils/filter';
|
import { Search, Col } from '../utils/filter';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'SearchInput',
|
name: 'SearchInput',
|
||||||
|
@ -51,7 +80,9 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
return { v_model };
|
|
||||||
|
const alert = ref(false);
|
||||||
|
return { v_model, alert };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
:columns="options"
|
:columns="options"
|
||||||
>
|
>
|
||||||
<template #top-right>
|
<template #top-right>
|
||||||
<search-input v-model="search" :keys="options" />
|
<search-input v-model="search" :keys="search_keys" />
|
||||||
</template>
|
</template>
|
||||||
<template #item="props">
|
<template #item="props">
|
||||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||||||
|
@ -84,10 +84,11 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'name',
|
name: 'name',
|
||||||
label: 'Getränk',
|
label: 'Name',
|
||||||
field: 'name',
|
field: 'name',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
|
filterable: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'drink_type',
|
name: 'drink_type',
|
||||||
|
@ -96,6 +97,23 @@ export default defineComponent({
|
||||||
format: (val: FG.DrinkType) => `${val.name}`,
|
format: (val: FG.DrinkType) => `${val.name}`,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
sort: (a: FG.DrinkType, b: FG.DrinkType) => sort(a.name, b.name),
|
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',
|
name: 'volumes',
|
||||||
|
@ -136,12 +154,13 @@ export default defineComponent({
|
||||||
];
|
];
|
||||||
|
|
||||||
const search = ref<Search>({ value: '', key: '', label: '' });
|
const search = ref<Search>({ value: '', key: '', label: '' });
|
||||||
|
const search_keys = computed(() => columns_drinks.filter((column) => column.filterable));
|
||||||
return {
|
return {
|
||||||
drinks,
|
drinks,
|
||||||
options: [...columns_drinks, ...columns_volumes, ...columns_prices],
|
options: [...columns_drinks, ...columns_volumes, ...columns_prices],
|
||||||
search,
|
search,
|
||||||
filter,
|
filter,
|
||||||
|
search_keys,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue