@dile/crud 2.7.5 → 2.8.0

package/components/crud/crud.spec.js

@@ -1,4 +1,5 @@
 import { describe, it, expect, afterEach } from 'vitest';
+import { html } from 'lit';
 import { CrudConfigBuilder } from '../../lib/CrudConfigBuilder.js';
 import './crud.js';
 
@@ -274,3 +275,88 @@ describe('dile-crud sort synchronization', () => {
     expect(lastSetSort).toBeNull();
   });
 });
+
+describe('dile-crud list/grid view switch', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const baseCustomization = {
+    disableInsert: true,
+    disableHelp: true,
+    disableKeywordSearch: true,
+    disableSort: true,
+    disableFilter: true,
+    disablePagination: true,
+    hideCheckboxSelection: true,
+  };
+
+  function buildConfig(overrides = {}) {
+    return new CrudConfigBuilder('https://example.test/api/countries', {
+      customization: { ...baseCustomization, ...(overrides.customization || {}) },
+      grid: { columns: [{ field: 'name', header: 'Name' }] },
+      templates: { item: (item) => html`<span>${item.name}</span>` },
+      ...overrides,
+    }).getConfig();
+  }
+
+  it('shows the item template by default and renders no switch button when only one view is configured', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/countries', {
+      customization: baseCustomization,
+      templates: { item: (item) => html`<span>${item.name}</span>` },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const switchButtons = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
+      .filter((btn) => /view/i.test(btn.textContent));
+    expect(switchButtons.length).toBe(0);
+  });
+
+  it('defaults to the item view and toggles to the grid on click when both views are configured', async () => {
+    // Rendering per view mode (item vs. grid DOM) is covered in crud-list.spec.js;
+    // here we only verify dile-crud's own state, wiring and button behavior, since
+    // driving dile-crud-list's real data load would race its own network refresh.
+    const config = buildConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el._viewMode).toBe('item');
+    expect(el.listElement.viewMode).toBe('item');
+
+    const switchButton = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
+      .find((btn) => /view/i.test(btn.textContent));
+    expect(switchButton).toBeTruthy();
+    expect(switchButton.textContent.trim()).toBe('Grid view');
+
+    switchButton.click();
+    await el.updateComplete;
+
+    expect(el._viewMode).toBe('grid');
+    expect(el.listElement.viewMode).toBe('grid');
+
+    const switchButtonAfter = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
+      .find((btn) => /view/i.test(btn.textContent));
+    expect(switchButtonAfter.textContent.trim()).toBe('List view');
+  });
+
+  it('does not render the switch button when customization.disableListWiewSwitch is true', async () => {
+    const config = buildConfig({ customization: { disableListWiewSwitch: true } });
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    const switchButtons = [...el.shadowRoot.querySelectorAll('dile-button-icon')]
+      .filter((btn) => /view/i.test(btn.textContent));
+    expect(switchButtons.length).toBe(0);
+    expect(el.listElement.viewMode).toBe('item');
+  });
+});

package/components/crud/src/DileCrud.js

@@ -4,6 +4,7 @@ import '@dile/ui/components/nav/nav.js';
 import '@dile/ui/components/select/select.js';
 import '@dile/ui/components/modal/modal.js';
 import '@dile/ui/components/modal/modal-help.js';
+import '@dile/ui/components/icon/icon.js';
 import '../../item-delete/crud-item-delete.js';
 import '../../item-restore/crud-item-restore.js';
 import '../../list/crud-list.js';
@@ -19,8 +20,9 @@ import '../../action/crud-single-action-dispatcher.js';
 import { formStyles } from '../../../styles/form-styles.js';
 import { DileCrudMixin } from '../../../lib/DileCrudMixin.js';
 import { crudStyles } from '../../../styles/crud-styles.js';
-import { addIcon } from '@dile/icons';
+import { addIcon, appsIcon, listIcon } from '@dile/icons';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
+import { canSwitchListView } from '../../../lib/listViewMode.js';
 
 export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
     static styles = [
@@ -70,6 +72,26 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                 --dile-icon-size: var(--dile-crud-insert-icon-size, 24px);
                 --dile-button-icon-separation: var(--dile-crud-insert-icon-separation, 0.3rem);
             }
