@dile/crud 2.1.12 → 2.2.0

package/components/ajax-select-crud/ajax-select-crud-overlay.js

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

package/components/ajax-select-crud/ajax-select-crud-overlay.spec.js

@@ -0,0 +1,166 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './ajax-select-crud-overlay.js';
+
+describe('dile-ajax-select-crud-overlay', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+  });
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  function mockAxios(responseData) {
+    const get = vi.fn(() => Promise.resolve({ status: 200, data: responseData }));
+    window.axiosInstance = { get };
+    return get;
+  }
+
+  async function renderCrudSelect(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-ajax-select-crud-overlay');
+    await el.updateComplete;
+    return el;
+  }
+
+  async function typeKeyword(el, keyword) {
+    const input = el.shadowRoot.getElementById('search');
+    input.value = keyword;
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await wait(el.delay + 50);
+    await el.updateComplete;
+  }
+
+  describe('Rendering', () => {
+    it('renders the search input, same as dile-select-ajax-overlay', async () => {
+      mockAxios([]);
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name"></dile-ajax-select-crud-overlay>
+      `);
+
+      const input = el.shadowRoot.getElementById('search');
+      expect(input).toBeTruthy();
+      expect(input.getAttribute('role')).toBe('combobox');
+    });
+  });
+
+  describe('Uses axios instead of fetch', () => {
+    it('requests through window.axiosInstance.get, not the native fetch API', async () => {
+      const get = mockAxios([{ id: 1, name: 'Spain' }]);
+      const fetchSpy = vi.spyOn(window, 'fetch');
+
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" queryStringVariable="keyword" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+
+      await typeKeyword(el, 'sp');
+
+      expect(get).toHaveBeenCalledWith('/api/countries', { params: { keyword: 'sp' } });
+      expect(fetchSpy).not.toHaveBeenCalled();
+      expect(el.data.length).toBe(1);
+      expect(el.select.opened).toBe(true);
+
+      fetchSpy.mockRestore();
+    });
+
+    it('fetches the initial value display text through axios', async () => {
+      // searchValueInitial() passes response.data (i.e. the "data" envelope, not the raw
+      // response) down to registerText(), matching dile-ajax-select-crud's own convention.
+      const get = vi.fn(() => Promise.resolve({ status: 200, data: { data: { name: 'Spain' } } }));
+      window.axiosInstance = { get };
+
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" value="22"></dile-ajax-select-crud-overlay>
+      `);
+      await wait(50);
+      await el.updateComplete;
+
+      expect(get).toHaveBeenCalledWith('/api/countries/22');
+      expect(el.selectedText).toBe('Spain');
+      expect(el.isSelected).toBe(true);
+    });
+  });
+
+  describe('Selecting a result (no extra click required)', () => {
+    it('opens the popup as soon as results load and lets the user pick without a second click', async () => {
+      mockAxios([{ id: 1, name: 'Spain' }, { id: 2, name: 'France' }]);
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+
+      await typeKeyword(el, 'sp');
+      expect(el.select.opened).toBe(true);
+
+      const options = el.select.shadowRoot.querySelectorAll('[role="option"]');
+      options[0].click();
+      await el.select.updateComplete;
+      await el.updateComplete;
+
+      expect(el.value).toBe('1');
+      expect(el.selectedText).toBe('Spain');
+      expect(el.isSelected).toBe(true);
+    });
+  });
+
+  describe('maxResults / pageParamName', () => {
+    it('adds the page-size param to the request when both are set', async () => {
+      const get = mockAxios([]);
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" queryStringVariable="keyword" maxResults="5" pageParamName="limit" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+
+      await typeKeyword(el, 'sp');
+
+      expect(get).toHaveBeenCalledWith('/api/countries', { params: { keyword: 'sp', limit: 5 } });
+    });
+
+    it('omits the page-size param when pageParamName is not set', async () => {
+      const get = mockAxios([]);
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" queryStringVariable="keyword" maxResults="5" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+
+      await typeKeyword(el, 'sp');
+
+      expect(get).toHaveBeenCalledWith('/api/countries', { params: { keyword: 'sp' } });
+    });
+  });
+
+  describe('getSelectResultList', () => {
+    it('uses getSelectResultList to extract the list when the response shape needs adapting', async () => {
+      mockAxios({ data: { result: { data: [{ id: 1, name: 'Spain' }] } } });
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+      el.getSelectResultList = (response) => response.data.result.data;
+
+      await typeKeyword(el, 'sp');
+
+      expect(el.data).toEqual([{ id: 1, name: 'Spain' }]);
+    });
+
+    it('takes priority over resultDataProperty when both are set', async () => {
+      mockAxios({ items: [{ id: 1, name: 'Spain' }], data: [] });
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name" resultDataProperty="data" delay="10"></dile-ajax-select-crud-overlay>
+      `);
+      el.getSelectResultList = (response) => response.items;
+
+      await typeKeyword(el, 'sp');
+
+      expect(el.data).toEqual([{ id: 1, name: 'Spain' }]);
+    });
+  });
+
+  describe('Form Association', () => {
+    it('is form-associated, same as dile-select-ajax-overlay', async () => {
+      mockAxios([]);
+      const el = await renderCrudSelect(`
+        <dile-ajax-select-crud-overlay endpoint="/api/countries" idProperty="id" displayProperty="name"></dile-ajax-select-crud-overlay>
+      `);
+
+      expect(el.internals).toBeTruthy();
+    });
+  });
+});

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

@@ -1 +1,2 @@
-export { DileAjaxSelectCrud } from './src/DileAjaxSelectCrud.js';
+export { DileAjaxSelectCrud } from './src/DileAjaxSelectCrud.js';
+export { DileAjaxSelectCrudOverlay } from './src/DileAjaxSelectCrudOverlay.js';

package/components/ajax-select-crud/src/DileAjaxSelectCrudOverlay.js

@@ -0,0 +1,80 @@
+import { DileAxios } from '../../../lib/DileAxios.js';
+import { DileSelectAjaxOverlay } from '@dile/ui/components/select/index.js';
+
+export class DileAjaxSelectCrudOverlay extends DileAxios(DileSelectAjaxOverlay) {
+
+  static get properties() {
+    return {
+      maxResults: { type: Number },
+      pageParamName: { type: String },
+      getSelectResultList: { type: Object },
+    };
+  }
+
+  constructor() {
+    super();
+  }
+
+  searchValueInitial() {
+    let request = this.axiosInstance.get(`${this.endpoint}/${this.value}`);
+    request.then((response) => {
+      if (response.status == 200) {
+        let res = response.data;
+        if (res.error) {
+          this.registerError(res.data);
+        } else {
+          this.registerText(res.data);
+        }
+      } else {
+        this.registerError('Bad response code');
+      }
+    })
+      .catch(err => {
+        this.registerError(err);
+      });
+  }
+
+  loadData() {
+    this.loading = true;
+    let params = this.additionalQueryString || {};
+    if (this.pageParamName && this.maxResults) {
+      params[this.pageParamName] = this.maxResults;
+    }
+    params[this.queryStringVariable] = this.keyword;
+    let request = this.axiosInstance.get(this.endpoint, { params });
+    request.then((response) => {
+      if (response.status == 200) {
+        let res = response.data;
+        if (res.error) {
+          this.registerError(res.data);
+        } else {
+          this.registerData(res);
+        }
+      } else {
+        this.registerError('Bad response code');
+      }
+    })
+      .catch(err => {
+        this.registerError(err);
+      });
+  }
+
+  registerText(json) {
+    this.selectedText = json[this.displayProperty];
+    this.loading = false;
+  }
+
+  registerData(json) {
+    if(this.getSelectResultList) {
+      this.data = this.getSelectResultList(json);
+    } else {
+      this.data = this.getResultData(json);
+    }
+    this.updateComplete.then(() => {
+      this.loading = false;
+      if (this.keyword.length > 0 && this.data.length > 0) {
+        this.select?.open();
+      }
+    });
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.1.12",
+  "version": "2.2.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.4.6",
+    "@dile/ui": "^3.5.0",
     "axios": "^1.19.0",
     "lit": "^2.7.0 || ^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "57a54e50de1a24d64dcf478fa6d39624e1f775eb"
+  "gitHead": "817f0dfc3c345957ae7a63c113e22aa0f80a773f"
 }