@dile/crud 2.6.4 → 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.js

@@ -0,0 +1,5 @@
+import { DileCrudDataGrid } from './src/DileCrudDataGrid.js';
+
+if (!customElements.get('dile-crud-data-grid')) {
+  customElements.define('dile-crud-data-grid', DileCrudDataGrid);
+}

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

@@ -0,0 +1,207 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import './crud-data-grid.js';
+import '@dile/ui/components/data-grid/data-grid.js';
+
+describe('dile-crud-data-grid', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sampleColumns = [
+    { field: 'id', header: 'ID' },
+    { field: 'name', header: 'Name' },
+  ];
+
+  const sampleItems = [
+    { id: 1, name: 'Item A' },
+    { id: 2, name: 'Item B', deleted_at: '2026-01-01' },
+  ];
+
+  async function createGrid(customConfig = {}, props = {}) {
+    const config = new CrudConfigBuilder('https://example.test/api/items', customConfig).getConfig();
+    const el = document.createElement('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;
+  }
+
+  function innerGrid(el) {
+    return el.shadowRoot.querySelector('dile-data-grid');
+  }
+
+  it('builds columns from config.grid.columns and auto-appends an Actions column by default', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+
+    expect(el.columns.length).toBe(3);
+    expect(el.columns[0]).toEqual(sampleColumns[0]);
+    expect(el.columns[1]).toEqual(sampleColumns[1]);
+    expect(el.columns[2].header).toBe('Actions');
+    expect(el.columns[2].align).toBe('right');
+    expect(el.columns[2].width).toBe('110px');
+    expect(el.columns[2].hideCardLabel).toBe(true);
+  });
+
+  it('does not append an Actions column when config.grid.hideActionsColumn is true', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns, hideActionsColumn: true } });
+
+    expect(el.columns.length).toBe(2);
+  });
+
+  it('does not append an Actions column when actions are globally disabled', async () => {
+    const el = await createGrid({
+      grid: { columns: sampleColumns },
+      customization: { disableListActions: true },
+    });
+
+    expect(el.columns.length).toBe(2);
+  });
+
+  it('honors actionsColumnHeader, actionsColumnWidth and actionsColumnAlign overrides', async () => {
+    const el = await createGrid({
+      grid: {
+        columns: sampleColumns,
+        actionsColumnHeader: 'Ops',
+        actionsColumnWidth: '150px',
+        actionsColumnAlign: 'center',
+      },
+    });
+
+    const actionsColumn = el.columns[el.columns.length - 1];
+    expect(actionsColumn.header).toBe('Ops');
+    expect(actionsColumn.width).toBe('150px');
+    expect(actionsColumn.align).toBe('center');
+  });
+
+  it('falls back to config.labels.actionsHeader when grid.actionsColumnHeader is not set', async () => {
+    const el = await createGrid({
+      grid: { columns: sampleColumns },
+      labels: { actionsHeader: 'Manage' },
+    });
+
+    const actionsColumn = el.columns[el.columns.length - 1];
+    expect(actionsColumn.header).toBe('Manage');
+  });
+
+  it('renders dile-crud-item-actions in the Actions column wired with .item and .config', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+
+    const grid = innerGrid(el);
+    const actionsElements = grid.shadowRoot.querySelectorAll('dile-crud-item-actions');
+    expect(actionsElements.length).toBe(sampleItems.length);
+    expect(actionsElements[0].item).toEqual(sampleItems[0]);
+    expect(actionsElements[0].config).toBe(el.config);
+  });
+
+  it('derives selectable from !config.customization.hideCheckboxSelection by default', async () => {
+    const elHidden = await createGrid({ grid: { columns: sampleColumns }, customization: { hideCheckboxSelection: true } });
+    expect(innerGrid(elHidden).selectable).toBe(false);
+
+    const elShown = await createGrid({ grid: { columns: sampleColumns }, customization: { hideCheckboxSelection: false } });
+    expect(innerGrid(elShown).selectable).toBe(true);
+  });
+
+  it('lets config.grid.selectable override the customization.hideCheckboxSelection default', async () => {
+    const elForcedOff = await createGrid({
+      grid: { columns: sampleColumns, selectable: false },
+      customization: { hideCheckboxSelection: false },
+    });
+    expect(innerGrid(elForcedOff).selectable).toBe(false);
+
+    const elForcedOn = await createGrid({
+      grid: { columns: sampleColumns, selectable: true },
+      customization: { hideCheckboxSelection: true },
+    });
+    expect(innerGrid(elForcedOn).selectable).toBe(true);
+  });
+
+  it('forwards stickyFirstColumn, striped, responsiveMode and emptyMessage with sensible defaults', async () => {
+    const elDefaults = await createGrid({ grid: { columns: sampleColumns } });
+    const gridDefaults = innerGrid(elDefaults);
+    expect(gridDefaults.stickyFirstColumn).toBe(true);
+    expect(gridDefaults.striped).toBe(true);
+    expect(gridDefaults.responsiveMode).toBe('auto');
+    expect(gridDefaults.emptyMessage).toBe('No data available');
+
+    const elOverrides = await createGrid({
+      grid: {
+        columns: sampleColumns,
+        stickyFirstColumn: false,
+        striped: false,
+        responsiveMode: 'cards',
+        emptyMessage: 'Nothing here',
+      },
+    });
+    const gridOverrides = innerGrid(elOverrides);
+    expect(gridOverrides.stickyFirstColumn).toBe(false);
+    expect(gridOverrides.striped).toBe(false);
+    expect(gridOverrides.responsiveMode).toBe('cards');
+    expect(gridOverrides.emptyMessage).toBe('Nothing here');
+  });
+
+  it('always forces sort-mode to external regardless of config', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+    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(
+      {
+        grid: { columns: sampleColumns, selectable: true },
+        computeItemId: (item) => `custom-${item.id}`,
+      },
+      { selectedIds: ['custom-2'] }
+    );
+
+    const checkboxes = innerGrid(el).shadowRoot.querySelectorAll('dile-checkbox');
+    expect(checkboxes[0].checked).toBe(false);
+    expect(checkboxes[1].checked).toBe(true);
+  });
+
+  it('leaves computeRowId unset when config.computeItemId is not a function', async () => {
+    const el = document.createElement('dile-crud-data-grid');
+    el.config = { grid: { columns: sampleColumns } };
+    el.items = sampleItems;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.computeRowId).toBeNull();
+  });
+
+  it('applies the is-deleted row class to rows whose deleted_at is truthy', async () => {
+    const el = await createGrid({ grid: { columns: sampleColumns } });
+
+    const rows = innerGrid(el).shadowRoot.querySelectorAll('tbody tr');
+    expect(rows[0].classList.contains('is-deleted')).toBe(false);
+    expect(rows[1].classList.contains('is-deleted')).toBe(true);
+  });
+
+  it('does not throw and still appends the Actions column when config is null', async () => {
+    const el = document.createElement('dile-crud-data-grid');
+    el.items = sampleItems;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.columns.length).toBe(1);
+    expect(el.columns[0].header).toBe('Actions');
+    expect(innerGrid(el)).toBeTruthy();
+  });
+});

