InfiniteScroll

Circuits

src/components/CGridTableRec/CGridTableRec.vue

@@ -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"