quasar-factory-lib 0.0.75 → 0.0.77

package/src/pages/TablePage.vue

@@ -13,7 +13,7 @@
           :rows="rows"
           :columns="columns"
           :visible-columns="store.visiblecolumns"
-          :small-device="true"
+          :small-device="false"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="showSkeleton"
@@ -22,6 +22,8 @@
           :filterComputedOptions="{ preparedQuantity: store.prepared}"
           :additional-sort-conditions="additionalSortConditions"
           :additional-filter-conditions="additionalFilterConditions"
+          :advancedFilters="advancedFilters" 
+          :showIconAdvancedFilter="true"
           @on-select-visible-columns="(columns) => {
             store.visiblecolumns = columns
           }"
@@ -29,6 +31,9 @@
           @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-click-button="setItemNotFound"
           @onClickIconToolTip="onClickIconToolTip"
+          @onUpdateSelected="(details) => {
+            console.log(details, 'details')
+          }"
 
         />
       </div>
@@ -50,6 +55,7 @@ export default {
       showDialog: false,
       store: tableStore(),
       tableStyle: '',
+      advancedFilters: {},
       columns: [
         {
           name: 'date',
@@ -58,6 +64,7 @@ export default {
           align: 'left',
           sortable: true,
           field: 'date',
+          type: 'date'
         },
         {
           name: 'time',
@@ -66,6 +73,7 @@ export default {
           align: 'left',
           sortable: true,
           field: 'time',
+          type: 'time'
         },
         {
         name: 'dessert',
@@ -73,7 +81,8 @@ export default {
         label: 'Dessert',
         align: 'left',
         sortable: true,
-        field: 'dessert'
+        field: 'dessert',
+        type: 'string'
       },
       {
         name: 'available',
@@ -82,7 +91,8 @@ export default {
         align: 'left',
         sortable: true,
         showBasicCheckbox: true,
-        field: 'available'
+        field: 'available',
+        type: 'boolean',
       },
       {
         name: 'booleanIcon',
@@ -94,7 +104,8 @@ export default {
         customizedIconNameCaseTrue: 'done',
         customizedIconNameCaseFalse: 'done_all',
         customizedIconColorCaseTrue: 'yellow',
-        customizedIconColorCaseFalse: 'blue'
+        customizedIconColorCaseFalse: 'blue',
+        type: 'boolean'
       },
       {
         name: 'calories',
@@ -107,7 +118,8 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditInputtype: 'number',
         popupEditDataCy: '',
-        popupEditMask: '#####'
+        popupEditMask: '#####',
+        type: 'number'
       },
       {
         name: 'fat',
@@ -119,6 +131,7 @@ export default {
         btnIcon: 'save',
         btnEmit: 'onClickButton',
         dataCy: 'onClickButton',
+        type: 'decimal'
         // btnColor: 'primary'
       },
       {
@@ -131,6 +144,7 @@ export default {
         btnIcon: 'save',
         btnEmit: 'onClickButton',
         dataCy: 'onClickButton',
+        type: 'decimal'
         // btnColor: 'secondary'
       },
       {
@@ -145,7 +159,9 @@ export default {
         badgeText: (row: { badgeText: string }) => row.badgeText,
         badgeColor: (row: { badgeColor: string }) => row.badgeColor,
         badgeTextColor: 'black',
-        badgeOutline: true
+        badgeOutline: true,
+        type: 'string',
+        disable: true
       },
       {
         name: 'checked',
@@ -159,7 +175,8 @@ export default {
         uncheckedIcon: 'cancel',
         checkBoxColorCaseTrue: 'positive',
         checkBoxColorCaseFalse: 'negative',
-        checkBoxDataCy: ''
+        checkBoxDataCy: '',
+        type: 'boolean'
       },
       {
         name: 'protein',
@@ -173,7 +190,8 @@ export default {
         popupEditEmit: 'onSaveValuePopupEdit',
         popupEditInputtype: 'text',
         popupEditDataCy: '',
-        showInputPopupEdit: true
+        showInputPopupEdit: true,
+        type: 'decimal'
       },
       {
         name: 'sodium',
@@ -187,20 +205,24 @@ export default {
         iconWithToolTipColor:  (row: { iconWithToolTipColor: string }) => row.iconWithToolTipColor,
         iconWithToolTipName: (row: { iconWithToolTipName: string }) => row.iconWithToolTipName,
         toolTipText: (row: { toolTipText: string }) => row.toolTipText,
+        type: 'boolean',
+        disable: true
       },
       {
         name: 'calcium',
         label: 'Calcium (%)',
         field: 'calcium',
         align: 'left',
-        sortable: true
+        sortable: true,
+        type: 'number'
       },
       {
         name: 'iron',
         label: 'Iron (%)',
         field: 'iron',
         align: 'left',
-        sortable: true
+        sortable: true,
+        type: 'number'
       }
       ],
       rows: [],
@@ -363,6 +385,7 @@ export default {
     this.tableStyle = setTableHeight.setTableHeight()
     infiniteScroll.handleInfiniteScrollNewTable(this)
     this.getRows()
+    this.getAdvancedFilterColumns()
 
   },
   methods: {
@@ -475,6 +498,12 @@ export default {
       else if (!this.store.prepared) {
         return [...rows]
       }
+    },
+    getAdvancedFilterColumns (): void {
+      this.advancedFilters = this.columns.reduce((acc, column) => {
+            acc[column.name] = ''
+          return acc
+        }, {} as { [key: string]: string })
     }
   }
 }