quasar-factory-lib 0.0.47 → 0.0.49

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.47",
+  "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,8 +23,7 @@
       table-class="text-grey-9"
       table-header-class="main-color"
       :filter="filterComputed"
-      :filter-method="filterMethod"
-      :sort-method="sortMethod"
+      :sort-method="customSortMethod"
       separator="horizontal"
       binary-state-sort
       :selected-rows-label="getSelectedString"
@@ -61,6 +62,7 @@
           v-if="!showSkeleton"
           :table-props="props"
           :selection-type="selectionType"
+          :getCellClass="getCellClass"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
@@ -74,6 +76,7 @@
           :table-props="props"
           :selection-type="selectionType"
           :popup-edit-number-options="popupEditNumberOptions"
+          :getCellClass="getCellClass"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
@@ -125,14 +128,14 @@ export default defineComponent({
       type: Array as () => string[],
       required: true
     },
-    filterMethod: {
-      type: Function,
-      default: function () {}
-    },
-    sortMethod: {
-      type: Function,
-      default: function () {}
-    },
+    // filterMethod: {
+    //   type: Function,
+    //   default: function () {}
+    // },
+    // sortMethod: {
+    //   type: Function,
+    //   default: function () {}
+    // },
     selectionType: {
       type: String as () => 'none' | 'single' | 'multiple',
       default: 'none'
@@ -175,7 +178,15 @@ export default defineComponent({
     filterComputedOptions: {
       type: Object,
       default: {}
+    },
+    getCellClass: {
+      type: Function,
+      default: function () {}
     }
+    // filteredRows: {
+    //   type: Array,
+    //   required: true
+    // }
   },
   emits: [
     'onSelectVisibleColumns',
@@ -201,7 +212,8 @@ export default defineComponent({
       loading: false,
       forceRender: false,
       totalPage: 0,
-      pageSize: 20
+      pageSize: 5,
+      filteredRows: [] as object | []
     }
   },
   computed: {
@@ -230,6 +242,7 @@ export default defineComponent({
     pageLength (): number {
       return (this.totalPage + 1) * this.pageSize
     }
+
   },
   watch: {
     rows (val) {
@@ -238,6 +251,7 @@ export default defineComponent({
     visibleColumns (val: string [] | []) {
       this.visibleColumnsData = val
     }
+    
   },
   mounted () {
   },
@@ -292,6 +306,84 @@ export default defineComponent({
     },
     toogleLoading () {
       this.loading = !this.loading
+    },
+    customSortMethod(
+      rows, 
+      sortBy: string, 
+      descending: boolean
+    ) {
+      let data = []
+      if (this.store.filterValue === '') {
+       data = [...this.rows];
+      } else {
+        data = [...this.filteredRows];
+      }
+
+      if (sortBy) {
+        data.sort((a, b) => {
+          const x = descending ? b : a;
+          const y = descending ? a : b;
+
+          const xValue = x[sortBy];
+          const yValue = y[sortBy];
+
+          const parseDate = (dateString: string): Date => {
+            const [day, month, year] = dateString.split('/');
+            return new Date(`${year}-${month}-${day}`);  // Converte para 'yyyy-mm-dd'
+          };
+
+          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
+          };
+
+          if (typeof xValue === 'string' && typeof yValue === 'string') {
+            const xDate = parseDate(xValue);
+            const yDate = parseDate(yValue);
+            
+            if (!isNaN(xDate.getTime()) && !isNaN(yDate.getTime())) {
+              return xDate.getTime() - yDate.getTime();
+            }
+
+            const xTime = parseTime(xValue);
+            const yTime = parseTime(yValue);
+            
+            if (!isNaN(xTime) && !isNaN(yTime)) {
+              return xTime - yTime;
+            } else {
+              return xValue.localeCompare(yValue);
+            }
+          } 
+          else if (typeof xValue === 'number' && typeof yValue === 'number') {
+            return xValue - yValue;
+          } 
+          else if (typeof xValue === 'boolean' && typeof yValue === 'boolean') {
+            return xValue === yValue ? 0 : xValue ? 1 : -1;
+          } 
+          else {
+            return String(xValue) > String(yValue) ? 1 : String(xValue) < String(yValue) ? -1 : 0;
+          }
+        });
+      }
+      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); 
     }
   }
 })

package/src/components/Table/components/TableSlotBody.vue

@@ -19,7 +19,7 @@
       :props="tablePropsData"
     >
       <span
-        :style="tablePropsData.row.tdStyle"
+        :class="getCellClass(tablePropsData.row, col)"
         v-if="getColumnValue(col)"
         v-html="tablePropsData.row[col.name]"
       />
@@ -114,6 +114,10 @@ export default {
     selectionType: {
       type: String,
       default: 'none'
+    },
+    getCellClass: {
+      type: Function,
+      default: function () {}
     }
   },
   watch: {

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

@@ -39,7 +39,7 @@
             <q-item-label
               v-if="getColumnValue(col)"
               class="itemsFontSize text-almost-black"
-              :style="tablePropsData.row.tdStyle"
+              :class="getCellClass(tablePropsData.row, col)"
             >
               <q-icon
                 v-if="col.editable"
@@ -147,6 +147,10 @@ export default {
     },
     popupEditNumberOptions: {
       type: Array
+    },
+    getCellClass: {
+      type: Function,
+      default: function () {}
     }
   },
   emits: [

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/css/app.css

@@ -44,4 +44,13 @@
 
 .text-color-positive {
   color: var(--positive);
-}
+  font-weight: bold;
+}
+.text-color-negative-bold {
+  color: var(--negative);
+  font-weight: bold;
+  font-size: 30px;
+}
+
+/* const labelTextColor = 'color: #597765 !important;'
+const labelTextColorBold = 'color: #597765 !important; font-weight: bold;' */

package/src/layouts/PdaLayout.vue

@@ -30,7 +30,6 @@
           :show-skeleton="false"
           :selection-type="'multiple'"
           :filter-method="filterMethod"
-          :filter-computed="filter"
           @on-select-visible-columns="saveSelectedColumns"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
@@ -58,10 +57,7 @@ export default {
   data () {
     return {
       showDialog: false,
-      forceRender: false,
       store: tableStore(),
-      totalPage: 0,
-      pageSize: 20,
       tableStyle: '',
       columns: [{
         name: 'name',
@@ -312,17 +308,6 @@ export default {
       visibleColumns: []
     }
   },
-  computed: {
-    pageLength (): number {
-      return (this.totalPage + 1) * this.pageSize
-    },
-    filter ():object {
-      return {
-        search: this.store.filterValue,
-        forceRender: this.forceRender
-      }
-    }
-  },
   mounted () {
     this.store.cleanTableFilter()
     this.tableStyle = setTableHeight.setTableHeight()

package/src/pages/TablePage.vue

@@ -2,12 +2,13 @@
   <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"
       >
         <Table
+          ref="table"
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
@@ -16,9 +17,8 @@
           :table-style="tableStyle"
           :show-skeleton="false"
           :selection-type="'multiple'"
-          :filter-method="filterMethod"
-          :filter-computed="filter"
-          :sort-method="sortMethod"
+          :getCellClass="getCellClass"
+          :filtered-rows="filteredRows"
           @on-select-visible-columns="saveSelectedColumns"
           @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
@@ -33,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 TableSort from '../components/Table/utils/sort.js'
+// import TableSort from '../components/Table/utils/sort.js'
 import { tableStore } from '../store/table.js'
 export default {
   components: {
@@ -42,17 +42,32 @@ export default {
   data () {
     return {
       showDialog: false,
-      forceRender: false,
       store: tableStore(),
-      totalPage: 0,
-      pageSize: 20,
       tableStyle: '',
-      columns: [{
-        name: 'name',
+      columns: [
+        {
+          name: 'date',
+          required: true,
+          label: 'Date',
+          align: 'left',
+          sortable: true,
+          field: 'date',
+        },
+        {
+          name: 'time',
+          required: true,
+          label: 'Time',
+          align: 'left',
+          sortable: true,
+          field: 'time',
+        },
+        {
+        name: 'dessert',
         required: true,
-        label: 'Dessert (100g serving)',
+        label: 'Dessert',
         align: 'left',
-        sortable: true
+        sortable: true,
+        field: 'dessert'
       },
       {
         name: 'available',
@@ -60,7 +75,8 @@ export default {
         label: 'Available',
         align: 'left',
         sortable: true,
-        showBasicCheckbox: true
+        showBasicCheckbox: true,
+        field: 'available'
       },
       {
         name: 'booleanIcon',
@@ -72,10 +88,10 @@ export default {
       },
       {
         name: 'calories',
-        align: 'center',
         label: 'Calories',
         field: 'calories',
         sortable: true,
+        align: 'left',
         editable: true,
         showEditIcon: true,
         popupEditEmit: 'onSaveValuePopupEdit',
@@ -88,6 +104,7 @@ export default {
         label: 'Fat (g)',
         field: 'fat',
         sortable: true,
+        align: 'left',
         showCustomizedButton: true,
         btnIcon: 'save',
         btnEmit: 'onClickButton',
@@ -97,7 +114,10 @@ export default {
       {
         name: 'carbs',
         label: 'Carbs (g)',
-        field: 'carbs'
+        field: 'carbs',
+        align: 'left',
+        sortable: true,
+        format: (val: number) => `${val}`
       },
       {
         name: 'checked',
@@ -105,6 +125,7 @@ export default {
         field: 'carbs',
         sortable: true,
         required: true,
+        align: 'left',
         showCustomizedCheckBox: true,
         checkedIcon: 'check_circle',
         uncheckedIcon: 'cancel',
@@ -116,6 +137,7 @@ export default {
         name: 'protein',
         label: 'Protein (g)',
         field: 'protein',
+        align: 'left',
         sortable: true,
         required: true,
         editable: true,
@@ -128,26 +150,30 @@ export default {
       {
         name: 'sodium',
         label: 'Sodium (mg)',
+        align: 'left',
         field: 'sodium'
       },
       {
         name: 'calcium',
         label: 'Calcium (%)',
         field: 'calcium',
+        align: 'left',
         sortable: true
       },
       {
         name: 'iron',
         label: 'Iron (%)',
         field: 'iron',
+        align: 'left',
         sortable: true
       }
       ],
       rows: [],
       rowsData: [
         {
-          tdStyle: "color: #597765 !important; font-weight: bold;",
-          name: 'Frozen Yogurt',
+          date: '12/12/2024',
+          time: '12:20:40',
+          dessert: 'Frozen Yogurt',
           booleanIcon: true,
           available: true,
           calories: 159,
@@ -160,7 +186,9 @@ export default {
           iron: '1%'
         },
         {
-          name: 'Ice cream sandwich',
+          date: '18/12/2024',
+          time: '11:00:54',
+          dessert: 'Ice cream sandwich',
           booleanIcon: true,
           available: false,
           calories: 237,
@@ -173,7 +201,9 @@ export default {
           iron: '1%'
         },
         {
-          name: 'Eclair',
+          date: '05/07/2024',
+          time: '	7:01:24',
+          dessert: 'Eclair',
           booleanIcon: true,
           available: true,
           calories: 262,
@@ -186,7 +216,9 @@ export default {
           iron: '7%'
         },
         {
-          name: 'Cupcake',
+          date: '10/12/2023',
+          time: '12:04:33',
+          dessert: 'Cupcake',
           booleanIcon: false,
           available: false,
           calories: 305,
@@ -199,7 +231,9 @@ export default {
           iron: '8%'
         },
         {
-          name: 'Gingerbread',
+          date: '16/05/1999',
+          time: '10:43:25',
+          dessert: 'Gingerbread',
           booleanIcon: true,
           available: true,
           calories: 356,
@@ -212,7 +246,9 @@ export default {
           iron: '16%'
         },
         {
-          name: 'Jelly bean',
+          date: '01/01/0001',
+          time: '11:35:04',
+          dessert: 'Jelly bean',
           booleanIcon: false,
           available: false,
           calories: 375,
@@ -225,7 +261,9 @@ export default {
           iron: '0%'
         },
         {
-          name: 'Lollipop',
+          date: '12/12/2024',
+          time: '12:51:01',
+          dessert: 'Lollipop',
           booleanIcon: true,
           available: true,
           calories: 392,
@@ -238,7 +276,9 @@ export default {
           iron: '2%'
         },
         {
-          name: 'Honeycomb',
+          date: '05/07/2022',
+          time: '14:39:34',
+          dessert: 'Honeycomb',
           booleanIcon: true,
           available: false,
           calories: 408,
@@ -251,7 +291,9 @@ export default {
           iron: '45%'
         },
         {
-          name: 'Donut',
+          date: '14/03/2023',
+          time: '10:43:26',
+          dessert: 'Donut',
           booleanIcon: true,
           available: true,
           calories: 452,
@@ -264,7 +306,9 @@ export default {
           iron: '22%'
         },
         {
-          name: 'KitKat',
+          date: '12/12/2023',
+          time: '07:45:12',
+          dessert: 'KitKat',
           booleanIcon: false,
           available: false,
           calories: 518,
@@ -282,25 +326,37 @@ export default {
       filteredRows: []
     }
   },
-  computed: {
-    pageLength (): number {
-      return (this.totalPage + 1) * this.pageSize
-    },
-    filter ():object {
-      return {
-        search: this.store.filterValue,
-        forceRender: this.forceRender
-      }
-    }
-  },
   mounted () {
     this.store.cleanTableFilter()
     this.visibleColumns = this.store.visiblecolumns
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
-    this.rows = this.rowsData
+    this.getRows()
+
   },
   methods: {
+    getRows () {
+    this.rows = []
+      const lista = this.rowsData
+      for (let i = 0; i < lista.length; i++) {
+        this.rows.push({
+          id:  i + '-' + lista[i].dessert,
+          date: lista[i].date,
+          time: lista[i].time,
+          dessert: lista[i].dessert,
+          booleanIcon: lista[i].booleanIcon,
+          available: lista[i].available,
+          calories: lista[i].calories,
+          fat: lista[i].fat,
+          carbs: lista[i].carbs,
+          checked: lista[i].checked,
+          protein: lista[i].protein,
+          sodium: lista[i].sodium,
+          calcium: lista[i].calcium,
+          iron: lista[i].iron
+        })
+      }
+    },
     saveSelectedColumns (columns: string []): void {
       this.store.visiblecolumns = columns
       this.visibleColumns = columns
@@ -317,14 +373,20 @@ 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)
+    // 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 allrowsSorted.slice(0, rows.length)
+      return '';
     }
   }
 }

package/src/store/table.js

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