quasar-factory-lib 0.1.20 → 0.1.21

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -9,7 +9,7 @@
       :style="tableStyle"
       flat
       bordered
-      :rows="rowsData"
+      :rows="rowsDataComputed"
       :columns="columns"
       :filter-method="customFilter"
       :filter="filterComputed"
@@ -25,9 +25,9 @@
       :selected-rows-label="getSelectedString"
       :loading="loading"
       virtual-scroll
-      @virtual-scroll="onVirtualScroll"
       :virtual-scroll-item-size="48"
-      :virtual-scroll-slice-ratio-before="0"
+      :virtual-scroll-sticky-size-start="48"
+      @virtual-scroll="onVirtualScroll"
       @update:selected="(details) => {
         $emit('onUpdateSelected', details)
       }"
@@ -274,7 +274,8 @@ export default defineComponent({
       draggableInstance: null,
       disabled: false,
       enableDragAndDrop: false,
-      dragAndDropDelay: 0
+      dragAndDropDelay: 0,
+      nextPage: 2,
     }
   },
   computed: {
@@ -302,7 +303,13 @@ export default defineComponent({
     },
     pageLength (): number {
       return (this.totalPage + 1) * this.pageSize
-    }
+    },
+    lastPage () {
+      return Math.ceil(this.rowsData.length / this.pageSize)
+     },
+     rowsDataComputed () {
+      return this.rowsData.slice(0, this.pageSize * (this.nextPage - 1))
+     } 
   },
   watch: {
     rows (val) {
@@ -325,16 +332,6 @@ export default defineComponent({
         this.dragAndDropDelay = 0
       }
     },
-    /* showSkeleton (val: boolean): void {
-      if (!val) {
-        this.handleInfiniteScrollTableCompositionAPi()
-      }
-    },
-    '$q.screen.width' (): void {
-      setTimeout(() => {
-        this.handleInfiniteScrollTableCompositionAPi()
-      }, 500)
-    } */
   },
   mounted () {
     this.getAdvancedFilterColumns()
@@ -563,9 +560,21 @@ export default defineComponent({
         elementToScroll.addEventListener('scroll', fnAddScroll)
       })
     },
-    onVirtualScroll (args) {
-      console.log('args', args)
-    },
+    onVirtualScroll ({to, ref}) {
+      const lastIndex = this.rowsDataComputed.length - 1
+      console.log(to, lastIndex)
+      if (!this.loading && this.nextPage < this.lastPage && to === lastIndex) {
+        this.loading = true
+
+        setTimeout(async () => {
+          this.nextPage++
+         await this.$nextTick(() => {
+            ref.refresh()
+            this.loading = false
+          })
+        }, 500)
+      }
+    }
   }
 })
 </script>

package/src/components/Table/css/table.css

@@ -61,6 +61,10 @@
 .my-table  .itemsFontSize{
   font-size: 14px;
 }
+.my-table tbody {
+  /* height of all previous header rows */
+  scroll-margin-top: 48px;
+}
 @media only screen and (max-width: 1100px) {
 
   .my-table .q-table__grid-content {

package/src/layouts/PdaLayout.vue

@@ -245,16 +245,17 @@ export default {
   },
   mounted () {
     this.tableStyle = setTableHeight.setTableHeight()
-    this.showSkeleton = true
+
     this.store.cleanTableFilter()
     this.getRows()
     // this.getAlertLabelsWithError()
   },
   methods: {
     getRows () {
-      this.rows = this.generateRows()
+      this.showSkeleton = true
       setTimeout(()=> {
-     this.showSkeleton = false
+      this.rows = this.generateRows()
+      this.showSkeleton = false
     }, 1000)
     },
     onUpdateBasicCheckboxValue (rows: object []) {

package/src/layouts/PdaLayoutVueCompositionApi.vue

@@ -34,7 +34,7 @@
       -->
       <q-page-container>
         <q-page>
-        <Table
+        <DraggableQTable
           ref="tableRef"
           :rows="rows"
           :columns="columns"
@@ -81,14 +81,14 @@
 <script setup lang="ts">
 import { useQuasar } from 'quasar'
 import TaskNavBar from '../components/TaskNavBar/TaskNavBar.vue'
-import Table from '../components/Table/Table.vue'
+import DraggableQTable from '../components/Table/DraggableQTable.vue'
 import NavBarSkeleton from '../components/NavBarSkeleton/NavBarSkeleton.vue'
 import TableRowsCounter from'../components/TableRowsCounter/TableRowsCounter.vue'
 // import AlertLabelsWithError from '../components/AlertLabelsWithError/AlertLabelsWithError.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 // import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import { tableStore } from '../store/table.js'
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch, nextTick } from 'vue'
 
   interface TableInterface {
     toggleSearchVisibility: (obj: object)=> void
@@ -579,9 +579,14 @@ import { ref, computed, onMounted, watch } from 'vue'
     showSkeleton.value = true
     rows.value = rowsData.value
       setTimeout(()=> {
-        // showSkeleton.value = false
+      showSkeleton.value = false
   
       }, 1000)
+      nextTick(() => {
+        if(tableRef.value) {
+          tableRef.value.enableDragAndDrop = true
+        }
+      })
     }
     function onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')