@cdmx/wappler_ag_grid 0.2.3 → 0.2.5

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",
@@ -680,10 +688,12 @@
               "display": "fieldset",
               "show": [
                 "enableActions",
+                "editActionBtn",
                 "editActionTitle",
                 "editActionTooltip",
                 "editActionBtnClass",
                 "editActionIconClass",
+                "viewActionBtn",
                 "viewActionTitle",
                 "viewActionTooltip",
                 "viewActionBtnClass",
@@ -706,6 +716,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 +751,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

@@ -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' },
@@ -69,6 +72,10 @@ dmx.Component('ag-grid', {
       this.set('rowData', rowData);
       this.set('columnDefs', columnDefs);
       this.refreshGrid();
+    },
+    reloadGrid: function () {
+      this.refreshGrid()
+      console.log('reloadGrid');
     }
   },
 
@@ -302,6 +309,7 @@ dmx.Component('ag-grid', {
         let valueFormatter;
         let filterParams;
         let minWidth;
+        let hide;
 
 
         if (dataType === 'number') {
@@ -404,6 +412,12 @@ dmx.Component('ag-grid', {
         else {
           cellRenderer = undefined;
         }
+        if (options.hide_id_field && key == 'id') {
+          hide = true;
+        }
+        else {
+          hide = undefined;
+        }
 
         return {
           headerName: headerName,
@@ -412,6 +426,7 @@ dmx.Component('ag-grid', {
           valueFormatter: valueFormatter,
           valueGetter: valueGetter,
           minWidth: minWidth,
+          hide: hide,
           filterValueGetter: filterValueGetter,
           filterParams: filterParams,
           cellStyle: applyCellStyle,
@@ -447,43 +462,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,
@@ -586,8 +605,36 @@ dmx.Component('ag-grid', {
 
     // Create the export button
     if (exportToCSV) {
+      const existingExportButton = document.getElementById('exportButton');
+      // If it already exists, just exit the function
+      if (existingExportButton) {
+        return;
+      }
       const exportButton = document.createElement('button');
-      exportButton.innerText = 'Export to CSV';
+      exportButton.id = 'exportButton'; 
+
+        // Add the icon
+      const icon = document.createElement('i');
+      icon.classList.add('fas', 'fa-file-csv'); // Use the Font Awesome icon class here
+      exportButton.appendChild(icon);
+
+      // Add the button text
+      const buttonText = document.createElement('span');
+      buttonText.innerText = ' Export to CSV';
+      exportButton.appendChild(buttonText);
+      // Add some fancy styles to the button
+      exportButton.style.backgroundColor = '#4CAF50';
+      exportButton.style.border = 'none';
+      exportButton.style.color = 'white';
+      exportButton.style.padding = '5px 10px';
+      exportButton.style.textAlign = 'center';
+      exportButton.style.textDecoration = 'none';
+      exportButton.style.display = 'inline-block';
+      exportButton.style.fontSize = '14px'; 
+      exportButton.style.borderRadius = '5px';
+      exportButton.style.cursor = 'pointer';
+      exportButton.style.marginBottom = '10px';
+      
       exportButton.addEventListener('click', () => {
         const params = {
           fileName: 'export.csv', // Set the desired file name here
@@ -606,12 +653,11 @@ dmx.Component('ag-grid', {
         };
         gridConfig.api.exportDataAsCsv(params);
       });
-
       // Append the export button to the grid container
       gridContainer.parentNode.insertBefore(exportButton, gridContainer);
-
       exportButton.style.marginBottom = '10px';
     }
+    
   },
 
   events: {

package/package.json

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