@cdmx/wappler_ag_grid 0.2.4 → 0.2.6

package/app_connect/components.hjson

@@ -360,6 +360,14 @@
               "defaultValue": false,
               "help": "Disables checking for duplicate property names"
             },
+            {
+              "name": "hideIdField",
+              "attribute": "dmx-bind:hide_id_field",
+              "title": "Hide ID Field",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "Hides the ID Field in Grid"
+            },
             {
               "name": "localeText",
               "attribute": "localeText",
@@ -399,8 +407,6 @@
           "variables": [
             {
               "name": "cstyles",
-              "attributeStartsWith": "dmx-bind",
-              "attribute": "cstyles",
               "title": "Configure Colors",
               "type": "boolean",
               "display": "fieldset",
@@ -422,7 +428,6 @@
                   "title": "Colors",
                   "type": "grid",
                   "dataBindings": true,
-                  "key": "field",
                   "jsonFormat": true,
                   "encloseBT": true,
                   "jsonBT": true,
@@ -471,8 +476,6 @@
           "variables": [
             {
               "name": "data_changes",
-              "attributeStartsWith": "dmx-bind",
-              "attribute": "data_changes",
               "title": "Configure Fields",
               "type": "boolean",
               "display": "fieldset",
@@ -494,7 +497,6 @@
                   "title": "Fields Data",
                   "type": "grid",
                   "dataBindings": true,
-                  "key": "field",
                   "jsonFormat": true,
                   "encloseBT": true,
                   "jsonBT": true,
@@ -538,8 +540,6 @@
           "variables": [
             {
               "name": "cnames",
-              "attributeStartsWith": "dmx-bind",
-              "attribute": "cnames",
               "title": "Configure Header Names",
               "type": "boolean",
               "display": "fieldset",
@@ -601,8 +601,6 @@
           "variables": [
             {
               "name": "cwidths",
-              "attributeStartsWith": "dmx-bind",
-              "attribute": "cwidths",
               "title": "Configure Custom Widths",
               "type": "boolean",
               "display": "fieldset",
@@ -680,10 +678,12 @@
               "display": "fieldset",
               "show": [
                 "enableActions",
+                "editActionBtn",
                 "editActionTitle",
                 "editActionTooltip",
                 "editActionBtnClass",
                 "editActionIconClass",
+                "viewActionBtn",
                 "viewActionTitle",
                 "viewActionTooltip",
                 "viewActionBtnClass",
@@ -706,6 +706,13 @@
                   "defaultValue": false,
                   "help": "Enable Actions"
                 },
+                {
+                  "name": "editActionBtn",
+                  "attribute": "dmx-bind:edit_action_btn",
+                  "title": "Edit Action Button",
+                  "type": "boolean",
+                  "defaultValue": false
+                },
                 {
                   "name": "editActionTitle",
                   "attribute": "edit_action_title",
@@ -734,6 +741,13 @@
                   "type": "text",
                   "defaultValue": 'fas fa-pencil-alt'
                 },
+                {
+                  "name": "viewActionBtn",
+                  "attribute": "dmx-bind:view_action_btn",
+                  "title": "View Action Button",
+                  "type": "boolean",
+                  "defaultValue": ''
+                },
                 {
                   "name": "viewActionTitle",
                   "attribute": "view_action_title",

package/dmx-ag-grid.js

@@ -10,10 +10,10 @@ dmx.Component('ag-grid', {
     rowData: { type: Array, default: [] },
     grid_theme: { type: String, default: 'ag-theme-alpine' },
     column_defs: { type: Array, default: [] },
-    cstyles: { type: Object, default: {} },
+    cstyles: { type: Array, default: [] },
     cnames: { type: Object, default: {} },
     cwidths: { type: Object, default: {} },
-    data_changes: { type: Object, default: {} },
+    data_changes: { type: Array, default: [] },
     data: { type: Array, default: [] },
     domLayout: { default: 'autoHeight' },
     enableCellTextSelection: { type: Boolean, default: true },
@@ -33,6 +33,7 @@ dmx.Component('ag-grid', {
     suppressClipboardPaste: { type: Boolean, default: false },
     suppressScrollOnNewData: { type: Boolean, default: false },
     suppressPropertyNamesCheck: { type: Boolean, default: false },
+    hide_id_field: { type: Boolean, default: false },
     localeText: { default: null }, 
     minWidth: { type: Number, default: 150 },
     sortable: { type: Boolean, default: true },
@@ -53,8 +54,10 @@ dmx.Component('ag-grid', {
     row_status_event: {type: Boolean, default: false },
     enable_actions: {type: Boolean, default: false },
     pin_actions: {type: String, default: 'right' },
+    edit_action_btn: { type: Boolean, default: false },
     edit_action_title: {type: String, default: '' },
     edit_action_tooltip: {type: String, default: 'Edit' },
+    view_action_btn: { type: Boolean, default: false },
     view_action_title: {type: String, default: '' },
     view_action_tooltip: {type: String, default: 'View' },
     edit_action_icon_class: {type: String, default: 'fas fa-pencil-alt' },
@@ -72,6 +75,7 @@ dmx.Component('ag-grid', {
     },
     reloadGrid: function () {
       this.refreshGrid()
+      console.log('reloadGrid');
     }
   },
 
@@ -280,11 +284,11 @@ dmx.Component('ag-grid', {
       }
     }
     function getValueGetter(key, dataChanges) {
-      return function(params) {
-        let value = params.data[key];
-        if (dataChanges.hasOwnProperty(key)) {
-          const change = dataChanges[key];
-          value = change.new_value;
+      return function (params) {
+        const value = params.data[key];
+        const matchingChange = dataChanges.find((change) => change.field === key && change.value === String(originalValue));
+        if (matchingChange) {
+          return matchingChange.new_value;
         }
         return value;
       };
@@ -305,6 +309,7 @@ dmx.Component('ag-grid', {
         let valueFormatter;
         let filterParams;
         let minWidth;
+        let hide;
 
 
         if (dataType === 'number') {
@@ -378,16 +383,22 @@ dmx.Component('ag-grid', {
         const cstyles = this.props.cstyles
         // Check if custom color exists for the current field and condition
         function applyCellStyle(params) {
-            const field = params.colDef.field.toString();
-            if (cstyles.hasOwnProperty(field)) {
-              const condition = cstyles[field].condition;
-              const customColor = cstyles[field].customColor;
-              const [left, operator, right] = extractConditionParts(condition);
-              if (params.data.hasOwnProperty(field) && evaluateCondition(params.data[left], operator, right)) {
-                return { color: customColor };
-              }
+          const field = params.colDef.field.toString();
+          const styles = cstyles.filter((cs) => cs.field === field);
+        
+          for (const style of styles) {
+            const condition = style.condition;
+            const customColor = style.customColor;
+            const [left, operator, right] = extractConditionParts(condition);
+            if (
+              params.data.hasOwnProperty(left) && 
+              evaluateCondition(params.data[left], operator, right) 
+            ) {
+              return { color: customColor }; 
             }
-            return null;
+          }
+        
+          return null;
           }
         cnames = this.props.cnames
         cwidths = this.props.cwidths
@@ -407,6 +418,12 @@ dmx.Component('ag-grid', {
         else {
           cellRenderer = undefined;
         }
+        if (options.hide_id_field && key == 'id') {
+          hide = true;
+        }
+        else {
+          hide = undefined;
+        }
 
         return {
           headerName: headerName,
@@ -415,6 +432,7 @@ dmx.Component('ag-grid', {
           valueFormatter: valueFormatter,
           valueGetter: valueGetter,
           minWidth: minWidth,
+          hide: hide,
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
           cellStyle: applyCellStyle,
@@ -450,43 +468,47 @@ dmx.Component('ag-grid', {
       columnDefs.unshift(checkboxColumn);
     }
     if (options.enable_actions) {
-          actionsColumn = {
-            headerName: 'Actions',
-            field: 'action',
-            filter: null,
-            cellRenderer: actionsRenderer,
-            pinned: options.pin_actions,
-            cellRendererParams: {
-              // Custom button configurations
-              buttons: [
-                {
-                  action: options.edit_action_title,
-                  classNames: options.edit_action_btn_class,
-                  tooltip: options.edit_action_tooltip,
-                  icon: options.edit_action_icon_class,
-                  onClick: (rowData) => {
-                    this.set('data', rowData);
-                    this.set('id', rowData.id);
-                    this.dispatchEvent('row_action_edit');
-                  },
-                },
-                {
-                  action: options.view_action_title,
-                  classNames: options.view_action_btn_class,
-                  tooltip: options.view_action_tooltip,
-                  icon: options.view_action_icon_class,
-                  onClick: (rowData) => {
-                    this.set('data', rowData);
-                    this.set('id', rowData.id);
-                    this.dispatchEvent('row_action_view');
-                  },
-                },
-                // Add more custom buttons as needed
-              ],
-            },
-          }
-        columnDefs.push(actionsColumn);
+      actionsColumn = {
+        headerName: 'Actions',
+        field: 'action',
+        filter: null,
+        cellRenderer: actionsRenderer,
+        pinned: options.pin_actions,
+        cellRendererParams: {
+          buttons: [],
+        },
+      };
+    
+      if (options.edit_action_btn) {
+        actionsColumn.cellRendererParams.buttons.push({
+          action: options.edit_action_title,
+          classNames: options.edit_action_btn_class,
+          tooltip: options.edit_action_tooltip,
+          icon: options.edit_action_icon_class,
+          onClick: (rowData) => {
+            this.set('data', rowData);
+            this.set('id', rowData.id);
+            this.dispatchEvent('row_action_edit');
+          },
+        });
       }
+    
+      if (options.view_action_btn) {
+        actionsColumn.cellRendererParams.buttons.push({
+          action: options.view_action_title,
+          classNames: options.view_action_btn_class,
+          tooltip: options.view_action_tooltip,
+          icon: options.view_action_icon_class,
+          onClick: (rowData) => {
+            this.set('data', rowData);
+            this.set('id', rowData.id);
+            this.dispatchEvent('row_action_view');
+          },
+        });
+      }
+    
+      columnDefs.push(actionsColumn);
+    }
         
     const gridOptions = {
       columnDefs: columnDefs,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "0.2.4",
+    "version": "0.2.6",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation",
     "license": "MIT",