underpost 2.8.872 → 2.8.873

package/src/client/components/core/LogIn.js

@@ -24,8 +24,9 @@ const LogIn = {
   Event: {},
   Trigger: async function (options) {
     const { user } = options;
-    await Webhook.register({ user });
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
+    if (!user || user.role === 'guest') return;
+    await Webhook.register({ user });
     if (s(`.session`))
       htmls(
         `.session`,
@@ -72,19 +73,18 @@ const LogIn = {
           imageSrc,
         };
       }
+      htmls(
+        `.action-btn-profile-log-in-render`,
+        html`<div class="abs center top-box-profile-img-container">
+          <img
+            class="abs center top-box-profile-img"
+            ${this.Scope.user.main.model.user.profileImage
+              ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
+              : ``}
+          />
+        </div>`,
+      );
     }
-
-    htmls(
-      `.action-btn-profile-log-in-render`,
-      html`<div class="abs center top-box-profile-img-container">
-        <img
-          class="abs center top-box-profile-img"
-          ${this.Scope.user.main.model.user.profileImage
-            ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
-            : ``}
-        />
-      </div>`,
-    );
   },
   Render: async function () {
     setTimeout(async () => {
@@ -103,13 +103,7 @@ const LogIn = {
           if ('model' in inputData) body[inputData.model] = s(`.${inputData.id}`).value;
         }
         const result = await UserService.post({ id: 'auth', body });
-        if (result.status === 'success') {
-          await Auth.sessionIn(result);
-          setTimeout(() => {
-            if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
-            if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
-          });
-        }
+
         if (result.status === 'error' && result.message.match('attempts')) {
           htmls(`.login-attempt-warn-value`, result.message.split(':')[1]);
           s(`.login-attempt-warn-container`).classList.remove('hide');
@@ -119,6 +113,8 @@ const LogIn = {
           htmls(`.login-attempt-warn-value0`, result.message.split(':')[1]);
           s(`.login-attempt-warn-container0`).classList.remove('hide');
         } else s(`.login-attempt-warn-container0`).classList.add('hide');
+
+        if (result.status === 'success') await Auth.sessionIn(result);
         NotificationManager.Push({
           html: result.status === 'success' ? Translate.Render(`${result.status}-user-log-in`) : result.message,
           status: result.status,
@@ -189,9 +185,6 @@ const LogIn = {
       </form>
     `;
   },
-  cleanMainUser: () => {
-    LogIn.Scope.user.main.model.user = {};
-  },
 };
 
 export { LogIn };

package/src/client/components/core/LogOut.js

@@ -4,11 +4,11 @@ import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
 import { Webhook } from './Webhook.js';
+import { NotificationManager } from './NotificationManager.js';
 
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    LogIn.cleanMainUser();
     await Webhook.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))
@@ -41,6 +41,10 @@ const LogOut = {
       s('.btn-log-out').onclick = async (e) => {
         e.preventDefault();
         await Auth.sessionOut();
+        NotificationManager.Push({
+          html: Translate.Render(`success-logout`),
+          status: 'success',
+        });
       };
     });
     // Translate.Render('confirm-logout')

package/src/client/components/core/Pagination.js

@@ -1,14 +1,207 @@
-const Pagination = {
-  Render: async ({ id }) => {
-    return html`
+import { getQueryParams, setQueryParams } from './Router.js';
+
+class AgPagination extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._gridId = null;
+    const queryParams = getQueryParams();
+    this._currentPage = parseInt(queryParams.page, 10) || 1;
+    this._limit = parseInt(queryParams.limit, 10) || 10;
+    this._totalPages = 1;
+    this._totalItems = 0;
+    this.handlePageChange = this.handlePageChange.bind(this);
+    this.handleLimitChange = this.handleLimitChange.bind(this);
+  }
+
+  static get observedAttributes() {
+    return ['grid-id', 'current-page', 'total-pages', 'total-items', 'limit'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    switch (name) {
+      case 'grid-id':
+        this._gridId = newValue;
+        break;
+      case 'current-page':
+        this._currentPage = parseInt(newValue, 10) || this._currentPage;
+        break;
+      case 'total-pages':
+        this._totalPages = parseInt(newValue, 10) || 1;
+        break;
+      case 'total-items':
+        this._totalItems = parseInt(newValue, 10) || 0;
+        break;
+      case 'limit':
+        this._limit = parseInt(newValue, 10) || this._limit;
+        break;
+    }
+    this.update();
+  }
+
+  connectedCallback() {
+    this.render();
+    this.addEventListeners();
+    this.update();
+  }
+
+  disconnectedCallback() {
+    // Event listeners on shadow DOM are garbage collected with the component
+  }
+
+  handlePageChange(newPage) {
+    if (newPage < 1 || newPage > this._totalPages || newPage === this._currentPage) {
+      return;
+    }
+    this._currentPage = newPage;
+    setQueryParams({ page: newPage, limit: this._limit });
+    this.dispatchEvent(new CustomEvent('page-change', { detail: { page: newPage } }));
+  }
+
+  handleLimitChange(event) {
+    const newLimit = parseInt(event.target.value, 10);
+    if (newLimit === this._limit) {
+      return;
+    }
+    this._limit = newLimit;
+    this._currentPage = 1; // Reset to first page on limit change
+    setQueryParams({ page: 1, limit: newLimit });
+    this.dispatchEvent(new CustomEvent('limit-change', { detail: { limit: newLimit } }));
+  }
+
+  update() {
+    if (!this.shadowRoot.querySelector('#page-info')) return;
+
+    const isFirstPage = this._currentPage === 1;
+    const isLastPage = this._currentPage === this._totalPages;
+
+    this.shadowRoot.querySelector('#first-page').disabled = isFirstPage;
+    this.shadowRoot.querySelector('#prev-page').disabled = isFirstPage;
+    this.shadowRoot.querySelector('#next-page').disabled = isLastPage;
+    this.shadowRoot.querySelector('#last-page').disabled = isLastPage;
+
+    const startItem = this._totalItems > 0 ? (this._currentPage - 1) * this._limit + 1 : 0;
+    const endItem = Math.min(this._currentPage * this._limit, this._totalItems);
+
+    this.shadowRoot.querySelector('#summary-info').textContent = `${startItem} - ${endItem} of ${this._totalItems}`;
+    this.shadowRoot.querySelector('#page-info').textContent = `Page ${this._currentPage} of ${this._totalPages}`;
+
+    const limitSelector = this.shadowRoot.querySelector('#limit-selector');
+    if (limitSelector.value != this._limit) {
+      limitSelector.value = this._limit;
+    }
+
+    this.renderPageButtons();
+  }
+
+  renderPageButtons() {
+    const pageButtonsContainer = this.shadowRoot.querySelector('#page-buttons');
+    pageButtonsContainer.innerHTML = '';
+
+    const maxButtons = 5;
+    let startPage = Math.max(1, this._currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(this._totalPages, startPage + maxButtons - 1);
+
+    if (endPage - startPage + 1 < maxButtons) {
+      startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      const button = document.createElement('button');
+      button.textContent = i;
+      button.disabled = i === this._currentPage;
+      if (i === this._currentPage) {
+        button.classList.add('active');
+      }
+      button.addEventListener('click', () => this.handlePageChange(i));
+      pageButtonsContainer.appendChild(button);
+    }
+  }
+
+  addEventListeners() {
+    this.shadowRoot.querySelector('#first-page').addEventListener('click', () => this.handlePageChange(1));
+    this.shadowRoot
+      .querySelector('#prev-page')
+      .addEventListener('click', () => this.handlePageChange(this._currentPage - 1));
+    this.shadowRoot
+      .querySelector('#next-page')
+      .addEventListener('click', () => this.handlePageChange(this._currentPage + 1));
+    this.shadowRoot
+      .querySelector('#last-page')
+      .addEventListener('click', () => this.handlePageChange(this._totalPages));
+    this.shadowRoot.querySelector('#limit-selector').addEventListener('change', this.handleLimitChange);
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = html`
       <style>
-        .pagination-container-${id} {
+        :host {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 8px;
+          font-family: sans-serif;
+          font-size: 14px;
+          gap: 8px;
+        }
+        button {
+          border: 1px solid #ccc;
+          background-color: #f0f0f0;
+          padding: 6px 12px;
+          cursor: pointer;
+          border-radius: 4px;
+        }
+        button:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        button.active {
+          border-color: #007bff;
+          background-color: #007bff;
+          color: white;
+        }
+        #page-info {
+          min-width: 80px;
+          text-align: center;
+        }
+        #page-buttons {
+          display: flex;
+          gap: 4px;
+        }
+        .summary-panel,
+        .page-summary-panel {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+        #limit-selector {
+          border: 1px solid #ccc;
+          background-color: #f0f0f0;
+          padding: 6px 12px;
+          border-radius: 4px;
         }
       </style>
-
-      <div class="in pagination-container-${id}">test pagination</div>
+      <div class="summary-panel">
+        <span id="summary-info"></span>
+      </div>
+      <button id="first-page">First</button>
+      <button id="prev-page">Previous</button>
+      <div class="page-summary-panel">
+        <div id="page-buttons"></div>
+        <span id="page-info"></span>
+      </div>
+      <button id="next-page">Next</button>
+      <button id="last-page">Last</button>
+      <select id="limit-selector">
+        <option value="10">10</option>
+        <option value="20">20</option>
+        <option value="50">50</option>
+        <option value="100">100</option>
+      </select>
     `;
-  },
-};
+  }
+}
+
+customElements.define('ag-pagination', AgPagination);
 
-export { Pagination };
+export { AgPagination };

package/src/client/components/core/Router.js

@@ -1,5 +1,5 @@
 /**
- * Vanilla JavaScript module for manipulating the DOM.
+ * Router module for handling routing in a PWA application.
  * @module src/client/components/core/Router.js
  * @namespace PwaRouter
  */
@@ -245,7 +245,8 @@ const closeModalRouteChangeEvent = (options = {}) => {
 
   for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event]();
   if (topModalId) Modal.setTopModalCallback(topModalId);
-  setPath(`${getProxyPath()}${Modal.Data[topModalId]?.options?.route || 'home'}`);
+  setPath(`${getProxyPath()}${Modal.Data[topModalId]?.options?.route ?? ''}`);
+  setDocTitle(Modal.Data[topModalId]?.options?.route ?? '');
 };
 
 /**
@@ -255,7 +256,7 @@ const closeModalRouteChangeEvent = (options = {}) => {
  * @param {string} options.route - The route associated with the modal view.
  * @memberof PwaRouter
  */
-const handleModalViewRoute = (options = { route: 'home' }) => {
+const handleModalViewRoute = (options = { route: '' }) => {
   const { route } = options;
   if (!route) return;
 
@@ -270,6 +271,31 @@ const handleModalViewRoute = (options = { route: 'home' }) => {
   }
 };
 
+/**
+ * Sets or updates query parameters in the URL.
+ * It preserves the existing path, hash, and other query parameters.
+ *
+ * @param {Object.<string, string|number>} newParams - An object of query parameters to set or update.
+ *        If a value is `null` or `undefined`, the parameter will be removed.
+ * @param {object} [options={ replace: true }] - Options for history manipulation.
+ * @param {boolean} [options.replace=true] - If true, uses `history.replaceState` instead of `history.pushState`.
+ * @memberof PwaRouter
+ */
+const setQueryParams = (newParams, options = { replace: true }) => {
+  const url = new URL(window.location.href);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value === null || value === undefined) {
+      url.searchParams.delete(key);
+    } else {
+      url.searchParams.set(key, value);
+    }
+  });
+
+  const newPath = url.pathname + url.search + url.hash;
+
+  history.pushState(history.state, '', newPath);
+};
+
 export {
   RouterEvents,
   closeModalRouteChangeEvents,
@@ -284,4 +310,5 @@ export {
   getQueryParams,
   getProxyPath,
   setPath,
+  setQueryParams,
 };

package/src/client/components/core/SignUp.js

@@ -53,8 +53,7 @@ const SignUp = {
           status: result.status,
         });
         if (result.status === 'success') {
-          await Auth.sessionOut();
-          await Auth.signUpToken(result);
+          await Auth.sessionIn(result);
           s(`.btn-close-${options.idModal}`).click();
         }
       });

