@cdmx/wappler_ag_grid 1.2.3 → 1.2.5

package/README.md

@@ -259,6 +259,9 @@ The Configure Actions Column feature allows you to configure actions for the but
 **Enable Actions**
 This will display the "Configure Actions" options for the buttons in the Actions Column.
 
+Note: Button Tooltip Supports Calling a function, just define a function and add the function name in the Tooltip e.g. getEditTooltip().
+In the function the variable for the row data will be available as the first attribute e.g. getEditTooltip(data), then data holds the values of the row.
+
 **Pin Actions Column**
 This will keep the Actions Column fixed when scrolling horizontally.
 
@@ -288,7 +291,7 @@ Specify the CSS class for styling the Edit Action button.
 Specify the CSS class for styling the icon of the Edit Action button.
 
 **Edit Action Button Condition**
-Specify the condition to Show the Edit Action button, eg: code==TEST, or status==COMPLETED
+Specify the condition to Show the Edit Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 **View Action Button**
 This will display the "View Action Button" options.
@@ -306,7 +309,7 @@ Specify the CSS class for styling the View Action button.
 Specify the CSS class for styling the icon of the View Action button.
 
 **View Action Button Condition**
-Specify the condition to Show the View Action button, eg: code==TEST, or status==COMPLETED
+Specify the condition to Show the View Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 **Delete Action Button**
 This will display the "Delete Action Button" options.
@@ -324,69 +327,29 @@ Specify the CSS class for styling the Delete Action button.
 Specify the CSS class for styling the icon of the Delete Action button.
 
 **Delete Action Button Condition**
-Specify the condition to Show the Delete Action button, eg: code==TEST, or status==COMPLETED
+Specify the condition to Show the Delete Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 # Custom Action Buttons
 
-**Button1 Class**
-Specify the CSS class for Button 1.
-
-**Button1 Tooltip**
-Specify the tooltip text for Button 1.
-
-**Button2 Class**
-Specify the CSS class for Button 2.
-
-**Button2 Tooltip**
-Specify the tooltip text for Button 2.
-
-**Button3 Class**
-Specify the CSS class for Button 3.
-
-**Button3 Tooltip**
-Specify the tooltip text for Button 3.
-
-**Button4 Class**
-Specify the CSS class for Button 4.
-
-**Button4 Tooltip**
-Specify the tooltip text for Button 4.
-
-**Button5 Class**
-Specify the CSS class for Button 5.
-
-**Button5 Tooltip**
-Specify the tooltip text for Button 5.
-
-**Button6 Class**
-Specify the CSS class for Button 6.
-
-**Button6 Tooltip**
-Specify the tooltip text for Button 6.
-
-**Button7 Class**
-Specify the CSS class for Button 7.
-
-**Button7 Tooltip**
-Specify the tooltip text for Button 7.
+**Buttons 1-10**
 
-**Button8 Class**
-Specify the CSS class for Button 8.
+**Button[i] Action Button**
+This will display the "Button[i] Action Button" options.
 
-**Button8 Tooltip**
-Specify the tooltip text for Button 8.
+**Button[i] Action Button Title**
+Specify the title for the Button[i] Action button.
 
-**Button9 Class**
-Specify the CSS class for Button 9.
+**Button[i] Action Button Tooltip**
+Specify the tooltip text for the Button[i] Action button.
 
-**Button9 Tooltip**
-Specify the tooltip text for Button 9.
+**Button[i] Action Button Class**
+Specify the CSS class for styling the Button[i] Action button.
 
-**Button10 Class**
-Specify the CSS class for Button 10.
+**Button[i] Action Button Icon Class**
+Specify the CSS class for styling the icon of the Button[i] Action button.
 
-**Button10 Tooltip**
-Specify the tooltip text for Button 10.
+**Button[i] Action Button Condition**
+Specify the condition to Show the Button[i] Action button, eg: code==TEST, or status==COMPLETED||status==FINISHED or status==COMPLETED&&user_status==true
 
 # Action Attributes
 

package/app_connect/components.hjson

@@ -85,11 +85,20 @@
               {title: 'Alpine', value: 'ag-theme-alpine'},
               {title: 'Balham', value: 'ag-theme-balham'},
               {title: 'Material', value: 'ag-theme-material'},
