Infinite scroll

src/pages/Customer/CustomerList.vue

@@ -3,14 +3,17 @@ import { ref, onMounted } from 'vue';
 import axios from 'axios';
 // import { useRouter } from 'vue-router';
 // const router = useRouter();
+
+const fabPos = ref([18, 18]);
+const draggingFab = ref(false);
+
 const gridView = ref(true);
 const loading = ref(false);
 const pagination = ref({
     sortBy: 'id ASC',
     descending: false,
     page: 1,
-    rowsPerPage: 10,
+    rowsPerPage: 5,
-    rowsNumber: 10,
 });
 
 const columns = [
@@ -75,7 +78,11 @@ async function onRequest(props) {
         params: { filter },
     });
 
-    customers.value = data;
+    for (const row of data) {
+        customers.value.push(row);
+    }
+
+    //customers.value = newData;
 
     pagination.value.rowsNumber = await totalRows();
 
@@ -95,6 +102,23 @@ onMounted(() => {
     onRequest({ pagination: pagination.value });
 });
 
+async function onLoad(index, done) {
+    console.log('scroll:', index);
+
+    pagination.value.page = pagination.value.page + 1;
+
+    await onRequest({ pagination: pagination.value });
+
+    done();
+    //done(true);
+}
+
+function moveFab(ev) {
+    draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
+
+    fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y];
+}
+
 // function navigate(id) {
 //     router.push({ path: `/customer/${id}` });
 // }
@@ -103,8 +127,8 @@ onMounted(() => {
 <template>
     <q-page class="q-pa-md">
         <div>
+            <q-infinite-scroll @load="onLoad" :offset="100" style="height: 1000px">
                 <q-table
-                title="Customers"
                     :columns="columns"
                     :rows="customers"
                     row-key="id"
@@ -112,8 +136,9 @@ onMounted(() => {
                     :loading="loading"
                     @request="onRequest"
                     binary-state-sort
-                :grid="gridView"
+                    :grid="true"
                     :card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']"
+                    :hide-pagination="true"
                 >
                     <template #loading>
                         <q-inner-loading showing color="orange" />
@@ -131,7 +156,7 @@ onMounted(() => {
                             <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
                                 <q-item-section class="q-pa-md">
                                     <div class="text-h6">{{ props.row.name }}</div>
-                                <q-item-label caption>@{{ props.row.username }}</q-item-label>
+                                    <q-item-label caption>#{{ props.row.id }}</q-item-label>
                                     <div class="q-mt-md">
                                         <q-list>
                                             <q-item class="q-pa-none">
@@ -177,6 +202,8 @@ onMounted(() => {
                         </q-card>
                     </template>
                 </q-table>
+            </q-infinite-scroll>
+
             <!--  <q-card v-for="customer in customers" :key="customer.id" class="card">
 
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
@@ -246,6 +273,19 @@ onMounted(() => {
                 </q-slide-transition>
             </q-card> -->
         </div>
+
+        <q-page-sticky position="bottom-right" :offset="fabPos">
+            <q-fab
+                icon="add"
+                direction="up"
+                color="light-green-6"
+                :disable="draggingFab"
+                v-touch-pan.prevent.mouse="moveFab"
+            >
+                <q-fab-action @click="onClick" color="light-green-4" icon="person_add" :disable="draggingFab" />
+                <q-fab-action @click="onClick" color="light-green-4" icon="mail" :disable="draggingFab" />
+            </q-fab>
+        </q-page-sticky>
     </q-page>
 </template>