quasar-factory-lib 0.0.49 → 0.0.51

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "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"
@@ -175,18 +174,23 @@ export default defineComponent({
     showSkeleton: {
       type: Boolean
     },
+    getCellClass: {
+      type: Function,
+      default: function () {}
+    },
+    // Needs to be used with additionalFilterConditions and additionalSortConditions
     filterComputedOptions: {
       type: Object,
       default: {}
     },
-    getCellClass: {
+    additionalFilterConditions: {
+      type: Function,
+      default: function () {}
+    },
+    additionalSortConditions: {
       type: Function,
       default: function () {}
     }
-    // filteredRows: {
-    //   type: Array,
-    //   required: true
-    // }
   },
   emits: [
     'onSelectVisibleColumns',
@@ -212,8 +216,8 @@ export default defineComponent({
       loading: false,
       forceRender: false,
       totalPage: 0,
-      pageSize: 5,
-      filteredRows: [] as object | []
+      pageSize: 20,
+      filteredRows: [] as object [] | []
     }
   },
   computed: {
@@ -242,7 +246,6 @@ export default defineComponent({
     pageLength (): number {
       return (this.totalPage + 1) * this.pageSize
     }
-
   },
   watch: {
     rows (val) {
@@ -251,7 +254,6 @@ export default defineComponent({
     visibleColumns (val: string [] | []) {
       this.visibleColumnsData = val
     }
-    
   },
   mounted () {
   },
@@ -307,18 +309,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.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 +336,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 +372,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.rows, filteredRows_)
+      }
+      this.filteredRows = filteredRows_
+      return  filteredRows_.slice(0, this.pageLength)
     }
   }
 })

package/src/components/Table/components/TableSlotGrid.vue

@@ -28,17 +28,17 @@
           :key="col.name"
         >
           <q-item-section>
-            <q-item-label class="itemsFontSize ellipsis text-light-gray">
+            <q-item-label class="itemsFontSize ellipsis text-color-lightGray">
               {{
                 col.label
-              }}
+              }}xxxxx
             </q-item-label>
           </q-item-section>
 
           <q-item-section side>
             <q-item-label
               v-if="getColumnValue(col)"
-              class="itemsFontSize text-almost-black"
+              class="itemsFontSize text-color-almostBlack"
               :class="getCellClass(tablePropsData.row, col)"
             >
               <q-icon

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

@@ -50,6 +50,9 @@
   font-weight: bold;
   color: var(--black);
 }
