@underpostnet/underpost 2.8.5 → 2.8.7

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;
   }
 };
 
@@ -890,8 +891,58 @@ const commitData = {
   },
 };
 
-const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
+const emotionsData = [
+  {
+    name: 'like',
+    ad_display: {
+      es: 'Me gusta',
+      en: 'Like',
+    },
+    emoji: '👍',
+  },
+  {
+    name: 'love',
+    ad_display: {
+      es: 'Me encanta',
+      en: 'Love',
+    },
+    emoji: '❤️',
+  },
+  {
+    name: 'haha',
+    ad_display: {
+      es: 'Me divierte',
+      en: 'Haha',
+    },
+    emoji: '😂',
+  },
+  {
+    name: 'wow',
+    ad_display: {
+      es: 'Me asombra',
+      en: 'Wow',
+    },
+    emoji: '😮',
+  },
+  {
+    name: 'sad',
+    ad_display: {
+      es: 'Me entristece',
+      en: 'Sad',
+    },
+    emoji: '😢',
+  },
+  {
+    name: 'angry',
+    ad_display: {
+      es: 'Me enoja',
+      en: 'Angry',
+    },
+    emoji: '😠',
+  },
+];
 
+const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
 const commonAdminGuard = (role) => userRoleEnum.indexOf(role) === userRoleEnum.indexOf('admin');
 const commonModeratorGuard = (role) => userRoleEnum.indexOf(role) <= userRoleEnum.indexOf('moderator');
 
@@ -954,4 +1005,5 @@ export {
   getCurrentTrace,
   userRoleEnum,
   commitData,
+  emotionsData,
 };

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

