@dile/crud 2.6.4 → 2.7.2

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

@@ -0,0 +1,319 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { html } from 'lit';
+import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
+import './crud-list.js';
+import './crud-data-grid.js';
+import '@dile/ui/components/data-grid/data-grid.js';
+
+describe('dile-crud-list grid template integration', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const sampleElements = [
+    { id: 1, name: 'Customer A', email: 'a@example.com' },
+    { id: 2, name: 'Customer B', email: 'b@example.com' },
+  ];
+
+  it('renders default dile-crud-list-item when templates.grid is not provided', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      templates: {
+        item: (item) => html`<span class="item-name">${item.name}</span>`,
+      },
+    }).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;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(2);
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    expect(gridContainer).toBeNull();
+  });
+
+  it('renders generic dile-crud-data-grid when config.grid.columns is defined', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: {
+        columns: [
+          { field: 'id', header: 'ID' },
+          { field: 'name', header: 'Customer Name' },
+        ],
+        striped: true,
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    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;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(0);
+
+    const crudDataGrid = el.shadowRoot.querySelector('dile-crud-data-grid');
+    expect(crudDataGrid).toBeTruthy();
+    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 () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      customization: {
+        disableListActions: true,
+      },
+      templates: {
+        item: (item) => html`<span class="item-name">${item.name}</span>`,
+      },
+    }).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;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(2);
+
+    for (const item of listItems) {
+      const actionsDiv = item.shadowRoot.querySelector('.actions');
+      expect(actionsDiv).toBeNull();
+    }
+  });
+
+  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, config, sort) => {
+          receivedElements = elements;
+          receivedActionIds = actionIds;
+          receivedSort = sort;
+          return html`
+            <dile-data-grid
+              .items="${elements}"
+              .selectedIds="${actionIds}"
+              selectable
+              .columns="${[
+                { field: 'id', header: 'ID' },
+                { field: 'name', header: 'Name' },
+              ]}"
+            ></dile-data-grid>
+          `;
+        },
+      },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    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;
+
+    const listItems = el.shadowRoot.querySelectorAll('dile-crud-list-item');
+    expect(listItems.length).toBe(0);
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    expect(gridContainer).toBeTruthy();
+
+    const dataGrid = el.shadowRoot.querySelector('dile-data-grid');
+    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 () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      templates: {
+        grid: (elements, actionIds) => html`
+          <dile-data-grid
+            .items="${elements}"
+            sort-mode="external"
+            .columns="${[
+              { field: 'name', header: 'Name', sortable: true },
+            ]}"
+          ></dile-data-grid>
+        `,
+      },
+    }).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 sortApplied = null;
+    el.setSort = (sortObj) => {
+      sortApplied = sortObj;
+    };
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    gridContainer.dispatchEvent(
+      new CustomEvent('dile-data-grid-sort', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          field: 'name',
+          direction: 'asc',
+        },
+      })
+    );
+
+    expect(sortApplied).toEqual({
+      sortField: 'name',
+      sortDirection: 'asc',
+    });
+  });
+
+  it('updates sort when dile-data-grid-sort is dispatched from the config.grid.columns branch', 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 sortApplied = null;
+    el.setSort = (sortObj) => {
+      sortApplied = sortObj;
+    };
+
+    const gridContainer = el.shadowRoot.querySelector('.grid-container');
+    gridContainer.dispatchEvent(
+      new CustomEvent('dile-data-grid-sort', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          field: 'name',
+          direction: 'desc',
+        },
+      })
+    );
+
+    expect(sortApplied).toEqual({
+      sortField: 'name',
+      sortDirection: 'desc',
+    });
+  });
+
+  it('prefers templates.grid over config.grid.columns when both are configured', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: {
+        columns: [
+          { field: 'id', header: 'ID' },
+        ],
+      },
+      templates: {
+        grid: (elements, actionIds) => html`
+          <dile-data-grid
+            .items="${elements}"
+            .columns="${[{ field: 'name', header: 'Name' }]}"
+          ></dile-data-grid>
+        `,
+      },
+    }).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;
+
+    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/index.js

@@ -1,5 +1,7 @@
 export { DileCrudList } from "./src/DileCrudList.js";
-export { DileCrudListItem } from ".src/DileCrudListItem.js";
-export { DileCrudListPaginationLinks } from ".src/DileCrudListPaginationLinks.js";
+export { DileCrudListItem } from "./src/DileCrudListItem.js";
+export { DileCrudItemActions } from "./src/DileCrudItemActions.js";
+export { DileCrudDataGrid } from "./src/DileCrudDataGrid.js";
+export { DileCrudListPaginationLinks } from "./src/DileCrudListPaginationLinks.js";
 export { DileCrudListService } from "./src/DileCrudListService.js";
 export { DileCrudSelectAll } from "./src/DileCrudSelectAll.js";

