add column filters
This commit is contained in:
parent
5addd0056d
commit
75dc81eba7
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue