@dile/crud 2.9.4 → 2.9.5

package/components/crud/crud.spec.js

@@ -360,3 +360,94 @@ describe('dile-crud list/grid view switch', () => {
     expect(el.listElement.viewMode).toBe('item');
   });
 });
+
+describe('dile-crud scope and refresh', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  async function createCrud() {
+    const config = new CrudConfigBuilder('https://example.test/api/invoices', {
+      customization: {
+        disableInsert: true,
+        disableHelp: true,
+        disableKeywordSearch: true,
+        disableSort: true,
+        disableFilter: true,
+        disablePagination: true,
+        hideCheckboxSelection: true,
+      },
+      templates: { item: (item) => html`<span>${item.name}</span>` },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud');
+    el.config = config;
+    el.belongsTo = 'customer';
+    el.relationId = '10';
+    document.body.appendChild(el);
+    await el.updateComplete;
+    const list = el.listElement;
+    await list.updateComplete;
+    await list.elservice.updateComplete;
+
+    // Intercept the outgoing requests instead of hitting the network,
+    // and let the initial load (fired on start) settle first.
+    const requests = [];
+    const ajax = list.elservice.ajaxget;
+    ajax.generateRequest = () => requests.push({ url: ajax.url, data: ajax.data });
+    list.elservice.delayTime = 10;
+    await wait(250);
+    requests.length = 0;
+    return { el, list, requests, ajax };
+  }
+
+  it('setScope() updates belongsTo and relationId and reloads the list once from page 1', async () => {
+    const { el, list, requests, ajax } = await createCrud();
+    ajax.url = 'https://example.test/api/invoices?page=2';
+
+    el.setScope('supplier', '20');
+    expect(el.belongsTo).toBe('supplier');
+    expect(el.relationId).toBe('20');
+    await el.updateComplete;
+    await list.updateComplete;
+    await wait(50);
+
+    expect(list.belongsTo).toBe('supplier');
+    expect(list.relationId).toBe('20');
+    expect(requests).toHaveLength(1);
+    expect(requests[0].url).toBe('https://example.test/api/invoices');
+    expect(requests[0].data.belongsTo).toBe('supplier');
+    expect(requests[0].data.relationId).toBe('20');
+  });
+
+  it('setScope() without arguments clears the scope', async () => {
+    const { el, list, requests } = await createCrud();
+
+    el.setScope();
+    await el.updateComplete;
+    await list.updateComplete;
+    await wait(50);
+
+    expect(el.belongsTo).toBe('');
+    expect(el.relationId).toBe('');
+    expect(requests).toHaveLength(1);
+    expect(requests[0].data.belongsTo).toBeUndefined();
+    expect(requests[0].data.relationId).toBeUndefined();
+  });
+
+  it('refresh() keeps the current page and refresh({ resetPage: true }) goes back to page 1', async () => {
+    const { el, requests, ajax } = await createCrud();
+    const pagedUrl = 'https://example.test/api/invoices?page=2';
+
+    ajax.url = pagedUrl;
+    el.refresh();
+    await wait(50);
+    expect(requests.at(-1).url).toBe(pagedUrl);
+
+    el.refresh({ resetPage: true });
+    await wait(50);
+    expect(requests.at(-1).url).toBe('https://example.test/api/invoices');
+  });
+});

package/components/crud/src/DileCrud.js

@@ -525,8 +525,13 @@ export class DileCrud extends DileI18nMixin(DileCrudMixin(LitElement)) {
         this.refresh();
     }
 
-    refresh() {
-        this.listElement.refresh();
+    refresh({ resetPage = false } = {}) {
+        this.listElement.refresh({ resetPage });
+    }
+
+    setScope(belongsTo = '', relationId = '') {
+        this.belongsTo = belongsTo;
+        this.relationId = relationId;
     }
 
     setCustomizationOption(optionName, value) {

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

@@ -371,3 +371,85 @@ describe('dile-crud-list grid template integration', () => {
     expect(el.shadowRoot.querySelector('dile-crud-data-grid')).toBeTruthy();
   });
 });
+
+describe('dile-crud-list scope changes and page reset', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  async function createList({ belongsTo, relationId } = {}) {
+    const config = new CrudConfigBuilder('https://example.test/api/invoices', {
+      templates: { item: (item) => html`<span>${item.name}</span>` },
+    }).getConfig();
+
+    const el = document.createElement('dile-crud-list');
+    el.disableLoadOnStart = true;
+    el.config = config;
+    if (belongsTo !== undefined) el.belongsTo = belongsTo;
+    if (relationId !== undefined) el.relationId = relationId;
+    document.body.appendChild(el);
+    await el.updateComplete;
+    await el.elservice.updateComplete;
+
+    // Intercept the outgoing requests instead of hitting the network.
+    const requests = [];
+    const ajax = el.elservice.ajaxget;
+    ajax.generateRequest = () => requests.push({ url: ajax.url, data: ajax.data });
+    el.elservice.delayTime = 10;
+    return { el, requests, ajax };
+  }
+
+  it('does not fire an extra request on the initial render when scope is set from the start', async () => {
+    const { requests } = await createList({ belongsTo: 'customer', relationId: '10' });
+    await wait(50);
+    expect(requests).toHaveLength(0);
+  });
+
+  it('reloads from the first page with the new scope when belongsTo and relationId change', async () => {
+    const { el, requests, ajax } = await createList({ belongsTo: 'customer', relationId: '10' });
+    ajax.url = 'https://example.test/api/invoices?page=3';
+
+    let refreshEvents = 0;
+    el.addEventListener('crud-list-refresh', () => refreshEvents++);
+
+    el.belongsTo = 'supplier';
+    el.relationId = '20';
+    await el.updateComplete;
+    expect(el.loading).toBe(true);
+
+    await wait(50);
+    expect(refreshEvents).toBe(1);
+    expect(requests).toHaveLength(1);
+    expect(requests[0].url).toBe('https://example.test/api/invoices');
+    expect(requests[0].data.belongsTo).toBe('supplier');
+    expect(requests[0].data.relationId).toBe('20');
+  });
+
+  it('reloads when only relationId changes', async () => {
+    const { el, requests } = await createList({ belongsTo: 'customer', relationId: '10' });
+
+    el.relationId = '11';
+    await el.updateComplete;
+    await wait(50);
+
+    expect(requests).toHaveLength(1);
+    expect(requests[0].data.relationId).toBe('11');
+  });
+
+  it('keeps the current page on refresh() and goes back to page 1 on refresh({ resetPage: true })', async () => {
+    const { el, requests, ajax } = await createList();
+    const pagedUrl = 'https://example.test/api/invoices?page=3';
+
+    ajax.url = pagedUrl;
+    el.refresh();
+    await wait(50);
+    expect(requests.at(-1).url).toBe(pagedUrl);
+
+    el.refresh({ resetPage: true });
+    await wait(50);
+    expect(requests.at(-1).url).toBe('https://example.test/api/invoices');
+    expect(requests).toHaveLength(2);
+  });
+});

