underpost 2.8.87 → 2.8.88

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

@@ -0,0 +1,207 @@
+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>
+        :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="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 { AgPagination };

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

@@ -2,17 +2,14 @@ import { getId, isValidDate, newInstance } from './CommonJs.js';
 import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
-import { Responsive } from '../core/Responsive.js';
 import { darkTheme, ThemeEvents } from './Css.js';
-import { append, getDataFromInputFile, getQueryParams, htmls, prepend, s } from './VanillaJs.js';
+import { append, getDataFromInputFile, htmls, s } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Translate } from './Translate.js';
 import { DropDown } from './DropDown.js';
-import { dynamicCol, renderCssAttr } from './Css.js';
+import { dynamicCol } from './Css.js';
 import { EventsUI } from './EventsUI.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
-import { Modal } from './Modal.js';
-import { RouterEvents } from './Router.js';
 import { RichText } from './RichText.js';
 import { loggerFactory } from './Logger.js';
 import { Badge } from './Badge.js';
@@ -117,6 +114,7 @@ const Panel = {
             options.originData().find((d) => d._id === obj._id || d.id === obj.id),
             options.filesData().find((d) => d._id === obj._id || d.id === obj.id),
           );
+          if (options.on.initEdit) await options.on.initEdit({ data: obj });
         });
         s(`.a-${payload._id}`).onclick = async (e) => {
           e.preventDefault();
@@ -470,11 +468,9 @@ const Panel = {
             s(`.${btnSelector}`).classList.remove('hide');
           }
         }
-        setTimeout(() => {
-          s(`.${idPanel}-form-body`).classList.add('hide');
-        });
+        s(`.${idPanel}-form-body`).classList.add('hide');
       };
-      s(`.btn-${idPanel}-add`).onclick = (e) => {
+      s(`.btn-${idPanel}-add`).onclick = async (e) => {
         e.preventDefault();
         // s(`.btn-${idPanel}-clean`).click();
         Panel.Tokens[idPanel].editId = undefined;
@@ -483,16 +479,20 @@ const Panel = {
         s(`.${scrollClassContainer}`).scrollTop = 0;
 
         openPanelForm();
+        if (options.on.initAdd) await options.on.initAdd();
       };
       if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
     });
 
     if (data.length > 0) for (const obj of data) render += await renderPanel(obj);
-    else
+    else {
       render += html`<div class="in" style="min-height: 200px">
         <div class="abs center"><i class="fas fa-exclamation-circle"></i> ${Translate.Render(`no-result-found`)}</div>
       </div>`;
 
+      if (options.on.noResultFound) setTimeout(options.on.noResultFound);
+    }
+
     this.Tokens[idPanel] = { idPanel, scrollClassContainer, formData, data, titleKey, subTitleKey, renderPanel };
 
     let customButtonsRender = '';

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

@@ -1,12 +1,6 @@
-import { getCapVariableName, newInstance, random, range, uniqueArray } from './CommonJs.js';
+import { getCapVariableName, newInstance, random, range, timer, uniqueArray } from './CommonJs.js';
 import { marked } from 'marked';
-import {
-  getBlobFromUint8ArrayFile,
-  getDataFromInputFile,
-  getQueryParams,
-  getRawContentFile,
-  htmls,
-} from './VanillaJs.js';
+import { append, getBlobFromUint8ArrayFile, getDataFromInputFile, getRawContentFile, htmls, s } from './VanillaJs.js';
 import { Panel } from './Panel.js';
 import { NotificationManager } from './NotificationManager.js';
 import { DocumentService } from '../../services/document/document.service.js';
