@underpostnet/underpost 2.8.4 → 2.8.6

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

@@ -3,7 +3,10 @@ import { Account } from './Account.js';
 import { loggerFactory } from './Logger.js';
 import { LogIn } from './LogIn.js';
 import { LogOut } from './LogOut.js';
+import { NotificationManager } from './NotificationManager.js';
 import { SignUp } from './SignUp.js';
+import { Translate } from './Translate.js';
+import { s } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -65,6 +68,7 @@ const Auth = {
               const _result = await UserService.get({ id: 'auth' });
               return {
                 status: _result.status,
+                message: _result.message,
                 data: {
                   user: _result.data,
                 },
@@ -77,6 +81,15 @@ const Auth = {
           await Account.updateForm(data.user);
           return { user: data.user };
         }
+        if (message && message.match('expired'))
+          setTimeout(() => {
+            s(`.main-btn-log-in`).click();
+            NotificationManager.Push({
+              html: Translate.Render(`expired-session`),
+              status: 'warning',
+            });
+          });
+        return await Auth.sessionOut();
       }
 
       // anon guest session
@@ -92,20 +105,25 @@ const Auth = {
 
       this.setGuestToken(guestToken);
       let { data, status, message } = await UserService.get({ id: 'auth' });
-      if (status === 'error') throw new Error(message);
+      if (status === 'error') {
+        if (message && message.match('expired')) {
+          localStorage.removeItem('jwt.g');
+          return await Auth.sessionOut();
+        } else throw new Error(message);
+      }
       await Account.updateForm(data);
       return { user: data };
     } catch (error) {
       logger.error(error);
-      localStorage.removeItem('jwt');
-      localStorage.removeItem('jwt.g');
       return { user: UserMock.default };
     }
   },
   sessionOut: async function () {
     this.deleteToken();
     localStorage.removeItem('jwt');
-    await LogOut.Trigger(await this.sessionIn());
+    const result = await this.sessionIn();
+    await LogOut.Trigger(result);
+    return result;
   },
 };
 

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

@@ -404,7 +404,15 @@ const CalendarCore = {
         <div class="in" style="margin-bottom: 100px"></div>`;
     };
 
+    let delayBlock = false;
     this.Data[options.idModal].updatePanel = async () => {
+      if (delayBlock) return;
+      else {
+        delayBlock = true;
+        setTimeout(() => {
+          delayBlock = false;
+        }, 500);
+      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
@@ -426,7 +434,10 @@ const CalendarCore = {
         },
       });
 
-    if (options.route === 'home') setTimeout(CalendarCore.Data[options.idModal].updatePanel);
+    // if (options.route === 'home')
+    setTimeout(() => {
+      CalendarCore.Data[options.idModal].updatePanel();
+    });
 
     return html`
       <style>

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

@@ -573,6 +573,14 @@ const isValidFormat = (value, format) => {
   }
 };
 
