quasar-factory-lib 0.0.48 → 0.0.49

package/dist/store/table.d.ts

@@ -3,6 +3,7 @@ export const tableStore: import("pinia").StoreDefinition<"tableStore", {
     filterValue: import("@vueuse/shared").RemovableRef<string>;
     lastFilterValue: import("@vueuse/shared").RemovableRef<string>;
     visiblecolumns: import("@vueuse/shared").RemovableRef<never[]>;
+    prepared: import("@vueuse/shared").RemovableRef<boolean>;
 }, {}, {
     setFilterValue(val: any): void;
     cleanTableFilter(): void;

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "author": ""
 }

package/src/components/Table/Table.vue

@@ -3,6 +3,7 @@
   <!-- eslint-disable vue/no-v-model-argument -->
   <!-- eslint-disable vue/no-use-v-if-with-v-for -->
   <div>
+    {{filteredRows.length}}
     <q-table
       v-if="!showSkeleton"
       ref="myTable"
@@ -11,6 +12,7 @@
       :grid="smallDevice"
       :style="tableStyle"
       flat
+       :filter-method="customFilter"
       bordered
       :rows="rowsData"
       :columns="columns"
@@ -21,7 +23,6 @@
       table-class="text-grey-9"
       table-header-class="main-color"
       :filter="filterComputed"
-      :filter-method="filterMethod"
       :sort-method="customSortMethod"
       separator="horizontal"
       binary-state-sort
@@ -127,10 +128,10 @@ export default defineComponent({
       type: Array as () => string[],
       required: true
     },
-    filterMethod: {
-      type: Function,
-      default: function () {}
-    },
+    // filterMethod: {
+    //   type: Function,
+    //   default: function () {}
+    // },
     // sortMethod: {
     //   type: Function,
     //   default: function () {}
@@ -182,6 +183,10 @@ export default defineComponent({
       type: Function,
       default: function () {}
     }
+    // filteredRows: {
+    //   type: Array,
+    //   required: true
+    // }
   },
   emits: [
     'onSelectVisibleColumns',
@@ -207,7 +212,8 @@ export default defineComponent({
       loading: false,
       forceRender: false,
       totalPage: 0,
-      pageSize: 20
+      pageSize: 5,
+      filteredRows: [] as object | []
     }
   },
   computed: {
@@ -236,6 +242,7 @@ export default defineComponent({
     pageLength (): number {
       return (this.totalPage + 1) * this.pageSize
     }
+
   },
   watch: {
     rows (val) {
@@ -244,6 +251,7 @@ export default defineComponent({
     visibleColumns (val: string [] | []) {
       this.visibleColumnsData = val
     }
+    
   },
   mounted () {
   },
@@ -304,7 +312,12 @@ export default defineComponent({
       sortBy: string, 
       descending: boolean
     ) {
-      const data = [...rows];
+      let data = []
+      if (this.store.filterValue === '') {
+       data = [...this.rows];
+      } else {
+        data = [...this.filteredRows];
+      }
 
       if (sortBy) {
         data.sort((a, b) => {
@@ -352,9 +365,26 @@ export default defineComponent({
           }
         });
       }
-      return data;
-    }
+      return data.slice(0, this.pageLength);
+    },
+    customFilter(rows: string | [], terms: { search: string }) {
+      console.log('terms', terms)
+      if (this.store.filterValue === '') return this.rows.slice(0, this.pageLength); 
 
+        const filteredRows = this.rows.filter((row) => {
+         const rowValues = Object.values(row).join(" ").toLowerCase();
+          
+          if (terms.search && terms.search.trim() !== '') {
+            if (rowValues.includes(terms.search.toLowerCase())) {
+              return true;
+            }
+          }
+          return false
+        });
+
+      this.filteredRows = filteredRows
+      return filteredRows.slice(0, this.pageLength); 
+    }
   }
 })
 </script>

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

@@ -2,7 +2,8 @@
 
 import infiniteScroll from './infiniteScroll'
 const filterMethod = {
-  filter (self: { filteredRows: object [] | [] }, rows: string | [], terms: { search: string }): object[] | [] {
+  filter (self: { filteredRows: object [] | [] }, rows: string | [], terms: { search: string }) {
+    console.log(rows)
     if (terms.search !== '') {
       const filteredRows = []
       const lowerSearch = terms.search ? terms.search.toLowerCase() : ''
@@ -14,6 +15,7 @@ const filterMethod = {
       self.filteredRows = filteredRows
       return infiniteScroll.paginationNewTable(self, filteredRows)
     } else {
+      self.filteredRows = rows
       return infiniteScroll.paginationNewTable(self, rows)
     }
   },

package/src/pages/TablePage.vue

@@ -2,7 +2,7 @@
   <q-page-container class=" full-width column justify-center">
     <q-page
       class="full-width column justify-center align-center items-center"
-      style="height: 70vh;"
+      style=""
     >
       <div
         class="full-width"
@@ -18,7 +18,7 @@
           :show-skeleton="false"
           :selection-type="'multiple'"
           :getCellClass="getCellClass"
-          :filter-method="filterMethod"
+          :filtered-rows="filteredRows"
           @on-select-visible-columns="saveSelectedColumns"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"

package/src/store/table.js

@@ -5,7 +5,8 @@ export const tableStore = defineStore('tableStore', {
     disableScannerButtons: useStorage('disableScannerButtons', false),
     filterValue: useStorage('filterValue', ''),
     lastFilterValue: useStorage('lastFilterValue', ''),
-    visiblecolumns: useStorage('visiblecolumns', [])
+    visiblecolumns: useStorage('visiblecolumns', []),
+    prepared: useStorage('prepared', false),
   }),
   getters: {
   },