@dile/crud 2.7.1 → 2.7.2

package/components/crud/crud.spec.js

@@ -132,3 +132,145 @@ describe('dile-crud initial filters', () => {
     expect(select.value).toBe('');
   });
 });
+
+describe('dile-crud sort synchronization', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('syncs dile-crud-sort-form when the list sort changes (e.g. from a DataGrid column header)', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: false,
+        disableFilter: true,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      sort: {
+        options: [
+          { name: 'name', label: 'Name', direction: 'asc' },
+        ],
+        initialSortField: null,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await Promise.resolve();
+
+    expect(el.sortFormElement).toBeTruthy();
+
+    el.listElement.setSort({ sortField: 'name', sortDirection: 'desc' });
+    await el.updateComplete;
+
+    expect(el.sortFormElement.sortField).toBe('name');
+    expect(el.sortFormElement.sortDirection).toBe('desc');
+  });
+
+  it('ignores a grid sort field that is not listed in config.sort.options instead of crashing the sort-form', async () => {
+    // Reproduces a DataGrid column marked `sortable: true` for a field (e.g. "continent")
+    // that has no corresponding entry in config.sort.options.
+    const config = new CrudConfigBuilder('https://example.test/api/countries', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: false,
+        disableFilter: true,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      grid: {
+        columns: [
+          { field: 'name', header: 'Name', sortable: true },
+          { field: 'continent', header: 'Continent', sortable: true },
+        ],
+      },
+      sort: {
+        options: [
+          { name: 'name', label: 'Name', direction: 'asc' },
+        ],
+        initialSortField: 'name',
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await Promise.resolve();
+
+    const initialSortField = el.sortFormElement.sortField;
+
+    expect(() => {
+      el.listElement.dispatchEvent(new CustomEvent('crud-list-sort-changed', {
+        bubbles: true,
+        composed: true,
+        detail: { sortField: 'continent', sortDirection: 'asc' },
+      }));
+    }).not.toThrow();
+    await el.updateComplete;
+
+    // The sort-form's selection is left untouched rather than pointed at an unknown option.
+    expect(el.sortFormElement.sortField).toBe(initialSortField);
+  });
+
+  it('does not let the sort-form echo override a grid-driven sort with the field static configured default direction', async () => {
+    // "year" is configured with a static default direction of "desc". A DataGrid column
+    // header click always starts at "asc" on first click — reproduces the exact scenario
+    // where the sort silently snapped back to "desc" and repeated clicks appeared to
+    // "lose" the requested order.
+    const config = new CrudConfigBuilder('https://example.test/api/board-games', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: false,
+        disableFilter: true,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      grid: {
+        columns: [
+          { field: 'year', header: 'Year', sortable: true },
+        ],
+      },
+      sort: {
+        options: [
+          { name: 'year', label: 'Year', direction: 'desc' },
+        ],
+        initialSortField: 'year',
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await Promise.resolve();
+
+    let lastSetSort = null;
+    el.listElement.setSort = (sortObj) => {
+      lastSetSort = sortObj;
+    };
+
+    // Simulate what DileCrudList.setSort() dispatches after a grid header click requesting "asc".
+    el.listElement.dispatchEvent(new CustomEvent('crud-list-sort-changed', {
+      bubbles: true,
+      composed: true,
+      detail: { sortField: 'year', sortDirection: 'asc' },
+    }));
+    await el.updateComplete;
+    await new Promise((resolve) => setTimeout(resolve, 0)); // flush any echo microtasks
+
+    expect(el.sortFormElement.sortField).toBe('year');
+    expect(el.sortFormElement.sortDirection).toBe('asc');
+    // The echo must not have triggered a second, corrupting setSort() call.
+    expect(lastSetSort).toBeNull();
+  });
+});

package/components/crud/src/DileCrud.js

@@ -124,6 +124,9 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
     get filtersElement() {
         return this.shadowRoot.getElementById('elfilters');
     }
+    get sortFormElement() {
+        return this.shadowRoot.getElementById('elsort');
+    }
 
     // TEMPLATES
 
@@ -145,6 +148,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                     @item-checkbox-changed=${this.itemCheckboxChanged}
                     @dile-chip-icon-click=${this.removeFilter}
                     @crud-list-all-ids-selected=${this.crudSelectAll}
+                    @crud-list-sort-changed=${this.listSortChanged}
                 >
                     ${this.listTemplate}
                 </div>
@@ -265,14 +269,15 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                         ${this.config.customization.disableSort
                             ? ''
                             : html`
-                                <dile-crud-sort-form 
+                                <dile-crud-sort-form
+                                    id="elsort"
                                     class="action-controller"
-                                    .sortOptions=${this.config.sort.options || []} 
+                                    .sortOptions=${this.config.sort.options || []}
                                     sortField="${this.config.sort.initialSortField}"
                                     sortDirection="${this.config.sort.initialSortDirection || 'desc'}"
                                     @sort-changed=${this.sortFormChanged}
                                     language="${this.language}"
-                                ></dile-crud-sort-form>  
+                                ></dile-crud-sort-form>
                             `
                         }
                     </div>   
@@ -343,6 +348,21 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         this.listElement.setSort(e.detail);
     }
 
+    listSortChanged(e) {
+        if (!this.sortFormElement) {
+            return;
+        }
+        const sortField = e.detail?.sortField;
+        const isKnownSortOption = !sortField || (this.config.sort?.options || []).some(option => option.name === sortField);
+        if (!isKnownSortOption) {
+            // The sort came from a source the sort-form doesn't know about (e.g. a DataGrid
+            // column not listed in config.sort.options) — leave the form's selection as-is
+            // instead of pointing it at an option it can't render.
+            return;
+        }
+        this.sortFormElement.syncSort(sortField, e.detail?.sortDirection);
+    }
+
     pageSizeChanged(e) {
         this.listElement.setPageSize(e.detail.pageSize);
     }

package/components/list/crud-data-grid.spec.js

@@ -24,6 +24,9 @@ describe('dile-crud-data-grid', () => {
     el.config = config;
     el.items = props.items ?? sampleItems;
     el.selectedIds = props.selectedIds ?? [];
+    if (props.sort !== undefined) {
+      el.sort = props.sort;
+    }
     document.body.appendChild(el);
     await el.updateComplete;
     return el;
@@ -147,6 +150,18 @@ describe('dile-crud-data-grid', () => {
     expect(innerGrid(el).sortMode).toBe('external');
   });
 
+  it('forwards the sort property as sortField/sortDirection so the header keeps its sorted state', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } }, { sort: { sortField: 'name', sortDirection: 'desc' } });
+    expect(innerGrid(el).sortField).toBe('name');
+    expect(innerGrid(el).sortDirection).toBe('desc');
+  });
+
+  it('defaults sortField/sortDirection to empty strings when sort is not set', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+    expect(innerGrid(el).sortField).toBe('');
+    expect(innerGrid(el).sortDirection).toBe('');
+  });
+
   it('wires computeRowId from config.computeItemId so selection matches custom ids', async () => {
     const el = await createGrid(
       {

package/components/list/crud-list.spec.js

@@ -52,6 +52,7 @@ describe('dile-crud-list grid template integration', () => {
     el.disableLoadOnStart = true;
     el.config = config;
     el.elements = sampleElements;
+    el.sort = { sortField: 'name', sortDirection: 'desc' };
     el.loading = false;
     document.body.appendChild(el);
     await el.updateComplete;
@@ -64,6 +65,7 @@ describe('dile-crud-list grid template integration', () => {
     expect(crudDataGrid.items).toEqual(sampleElements);
     expect(crudDataGrid.columns.length).toBe(3); // id, name + automatically injected Actions
     expect(crudDataGrid.columns[2].header).toBe('Actions');
+    expect(crudDataGrid.sort).toEqual({ sortField: 'name', sortDirection: 'desc' });
   });
 
   it('hides actions in traditional list items when disableListActions is true', async () => {
@@ -96,12 +98,14 @@ describe('dile-crud-list grid template integration', () => {
   it('renders custom grid template when templates.grid is configured', async () => {
     let receivedElements = null;
     let receivedActionIds = null;
+    let receivedSort = null;
 
     const config = new CrudConfigBuilder('https://example.test/api/customers', {
       templates: {
-        grid: (elements, actionIds) => {
+        grid: (elements, actionIds, config, sort) => {
           receivedElements = elements;
           receivedActionIds = actionIds;
+          receivedSort = sort;
           return html`
             <dile-data-grid
               .items="${elements}"
@@ -122,6 +126,7 @@ describe('dile-crud-list grid template integration', () => {
     el.config = config;
     el.elements = sampleElements;
     el.actionIds = [2];
+    el.sort = { sortField: 'name', sortDirection: 'asc' };
     el.loading = false;
     document.body.appendChild(el);
     await el.updateComplete;
@@ -136,6 +141,7 @@ describe('dile-crud-list grid template integration', () => {
     expect(dataGrid).toBeTruthy();
     expect(receivedElements).toEqual(sampleElements);
     expect(receivedActionIds).toEqual([2]);
+    expect(receivedSort).toEqual({ sortField: 'name', sortDirection: 'asc' });
   });
 
   it('updates sort when dile-data-grid-sort is dispatched', async () => {
@@ -252,4 +258,62 @@ describe('dile-crud-list grid template integration', () => {
     expect(el.shadowRoot.querySelector('dile-crud-data-grid')).toBeNull();
     expect(el.shadowRoot.querySelector('dile-data-grid')).toBeTruthy();
   });
+
+  it('dispatches crud-list-sort-changed with the new sort whenever setSort is called', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: { columns: [{ field: 'name', header: 'Name', sortable: true }] },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    let receivedDetail = null;
+    el.addEventListener('crud-list-sort-changed', (e) => {
+      receivedDetail = e.detail;
+    });
+
+    el.setSort({ sortField: 'name', sortDirection: 'desc' });
+
+    expect(receivedDetail).toEqual({ sortField: 'name', sortDirection: 'desc' });
+  });
+
+  it('keeps reporting the correct sort state to a freshly remounted grid after a loading round-trip', async () => {
+    // Reproduces the real scenario: setSort() sets loading=true, which unmounts
+    // elementsTemplate (and therefore <dile-crud-data-grid>/<dile-data-grid>) while
+    // the request is in flight, then getSuccess() remounts it from scratch.
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: { columns: [{ field: 'name', header: 'Name', sortable: true }] },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    el.elements = sampleElements;
+    el.loading = false;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    el.elservice.setSort = () => {}; // avoid a real network round-trip
+    el.setSort({ sortField: 'name', sortDirection: 'asc' });
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.grid-container')).toBeNull(); // unmounted while loading
+
+    el.getSuccess({ detail: { elements: sampleElements, numItems: 2, paginationData: {} } });
+    await el.updateComplete;
+
+    const freshDataGrid = el.shadowRoot.querySelector('dile-crud-data-grid');
+    expect(freshDataGrid).toBeTruthy();
+    expect(freshDataGrid.sort).toEqual({ sortField: 'name', sortDirection: 'asc' });
+
+    const innerGrid = freshDataGrid.shadowRoot.querySelector('dile-data-grid');
+    await innerGrid.updateComplete;
+    expect(innerGrid.sortField).toBe('name');
+    expect(innerGrid.sortDirection).toBe('asc');
+  });
 });

package/components/list/src/DileCrudDataGrid.js

@@ -17,6 +17,7 @@ export class DileCrudDataGrid extends LitElement {
       items: { type: Array },
       selectedIds: { type: Array },
       config: { type: Object },
+      sort: { type: Object },
     };
   }
 
@@ -25,6 +26,7 @@ export class DileCrudDataGrid extends LitElement {
     this.items = [];
     this.selectedIds = [];
     this.config = null;
+    this.sort = null;
   }
 
   get columns() {
@@ -77,6 +79,8 @@ export class DileCrudDataGrid extends LitElement {
         .selectedIds=${this.selectedIds}
         .computeRowId=${this.computeRowId}
         .rowClass=${this.rowClass}
+        .sortField=${this.sort?.sortField || ''}
+        .sortDirection=${this.sort?.sortDirection || ''}
         ?selectable=${gridConfig.selectable !== undefined ? gridConfig.selectable : !this.config?.customization?.hideCheckboxSelection}
         ?sticky-first-column=${gridConfig.stickyFirstColumn !== undefined ? gridConfig.stickyFirstColumn : true}
         ?striped=${gridConfig.striped !== undefined ? gridConfig.striped : true}

package/components/list/src/DileCrudList.js

@@ -257,7 +257,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                     @item-checkbox-changed=${this.onItemsCheckboxChanged}
                     @dile-data-grid-sort=${this.onGridSort}
                 >
-                    ${this.config.templates.grid(this.elements, this.actionIds, this.config)}
+                    ${this.config.templates.grid(this.elements, this.actionIds, this.config, this.sort)}
                 </div>
             `;
         }
@@ -272,6 +272,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                         .items=${this.elements}
                         .selectedIds=${this.actionIds}
                         .config=${this.config}
+                        .sort=${this.sort}
                     ></dile-crud-data-grid>
                 </div>
             `;
@@ -377,7 +378,12 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.loading = true;
         this.sort = sortObject;
         this.elservice.setSort(sortObject);
-    }  
+        this.dispatchEvent(new CustomEvent('crud-list-sort-changed', {
+            bubbles: true,
+            composed: true,
+            detail: sortObject,
+        }));
+    }
 
     onGridSort(e) {
         if (e.detail?.field) {

package/components/ui/crud-sort-form.spec.js

@@ -0,0 +1,132 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './crud-sort-form.js';
+
+describe('dile-crud-sort-form', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sortOptions = [
+    { name: 'name', label: 'Name', direction: 'asc' },
+    { name: 'id', label: 'Id', direction: 'asc' },
+  ];
+
+  async function createSortForm(props = {}) {
+    const el = document.createElement('dile-crud-sort-form');
+    el.sortOptions = props.sortOptions ?? sortOptions;
+    if (props.sortField !== undefined) {
+      el.sortField = props.sortField;
+    }
+    document.body.appendChild(el);
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders one radio/order-switch pair per configured sort option', async () => {
+    const el = await createSortForm();
+    expect(el.shadowRoot.querySelectorAll('dile-radio').length).toBe(2);
+    expect(el.shadowRoot.querySelectorAll('dile-order-switch').length).toBe(2);
+  });
+
+  it('getDirection returns the configured direction for a known field', async () => {
+    const el = await createSortForm();
+    await el.shadowRoot.querySelector('dile-order-switch[name="name"]').updateComplete;
+    expect(el.getDirection('name')).toBe('asc');
+  });
+
+  it('getDirection returns undefined instead of throwing for a field with no matching order-switch', async () => {
+    // Reproduces a DataGrid column marked sortable whose field isn't listed in config.sort.options.
+    const el = await createSortForm();
+    expect(() => el.getDirection('continent')).not.toThrow();
+    expect(el.getDirection('continent')).toBeUndefined();
+  });
+
+  it('getDirection returns undefined for a falsy field without touching the DOM', async () => {
+    const el = await createSortForm();
+    expect(el.getDirection(null)).toBeUndefined();
+    expect(el.getDirection('')).toBeUndefined();
+  });
+
+  // "year" has a static configured direction of "desc" so it can expose the regression:
+  // syncing an "asc" sort must not get silently corrected back to "desc".
+  const yearOptions = [{ name: 'year', label: 'Year', direction: 'desc' }];
+
+  it('syncSort reflects an externally-applied sort without re-dispatching sort-changed', async () => {
+    const el = await createSortForm({ sortOptions: yearOptions });
+
+    let dispatchCount = 0;
+    el.addEventListener('sort-changed', () => { dispatchCount++; });
+
+    el.syncSort('year', 'asc');
+    await el.updateComplete;
+
+    expect(el.sortField).toBe('year');
+    expect(el.sortDirection).toBe('asc');
+    expect(dispatchCount).toBe(0);
+  });
+
+  it('a genuine radio-group selection (not preceded by syncSort) still defaults to the option configured direction', async () => {
+    const el = await createSortForm({ sortOptions: yearOptions });
+
+    let receivedDetail = null;
+    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
+
+    const radioGroup = el.shadowRoot.querySelector('dile-radio-group');
+    radioGroup.dispatchEvent(new CustomEvent('dile-radio-group-changed', {
+      detail: { name: 'selector', value: 'year' },
+    }));
+    await el.updateComplete;
+
+    expect(el.sortField).toBe('year');
+    expect(el.sortDirection).toBe('desc');
+    expect(receivedDetail).toEqual({ sortField: 'year', sortDirection: 'desc' });
+  });
+
+  it('clicking the label of an inactive option switches to it using its own configured direction, without flipping it', async () => {
+    const el = await createSortForm({
+      sortOptions: [
+        { name: 'name', label: 'Name', direction: 'asc' },
+        { name: 'year', label: 'Year', direction: 'desc' },
+      ],
+      sortField: 'name',
+    });
+    el.sortDirection = 'asc';
+    await el.updateComplete;
+
+    let receivedDetail = null;
+    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-order-switch[name="year"]').shadowRoot.querySelector('span').click();
+    await el.updateComplete;
+
+    expect(el.sortField).toBe('year');
+    expect(el.sortDirection).toBe('desc'); // year's own configured default, not flipped
+    expect(receivedDetail).toEqual({ sortField: 'year', sortDirection: 'desc' });
+  });
+
+  it('clicking the label of the already-active option toggles its direction instead of doing nothing', async () => {
+    // Reproduces the reported confusion: clicking "Name" again while already sorted by
+    // name silently did nothing, because the label always re-announced the same value.
+    const el = await createSortForm({
+      sortOptions: [{ name: 'name', label: 'Name', direction: 'asc' }],
+      sortField: 'name',
+    });
+    el.sortDirection = 'asc';
+    await el.updateComplete;
+
+    let receivedDetail = null;
+    el.addEventListener('sort-changed', (e) => { receivedDetail = e.detail; });
+
+    const label = () => el.shadowRoot.querySelector('dile-order-switch[name="name"]').shadowRoot.querySelector('span');
+
+    label().click();
+    await el.updateComplete;
+    expect(el.sortField).toBe('name');
+    expect(el.sortDirection).toBe('desc'); // toggled, not a no-op
+    expect(receivedDetail).toEqual({ sortField: 'name', sortDirection: 'desc' });
+
+    label().click();
+    await el.updateComplete;
+    expect(el.sortDirection).toBe('asc'); // toggles back on a second click
+  });
+});

package/components/ui/src/DileCrudSortForm.js

@@ -45,6 +45,19 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
   constructor() {
     super();
     this.sortOptions = [];
+    this._suppressChangeEcho = false;
+  }
+
+  // Reflects a sort that was already applied elsewhere (e.g. a DataGrid column header
+  // click) without re-dispatching sort-changed. Setting `sortField` below causes the
+  // inner <dile-radio-group> to echo a "changed" event on its own (it can't tell a
+  // programmatic update from a user click), which radioGroupChanged() would otherwise
+  // treat as a real selection and re-derive sortDirection from the option's *static*
+  // configured default — silently overriding whichever direction was actually requested.
+  syncSort(sortField, sortDirection) {
+    this._suppressChangeEcho = true;
+    this.sortField = sortField;
+    this.sortDirection = sortDirection;
   }
 
   render() {
@@ -63,10 +76,11 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
                             ?checked=${this.sortField === option.name}
                             value="${option.name}"
                         ></dile-radio>
-                        <dile-order-switch 
-                            label="${option.label}" 
-                            name="${option.name}" 
-                            value="${option.direction}" 
+                        <dile-order-switch
+                            label="${option.label}"
+                            name="${option.name}"
+                            value="${option.direction}"
+                            ?selected=${this.sortField === option.name}
                             @element-changed=${this.elementChanged}
                         ></dile-order-switch>
                     </div>
@@ -83,6 +97,10 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
   }
 
   radioGroupChanged(e) {
+    if (this._suppressChangeEcho) {
+      this._suppressChangeEcho = false;
+      return;
+    }
     this.sortField = e.detail.value;
     this.sortDirection = this.getDirection(this.sortField);
     this.dispatchChanged();
@@ -90,7 +108,8 @@ export class DileCrudSortForm extends DileI18nMixin(LitElement) {
 
   getDirection(field) {
     if(field) {
-      return this.shadowRoot.querySelector(`dile-order-switch[name="${field}"]`).value;
+      const orderSwitch = this.shadowRoot.querySelector(`dile-order-switch[name="${field}"]`);
+      return orderSwitch ? orderSwitch.value : undefined;
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -25,12 +25,12 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.12.1",
+    "@dile/ui": "^3.12.2",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "add1124d218762f20cd86bd72bb04562541f9833"
+  "gitHead": "27dbd2411bd5856021209c49da6aed285c3fae28"
 }