underpost 2.7.83 → 2.7.92

package/src/client/{ssr/common → components/core}/Alert.js

@@ -1,4 +1,6 @@
-const maintenance = async ({ Translate }) => {
+import { Translate } from './Translate.js';
+
+const maintenance = async () => {
   const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
     <path
       fill="none"
@@ -12,11 +14,11 @@ const maintenance = async ({ Translate }) => {
   return html` <div class="abs center" style="top: 45%">
     ${icon}
     <br />
-    <br />${Translate('server-maintenance')}
+    <br />${Translate.Render('server-maintenance')}
   </div>`;
 };
 
-const noInternet = async ({ Translate }) => {
+const noInternet = async () => {
   const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
     <path
       fill="currentColor"
@@ -26,11 +28,11 @@ const noInternet = async ({ Translate }) => {
   return html` <div class="abs center" style="top: 45%">
     ${icon}
     <br />
-    <br />${Translate('no-internet-connection')}
+    <br />${Translate.Render('no-internet-connection')}
   </div>`;
 };
 
-const e404 = async ({ Translate }) => {
+const e404 = async () => {
   const icon = html`
     <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24">
       <path
@@ -45,13 +47,13 @@ const e404 = async ({ Translate }) => {
     <br />
     <span class="bold">404</span>
     <br />
-    <br />${Translate('page-not-found')} <br />
+    <br />${Translate.Render('page-not-found')} <br />
     <br />
-    <a href="${location.origin}">${Translate('back')}</a>
+    <a href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 
-const e500 = async ({ Translate }) => {
+const e500 = async () => {
   const icon = html`<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20">
     <path
       fill="currentColor"
@@ -64,12 +66,12 @@ const e500 = async ({ Translate }) => {
     <br />
     <span class="bold">500</span>
     <br />
-    <br />${Translate('page-broken')} <br />
+    <br />${Translate.Render('page-broken')} <br />
     <br />
-    <a href="${location.origin}">${Translate('back')}</a>
+    <a href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 
 const Alert = { maintenance, noInternet, e404, e500 };
 
-export { Alert, e404 };
+export { Alert };

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

@@ -683,6 +683,8 @@ const getCapVariableName = (value = 'default') => cap(value.replaceAll('-', ' ')
 
 const hexToNumber = (hex = 0xdc) => Number(hex) || parseFloat(hex, 16);
 
+const numberToHex = (number = 0) => number.toString(16);
+
 // 0x = Hexadecimal
 // 0b = Binary
 // 0o = Octal
@@ -739,4 +741,5 @@ export {
   rgbToHex,
   getCapVariableName,
   hexToNumber,
+  numberToHex,
 };

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

@@ -1,5 +1,5 @@
 import { AgGrid } from './AgGrid.js';
-import { boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
+import { borderChar, boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
 import { LoadingAnimation } from './LoadingAnimation.js';
 import { append, getProxyPath, s } from './VanillaJs.js';
 
@@ -135,6 +135,21 @@ const CssCommonCore = async () => {
         width: 100%;
         height: auto;
       }
+      .down-arrow-submenu {
+        top: -20px;
+        text-align: right;
+        padding-right: 42px;
+        color: #5f5f5f;
+      }
+      .main-body-btn {
+        width: 50px;
+        height: 50px;
+        font-size: 18px;
+        cursor: pointer;
+      }
+      .main-body-btn:hover {
+        font-size: 21px;
+      }
     </style>
     <style>
       .lds-dual-ring,
@@ -484,6 +499,12 @@ const CssCoreDark = {
         a:hover {
           color: #cdcdcd;
         }
+        .ac {
+          color: #b1a7a7 !important;
+        }
+        .ahc {
+          color: #cdcdcd !important;
+        }
         .content-render {
           font-size: 16px;
           font-family: monospace;
@@ -499,7 +520,7 @@ const CssCoreDark = {
         .btn-input-extension:hover {
         }
       </style>
-      ${scrollBarDarkRender()}
+      ${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
     `,
 };
 
@@ -795,6 +816,12 @@ const CssCoreLight = {
         a:hover {
           color: #e89f4c;
         }
+        .ac {
+          color: #6d68ff !important;
+        }
+        .ahc {
+          color: #e89f4c !important;
+        }
         .content-render {
           font-size: 16px;
           font-family: monospace;
@@ -810,7 +837,7 @@ const CssCoreLight = {
         .btn-input-extension:hover {
         }
       </style>
-      ${scrollBarLightRender()}
+      ${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
     `,
 };
 

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

@@ -1,11 +1,13 @@
+import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
 import { rgbToHex } from './CommonJs.js';
 import { Css, darkTheme, dynamicCol, renderCssAttr, ThemeEvents, Themes } from './Css.js';
 import { DropDown } from './DropDown.js';
-import { Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
+import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath } from './Router.js';
 import { Translate } from './Translate.js';
 import { getProxyPath, getQueryParams, htmls, s } from './VanillaJs.js';
+import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
 
@@ -55,7 +57,21 @@ const Docs = {
       icon: html`<i class="fab fa-github"></i>`,
       text: `Last Release`,
       url: function () {
-        return `https://github.com/underpostnet/engine/`;
+        return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
+      },
+    },
+    {
+      type: 'demo',
+      icon: html`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
+        <path fill="currentColor" d="M20 2v12l10-6z" />
+        <path
+          fill="currentColor"
+          d="M28 14v8H4V6h10V4H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h8v4H8v2h16v-2h-4v-4h8a2 2 0 0 0 2-2v-8zM18 28h-4v-4h4z"
+        />
+      </svg>`,
+      text: html`Demo`,
+      url: function () {
+        return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
       },
     },
     {
@@ -63,7 +79,7 @@ const Docs = {
       icon: html`<i class="fa-brands fa-osi"></i>`,
       text: 'Source Docs',
       url: function () {
-        return `${getProxyPath()}docs/engine/2.7.83`;
+        return `${getProxyPath()}docs/engine/2.7.92`;
       },
     },
     {
@@ -109,6 +125,9 @@ const Docs = {
         type: umlId,
         icon: html`<i class="fas fa-sitemap"></i>`,
         text: Translate.Render(`${umlType} config uml`),
+        url: function () {
+          return `/docs/?cid=${umlId}`;
+        },
         renderHtml: function () {
           return html` <div class="in section-mp">
               <div class="in sub-title-modal"><i class="fas fa-project-diagram"></i> Schema</div>
@@ -130,19 +149,36 @@ const Docs = {
       };
     }),
   ),
+  Tokens: {},
   Init: async function (options) {
     const { idModal } = options;
+    this.Tokens[idModal] = options;
     setTimeout(() => {
+      const cleanActive = () => {
+        s(`.btn-docs-src`).classList.remove('main-btn-menu-active');
+        s(`.btn-docs-api`).classList.remove('main-btn-menu-active');
+        s(`.btn-docs-coverage`).classList.remove('main-btn-menu-active');
+        for (const umlType of umlTypes) {
+          const umlId = `uml-${umlType}`;
+          s(`.btn-docs-${umlId}`).classList.remove('main-btn-menu-active');
+        }
+      };
       s(`.btn-docs-src`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'src' });
+        cleanActive();
+        s(`.btn-docs-src`).classList.add('main-btn-menu-active');
         await this.RenderModal('src', options.modalOptions);
       };
       s(`.btn-docs-api`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'api' });
+        cleanActive();
+        s(`.btn-docs-api`).classList.add('main-btn-menu-active');
         await this.RenderModal('api', options.modalOptions);
       };
       s(`.btn-docs-coverage`).onclick = async () => {
         setQueryPath({ path: 'docs', queryPath: 'coverage' });
+        cleanActive();
+        s(`.btn-docs-coverage`).classList.add('main-btn-menu-active');
         await this.RenderModal('coverage', options.modalOptions);
       };
 
@@ -154,10 +190,16 @@ const Docs = {
         const docData = this.Data.find((d) => d.type === 'repo');
         location.href = docData.url();
       };
+      s(`.btn-docs-demo`).onclick = () => {
+        const docData = this.Data.find((d) => d.type === 'demo');
+        location.href = docData.url();
+      };
 
       for (const umlType of umlTypes) {
         const umlId = `uml-${umlType}`;
         s(`.btn-docs-${umlId}`).onclick = async () => {
+          cleanActive();
+          s(`.btn-docs-${umlId}`).classList.add('main-btn-menu-active');
           setQueryPath({ path: 'docs', queryPath: umlId });
           await this.RenderModal(umlId, { ...options.modalOptions, handleType: 'bar' });
         };
@@ -181,7 +223,6 @@ const Docs = {
       switch (docData.type) {
         case 'repo':
         case 'coverage-link':
-          tabHref = docData.url();
           style = renderCssAttr({ style: { height: '45px' } });
           labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
           break;
@@ -189,16 +230,75 @@ const Docs = {
         default:
           break;
       }
-      docMenuRender += html` <div class="in">
+      tabHref = docData.url();
+      docMenuRender += html`
         ${await BtnIcon.Render({
-          class: `inl section-mp btn-custom btn-docs-${docData.type}`,
-          label: html`${docData.icon} ${docData.text}`,
+          class: `in wfa main-btn-menu btn-docs-${docData.type}`,
+          label: html`<span class="menu-btn-icon">${docData.icon}</span
+            ><span class="menu-label-text"> ${docData.text} </span>`,
           tabHref,
-          style,
-          labelStyle,
+          handleContainerClass: 'handle-btn-container',
+          tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
+          attrs: `data-id="${docData.type}"`,
+          handleContainerClass: 'handle-btn-container',
         })}
-      </div>`;
+      `;
     }
+
+    htmls('.menu-btn-container-children', html` <div class="fl menu-btn-container-docs">${docMenuRender}</div>`);
+    if (s(`.menu-btn-container-main`)) s(`.menu-btn-container-main`).classList.add('hide');
+    htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
+
+    this.Tokens[idModal] = new Sortable(s(`.menu-btn-container-docs`), {
+      animation: 150,
+      group: `docs-sortable`,
+      forceFallback: true,
+      fallbackOnBody: true,
+      handle: '.handle-btn-container',
+      store: {
+        /**
+         * Get the order of elements. Called once during initialization.
+         * @param   {Sortable}  sortable
+         * @returns {Array}
+         */
+        get: function (sortable) {
+          const order = localStorage.getItem(sortable.options.group.name);
+          return order ? order.split('|') : [];
+        },
+
+        /**
+         * Save the order of elements. Called onEnd (when the item is dropped).
+         * @param {Sortable}  sortable
+         */
+        set: function (sortable) {
+          const order = sortable.toArray();
+          localStorage.setItem(sortable.options.group.name, order.join('|'));
+        },
+      },
+      // chosenClass: 'css-class',
+      // ghostClass: 'css-class',
+      // Element dragging ended
+      onEnd: function (/**Event*/ evt) {
+        // console.log('Sortable onEnd', evt);
+        // console.log('evt.oldIndex', evt.oldIndex);
+        // console.log('evt.newIndex', evt.newIndex);
+        const slotId = Array.from(evt.item.classList).pop();
+        // console.log('slotId', slotId);
+        if (evt.oldIndex === evt.newIndex) s(`.${slotId}`).click();
+
+        // var itemEl = evt.item; // dragged HTMLElement
+        // evt.to; // target list
+        // evt.from; // previous list
+        // evt.oldIndex; // element's old index within old parent
+        // evt.newIndex; // element's new index within new parent
+        // evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
+        // evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
+        // evt.clone; // the clone element
+        // evt.pullMode; // when item is in another sortable: `"clone"` if cloning, `true` if moving
+      },
+    });
+
+    return '';
     return html` <div class="in section-mp">${docMenuRender}</div>`;
     return html` <div class="in section-mp">
       ${await DropDown.Render({

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

@@ -3,7 +3,7 @@ import { BtnIcon } from './BtnIcon.js';
 import { s4 } from './CommonJs.js';
 import { darkTheme, renderCssAttr } from './Css.js';
 import { loggerFactory } from './Logger.js';
-import { append, getAllChildNodes, getProxyPath, htmls, s } from './VanillaJs.js';
+import { append, getAllChildNodes, getProxyPath, htmls, s, sa } from './VanillaJs.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -129,6 +129,7 @@ const LoadingAnimation = {
   },
   barLevel: {
     append: () => {
+      if (Array.from(sa('.ssr-loading-bar-block')).length >= 5) return;
       s(`.ssr-blink-bar`).classList.remove('ssr-blink-bar');
       append('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
     },
@@ -136,7 +137,7 @@ const LoadingAnimation = {
       htmls('.ssr-loading-bar', html`<div class="ssr-loading-bar-block ssr-blink-bar"></div>`);
     },
   },
-  removeSplashScreen: function (backgroundContainer) {
+  removeSplashScreen: function (backgroundContainer, callBack) {
     if (s(`.clean-cache-container`)) s(`.clean-cache-container`).style.display = 'none';
     if (!backgroundContainer) backgroundContainer = '.ssr-background';
     if (s(backgroundContainer))
@@ -144,6 +145,7 @@ const LoadingAnimation = {
         s(backgroundContainer).style.opacity = 0;
         setTimeout(async () => {
           s(backgroundContainer).style.display = 'none';
+          if (callBack) callBack();
         }, 300);
       });
   },