fix: CustomerExtendedList paginate
gitea/salix-front/pipeline/pr-test This commit looks good Details

This commit is contained in:
Javier Segarra 2024-05-09 10:25:27 +02:00
parent dac00236bc
commit 437a75da4e
3 changed files with 90 additions and 72 deletions

View File

@ -15,7 +15,6 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnInput from 'src/components/common/VnInput.vue'; import VnInput from 'src/components/common/VnInput.vue';
import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue'; import CustomerDefaulterAddObservation from './CustomerDefaulterAddObservation.vue';
const stateStore = useStateStore(); const stateStore = useStateStore();
const refreshKey = ref(0);
const { t } = useI18n(); const { t } = useI18n();
const quasar = useQuasar(); const quasar = useQuasar();
@ -242,7 +241,6 @@ const onFetch = (data) => {
<VnPaginate <VnPaginate
@on-fetch="onFetch" @on-fetch="onFetch"
data-key="CustomerDefaulter" data-key="CustomerDefaulter"
:key="refreshKey"
:filter="filter" :filter="filter"
auto-load auto-load
url="Defaulters/filter" url="Defaulters/filter"

View File

@ -10,7 +10,7 @@ import CustomerExtendedListActions from './CustomerExtendedListActions.vue';
import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue'; import CustomerExtendedListFilter from './CustomerExtendedListFilter.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue'; import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue'; import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnPaginate from 'src/components/ui/VnPaginate.vue';
import { useArrayData } from 'composables/useArrayData'; import { useArrayData } from 'composables/useArrayData';
import { useStateStore } from 'stores/useStateStore'; import { useStateStore } from 'stores/useStateStore';
import { toDate } from 'src/filters'; import { toDate } from 'src/filters';
@ -37,8 +37,6 @@ onMounted(() => {
allColumnNames.value = filteredColumns.map((col) => col.name); allColumnNames.value = filteredColumns.map((col) => col.name);
}); });
const rows = computed(() => arrayData.value.store.data);
const selectedCustomerId = ref(0); const selectedCustomerId = ref(0);
const selectedSalesPersonId = ref(0); const selectedSalesPersonId = ref(0);
const allColumnNames = ref([]); const allColumnNames = ref([]);
@ -536,69 +534,97 @@ const selectSalesPersonId = (id) => (selectedSalesPersonId.value = id);
</VnSubToolbar> </VnSubToolbar>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<QTable <VnPaginate
:columns="columns" data-key="CustomerExtendedList"
:rows="rows" url="Clients/extendedListFilter"
class="full-width q-mt-md" auto-load
row-key="id"
:visible-columns="visibleColumns"
@row-click="(evt, row, id) => navigateToTravelId(row.id)"
> >
<template #body-cell="{ col, value }"> <template #body="{ rows }">
<QTd @click="stopEventPropagation($event, col)"> <div class="q-pa-md">
{{ value }} <QTable
</QTd> :columns="columns"
</template> :rows="rows"
<template #body-cell-customerStatus="props"> class="full-width q-mt-md"
<QTd @click="stopEventPropagation($event, props.col)"> row-key="id"
<component :visible-columns="visibleColumns"
:is="tableColumnComponents[props.col.name].component" @row-click="(evt, row, id) => navigateToTravelId(row.id)"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
> >
</component> <template #body-cell="{ col, value }">
</QTd> <QTd @click="stopEventPropagation($event, col)">
{{ value }}
</QTd>
</template>
<template #body-cell-customerStatus="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
@click="
tableColumnComponents[props.col.name].event(props)
"
>
</component>
</QTd>
</template>
<template #body-cell-id="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
@click="
tableColumnComponents[props.col.name].event(props)
"
>
<CustomerDescriptorProxy :id="props.row.id" />
{{ props.row.id }}
</component>
</QTd>
</template>
<template #body-cell-salesPersonFk="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
v-if="props.row.salesPerson"
class="col-content"
:is="tableColumnComponents[props.col.name].component"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
@click="
tableColumnComponents[props.col.name].event(props)
"
>
<WorkerDescriptorProxy
:id="props.row.salesPersonFk"
/>
{{ props.row.salesPerson }}
</component>
<span class="col-content" v-else>-</span>
</QTd>
</template>
<template #body-cell-actions="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="
tableColumnComponents[props.col.name].props(props)
"
@click="
tableColumnComponents[props.col.name].event(props)
"
/>
</QTd>
</template>
</QTable>
</div>
</template> </template>
<template #body-cell-id="props"> </VnPaginate>
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
>
<CustomerDescriptorProxy :id="props.row.id" />
{{ props.row.id }}
</component>
</QTd>
</template>
<template #body-cell-salesPersonFk="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
v-if="props.row.salesPerson"
class="col-content"
:is="tableColumnComponents[props.col.name].component"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
>
<WorkerDescriptorProxy :id="props.row.salesPersonFk" />
{{ props.row.salesPerson }}
</component>
<span class="col-content" v-else>-</span>
</QTd>
</template>
<template #body-cell-actions="props">
<QTd @click="stopEventPropagation($event, props.col)">
<component
:is="tableColumnComponents[props.col.name].component"
class="col-content"
v-bind="tableColumnComponents[props.col.name].props(props)"
@click="tableColumnComponents[props.col.name].event(props)"
/>
</QTd>
</template>
</QTable>
</QPage> </QPage>
</template> </template>

View File

@ -74,7 +74,6 @@ const columns = computed(() => [
name: 'email', name: 'email',
}, },
]); ]);
const refreshKey = ref(0);
const selectCustomerId = (id) => { const selectCustomerId = (id) => {
selectedCustomerId.value = id; selectedCustomerId.value = id;
@ -115,12 +114,7 @@ const selectCustomerId = (id) => {
</template> </template>
</VnSubToolbar> </VnSubToolbar>
<QPage class="column items-center q-pa-md"> <QPage class="column items-center q-pa-md">
<VnPaginate <VnPaginate data-key="CustomerNotifications" url="Clients" auto-load>
:key="refreshKey"
data-key="CustomerNotifications"
url="Clients"
auto-load
>
<template #body="{ rows }"> <template #body="{ rows }">
<div class="q-pa-md"> <div class="q-pa-md">
<QTable <QTable