0
0
Fork 0

Merge pull request 'fix: refs #7353 load on scroll end' (!841) from 7353-fixLoadOnScroll into dev

Reviewed-on: verdnatura/salix-front#841
Reviewed-by: Alex Moreno <alexm@verdnatura.es>
This commit is contained in:
Jorge Penadés 2024-10-18 08:16:21 +00:00
commit 55f8b78eba
1 changed files with 10 additions and 6 deletions

View File

@ -134,6 +134,7 @@ const splittedColumns = ref({ columns: [] });
const columnsVisibilitySkipped = ref(); const columnsVisibilitySkipped = ref();
const createForm = ref(); const createForm = ref();
const tableFilterRef = ref([]); const tableFilterRef = ref([]);
const tableRef = ref();
const tableModes = [ const tableModes = [
{ {
@ -321,6 +322,13 @@ function handleOnDataSaved(_) {
if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value }); if (_.onDataSaved) _.onDataSaved({ CrudModelRef: CrudModelRef.value });
else $props.create.onDataSaved(_); else $props.create.onDataSaved(_);
} }
function handleScroll() {
const tMiddle = tableRef.value.$el.querySelector('.q-table__middle');
const { scrollHeight, scrollTop, clientHeight } = tMiddle;
const isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 40;
if (isAtBottom) CrudModelRef.value.vnPaginateRef.paginate();
}
</script> </script>
<template> <template>
<QDrawer <QDrawer
@ -405,6 +413,7 @@ function handleOnDataSaved(_) {
</template> </template>
<template #body="{ rows }"> <template #body="{ rows }">
<QTable <QTable
ref="tableRef"
v-bind="table" v-bind="table"
class="vnTable" class="vnTable"
:columns="splittedColumns.columns" :columns="splittedColumns.columns"
@ -416,12 +425,7 @@ function handleOnDataSaved(_) {
flat flat
:style="isTableMode && `max-height: ${tableHeight}`" :style="isTableMode && `max-height: ${tableHeight}`"
:virtual-scroll="isTableMode" :virtual-scroll="isTableMode"
@virtual-scroll=" @virtual-scroll="handleScroll"
(event) =>
event.index > rows.length - 2 &&
($props.crudModel?.paginate ?? true) &&
CrudModelRef.vnPaginateRef.paginate()
"
@row-click="(_, row) => rowClickFunction && rowClickFunction(row)" @row-click="(_, row) => rowClickFunction && rowClickFunction(row)"
@update:selected="emit('update:selected', $event)" @update:selected="emit('update:selected', $event)"
> >