cyberia 3.0.3 → 3.2.5

package/src/client/Underpost.index.js

@@ -10,11 +10,10 @@ import { MenuUnderpost } from './components/underpost/MenuUnderpost.js';
 import { RouterUnderpost } from './components/underpost/RoutesUnderpost.js';
 import { TranslateUnderpost } from './components/underpost/TranslateUnderpost.js';
 import { Worker } from './components/core/Worker.js';
-import { UnderpostParams } from './components/underpost/CommonUnderpost.js';
 import { Keyboard } from './components/core/Keyboard.js';
 import { SocketIoUnderpost } from './components/underpost/SocketIoUnderpost.js';
 import { SocketIo } from './components/core/SocketIo.js';
-import { ElementsUnderpost } from './components/underpost/ElementsUnderpost.js';
+import { AppStoreUnderpost } from './components/underpost/AppStoreUnderpost.js';
 import { CssUnderpostDark, CssUnderpostLight } from './components/underpost/CssUnderpost.js';
 
 window.onload = () =>
@@ -26,11 +25,11 @@ window.onload = () =>
       await TranslateUnderpost.Init();
       await Responsive.Init();
       await MenuUnderpost.Render();
-      await SocketIo.Init({ channels: ElementsUnderpost.Data });
+      await SocketIo.Init({ channels: AppStoreUnderpost.Data });
       await SocketIoUnderpost.Init();
       await LogInUnderpost();
       await LogOutUnderpost();
       await SignUpUnderpost();
-      await Keyboard.Init({ callBackTime: UnderpostParams.EVENT_CALLBACK_TIME });
+      await Keyboard.Init();
     },
   });

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

