verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 61 Releases Wiki Activity

Table column filters

This commit is contained in:
William Buezas 2024-02-25 22:02:52 -03:00
parent cda0511247
commit bf66d4ec99
1 changed files with 416 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

425
src/pages/Entry/EntryLatestBuys.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { onMounted, ref, computed } from 'vue'; import { onMounted, ref, computed, reactive } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
@ -8,11 +8,14 @@ import FetchedTags from 'components/ui/FetchedTags.vue';
import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue'; import EntryDescriptorProxy from './Card/EntryDescriptorProxy.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue'; import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue'; import EditTableCellValueForm from 'src/components/EditTableCellValueForm.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate, toCurrency } from 'src/filters'; import { toDate, toCurrency } from 'src/filters';
import { useSession } from 'composables/useSession'; import { useSession } from 'composables/useSession';
import { dashIfEmpty } from 'src/filters'; import { dashIfEmpty } from 'src/filters';
import { useArrayData } from 'composables/useArrayData';
const router = useRouter(); const router = useRouter();
const session = useSession(); const session = useSession();
@ -21,11 +24,72 @@ const stateStore = useStateStore();
const { t } = useI18n(); const { t } = useI18n();
const rowsFetchDataRef = ref(null); const rowsFetchDataRef = ref(null);
const itemTypesOptions = ref([]);
const originsOptions = ref([]);
const itemFamiliesOptions = ref([]);
const intrastatOptions = ref([]);
const packagingsOptions = ref([]);
const editTableCellDialogRef = ref(null); const editTableCellDialogRef = ref(null);
const visibleColumns = ref([]); const visibleColumns = ref([]);
const allColumnNames = ref([]); const allColumnNames = ref([]);
const rows = ref([]);
const exprBuilder = (param, value) => {
switch (param) {
case 'id':
case 'size':
case 'weightByPiece':
case 'isActive':
case 'family':
case 'minPrice':
case 'packingOut':
return { [`i.${param}`]: value };
case 'name':
case 'description':
return { [`i.${param}`]: { like: `%${value}%` } };
case 'code':
return { 'it.code': value };
case 'intrastat':
return { 'intr.description': value };
case 'origin':
return { 'ori.code': value };
case 'landing':
return { [`lb.${param}`]: value };
case 'packing':
case 'grouping':
case 'quantity':
case 'entryFk':
case 'buyingValue':
case 'freightValue':
case 'comissionValue':
case 'packageValue':
case 'isIgnored':
case 'price2':
case 'price3':
case 'ektFk':
case 'weight':
case 'packagingFk':
return { [`b.${param}`]: value };
}
};
const params = reactive({});
const arrayData = useArrayData('EntryLatestBuys', {
url: 'Buys/latestBuysFilter',
order: ['itemFk DESC'],
exprBuilder: exprBuilder,
});
const store = arrayData.store;
const rows = computed(() => store.data);
const rowsSelected = ref([]); const rowsSelected = ref([]);
const getInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const columns = computed(() => [ const columns = computed(() => [
{ {
label: t('entry.latestBuys.picture'), label: t('entry.latestBuys.picture'),
@ -37,12 +101,32 @@ const columns = computed(() => [
name: 'itemFk', name: 'itemFk',
field: 'itemFk', field: 'itemFk',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.packing'), label: t('entry.latestBuys.packing'),
field: 'packing', field: 'packing',
name: 'packing', name: 'packing',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -50,6 +134,16 @@ const columns = computed(() => [
field: 'grouping', field: 'grouping',
name: 'grouping', name: 'grouping',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -57,12 +151,32 @@ const columns = computed(() => [
field: 'quantity', field: 'quantity',
name: 'quantity', name: 'quantity',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.description'), label: t('entry.latestBuys.description'),
field: 'description', field: 'description',
name: 'description', name: 'description',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -70,35 +184,104 @@ const columns = computed(() => [
field: 'size', field: 'size',
name: 'size', name: 'size',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.tags'), label: t('entry.latestBuys.tags'),
name: 'tags', name: 'tags',
align: 'left', align: 'left',
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.type'), label: t('entry.latestBuys.type'),
field: 'code', field: 'code',
name: 'type', name: 'type',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemTypesOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.intrastat'), label: t('entry.latestBuys.intrastat'),
field: 'intrastat', field: 'intrastat',
name: 'intrastat', name: 'intrastat',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: intrastatOptions.value,
'option-value': 'description',
'option-label': 'description',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.origin'), label: t('entry.latestBuys.origin'),
field: 'origin', field: 'origin',
name: 'origin', name: 'origin',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: originsOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.weightByPiece'), label: t('entry.latestBuys.weightByPiece'),
field: 'weightByPiece', field: 'weightByPiece',
name: 'weightByPiece', name: 'weightByPiece',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -106,24 +289,67 @@ const columns = computed(() => [
field: 'isActive', field: 'isActive',
name: 'isActive', name: 'isActive',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.family'), label: t('entry.latestBuys.family'),
field: 'family', field: 'family',
name: 'family', name: 'family',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: itemFamiliesOptions.value,
'option-value': 'code',
'option-label': 'code',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.entryFk'), label: t('entry.latestBuys.entryFk'),
field: 'entryFk', field: 'entryFk',
name: 'entryFk', name: 'entryFk',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.buyingValue'), label: t('entry.latestBuys.buyingValue'),
field: 'buyingValue', field: 'buyingValue',
name: 'buyingValue', name: 'buyingValue',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -131,6 +357,16 @@ const columns = computed(() => [
field: 'freightValue', field: 'freightValue',
name: 'freightValue', name: 'freightValue',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -138,6 +374,16 @@ const columns = computed(() => [
field: 'comissionValue', field: 'comissionValue',
name: 'comissionValue', name: 'comissionValue',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -145,6 +391,16 @@ const columns = computed(() => [
field: 'packageValue', field: 'packageValue',
name: 'packageValue', name: 'packageValue',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -152,12 +408,33 @@ const columns = computed(() => [
field: 'isIgnored', field: 'isIgnored',
name: 'isIgnored', name: 'isIgnored',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.price2'), label: t('entry.latestBuys.price2'),
field: 'price2', field: 'price2',
name: 'price2', name: 'price2',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -165,6 +442,16 @@ const columns = computed(() => [
field: 'price3', field: 'price3',
name: 'price3', name: 'price3',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -172,6 +459,16 @@ const columns = computed(() => [
field: 'minPrice', field: 'minPrice',
name: 'minPrice', name: 'minPrice',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -179,6 +476,16 @@ const columns = computed(() => [
field: 'ektFk', field: 'ektFk',
name: 'ektFk', name: 'ektFk',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -186,18 +493,51 @@ const columns = computed(() => [
field: 'weight', field: 'weight',
name: 'weight', name: 'weight',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.packagingFk'), label: t('entry.latestBuys.packagingFk'),
field: 'packagingFk', field: 'packagingFk',
name: 'packagingFk', name: 'packagingFk',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getInputEvents,
attrs: {
options: packagingsOptions.value,
'option-value': 'id',
'option-label': 'id',
dense: true,
},
},
}, },
{ {
label: t('entry.latestBuys.packingOut'), label: t('entry.latestBuys.packingOut'),
field: 'packingOut', field: 'packingOut',
name: 'packingOut', name: 'packingOut',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
{ {
@ -205,6 +545,16 @@ const columns = computed(() => [
field: 'landing', field: 'landing',
name: 'landing', name: 'landing',
align: 'left', align: 'left',
sortable: true,
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toDate(val), format: (val) => toDate(val),
}, },
]); ]);
@ -234,20 +584,58 @@ const redirectToEntryBuys = (entryFk) => {
router.push({ name: 'EntryBuys', params: { id: entryFk } }); router.push({ name: 'EntryBuys', params: { id: entryFk } });
}; };
const applyColumnFilter = async (col) => {
try {
if (!col.columnFilter.filterValue) {
delete params[col.field];
} else {
params[col.field] = col.columnFilter.filterValue;
}
await arrayData.applyFilter({ params });
} catch (err) {
console.error('Error applying column filter', err);
}
};
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
const filteredColumns = columns.value.filter((col) => col.name !== 'picture'); const filteredColumns = columns.value.filter((col) => col.name !== 'picture');
allColumnNames.value = filteredColumns.map((col) => col.name); allColumnNames.value = filteredColumns.map((col) => col.name);
await arrayData.fetch({ append: false });
}); });
</script> </script>
<template> <template>
<FetchData <FetchData
ref="rowsFetchDataRef" url="ItemTypes"
url="Buys/latestBuysFilter" :filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
:filter="{ order: 'itemFk DESC', limit: 20 }"
@on-fetch="(data) => (rows = data)"
auto-load auto-load
@on-fetch="(data) => (itemTypesOptions = data)"
/>
<FetchData
url="Origins"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (originsOptions = data)"
/>
<FetchData
url="ItemFamilies"
:filter="{ fields: ['code'], order: 'code ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (itemFamiliesOptions = data)"
/>
<FetchData
url="Packagings"
:filter="{ fields: ['id'], order: 'id ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (packagingsOptions = data)"
/>
<FetchData
url="Intrastats"
:filter="{ fields: ['description'], order: 'description ASC', limit: 30 }"
auto-load
@on-fetch="(data) => (intrastatOptions = data)"
/> />
<QToolbar class="bg-vn-dark justify-end"> <QToolbar class="bg-vn-dark justify-end">
<div id="st-data"> <div id="st-data">
@ -265,15 +653,34 @@ onMounted(async () => {
<QTable <QTable
:rows="rows" :rows="rows"
:columns="columns" :columns="columns"
hide-bottom
selection="multiple" selection="multiple"
row-key="id" row-key="id"
:pagination="{ rowsPerPage: 0 }" :pagination="{ rowsPerPage: 0 }"
class="full-width q-mt-md" class="full-width q-mt-md"
:visible-columns="visibleColumns" :visible-columns="visibleColumns"
v-model:selected="rowsSelected" v-model:selected="rowsSelected"
:no-data-label="t('globals.noResults')"
@row-click="(_, row) => redirectToEntryBuys(row.entryFk)" @row-click="(_, row) => redirectToEntryBuys(row.entryFk)"
> >
<template #top-row="{ cols }">
<QTr>
<QTd />
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<component
:is="col.columnFilter.component"
v-if="col.name !== 'picture'"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-picture="{ row }"> <template #body-cell-picture="{ row }">
<QTd> <QTd>
<QImg <QImg
@ -288,7 +695,7 @@ onMounted(async () => {
</template> </template>
<template #body-cell-itemFk="{ row }"> <template #body-cell-itemFk="{ row }">
<QTd @click.stop> <QTd @click.stop>
<QBtn flat color="blue"> <QBtn flat color="primary">
{{ row.itemFk }} {{ row.itemFk }}
</QBtn> </QBtn>
</QTd> </QTd>
@ -300,7 +707,7 @@ onMounted(async () => {
</template> </template>
<template #body-cell-entryFk="{ row }"> <template #body-cell-entryFk="{ row }">
<QTd @click.stop> <QTd @click.stop>
<QBtn flat color="blue"> <QBtn flat color="primary">
<EntryDescriptorProxy :id="row.entryFk" /> <EntryDescriptorProxy :id="row.entryFk" />
{{ row.entryFk }} {{ row.entryFk }}
</QBtn> </QBtn>