package/components/list/src/DileCrudList.js

@@ -132,6 +132,12 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         }
     }
 
+    willUpdate(changedProperties) {
+        if (this.hasUpdated && (changedProperties.has('belongsTo') || changedProperties.has('relationId'))) {
+            this.refresh({ resetPage: true });
+        }
+    }
+
     render() {
         return html`
             ${this.ajaxTemplate}
@@ -363,7 +369,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         this.elservice.goPrev();
     }
 
-    refresh() {
+    refresh({ resetPage = false } = {}) {
         this.dispatchEvent(new CustomEvent('crud-list-refresh', {
             bubbles: true,
             composed: true,
@@ -373,7 +379,7 @@ export class DileCrudList extends DileI18nMixin(DileLoading(LitElement)) {
         if (this.isSelectAllActive) {
             this.shadowRoot.querySelector('dile-crud-select-all').reset();
         }
-        this.elservice.refresh();
+        resetPage ? this.elservice.cleanAndRefresh() : this.elservice.refresh();
     }    
 
     setKeyword(keyword) {

package/components/list/src/DileCrudListService.js

@@ -166,7 +166,7 @@ export class DileCrudListService extends DileI18nMixin(LitElement) {
   cleanAndRefresh() {
     if(this.ajaxget) {
       this.ajaxget.url = this.cleanUrl;
-      this.refresh();
     }
+    this.refresh();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/crud",
-  "version": "2.9.4",
+  "version": "2.9.5",
   "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": "eb8d274006be88ab2b44ed574f5c2829f27a2ec3"
+  "gitHead": "388965a96f6e0d8da0fdadb2729eaa4b04b3bba1"
 }