quasar-factory-lib 0.0.98 → 0.1.0

package/package.json

@@ -98,6 +98,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.98",
+  "version": "0.1.0",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -307,6 +307,16 @@ export default defineComponent({
       } else {
         this.dragAndDropDelay = 0
       }
+    },
+    showSkeleton (val: boolean): void {
+      if (!val) {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }
+    },
+    '$q.screen.width' (): void {
+      setTimeout(() => {
+        this.handleInfiniteScrollTableCompositionAPi()
+      }, 500)
     }
   },
   mounted () {
@@ -515,6 +525,25 @@ export default defineComponent({
             acc[column.name] = ''
           return acc
         }, {} as { [key: string]: string })
+    },
+    handleInfiniteScrollTableCompositionAPi () {
+      this.$nextTick(() => {
+        const elemClass = this.smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
+        const tableType = this.smallDevice ? 'Grid' : 'Table'
+        const qtableScrollElem = document.getElementsByClassName(elemClass) as HTMLCollectionOf<HTMLElement>
+        const elementToScroll =
+          qtableScrollElem.length > 0 ? qtableScrollElem[0] : window
+        const fnAddScroll = (event: Event) => {
+          const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLElement
+          if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+            console.log(`[${tableType}] You are at the bottom!`, this.totalPage)
+            this.totalPage++
+          }
+        }
+        window.removeEventListener('scroll', fnAddScroll)
+        elementToScroll.removeEventListener('scroll', fnAddScroll)
+        elementToScroll.addEventListener('scroll', fnAddScroll)
+      })
     }
   }
 })

package/src/components/Table/utils/filterMethod.ts

@@ -1,6 +1,3 @@
-/* eslint-disable  */
-
-import infiniteScroll from './infiniteScroll'
 const filterMethod = {
   filter (self: { filteredRows: object [] | [] }, rows: string | [], terms: { search: string }) {
     console.log(rows)
@@ -13,13 +10,15 @@ const filterMethod = {
         }
       }
       self.filteredRows = filteredRows
-      return infiniteScroll.paginationNewTable(self, filteredRows)
+      return this.paginationNewTable(self, filteredRows)
     } else {
       self.filteredRows = rows
-      return infiniteScroll.paginationNewTable(self, rows)
+      return this.paginationNewTable(self, rows)
     }
   },
-
+  paginationNewTable (self: { pageLength: number;  }, rows: object []): object [] {
+    return rows.slice(0, self.$refs.table.pageLength)
+  },
   containsSearchTermInRow (row: object, lowerSearch: string): boolean {
     if (lowerSearch !== '') {
       const values = Object.values(row)

package/src/components/Table/utils/infiniteScroll.ts

@@ -20,9 +20,29 @@ const infiniteScroll = {
       elementToScroll.addEventListener('scroll', fnAddScroll)
     })
   },
-  paginationNewTable (self: { pageLength: number;  }, rows: object []): object [] {
-    return rows.slice(0, self.$refs.table.pageLength)
+  handleInfiniteScrollNewTableCompositionAPi (nextTick, smallDevice, totalPage) {
+    nextTick(() => {
+      const elemClass = smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
+      const tableType = smallDevice ? 'Grid' : 'Table'
+      const qtableScrollElem = document.getElementsByClassName(elemClass) as HTMLCollectionOf<HTMLElement>
+      const elementToScroll =
+        qtableScrollElem.length > 0 ? qtableScrollElem[0] : window
+      const fnAddScroll = (event: Event) => {
+        console.log(totalPage, 'totalPage')
+        const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLElement
+        if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+          console.log(`[${tableType}] You are at the bottom!`, totalPage)
+          totalPage++
+        }
+      }
+      window.removeEventListener('scroll', fnAddScroll)
+      elementToScroll.removeEventListener('scroll', fnAddScroll)
+      elementToScroll.addEventListener('scroll', fnAddScroll)
+    })
   },
+  /* paginationNewTable (self: { pageLength: number;  }, rows: object []): object [] {
+    return rows.slice(0, self.$refs.table.pageLength)
+  }, */
   handleInfiniteScrollModal (self: { $nextTick: (arg0: () => void) => void; totalPageModal: number; smallDevice: boolean }, tableID: string): void {
     console.log('handleInfiniteScrollModal')
     self.$nextTick(() => {

package/src/layouts/PdaLayout.vue

@@ -84,7 +84,7 @@ 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 infiniteScroll from '../components/Table/utils/infiniteScroll'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -101,6 +101,14 @@ export default {
       store: tableStore(),
       tableStyle: '',
       columns: [
+      {
+        name: 'drag-and-drop',
+        required: true,
+        label: 'Drag and drop',
+        align: 'left',
+        sortable: true,
+        type: 'string',
+      },
       {
         name: 'name',
         required: true,
@@ -547,14 +555,14 @@ export default {
     '$q.screen.width' (): void {
       setTimeout(() => {
         this.tableStyle = setTableHeight.setTableHeight()
-        infiniteScroll.handleInfiniteScrollNewTable(this)
+        // infiniteScroll.handleInfiniteScrollNewTable(this)
       }, 500)
     },
     showSkeleton (val: boolean) {
       if (!val) {
         setTimeout(() => {
           this.tableStyle = setTableHeight.setTableHeight()
-          infiniteScroll.handleInfiniteScrollNewTable(this)
+          // infiniteScroll.handleInfiniteScrollNewTable(this)
         }, 500)
       }
     }