Merge pull request #31 from eviltester/28-add-playwright-coverage-to-apphtml-but-more-control-over-ai

28 add playwright coverage to apphtml but more control over ai

Author: eviltester

packages/core-ui/js/gui_components/data-grid-editor/ag-grid/gridExtension-ag-grid.js

@@ -34,6 +34,19 @@ class GridExtensionAgGrid {
     this.gridApi.setFilterModel(null);
   }
 
+  clearSort() {
+    if (typeof this.gridApi.applyColumnState === 'function') {
+      this.gridApi.applyColumnState({
+        defaultState: { sort: null },
+      });
+      return;
+    }
+
+    if (typeof this.gridApi.setSortModel === 'function') {
+      this.gridApi.setSortModel(null);
+    }
+  }
+
   filterText(text) {
     this.gridApi.setGridOption('quickFilterText', text);
   }

packages/core-ui/js/gui_components/data-grid-editor/gridControl.js

@@ -5,6 +5,7 @@ class GridControlsPageMap {
     this.addRowsBelowButtonQuery = '#addRowsBelowButton';
     this.deleteSelectedRowsButtonQuery = '#deleteSelectedRowsButton';
     this.clearFiltersButtonQuery = '#clearFiltersButton';
+    this.clearSortButtonQuery = '#clearSortButton';
     this.filtersTextBoxQuery = '#filter-text-box';
     this.clearTableButtonQuery = '#clearTableButton';
   }
@@ -27,6 +28,7 @@ class GridControl {
             <button id="deleteSelectedRowsButton">Delete Selected Rows</button>
             <label>Filter: <input type="text" id="filter-text-box" placeholder="Filter..."></label>
             <button id="clearFiltersButton" title="Clear Filters">Clear Filters</button>
+            <button id="clearSortButton" title="Clear Sort">Clear Sort</button>
             <button id="clearTableButton" title="Clear All Data">Reset Table</button>
         </div>
         <!-- ag-theme-alpine -->
@@ -71,6 +73,12 @@ class GridControl {
     let clearFiltersListener = this.clearFilters.bind(this);
     element.addEventListener('click', clearFiltersListener, false);
 
+    element = container.querySelector(this.pageMap.clearSortButtonQuery);
+    if (element) {
+      const clearSortListener = this.clearSort.bind(this);
+      element.addEventListener('click', clearSortListener, false);
+    }
+
     element = container.querySelector(this.pageMap.filtersTextBoxQuery);
     let filterTextListener = this.filterTextBoxChanged.bind(this);
     element.addEventListener('input', filterTextListener, false);
@@ -104,6 +112,12 @@ class GridControl {
     this.gridExtras.clearFilters();
   }
 
+  clearSort() {
+    if (typeof this.gridExtras.clearSort === 'function') {
+      this.gridExtras.clearSort();
+    }
+  }
+
   filterTextBoxChanged() {
     this.gridExtras.filterText(document.getElementById('filter-text-box').value);
   }

packages/core-ui/js/gui_components/data-grid-editor/tabulator/gridExtension-tabulator.js

@@ -41,6 +41,12 @@ class GridExtensionTabulator {
     this.tabulator.clearFilter(true);
   }
 
+  clearSort() {
+    if (typeof this.tabulator.clearSort === 'function') {
+      this.tabulator.clearSort();
+    }
+  }
+
   // [x] convert to tabulature
   filterText(text) {
     this.tabUtils.filterAcrossAllColumns(text);
@@ -106,7 +112,7 @@ class GridExtensionTabulator {
   }
 
   // [x] convert to tabulature
-  duplicateColumn(position, columnOrId, colTitle) {
+  async duplicateColumn(position, columnOrId, colTitle) {
     const column = this._resolveColumn(columnOrId);
     if (!column) {
       return;
@@ -117,7 +123,7 @@ class GridExtensionTabulator {
       return;
     }
 
-    this._copyColumnData(column.getDefinition().field, destinationCol.field);
+    await this._copyColumnData(column.getDefinition().field, destinationCol.field);
   }
 
   appendColumnToGrid(colTitle) {
@@ -572,28 +578,28 @@ class GridExtensionTabulator {
     }
   }
 
-  _copyColumnData(sourceFieldName, destinationFieldName) {
-    const allData = typeof this.tabulator.getData === 'function' ? this.tabulator.getData() : null;
-    const canUseBulkDataPath = Array.isArray(allData) && typeof this.tabulator.redraw === 'function';
-
-    if (canUseBulkDataPath) {
+  async _copyColumnData(sourceFieldName, destinationFieldName) {
+    const rowComponents = typeof this.tabulator.getRows === 'function' ? this.tabulator.getRows() : null;
+    if (Array.isArray(rowComponents) && rowComponents.length > 0) {
+      const updates = [];
       this._runWithoutRedraw(() => {
-        for (let rowIndex = 0; rowIndex < allData.length; rowIndex++) {
-          const rowData = allData[rowIndex];
-          rowData[destinationFieldName] = rowData[sourceFieldName];
-        }
+        rowComponents.forEach((row) => {
+          const sourceValue = row.getData?.()[sourceFieldName];
+          updates.push(Promise.resolve(row.update({ [destinationFieldName]: sourceValue })));
+        });
       });
-      this.tabulator.redraw(true);
+      await Promise.all(updates);
       return;
     }
 
-    this._runWithoutRedraw(() => {
-      this.tabulator.getRows().forEach((row) => {
-        let obj = {};
-        obj[destinationFieldName] = row.getData()[sourceFieldName];
-        row.update(obj);
-      });
-    });
+    const allData = typeof this.tabulator.getData === 'function' ? this.tabulator.getData() : null;
+    if (Array.isArray(allData) && allData.length > 0) {
+      const updatedRows = allData.map((rowData) => ({
+        ...rowData,
+        [destinationFieldName]: rowData[sourceFieldName],
+      }));
+      await Promise.resolve(this._setBulkData(updatedRows));
+    }
   }
 
   _enqueueGridMutation(mutationFn) {

packages/core-ui/js/gui_components/data-grid-editor/tabulator/main-display-grid.js

@@ -43,13 +43,13 @@ class ExtendedDataGrid {
                         <div class="customHeaderLabel">${escapeHtml(columnName)}</div>
                         <div class="customSort">
                             <span class="customSortDownLabel" data-action="sort-desc" title="Sort Desc">
-                                <i class="ag-icon ag-icon-desc"></i>
+                                ↓
                             </span>
                             <span class="customSortUpLabel" data-action="sort-asc" title="Sort Asc">
-                                <i class="ag-icon ag-icon-asc"></i>
+                                ↑
                             </span>
                             <span class="customSortRemoveLabel" data-action="sort-none" title="Clear Sort">
-                                <i class="ag-icon ag-icon-cancel"></i>
+                                ×
                             </span>
                         </div>
                     </div>
@@ -65,7 +65,9 @@ class ExtendedDataGrid {
     };
 
     const onCustomHeaderClick = function (e, column) {
-      const action = e?.target?.dataset?.action;
+      const targetElement = e?.target && typeof e.target.closest === 'function' ? e.target : null;
+      const actionElement = targetElement?.closest?.('[data-action]');
+      const action = actionElement?.dataset?.action;
       if (!action) {
         return;
       }
@@ -146,6 +148,8 @@ class ExtendedDataGrid {
       // not from inferred object keys during setData/import.
       autoColumns: false,
       headerSort: true,
+      // Prevent accidental table re-order when clicking non-sort controls in custom headers.
+      headerSortClickElement: 'icon',
 
       movableColumns: true,