package/src/client/components/default/LogInDefault.js

@@ -1,17 +1,11 @@
-import { UserService } from '../../services/user/user.service.js';
 import { Auth } from '../core/Auth.js';
 import { LogIn } from '../core/LogIn.js';
-import { s } from '../core/VanillaJs.js';
 import { ElementsDefault } from './ElementsDefault.js';
 
 const LogInDefault = async function () {
   LogIn.Event['LogInDefault'] = async (options) => {
     const { token, user } = options;
     ElementsDefault.Data.user.main.model.user = user;
-    s(`.main-btn-log-in`).style.display = 'none';
-    s(`.main-btn-sign-up`).style.display = 'none';
-    s(`.main-btn-log-out`).style.display = null;
-    s(`.main-btn-account`).style.display = null;
   };
   const { user } = await Auth.sessionIn();
   ElementsDefault.Data.user.main.model.user = user;

package/src/client/components/default/LogOutDefault.js

@@ -1,25 +1,9 @@
-import { Auth } from '../core/Auth.js';
 import { LogOut } from '../core/LogOut.js';
-import { NotificationManager } from '../core/NotificationManager.js';
-import { Translate } from '../core/Translate.js';
-import { s } from '../core/VanillaJs.js';
 import { ElementsDefault } from './ElementsDefault.js';
 
 const LogOutDefault = async function () {
   LogOut.Event['LogOutDefault'] = async (result = { user: { _id: '' } }) => {
     ElementsDefault.Data.user.main.model.user = result.user;
-
-    s(`.main-btn-log-out`).style.display = 'none';
-    s(`.main-btn-account`).style.display = 'none';
-    s(`.main-btn-log-in`).style.display = null;
-    s(`.main-btn-sign-up`).style.display = null;
-    if (s(`.modal-log-out`)) s(`.btn-close-modal-log-out`).click();
-    if (s(`.modal-account`)) s(`.btn-close-modal-account`).click();
-
-    NotificationManager.Push({
-      html: Translate.Render(`success-logout`),
-      status: 'success',
-    });
   };
 };
 

package/src/client/services/core/core.service.js

@@ -33,7 +33,11 @@ const getWsBaseUrl = (options = { id: '', endpoint: '', wsBasePath: '' }) =>
   }${options?.endpoint ? options.endpoint : ''}${options?.id ? `/${options.id}` : ''}`;
 
 const headersFactory = (headerId = '') => {
-  const headers = { Authorization: Auth.getJWT() }; // , mode: 'no-cors'
+  const headers = {
+    Authorization: Auth.getJWT(),
+    withCredentials: true,
+    credentials: 'include', // no cors: 'same-origin'
+  };
   switch (headerId) {
     case 'file':
       return headers;

package/src/client/services/default/default.management.js

@@ -7,6 +7,7 @@ import { loggerFactory } from '../../components/core/Logger.js';
 import { Modal } from '../../components/core/Modal.js';
 import { NotificationManager } from '../../components/core/NotificationManager.js';
 import { Translate } from '../../components/core/Translate.js';
+import { getQueryParams, RouterEvents, setQueryParams } from '../../components/core/Router.js';
 import { s } from '../../components/core/VanillaJs.js';
 import { DefaultService } from './default.service.js';
 
@@ -47,19 +48,48 @@ const columnDefFormatter = (obj, columnDefs, customFormat) => {
 
 const DefaultManagement = {
   Tokens: {},
+  loadTable: async function (id, options = { reload: true }) {
+    const { serviceId, columnDefs, customFormat } = this.Tokens[id];
+    const result = await this.Tokens[id].ServiceProvider.get({
+      page: this.Tokens[id].page,
+      limit: this.Tokens[id].limit,
+      id: this.Tokens[id].serviceOptions?.get?.id ?? undefined,
+    });
+    if (result.status === 'success') {
+      const { data, total, page, totalPages } = result.data;
+      this.Tokens[id].total = total;
+      this.Tokens[id].page = page;
+      this.Tokens[id].totalPages = totalPages;
+      const rowDataScope = data.map((row) => columnDefFormatter(row, columnDefs, customFormat));
+      if (options.reload) AgGrid.grids[this.Tokens[id].gridId].setGridOption('rowData', rowDataScope);
+      const paginationComp = s(`#ag-pagination-${this.Tokens[id].gridId}`);
+      paginationComp.setAttribute('current-page', this.Tokens[id].page);
+      paginationComp.setAttribute('total-pages', this.Tokens[id].totalPages);
+      paginationComp.setAttribute('total-items', this.Tokens[id].total);
+    }
+  },
   RenderTable: async function (options = DefaultOptions) {
     if (!options) options = DefaultOptions;
     const { serviceId, columnDefs, entity, defaultColKeyFocus, ServiceProvider, permissions } = options;
     logger.info('DefaultManagement RenderTable', options);
     const id = options?.idModal ? options.idModal : getId(this.Tokens, `${serviceId}-`);
     const gridId = `${serviceId}-grid-${id}`;
-    this.Tokens[id] = { gridId };
+    const queryParams = getQueryParams();
+    const page = parseInt(queryParams.page) || 1;
+    const limit = parseInt(queryParams.limit) || 10;
+    this.Tokens[id] = {
+      ...options,
+      gridId,
+      page,
+      limit,
+      total: 0,
+      totalPages: 1,
+    };
 
+    setQueryParams({ page, limit });
     setTimeout(async () => {
       // https://www.ag-grid.com/javascript-data-grid/data-update-transactions/
 
-      let rowDataScope = [];
-
       class RemoveActionGridRenderer {
         eGui;
         tokens;
@@ -110,6 +140,16 @@ const DefaultManagement = {
                 });
                 if (result.status === 'success') {
                   AgGrid.grids[gridId].applyTransaction({ remove: [params.data] });
+                  const token = DefaultManagement.Tokens[id];
+                  // if we are on the last page and we delete the last item, go to the previous page
+                  const newTotal = token.total - 1;
+                  const newTotalPages = Math.ceil(newTotal / token.limit);
+                  if (token.page > newTotalPages && newTotalPages > 0) {
+                    token.page = newTotalPages;
+                  }
+
+                  // reload the current page
+                  await DefaultManagement.loadTable(id, { reload: false });
                 }
               },
               { context: 'modal' },
@@ -142,13 +182,14 @@ const DefaultManagement = {
             : [],
         ),
       );
-      {
-        const result = await ServiceProvider.get();
-        if (result.status === 'success') {
-          rowDataScope = result.data.map((row) => columnDefFormatter(row, columnDefs, options.customFormat));
-          AgGrid.grids[gridId].setGridOption('rowData', rowDataScope);
-        }
-      }
+      DefaultManagement.loadTable(id);
+      // {
+      //   const result = await ServiceProvider.get();
+      //   if (result.status === 'success') {
+      //     rowDataScope = result.data.map((row) => columnDefFormatter(row, columnDefs, options.customFormat));
+      //     AgGrid.grids[gridId].setGridOption('rowData', rowDataScope);
+      //   }
+      // }
       s(`.management-table-btn-save-${id}`).onclick = () => {
         AgGrid.grids[gridId].stopEditing();
       };
@@ -168,9 +209,13 @@ const DefaultManagement = {
         // });
         if (result.status === 'success') {
           AgGrid.grids[gridId].applyTransaction({
-            add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+            add: [columnDefFormatter(rowObj, columnDefs, options.customFormat)],
             addIndex: 0,
           });
+          // AgGrid.grids[gridId].applyTransaction({
+          //   add: [columnDefFormatter(result.data, columnDefs, options.customFormat)],
+          //   addIndex: 0,
+          // });
           // AgGrid.grids[gridId].applyColumnState({
           //   state: [
           //     // { colId: 'country', sort: 'asc', sortIndex: 1 },
@@ -244,9 +289,34 @@ const DefaultManagement = {
           status: result.status,
         });
         if (result.status === 'success') {
-          AgGrid.grids[gridId].setGridOption('rowData', []);
+          DefaultManagement.loadTable(id);
         }
       });
