InfiniteScroll

Circuits
This commit is contained in:
paoloar77
2022-08-17 00:36:30 +02:00
parent c93361dfa2
commit 8a41aff739
13 changed files with 147 additions and 74 deletions

View File

@@ -35,14 +35,16 @@
</q-inner-loading>
<div v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)">
<div v-if="searchList"
:class="$q.screen.lt.sm ? `` : `row` + ` text-blue `">
<div v-if="(prop_search || canEdit)" class="q-my-xs text-right">
<q-btn size="sm" dense icon="fas fa-filter" :label="!showfilter ? $t('grid.showfilters') : $t('grid.hidefilters')"
@click="showfilter = !showfilter"></q-btn>
</div>
<q-slide-transition>
<div v-show="showfilter">
<div v-show="searchList"
:class="$q.screen.lt.sm ? `` : `row` + ` text-blue `">
<span v-for="(item, index) in searchList" :key="index">
<!--<div class="text-center q-my-xs" v-if="(item.type === costanti.FieldType.separator)">
<q-btn size="sm" dense :icon="!showfilteradv ? 'fas fa-arrow-down' : 'fas fa-arrow-up'" label="Filtri Avanzati" @click="showfilteradv = !showfilteradv"></q-btn>
</div>-->
<CMySelect
:col="fieldsTable.getColByColumns(mycolumns, item.key)"
v-if="(item.type === costanti.FieldType.select) || (item.type === costanti.FieldType.select_by_server)"
@@ -150,7 +152,9 @@
</q-select>
</span>
</div>
</div>
</div>
</q-slide-transition>
<div v-if="(prop_search || canEdit)"
class="row justify-center vertical-middle">
@@ -162,8 +166,11 @@
v-on:keyup.enter="doSearch"
>
<template v-slot:after>
<q-btn v-if="mytable" dense label="" color="primary" @click="refresh" icon="search"></q-btn>
<template v-slot:prepend>
<q-icon name="search"/>
</template>
<template v-if="searchList" v-slot:after>
<q-btn dense label="" color="primary" @click="showfilter = !showfilter" icon="fas fa-filter"></q-btn>
</template>
</q-input>
</div>
@@ -191,48 +198,47 @@
<div v-if="pagination.rowsNumber === 1 && prop_search">{{ pagination.rowsNumber }} elemento trovato</div>
<div v-if="pagination.rowsNumber > 1 && prop_search">{{ pagination.rowsNumber }} elementi trovati</div>
</div>
numRecLoaded: {{numRecLoaded}}
<q-infinite-scroll
ref="myinfscroll"
v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
initial-index="0"
@load="onLoadScroll" :offset="350"
debounce="300"
>
INFINITE: <br />
<q-infinite-scroll
ref="myinfscroll"
v-if="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
:initial-index="0"
@load="onLoadScroll" :offset="350"
debounce="300"
<div v-for="(row, index) in serverData" :key="index" class="caption">
<div v-if="row && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
>
<div v-if="row.dateTimeStart && (tools.getstrVeryShortDate(row.dateTimeStart) !== actual)" class="actualdate">
<span style="display: none">{{ actual = tools.getstrVeryShortDate(row.dateTimeStart) }}</span>
<q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{ tools.getstrDateLong(row.dateTimeStart) }}</q-chip>
</div>
<div v-for="(row, index) in serverData" :key="index" class="caption">
<div v-if="row && shared_consts.TABLES_WITH_DATE.includes(tablesel)">
<div v-if="row.dateTimeStart && (tools.getstrVeryShortDate(row.dateTimeStart) !== actual)" class="actualdate">
<span style="display: none">{{ actual = tools.getstrVeryShortDate(row.dateTimeStart) }}</span>
<q-chip class="text-center shadow-5 glossy bg-orange" icon="fas fa-calendar-day">{{ tools.getstrDateLong(row.dateTimeStart) }}</q-chip>
</div>
<CMyRecGrpCard
v-if="tablesel === toolsext.TABMYGROUPS"
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecGrpCard>
<CMyRecCard
v-else
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecCard>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px"/>
</div>
</template>
</q-infinite-scroll>
<CMyRecGrpCard
v-if="tablesel === toolsext.TABMYGROUPS"
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecGrpCard>
<CMyRecCard
v-else
:table="tablesel"
:prop_myrec="row"
@cmdext="cmdExt"
>
</CMyRecCard>
</div>
<template v-slot:loading>
<div class="row justify-center q-my-md">
<q-spinner-dots color="primary" size="40px"/>
</div>
</template>
</q-infinite-scroll>
<q-table
v-else
:grid="shared_consts.VERTIC_SHOW_GRID.includes(myvertical)"
@@ -243,12 +249,8 @@
:rows="serverData"
:columns="mycolumns"
:filter="myfilter"
v-model:pagination="pagination2"
v-model:pagination="pagination"
virtual-scroll
:virtual-scroll-item-size="48"
:virtual-scroll-sticky-size-start="48"
@virtual-scroll="onScroll"
:rows-per-page-options="[0]"
:row-key="colkey"
:loading="loading"
@selection="selectionclick"