underpost 2.8.637 → 2.8.646

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

@@ -40,18 +40,6 @@ const CalendarCore = {
 
     const titleIcon = html`<i class="fas fa-calendar-alt"></i>`;
 
-    const getSrrData = () => {
-      this.Data[options.idModal].data = range(0, 5).map((i) => {
-        return {
-          id: `event-${i}`,
-          description: `Event ${s4()}${s4()}${s4()}`,
-          start: new Date().toTimeString(),
-          end: new Date().toTimeString(),
-        };
-      });
-    };
-    getSrrData();
-
     const getPanelData = async () => {
       const result = await EventSchedulerService.get({
         id: `${getQueryParams().cid ? getQueryParams().cid : Auth.getToken() ? 'creatorUser' : ''}`,
@@ -235,35 +223,9 @@ const CalendarCore = {
     ];
 
     setTimeout(() => {
-      const resizeModal = () => {
-        Modal.Data[options.idModal].onObserverListener[options.idModal] = () => {
-          if (s(`.main-body-calendar-${options.idModal}`))
-            s(`.main-body-calendar-${options.idModal}`).style.height = `${
-              s(`.${options.idModal}`).offsetHeight - Modal.headerTitleHeight
-            }px`;
-        };
-        Modal.Data[options.idModal].onObserverListener[options.idModal]();
-      };
-      setTimeout(resizeModal);
-      RouterEvents[`${options.idModal}-main-body`] = ({ route }) => {
-        if (route === 'calendar') {
-          setTimeout(() => {
-            resizeModal();
-          }, 400);
-        }
-      };
-
       s(`.close-calendar-container`).onclick = () => {
         s(`.calendar-container`).classList.add('hide');
         s(`.main-body-calendar-${options.idModal}`).classList.remove('hide');
-        htmls(
-          `.style-calendar`,
-          html`<style>
-            .modal-calendar {
-              overflow: hidden;
-            }
-          </style>`,
-        );
       };
     });
 
@@ -305,14 +267,6 @@ const CalendarCore = {
                 // renderCalendar();
                 CalendarCore.Data[options.idModal].calendar.setOption('height', 700);
                 Translate.Event['fullcalendar-lang']();
-                htmls(
-                  `.style-calendar`,
-                  html`<style>
-                    .modal-calendar {
-                      overflow: auto;
-                    }
-                  </style>`,
-                );
               },
             },
           ],
@@ -404,18 +358,11 @@ const CalendarCore = {
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
 
-    let delayBlock = false;
+    let lastCid;
     this.Data[options.idModal].updatePanel = async () => {
-      if (delayBlock) return;
-      else {
-        delayBlock = true;
-        const _currentPath = `${location.pathname}${location.search}`;
-        setTimeout(() => {
-          delayBlock = false;
-          if (`${location.pathname}${location.search}` !== _currentPath) this.Data[options.idModal].updatePanel();
-        }, 1000);
-      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
+      if (lastCid === cid) return;
+      lastCid = cid;
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
         // if (Auth.getToken())
@@ -425,39 +372,22 @@ const CalendarCore = {
       }
     };
 
-    if (options.route)
+    if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          setTimeout(() => {
-            CalendarCore.Data[options.idModal].updatePanel();
-          });
+          CalendarCore.Data[options.idModal].updatePanel();
         },
       });
-
-    // if (options.route === 'home')
-    setTimeout(() => {
-      CalendarCore.Data[options.idModal].updatePanel();
-    });
-
+      if (!options.parentIdModal)
+        Modal.Data['modal-menu'].onHome[idPanel] = async () => {
+          lastCid = undefined;
+          setQueryPath({ path: options.route, queryPath: '' });
+          await this.Data[idPanel].updatePanel();
+        };
+    }
     return html`
-      <style>
-        .main-body-calendar-${options.idModal} {
-          overflow: auto;
-        }
-        .${idPanel}-form {
-          max-width: 750px !important;
-        }
-      </style>
-      <div class="style-calendar">
-        <style>
-          .modal-calendar {
-            overflow: hidden;
-          }
-        </style>
-      </div>
-
       <div class="in main-body-calendar-${options.idModal}">${await panelRender()}</div>
       <style>
         .calendar-container {
@@ -515,13 +445,11 @@ const CalendarCore = {
 
         .calendar-buttons-container {
           padding-bottom: 15px;
-          top: ${Modal.headerTitleHeight}px;
           height: 60px;
-          z-index: 4;
         }
       </style>
       <div class="in calendar-container hide">
-        <div class="stq modal calendar-buttons-container">
+        <div class="in modal calendar-buttons-container">
           ${await BtnIcon.Render({
             class: `inl section-mp btn-custom close-calendar-container flr`,
             label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,

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

@@ -577,7 +577,8 @@ const getCurrentTrace = () => {
   try {
     _stack;
   } catch (error) {
-    return error.stack.split('is not defined')[1];
+    console.error(error);
+    return error;
   }
 };
 

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

@@ -16,7 +16,7 @@ const EventsUI = {
       if (complete) {
         complete = false;
         await LoadingAnimation.spinner.play(loadingContainer ? loadingContainer : id);
-        await LoadingAnimation.bar.play(id);
+        if (options.context !== 'modal') await LoadingAnimation.bar.play(id);
         try {
           await logic(e);
         } catch (error) {
@@ -26,7 +26,7 @@ const EventsUI = {
             html: error?.message ? error.message : error ? error : 'Event error',
           });
         }
-        LoadingAnimation.bar.stop(id);
+        if (options.context !== 'modal') LoadingAnimation.bar.stop(id);
         await LoadingAnimation.spinner.stop(loadingContainer ? loadingContainer : id);
         complete = true;
         return;

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

@@ -323,50 +323,54 @@ const FileExplorer = {
 
             downloadFile(new Blob([new Uint8Array(file.data.data)], { type: params.data.mimetype }), params.data.name);
           });
-          EventsUI.onClick(`.btn-file-delete-${params.data._id}`, async (e) => {
-            e.preventDefault();
-            {
-              const confirmResult = await Modal.RenderConfirm({
-                html: async () => {
-                  return html`
-                    <div class="in section-mp" style="text-align: center">
-                      ${Translate.Render('confirm-delete-item')}
-                      <br />
-                      "${params.data.title}"
-                    </div>
-                  `;
-                },
-                id: `delete-${params.data._id}`,
-              });
-              if (confirmResult.status !== 'confirm') return;
+          EventsUI.onClick(
+            `.btn-file-delete-${params.data._id}`,
+            async (e) => {
+              e.preventDefault();
+              {
+                const confirmResult = await Modal.RenderConfirm({
+                  html: async () => {
+                    return html`
+                      <div class="in section-mp" style="text-align: center">
+                        ${Translate.Render('confirm-delete-item')}
+                        <br />
+                        "${params.data.title}"
+                      </div>
+                    `;
+                  },
+                  id: `delete-${params.data._id}`,
+                });
+                if (confirmResult.status !== 'confirm') return;
 
-              const { data, status, message } = await FileService.delete({
-                id: params.data.fileId,
+                const { data, status, message } = await FileService.delete({
+                  id: params.data.fileId,
+                });
+                NotificationManager.Push({
+                  html: status,
+                  status,
+                });
+                if (status === 'error') return;
+              }
+              const { data, status, message } = await DocumentService.delete({
+                id: params.data._id,
               });
               NotificationManager.Push({
                 html: status,
                 status,
               });
               if (status === 'error') return;
-            }
-            const { data, status, message } = await DocumentService.delete({
-              id: params.data._id,
-            });
-            NotificationManager.Push({
-              html: status,
-              status,
-            });
-            if (status === 'error') return;
-
-            documentInstance = documentInstance.filter((f) => f._id !== params.data._id);
-            const format = FileExplorer.documentDataFormat({ document: documentInstance, location });
-            files = format.files;
-            folders = format.folders;
-            // AgGrid.grids[gridFileId].setGridOption('rowData', files);
-            // const selectedData = gridApi.getSelectedRows();
-            AgGrid.grids[gridFileId].applyTransaction({ remove: [params.data] });
-            AgGrid.grids[gridFolderId].setGridOption('rowData', folders);
-          });
+
+              documentInstance = documentInstance.filter((f) => f._id !== params.data._id);
+              const format = FileExplorer.documentDataFormat({ document: documentInstance, location });
+              files = format.files;
+              folders = format.folders;
+              // AgGrid.grids[gridFileId].setGridOption('rowData', files);
+              // const selectedData = gridApi.getSelectedRows();
+              AgGrid.grids[gridFileId].applyTransaction({ remove: [params.data] });
+              AgGrid.grids[gridFolderId].setGridOption('rowData', folders);
+            },
+            { context: 'modal' },
+          );
         });
       }
 
@@ -400,49 +404,53 @@ const FileExplorer = {
         `;
 
         setTimeout(() => {
-          EventsUI.onClick(`.btn-folder-delete-${id}`, async (e) => {
-            const confirmResult = await Modal.RenderConfirm({
-              html: async () => {
-                return html`
-                  <div class="in section-mp" style="text-align: center">
-                    ${Translate.Render('confirm-delete-item')}
-                    <br />
-                    "${params.data.location}"
-                  </div>
-                `;
-              },
-              id: `delete-${id}`,
-            });
-            if (confirmResult.status !== 'confirm') return;
+          EventsUI.onClick(
+            `.btn-folder-delete-${id}`,
+            async (e) => {
+              const confirmResult = await Modal.RenderConfirm({
+                html: async () => {
+                  return html`
+                    <div class="in section-mp" style="text-align: center">
+                      ${Translate.Render('confirm-delete-item')}
+                      <br />
+                      "${params.data.location}"
+                    </div>
+                  `;
+                },
+                id: `delete-${id}`,
+              });
+              if (confirmResult.status !== 'confirm') return;
 
-            e.preventDefault();
-            const idFilesDelete = [];
-            for (const file of documentInstance.filter(
-              (f) => FileExplorer.locationFormat({ f }) === params.data.location, // .startsWith(params.data.location),
-            )) {
-              {
-                const { data, status, message } = await FileService.delete({
-                  id: file.fileId._id,
-                });
+              e.preventDefault();
+              const idFilesDelete = [];
+              for (const file of documentInstance.filter(
+                (f) => FileExplorer.locationFormat({ f }) === params.data.location, // .startsWith(params.data.location),
+              )) {
+                {
+                  const { data, status, message } = await FileService.delete({
+                    id: file.fileId._id,
+                  });
+                }
+                {
+                  idFilesDelete.push(file._id);
+                  const { data, status, message } = await DocumentService.delete({
+                    id: file._id,
+                  });
+                }
               }
-              {
-                idFilesDelete.push(file._id);
-                const { data, status, message } = await DocumentService.delete({
-                  id: file._id,
-                });
-              }
-            }
-            NotificationManager.Push({
-              html: Translate.Render('success-delete'),
-              status: 'success',
-            });
-            documentInstance = documentInstance.filter((f) => !idFilesDelete.includes(f._id));
-            const format = FileExplorer.documentDataFormat({ document: documentInstance, location });
-            files = format.files;
-            folders = format.folders;
-            AgGrid.grids[gridFileId].setGridOption('rowData', files);
-            AgGrid.grids[gridFolderId].setGridOption('rowData', folders);
-          });
+              NotificationManager.Push({
+                html: Translate.Render('success-delete'),
+                status: 'success',
+              });
+              documentInstance = documentInstance.filter((f) => !idFilesDelete.includes(f._id));
+              const format = FileExplorer.documentDataFormat({ document: documentInstance, location });
+              files = format.files;
+              folders = format.folders;
+              AgGrid.grids[gridFileId].setGridOption('rowData', files);
+              AgGrid.grids[gridFolderId].setGridOption('rowData', folders);
+            },
+            { context: 'modal' },
+          );
         });
       }
 

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