+            .view-switch dile-button-icon {
+                display: none;
+            }
+            .view-switch dile-icon {
+                cursor: pointer;
+                --dile-icon-color: var(--dile-on-crud-action-color, #fff);
+                --dile-icon-rounded-background-color: var(--dile-crud-action-color, #888);
+            }
+            .view-switch dile-icon:focus-visible {
+                outline: 2px solid var(--dile-crud-action-focus-color, #12354d);
+                outline-offset: 2px;
+            }
+            @media (min-width: 605px) {
+                .view-switch dile-button-icon {
+                    display: block;
+                }
+                .view-switch dile-icon {
+                    display: none;
+                }
+            }
             @media(min-width: 400px) {
                 .simplecard {
                     --dile-card-border: none;
@@ -99,6 +121,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         relationId: { type: String },
         filtersAlwaysVisible: { type: Boolean },
         singleActionDispatcher: { type: String },
+        _viewMode: { state: true },
       };
     }
 
@@ -106,6 +129,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         super();
         this.actionIds = [];
         this.filtersAlwaysVisible = false;
+        this._viewMode = 'item';
     }
 
     // GETTERS ELEMENTOS
@@ -216,6 +240,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                 @crud-item-restore=${this.itemRestoreRequest}
                 @insert-requested=${this.openInsert}
                 .actionIds=${this.actionIds}
+                .viewMode=${this._viewMode}
                 belongsTo=${this.belongsTo}
                 relationId=${this.relationId}
                 language="${this.language}"
@@ -241,6 +266,7 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
                         : html`<div slot="menu">${this.helpTemplate}</div>`
                     }
                     <div class="actions" slot="actions">
+                        ${this.canSwitchListView ? this.listViewSwitchTemplate : ''}
                         ${this.actionsTemplate}
                         ${this.config.customization.disableFilter || this.filtersAlwaysVisible
                             ? ''
@@ -287,6 +313,37 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         `
     }
 
+    get canSwitchListView() {
+        return canSwitchListView(this.config);
+    }
+
+    get listViewSwitchTemplate() {
+        const label = this._viewMode === 'grid'
+            ? this.listViewLabelComputed(this.config.labels.listViewAction, this.translations)
+            : this.gridViewLabelComputed(this.config.labels.gridViewAction, this.translations);
+        const icon = this._viewMode === 'grid' ? listIcon : appsIcon;
+        return html`
+            <div class="view-switch action-controller">
+                <dile-icon
+                    rounded
+                    tabindex="0"
+                    role="button"
+                    aria-label="${label}"
+                    title="${label}"
+                    .icon=${icon}
+                    @click=${this.toggleListView}
+                    @keydown=${this.viewSwitchIconKeydown}
+                ></dile-icon>
+                <dile-button-icon
+                    @click=${this.toggleListView}
+                    .icon=${icon}
+                >
+                    ${label}
+                </dile-button-icon>
+            </div>
+        `
+    }
+
     get filtersAlwaysVisibleTemplate() {
         return html`
             <dile-crud-filters-inline
@@ -304,10 +361,30 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
             && (customization.disableFilter || this.filtersAlwaysVisible)
             && customization.disablePagination
             && customization.disableSort
-            && customization.hideCheckboxSelection;
+            && customization.hideCheckboxSelection
+            && !this.canSwitchListView;
     }
     // BEHAVIOURS
 
+    toggleListView() {
+        this._viewMode = this._viewMode === 'grid' ? 'item' : 'grid';
+    }
+
+    viewSwitchIconKeydown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.toggleListView();
+        }
+    }
+
+    listViewLabelComputed(label, translations) {
+        return label ? label : translations?.list_view_label ? translations.list_view_label : 'List view';
+    }
+
+    gridViewLabelComputed(label, translations) {
+        return label ? label : translations?.grid_view_label ? translations.grid_view_label : 'Grid view';
+    }
+
     openInsert() {
         this.dispatchEvent(new CustomEvent('crud-item-insert', { bubbles: true, composed: true }));
         if (this.config.insertOperation?.type === 'modal') {

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

@@ -316,4 +316,58 @@ describe('dile-crud-list grid template integration', () => {
     expect(innerGrid.sortField).toBe('name');
     expect(innerGrid.sortDirection).toBe('asc');
   });
+
+  it('shows the item template by default when both templates.item and grid.columns are configured', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: { columns: [{ field: 'name', header: 'Name' }] },
+      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;
+
+    expect(el.shadowRoot.querySelectorAll('dile-crud-list-item').length).toBe(2);
+    expect(el.shadowRoot.querySelector('.grid-container')).toBeNull();
+  });
+
+  it('shows the grid when viewMode is "grid" and both templates.item and grid.columns are configured', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: { columns: [{ field: 'name', header: 'Name' }] },
+      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;
+    el.viewMode = 'grid';
+    document.body.appendChild(el);
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelectorAll('dile-crud-list-item').length).toBe(0);
+    expect(el.shadowRoot.querySelector('.grid-container')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-crud-data-grid')).toBeTruthy();
+  });
+
+  it('still shows the grid when only grid.columns is configured, regardless of viewMode', async () => {
+    const config = new CrudConfigBuilder('https://example.test/api/customers', {
+      grid: { columns: [{ field: 'name', header: 'Name' }] },
+    }).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')).toBeTruthy();
+  });
 });