package/components/list/crud-item-actions.js

@@ -0,0 +1,5 @@
+import { DileCrudItemActions } from './src/DileCrudItemActions.js';
+
+if (!customElements.get('dile-crud-item-actions')) {
+  customElements.define('dile-crud-item-actions', DileCrudItemActions);
+}

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

@@ -0,0 +1,122 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { html } from 'lit';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import { DileCrudItemActions } from './src/DileCrudItemActions.js';
+import './crud-item-actions.js';
+
+describe('dile-crud-item-actions', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sampleItem = { id: 10, name: 'Sample Item', deleted_at: null };
+  const deletedItem = { id: 20, name: 'Deleted Item', deleted_at: '2026-01-01' };
+
+  it('renders edit and delete buttons by default', async () => {
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = sampleItem;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot.querySelector('dile-button.edit');
+    const deleteBtn = el.shadowRoot.querySelector('dile-button.delete');
+    const restoreBtn = el.shadowRoot.querySelector('dile-button.restore');
+
+    expect(editBtn).toBeTruthy();
+    expect(deleteBtn).toBeTruthy();
+    expect(restoreBtn).toBeNull();
+  });
+
+  it('renders restore button when item has deleted_at or isDeleted is true', async () => {
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = deletedItem;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const editBtn = el.shadowRoot.querySelector('dile-button.edit');
+    const deleteBtn = el.shadowRoot.querySelector('dile-button.delete');
+    const restoreBtn = el.shadowRoot.querySelector('dile-button.restore');
+
+    expect(editBtn).toBeNull();
+    expect(deleteBtn).toBeNull();
+    expect(restoreBtn).toBeTruthy();
+  });
+
+  it('respects global customization and item-level callbacks from config', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      customization: {
+        disableEdit: false,
+        disableDelete: true,
+      },
+      isItemEditable: (item) => item.id !== 99,
+      computeItemId: (item) => `custom-${item.id}`,
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = { id: 99, name: 'Not editable' };
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    // Both edit (via isItemEditable returning false) and delete (via disableDelete: true) should be hidden
+    expect(el.shadowRoot.querySelector('dile-button.edit')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-button.delete')).toBeNull();
+  });
+
+  it('hides all actions when disableListActions is true in config', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      customization: {
+        disableListActions: true,
+      },
+    }).getConfig();
+
+    expect(DileCrudItemActions.hasActions(config)).toBe(false);
+
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = sampleItem;
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('dile-button.edit')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-button.delete')).toBeNull();
+    expect(el.shadowRoot.querySelector('dile-button.restore')).toBeNull();
+  });
+
+  it('DileCrudItemActions.hasActions returns false if edit, delete and restore are all disabled', () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      customization: {
+        disableEdit: true,
+        disableDelete: true,
+        disableRestore: true,
+      },
+    }).getConfig();
+
+    expect(DileCrudItemActions.hasActions(config)).toBe(false);
+  });
+
+  it('dispatches crud-item-edit with computed itemId from config', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/items', {
+      computeItemId: (item) => `computed-${item.id}`,
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-item-actions');
+    el.item = sampleItem;
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    let emittedDetail = null;
+    el.addEventListener('crud-item-edit', (e) => {
+      emittedDetail = e.detail;
+    });
+
+    const editBtn = el.shadowRoot.querySelector('dile-button.edit');
+    editBtn.click();
+
+    expect(emittedDetail).toEqual({
+      item: sampleItem,
+      itemId: 'computed-10',
+    });
+  });
+});