@@ -85,6 +85,7 @@ const Modal = {
       onExpandUiListener: {},
       onBarUiOpen: {},
       onBarUiClose: {},
+      onHome: {},
       query: options.query ? `${window.location.search}` : undefined,
     };
     const setCenterRestore = () => {
@@ -1010,14 +1011,15 @@ const Modal = {
                   e.preventDefault();
                   window.history.forward();
                 });
-                EventsUI.onClick(`.action-btn-home`, () => s(`.main-btn-home`).click());
-                EventsUI.onClick(`.action-btn-app-icon`, () => s(`.action-btn-home`).click());
+                EventsUI.onClick(`.action-btn-home`, async () => {
+                  await Modal.onHomeRouterEvent();
+                  Object.keys(this.Data[idModal].onHome).map((keyListener) => this.Data[idModal].onHome[keyListener]());
+                });
+                EventsUI.onClick(`.action-btn-app-icon`, () => Modal.onHomeRouterEvent());
                 Keyboard.instanceMultiPressKey({
                   id: 'input-shortcut-global-escape',
                   keys: ['Escape'],
                   eventCallBack: () => {
-                    // if (s(`.main-btn-home`)) s(`.main-btn-home`).click();
-
                     if (s(`.btn-close-${this.currentTopModalId}`)) s(`.btn-close-${this.currentTopModalId}`).click();
                   },
                 });
