@cdmx/wappler_ag_grid 0.0.8 → 0.1.0

package/app_connect/components.hjson

@@ -17,6 +17,11 @@
           "name": "id",
           "title": "Id",
           "type": "number"
+        },
+        {
+          "name": "fields",
+          "title": "Fields",
+          "type": "object"
         }
       ],
       "outputType": "object",
@@ -352,7 +357,23 @@
               "title": "Row Click Events",
               "type": "boolean",
               "defaultValue": false,
-              "help": "This enabled row click en=vents whcihc can then be used in Dynamic events => Grid Events => Row Clicked"
+              "help": "This enabled row click events which can then be used in Dynamic events => Grid Events => Row Clicked"
+            },
+            {
+              "name": "rowCheckboxEvent",
+              "attribute": "dmx-bind:row_checkbox_event",
+              "title": "Row Checkbox Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enabled row checkbox events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
+            },
+            {
+              "name": "rowStatusEvent",
+              "attribute": "dmx-bind:row_status_event",
+              "title": "Row Status Events",
+              "type": "boolean",
+              "defaultValue": false,
+              "help": "This enabled row status events which can then be used in Dynamic events => Grid Events => Checkbox Checked || Checkbox Unchecked"
             }
           ]
         },
@@ -665,6 +686,10 @@
           "src": "ag-theme-material.css",
           "dst": "css/ag-theme-material.css"
         },
+        {
+          "src": "switch-toggle-slider.css",
+          "dst": "css/switch-toggle-slider.css"
+        },
         {
           "src": "dmx-ag-grid.js",
           "dst": "js/dmx-ag-grid.js"
@@ -692,6 +717,10 @@
         {
           "src": "css/ag-theme-material.css",
           "type": "css"
+        },
+        {
+          "src": "css/switch-toggle-slider.css",
+          "type": "css"
         }
       ],
       "cssOrder": [],
@@ -768,6 +797,143 @@
       "allowedOn": {
         "dmx-ag-grid": true
       }
