quasar-factory-lib 0.0.49 → 0.0.50

package/package.json

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

package/src/components/Table/Table.vue

@@ -3,7 +3,6 @@
   <!-- 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"
@@ -12,7 +11,7 @@
       :grid="smallDevice"
       :style="tableStyle"
       flat
-       :filter-method="customFilter"
+      :filter-method="customFilter"
       bordered
       :rows="rowsData"
       :columns="columns"
@@ -182,11 +181,17 @@ export default defineComponent({
     getCellClass: {
       type: Function,
       default: function () {}
+    },
+    // Needs to be used together
+    additionalFilterConditions: {
+      type: Function,
+      default: function () {}
+    },
+    additionalSortConditions: {
+      type: Function,
+      default: function () {}
     }
-    // filteredRows: {
-    //   type: Array,
-    //   required: true
-    // }
+    //
   },
   emits: [
     'onSelectVisibleColumns',
@@ -212,8 +217,8 @@ export default defineComponent({
       loading: false,
       forceRender: false,
       totalPage: 0,
-      pageSize: 5,
-      filteredRows: [] as object | []
+      pageSize: 20,
+      filteredRows: [] as object [] | []
     }
   },
   computed: {
@@ -307,18 +312,23 @@ export default defineComponent({
     toogleLoading () {
       this.loading = !this.loading
     },
-    customSortMethod(
-      rows, 
-      sortBy: string, 
-      descending: boolean
-    ) {
+    customSortMethod(rows: object[] | [], sortBy: string, descending: boolean) {
       let data = []
-      if (this.store.filterValue === '') {
-       data = [...this.rows];
+      if (this.store.filterValue !== '') {
+       data = [...this.filteredRows];
+      }
+      else {
+        data = [...this.rows];
+      }
+      if (this.additionalSortConditions && this.additionalSortConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
+        data = this.additionalSortConditions(this.store, this.filteredRows, rows);
       } else {
-        data = [...this.filteredRows];
+        console.log('else sort')
       }
-
+      this.getSortedData(sortBy, data, descending)
+      return data.slice(0, this.pageLength);
+    },
+    getSortedData (sortBy: string, data: object[] | [], descending: boolean) {
       if (sortBy) {
         data.sort((a, b) => {
           const x = descending ? b : a;
@@ -329,12 +339,12 @@ export default defineComponent({
 
           const parseDate = (dateString: string): Date => {
             const [day, month, year] = dateString.split('/');
-            return new Date(`${year}-${month}-${day}`);  // Converte para 'yyyy-mm-dd'
+            return new Date(`${year}-${month}-${day}`);
           };
 
           const parseTime = (timeString: string): number => {
             const [hours, minutes, seconds] = timeString.split(':').map(Number);
-            return (hours * 3600) + (minutes * 60) + seconds; // Converte para o total de segundos
+            return (hours * 3600) + (minutes * 60) + seconds;
           };
 
           if (typeof xValue === 'string' && typeof yValue === 'string') {
@@ -365,25 +375,37 @@ export default defineComponent({
           }
         });
       }
-      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;
-            }
+    containsSearchTermInRow (row: object, lowerSearch: string): boolean {
+      if (lowerSearch !== '') {
+        const values = Object.values(row)
+        const valuesLowerCase = values.map((x) => (x + '').toLowerCase())
+        for (let val = 0; val < valuesLowerCase.length; val++) {
+          if (valuesLowerCase[val].includes(lowerSearch)) {
+            return true
           }
-          return false
-        });
-
-      this.filteredRows = filteredRows
-      return filteredRows.slice(0, this.pageLength); 
+        }
+      }
+      return false
+    },
+    customFilter(rows: object[] | [], terms: { search: string, prepared: boolean }) {
+      let filteredRows_ = []
+      if (terms.search !== '') {
+        const lowerSearch = terms.search ? terms.search.toLowerCase() : ''
+        for (let i = 0; i < this.rows.length; i++) {
+          if (this.containsSearchTermInRow(this.rows[i], lowerSearch)) {
+            filteredRows_.push(this.rows[i])
+          }
+        }
+      } 
+      else {
+        filteredRows_ = rows
+      }
+      if (this.additionalFilterConditions && this.additionalFilterConditions.toString().replace(/\s+/g, '') !== 'function(){}') {
+        filteredRows_ = this.additionalFilterConditions(this.store, this.rows, filteredRows_)
+      }
+      this.filteredRows = filteredRows_
+      return  filteredRows_.slice(0, this.pageLength)
     }
   }
 })

package/src/pages/TablePage.vue

@@ -7,6 +7,8 @@
       <div
         class="full-width"
       >
+      {{ store.prepared }}
+      <q-btn @click="store.prepared = !store.prepared">Click</q-btn>
         <Table
           ref="table"
           :rows="rows"
@@ -18,7 +20,9 @@
           :show-skeleton="false"
           :selection-type="'multiple'"
           :getCellClass="getCellClass"
-          :filtered-rows="filteredRows"
+          :filterComputedOptions="{ preparedQuantity: store.prepared}"
+          :additionalSortConditions="additionalSortConditions"
+          :additional-filter-conditions="additionalFilterConditions"
           @on-select-visible-columns="saveSelectedColumns"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
@@ -151,7 +155,8 @@ export default {
         name: 'sodium',
         label: 'Sodium (mg)',
         align: 'left',
-        field: 'sodium'
+        field: 'sodium',
+        sortable: true
       },
       {
         name: 'calcium',
@@ -321,9 +326,7 @@ export default {
           iron: '6%'
         }
       ],
-      visibleColumns: [],
-      sortDateValues: ['dateCreation'],
-      filteredRows: []
+      visibleColumns: []
     }
   },
   mounted () {
@@ -387,6 +390,37 @@ export default {
         return 'text-color-negative-bold'; 
       }
       return '';
+    },
+    additionalFilterConditions (store_: { prepared: boolean }, rows_: object[] | [], filteredRowsParam_: object[] | []) {
+      console.log('additional filter conditions')
+      filteredRowsParam_ = []
+        if (store_.prepared) {
+        for (let i = 0; i < rows_.length; i++) {
+          if (rows_[i].sodium >= 300) {
+            filteredRowsParam_.push(rows_[i])
+          }
+        }
+        return filteredRowsParam_
+      } else {
+        return rows_
+      }
+    },
+    additionalSortConditions (store_, filteredRowsData, rows) {
+      console.log('conditions sort function')
+      if (store_.prepared) {
+
+      const filteredRows_ = []
+      for (let i = 0; i < rows.length; i++) {
+        if (rows[i].sodium >= 300) {
+         filteredRows_.push(rows[i])
+        }
+      }
+        filteredRowsData = filteredRows_
+        return  [...filteredRowsData]
+      } 
+      else if (!store_.prepared) {
+        return [...rows]
+      }
     }
   }
 }