@@ -1343,7 +1345,7 @@ const Modal = {
           s(`.btn-icon-menu-back`).classList.add('hide');
           if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.remove('hide');
         };
-        s(`.main-btn-home`).onclick = () => {
+        this.onHomeRouterEvent = async () => {
           for (const keyModal of Object.keys(this.Data)) {
             if (
               ![idModal, 'main-body-top', 'main-body']
@@ -1357,6 +1359,9 @@ const Modal = {
           setPath(getProxyPath());
           setDocTitle({ ...options.RouterInstance, route: '' });
         };
+        s(`.main-btn-home`).onclick = async () => {
+          await this.onHomeRouterEvent();
+        };
         EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
           if (s(`.btn-icon-menu-mode-right`).classList.contains('hide')) {
@@ -1620,6 +1625,7 @@ const Modal = {
       ...this.Data[idModal],
     };
   },
+  onHomeRouterEvent: () => {},
   currentTopModalId: '',
   zIndexSync: function ({ idModal }) {
     setTimeout(() => {
@@ -1731,7 +1737,7 @@ const Modal = {
         titleClass: 'hide',
         style: {
           width: '300px',
-          height: '350px',
+          height: '400px',
           overflow: 'hidden',
           'z-index': '11',
           resize: 'none',
@@ -1765,7 +1771,6 @@ const Modal = {
   },
   headerTitleHeight: 40,
   actionBtnCenter: function () {
-    // if (!s(`.btn-close-modal-menu`).classList.contains('hide')) return s(`.main-btn-home`).click();
     if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {
       return s(`.btn-close-modal-menu`).click();
     }

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

@@ -55,7 +55,7 @@ const Panel = {
     const openPanelForm = () => {
       s(`.${idPanel}-form-body`).classList.remove('hide');
       s(`.btn-${idPanel}-add`).classList.add('hide');
-      s(`.${scrollClassContainer}`).style.overflow = 'hidden';
+      // s(`.${scrollClassContainer}`).style.overflow = 'hidden';
       if (options.customButtons) {
         let customBtnIndex = -1;
         for (const dataBtn of options.customButtons) {
@@ -89,12 +89,16 @@ const Panel = {
               htmls(`.${idPanel}-cell-col-a-${id}`, render);
             },
           });
-        EventsUI.onClick(`.${idPanel}-btn-delete-${id}`, async (e) => {
-          logger.warn('delete', obj);
-          const { status } = await options.on.remove({ e, data: obj });
-          if (status === 'error') return;
-          if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
-        });
+        EventsUI.onClick(
+          `.${idPanel}-btn-delete-${id}`,
+          async (e) => {
+            logger.warn('delete', obj);
+            const { status } = await options.on.remove({ e, data: obj });
+            if (status === 'error') return;
+            if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
+          },
+          { context: 'modal' },
+        );
         EventsUI.onClick(`.${idPanel}-btn-edit-${id}`, async () => {
           logger.warn('edit', obj);
           if (obj._id) Panel.Tokens[idPanel].editId = obj._id;
@@ -121,7 +125,7 @@ const Panel = {
           if (options.onClick) await options.onClick({ payload });
         };
       });
-
+      if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
       return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}">
         <div class="fl ${idPanel}-tools session-fl-log-in  ${obj.tools ? '' : 'hide'}">
           ${await BtnIcon.Render({
@@ -244,7 +248,7 @@ const Panel = {
     };
 
     let render = '';
-    let renderForm = html` <div class="in modal stq" style="top: 0px; z-index: 1; padding-bottom: 5px">
+    let renderForm = html` <div class="in modal" style="top: 0px; z-index: 1; padding-bottom: 5px">
         ${await BtnIcon.Render({
           class: `inl section-mp btn-custom btn-${idPanel}-close`,
           label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
@@ -417,49 +421,6 @@ const Panel = {
     `;
 
     setTimeout(async () => {
-      const resizeParentModal = () => {
-        if (options.parentIdModal) {
-          Modal.Data[options.parentIdModal].onObserverListener[`form-panel-${options.parentIdModal}`] = () => {
-            if (s(`.${idPanel}-form-container`))
-              s(`.${idPanel}-form-container`).style.maxHeight = `${
-                s(`.${options.parentIdModal}`).offsetHeight - Modal.headerTitleHeight
-              }px`;
-          };
-          Modal.Data[options.parentIdModal].onObserverListener[`form-panel-${options.parentIdModal}`]();
-        } else {
-          Responsive.Event[`${idPanel}-responsive`] = () => {
-            if (s(`.${idPanel}-form-container`))
-              s(`.${idPanel}-form-container`).style.maxHeight =
-                options.route === 'home' &&
-                s(`.${idPanel}-form-body`) &&
-                !s(`.${idPanel}-form-body`).classList.contains('hide') &&
-                !s(`.main-body-btn-ui-open`).classList.contains('hide')
-                  ? `${window.innerHeight}px`
-                  : `${window.innerHeight - heightTopBar - heightBottomBar}px`;
-          };
-          Responsive.Event[`${idPanel}-responsive`]();
-        }
-      };
-      if (options.route === 'home') {
-        Modal.Data['modal-menu'].onBarUiClose[`${idPanel}-responsive`] = () => {
-          resizeParentModal();
-        };
-
-        Modal.Data['modal-menu'].onBarUiOpen[`${idPanel}-responsive`] = () => {
-          resizeParentModal();
-        };
-      }
-      setTimeout(resizeParentModal);
-      if (options.route) {
-        RouterEvents[options.parentIdModal] = ({ route }) => {
-          if (route === options.route) {
-            setTimeout(() => {
-              resizeParentModal();
-            }, 350);
-          }
-        };
-      }
-
       const validators = await Validator.instance(formData);
 
       s(`.${idPanel}-form`).onsubmit = (e) => {
@@ -581,7 +542,6 @@ const Panel = {
           padding: 10px;
           cursor: pointer;
           min-height: 400px;
-          overflow: hidden;
         }
         .${idPanel}:hover {
           background: #ffffff;
@@ -651,9 +611,7 @@ const Panel = {
         }
       </style>
       <div class="${idPanel}-container">
-        <div
-          class="stq modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}"
-        >
+        <div class="in modal ${idPanel}-form-container ${options.formContainerClass ? options.formContainerClass : ''}">
           <div class="in ${idPanel}-form-header">
             ${await BtnIcon.Render({
               class: `inl section-mp btn-custom btn-${idPanel}-add ${

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

@@ -1,4 +1,4 @@
-import { getCapVariableName, getId, newInstance, random, range, timer, uniqueArray } from './CommonJs.js';
+import { getCapVariableName, newInstance, random, range, uniqueArray } from './CommonJs.js';
 import { marked } from 'marked';
 import {
   getBlobFromUint8ArrayFile,
@@ -12,7 +12,6 @@ import { NotificationManager } from './NotificationManager.js';
 import { DocumentService } from '../../services/document/document.service.js';
 import { FileService } from '../../services/file/file.service.js';
 import { getSrcFromFileData } from './Input.js';
-import { Auth } from './Auth.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
@@ -383,7 +382,7 @@ const PanelForm = {
     };
     const renderSrrPanelData = async () =>
       await panelRender({
-        data: range(0, 5).map((i) => ({
+        data: range(0, 0).map((i) => ({
           id: i,
           title: html`<div class="fl">
             <div
@@ -424,19 +423,12 @@ const PanelForm = {
           ssr: true,
         })),
       });
-    let delayBlock = false;
     let firsUpdateEvent = false;
+    let lastCid;
     this.Data[idPanel].updatePanel = async () => {
-      if (delayBlock) return;
-      else {
-        delayBlock = true;
-        const _currentPath = `${location.pathname}${location.search}`;
-        setTimeout(() => {
-          delayBlock = false;
-          if (`${location.pathname}${location.search}` !== _currentPath) this.Data[idPanel].updatePanel();
-        }, 1000);
-      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
+      if (lastCid === cid) return;
+      lastCid = cid;
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
       await getPanelData();
@@ -449,24 +441,21 @@ const PanelForm = {
         await options.firsUpdateEvent();
       }
     };
-    if (options.route)
+    if (options.route) {
       listenQueryPathInstance({
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          // if (!PanelForm.Data[idPanel].sessionIn)
           await this.Data[idPanel].updatePanel();
         },
       });
-
-    // if (options.route === 'home') setTimeout(this.Data[idPanel].updatePanel);
-    setTimeout(() => {
-      // if (
-      //   options.route !== 'home' &&
-      //   (!PanelForm.Data[idPanel].originData || PanelForm.Data[idPanel].originData.length === 0)
-      // )
-      this.Data[idPanel].updatePanel();
-    });
+      if (!options.parentIdModal)
+        Modal.Data['modal-menu'].onHome[idPanel] = async () => {
+          lastCid = undefined;
+          setQueryPath({ path: options.route, queryPath: '' });
+          await this.Data[idPanel].updatePanel();
+        };
+    }
 
     if (options.parentIdModal) {
       htmls(`.html-${options.parentIdModal}`, await renderSrrPanelData());

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

@@ -52,7 +52,9 @@ const LoadRouter = function (RouterInstance) {
 
 const setQueryPath = (options = { path: '', queryPath: '' }, queryKey = 'cid') => {
   const { queryPath, path } = options;
-  const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}/`}${queryPath ? `?${queryKey}=${queryPath}` : ''}`;
+  const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}/`}${
+    typeof queryPath === 'string' ? `?${queryKey}=${queryPath}` : ''
+  }`;
   const currentUri = `${window.location.pathname}${location.search}`;
   if (currentUri !== newUri && currentUri !== `${newUri}/`) setPath(newUri);
 };