underpost 2.8.878 → 2.8.882

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

@@ -1,6 +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, 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';
@@ -10,6 +10,11 @@ import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
 import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath, getQueryParams } from './Router.js';
+import { Scroll } from './Scroll.js';
+import { LoadingAnimation } from './LoadingAnimation.js';
+import { loggerFactory } from './Logger.js';
+
+const logger = loggerFactory(import.meta, { trace: true });
 
 const PanelForm = {
   Data: {},
@@ -33,6 +38,11 @@ const PanelForm = {
       originData: [],
       data: [],
       filesData: [],
+      skip: 0,
+      limit: 3, // Load 5 items per page
+      hasMore: true,
+      loading: false,
+      lasIdAvailable: null,
     };
 
     const formData = [
@@ -132,7 +142,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%',
@@ -172,6 +182,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`;
@@ -312,67 +331,104 @@ const PanelForm = {
         },
       });
 
-    const getPanelData = async () => {
-      const result = await DocumentService.get({
-        id: `public/?tags=${prefixTags.join(',')}${getQueryParams().cid ? `&cid=${getQueryParams().cid}` : ''}`,
-      });
+    const getPanelData = async (isLoadMore = false) => {
+      const panelData = PanelForm.Data[idPanel];
+      try {
+        if (panelData.loading || !panelData.hasMore) return;
+        panelData.loading = true;
 
-      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 = [];
-        for (const documentObject of result.data) {
-          let mdFileId, fileId;
-          let mdBlob, fileBlob;
-          let mdPlain, filePlain;
-
-          {
-            const {
-              data: [file],
-              status,
-            } = await FileService.get({ id: documentObject.mdFileId });
-
-            // const ext = file.name.split('.')[file.name.split('.').length - 1];
-            mdBlob = file;
-            mdPlain = await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
-            mdFileId = newInstance(mdPlain);
-          }
-          if (documentObject.fileId) {
-            const {
-              data: [file],
-              status,
-            } = await FileService.get({ id: documentObject.fileId._id });
-
-            // const ext = file.name.split('.')[file.name.split('.').length - 1];
-            fileBlob = file;
-            filePlain = undefined;
-            fileId = getSrcFromFileData(file);
+        if (!isLoadMore) {
+          // Reset for a fresh load
+          panelData.skip = 0;
+          panelData.hasMore = true;
+        }
+
+        const result = await DocumentService.get({
+          params: {
+            tags: prefixTags.join(','),
+            ...(getQueryParams().cid && { cid: getQueryParams().cid }),
+            skip: panelData.skip,
+            limit: panelData.limit,
+          },
+          id: 'public/',
+        });
+
+        if (result.status === 'success') {
+          if (!isLoadMore) {
+            panelData.originData = [];
+            panelData.filesData = [];
+            panelData.data = [];
           }
 
-          PanelForm.Data[idPanel].filesData.push({
-            id: documentObject._id,
-            _id: documentObject._id,
-            mdFileId: { mdBlob, mdPlain },
-            fileId: { fileBlob, filePlain },
-          });
+          panelData.originData.push(...newInstance(result.data.data));
+          panelData.lasIdAvailable = result.data.lastId;
+
+          for (const documentObject of result.data.data) {
+            let mdFileId, fileId;
+            let mdBlob, fileBlob;
+            let mdPlain, filePlain;
 
-          PanelForm.Data[idPanel].data.push({
-            id: documentObject._id,
-            title: documentObject.title,
-            createdAt: documentObject.createdAt,
-            tags: documentObject.tags.filter((t) => !prefixTags.includes(t)),
-            mdFileId: marked.parse(mdFileId),
-            userId: documentObject.userId._id,
-            fileId,
-            tools: Elements.Data.user.main.model.user._id === documentObject.userId._id,
-            _id: documentObject._id,
+            {
+              const {
+                data: [file],
+              } = await FileService.get({ id: documentObject.mdFileId });
+
+              // const ext = file.name.split('.')[file.name.split('.').length - 1];
+              mdBlob = file;
+              mdPlain = await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+              mdFileId = newInstance(mdPlain);
+            }
+            if (documentObject.fileId) {
+              const {
+                data: [file],
+              } = await FileService.get({ id: documentObject.fileId._id });
+
+              // const ext = file.name.split('.')[file.name.split('.').length - 1];
+              fileBlob = file;
+              filePlain = undefined;
+              fileId = getSrcFromFileData(file);
+            }
+
+            panelData.filesData.push({
+              id: documentObject._id,
+              _id: documentObject._id,
+              mdFileId: { mdBlob, mdPlain },
+              fileId: { fileBlob, filePlain },
+            });
+
+            panelData.data.push({
+              id: documentObject._id,
+              title: documentObject.title,
+              createdAt: documentObject.createdAt,
+              tags: documentObject.tags.filter((t) => !prefixTags.includes(t)),
+              mdFileId: marked.parse(mdFileId),
+              userId: documentObject.userId._id,
+              fileId,
+              tools: Elements.Data.user.main.model.user._id === documentObject.userId._id,
+              _id: documentObject._id,
+            });
+          }
+
+          panelData.skip += result.data.data.length;
+          panelData.hasMore = result.data.data.length === panelData.limit;
+          if (result.data.data.length === 0 || result.data.data.pop()._id === panelData.lasIdAvailable) {
+            LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+            panelData.hasMore = false;
+          }
+        } else {
+          NotificationManager.Push({
+            html: result.message,
+            status: result.status,
           });
+          panelData.hasMore = false;
         }
+      } catch (error) {
+        logger.error(error);
       }
+
+      await timer(250);
+      panelData.loading = false;
+      LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
     };
     const renderSrrPanelData = async () =>
       await panelRender({
@@ -420,40 +476,142 @@ const PanelForm = {
     let firsUpdateEvent = false;
     let lastCid;
     let lastUserId;
+    let loadingGetData = false;
     closeModalRouteChangeEvents[idPanel] = () => {
-      this.Data[idPanel].updatePanel();
+      setTimeout(() => {
+        this.Data[idPanel].updatePanel();
+      });
     };
-    this.Data[idPanel].updatePanel = async () => {
-      const cid = getQueryParams().cid ? getQueryParams().cid : '';
-      const forceUpdate = lastUserId !== Elements.Data.user.main.model.user._id;
-      if (lastCid === cid && !forceUpdate) return;
-      lastUserId = newInstance(Elements.Data.user.main.model.user._id);
-      lastCid = cid;
-      htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
-      await getPanelData();
-      htmls(
-        `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
-        await panelRender({ data: this.Data[idPanel].data }),
-      );
-      if (!firsUpdateEvent && options.firsUpdateEvent) {
-        firsUpdateEvent = true;
-        await options.firsUpdateEvent();
-      }
+    this.Data[idPanel].updatePanel = async (...args) => {
+      const _updatePanel = async (...args) => {
+        try {
+          const cid = getQueryParams().cid ? getQueryParams().cid : '';
+          const forceUpdate =
+            Elements.Data.user.main.model &&
+            Elements.Data.user.main.model.user &&
+            Elements.Data.user.main.model.user._id &&
+            lastUserId !== Elements.Data.user.main.model.user._id;
+
+          logger.warn(
+            {
+              idPanel,
+              cid,
+              forceUpdate,
+            },
+            JSON.stringify(Elements.Data.user.main.model.user, null, 4),
+          );
+
+          if (loadingGetData || (lastCid === cid && !forceUpdate)) return;
+          loadingGetData = true;
+          lastUserId = newInstance(Elements.Data.user.main.model.user._id);
+          lastCid = cid;
+
+          logger.warn('Init render panel data');
+
+          this.Data[idPanel] = {
+            ...this.Data[idPanel],
+            originData: [],
+            data: [],
+            filesData: [],
+            limit: 3, // Load 5 items per page
+            hasMore: true,
+            loading: false,
+          };
+
+          if (cid) this.Data[idPanel].skip = 0;
+
+          const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+          htmls(containerSelector, await renderSrrPanelData());
+
+          await getPanelData();
+
+          htmls(
+            containerSelector,
+            html`
+              <div class="in">${await panelRender({ data: this.Data[idPanel].data })}</div>
+              <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+            `,
+          );
+
+          if (
+            !this.Data[idPanel].lasIdAvailable ||
+            this.Data[idPanel].lasIdAvailable !==
+              this.Data[idPanel].originData[this.Data[idPanel].originData.length - 1]._id
+          )
+            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();
+          }
+        } catch (error) {
+          logger.error(error);
+        }
+      };
+
+      await _updatePanel(...args);
+      loadingGetData = false;
     };
     if (options.route) {
       listenQueryPathInstance({
         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;
+          PanelForm.Data[idPanel] = {
+            ...PanelForm.Data[idPanel],
+            originData: [],
+            data: [],
+            filesData: [],
+            skip: 0,
+            limit: 3, // Load 5 items per page
+            hasMore: true,
+            loading: false,
+          };
           setQueryPath({ path: options.route, queryPath: options.route === 'home' ? '?' : '' });
-          await this.Data[idPanel].updatePanel();
+          await PanelForm.Data[idPanel].updatePanel();
         };
     }
 

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

@@ -59,7 +59,7 @@ const getProxyPath = () => {
  * @returns {void | undefined} Returns `undefined` if the new path is the same as the current path, otherwise `void` (result of `history.pushState`).
  */
 const setPath = (path = '/', options = { removeSearch: false, removeHash: false }, stateStorage = {}, title = '') => {
-  logger.warn(`Set path input`, `${path}`);
+  // logger.warn(`Set path input`, `${path}`);
   if (!path) path = '/';
 
   let [inputPath, inputSearchHash] = `${path}`.split('?');
@@ -77,18 +77,18 @@ const setPath = (path = '/', options = { removeSearch: false, removeHash: false
     inputHash && !options.removeHash ? `#${inputHash}` : ''
   }`;
   const currentFullPath = `${window.location.pathname}${location.search}${location.hash}`;
-  logger.warn(`Set path output`, {
-    inputPath: inputPath,
-    inputSearch: inputSearch,
-    inputHash: inputHash,
-    sanitizedPath: sanitizedPath,
-    currentLocationSearch: location.search,
-    currentLocationHash: location.hash,
-    currentFullPath,
-    newFullPath,
-  });
+  // logger.warn(`Set path output`, {
+  //   inputPath: inputPath,
+  //   inputSearch: inputSearch,
+  //   inputHash: inputHash,
+  //   sanitizedPath: sanitizedPath,
+  //   currentLocationSearch: location.search,
+  //   currentLocationHash: location.hash,
+  //   currentFullPath,
+  //   newFullPath,
+  // });
   if (currentFullPath === newFullPath) {
-    logger.warn('Prevent overwriting same path', { currentFullPath, newFullPath });
+    // logger.warn('Prevent overwriting same path', { currentFullPath, newFullPath });
     return;
   }
   return history.pushState.call(history, stateStorage, title, newFullPath);
@@ -149,7 +149,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
   const { e, Routes } = options;
   const proxyPath = getProxyPath();
   let path = window.location.pathname;
-  logger.info(options);
+  // logger.info(options);
 
   for (let route of Object.keys(Routes())) {
     route = route.slice(1);
@@ -229,11 +229,11 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
  * @memberof PwaRouter
  */
 const closeModalRouteChangeEvent = (options = {}) => {
-  logger.warn('closeModalRouteChangeEvent', options);
+  // logger.warn('closeModalRouteChangeEvent', options);
   const { closedId } = options;
   if (!closedId) return;
   if (coreUI.find((id) => closedId.startsWith(id))) {
-    logger.warn('prevent core ui component close');
+    // logger.warn('prevent core ui component close');
     return;
   }
 

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

@@ -1,25 +1,89 @@
-import { append } from './VanillaJs.js';
+import { renderCssAttr } from './Css.js';
+import { append, s } from './VanillaJs.js';
+import { Modal } from './Modal.js';
 
 const ToolTip = {
   Tokens: {},
-  Render: async function (options = { container: '', htmlRender: '', id: '', classList: '' }) {
-    const { container, htmlRender, id } = options;
-    const tooltipId = 'tooltip-' + id;
-    append(
-      container,
-      html`
-        <style>
-          ${container}:hover .${tooltipId} {
-            visibility: visible;
-          }
-          .${tooltipId} {
-            visibility: hidden;
-          }
-        </style>
-        <div class="tooltip ${options?.classList ? `${options.classList} ` : ' '}${tooltipId}">${htmlRender}</div>
-      `,
-    );
-    return '';
+  Render: async function (
+    options = { container: '', htmlRender: '', id: '', classList: '', useVisibilityHover: false, useMenuBtn: false },
+  ) {
+    const { container, htmlRender, id, useVisibilityHover } = options;
+
+    if (useVisibilityHover) {
+      const tooltipId = 'tooltip-' + id;
+      append(
+        container,
+        html`
+          <style>
+            ${container}:hover .${tooltipId} {
+              visibility: visible;
+            }
+            .${tooltipId} {
+              visibility: hidden;
+            }
+          </style>
+          <div class="tooltip ${options?.classList ? `${options.classList} ` : ' '}${tooltipId}">${htmlRender}</div>
+        `,
+      );
+      return;
+    }
+
+    const containerEl = s(container);
+    if (!containerEl) return;
+
+    const tooltipId = `tooltip-${id}`;
+    const tooltip = html`
+      <div
+        class="fix fix-tooltip ${tooltipId}"
+        style="${renderCssAttr({
+          style: {
+            'z-index': 10,
+            position: 'absolute',
+            opacity: 0,
+            transition: 'opacity 0.2s ease-in-out',
+            'pointer-events': 'none',
+          },
+        })}"
+      >
+        ${htmlRender}
+      </div>
+    `;
+    append('body', tooltip);
+
+    const tooltipEl = s(`.${tooltipId}`);
+
+    containerEl.addEventListener('mouseenter', () => {
+      if (
+        options.useMenuBtn &&
+        s(
+          `.btn-icon-menu-mode-${Modal.Data['modal-menu'].options.mode === 'slide-menu-right' ? 'left' : 'right'}`,
+        ).classList.contains('hide')
+      )
+        return;
+
+      const containerRect = containerEl.getBoundingClientRect();
+      const tooltipRect = tooltipEl.getBoundingClientRect();
+
+      let top = containerRect.bottom + window.scrollY + 5;
+      let left = containerRect.left + window.scrollX + containerRect.width / 2 - tooltipRect.width / 2;
+
+      // Adjust if it goes off-screen
+      if (left < 0) left = 5;
+      if (left + tooltipRect.width > window.innerWidth) {
+        left = window.innerWidth - tooltipRect.width - 5;
+      }
+      if (top + tooltipRect.height > window.innerHeight) {
+        top = containerRect.top + window.scrollY - tooltipRect.height - 5;
+      }
+
+      tooltipEl.style.top = `${top}px`;
+      tooltipEl.style.left = `${left}px`;
+      tooltipEl.style.opacity = '1';
+    });
+
+    containerEl.addEventListener('mouseleave', () => {
+      tooltipEl.style.opacity = '0';
+    });
   },
 };
 

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

@@ -34,7 +34,7 @@ const Translate = {
   Render: function (keyLang, placeholder, options = { disableTextFormat: false }) {
     if (!(keyLang in this.Data)) {
       // TODO: add translate package or library for this case
-      logger.warn('translate key lang does not exist: ', keyLang);
+      // logger.warn('translate key lang does not exist: ', keyLang);
       return options.disableTextFormat ? keyLang : textFormatted(keyLang);
     }
     if (placeholder) this.Data[keyLang].placeholder = placeholder;

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

@@ -5,6 +5,7 @@
  */
 
 import { s4 } from './CommonJs.js';
+import { windowGetH, windowGetW } from './windowGetDimensions.js';
 
 /*
 
@@ -232,10 +233,10 @@ const fullScreenIn = () => {
  * @memberof VanillaJS
  */
 const getResponsiveData = () => {
-  const inner = { width: window.innerWidth, height: window.innerHeight };
+  const inner = { width: windowGetW(), height: windowGetH() };
   return inner.width > inner.height
-    ? { ...inner, minValue: window.innerHeight, maxValue: window.innerWidth, minType: 'height', maxType: 'width' }
-    : { ...inner, minValue: window.innerWidth, maxValue: window.innerHeight, minType: 'width', maxType: 'height' };
+    ? { ...inner, minValue: windowGetH(), maxValue: windowGetW(), minType: 'height', maxType: 'width' }
+    : { ...inner, minValue: windowGetW(), maxValue: windowGetH(), minType: 'width', maxType: 'height' };
 };
 
 /**
@@ -389,6 +390,8 @@ function hexToRgbA(hex) {
   throw new Error('Invalid Hex');
 }
 
+const htmlStrSanitize = (str) => (str ? str.replace(/<\/?[^>]+(>|$)/g, '').trim() : '');
+
 export {
   s,
   htmls,
@@ -416,4 +419,5 @@ export {
   getDataFromInputFile,
   getLang,
   hexToRgbA,
+  htmlStrSanitize,
 };