underpost 2.8.877 → 2.8.881

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,10 @@ const PanelForm = {
       originData: [],
       data: [],
       filesData: [],
+      skip: 0,
+      limit: 3, // Load 5 items per page
+      hasMore: true,
+      loading: false,
     };
 
     const formData = [
@@ -132,7 +141,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 +181,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 +330,103 @@ 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));
+
+          for (const documentObject of result.data) {
+            let mdFileId, fileId;
+            let mdBlob, fileBlob;
+            let mdPlain, filePlain;
+
+            {
+              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 },
+            });
 
-          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,
+            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.length;
+          panelData.hasMore = result.data.length === panelData.limit;
+          if (result.data.length < panelData.limit) {
+            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({
@@ -421,7 +475,9 @@ const PanelForm = {
     let lastCid;
     let lastUserId;
     closeModalRouteChangeEvents[idPanel] = () => {
-      this.Data[idPanel].updatePanel();
+      setTimeout(() => {
+        this.Data[idPanel].updatePanel();
+      });
     };
     this.Data[idPanel].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
@@ -429,12 +485,60 @@ const PanelForm = {
       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());
+
+      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();
@@ -445,15 +549,35 @@ 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;
+          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/VanillaJs.js

@@ -389,6 +389,8 @@ function hexToRgbA(hex) {
   throw new Error('Invalid Hex');
 }
 
+const htmlStrSanitize = (str) => (str ? str.replace(/<\/?[^>]+(>|$)/g, '').trim() : '');
+
 export {
   s,
   htmls,
@@ -416,4 +418,5 @@ export {
   getDataFromInputFile,
   getLang,
   hexToRgbA,
+  htmlStrSanitize,
 };

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

@@ -29,6 +29,8 @@ import { Recover } from '../core/Recover.js';
 import { DefaultManagement } from '../../services/default/default.management.js';
 import { Page500 } from '../core/500.js';
 import { Page404 } from '../core/404.js';
+import { PanelForm } from '../core/PanelForm.js';
+import { Chat } from '../core/Chat.js';
 
 const MenuDefault = {
   Data: {},
@@ -160,6 +162,34 @@ const MenuDefault = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('500')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-blog',
+            label: renderMenuLabel({
+              icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('blog')}</span>`,
+            }),
+            attrs: `data-id="blog"`,
+            tabHref: `${getProxyPath()}blog`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('blog')),
+          })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-chat',
+            label: html`${renderMenuLabel({
+              icon: html`<i class="far fa-comments"></i>`,
+              text: html`<span class="menu-label-text">${Translate.Render('chat')}</span>`,
+            })}
+            ${await Badge.Render({
+              id: 'main-btn-chat',
+              type: 'circle-red',
+              style: badgeNotificationMenuStyle,
+              classList: 'hide',
+            })}`,
+            attrs: `data-id="chat"`,
+            tabHref: `${getProxyPath()}chat`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
+          })}
         </div>
       `,
       barConfig: newInstance(barConfig),
@@ -181,47 +211,7 @@ const MenuDefault = {
       RouterInstance,
       heightTopBar,
       heightBottomBar,
-      htmlMainBody: async () => {
-        setTimeout(() => {
-          EventsUI.onClick('.get-started-button', (e) => {
-            e.preventDefault();
-            location.href = `https://www.nexodev.org/docs/?cid=src`;
-          });
-        });
-        return html`
-          <div class="landing-container">
-            <div class="content-wrapper">
-              <h1 class="animated-text">
-                <span class="greeting">Hello, World!</span>
-                <span class="subtitle">Welcome to Our Platform</span>
-              </h1>
-
-              <div class="features">
-                <div class="feature-card">
-                  <i class="icon">🚀</i>
-                  <h3>Fast & Reliable</h3>
-                  <p>Lightning-fast performance with 99.9% uptime</p>
-                </div>
-                <div class="feature-card">
-                  <i class="icon">🎨</i>
-                  <h3>Beautiful UI</h3>
-                  <p>Modern and intuitive user interface</p>
-                </div>
-                <div class="feature-card">
-                  <i class="icon">⚡</i>
-                  <h3>Powerful Features</h3>
-                  <p>Everything you need in one place</p>
-                </div>
-              </div>
-
-              <button class="cta-button get-started-button">
-                Get Started
-                <span class="button-icon">→</span>
-              </button>
-            </div>
-          </div>
-        `;
-      },
+      htmlMainBody: options.htmlMainBody,
     });
 
     ThemeEvents['main-theme-handler'] = () => {
@@ -626,6 +616,7 @@ const MenuDefault = {
         RouterInstance,
         heightTopBar,
         heightBottomBar,
+        observer: true,
       });
     });
 
@@ -672,6 +663,68 @@ const MenuDefault = {
         observer: true,
       });
     });
+
+    EventsUI.onClick(`.main-btn-blog`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      const idModal = 'modal-blog';
+      const routeModal = 'blog';
+      const idEvent = `form-panel-${idModal}`;
+      await Modal.Render({
+        id: idModal,
+        route: routeModal,
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<i class="fa-solid fa-file-invoice"></i>`,
+          text: Translate.Render('blog'),
+        }),
+        observer: true,
+        html: async () => {
+          setTimeout(async () => {
+            await PanelForm.instance({
+              idPanel: 'default-blog',
+              heightTopBar,
+              heightBottomBar,
+              defaultUrlImage: `${getProxyPath()}android-chrome-96x96.png`,
+              Elements: ElementsDefault,
+              parentIdModal: idModal,
+              scrollClassContainer: `html-${idModal}`,
+              route: routeModal,
+            });
+          });
+        },
+        handleType: 'bar',
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
+
+    EventsUI.onClick(`.main-btn-chat`, async () => {
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-chat',
+        route: 'chat',
+        barConfig,
+        title: renderViewTitle({
+          icon: html` <i class="far fa-comments"></i>`,
+          text: Translate.Render('chat'),
+        }),
+        html: async () => await Chat.Render({ idModal: 'modal-chat' }),
+        handleType: 'bar',
+        maximize: true,
+        observer: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+        heightTopBar,
+        heightBottomBar,
+        barMode,
+      });
+    });
   },
 };
 

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

@@ -27,6 +27,8 @@ const RoutesDefault = () => {
       render: () => s(`.main-btn-account`).click(),
     },
     '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
+    '/chat': { title: 'docs', render: () => s(`.main-btn-chat`).click() },
+    '/blog': { title: 'docs', render: () => s(`.main-btn-blog`).click() },
     '/recover': { title: 'recover', render: () => s(`.main-btn-recover`).click() },
     '/default-management': {
       title: 'default-management',

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

@@ -344,6 +344,7 @@ const DefaultManagement = {
       <div class="in section-mp">
         ${await AgGrid.Render({
           id: gridId,
+          parentModal: options.idModal,
           usePagination: true,
           darkTheme,
           gridOptions: {

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

@@ -0,0 +1,97 @@
+import { Auth } from '../../components/core/Auth.js';
+import { loggerFactory } from '../../components/core/Logger.js';
+import { getApiBaseUrl, headersFactory, payloadFactory } from '../core/core.service.js';
+
+const logger = loggerFactory(import.meta);
+
+logger.info('Load service');
+
+const endpoint = 'document';
+
+const DocumentService = {
+  post: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'POST',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  get: (options = { id: '' }) =>
+    new Promise((resolve, reject) => {
+      const url = new URL(getApiBaseUrl({ id: options.id, endpoint }));
+      if (options.params) {
+        Object.keys(options.params).forEach((key) => url.searchParams.append(key, options.params[key]));
+      }
+      fetch(url, {
+        method: 'GET',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        });
+    }),
+  delete: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'DELETE',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+  put: (options = { id: '', body: {} }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: options.id, endpoint }), {
+        method: 'PUT',
+        headers: headersFactory(),
+        credentials: 'include',
+        body: payloadFactory(options.body),
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
+};
+
+export { DocumentService };

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

@@ -33,6 +33,7 @@ const FileService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'GET',
         headers: headersFactory(),
+        credentials: 'include',
       })
         .then(async (res) => {
           return await res.json();
@@ -51,6 +52,7 @@ const FileService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'DELETE',
         headers: headersFactory(),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {

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

@@ -88,6 +88,7 @@ const UserService = {
       fetch(getApiBaseUrl({ id: options.id, endpoint }), {
         method: 'PUT',
         headers: headersFactory(options.headerId),
+        credentials: 'include',
         body: payloadFactory(options.body),
       })
         .then(async (res) => {

package/src/client/ssr/Render.js

@@ -5,7 +5,7 @@ SrrComponent = ({ title, ssrPath, buildId, ssrHeadComponents, ssrBodyComponents,
       <title>${title}</title>
       <link rel="icon" type="image/x-icon" href="${ssrPath}favicon.ico" />
       <meta charset="UTF-8" />
-      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <script>
         window.renderPayload = ${renderApi.JSONweb(renderPayload)};
       </script>

package/src/client/ssr/head/DefaultScripts.js

@@ -1,4 +1,6 @@
 SrrComponent = ({ ssrPath }) => html`
   <script type="text/javascript" src="${ssrPath}dist/validator/validator.min.js"></script>
   <script type="text/javascript" src="${ssrPath}dist/ag-grid-community/ag-grid-community.min.js"></script>
+  <script type="text/javascript" src="${ssrPath}dist/easymde/easymde.min.js"></script>
+  <link rel="stylesheet" href="${ssrPath}dist/easymde/easymde.min.css" />
 `;

package/src/client/ssr/head/Seo.js

@@ -7,6 +7,7 @@ SrrComponent = ({ title, author, keywords, description, themeColor, ssrPath, can
   <meta name="theme-color" content="${themeColor}" />
 
   <meta property="og:title" content="${title}" />
+  <meta property="og:type" content="website" />
   <meta property="og:description" content="${description}" />
   <meta property="og:image" content="${thumbnail}" />
   <meta property="og:url" content="${canonicalURL}" />