+.my-table  .itemsFontSize{
+  font-size: 14px;
+}
 @media only screen and (max-width: 1100px) {
   .my-table .q-table__grid-content {
     overflow: auto;

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

@@ -1,14 +1,15 @@
 const utils = {
   setTableHeight ():string {
-    const footer = document.getElementsByClassName('q-footer')[0]
-    let footerHeight = ''
-    if (footer) {
-      const computedHeight = window.getComputedStyle(footer).height
+    const qPageStickBottom = document.getElementsByClassName('q-page-sticky')[0]
+    let footerHeightHeight = ''
+    if (qPageStickBottom) {
+      const computedHeight = window.getComputedStyle(qPageStickBottom).height
 
       if (computedHeight !== 'auto') {
-        footerHeight = computedHeight.replace('px', '')
+        footerHeightHeight = computedHeight.replace('px', '')
       }
     }
+  
     const header = document.getElementsByClassName('q-header')[0]
     let headerHeight = ''
     if (header) {
@@ -18,7 +19,7 @@ const utils = {
         headerHeight = computedHeight.replace('px', '')
       }
     }
-    const n = Number(footerHeight) + Number(headerHeight)
+    const n = Number(footerHeightHeight) + Number(headerHeight)
     return `height:${window.innerHeight - n}px`
   }
 }

package/src/css/app.css

@@ -31,10 +31,10 @@
 .bg-light-peach {
   background-color: var(--light-peach);
 }
-.text-color-light-gray {
+.text-color-lightGray {
   color: var(--light-gray);
 }
-.text-color-almost-black {
+.text-color-almostBlack {
   color: var(--almost-black);
 }
 .q-toolbar-unset-height .q-toolbar {

package/src/layouts/PdaLayout.vue

@@ -17,14 +17,14 @@
           </TaskNavBar>
         </div>
       </q-header>
-      <q-page-container class=" full-width column justify-center">
+      <q-page-container>
         <q-page>
         <Table
           ref="table"
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :small-device="false"
+          :small-device="smallDevice"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="false"
@@ -35,6 +35,9 @@
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
         />
+          <q-page-sticky position="bottom" v-if="smallDevice">
+            <q-btn color="accent" icon="arrow_forward" stretch />
+          </q-page-sticky>
         </q-page>
       </q-page-container>
   </q-layout>
@@ -56,6 +59,7 @@ export default {
   },
   data () {
     return {
+      smallDevice: true,
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
@@ -312,8 +316,8 @@ export default {
     this.store.cleanTableFilter()
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
-    this.rows = this.rowsData
     this.visibleColumns = this.store.visiblecolumns
+    this.rows = this.rowsData
   },
   methods: {
     saveSelectedColumns (columns: string []): void {

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,6 @@
           :show-skeleton="false"
           :selection-type="'multiple'"
           :getCellClass="getCellClass"
-          :filtered-rows="filteredRows"
           @on-select-visible-columns="saveSelectedColumns"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
@@ -32,7 +33,7 @@
 import Table from '../components/Table/Table.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
-import FilterMethod from '../components/Table/utils/filterMethod'
+// import FilterMethod from '../components/Table/utils/filterMethod'
 // import TableSort from '../components/Table/utils/sort.js'
 import { tableStore } from '../store/table.js'
 export default {
@@ -151,7 +152,8 @@ export default {
         name: 'sodium',
         label: 'Sodium (mg)',
         align: 'left',
-        field: 'sodium'
+        field: 'sodium',
+        sortable: true
       },
       {
         name: 'calcium',
@@ -321,9 +323,7 @@ export default {
           iron: '6%'
         }
       ],
-      visibleColumns: [],
-      sortDateValues: ['dateCreation'],
-      filteredRows: []
+      visibleColumns: []
     }
   },
   mounted () {
@@ -361,9 +361,6 @@ export default {
       this.store.visiblecolumns = columns
       this.visibleColumns = columns
     },
-    filterMethod (rows: string | [], terms: { search: string }): object[] | [] {
-      return FilterMethod.filter(this, rows, terms)
-    },
     onUpdateBasicCheckboxValue (rows: object []) {
       console.log(rows, 'onUpdateBasicCheckboxValue')
     },
@@ -373,21 +370,46 @@ export default {
     setItemNotFound (rows: object []) {
       console.log(rows, 'onClickButton')
     },
-    // sortMethod (rows: object[], sortBy: string, descending: boolean): object[] | [] {
-    //   let allrowsSorted = []
-    //   if (this.store.filterValue !== '') {
-    //     allrowsSorted = TableSort.sortMethod(this.filteredRows, sortBy, descending, this.sortDateValues)
-    //   } else {
-    //     allrowsSorted = TableSort.sortMethod(this.rows, sortBy, descending, this.sortDateValues)
-    //   }
-    //    return allrowsSorted.slice(0, rows.length)
-    // },
     getCellClass (row, col) {
       if (col.name === 'dessert' && row.dessert === 'Frozen Yogurt') {
         return 'text-color-negative-bold'; 
       }
       return '';
+    },
+    additionalFilterConditions (rows_: object[] | [], filteredRowsParam_: object[] | []) {
+      console.log('additional filter conditions')
+      filteredRowsParam_ = []
+        if (this.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 (filteredRowsData: object[] | [], rows: object[] | []) {
+      console.log('conditions sort function')
+      if (this.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 (!this.store.prepared) {
+        return [...rows]
+      }
     }
   }
 }
 </script>
+<!-- :filterComputedOptions="{ preparedQuantity: store.prepared}"
+:additional-sort-conditions="additionalSortConditions"
+:additional-filter-conditions="additionalFilterConditions" -->