+    },
+    {
+      "name": "dmx-ag-grid-checkbox-checked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_checkbox_checked",
+      "display": "fieldset",
+      "title": "Checkbox Checked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowCheckboxChecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowCheckboxChecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_checkbox_checked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
+    {
+      "name": "dmx-ag-grid-checkbox-unchecked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_checkbox_unchecked",
+      "display": "fieldset",
+      "title": "Checkbox Unchecked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowCheckboxUnchecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowCheckboxUnchecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_checkbox_unchecked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    }
+    ,
+    {
+      "name": "dmx-ag-grid-status-checked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_status_checked",
+      "display": "fieldset",
+      "title": "Status Checked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowStatusChecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowStatusChecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_status_checked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
+    },
+    {
+      "name": "dmx-ag-grid-status-unchecked",
+      "attributeStartsWith": "dmx-on",
+      "attribute": "row_status_unchecked",
+      "display": "fieldset",
+      "title": "Status Unchecked",
+      "icon": "fa fa-lg fa-chevron-right",
+      "groupTitle": "Grid Events",
+      "groupIcon": "fa fa-lg fa-cubes",
+      "defaultValue": false,
+      "show": [
+        "rowStatusUnchecked"
+      ],
+      "noChangeOnHide": true,
+      "type": "boolean",
+      "groupEnabler": true,
+      "children": [
+        {
+          "name": "rowStatusUnchecked",
+          "attributeStartsWith": "dmx-on",
+          "attribute": "row_status_unchecked",
+          "isValue": true,
+          "actionsPicker": true,
+          "title": "Action:",
+          "type": "text",
+          "help": "Choose the action to execute.",
+          "defaultValue": "",
+          "initDisplay": "none"
+        }
+      ],
+      "allowedOn": {
+        "dmx-ag-grid": true
+      }
     }
   ],
   "static_events": []

package/dmx-ag-grid.js

@@ -85,7 +85,10 @@ dmx.Component('ag-grid', {
     fixedTopOffset: { type: Number, default: 80 },
     fixedHorizonatalScroll: { type: Boolean, default: false },
     timezone: {type: Text, default: '' },
-    row_click_event: {type: Boolean, default: false }
+    row_click_event: {type: Boolean, default: false },
+    row_checkbox_event: {type: Boolean, default: false },
+    row_status_event: {type: Boolean, default: false }
+    
   },
 
   methods: {
@@ -106,6 +109,8 @@ dmx.Component('ag-grid', {
     const timezone = this.props.timezone || false;
     const dataChanges = this.props.data_changes;
     const grid_theme = this.props.grid_theme;
+    const enableCheckboxEvent = this.props.row_checkbox_event;
+    const enableStatusToggle = this.props.row_status_event;
     let columnDefs = [];
     let exportToCSV = this.props.exportToCSV;
 
@@ -115,16 +120,100 @@ dmx.Component('ag-grid', {
       console.error('No row data provided.');
       return;
     }
-    window.clickEvent = (columnName, value) => {
-      // this.set('fields', {"field": columnName, "data": value});
-      this.set('id', value);
+    function formatValue(value, key, dataType, timezone) {
+      params = {"value":value}
+      if (dataType === 'number') {
+        if (/(amount|amt)$/.test(key)) {
+          return Number(value).toLocaleString("en-US", {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          });
+        } else {
+          return blankOrNullValueFormatter(params);
+        }
+      } else if (dataType === 'date') {
+        return formatTime(params, timezone);
+      } 
+       else {
+        return blankOrNullValueFormatter(params);
+      }
+    }
+    window.clickEvent = (columnName, value, idValue) => {
+      this.set('fields', {"field": columnName, "data": value});
+      this.set('id', idValue);
       this.dispatchEvent('row_clicked')
     };
+    window.handleCheckboxClick = (event, columnName, value, idValue) => {
+      const isChecked = event.target.checked;
+      if (isChecked) {
+        // Code for when the checkbox is checked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_checkbox_checked')
+      } else {
+        // Code for when the checkbox is unchecked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_checkbox_unchecked')
+      }
+    };
+    window.handleStatusToggle = (event, columnName, value, idValue) => {
+      const isChecked = event.target.checked;
+      if (isChecked) {
+        // Code for when the checkbox is checked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_status_checked')
+      } else {
+        // Code for when the checkbox is unchecked
+        this.set('id', idValue);
+        this.set('fields', {"field": columnName, "data": value});
+        this.dispatchEvent('row_status_unchecked')
+      }
+    };
     function clickCellRenderer(params) {
       const idValue = params.data.id;
-      const columnName = params.colDef.field; 
-      const value = params.value != null ? params.value.toString() : '-';
-      return `<div onclick="clickEvent('${columnName}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
+      const columnName = params.colDef.field;
+      const dataType = detectDataType([params.value]);
+      const value = formatValue(params.value, columnName, dataType, timezone);
+      return `<div onclick="clickEvent('${columnName}', '${value}', '${idValue}')" style="cursor: pointer;">${value}</div>`;
+    }
+    function checkboxCellRenderer(params) {
+      const idValue = params.data.id;
+      const columnName = params.colDef.field;
+      const dataType = detectDataType([params.value]);
+      const value = formatValue(params.value, columnName, dataType, timezone);
+    
+      if (columnName === "id") {
+        return `
+          <input 
+            type="checkbox" 
+            onclick="handleCheckboxClick(event, '${columnName}', '${value}', '${idValue}')"
+          />
+        `;
+      } else if (columnName == "status" && enableStatusToggle) {
+        // Assuming `value` is a boolean representing the status
+        const checked = value==true ? "checked" : "";
+        return `
+          <label class="switch switch-success">
+            <input 
+              type="checkbox" class="switch-input"
+              ${checked}
+              onclick="handleStatusToggle(event, '${columnName}', '${value}', '${idValue}')"
+            />
+            <span class="switch-toggle-slider" role="status">
+            </span>
+            <span class="switch-on">
+                <i class="bx bx-check"></i>
+            </span>
+            <span class="switch-off">
+                <i class="bx bx-x"></i>
+            </span>
+        </label>
+        `;
+      } else {
+        return value;
+      }
     }
     
 
@@ -338,7 +427,7 @@ const cstyles = this.props.cstyles
             minWidth: parseInt(cwidths[key].min_width),
             maxWidth: parseInt(cwidths[key].max_width),
           }),
-          cellRenderer: enableClickEvent ? 'clickCellRenderer' : undefined
+          cellRenderer: enableClickEvent ? 'clickCellRenderer' : (enableCheckboxEvent ? 'checkboxCellRenderer' : undefined)
         };
       });
     }
@@ -372,7 +461,8 @@ const cstyles = this.props.cstyles
       suppressPropertyNamesCheck: this.props.suppressPropertyNamesCheck,
       localeText: this.props.localeText,
       components: {
-        clickCellRenderer: clickCellRenderer
+        clickCellRenderer: clickCellRenderer,
+        checkboxCellRenderer: checkboxCellRenderer
       }
     };
 
@@ -450,7 +540,11 @@ const cstyles = this.props.cstyles
   },
 
   events: {
-    row_clicked: Event
+    row_clicked: Event,
+    row_checkbox_checked: Event,
+    row_checkbox_unchecked: Event,
+    row_status_checked: Event,
+    row_status_unchecked: Event
   },
 
   render: function(node) {

package/package.json

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

package/switch-toggle-slider.css

@@ -0,0 +1,345 @@
+.select-wrapper-status {
+    position: relative;
+}
+
+.select-wrapper-status i.fa {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.switch {
+    margin-right: 0.75rem;
+    position: relative;
+    vertical-align: middle;
+    margin-bottom: 0;
+    display: inline-block;
+    border-radius: 30rem;
+    min-height: 1.35rem;
+    font-size: 0.9375rem;
+    line-height: 1.4;
+}
+
+.switch .switch-label:first-child {
+    padding-right: 0.5rem;
+}
+
+.switch .switch-input~.switch-label {
+    padding-left: 3rem;
+}
+
+.switch .switch-toggle-slider {
+    width: 2.5rem;
+    height: 1.35rem;
+    font-size: 0.625rem;
+    line-height: 1.35rem;
+    border: 1px solid transparent;
+    top: 0;
+}
+
+.switch .switch-toggle-slider i {
+    position: relative;
+    font-size: 0.9375rem;
+    top: -1.35px;
+}
+
+.switch .switch-label {
+    top: 0.01875rem;
+}
+
+.switch .switch-input:checked~.switch-toggle-slider::after {
+    left: 1.15rem;
+}
+
+.switch .switch-toggle-slider::after {
+    top: -1px;
+    margin: 0.25rem 0 0 0.25rem;
+    width: 13px;
+    height: 13px;
+}
+
+.switch .switch-on {
+    padding-left: 0.25rem;
+    padding-right: 1.1rem;
+}
+
+.switch .switch-off {
+    padding-left: 1.1rem;
+    padding-right: 0.25rem;
+}
+
+[dir=rtl] .switch .switch-label {
+    padding-right: 3rem;
+    padding-left: 0;
+}
+
+[dir=rtl] .switch .switch-input:checked~.switch-toggle-slider::after {
+    left: auto;
+    right: 1.15rem;
+}
+
+[dir=rtl] .switch .switch-toggle-slider::after {
+    margin-left: 0;
+    margin-right: 0.25rem;
+}
+
+[dir=rtl] .switch .switch-on {
+    padding-left: 1.1rem;
+    padding-right: 0.25rem;
+}
+
+[dir=rtl] .switch .switch-off {
+    padding-left: 0.25rem;
+    padding-right: 1.1rem;
+}
+
+[dir=rtl] .switch {
+    margin-left: 0.75rem;
+    margin-right: 0;
+}
+
+.switch-input {
+    opacity: 0;
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    z-index: -1;
+}
+
+.switch-toggle-slider {
+    position: absolute;
+    overflow: hidden;
+    border-radius: 30rem;
+    background: #e9ecee;
+    color: #677788;
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-property: left, right, background, -webkit-box-shadow;
+    transition-property: left, right, background, -webkit-box-shadow;
+    transition-property: left, right, background, box-shadow;
+    transition-property: left, right, background, box-shadow, -webkit-box-shadow;
+    cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+        user-select: none;
+}
+
+.switch-label {
+    display: inline-block;
+    font-weight: 400;
+    color: #677788;
+    position: relative;
+    cursor: default;
+}
+
+.switch-off,
+.switch-on {
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    top: 0;
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-property: left, right;
+    transition-property: left, right;
+}
+
+.switch-on {
+    left: -100%;
+}
+
+[dir=rtl] .switch-on {
+    left: auto;
+    right: -100%;
+}
+
+.switch-input:not(:checked)~.switch-toggle-slider .switch-on {
+    color: transparent;
+}
+
+.switch-off {
+    left: 0;
+}
+
+[dir=rtl] .switch-off {
+    right: 0;
+    left: auto;
+}
+
+.switch-input:checked~.switch-toggle-slider .switch-on {
+    left: 0;
+}
+
+[dir=rtl] .switch-input:checked~.switch-toggle-slider .switch-on {
+    right: 0;
+    left: auto;
+}
+
+.switch-input:checked~.switch-toggle-slider .switch-off {
+    left: 100%;
+    color: transparent;
+}
+
+[dir=rtl] .switch-input:checked~.switch-toggle-slider .switch-off {
+    right: 100%;
+    left: auto;
+}
+
+.switch-toggle-slider::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    display: block;
+    border-radius: 999px;
+    background: #fff;
+    -webkit-box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.2);
+            box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.2);
+    -webkit-transition-duration: 0.2s;
+            transition-duration: 0.2s;
+    -webkit-transition-property: left, right, background;
+    transition-property: left, right, background;
+}
+
+[dir=rtl] .switch-toggle-slider::after {
+    right: 0;
+    left: auto;
+}
+
+.switches-stacked::after {
+    display: block;
+    clear: both;
+    content: "";
+}
+
+.switches-stacked .switch {
+    display: block;
+}
+
+html:not([dir=rtl]) .switches-stacked .switch {
+    margin-right: 0;
+}
+
+[dir=rtl] .switches-stacked .switch {
+    margin-left: 0;
+}
+
+.switches-stacked .switch:not(:last-child) {
+    margin-bottom: 0.75rem;
+}
+
+.switch-square,
+.switch-square .switch-toggle-slider {
+    border-radius: 0.25rem;
+}
+
+.switch-square .switch-toggle-slider::after {
+    border-radius: calc(0.25rem - 2px);
+}
+
+.switch-input:disabled~.switch-toggle-slider {
+    opacity: 0.65;
+}
+
+.switch-input:disabled~.switch-toggle-slider::after {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-input:disabled~.switch-label {
+    color: #a8b1bb;
+}
+
+.switch-success.switch .switch-input:checked~.switch-toggle-slider {
+    background: #39da8a;
+    color: #fff;
+}
+
+.switch-success.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-success.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-info.switch .switch-input:checked~.switch-toggle-slider {
+    background: #00cfdd;
+    color: #fff;
+}
+
+.switch-info.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-info.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-warning.switch .switch-input:checked~.switch-toggle-slider {
+    background: #fdac41;
+    color: #fff;
+}
+
+.switch-warning.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-warning.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-danger.switch .switch-input:checked~.switch-toggle-slider {
+    background: #ff5b5c;
+    color: #fff;
+}
+
+.switch-danger.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-danger.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-dark.switch .switch-input:checked~.switch-toggle-slider {
+    background: #495563;
+    color: #fff;
+}
+
+.switch-dark.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-dark.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+.switch-gray.switch .switch-input:checked~.switch-toggle-slider {
+    background: rgba(38, 60, 85, 0.5);
+    color: #fff;
+}
+
+.switch-gray.switch .switch-input:active~.switch-toggle-slider {
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+
+.switch-gray.switch .switch-input:focus~.switch-toggle-slider {
+    -webkit-box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+            box-shadow: 0 0 0 0.12rem rgba(147, 158, 170, 0.3);
+}
+
+
+