@wavemaker/app-ng-runtime 12.0.0-next.141131 → 12.0.0-next.141134

app-ng-runtime/scripts/datatable/datatable.js

@@ -21,6 +21,7 @@ $.widget('wm.datatable', {
         filtermode: '',
         filteronkeypress: false,
         activeRow: undefined,
+        isrowselectable: false,
         height: '100%',
         showHeader: true,
         selectFirstRow: false,
@@ -70,7 +71,7 @@ $.widget('wm.datatable', {
         rowDef: {
             position: '0',
             closeothers: false,
-            columnwidth: '30px'
+            columnwidth: '50px'
         },
         summaryRow: false,
         summaryRowDefs: [],
@@ -120,7 +121,7 @@ $.widget('wm.datatable', {
             'style': 'text-align: center;',
             'textAlignment': 'center',
             'show': true,
-            'width': '30px'
+            'width': '50px'
         },
         'rowIndex': {
             'field': 'rowIndex',
@@ -325,7 +326,7 @@ $.widget('wm.datatable', {
             $th.addClass(headerClasses);
             /* For custom columns, show display name if provided, else don't show any label. */
             if (field === 'checkbox') {
-                $th.append('<input type="checkbox" />');
+                $th.append(self._getCheckbox());
             }
             $th.append('<span class="header-data">' + headerLabel + '</span>');
             if (sortEnabled) { //If sort info is present, show the sort icon for that column on grid render
@@ -574,16 +575,10 @@ $.widget('wm.datatable', {
             $tbody.append(rowTemplate);
             if (self.options.rowExpansionEnabled) {
                 var rowHeight = self.options.rowDef.height;
-                var rowPosition = self.options.rowDef.position;
-                var colSpanLength = _.filter(self.preparedHeaderData, function(c) {return c.show}).length - 1;
-                var $tr = $('<tr class="app-datagrid-detail-row" tabindex="0" role="row" data-row-id="' + row.$$pk + '"><td></td><td colspan="' + colSpanLength + '" class="app-datagrid-row-details-cell">' +
+                var colSpanLength = _.filter(self.preparedHeaderData, function(c) {return c.show}).length;
+                var $tr = $('<tr class="app-datagrid-detail-row" tabindex="0" role="row" data-row-id="' + row.$$pk + '"><td colspan="' + colSpanLength + '" class="app-datagrid-row-details-cell">' +
                     '<div class="row-overlay"><div class="row-status"><i class="' + self.options.loadingicon + '"></i></div></div><div class="details-section"></div>' +
                     '</td></tr>');
-                if(rowPosition === "-1"){
-                    $tr = $('<tr class="app-datagrid-detail-row" tabindex="0" role="row" data-row-id="' + row.$$pk + '"><td colspan="' + colSpanLength + '" class="app-datagrid-row-details-cell">' +
-                    '<div class="row-overlay"><div class="row-status"><i class="' + self.options.loadingicon + '"></i></div></div><div class="details-section"></div>' +
-                    '</td><td></td></tr>');
-                }
                 if (rowHeight) {
                     $tr.find('div.row-overlay').css('min-height', rowHeight);
                 }
@@ -638,15 +633,32 @@ $.widget('wm.datatable', {
     _getCheckboxTemplate: function (row, isMultiSelectCol) {
         var checked = row._checked === true ? ' checked' : '',
             disabled = row.disabed ? ' disabled' : '',
-            chkBoxName = isMultiSelectCol ? 'gridMultiSelect' : '';
-        return '<input name="' + chkBoxName + '" type="checkbox"' + checked + disabled + '/>';
+            chkBoxName = isMultiSelectCol ? 'gridMultiSelect' : '',
+            labelClass = row._checked === true ? '' : 'unchecked';
+
+        return this._getCheckbox(labelClass, chkBoxName, checked, disabled);
+    },
+
+    /* Return checkbox literal */
+    _getCheckbox: function (labelClass = '', chkBoxName = '', checked = '', disabled = '') {
+        return `<div class="app-checkbox checkbox">
+        <label class="${labelClass}">
+            <input type="checkbox" name="${chkBoxName}" ${checked} ${disabled} role="checkbox">
+            <span class="caption"></span>
+        </label>
+    </div>`
     },
 
     /* Returns the radio template. */
     _getRadioTemplate: function (row) {
         var checked = row._checked === true ? ' checked' : '',
             disabled = row.disabed ? ' disabled' : '';
-        return '<input type="radio" rowSelectInput name="" value=""' + checked + disabled + '/>';
+        return `<div class="radio app-radio">
+            <label>
+                <input type="radio" rowSelectInput name="" value="" ${checked} ${disabled}>
+                <span class="caption"></span>
+            </label>
+        </div>`;
     },
 
     /* Returns the table cell template. */
@@ -722,7 +734,7 @@ $.widget('wm.datatable', {
             }
         }
         row.$index = rowIndex + 1;
-        this.options.registerColNgClassWatcher(row, colDef, rowIndex, colId);
+        this.options.registerColNgClassWatcher(row, colDef, rowIndex, colId, summaryRow);
         return $htm;
     },
     //Get event related template for editable widget
@@ -1501,6 +1513,7 @@ $.widget('wm.datatable', {
                 }
             case 'multiselect': // Fallthrough
             case 'showRadioColumn':
+            case 'isrowselectable' :
             case 'rowActions':
             case 'filterNullRecords':
             case 'showRowIndex':
@@ -1664,8 +1677,16 @@ $.widget('wm.datatable', {
     // triggered on capture phase of click listener.
     // sets the selected rowdata on click.
     rowClickHandlerOnCapture: function (e, $row, options) {
-        if(this.getColInfo(e) && (e.target.type != 'checkbox' && e.target.type != 'radio')) {
-            return;
+        // If 'isrowselectable' property is enabled, clicking anywhere on the row will trigger its selection. Otherwise, the row will not be selected on click.
+        // Also this flag works if mutliselect or radioselect is enabled.
+        // In quick edit mode, clicking any part of the row switches it to edit mode, regardless of the flag setting.
+        if (this.options.editmode !== this.CONSTANTS.QUICK_EDIT) {
+            if ((this.options.multiselect || this.options.showRadioColumn) && !this.options.isrowselectable) {
+                if (Number(this.getColInfo(e))) {
+                    e.stopPropagation();
+                    return;
+                }
+            }
         }
         $row = $row || $(e.target).closest('tr.app-datagrid-row');
         var gridRow = this.gridElement.find($row);
@@ -1680,8 +1701,16 @@ $.widget('wm.datatable', {
 
     /* Handles row selection. */
     rowSelectionHandler: function (e, $row, options) {
-        if(this.getColInfo(e) && (e.target.type != 'checkbox' && e.target.type != 'radio')) {
-            return;
+        // If 'isrowselectable' property is enabled, clicking anywhere on the row will trigger its selection. Otherwise, the row will not be selected on click.
+        // Also this flag works if mutliselect or radioselect is enabled.
+        // In quick edit mode, clicking any part of the row switches it to edit mode, regardless of the flag setting.
+        if (this.options.editmode !== this.CONSTANTS.QUICK_EDIT) {
+            if ((this.options.multiselect || this.options.showRadioColumn) && !this.options.isrowselectable) {
+                if (Number(this.getColInfo(e))) {
+                    e.stopPropagation();
+                    return;
+                }
+            }
         }
         options = options || {};
         var rowId,
@@ -2694,14 +2723,9 @@ $.widget('wm.datatable', {
         return false;
     },
     getColInfo: function(event) {
-        var row =  $(event.target).closest('tr.app-datagrid-row');
-        var rowId = row.attr('data-row-id');
         var column = $(event.target).closest('td.app-datagrid-cell');
         var colId = column.attr('data-col-id');
-        if(this.columnClickInfo && this.columnClickInfo[rowId] && this.columnClickInfo[rowId][colId]) {
-            return this.columnClickInfo[rowId][colId];
-        }
-        return false;
+        return colId;
     },
     /* Attaches all event handlers for the table. */
     attachEventHandlers: function ($htm) {
@@ -2715,22 +2739,6 @@ $.widget('wm.datatable', {
             // add js click handler for capture phase in order to first listen on grid and
             // assign selectedItems so that any child actions can have access to the selectedItems.
             $htm.on('click', this.rowSelectionHandler.bind(this));
-            $htm.on("click", "td *", function(event) {
-
-                // Prevent propagation to parent elements
-                if(event.target.type != 'checkbox'){
-                    var row =  $(event.target).closest('tr.app-datagrid-row');
-                    var rowId = row.attr('data-row-id');
-                    var column = $(event.target).closest('td.app-datagrid-cell');
-                    var colId = column.attr('data-col-id');
-                    var id = Number(colId);
-                    var colDefination = self.preparedHeaderData[id];
-                    if (colDefination.readonly && colDefination.field !== 'rowOperations') {
-                        self.columnClickInfo[rowId] = {};
-                        self.columnClickInfo[rowId][colId] = true;
-                    }
-                }
-            });
             $htm.on('dblclick', this.rowDblClickHandler.bind(this));
             $htm.on('keydown', this.onKeyDown.bind(this));
         }
@@ -2835,6 +2843,9 @@ $.widget('wm.datatable', {
     collapseRow: function(rowId) {
         this.toggleExpandRow(rowId, false)
     },
+    hasAllClasses: function (element, classNames) { // function to check if all the class names are present in the element
+        return classNames && classNames.every(cls => element.hasClass(cls));
+    },
     _collapseRow: function(e, rowData, rowId, $nextDetailRow, $icon) {
         var self = this,
             $tbody = self.gridElement,
@@ -2844,7 +2855,7 @@ $.widget('wm.datatable', {
         if (this.options.onBeforeRowCollapse(e, rowData, rowId) === false) {
             return;
         }
-        if ($icon.length && $icon.hasClass(this.options.cssClassNames.rowExpandIcon)) {
+        if ($icon.length && this.hasAllClasses($icon, this.options.cssClassNames.rowExpandIcon?.split(' '))) {
             $icon.removeClass(this.options.cssClassNames.rowExpandIcon).addClass(this.options.cssClassNames.rowCollapseIcon);
         }
         $nextDetailRow.hide();
@@ -2884,7 +2895,7 @@ $.widget('wm.datatable', {
             }
             self.options.generateRowDetailView(e, rowData, rowId, $nextDetailRow.find('td.app-datagrid-row-details-cell .details-section'),
                 $nextDetailRow.find('td.app-datagrid-row-details-cell .row-overlay'), function () {
-                    if ($icon.length && $icon.hasClass(self.options.cssClassNames.rowCollapseIcon)) {
+                    if ($icon.length && self.hasAllClasses($icon, self.options.cssClassNames.rowCollapseIcon?.split(' '))) {
                         $icon.removeClass(self.options.cssClassNames.rowCollapseIcon).addClass(self.options.cssClassNames.rowExpandIcon);
                     }
                     $nextDetailRow.show();