@@ -15,7 +9,9 @@ import { getSrcFromFileData } from './Input.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
-import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath } from './Router.js';
+import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath, getQueryParams } from './Router.js';
+import { Scroll } from './Scroll.js';
+import { LoadingAnimation } from './LoadingAnimation.js';
 
 const PanelForm = {
   Data: {},
@@ -39,6 +35,10 @@ const PanelForm = {
       originData: [],
       data: [],
       filesData: [],
+      skip: 0,
+      limit: 3, // Load 5 items per page
+      hasMore: true,
+      loading: false,
     };
 
     const formData = [
@@ -138,7 +138,7 @@ const PanelForm = {
               `,
             });
           return await options.fileRender({
-            file: PanelForm.Data[idPanel].filesData.find((f) => f._id === options.data._id).fileId.fileBlob,
+            file: PanelForm.Data[idPanel].filesData.find((f) => f._id === options.data._id)?.fileId?.fileBlob,
             style: {
               overflow: 'auto',
               width: '100%',
@@ -178,6 +178,15 @@ const PanelForm = {
             }
             return { status: 'error' };
           },
+          initAdd: async function () {
+            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+          },
+          initEdit: async function ({ data }) {
+            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+          },
+          noResultFound: async function () {
+            LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+          },
           add: async function ({ data, editId }) {
             let mdFileId;
             const mdFileName = `${getCapVariableName(data.title)}.md`;
@@ -318,19 +327,36 @@ const PanelForm = {
         },
       });
 
-    const getPanelData = async () => {
+    const getPanelData = async (isLoadMore = false) => {
+      const panelData = PanelForm.Data[idPanel];
+      if (panelData.loading || !panelData.hasMore) return;
+      panelData.loading = true;
+
+      if (!isLoadMore) {
+        // Reset for a fresh load
+        panelData.skip = 0;
+        panelData.hasMore = true;
+      }
+
       const result = await DocumentService.get({
-        id: `public/?tags=${prefixTags.join(',')}${getQueryParams().cid ? `&cid=${getQueryParams().cid}` : ''}`,
+        params: {
+          tags: prefixTags.join(','),
+          ...(getQueryParams().cid && { cid: getQueryParams().cid }),
+          skip: panelData.skip,
+          limit: panelData.limit,
+        },
+        id: 'public/',
       });
 
-      NotificationManager.Push({
-        html: result.status === 'success' ? Translate.Render('success-get-posts') : result.message,
-        status: result.status,
-      });
       if (result.status === 'success') {
-        PanelForm.Data[idPanel].originData = newInstance(result.data);
-        PanelForm.Data[idPanel].filesData = [];
-        PanelForm.Data[idPanel].data = [];
+        if (!isLoadMore) {
+          panelData.originData = [];
+          panelData.filesData = [];
+          panelData.data = [];
+        }
+
+        panelData.originData.push(...newInstance(result.data));
+
         for (const documentObject of result.data) {
           let mdFileId, fileId;
           let mdBlob, fileBlob;
@@ -339,7 +365,6 @@ const PanelForm = {
           {
             const {
               data: [file],
-              status,
             } = await FileService.get({ id: documentObject.mdFileId });
 
             // const ext = file.name.split('.')[file.name.split('.').length - 1];
@@ -350,7 +375,6 @@ const PanelForm = {
           if (documentObject.fileId) {
             const {
               data: [file],
-              status,
             } = await FileService.get({ id: documentObject.fileId._id });
 
             // const ext = file.name.split('.')[file.name.split('.').length - 1];
@@ -359,14 +383,14 @@ const PanelForm = {
             fileId = getSrcFromFileData(file);
           }
 
-          PanelForm.Data[idPanel].filesData.push({
+          panelData.filesData.push({
             id: documentObject._id,
             _id: documentObject._id,
             mdFileId: { mdBlob, mdPlain },
             fileId: { fileBlob, filePlain },
           });
 
-          PanelForm.Data[idPanel].data.push({
+          panelData.data.push({
             id: documentObject._id,
             title: documentObject.title,
             createdAt: documentObject.createdAt,
@@ -378,7 +402,23 @@ const PanelForm = {
             _id: documentObject._id,
           });
         }
+
+        panelData.skip += result.data.length;
+        panelData.hasMore = result.data.length === panelData.limit;
+        if (result.data.length < panelData.limit) {
+          LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+        }
+      } else {
+        NotificationManager.Push({
+          html: result.message,
+          status: result.status,
+        });
+        panelData.hasMore = false;
       }
+
+      await timer(250);
+
+      panelData.loading = false;
     };
     const renderSrrPanelData = async () =>
       await panelRender({
@@ -426,10 +466,10 @@ const PanelForm = {
     let firsUpdateEvent = false;
     let lastCid;
     let lastUserId;
-    closeModalRouteChangeEvents[idPanel] = (newPath) => {
-      if (newPath.split('?')[0] === '/' && PanelForm.Data[idPanel].data && PanelForm.Data[idPanel].data.length === 0) {
+    closeModalRouteChangeEvents[idPanel] = () => {
+      setTimeout(() => {
         this.Data[idPanel].updatePanel();
-      }
+      });
     };
     this.Data[idPanel].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
@@ -437,13 +477,60 @@ const PanelForm = {
       if (lastCid === cid && !forceUpdate) return;
       lastUserId = newInstance(Elements.Data.user.main.model.user._id);
       lastCid = cid;
-      if (options.route === 'home') Modal.homeCid = newInstance(cid);
-      htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
+
+      if (cid) {
+        this.Data[idPanel] = {
+          ...this.Data[idPanel],
+          originData: [],
+          data: [],
+          filesData: [],
+          skip: 0,
+          limit: 3, // Load 5 items per page
+          hasMore: true,
+          loading: false,
+        };
+      }
+
+      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+      htmls(containerSelector, await renderSrrPanelData());
+
       await getPanelData();
+
       htmls(
-        `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
-        await panelRender({ data: this.Data[idPanel].data }),
+        containerSelector,
+        html`
+          <div class="in">${await panelRender({ data: this.Data[idPanel].data })}</div>
+          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+        `,
       );
+
+      LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
+
+      const scrollContainerSelector = `.modal-${options.route}`;
+
+      if (cid) {
+        LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+        return;
+      }
+      if (this.Data[idPanel].removeScrollEvent) {
+        this.Data[idPanel].removeScrollEvent();
+      }
+      const { removeEvent } = Scroll.setEvent(scrollContainerSelector, async (payload) => {
+        const panelData = PanelForm.Data[idPanel];
+        if (!panelData) return;
+
+        // Infinite scroll: load more items at bottom
+        if (payload.atBottom && panelData.hasMore && !panelData.loading) {
+          const oldDataCount = panelData.data.length;
+          await getPanelData(true); // isLoadMore = true
+          const newItems = panelData.data.slice(oldDataCount);
+          if (newItems.length > 0) {
+            for (const item of newItems) append(`.${idPanel}-render`, await Panel.Tokens[idPanel].renderPanel(item));
+          }
+        }
+      });
+      this.Data[idPanel].removeScrollEvent = removeEvent;
+
       if (!firsUpdateEvent && options.firsUpdateEvent) {
         firsUpdateEvent = true;
         await options.firsUpdateEvent();
@@ -454,15 +541,25 @@ const PanelForm = {
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          await this.Data[idPanel].updatePanel();
+          PanelForm.Data[idPanel] = {
+            ...PanelForm.Data[idPanel],
+            originData: [],
+            data: [],
+            filesData: [],
+            // skip: 0,
+            limit: 3, // Load 5 items per page
+            hasMore: true,
+            loading: false,
+          };
+          await PanelForm.Data[idPanel].updatePanel();
         },
       });
       if (!options.parentIdModal)
         Modal.Data['modal-menu'].onHome[idPanel] = async () => {
           lastCid = undefined;
           lastUserId = undefined;
-          setQueryPath({ path: options.route, queryPath: '' });
-          await this.Data[idPanel].updatePanel();
+          setQueryPath({ path: options.route, queryPath: options.route === 'home' ? '?' : '' });
+          await PanelForm.Data[idPanel].updatePanel();
         };
     }
 

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

@@ -3,11 +3,11 @@ import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
 import { EventsUI } from './EventsUI.js';
 import { Input } from './Input.js';
-import { LogIn } from './LogIn.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { getProxyPath, getQueryParams, s } from './VanillaJs.js';
+import { s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams } from './Router.js';
 
 const Recover = {
   Event: {},