package/components/list/src/DileCrudDataGrid.js

@@ -0,0 +1,93 @@
+import { LitElement, html, css } from 'lit';
+import '@dile/ui/components/data-grid/data-grid.js';
+import { DileCrudItemActions } from './DileCrudItemActions.js';
+import '../crud-item-actions.js';
+
+export class DileCrudDataGrid extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      items: { type: Array },
+      selectedIds: { type: Array },
+      config: { type: Object },
+      sort: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+    this.items = [];
+    this.selectedIds = [];
+    this.config = null;
+    this.sort = null;
+  }
+
+  get columns() {
+    const configuredCols = this.config?.grid?.columns || [];
+    const cols = [...configuredCols];
+
+    const hideActions = Boolean(this.config?.grid?.hideActionsColumn);
+
+    if (!hideActions && DileCrudItemActions.hasActions(this.config)) {
+      const customActionsHeader = this.config?.grid?.actionsColumnHeader || this.config?.labels?.actionsHeader || 'Actions';
+      const customActionsWidth = this.config?.grid?.actionsColumnWidth || '110px';
+      const customActionsAlign = this.config?.grid?.actionsColumnAlign || 'right';
+
+      cols.push({
+        header: customActionsHeader,
+        align: customActionsAlign,
+        width: customActionsWidth,
+        hideCardLabel: true,
+        render: (item) => html`
+          <dile-crud-item-actions
+            .item=${item}
+            .config=${this.config}
+          ></dile-crud-item-actions>
+        `,
+      });
+    }
+
+    return cols;
+  }
+
+  get computeRowId() {
+    const computeItemId = this.config?.computeItemId;
+    if (typeof computeItemId !== 'function') {
+      return null;
+    }
+    return (row) => computeItemId(row);
+  }
+
+  get rowClass() {
+    return (row) => (row?.deleted_at ? 'is-deleted' : '');
+  }
+
+  render() {
+    const gridConfig = this.config?.grid || {};
+
+    return html`
+      <dile-data-grid
+        .items=${this.items}
+        .columns=${this.columns}
+        .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}
+        responsive-mode=${gridConfig.responsiveMode || 'auto'}
+        empty-message=${gridConfig.emptyMessage || 'No data available'}
+        sort-mode="external"
+      ></dile-data-grid>
+    `;
+  }
+}

package/components/list/src/DileCrudItemActions.js