+const getCurrentTrace = () => {
+  try {
+    _stack;
+  } catch (error) {
+    return error.stack.split('is not defined')[1];
+  }
+};
+
 /**
  * Returns the time difference between UTC time and local time, in minutes.
  * @memberof CommonJS
@@ -811,8 +819,129 @@ const generateRandomPasswordSelection = (length) => {
 // 0b = Binary
 // 0o = Octal
 
-const userRoleEnum = ['admin', 'moderator', 'user', 'guest'];
+const commitData = {
+  feat: {
+    description: 'A new feature',
+    title: 'Features',
+    emoji: '✨',
+  },
+  fix: {
+    description: 'A bug fix',
+    title: 'Bug Fixes',
+    emoji: '🐛',
+  },
+  docs: {
+    description: 'Documentation only changes',
+    title: 'Documentation',
+    emoji: '📚',
+  },
+  style: {
+    description:
+      'Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)',
+    title: 'Styles',
+    emoji: '💎',
+  },
+  refactor: {
+    description: 'A code change that neither fixes a bug nor adds a feature',
+    title: 'Code Refactoring',
+    emoji: '📦',
+  },
+  perf: {
+    description: 'A code change that improves performance',
+    title: 'Performance Improvements',
+    emoji: '⚡️',
+  },
+  cd: {
+    description:
+      'Changes to our Continuous Delivery configuration files and scripts (example scopes: Jenkins, Spinnaker, ArgoCD)',
+    title: 'Continuous Delivery',
+    emoji: '🚀',
+  },
+  test: {
+    description: 'Adding missing tests or correcting existing tests',
+    title: 'Tests',
+    emoji: '🚨',
+  },
+  build: {
+    description: 'Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)',
+    title: 'Builds',
+    emoji: '🛠',
+  },
+  ci: {
+    description:
+      'Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)',
+    title: 'Continuous Integrations',
+    emoji: '⚙️',
+  },
+  chore: {
+    description: "Other changes that don't modify src or test files",
+    title: 'Chores',
+    emoji: '♻️',
+  },
+  revert: {
+    description: 'Reverts a previous commit',
+    title: 'Reverts',
+    emoji: '🗑',
+  },
+  backup: {
+    description: 'Changes related to backups, including creation, restoration, and maintenance.',
+    title: 'Backups',
+    emoji: '💾',
+  },
+};
+
+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');
 
@@ -869,8 +998,11 @@ export {
   hexToNumber,
   numberToHex,
   generateRandomPasswordSelection,
-  userRoleEnum,
   commonAdminGuard,
   commonModeratorGuard,
   isChileanIdentityDocument,
+  getCurrentTrace,
+  userRoleEnum,
+  commitData,
+  emotionsData,
 };

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

@@ -761,6 +761,7 @@ 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,7 @@ const CssCoreDark = {
           text-align: center;
           background: #1a1a1a;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #c6c4c4;
@@ -701,8 +700,7 @@ const CssCoreLight = {
           text-align: center;
           background: #eaeaea;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #333;

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}`;
       },
     },
     {

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>
             `
@@ -100,7 +102,7 @@ const Input = {
       </div>
     </div>`;
   },
-  parseJsonEval: (selector) => {
+  parseJson: (selector) => {
     try {
       return JSON.parse(s(selector).value);
     } catch (error) {

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

@@ -75,12 +75,17 @@ const LoadingAnimation = {
       const style = {
         '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('-btn-tool'))) {
+          style.top = '-26px';
+          style.left = '-10px';
+        } else if (classes.find((e) => e.match('main-btn-')) && !classes.find((e) => e.match('main-btn-square-menu'))) {
+          style.top = '-8px';
+          style.left = '-10px';
         } else if (classes.find((e) => e.match('action-bar-box'))) {
           style.top = '-30px';
           style.left = '-12px';
@@ -145,6 +150,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/Modal.js

@@ -9,7 +9,6 @@ import {
   htmls,
   sa,
   getAllChildNodes,
-  getCurrentTrace,
   isActiveElement,
 } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
@@ -50,6 +49,7 @@ const Modal = {
       mode: '' /* slide-menu */,
       RouterInstance: {},
       disableTools: [],
