wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

add column filters

This commit is contained in:
William Buezas 2024-04-18 08:16:37 -03:00
parent 5addd0056d
commit 75dc81eba7
1 changed files with 99 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/pages/Item/ItemFixedPrice.vue
View File

@ -1,7 +1,6 @@
<script setup> <script setup>
import { onMounted, ref, computed, onUnmounted, watch } from 'vue'; import { onMounted, ref, reactive, computed, onUnmounted, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.vue'; import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue'; import FetchedTags from 'components/ui/FetchedTags.vue';
@ -51,11 +50,11 @@ const exprBuilder = (param, value) => {
} }
}; };
const filterParams = ref({}); const params = reactive({});
const arrayData = useArrayData('ItemFixedPrices', { const arrayData = useArrayData('ItemFixedPrices', {
url: 'FixedPrices/filter', url: 'FixedPrices/filter',
userParams: filterParams, userParams: params,
order: ['itemFk'], order: ['itemFk'],
exprBuilder: exprBuilder, exprBuilder: exprBuilder,
}); });
@ -66,17 +65,23 @@ watch(
(value) => (fixedPrices.value = value) (value) => (fixedPrices.value = value)
); );
// const params = reactive({}); const applyColumnFilter = async (col) => {
try {
const paramKey = col.columnFilter?.filterParamKey || col.field;
params[paramKey] = col.columnFilter.filterValue;
await arrayData.addFilter({ params });
} catch (err) {
console.error('Error applying column filter', err);
}
};
// const applyColumnFilter = async (col) => { const getColumnInputEvents = (col) => {
// try { return col.columnFilter.type === 'select'
// const paramKey = col.columnFilter?.filterParamKey || col.field; ? { 'update:modelValue': () => applyColumnFilter(col) }
// params[paramKey] = col.columnFilter.filterValue; : {
// await paginateRef.value.addFilter(null, params); 'keyup.enter': () => applyColumnFilter(col),
// } catch (err) { };
// console.error('Error applying column filter', err); };
// }
// };
const columns = computed(() => [ const columns = computed(() => [
{ {
@ -85,15 +90,15 @@ const columns = computed(() => [
field: 'itemFk', field: 'itemFk',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getColumnInputEvents, event: getColumnInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('globals.description'), label: t('globals.description'),
@ -101,15 +106,15 @@ const columns = computed(() => [
name: 'description', name: 'description',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getColumnInputEvents, event: getColumnInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('item.fixedPrice.groupingPrice'), label: t('item.fixedPrice.groupingPrice'),
@ -117,15 +122,15 @@ const columns = computed(() => [
name: 'groupingPrice', name: 'groupingPrice',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getColumnInputEvents, event: getColumnInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => toCurrency(val), format: (val) => toCurrency(val),
}, },
{ {
@ -134,15 +139,15 @@ const columns = computed(() => [
name: 'packingPrice', name: 'packingPrice',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getColumnInputEvents, event: getColumnInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
format: (val) => dashIfEmpty(val), format: (val) => dashIfEmpty(val),
}, },
@ -152,15 +157,15 @@ const columns = computed(() => [
name: 'minPrice', name: 'minPrice',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnInput, component: VnInput,
// type: 'text', type: 'text',
// filterValue: null, filterValue: null,
// event: getColumnInputEvents, event: getColumnInputEvents,
// attrs: { attrs: {
// dense: true, dense: true,
// }, },
// }, },
}, },
{ {
label: t('item.fixedPrice.started'), label: t('item.fixedPrice.started'),
@ -168,15 +173,7 @@ const columns = computed(() => [
name: 'started', name: 'started',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: null,
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
}, },
{ {
label: t('item.fixedPrice.ended'), label: t('item.fixedPrice.ended'),
@ -184,39 +181,27 @@ const columns = computed(() => [
name: 'ended', name: 'ended',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: null,
// component: VnSelectFilter,
// filterParamKey: 'typeFk',
// type: 'select',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// options: itemTypesOptions.value,
// 'option-value': 'id',
// 'option-label': 'name',
// dense: true,
// },
// },
}, },
{ {
label: t('item.fixedPrice.warehouse'), label: t('item.fixedPrice.warehouse'),
field: 'warehouse', field: 'warehouseFk',
name: 'warehouse', name: 'warehouse',
align: 'left', align: 'left',
sortable: true, sortable: true,
// columnFilter: { columnFilter: {
// component: VnSelectFilter, component: VnSelectFilter,
// type: 'select', type: 'select',
// filterValue: null, filterValue: null,
// event: getColumnInputEvents, event: getColumnInputEvents,
// attrs: { attrs: {
// options: itemCategoriesOptions.value, options: warehousesOptions.value,
// 'option-value': 'name', 'option-value': 'id',
// 'option-label': 'name', 'option-label': 'name',
// dense: true, dense: true,
// }, },
// }, },
}, },
{ name: 'deleteAction', align: 'center' }, { name: 'deleteAction', align: 'center' },
]); ]);
@ -292,14 +277,6 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
: { 'update:modelValue': () => upsertPrice(props, resetMinPrice) }; : { 'update:modelValue': () => upsertPrice(props, resetMinPrice) };
}; };
// const getColumnInputEvents = (col) => {
// return col.columnFilter.type === 'select'
// ? { 'update:modelValue': () => applyColumnFilter(col) }
// : {
// 'keyup.enter': () => applyColumnFilter(col),
// };
// };
const validations = (row, rowIndex, col) => { const validations = (row, rowIndex, col) => {
const isNew = !row.id; const isNew = !row.id;
// Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos // Si la row no tiene id significa que fue agregada con addRow y no se ha guardado en la base de datos
@ -399,7 +376,7 @@ const updateMinPrice = async (value, props) => {
onMounted(async () => { onMounted(async () => {
stateStore.rightDrawer = true; stateStore.rightDrawer = true;
filterParams.value = { warehouseFk: user.value.warehouseFk }; params.warehouseFk = user.value.warehouseFk;
const { data } = await arrayData.fetch({ append: false }); const { data } = await arrayData.fetch({ append: false });
onFixedPricesFetched(data); onFixedPricesFetched(data);
}); });
@ -408,14 +385,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</script> </script>
<template> <template>
<FetchData
ref="fixedPricesFetchRef"
url="FixedPrices/filter"
:filter="{ order: ['itemFk'] }"
:params="{ warehouseFk: user.warehouseFk }"
auto-load
@on-fetch="(data) => onFixedPricesFetched(data)"
/>
<FetchData <FetchData
url="Warehouses" url="Warehouses"
:filter="{ order: ['name'] }" :filter="{ order: ['name'] }"
@ -464,8 +433,9 @@ onUnmounted(() => (stateStore.rightDrawer = false));
class="full-width q-mt-md" class="full-width q-mt-md"
:no-data-label="t('globals.noResults')" :no-data-label="t('globals.noResults')"
> >
<!-- <template #top-row="{ cols }"> <template #top-row="{ cols }">
<QTr> <QTr>
<QTd />
<QTd <QTd
v-for="(col, index) in cols" v-for="(col, index) in cols"
:key="index" :key="index"
@ -481,7 +451,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
/> />
</QTd> </QTd>
</QTr> </QTr>
</template> --> </template>
<template #body-cell-itemId="props"> <template #body-cell-itemId="props">
<QTd> <QTd>