@@ -0,0 +1,191 @@
+import { LitElement, html, css, nothing } from 'lit';
+import '@dile/ui/components/button/button.js';
+import '@dile/iconlib/material-icons/edit.js';
+import '@dile/iconlib/material-icons/delete.js';
+import '@dile/iconlib/material-icons/restore-from-trash.js';
+
+export class DileCrudItemActions extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--dile-crud-item-actions-gap, 0.25rem);
+      }
+      dile-button.action-button {
+        --dile-button-background-color: var(--dile-crud-list-item-action-button-background-color, transparent);
+        --dile-button-border-color: var(--dile-crud-list-item-action-button-border-color, transparent);
+        --dile-button-hover-background-color: var(--dile-crud-list-item-action-button-hover-background-color, var(--dile-neutral-color, #f1f5f9));
+        --dile-button-hover-border-color: var(--dile-crud-list-item-action-button-hover-border-color, transparent);
+        --dile-button-padding-y: var(--dile-crud-list-item-action-button-padding-y, 0.25rem);
+        --dile-button-padding-x: var(--dile-crud-list-item-action-button-padding-x, 0.25rem);
+        --dile-button-icon-size: var(--dile-crud-list-item-action-button-icon-size, 24px);
+        --dile-button-border-radius: var(--dile-crud-list-item-action-button-border-radius, 2rem);
+      }
+      dile-button.action-button.edit {
+        --dile-button-icon-color: var(--edit-icon-color, var(--dile-alert-neutral-color, #0c7595));
+        --dile-button-icon-hover-color: var(--dile-crud-list-item-edit-icon-hover-color, var(--edit-icon-color, var(--dile-alert-neutral-color, #2889a7)));
+      }
+      dile-button.action-button.delete {
+        --dile-button-icon-color: var(--delete-icon-color, var(--dile-danger-color, #e33));
+        --dile-button-icon-hover-color: var(--dile-crud-list-item-delete-icon-hover-color, var(--delete-icon-color, var(--dile-danger-color, #e33)));
+      }
+      dile-button.action-button.restore {
+        --dile-button-icon-color: var(--restore-icon-color, var(--dile-alert-success-color, #00900f));
+        --dile-button-icon-hover-color: var(--dile-crud-list-item-restore-icon-hover-color, var(--restore-icon-color, var(--dile-alert-success-color, #00900f)));
+      }
+    `
+  ];
+
+  static get properties() {
+    return {
+      item: { type: Object },
+      itemId: { type: String },
+      config: { type: Object },
+      disableEdit: { type: Boolean },
+      disableDelete: { type: Boolean },
+      disableRestore: { type: Boolean },
+      isDeleted: { type: Boolean },
+    };
+  }
+
+  constructor() {
+    super();
+    this.config = null;
+    this.disableEdit = false;
+    this.disableDelete = false;
+    this.disableRestore = false;
+    this.isDeleted = false;
+  }
+
+  static hasActions(config) {
+    if (!config) {
+      return true;
+    }
+    if (config.customization?.disableListActions) {
+      return false;
+    }
+    const editDisabled = Boolean(config.customization?.disableEdit);
+    const deleteDisabled = Boolean(config.customization?.disableDelete);
+    const restoreDisabled = Boolean(config.customization?.disableRestore);
+
+    return !(editDisabled && deleteDisabled && restoreDisabled);
+  }
+
+  get computedIsDeleted() {
+    if (this.isDeleted) {
+      return true;
+    }
+    return Boolean(this.item?.deleted_at);
+  }
+
+  get computedItemId() {
+    if (this.itemId !== undefined && this.itemId !== null && this.itemId !== '') {
+      return this.itemId;
+    }
+    if (this.config?.computeItemId && typeof this.config.computeItemId === 'function' && this.item) {
+      return this.config.computeItemId(this.item);
+    }
+    return this.item?.id;
+  }
+
+  get isEditable() {
+    if (this.disableEdit) {
+      return false;
+    }
+    if (this.config) {
+      if (this.config.customization?.disableListActions || this.config.customization?.disableEdit) {
+        return false;
+      }
+      if (typeof this.config.isItemEditable === 'function' && this.item) {
+        return this.config.isItemEditable(this.item);
+      }
+    }
+    return true;
+  }
+
+  get isDeletable() {
+    if (this.disableDelete) {
+      return false;
+    }
+    if (this.config) {
+      if (this.config.customization?.disableListActions || this.config.customization?.disableDelete) {
+        return false;
+      }
+      if (typeof this.config.isItemDeletable === 'function' && this.item) {
+        return this.config.isItemDeletable(this.item);
+      }
+    }
+    return true;
+  }
+
+  get isRestorable() {
+    if (this.disableRestore) {
+      return false;
+    }
+    if (this.config?.customization?.disableListActions || this.config?.customization?.disableRestore) {
+      return false;
+    }
+    return true;
+  }
+
+  render() {
+    return this.computedIsDeleted ? this.restoreActionsTemplate : this.regularActionsTemplate;
+  }
+
+  get regularActionsTemplate() {
+    const showEdit = this.isEditable;
+    const showDelete = this.isDeletable;
+
+    if (!showEdit && !showDelete) {
+      return nothing;
+    }
+
+    return html`
+      ${showEdit
+        ? html`<dile-button class="action-button edit" icon="material.edit" label="Edit" @click=${this.editClick}></dile-button>`
+        : nothing
+      }
+      ${showDelete
+        ? html`<dile-button class="action-button delete" icon="material.delete" label="Delete" @click=${this.deleteClick}></dile-button>`
+        : nothing
+      }
+    `;
+  }
+
+  get restoreActionsTemplate() {
+    if (!this.isRestorable) {
+      return nothing;
+    }
+
+    return html`
+      <dile-button class="action-button restore" icon="material.restore-from-trash" label="Restore" @click=${this.restoreClick}></dile-button>
+    `;
+  }
+
+  _dispatchItemEvent(eventName) {
+    this.dispatchEvent(new CustomEvent(eventName, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        item: this.item,
+        itemId: this.computedItemId,
+      }
+    }));
+  }
+
+  editClick(e) {
+    e?.stopPropagation();
+    this._dispatchItemEvent('crud-item-edit');
+  }
+
+  deleteClick(e) {
+    e?.stopPropagation();
+    this._dispatchItemEvent('crud-item-delete');
+  }
+
+  restoreClick(e) {
+    e?.stopPropagation();
+    this._dispatchItemEvent('crud-item-restore');
+  }
+}