+      observer: false,
     },
   ) {
     if (options.heightBottomBar === undefined) options.heightBottomBar = 50;
@@ -77,6 +77,8 @@ const Modal = {
       options,
       onCloseListener: {},
       onMenuListener: {},
+      onCollapseMenuListener: {},
+      onExtendMenuListener: {},
       onDragEndListener: {},
       onObserverListener: {},
       onClickListener: {},
@@ -157,7 +159,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';
@@ -239,7 +242,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'
@@ -1384,6 +1387,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(() => {
@@ -1404,6 +1410,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();
@@ -1782,20 +1791,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>`;
 };

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

@@ -26,6 +26,7 @@ const Panel = {
       idPanel: '',
       parentIdModal: '',
       scrollClassContainer: '',
+      htmlFormHeader: async () => '',
       formData: [],
       data: [],
       originData: () => [],
@@ -244,12 +245,13 @@ const Panel = {
 
     let render = '';
     let renderForm = html` <div class="in modal stq" style="top: 0px; z-index: 1; padding-bottom: 5px">
-      ${await BtnIcon.Render({
-        class: `section-mp btn-custom btn-${idPanel}-close`,
-        label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
-        type: 'button',
-      })}
-    </div>`;
+        ${await BtnIcon.Render({
+          class: `section-mp btn-custom btn-${idPanel}-close`,
+          label: html`<i class="fa-solid fa-xmark"></i> ${Translate.Render('close')}`,
+          type: 'button',
+        })}
+      </div>
+      ${options?.htmlFormHeader ? await options.htmlFormHeader() : ''}`;
 
     for (const modelData of formData) {
       if (modelData.disableRender) continue;

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

@@ -29,6 +29,8 @@ const PanelForm = {
       Elements: {},
       parentIdModal: undefined,
       route: 'home',
+      htmlFormHeader: async () => '',
+      firsUpdateEvent: async () => {},
     },
   ) {
     const { idPanel, heightTopBar, heightBottomBar, defaultUrlImage, Elements } = options;
@@ -99,6 +101,7 @@ const PanelForm = {
         heightTopBar,
         heightBottomBar,
         data,
+        htmlFormHeader: options.htmlFormHeader,
         parentIdModal: options.parentIdModal,
         originData: () => PanelForm.Data[idPanel].originData,
         filesData: () => PanelForm.Data[idPanel].filesData,
@@ -421,8 +424,16 @@ const PanelForm = {
           ssr: true,
         })),
       });
-
+    let delayBlock = false;
+    let firsUpdateEvent = false;
     this.Data[idPanel].updatePanel = async () => {
+      if (delayBlock) return;
+      else {
+        delayBlock = true;
+        setTimeout(() => {
+          delayBlock = false;
+        }, 500);
+      }
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
@@ -431,23 +442,28 @@ const PanelForm = {
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),
       );
+      if (!firsUpdateEvent && options.firsUpdateEvent) {
+        firsUpdateEvent = true;
+        await options.firsUpdateEvent();
+      }
     };
     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 (!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.route !== 'home' &&
+      //   (!PanelForm.Data[idPanel].originData || PanelForm.Data[idPanel].originData.length === 0)
+      // )
+      this.Data[idPanel].updatePanel();
     });
 
     if (options.parentIdModal) {

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

@@ -39,6 +39,7 @@ const Scroll = {
     delete this.topRefreshEvents[id];
   },
   pullTopRefresh: function () {
+    return;
     append(
       'body',
       html` <style>

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

@@ -508,6 +508,10 @@ const TranslateCore = {
       en: 'Invalid identity document',
       es: 'Documento de identidad inválido',
     };
+    Translate.Data['expired-session'] = {
+      en: 'Your session has expired. Please log in again.',
+      es: 'Su sesión ha expirado. Por favor, inicie sesión de nuevo.',
+    };
   },
 };
 

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

@@ -419,14 +419,6 @@ const isActiveTab = () => document.hasFocus();
 const isActiveElement = (classSearch = '') =>
   document.activeElement?.classList?.value?.match(classSearch) ? true : false;
 
-const getCurrentTrace = () => {
-  try {
-    _stack;
-  } catch (error) {
-    return error.stack.split('is not defined')[1];
-  }
-};
-
 const isDevInstance = () => location.origin.match('localhost') && location.port;
 
 const getDataFromInputFile = async (file) => Array.from(new Uint8Array(await file.arrayBuffer()));
@@ -460,7 +452,6 @@ export {
   isNavigator,
   getTimeZone,
   getAllChildNodes,
-  getCurrentTrace,
   isActiveTab,
   isActiveElement,
   isDevInstance,

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

@@ -22,41 +22,44 @@ const Worker = {
     setTimeout(() => {
       if ('onLine' in navigator && navigator.onLine) window.ononline();
     });
-    navigator.serviceWorker.addEventListener('controllerchange', () => {
-      logger.info('The controller of current browsing context has changed.');
-    });
-    navigator.serviceWorker.ready.then((worker) => {
-      logger.info('Ready', worker);
-      // event message
-      navigator.serviceWorker.addEventListener('message', (event) => {
-        logger.info('Received event message', event.data);
-        const { status } = event.data;
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        logger.info('The controller of current browsing context has changed.');
+      });
+      navigator.serviceWorker.ready.then((worker) => {
+        logger.info('Ready', worker);
+        // event message
+        navigator.serviceWorker.addEventListener('message', (event) => {
+          logger.info('Received event message', event.data);
+          const { status } = event.data;
 
-        switch (status) {
-          case 'loader':
-            {
-              LoadingAnimation.RenderCurrentSrcLoad(event);
-            }
-            break;
+          switch (status) {
+            case 'loader':
+              {
+                LoadingAnimation.RenderCurrentSrcLoad(event);
+              }
+              break;
 
-          default:
-            break;
-        }
-      });
+            default:
+              break;
+          }
+        });
 
-      // if (navigator.serviceWorker.controller)
-      //   navigator.serviceWorker.controller.postMessage({
-      //     title: 'Hello from Client event message',
-      //   });
+        // if (navigator.serviceWorker.controller)
+        //   navigator.serviceWorker.controller.postMessage({
+        //     title: 'Hello from Client event message',
+        //   });
+
+        // broadcast message
+        // const channel = new BroadcastChannel('sw-messages');
+        // channel.addEventListener('message', (event) => {
+        //   logger.info('Received broadcast message', event.data);
+        // });
+        // channel.postMessage({ title: 'Hello from Client broadcast message' });
+        // channel.close();
+      });
+    }
 
-      // broadcast message
-      // const channel = new BroadcastChannel('sw-messages');
-      // channel.addEventListener('message', (event) => {
-      //   logger.info('Received broadcast message', event.data);
-      // });
-      // channel.postMessage({ title: 'Hello from Client broadcast message' });
-      // channel.close();
-    });
     this.RouterInstance = router();
     const isInstall = await this.status();
     if (!isInstall) await this.install();