+      s(`#ag-pagination-${gridId}`).addEventListener('page-change', async (event) => {
+        const token = DefaultManagement.Tokens[id];
+        token.page = event.detail.page;
+        await DefaultManagement.loadTable(id);
+      });
+      s(`#ag-pagination-${gridId}`).addEventListener('limit-change', async (event) => {
+        const token = DefaultManagement.Tokens[id];
+        token.limit = event.detail.limit;
+        token.page = 1; // Reset to first page
+        await DefaultManagement.loadTable(id);
+      });
+      RouterEvents[id] = async (...args) => {
+        const queryParams = getQueryParams();
+        const page = parseInt(queryParams.page) || 1;
+        const limit = parseInt(queryParams.limit) || 10;
+        const token = DefaultManagement.Tokens[id];
+
+        // Check if the pagination state in the URL is different from the current state
+        if (token.page !== page || token.limit !== limit) {
+          token.page = page;
+          token.limit = limit;
+          // Reload the table with the new pagination state from the URL
+          await DefaultManagement.loadTable(id);
+        }
+      };
     }, 1);
     return html`<div class="fl">
         ${await BtnIcon.Render({
@@ -274,6 +344,7 @@ const DefaultManagement = {
       <div class="in section-mp">
         ${await AgGrid.Render({
           id: gridId,
+          usePagination: true,
           darkTheme,
           gridOptions: {
             defaultColDef: {
@@ -327,7 +398,32 @@ const DefaultManagement = {
                   status: result.status,
                 });
                 if (result.status === 'success') {
-                  event.data._id = result.data[entity] ? result.data[entity]._id : result.data._id;
+                  this.Tokens[id].page = 1;
+                  await DefaultManagement.loadTable(id);
+                  // const newItemId = result.data?.[entity]?._id || result.data?._id;
+                  // The `event.node.id` is the temporary ID assigned by AG Grid.
+                  // const rowNode = AgGrid.grids[gridId].getRowNode(event.node.id);
+                  setQueryParams({ page: 1, limit: this.Tokens[id].limit });
+
+                  let rowNode;
+                  AgGrid.grids[gridId].forEachLeafNode((_rowNode) => {
+                    if (_rowNode.data._id === result.data._id) {
+                      rowNode = _rowNode;
+                    }
+                  });
+                  if (rowNode) {
+                    const newRow = columnDefFormatter(result.data, columnDefs, options.customFormat);
+                    // Add a temporary flag to the new row data.
+                    newRow._new = true;
+                    // Update the row data with the data from the server, which includes the new permanent `_id`.
+                    rowNode.setData(newRow);
+                    // The `rowClassRules` will automatically apply the 'row-new-highlight' class.
+                    // Now, remove the flag after a delay to remove the highlight.
+                    // setTimeout(() => {
+                    //   delete newRow._new;
+                    //   rowNode.setData(newRow);
+                    // }, 2000);
+                  }
                 }
               } else {
                 const body = event.data ? event.data : {};
@@ -336,11 +432,12 @@ const DefaultManagement = {
                   html: result.status === 'error' ? result.message : `${Translate.Render('success-update-item')}`,
                   status: result.status,
                 });
-              }
-              if (result.status === 'success') {
-                AgGrid.grids[gridId].applyTransaction({
-                  update: [event.data],
-                });
+                if (result.status === 'success') {
+                  AgGrid.grids[gridId].applyTransaction({
+                    update: [event.data],
+                  });
+                  DefaultManagement.loadTable(id, { reload: false });
+                }
               }
             },
           },

package/src/client/services/default/default.service.js

@@ -47,9 +47,13 @@ const DefaultService = {
           return reject(error);
         }),
     ),
-  get: (options = { id: '', body: {} }) =>
-    new Promise((resolve, reject) =>
-      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+  get: (options = { id: '', body: {}, page: 1, limit: 10 }) => {
+    const { id, page, limit } = options;
+    const url = new URL(getApiBaseUrl({ id, endpoint }));
+    url.searchParams.append('page', page);
+    url.searchParams.append('limit', limit);
+    return new Promise((resolve, reject) =>
+      fetch(url.toString(), {
         method: 'GET',
         headers: headersFactory(),
       })
@@ -64,7 +68,8 @@ const DefaultService = {
           logger.error(error);
           return reject(error);
         }),
-    ),
+    );
+  },
   delete: (options = { id: '', body: {} }) =>
     new Promise((resolve, reject) =>
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {