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

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

@ -1,7 +1,6 @@
<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 { useRouter } from 'vue-router';
import FetchData from 'components/FetchData.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', {
url: 'FixedPrices/filter',
userParams: filterParams,
userParams: params,
order: ['itemFk'],
exprBuilder: exprBuilder,
});
@ -66,17 +65,23 @@ watch(
(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) => {
// try {
// const paramKey = col.columnFilter?.filterParamKey || col.field;
// params[paramKey] = col.columnFilter.filterValue;
// await paginateRef.value.addFilter(null, params);
// } catch (err) {
// console.error('Error applying column filter', err);
// }
// };
const getColumnInputEvents = (col) => {
return col.columnFilter.type === 'select'
? { 'update:modelValue': () => applyColumnFilter(col) }
: {
'keyup.enter': () => applyColumnFilter(col),
};
};
const columns = computed(() => [
{
@ -85,15 +90,15 @@ const columns = computed(() => [
field: 'itemFk',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getColumnInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('globals.description'),
@ -101,15 +106,15 @@ const columns = computed(() => [
name: 'description',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getColumnInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('item.fixedPrice.groupingPrice'),
@ -117,15 +122,15 @@ const columns = computed(() => [
name: 'groupingPrice',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getColumnInputEvents,
attrs: {
dense: true,
},
},
format: (val) => toCurrency(val),
},
{
@ -134,15 +139,15 @@ const columns = computed(() => [
name: 'packingPrice',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getColumnInputEvents,
attrs: {
dense: true,
},
},
format: (val) => dashIfEmpty(val),
},
@ -152,15 +157,15 @@ const columns = computed(() => [
name: 'minPrice',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
columnFilter: {
component: VnInput,
type: 'text',
filterValue: null,
event: getColumnInputEvents,
attrs: {
dense: true,
},
},
},
{
label: t('item.fixedPrice.started'),
@ -168,15 +173,7 @@ const columns = computed(() => [
name: 'started',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnInput,
// type: 'text',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// dense: true,
// },
// },
columnFilter: null,
},
{
label: t('item.fixedPrice.ended'),
@ -184,39 +181,27 @@ const columns = computed(() => [
name: 'ended',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnSelectFilter,
// filterParamKey: 'typeFk',
// type: 'select',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// options: itemTypesOptions.value,
// 'option-value': 'id',
// 'option-label': 'name',
// dense: true,
// },
// },
columnFilter: null,
},
{
label: t('item.fixedPrice.warehouse'),
field: 'warehouse',
field: 'warehouseFk',
name: 'warehouse',
align: 'left',
sortable: true,
// columnFilter: {
// component: VnSelectFilter,
// type: 'select',
// filterValue: null,
// event: getColumnInputEvents,
// attrs: {
// options: itemCategoriesOptions.value,
// 'option-value': 'name',
// 'option-label': 'name',
// dense: true,
// },
// },
columnFilter: {
component: VnSelectFilter,
type: 'select',
filterValue: null,
event: getColumnInputEvents,
attrs: {
options: warehousesOptions.value,
'option-value': 'id',
'option-label': 'name',
dense: true,
},
},
},
{ name: 'deleteAction', align: 'center' },
]);
@ -292,14 +277,6 @@ const getRowUpdateInputEvents = (props, resetMinPrice, inputType = 'text') => {
: { '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 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
@ -399,7 +376,7 @@ const updateMinPrice = async (value, props) => {
onMounted(async () => {
stateStore.rightDrawer = true;
filterParams.value = { warehouseFk: user.value.warehouseFk };
params.warehouseFk = user.value.warehouseFk;
const { data } = await arrayData.fetch({ append: false });
onFixedPricesFetched(data);
});
@ -408,14 +385,6 @@ onUnmounted(() => (stateStore.rightDrawer = false));
</script>
<template>
<FetchData
ref="fixedPricesFetchRef"
url="FixedPrices/filter"
:filter="{ order: ['itemFk'] }"
:params="{ warehouseFk: user.warehouseFk }"
auto-load
@on-fetch="(data) => onFixedPricesFetched(data)"
/>
<FetchData
url="Warehouses"
:filter="{ order: ['name'] }"
@ -464,24 +433,25 @@ onUnmounted(() => (stateStore.rightDrawer = false));
class="full-width q-mt-md"
:no-data-label="t('globals.noResults')"
>
<!-- <template #top-row="{ cols }">
<QTr>
<QTd
v-for="(col, index) in cols"
:key="index"
style="max-width: 100px"
>
<component
:is="col.columnFilter.component"
v-if="col.columnFilter"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template> -->
<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.columnFilter"
v-model="col.columnFilter.filterValue"
v-bind="col.columnFilter.attrs"
v-on="col.columnFilter.event(col)"
dense
/>
</QTd>
</QTr>
</template>
<template #body-cell-itemId="props">
<QTd>