@dile/crud 2.1.12 → 2.2.1

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/components/many-relation/index.js

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

package/components/many-relation/many-relation-overlay.js

@@ -0,0 +1,5 @@
+import { DileManyRelationOverlay } from './src/DileManyRelationOverlay.js';
+
+if (!customElements.get('dile-many-relation-overlay')) {
+  customElements.define('dile-many-relation-overlay', DileManyRelationOverlay);
+}

package/components/many-relation/many-relation.spec.js

@@ -0,0 +1,101 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './many-relation.js';
+import './many-relation-overlay.js';
+
+const VARIANTS = [
+  { tag: 'dile-many-relation', selectTag: 'dile-ajax-select-crud' },
+  { tag: 'dile-many-relation-overlay', selectTag: 'dile-ajax-select-crud-overlay' },
+];
+
+describe.each(VARIANTS)('$tag (select: $selectTag)', ({ tag, selectTag }) => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.axiosInstance;
+  });
+
+  function mockAxios({ get = vi.fn(), post = vi.fn(), delete: del = vi.fn() } = {}) {
+    window.axiosInstance = { get, post, delete: del };
+    return window.axiosInstance;
+  }
+
+  async function renderManyRelation(attrs = '') {
+    document.body.innerHTML = `
+      <${tag}
+        endpointGet="/api/tags"
+        endpointList="/api/board-games/1/tags"
+        endpointAdd="/api/board-games/1/tags"
+        endpointRemove="/api/board-games/1/tags"
+        idProperty="id"
+        displayProperty="name"
+        ${attrs}
+      ></${tag}>
+    `;
+    const el = document.body.querySelector(tag);
+    await el.updateComplete;
+    return el;
+  }
+
+  function select(el) {
+    return el.shadowRoot.getElementById('theselect');
+  }
+
+  it(`renders a ${selectTag} as the select control`, async () => {
+    mockAxios({ get: vi.fn(() => Promise.resolve({ status: 200, data: [] })) });
+    const el = await renderManyRelation();
+
+    const theselect = select(el);
+    expect(theselect).toBeTruthy();
+    expect(theselect.tagName.toLowerCase()).toBe(selectTag);
+  });
+
+  it('loads the related items list from endpointList on connect', async () => {
+    const get = vi.fn(() =>
+      Promise.resolve({ status: 200, data: { data: [{ id: 1, name: 'Strategy' }] } })
+    );
+    mockAxios({ get });
+    const el = await renderManyRelation('loadFromEndpoint');
+    await vi.waitFor(() => expect(el._items).toEqual([{ id: 1, name: 'Strategy' }]));
+
+    expect(get).toHaveBeenCalledWith('/api/board-games/1/tags', { params: undefined });
+  });
+
+  it('adds the item selected through the select control', async () => {
+    const post = vi.fn(() => Promise.resolve({ status: 201, data: {} }));
+    const get = vi.fn(() => Promise.resolve({ status: 200, data: { data: [] } }));
+    mockAxios({ post, get });
+    const el = await renderManyRelation();
+
+    select(el).dispatchEvent(
+      new CustomEvent('element-changed', { detail: { value: '5' } })
+    );
+    await el.updateComplete;
+    expect(el._selectedId).toBe('5');
+
+    el.shadowRoot.querySelector('button.add-btn').click();
+    // adding successfully triggers a list auto-refresh; wait it out before mocks are torn down
+    await vi.waitFor(() => expect(get).toHaveBeenCalled());
+
+    expect(post).toHaveBeenCalledWith('/api/board-games/1/tags', { id: '5' }, undefined);
+  });
+
+  it('removes an item and dispatches many-relation-remove-success', async () => {
+    const del = vi.fn(() => Promise.resolve({ status: 200, data: {} }));
+    const get = vi.fn(() => Promise.resolve({ status: 200, data: { data: [] } }));
+    mockAxios({ get, delete: del });
+    const el = await renderManyRelation();
+    el.relatedItems = [{ id: 9, name: 'Party' }];
+
+    const removeListener = vi.fn();
+    el.addEventListener('many-relation-remove-success', removeListener);
+
+    await vi.waitFor(() =>
+      expect(el.shadowRoot.querySelector('button.remove-btn')).toBeTruthy()
+    );
+    el.shadowRoot.querySelector('button.remove-btn').click();
+    await vi.waitFor(() => expect(removeListener).toHaveBeenCalled());
+    // wait out the list auto-refresh triggered by the removal before mocks are torn down
+    await vi.waitFor(() => expect(get).toHaveBeenCalled());
+
+    expect(del).toHaveBeenCalledWith('/api/board-games/1/tags/9', {}, undefined);
+  });
+});

package/components/many-relation/src/DileManyRelation.js

@@ -1,4 +1,5 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, css } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
 import { DileI18nMixin } from '../../../lib/DileI18nMixin.js';
 import { addIcon, clearIcon } from '@dile/icons';
 import '../../ajax/ajax.js';
@@ -9,13 +10,15 @@ import '@dile/ui/components/input/input-message.js';
 import { labelStyles } from '@dile/ui/components/input/src/label-styles.js';
 
 export class DileManyRelation extends DileI18nMixin(LitElement) {
+  static selectTag = 'dile-ajax-select-crud';
+
   static styles = [
     labelStyles,
     css`
       :host {
         display: block;
       }
-      dile-ajax-select-crud{
+      #theselect {
           margin-bottom: 0;
       }
       .relation-item {
@@ -61,7 +64,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
         gap: 0.5rem;
         margin-bottom: 0.5rem;
       }
-      .add-row dile-ajax-select-crud {
+      .add-row #theselect {
         flex: 1;
       }
       button.add-btn dile-icon {
@@ -159,6 +162,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
   }
 
   render() {
+    const selectTag = unsafeStatic(this.constructor.selectTag);
     return html`
       <dile-ajax
         id="ajaxlist"
@@ -186,7 +190,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
           : ""
       }
       <div class="add-row">
-        <dile-ajax-select-crud
+        <${selectTag}
           id="theselect"
           endpoint="${this.endpointGet}"
           displayProperty="${this.displayProperty}"
@@ -200,7 +204,7 @@ export class DileManyRelation extends DileI18nMixin(LitElement) {
           .getSelectResultList="${this.getSelectResultList}"
           language="${this.language}"
           @element-changed="${this._onSelectChanged}"
-        ></dile-ajax-select-crud>
+        ></${selectTag}>
         ${!this.addOnSelect ? html`
           <button
             class="add-btn"

package/components/many-relation/src/DileManyRelationOverlay.js

@@ -0,0 +1,6 @@
+import { DileManyRelation } from './DileManyRelation.js';
+import '../../ajax-select-crud/ajax-select-crud-overlay.js';
+
+export class DileManyRelationOverlay extends DileManyRelation {
+  static selectTag = 'dile-ajax-select-crud-overlay';
+}

package/package.json

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