@dile/crud 2.2.8 → 2.3.0

package/components/list/src/DileCrudListService.js

@@ -70,10 +70,15 @@ export class DileCrudListService extends DileI18nMixin(LitElement) {
 
   doRefresh() {
     this.delayTimer = null;
+    // Normalize filter types: select_ajax → select for backend compatibility
+    const normalizedFilters = this.filters.map(filter => ({
+      ...filter,
+      type: filter.type === 'select_ajax' ? 'select' : filter.type
+    }));
     let data = {
       per_page: this.pageSize,
       keyword: this.keyword,
-      filters: this.filters,
+      filters: normalizedFilters,
     }
     if (this.sort && this.sort.sortField) {
       data.sortField = this.sort.sortField;

package/components/select-ajax-simple/index.js

@@ -0,0 +1 @@
+export { DileSelectAjaxSimple } from './src/DileSelectAjaxSimple.js';

package/components/select-ajax-simple/select-ajax-simple.js

@@ -0,0 +1,5 @@
+import { DileSelectAjaxSimple } from './src/DileSelectAjaxSimple.js';
+
+if (!customElements.get('dile-select-ajax-simple')) {
+  customElements.define('dile-select-ajax-simple', DileSelectAjaxSimple);
+}

package/components/select-ajax-simple/select-ajax-simple.spec.js

@@ -0,0 +1,133 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './select-ajax-simple.js';
+
+const MOCK_DATA = [
+  { id: 1, name: 'Fantasy' },
+  { id: 2, name: 'Strategy' },
+];
+
+function mockAxiosSuccess(data = MOCK_DATA) {
+  window.axiosInstance = {
+    get: vi.fn().mockResolvedValue({ status: 200, data: { data } }),
+  };
+}
+
+function mockAxiosError() {
+  window.axiosInstance = {
+    get: vi.fn().mockRejectedValue(new Error('Network error')),
+  };
+}
+
+async function renderEl(html) {
+  document.body.innerHTML = html;
+  const el = document.body.querySelector('dile-select-ajax-simple');
+  await el.updateComplete;
+  // Wait for async loadData to complete and re-render
+  await new Promise(resolve => setTimeout(resolve, 10));
+  await el.updateComplete;
+  return el;
+}
+
+describe('dile-select-ajax-simple', () => {
+  beforeEach(() => {
+    mockAxiosSuccess();
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+    vi.restoreAllMocks();
+  });
+
+  it('shows a spinner while loading', async () => {
+    document.body.innerHTML = '<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>';
+    const el = document.body.querySelector('dile-select-ajax-simple');
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('dile-spinner-horizontal')).toBeTruthy();
+  });
+
+  it('renders options after successful data load', async () => {
+    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
+
+    const options = el.shadowRoot.querySelectorAll('option');
+    // placeholder + 2 data options
+    expect(options.length).toBe(3);
+    expect(options[1].textContent).toBe('Fantasy');
+    expect(options[2].textContent).toBe('Strategy');
+  });
+
+  it('uses displayProperty and idProperty for option rendering', async () => {
+    window.axiosInstance = {
+      get: vi.fn().mockResolvedValue({
+        status: 200,
+        data: { data: [{ code: 'FR', title: 'France' }] }
+      }),
+    };
+    const el = await renderEl(
+      '<dile-select-ajax-simple endpoint="/api/countries" name="country" displayProperty="title" idProperty="code"></dile-select-ajax-simple>'
+    );
+
+    const options = el.shadowRoot.querySelectorAll('option');
+    expect(options[1].value).toBe('FR');
+    expect(options[1].textContent).toBe('France');
+  });
+
+  it('shows error message when request fails', async () => {
+    mockAxiosError();
+    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
+
+    expect(el.shadowRoot.querySelector('p.error')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-select')).toBeNull();
+  });
+
+  it('shows empty message when response has no items', async () => {
+    window.axiosInstance = {
+      get: vi.fn().mockResolvedValue({ status: 200, data: { data: [] } }),
+    };
+    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
+
+    expect(el.shadowRoot.querySelector('p.empty')).toBeTruthy();
+  });
+
+  it('dispatches element-changed when an option is selected', async () => {
+    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag"></dile-select-ajax-simple>');
+
+    let detail = null;
+    el.addEventListener('element-changed', (e) => { detail = e.detail; });
+
+    el.value = '1';
+    await el.updateComplete;
+
+    expect(detail).not.toBeNull();
+    expect(detail.name).toBe('tag');
+    expect(detail.value).toBe('1');
+  });
+
+  it('supports getSelectResultList as custom extractor', async () => {
+    window.axiosInstance = {
+      get: vi.fn().mockResolvedValue({ status: 200, data: { result: { items: MOCK_DATA } } }),
+    };
+    // Set getSelectResultList before connectedCallback fires
+    const el = document.createElement('dile-select-ajax-simple');
+    el.getSelectResultList = (json) => json.result.items;
+    el.endpoint = '/api/tags';
+    el.name = 'tag';
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await new Promise(resolve => setTimeout(resolve, 10));
+    await el.updateComplete;
+
+    const options = el.shadowRoot.querySelectorAll('option');
+    expect(options.length).toBe(3);
+    expect(options[1].textContent).toBe('Fantasy');
+  });
+
+  it('renders label when provided', async () => {
+    const el = await renderEl('<dile-select-ajax-simple endpoint="/api/tags" name="tag" label="Category"></dile-select-ajax-simple>');
+
+    const label = el.shadowRoot.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label.textContent).toBe('Category');
+  });
+});

package/components/select-ajax-simple/src/DileSelectAjaxSimple.js

@@ -0,0 +1,172 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '@dile/ui/mixins/form/index.js';
+import { DileAxios } from '../../../lib/DileAxios.js';
+import '@dile/ui/components/select/select.js';
+import '@dile/ui/components/spinner/spinner-horizontal.js';
+import { labelStyles } from '@dile/ui/components/input/src/label-styles.js';
+import { messageStyles } from '@dile/ui/components/input/src/message-styles.js';
+
+export class DileSelectAjaxSimple extends DileAxios(DileEmmitChange(LitElement)) {
+
+  static get styles() {
+    return [
+      labelStyles,
+      messageStyles,
+      css`
+        :host {
+          display: block;
+          margin-bottom: 10px;
+        }
+        dile-select {
+          --dile-input-width: 100%;
+          margin-bottom: 0;
+        }
+        .spinner-container {
+          min-height: 2.5rem;
+          display: flex;
+          align-items: center;
+        }
+        p.empty {
+          margin: 0;
+          font-size: var(--dile-input-label-font-size, 1em);
+          color: var(--dile-on-background-color, #303030);
+        }
+        p.error {
+          margin: 0;
+          font-size: var(--dile-input-label-font-size, 1em);
+          color: var(--dile-input-message-error-color, #c00);
+        }
+      `
+    ];
+  }
+
+  static get properties() {
+    return {
+      name: { type: String, reflect: true },
+      label: { type: String },
+      endpoint: { type: String },
+      value: { type: String },
+      disabled: { type: Boolean },
+      errored: { type: Boolean },
+      message: { type: String },
+      selectDefaultPlaceholder: { type: String },
+      emptyMessage: { type: String },
+      ajaxErrorMessage: { type: String },
+      resultDataProperty: { type: String },
+      getSelectResultList: { type: Object },
+      displayProperty: { type: String },
+      idProperty: { type: String },
+      maxResults: { type: Number },
+      pageParamName: { type: String },
+      additionalQueryString: { type: Object },
+      loading: { type: Boolean, state: true },
+      ajaxError: { type: Boolean, state: true },
+      data: { type: Array, state: true },
+    };
+  }
+
+  constructor() {
+    super();
+    this.selectDefaultPlaceholder = 'Select an option...';
+    this.emptyMessage = 'No data available';
+    this.ajaxErrorMessage = 'Error loading data';
+    this.resultDataProperty = 'data';
+    this.displayProperty = 'name';
+    this.idProperty = 'id';
+    this.loading = false;
+    this.ajaxError = false;
+    this.data = [];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadData();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('value')) {
+      this.emmitChange();
+    }
+  }
+
+  loadData() {
+    this.loading = true;
+    this.ajaxError = false;
+    let params = { ...(this.additionalQueryString || {}) };
+    if (this.pageParamName && this.maxResults) {
+      params[this.pageParamName] = this.maxResults;
+    }
+    this.axiosInstance.get(this.endpoint, { params })
+      .then((response) => {
+        if (response.status === 200) {
+          this.data = this.getResultData(response.data);
+          this.updateComplete.then(() => {
+            this.loading = false;
+            if (this.value) {
+              this.selectCurrentValue();
+            }
+          });
+        } else {
+          this.registerError();
+        }
+      })
+      .catch(() => this.registerError());
+  }
+
+  getResultData(json) {
+    if (this.getSelectResultList) {
+      return this.getSelectResultList(json) ?? [];
+    }
+    if (this.resultDataProperty) {
+      return json[this.resultDataProperty] ?? [];
+    }
+    return Array.isArray(json) ? json : [];
+  }
+
+  registerError() {
+    this.ajaxError = true;
+    this.loading = false;
+  }
+
+  // Sets the native select value after options are rendered
+  selectCurrentValue() {
+    const select = this.shadowRoot.querySelector('dile-select');
+    if (select) {
+      select.value = this.value;
+    }
+  }
+
+  onSelected(e) {
+    this.value = e.detail.value;
+    e.stopPropagation();
+  }
+
+  render() {
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : ''}
+      ${this.loading
+        ? html`<div class="spinner-container"><dile-spinner-horizontal active></dile-spinner-horizontal></div>`
+        : this.ajaxError
+          ? html`<p class="error">${this.ajaxErrorMessage}</p>`
+          : this.data.length === 0
+            ? html`<p class="empty">${this.emptyMessage}</p>`
+            : html`
+                <dile-select
+                  name="${this.name}"
+                  ?disabled=${this.disabled}
+                  ?errored=${this.errored}
+                  message="${this.message || ''}"
+                  @element-changed=${this.onSelected}
+                >
+                  <select slot="select">
+                    <option value="">${this.selectDefaultPlaceholder}</option>
+                    ${this.data.map(item => html`
+                      <option value="${item[this.idProperty]}">${item[this.displayProperty]}</option>
+                    `)}
+                  </select>
+                </dile-select>
+              `
+      }
+    `;
+  }
+}

package/components/ui/src/DileCrudFilters.js

@@ -38,6 +38,7 @@ export class DileCrudFilters extends DileI18nMixin(LitElement) {
             if (filter.name in data) {
                 switch(filter.type) {
                     case 'select':
+                    case 'select_ajax':
                         if(data[filter.name] === '') {
                             filter.active = false;
                         } else {

package/components/ui/src/DileCrudFiltersForm.js

@@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { DileFormChangeDetect, DileForm } from '@dile/ui/mixins/form/index.js';
 import '@dile/ui/components/checkbox/checkbox.js';
 import '@dile/ui/components/select/select.js';
+import '@dile/crud/components/select-ajax-simple/select-ajax-simple.js';
 
 export class DileCrudFiltersForm extends DileFormChangeDetect(DileForm(LitElement)) {
   static styles = css`
@@ -47,6 +48,27 @@ export class DileCrudFiltersForm extends DileFormChangeDetect(DileForm(LitElemen
                 </select>
             </dile-select>
         `;
+      case 'select_ajax':
+        return html`
+            <dile-select-ajax-simple
+                label="${filter.label}"
+                name="${filter.name}"
+                endpoint="${filter.endpoint}"
+                displayProperty="${filter.optionLabelField || 'name'}"
+                idProperty="${filter.optionValueField || 'id'}"
+                resultDataProperty="${filter.resultDataProperty || 'data'}"
+                selectDefaultPlaceholder="${filter.selectDefaultPlaceholder || ''}"
+                emptyMessage="${filter.emptyMessage || ''}"
+                ajaxErrorMessage="${filter.ajaxErrorMessage || ''}"
+                message="${filter.message || ''}"
+                pageParamName="${filter.pageParamName || ''}"
+                .maxResults=${filter.maxResults}
+                .getSelectResultList=${filter.getSelectResultList}
+                .additionalQueryString=${filter.additionalQueryString}
+                ?disabled=${filter.disabled || false}
+                ?errored=${filter.errored || false}
+            ></dile-select-ajax-simple>
+        `;
       default:
         return html`
             <p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.2.8",
+  "version": "2.3.0",
   "description": "Components to create a generic crud system based on Web Components and Lit",
   "main": "index.js",
   "type": "module",
@@ -32,5 +32,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1255147fa9d7247f77899a2da1af6f00bf4a31cd"
+  "gitHead": "288663c7de6829d806f1fe2e360c587a13c97972"
 }