+              {title: 'Quartz', value: 'ag-theme-quartz'},
               {title: 'Custom', value: 'ag-theme-alpine ag-theme-custom'},
               {title: 'Base', value: 'ag-grid'}
               ],
               "help": "Select a theme for the grid"
             },
+            {
+              "name": "dark_mode",
+              "attribute": "dmx-bind:dark_mode",
+              "title": "Dark Mode",
+              "type": "boolean",
+              "defaultValue": true,
+              "help": "Enables dark mode"
+            },
             {
               "name": "locale_text",
               "attribute": "locale_text",
@@ -2264,6 +2273,10 @@
           "src": "../../../node_modules/ag-grid-community/styles/ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "../../../node_modules/ag-grid-community/styles/ag-theme-quartz.css",
+          "dst": "css/ag-theme-quartz.css"
+        },
         {
           "src": "../../../node_modules/moment/min/moment.min.js",
           "dst": "js/moment.min.js"
@@ -2333,6 +2346,10 @@
           "src": "css/ag-theme-material.css",
           "type": "css"
         },
+        {
+          "src": "css/ag-theme-quartz.css",
+          "type": "css"
+        },
         {
           "src": "css/switch-toggle-slider.css",
           "type": "css"

package/dmx-ag-grid.js

@@ -5,13 +5,19 @@ dmx.Component('ag-grid', {
     count: Number,
     fields: {},
     fileData: [],
-    selectedRows: []
+    selectedRows: [],
+    state: {
+      gridReady: !1,
+      firstDataRendered: !1,
+      rowDataUpdated: !1
+    }
   },
 
   attributes: {
     id: { default: null },
     noload: { type: Boolean, default: false },
     grid_theme: { type: String, default: 'ag-theme-alpine' },
+    dark_mode: { type: Boolean, default: false},
     column_defs: { type: Array, default: [] },
     tooltip_config: { type: Array, default: [] },
     custom_tooltip: { type: String, default: null },
@@ -359,7 +365,8 @@ dmx.Component('ag-grid', {
     let exportToCSV = this.props.export_to_csv;
     let gridInstance = null; 
     let cellRenderer;
-    this.$node.innerHTML = `<div id=${options.id}-grid class="${options.grid_theme}"></div>`;
+    const gridThemeClass = options.dark_mode ? `${options.grid_theme}-dark` : options.grid_theme;
+    this.$node.innerHTML = `<div id=${options.id}-grid class="${gridThemeClass}"></div>`;
     if (!rowData || rowData.length === 0) {
       console.error('No row data provided.');
       return;
@@ -464,14 +471,21 @@ dmx.Component('ag-grid', {
       const buttons = params.buttons || defaultButtons;
       // Create a new container element to hold the buttons
       const container = document.createElement('div');
-  
+      
       buttons.forEach((buttonConfig) => {
           const button = document.createElement('button');
           button.classList.add('btn');
           const classNames = buttonConfig.classNames.split(' ');
           classNames.forEach((className) => button.classList.add(className));
           button.setAttribute('data-toggle', 'tooltip');
-          button.setAttribute('title', buttonConfig.tooltip);
+          // Call a function to get the dynamic tooltip content
+          if (buttonConfig.tooltip.endsWith('()')) {
+            const tooltipFunction = buttonConfig.tooltip.slice(0, -2); // Remove the trailing '()'
+            const tooltipText = window[tooltipFunction](params.data)
+            button.setAttribute('title', tooltipText);
+          } else {
+            button.setAttribute('title', buttonConfig.tooltip);
+          }
           button.innerHTML = `<i class="${buttonConfig.icon}"></i> ${buttonConfig.action}`;
           container.appendChild(button);
            // Check if the button should be hidden based on the condition string and row data

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cdmx/wappler_ag_grid",
-    "version": "1.2.3",
+    "version": "1.2.5",
     "type": "module",
     "description": "App Connect module for AG Grid Table Generation.",
     "license": "MIT",
@@ -14,7 +14,7 @@
         "ag-grid"
     ],
     "dependencies": {
-        "ag-grid-community": "30.2.x",
+        "ag-grid-community": "31.0.x",
         "exceljs": "4.3.x",
         "moment": "2.29.x",
         "papaparse": "5.4.x"