package/components/list/src/DileCrudList.js

@@ -9,6 +9,7 @@ import '../crud-select-all.js';
 import '../crud-list-service.js';
 import '../crud-data-grid.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
+import { hasGridView, hasItemView } from '../../../lib/listViewMode.js';
 
 export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     static styles = [
@@ -95,6 +96,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         relationId: { type: String },
         disableLoadOnStart: { type: Boolean },
         listError: { type: Object },
+        viewMode: { type: String },
       };
     }
 
@@ -112,6 +114,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.loading = true;
         this.disableLoadOnStart = false;
         this.listError = null;
+        this.viewMode = 'item';
     }
 
     firstUpdated() {
@@ -250,7 +253,12 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
     }
 
     get elementsTemplate() {
-        if (this.config?.templates?.grid && typeof this.config.templates.grid === 'function') {
+        // When both a grid and an item view are configured, the item template is
+        // shown by default and the grid is only rendered once the user switches
+        // view via dile-crud's navActionsTemplate (see listViewMode.js).
+        const showGrid = hasGridView(this.config) && (!hasItemView(this.config) || this.viewMode === 'grid');
+
+        if (showGrid && this.config?.templates?.grid && typeof this.config.templates.grid === 'function') {
             return html`
                 <div
                     class="grid-container"
@@ -261,7 +269,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
                 </div>
             `;
         }
-        if (this.config?.grid?.columns && Array.isArray(this.config.grid.columns)) {
+        if (showGrid && this.config?.grid?.columns && Array.isArray(this.config.grid.columns)) {
             return html`
                 <div
                     class="grid-container"

package/components/ui/src/DileCrudListOptions.js

@@ -25,6 +25,10 @@ export class DileCrudListOptions extends LitElement {
                 cursor: pointer;
                 --dile-icon-rounded-background-color: var(--dile-crud-action-color, #888);
             }
+            dile-icon:focus-visible {
+                outline: 2px solid var(--dile-crud-action-focus-color, #12354d);
+                outline-offset: 2px;
+            }
             @media (min-width: 605px) {
                 dile-button-icon {
                     display: block;
@@ -47,7 +51,15 @@ export class DileCrudListOptions extends LitElement {
         return html`
             <dile-menu-overlay horizontalAlign="under_right" verticalAlign="bottom">
                 <div slot="trigger">
-                    <dile-icon rounded .icon="${this.icon}"></dile-icon>
+                    <dile-icon
+                        rounded
+                        tabindex="0"
+                        role="button"
+                        aria-label="${this.label}"
+                        title="${this.label}"
+                        .icon="${this.icon}"
+                        @keydown=${this.iconKeydown}
+                    ></dile-icon>
                     <dile-button-icon label="${this.label}" .icon="${this.icon}" gray>${this.label}</dile-button-icon>
                 </div>
                 <div class="content" slot="content">
@@ -57,8 +69,18 @@ export class DileCrudListOptions extends LitElement {
         `;
     }
 
+    // The small-screen dile-icon has no native focus/activation support, unlike the
+    // real <button> inside dile-button-icon shown at wider widths, so it needs its
+    // own keyboard handling; the resulting click bubbles up to dile-menu-overlay's
+    // trigger listener the same way a pointer click already does.
+    iconKeydown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.target.click();
+        }
+    }
 
     close() {
-        this.shadowRoot.querySelector('dile-menu-overlay').close();  
-    } 
+        this.shadowRoot.querySelector('dile-menu-overlay').close();
+    }
 }

package/lib/defaultConfig.js

@@ -33,6 +33,7 @@ export const defaultConfig = {
     disableFilter: true,
     disableHelp: true,
     disableListActionsOnSingleComponent: false,
+    disableListWiewSwitch: false,
   },
   responseAdapter: new ResponseApiAdapter(),
   requestAdapter: new RequestApiAdapter(),

package/lib/i18n/en.js

@@ -72,4 +72,6 @@ export const translations = {
   select_relation_placeholder: "Select...",
   list_load_error: "Error loading the list. Please try again.",
   retry_label: "Retry",
+  list_view_label: "List view",
+  grid_view_label: "Grid view",
 };

package/lib/i18n/es.js

@@ -72,4 +72,6 @@ export const translations = {
   select_relation_placeholder: "Selecciona...",
   list_load_error: "Error al cargar la lista. Por favor, intenta de nuevo.",
   retry_label: "Reintentar",
+  list_view_label: "Vista de lista",
+  grid_view_label: "Vista de cuadrícula",
 };

package/lib/listViewMode.js

@@ -0,0 +1,17 @@
+import { defaultConfig } from './defaultConfig.js';
+
+export function hasGridView(config) {
+  return typeof config?.templates?.grid === 'function'
+    || Array.isArray(config?.grid?.columns);
+}
+
+export function hasItemView(config) {
+  return typeof config?.templates?.item === 'function'
+    && config.templates.item !== defaultConfig.templates.item;
+}
+
+export function canSwitchListView(config) {
+  return hasGridView(config)
+    && hasItemView(config)
+    && !config?.customization?.disableListWiewSwitch;
+}

package/lib/listViewMode.spec.js

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest';
+import { html } from 'lit';
+import { CrudConfigBuilder } from './CrudConfigBuilder.js';
+import { hasGridView, hasItemView, canSwitchListView } from './listViewMode.js';
+
+describe('listViewMode', () => {
+  it('detects a grid view from templates.grid', () => {
+    const config = new CrudConfigBuilder('https://example.test/api', {
+      templates: { grid: () => html`` },
+    }).getConfig();
+
+    expect(hasGridView(config)).toBe(true);
+  });
+
+  it('detects a grid view from grid.columns', () => {
+    const config = new CrudConfigBuilder('https://example.test/api', {
+      grid: { columns: [{ field: 'id', header: 'ID' }] },
+    }).getConfig();
+
+    expect(hasGridView(config)).toBe(true);
+  });
+
+  it('reports no grid view when neither is configured', () => {
+    const config = new CrudConfigBuilder('https://example.test/api', {
+      templates: { item: () => html`` },
+    }).getConfig();
+
+    expect(hasGridView(config)).toBe(false);
+  });
+
+  it('detects an item view only when templates.item was explicitly configured', () => {
+    const withItem = new CrudConfigBuilder('https://example.test/api', {
+      templates: { item: () => html`` },
+    }).getConfig();
+    const withoutItem = new CrudConfigBuilder('https://example.test/api', {
+      grid: { columns: [{ field: 'id', header: 'ID' }] },
+    }).getConfig();
+
+    expect(hasItemView(withItem)).toBe(true);
+    expect(hasItemView(withoutItem)).toBe(false);
+  });
+
+  it('allows switching only when both views are configured and the switch is not disabled', () => {
+    const both = new CrudConfigBuilder('https://example.test/api', {
+      grid: { columns: [{ field: 'id', header: 'ID' }] },
+      templates: { item: () => html`` },
+    }).getConfig();
+
+    expect(canSwitchListView(both)).toBe(true);
+  });
+
+  it('disallows switching when customization.disableListWiewSwitch is true', () => {
+    const config = new CrudConfigBuilder('https://example.test/api', {
+      grid: { columns: [{ field: 'id', header: 'ID' }] },
+      templates: { item: () => html`` },
+      customization: { disableListWiewSwitch: true },
+    }).getConfig();
+
+    expect(canSwitchListView(config)).toBe(false);
+  });
+
+  it('disallows switching when only one view is configured', () => {
+    const gridOnly = new CrudConfigBuilder('https://example.test/api', {
+      grid: { columns: [{ field: 'id', header: 'ID' }] },
+    }).getConfig();
+    const itemOnly = new CrudConfigBuilder('https://example.test/api', {
+      templates: { item: () => html`` },
+    }).getConfig();
+
+    expect(canSwitchListView(gridOnly)).toBe(false);
+    expect(canSwitchListView(itemOnly)).toBe(false);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.7.5",
+  "version": "2.8.0",
   "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.3",
+    "@dile/ui": "^3.12.4",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "907871657a1af5e98886a7f1cb36ab39574605a2"
+  "gitHead": "305c109a3c920517956067fb52e51fa75e55896f"
 }