@@ -761,7 +761,6 @@ const renderWave = ({ id }) => {
 const cssTokensEffect = {};
 const cssTokensContainer = {};
 const cssEffect = async (containerSelector, event) => {
-  return;
   // Array.from(event.target.classList)
   let offsetX, offsetY;
   if (Array.from(event.srcElement.classList).includes('ripple') && cssTokensContainer[containerSelector]) {

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

@@ -396,8 +396,8 @@ const CssCoreDark = {
           text-align: center;
           background: #1a1a1a;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 30px;
+          padding: 5px 0px 5px 0px;
         }
         ::placeholder {
           color: #c6c4c4;
@@ -472,6 +472,7 @@ const CssCoreDark = {
           width: 260px;
           font-size: 20px;
           padding: 10px;
+          min-height: 45px;
         }
         .toggle-form-container {
           border: 2px solid #313131;
@@ -495,6 +496,7 @@ const CssCoreDark = {
           font-size: 20px;
           padding: 10px;
           text-align: center;
+          min-height: 45px;
         }
         .drop-zone-file-explorer {
           min-height: 300px;
@@ -522,6 +524,7 @@ const CssCoreDark = {
           margin: 5px 0 0 0;
           padding: 5px;
           font-size: 16px;
+          min-height: 40px;
         }
         .btn-input-extension:hover {
         }
@@ -701,8 +704,8 @@ const CssCoreLight = {
           text-align: center;
           background: #eaeaea;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 30px;
+          padding: 5px 0px 5px 0px;
         }
         ::placeholder {
           color: #333;
@@ -778,6 +781,7 @@ const CssCoreLight = {
           width: 260px;
           font-size: 20px;
           padding: 10px;
+          min-height: 45px;
         }
         .toggle-form-container {
           border-radius: 5px;
@@ -802,6 +806,7 @@ const CssCoreLight = {
           font-size: 20px;
           padding: 10px;
           text-align: center;
+          min-height: 45px;
         }
         .input-container-width {
           cursor: pointer;
@@ -839,6 +844,7 @@ const CssCoreLight = {
           margin: 5px 0 0 0;
           padding: 5px;
           font-size: 16px;
+          min-height: 40px;
         }
         .btn-input-extension:hover {
         }

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

@@ -1,4 +1,3 @@
-import { _VERSION, CoreService } from '../../services/core/core.service.js';
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { rgbToHex } from './CommonJs.js';
@@ -80,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/${_VERSION}`;
+        return `${getProxyPath()}docs/engine/${window.renderPayload.version.replace('v', '')}`;
       },
     },
     {

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

@@ -12,11 +12,11 @@ const EventsUI = {
     if (!s(id)) return;
     let complete = true;
     s(id)[type] = async function (e) {
-      cssEffect(id, e);
+      if (options.clickEffect) cssEffect(id, e);
       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/Input.js

@@ -88,8 +88,10 @@ const Input = {
               <div class="fl input-row-${id}">
                 <div class="in fll" style="width: 80%;">${inputElement}</div>
                 <div class="in fll btn-eye-password btn-eye-${id}" style="width: 20%;">
-                  <i class="fas fa-eye fa-eye-${id} eye-password"></i>
-                  <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                  <div class="abs center">
+                    <i class="fas fa-eye fa-eye-${id} eye-password"></i>
+                    <i class="fas fa-eye-slash fa-eye-slash-${id} eye-password" style="display: none"></i>
+                  </div>
                 </div>
               </div>
             `

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

@@ -19,8 +19,8 @@ const JoyStick = {
             /* border: 2px solid red; */
             left: 5px;
             bottom: 5px;
-            height: 200px;
-            width: 200px;
+            height: 175px;
+            width: 175px;
             z-index: 3;
           }
           .joy-img-background-${id} {

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

@@ -76,22 +76,11 @@ const LoadingAnimation = {
         'text-align': 'center',
       };
 
-      if (s(container).classList) {
-        const classes = Array.from(s(container).classList);
-        if (classes.find((e) => e.match('management-table-btn-mini'))) {
-          style.top = '-2px';
-          style.left = '-2px';
-        } else if (classes.find((e) => e.match('action-bar-box'))) {
-          style.top = '-30px';
-          style.left = '-12px';
-        }
-      }
-
       append(
         container,
         html`
           <div
-            class="in ${id}"
+            class="abs center ${id}"
             style="${renderCssAttr({
               style,
             })}"
@@ -145,6 +134,8 @@ const LoadingAnimation = {
         s(backgroundContainer).style.opacity = 0;
         setTimeout(async () => {
           s(backgroundContainer).style.display = 'none';
+          if (s(`.modal-menu`)) s(`.modal-menu`).classList.remove('hide');
+          if (s(`.main-body-btn-container`)) s(`.main-body-btn-container`).classList.remove('hide');
           if (callBack) callBack();
         }, 300);
       });

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

@@ -135,7 +135,7 @@ const LogIn = {
     return html`
       <div class="in">
         ${await BtnIcon.Render({
-          class: 'section-mp form-button btn-log-in-i-not-have-account',
+          class: 'in section-mp form-button btn-log-in-i-not-have-account',
           label: html`<i class="fas fa-user-plus"></i> ${Translate.Render(`i-not-have-account`)}
             <br />
             ${Translate.Render(`sign-up`)}`,
@@ -165,7 +165,7 @@ const LogIn = {
         </div>
         <div class="in">
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-log-in-forgot-password',
+            class: 'in section-mp form-button btn-log-in-forgot-password',
             label: html`<i class="fas fa-question-circle"></i> ${Translate.Render(`forgot-password`)}`,
             type: 'button',
           })}
@@ -181,7 +181,7 @@ const LogIn = {
 
         <div class="in">
           ${await BtnIcon.Render({
-            class: 'section-mp form-button btn-log-in',
+            class: 'in section-mp form-button btn-log-in',
             label: Translate.Render('log-in'),
             type: 'submit',
           })}

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

@@ -47,7 +47,7 @@ const LogOut = {
     return html` <form class="in">
       <div class="in">
         ${await BtnIcon.Render({
-          class: 'section-mp btn-custom btn-log-out',
+          class: 'inl section-mp btn-custom btn-log-out',
           label: html`<i class="fa-solid fa-power-off"></i> ${Translate.Render('log-out')}`,
           type: 'submit',
         })}

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

@@ -49,6 +49,7 @@ const Modal = {
       mode: '' /* slide-menu */,
       RouterInstance: {},
       disableTools: [],
+      observer: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -76,12 +77,15 @@ const Modal = {
       options,
       onCloseListener: {},
       onMenuListener: {},
+      onCollapseMenuListener: {},
+      onExtendMenuListener: {},
       onDragEndListener: {},
       onObserverListener: {},
       onClickListener: {},
       onExpandUiListener: {},
       onBarUiOpen: {},
       onBarUiClose: {},
+      onHome: {},
       query: options.query ? `${window.location.search}` : undefined,
     };
     const setCenterRestore = () => {
@@ -156,7 +160,8 @@ const Modal = {
             };
             options.mode === 'slide-menu-right' ? (options.style.right = '0px') : (options.style.left = '0px');
             const contentIconClass = 'abs center';
-
+            if (options.class) options.class += ' hide';
+            else options.class = 'hide';
             options.dragDisabled = true;
             options.titleClass = 'hide';
             top = '0px';
@@ -238,7 +243,7 @@ const Modal = {
                 'body',
                 html`
                   <div
-                    class="abs main-body-btn-container"
+                    class="abs main-body-btn-container hide"
                     style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
                     (options.mode && options.mode.match('right'))
                       ? 'right'
@@ -1006,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();
                   },
                 });
@@ -1153,7 +1159,7 @@ const Modal = {
           top: ${top};
           left: ${left};
           overflow: auto; /* resizable required */
-          resize: auto; /* resizable required */
+          resize: both; /* resizable required */
           transition: ${transition};
           opacity: 0;
           z-index: 1;
@@ -1339,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']
@@ -1353,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')) {
@@ -1383,6 +1392,9 @@ const Modal = {
             if (options.onCollapseMenu) options.onCollapseMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
+            Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
+              this.Data[idModal].onCollapseMenuListener[keyListener](),
+            );
           } else {
             slideMenuWidth = originSlideMenuWidth;
             setTimeout(() => {
@@ -1403,6 +1415,9 @@ const Modal = {
             if (options.onExtendMenu) options.onExtendMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
+            Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
+              this.Data[idModal].onExtendMenuListener[keyListener](),
+            );
           }
           // btn-bar-center-icon-menu
           this.actionBtnCenter();
@@ -1610,9 +1625,11 @@ const Modal = {
       ...this.Data[idModal],
     };
   },
+  onHomeRouterEvent: () => {},
   currentTopModalId: '',
   zIndexSync: function ({ idModal }) {
     setTimeout(() => {
+      if (!this.Data[idModal]) return;
       const cleanTopModal = () => {
         Object.keys(this.Data).map((_idModal) => {
           if (this.Data[_idModal].options.zIndexSync && s(`.${_idModal}`)) s(`.${_idModal}`).style.zIndex = '3';
@@ -1721,7 +1738,7 @@ const Modal = {
         titleClass: 'hide',
         style: {
           width: '300px',
-          height: '350px',
+          height: '400px',
           overflow: 'hidden',
           'z-index': '11',
           resize: 'none',
@@ -1755,7 +1772,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();
     }
@@ -1781,20 +1797,34 @@ const renderMenuLabel = ({ img, text, icon }) => {
     <div class="abs center main-btn-menu-text">${text}</div>`;
 };
 
-const renderViewTitle = (options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top }) => {
-  if (options.dim === undefined) options.dim = 60;
+const renderViewTitle = (
+  options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top, topText: '' },
+) => {
+  if (options.dim === undefined) options.dim = 30;
   const { img, text, icon, dim, top } = options;
   if (!img && !options['ui-icon']) return html`<span class="view-title-icon">${icon}</span> ${text}`;
   return html`<img
       class="abs img-btn-square-view-title"
       style="${renderCssAttr({
-        style: { width: `${dim}px`, height: `${dim}px`, top: top !== undefined ? `${top}px` : `-${dim / 2}px` },
+        style: {
+          width: `${dim}px`,
+          height: `${dim}px`,
+          top: top !== undefined ? `${top}px !important` : undefined,
+        },
       })}"
       src="${options['ui-icon']
         ? `${getProxyPath()}assets/${options.assetFolder ? options.assetFolder : 'ui-icons'}/${options['ui-icon']}`
         : img}"
     />
-    <div class="in text-btn-square-view-title" style="${renderCssAttr({ style: { 'padding-left': `${dim}px` } })}">
+    <div
+      class="in text-btn-square-view-title"
+      style="${renderCssAttr({
+        style: {
+          // 'padding-left': `${20 + dim}px`,
+          ...(options.topText !== undefined ? { top: options.topText + 'px !important' } : {}),
+        },
+      })}"
+    >
       ${text}
     </div>`;
 };