quasar-factory-lib 0.0.46 → 0.0.48

package/package.json

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

package/src/components/Table/Table.vue

@@ -22,7 +22,7 @@
       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 +61,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 +75,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"
@@ -129,10 +131,10 @@ export default defineComponent({
       type: Function,
       default: function () {}
     },
-    sortMethod: {
-      type: Function,
-      default: function () {}
-    },
+    // sortMethod: {
+    //   type: Function,
+    //   default: function () {}
+    // },
     selectionType: {
       type: String as () => 'none' | 'single' | 'multiple',
       default: 'none'
@@ -171,6 +173,14 @@ export default defineComponent({
     },
     showSkeleton: {
       type: Boolean
+    },
+    filterComputedOptions: {
+      type: Object,
+      default: {}
+    },
+    getCellClass: {
+      type: Function,
+      default: function () {}
     }
   },
   emits: [
@@ -219,7 +229,8 @@ export default defineComponent({
     filterComputed ():object {
       return {
         search: this.store.filterValue,
-        forceRender: this.forceRender
+        forceRender: this.forceRender,
+        ...this.filterComputedOptions
       }
     },
     pageLength (): number {
@@ -287,7 +298,63 @@ export default defineComponent({
     },
     toogleLoading () {
       this.loading = !this.loading
+    },
+    customSortMethod(
+      rows, 
+      sortBy: string, 
+      descending: boolean
+    ) {
+      const data = [...rows];
+
+      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;
     }
+
   }
 })
 </script>

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/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

@@ -8,6 +8,7 @@
         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'"
+          :getCellClass="getCellClass"
           :filter-method="filterMethod"
-          :filter-computed="filter"
-          :sort-method="sortMethod"
           @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 '';
     }
   }
 }