@@ -13,20 +13,32 @@ const AgGrid = {
   Render: async function (options) {
     let { id, paginationOptions } = options;
     setTimeout(() => {
+      // Normalize rowSelection from deprecated string form to object form (AG Grid v32.2.1+)
+      let gridOptionsOverrides = { ...(options.gridOptions || {}) };
+      if (typeof gridOptionsOverrides.rowSelection === 'string') {
+        const mode = gridOptionsOverrides.rowSelection; // 'single' or 'multiple'
+        gridOptionsOverrides.rowSelection = {
+          mode: mode === 'multiple' ? 'multiRow' : 'singleRow',
+        };
+      }
+
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
+        // Use legacy CSS theme mode to avoid conflict with Theming API (AG Grid v33+)
+        theme: 'legacy',
         // Row Data: The data to be displayed.
         pagination: false, // Disabled by default, will be handled by the management view
         // paginationPageSize: 100,
         // suppressPaginationPanel: true, // We are using our own custom pagination component
         // rowHeight: 60,
-        enableCellChangeFlash: true,
+        // enableCellChangeFlash was removed in v35; use enableCellChangeFlash on defaultColDef instead
         defaultColDef: {
           editable: false,
           flex: 1,
           minWidth: 50,
           filter: true,
           autoHeight: true,
+          enableCellChangeFlash: true,
         },
         rowClassRules: {
           'row-new-highlight': (params) => {
@@ -76,7 +88,7 @@ const AgGrid = {
               return { field };
             })
           : [],
-        ...options.gridOptions,
+        ...gridOptionsOverrides,
       };
 
       // Your Javascript code to create the grid
@@ -86,8 +98,11 @@ const AgGrid = {
       // myGridElement.style.setProperty('width', '100%');
       ThemeEvents[id] = () => {
         if (s(`.${id}`)) {
-          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
-          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
+          // darkTheme has already been updated by Css.js when this event fires
+          // If darkTheme is true: remove light class, add dark class
+          // If darkTheme is false: remove dark class, add light class
+          s(`.${id}`).classList.remove(this.theme, this.theme + '-dark');
+          s(`.${id}`).classList.add(darkTheme ? this.theme + '-dark' : this.theme);
         } else {
           // console.warn('change theme: grid not found');
           delete ThemeEvents[id];
@@ -112,7 +127,7 @@ const AgGrid = {
       : '';
     return html`
       <div
-        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+        class="${id} ${darkTheme ? this.theme + '-dark' : this.theme}"
         style="${options?.style
           ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
           : ''}"

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

@@ -49,7 +49,7 @@ const e404 = async () => {
     <br />
     <br />${Translate.Render('page-not-found')} <br />
     <br />
-    <a href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 
@@ -68,7 +68,7 @@ const e500 = async () => {
     <br />
     <br />${Translate.Render('page-broken')} <br />
     <br />
-    <a href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 

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

@@ -0,0 +1,69 @@
+/**
+ * Core per-app state store for WebSocket channel data.
+ *
+ * @module client/core/AppStore
+ * @namespace AppStore
+ */
+
+/**
+ * @class AppStore
+ * @classdesc Per-app singleton state store for WebSocket channel data and authenticated user state.
+ *
+ * Usage: `AppStoreX.Data.user.main.model.user` — the authenticated user object.
+ * `AppStoreX.Data` keys (`chat`, `mailer`, `stream`, etc.) — channel definitions for `SocketIo.Init`.
+ * @memberof AppStore
+ */
+class AppStore {
+  /**
+   * Channel data map, keyed by channel name (e.g. `user`, `chat`, `mailer`).
+   * The `user` channel always contains `{ main: { model: { user: { _id: '' } } } }`.
+   *
+   * @type {Object.<string, Object>}
+   */
+  Data;
+
+  /** @private @type {function(): Object} */
+  #initialStateFactory;
+
+  /**
+   * Creates a new AppStore instance.
+   *
+   * @param {function(): Object} initialStateFactory - Factory function returning the initial data shape.
+   *   Must return at least `{ user: { main: { model: { user: { _id: '' } } } } }`.
+   */
+  constructor(initialStateFactory) {
+    this.#initialStateFactory = initialStateFactory;
+    this.Data = initialStateFactory();
+  }
+
+  /**
+   * Resets `Data` to its initial state.
+   *
+   * @returns {void}
+   */
+  reset() {
+    this.Data = this.#initialStateFactory();
+  }
+
+  /**
+   * Creates an AppStore with the standard channel layout.
+   * Always includes `user`, `chat`, and `mailer` channels.
+   *
+   * @static
+   * @param {...string} extraChannels - Additional channel names (e.g. `'stream'`).
+   * @returns {AppStore}
+   */
+  static create(...extraChannels) {
+    return new AppStore(() => {
+      const state = {
+        user: { main: { model: { user: { _id: '' } } } },
+        chat: {},
+        mailer: {},
+      };
+      for (const ch of extraChannels) state[ch] = {};
+      return state;
+    });
+  }
+}
+
+export { AppStore };

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

@@ -25,7 +25,7 @@ const eventDateFactory = (event) =>
 const CalendarCore = {
   RenderStyle: async function () {},
   Data: {},
-  Render: async function (options = { idModal: '', Elements: {}, hiddenDates: [] }) {
+  Render: async function (options = { idModal: '', appStore: {}, hiddenDates: [] }) {
     this.Data[options.idModal] = {
       data: [],
       originData: [],
@@ -49,7 +49,7 @@ const CalendarCore = {
         this.Data[options.idModal].filesData = [];
         this.Data[options.idModal].originData = newInstance(resultData);
         this.Data[options.idModal].data = resultData.map((o) => {
-          if (o.creatorUserId && options.Elements.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
+          if (o.creatorUserId && options.appStore.Data.user.main.model.user._id === o.creatorUserId) o.tools = true;
           o.id = o._id;
 
           this.Data[options.idModal].filesData.push({});

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

@@ -56,7 +56,7 @@ const attachMarkdownLinkHandlers = (containerSelector) => {
 };
 
 const Content = {
-  Render: async function (options = { idModal: '' }) {
+  Render: async function (options = { idModal: '', titleIcon: '' }) {
     const { idModal } = options;
     setTimeout(async () => {
       try {
@@ -111,11 +111,30 @@ const Content = {
           throw new Error(`no-preview-available`);
         }
 
+        // Use custom titleIcon from options, or extract from the modal's original title HTML, or fall back to default
+        const titleIcon = options.titleIcon
+          ? options.titleIcon
+          : Modal.Data[idModal] &&
+              Modal.Data[idModal].options &&
+              Modal.Data[idModal].options.title &&
+              Modal.Data[idModal].options.title.includes &&
+              Modal.Data[idModal].options.title.includes('<img')
+            ? Modal.Data[idModal].options.title.match(/<img[^>]*>/)?.[0] || html`<i class="inl far fa-file"></i>`
+            : html`<i class="inl far fa-file"></i>`;
+
+        // Preserve the original text wrapper class if present in the modal's stored title
+        const originalTitle = Modal.Data[idModal]?.options?.title || '';
+        const hasCustomTextClass = originalTitle.includes && originalTitle.includes('underpost-text-title-modal');
+        const docTitle = documentObj.title ? documentObj.title : documentObj.location;
+        const titleText = hasCustomTextClass
+          ? `<span class='inl underpost-text-title-modal'>${docTitle}</span>`
+          : docTitle;
+
         htmls(
           `.title-modal-${idModal}`,
           html`${renderViewTitle({
-            icon: html`<i class="inl far fa-file"></i>`,
-            text: `${documentObj.title ? documentObj.title : documentObj.location}`,
+            icon: titleIcon,
+            text: titleText,
           })} `,
         );
         htmls(`.content-render-${idModal}`, ``);

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

@@ -12,6 +12,10 @@ const Docs = {
     const docData = this.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
+    const parentBarMode =
+      Modal.Data['modal-docs'] && Modal.Data['modal-docs'].options.barMode
+        ? Modal.Data['modal-docs'].options.barMode
+        : undefined;
 
     await Modal.Render({
       barConfig,
@@ -20,11 +24,18 @@ const Docs = {
       html: async () => {
         if (docData.renderHtml) return await docData.renderHtml();
         return html`
+          <style>
+            .iframe-${ModalId} {
+              width: 100%;
+              border: none;
+              background: white;
+              display: block;
+            }
+          </style>
           <iframe
             class="in iframe-${ModalId}"
-            style="width: 100%; border: none; background: white; display: block"
             src="${docData.url()}"
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
           >
           </iframe>
         `;
@@ -34,7 +45,7 @@ const Docs = {
       route: 'docs',
       slideMenu: 'modal-menu',
       observer: true,
-      barMode: 'top-bottom-bar',
+      barMode: parentBarMode,
       query: true,
       RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
     });
@@ -166,6 +177,8 @@ const Docs = {
       icon: html`<i class="fab fa-github"></i>`,
       text: `Last Release`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
         return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
       },
     },
@@ -180,6 +193,8 @@ const Docs = {
       </svg>`,
       text: html`Demo`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
         return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
       },
     },
@@ -204,6 +219,8 @@ const Docs = {
       icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
       text: `Coverage report`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.coverageUrl) return tokenOpts.coverageUrl();
         return `${getProxyPath()}docs/coverage`;
       },
       themeEvent: () => {
@@ -223,7 +240,7 @@ const Docs = {
     },
   ],
   Tokens: {},
-  Init: async function (options) {
+  Init: async function (options = {}) {
     const { idModal } = options;
     this.Tokens[idModal] = options;
     setTimeout(() => {
@@ -284,10 +301,14 @@ const Docs = {
           break;
       }
       tabHref = docData.url();
+      const subMenuIcon =
+        options.subMenuIcon && typeof options.subMenuIcon === 'function'
+          ? options.subMenuIcon(docData.type)
+          : docData.icon;
       docMenuRender += html`
         ${await BtnIcon.Render({
           class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
-          label: html`<span class="inl menu-btn-icon">${docData.icon}</span
+          label: html`<span class="inl menu-btn-icon">${subMenuIcon}</span
             ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
           tabHref,
           tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
@@ -447,7 +468,10 @@ const Docs = {
                   if (s(`.docs-card-container-${item.id}`)) {
                     s(`.docs-card-container-${item.id}`).onclick = () => {
                       if (item.id.match('demo')) {
-                        location.href = 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
+                        const demoData = Docs.Data.find((d) => d.type === 'demo');
+                        location.href = demoData
+                          ? demoData.url()
+                          : 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
                       } else if (item.id.match('api')) {
                         if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
                       } else {

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

@@ -1,4 +1,6 @@
+import { Badge } from './Badge.js';
 import { getId, newInstance } from './CommonJs.js';
+import { darkTheme, ThemeEvents } from './Css.js';
 import { Input } from './Input.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
@@ -15,17 +17,83 @@ const DropDown = {
       originData: options.data ? newInstance(options.data) : [],
     };
 
+    const _renderSelectedBadges = async () => {
+      if (options.type !== 'checkbox') return;
+      const container = s(`.dropdown-current-${id}`);
+      if (!container) return;
+      const selected = Object.entries(DropDown.Tokens[id].oncheckvalues);
+      if (selected.length === 0) {
+        htmls(`.dropdown-current-${id}`, '');
+        return;
+      }
+      let badgesHtml = '';
+      for (const [key, val] of selected) {
+        badgesHtml += html`<span class="inl" style="display:inline-flex;align-items:center;margin:2px;">
+          ${await Badge.Render({
+            text: html`<i class="fa-solid fa-tag" style="margin-right:3px;font-size:9px;"></i>${val.display}`,
+            style: {
+              background: darkTheme ? '#335' : '#cde',
+              color: darkTheme ? '#adf' : '#246',
+              'border-radius': '4px',
+              'font-size': '11px',
+              height: 'auto',
+              'min-width': 'auto',
+            },
+          })}
+          <span
+            class="dd-badge-del-${id}"
+            data-key="${key}"
+            style="cursor:pointer;padding:0 4px;font-size:14px;color:${darkTheme ? '#f88' : '#a00'};line-height:1;"
+            >&times;</span
+          >
+        </span>`;
+      }
+      htmls(`.dropdown-current-${id}`, badgesHtml);
+      container.querySelectorAll(`.dd-badge-del-${id}`).forEach((btn) => {
+        btn.onclick = async (e) => {
+          e.stopPropagation();
+          const key = btn.dataset.key;
+          delete DropDown.Tokens[id].oncheckvalues[key];
+          const dataItem = options.data.find((d) => d.value.trim().replaceAll(' ', '-') === key);
+          if (dataItem) dataItem.checked = false;
+          if (ToggleSwitch.Tokens[`checkbox-role-${key}`]) {
+            const checkbox = s(`.checkbox-role-${key}-checkbox`);
+            if (checkbox && checkbox.checked) ToggleSwitch.Tokens[`checkbox-role-${key}`].click();
+          }
+          DropDown.Tokens[id].value = Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data);
+          s(`.${id}`).value = DropDown.Tokens[id].value;
+          await _renderSelectedBadges();
+        };
+      });
+    };
+    DropDown.Tokens[id]._renderSelectedBadges = _renderSelectedBadges;
+
     options.data.push({
       value: 'reset',
       display: html`<i class="fa-solid fa-broom"></i> ${Translate.Render('clear')}`,
       onClick: () => {
         console.log('DropDown onClick', this.value);
         if (options && options.resetOnClick) options.resetOnClick();
-        if (options && options.type === 'checkbox')
-          for (const opt of DropDown.Tokens[id].value) {
-            s(`.dropdown-option-${id}-${opt}`).click();
+        if (options && options.type === 'checkbox') {
+          DropDown.Tokens[id].oncheckvalues = {};
+          DropDown.Tokens[id].value = [];
+          s(`.${id}`).value = [];
+          htmls(`.dropdown-current-${id}`, '');
+          if (options.serviceProvider) {
+            htmls(`.${id}-render-container`, '');
+          } else {
+            for (const optionData of options.data) {
+              if (optionData.value !== 'reset' && optionData.value !== 'close' && optionData.checked) {
+                optionData.checked = false;
+                const vd = optionData.value.trim().replaceAll(' ', '-');
+                if (ToggleSwitch.Tokens[`checkbox-role-${vd}`]) {
+                  const checkbox = s(`.checkbox-role-${vd}-checkbox`);
+                  if (checkbox && checkbox.checked) ToggleSwitch.Tokens[`checkbox-role-${vd}`].click();
+                }
+              }
+            }
           }
-        else this.Tokens[id].value = undefined;
+        } else this.Tokens[id].value = undefined;
       },
     });
 
@@ -52,7 +120,7 @@ const DropDown = {
         const i = index;
         const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
         setTimeout(() => {
-          const onclick = (e) => {
+          const onclick = async (e) => {
             if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
               s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
             }
@@ -72,22 +140,18 @@ const DropDown = {
             if (optionData.value !== 'close') {
               if (optionData.value !== 'reset') {
                 if (options.type === 'checkbox') {
-                  // const _instanValue = data
-                  //   .filter((d) => d.checked)
-                  //   .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
-                  //   .join('');
-                  const value = Object.keys(DropDown.Tokens[id].oncheckvalues);
-                  htmls(
-                    `.dropdown-current-${id}`,
-                    value.map((v) => DropDown.Tokens[id].originData.find((_v) => _v.value === v).display),
-                  );
+                  _renderSelectedBadges();
                 } else {
                   htmls(`.dropdown-current-${id}`, optionData.display);
                 }
               } else htmls(`.dropdown-current-${id}`, '');
 
               this.Tokens[id].value =
-                options.type === 'checkbox' ? data.filter((d) => d.checked).map((d) => d.data) : optionData.data;
+                options.type === 'checkbox'
+                  ? options.serviceProvider
+                    ? Object.values(DropDown.Tokens[id].oncheckvalues).map((v) => v.data)
+                    : data.filter((d) => d.checked).map((d) => d.data)
+                  : optionData.data;
 
               console.warn('current value dropdown id:' + id, this.Tokens[id].value);
 
@@ -126,7 +190,11 @@ const DropDown = {
                       },
                       checked: () => {
                         optionData.checked = true;
-                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {};
+                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {
+                          data: optionData.data,
+                          display: optionData.display,
+                          value: optionData.value,
+                        };
                       },
                     },
                   })}
@@ -153,6 +221,10 @@ const DropDown = {
       s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
       if (options && options.open) switchOptionsPanel();
 
+      if (options.type === 'checkbox') {
+        ThemeEvents[`dropdown-badge-${id}`] = () => _renderSelectedBadges();
+      }
+
       const dropDownSearchHandle = async () => {
         const _data = [];
         if (!s(`.search-box-${id}`)) return;
@@ -160,6 +232,12 @@ const DropDown = {
         let _value = s(`.search-box-${id}`).value.toLowerCase();
 
         for (const objData of options.data) {
+          if (
+            options.excludeSelected &&
+            options.type === 'checkbox' &&
+            DropDown.Tokens[id].oncheckvalues[objData.value.trim().replaceAll(' ', '-')]
+          )
+            continue;
           const objValue = objData.value.toLowerCase();
           if (
             objValue.match(_value) ||
@@ -186,7 +264,49 @@ const DropDown = {
         }
       };
 
-      s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+      if (options.serviceProvider) {
+        let serviceSearchTimeout = null;
+        s(`.search-box-${id}`).oninput = () => {
+          clearTimeout(serviceSearchTimeout);
+          const q = s(`.search-box-${id}`).value.trim();
+          if (!q) {
+            htmls(`.${id}-render-container`, '');
+            return;
+          }
+          serviceSearchTimeout = setTimeout(async () => {
+            try {
+              let results = await options.serviceProvider(q);
+              if (options.type === 'checkbox') {
+                if (options.excludeSelected) {
+                  const selectedKeys = Object.keys(DropDown.Tokens[id].oncheckvalues);
+                  results = results.filter((item) => !selectedKeys.includes(item.value.trim().replaceAll(' ', '-')));
+                }
+                results = results.map((item) => {
+                  const vd = item.value.trim().replaceAll(' ', '-');
+                  return { ...item, checked: !!DropDown.Tokens[id].oncheckvalues[vd] };
+                });
+              }
+              const controlItems = options.data.filter((d) => d.value === 'reset' || d.value === 'close');
+              const allData = [...results, ...controlItems];
+              if (allData.length > controlItems.length) {
+                const { render } = await _render(allData);
+                htmls(`.${id}-render-container`, render);
+              } else {
+                htmls(
+                  `.${id}-render-container`,
+                  html` <div class="inl" style="padding: 10px; color: red">
+                    <i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}
+                  </div>`,
+                );
+              }
+            } catch (e) {
+              console.error('DropDown serviceProvider error:', e);
+            }
+          }, 200);
+        };
+      } else {
+        s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+      }
 
       // Not use onblur generate bug on input toggle
       // s(`.search-box-${id}`).onblur = dropDownSearchHandle;