InfiniteScroll

Circuits
2022-08-17 00:36:30 +02:00
parent c93361dfa2
commit 8a41aff739
13 changed files with 147 additions and 74 deletions
--- a/src/components/CGridTableRec/CGridTableRec.ts
+++ b/src/components/CGridTableRec/CGridTableRec.ts
@@ -248,6 +248,7 @@ export default defineComponent({
    const myrecdialog = ref(null)

    const startsearch = ref(false)
+    const clickbuttsearch = ref(false)

    const $router = useRouter()

@@ -283,7 +284,7 @@ export default defineComponent({
    const colclicksel = ref(null)

    const selected: any = ref([])
-    const showfilteradv = ref(false)  // filtri avanzati
+    const showfilter = ref(false)  // filtri avanzati

    const filter = ref(0)
    const filtergrp = ref(costanti.MY_GROUPS)
@@ -312,8 +313,8 @@ export default defineComponent({
      }
    })

-    watch(() => showfilteradv.value, (newval: any, from: any) => {
-      tools.setCookie('s_adv', newval)
+    watch(() => showfilter.value, (newval: any, from: any) => {
+      tools.setCookie('s_adv', newval ? '1' : '0')
    })

    watch(() => props.filtercustom, (to: any, from: any) => {
@@ -849,10 +850,10 @@ export default defineComponent({
      // calculate starting row of data
      const startRow = numRecLoaded.value
      const endRow = startRow + fetchCount
-      console.log('startRow', startRow, 'endRow', endRow, 'fetchCount', fetchCount)
+      console.log('startRow', startRow, 'endRow', endRow, 'rowsNumber', pagination.value.rowsNumber)


-      if (startRow < pagination.value.rowsNumber) {
+      if ((startRow < pagination.value.rowsNumber) || clickbuttsearch.value) {

        // fetch data from "server"
        return fetchFromServer(startRow, endRow, myfilternow, myfilterandnow, sortBy, descending).then((ris: any) => {
@@ -890,7 +891,7 @@ export default defineComponent({
          }

          console.log('   ...DONE ')
-          done()
+          done(pagination.value.rowsNumber === 0 ? true : false)
        })
      } else {
        startsearch.value = false
@@ -930,6 +931,7 @@ export default defineComponent({
    function refresh() {
      console.log('refresh', 'startsearch', startsearch.value)

+      clickbuttsearch.value = true
      // console.log('refresh')
      if (startsearch.value)
        return false
@@ -963,6 +965,7 @@ export default defineComponent({
        refresh_table()
      }

+      clickbuttsearch.value = false
    }

    watch(() => mycodeid.value, (newval, oldval) => {
@@ -1245,7 +1248,7 @@ export default defineComponent({
      myvertical.value = props.vertical
      // myvertical.value = tools.getCookie('myv_' + props.prop_mytable, props.vertical)

-      showfilteradv.value = tools.getCookie('s_adv', false)
+      showfilter.value = tools.getCookie('s_adv', '0') !== '0'
    }

    function mounted() {
@@ -1868,11 +1871,15 @@ export default defineComponent({
    function onLoadScroll (index: number, done: any) {
      if (index > 0) {
        console.log('onLoadScroll', index, 'RECLOAD', numRecLoaded.value, 'ROWS: ', pagination.value.rowsNumber)
-        if (numRecLoaded.value >= pagination.value.rowsNumber) {
-          done(true)
-        } else {
+        if (numRecLoaded.value < pagination.value.rowsNumber || (pagination.value.rowsNumber <= 0 && clickbuttsearch.value)) {
+          if (pagination.value.rowsNumber === 0) {
+            pagination.value.page = 0
+          }
+
          pagination.value.page = pagination.value.page + 1
          refresh_infscroll(done)
+        } else {
+          done(true)
        }
      }
    }
@@ -1956,7 +1963,7 @@ export default defineComponent({
      getValueExtra,
      shared_consts,
      getLabelFooterByRow,
-      showfilteradv,
+      showfilter,
      cmdExt,
      visupagedialog,
      myrecdialog,
--- a/src/components/CGridTableRec/CGridTableRec.vue
+++ b/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"
--- a/src/components/CMyFriends/CMyFriends.ts
+++ b/src/components/CMyFriends/CMyFriends.ts
@@ -56,6 +56,7 @@ export default defineComponent({
    const { t } = useI18n()

    const username = ref('')
+    const spinner_visible = ref(false)
    const listTrusted = ref(<IUserFields[]>[])

    const filtroutente = ref(<any[]>[])
@@ -154,12 +155,14 @@ export default defineComponent({
    function loadFriends() {
      // Carica il profilo di quest'utente
      if (username.value) {
+        spinner_visible.value = true
        userStore.loadFriends(username.value).then((ris) => {
          // console.log('ris', ris)
          if (ris) {
            listTrusted.value = ris.listTrusted ? ris.listTrusted : []
            filtroutente.value = [{ userId: userStore.my._id }]
          }
+          spinner_visible.value = false
        })

      }
@@ -237,6 +240,7 @@ export default defineComponent({
      setCmd,
      updateValue,
      myoptions,
+      spinner_visible,
    }
  }
 })
--- a/src/components/CMyFriends/CMyFriends.vue
+++ b/src/components/CMyFriends/CMyFriends.vue
@@ -16,6 +16,9 @@
      />
    </div>
    <div v-if="finder" class="">
+      <q-inner-loading :showing="spinner_visible">
+        <q-spinner-tail size="2em" color="primary"/>
+      </q-inner-loading>

      <div v-if="modelValue === costanti.FIND_PEOPLE">
        <slot></slot>
--- a/src/components/MyFooter/MyFooter.scss
+++ b/src/components/MyFooter/MyFooter.scss
@@ -0,0 +1,3 @@
+.q-tab__label {
+  font-size: 0.7rem !important;
+}
--- a/src/components/MyFooter/MyFooter.vue
+++ b/src/components/MyFooter/MyFooter.vue
@@ -5,31 +5,43 @@
    bordered
  >
    <q-tabs
-      class="text-grey-10 text-h6"
+      dense
+      class="text-grey-10 mylabfooter"
      active-color="primary"
+      no-caps
      indicator-color="transparent"
    >
      <q-route-tab
        to="/"
+        class="mylabfooter"
+        :label="$t('tabdown.home')"
        icon="fas fa-home"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_GROUPS"
+        class="mylabfooter"
+        :label="$t('tabdown.groups')"
        to="/groups"
        icon="fas fa-users"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_USERS"
+        class="mylabfooter"
+        :label="$t('tabdown.friends')"
        to="/friends"
        icon="fas fa-user-friends"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_BOOKINGS"
+        class="mylabfooter"
+        :label="$t('tabdown.bookings')"
        to="/admin/eventlist"
        icon="fas fa-calendar-plus"
      />
      <q-route-tab
        v-if="static_data.functionality.ENABLE_VIEW_PROFILE"
+        class="mylabfooter"
+        :label="$t('tabdown.profile')"
        :to="`/my/`+getMyUsername()"
        icon="person"
      />
@@ -40,6 +52,6 @@
 <script lang="ts" src="./MyFooter.ts">
 </script>

-<style lang="scss" scoped>
+<style lang="scss">
@import './MyFooter.scss';
 </style>