underpost 2.8.1 → 2.8.6

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

@@ -117,6 +117,12 @@ const CssCommonCore = async () => {
         animation: ripple 600ms linear;
         background-color: rgba(137, 137, 137, 0.503);
       }
+      .slide-menu-top-bar-fix {
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 1;
+      }
       @keyframes ripple {
         to {
           transform: scale(4);
@@ -390,8 +396,7 @@ const CssCoreDark = {
           text-align: center;
           background: #1a1a1a;
           font-size: 17px;
-          padding-top: 7px;
-          padding-bottom: 6px;
+          height: 35px;
         }
         ::placeholder {
           color: #c6c4c4;
@@ -695,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/DropDown.js

@@ -16,7 +16,11 @@ const DropDown = {
       onClick: () => {
         console.log('DropDown onClick', this.value);
         if (options && options.resetOnClick) options.resetOnClick();
-        this.Tokens[id].value = undefined;
+        if (options && options.type === 'checkbox')
+          for (const opt of DropDown.Tokens[id].value) {
+            s(`.dropdown-option-${id}-${opt}`).click();
+          }
+        else this.Tokens[id].value = undefined;
       },
     });
 

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

@@ -1,6 +1,8 @@
 import { AgGrid } from './AgGrid.js';
 import { BtnIcon } from './BtnIcon.js';
+import { isValidDate } from './CommonJs.js';
 import { darkTheme } from './Css.js';
+import { DropDown } from './DropDown.js';
 import { loggerFactory } from './Logger.js';
 import { RichText } from './RichText.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
@@ -86,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>
             `
@@ -98,7 +102,7 @@ const Input = {
       </div>
     </div>`;
   },
-  parseJsonEval: (selector) => {
+  parseJson: (selector) => {
     try {
       return JSON.parse(s(selector).value);
     } catch (error) {
@@ -147,6 +151,10 @@ const Input = {
             htmls(`.file-name-render-${inputData.id}`, `${s(`.${inputData.id}`).fileNameInputExtDefaultContent}`);
           continue;
           break;
+        case 'dropdown-checkbox': {
+          s(`.dropdown-option-${inputData.id}-reset`).click();
+          break;
+        }
         case 'md':
           RichText.Tokens[inputData.id].easyMDE.value('');
           continue;
@@ -196,6 +204,12 @@ const Input = {
             RichText.Tokens[inputData.id].easyMDE.value(fileObj[inputData.model].mdPlain);
             continue;
             break;
+
+          case 'dropdown-checkbox': {
+            s(`.dropdown-option-${inputData.id}-reset`).click();
+            for (const opt of originObj[inputData.model]) s(`.dropdown-option-${inputData.id}-${opt}`).click();
+            break;
+          }
           case 'checkbox':
           case 'checkbox-on-off':
             if (
@@ -207,9 +221,11 @@ const Input = {
             break;
           case 'datetime-local':
             {
-              const date = new Date(originObj[inputData.model]);
-              date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
-              s(`.${inputData.id}`).value = date.toISOString().slice(0, 16);
+              if (isValidDate(originObj[inputData.model])) {
+                const date = new Date(originObj[inputData.model]);
+                // date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
+                s(`.${inputData.id}`).value = date.toISOString().slice(0, 16);
+              } else s(`.${inputData.id}`).value = null;
             }
             continue;
             break;

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'
@@ -403,6 +406,11 @@ const Modal = {
                     })}
                   </div>
                 </div>
+                ${options?.slideMenuTopBarFix
+                  ? html`<div class="abs modal slide-menu-top-bar-fix" style="height: ${options.heightTopBar}px">
+                      ${await options.slideMenuTopBarFix()}
+                    </div>`
+                  : ''}
               </div>`,
             );
             EventsUI.onClick(`.action-btn-profile-log-in`, () => {
@@ -537,12 +545,12 @@ const Modal = {
                         if (routerId) {
                           if (
                             s(`.main-btn-${routerId}`) &&
-                            (routerId.toLocaleLowerCase().match(s(`.${id}`).value.toLocaleLowerCase()) ||
+                            (routerId.toLowerCase().match(s(`.${id}`).value.toLowerCase()) ||
                               (Translate.Data[routerId] &&
                                 Object.keys(Translate.Data[routerId]).filter((keyLang) =>
                                   Translate.Data[routerId][keyLang]
-                                    .toLocaleLowerCase()
-                                    .match(s(`.${id}`).value.toLocaleLowerCase()),
+                                    .toLowerCase()
+                                    .match(s(`.${id}`).value.toLowerCase()),
                                 ).length > 0))
                           ) {
                             const fontAwesomeIcon = getAllChildNodes(s(`.main-btn-${routerId}`)).find((e) => {
@@ -1379,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(() => {
@@ -1399,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();
@@ -1691,7 +1705,7 @@ const Modal = {
       const htmlRender = html`
         <br />
         <div class="in section-mp" style="font-size: 40px; text-align: center">
-          <i class="fas fa-question-circle"></i>
+          ${options.icon ? options.icon : html` <i class="fas fa-question-circle"></i>`}
         </div>
         ${await options.html()}
         <div class="in section-mp">
@@ -1702,7 +1716,7 @@ const Modal = {
             style: `margin: auto`,
           })}
         </div>
-        <div class="in section-mp">
+        <div class="in section-mp ${options.disableBtnCancel ? 'hide' : ''}">
           ${await BtnIcon.Render({
             class: `in section-mp form-button btn-cancel-${id}`,
             label: Translate.Render('cancel'),
@@ -1777,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

@@ -1,4 +1,4 @@
-import { getId } from './CommonJs.js';
+import { getId, isValidDate, newInstance } from './CommonJs.js';
 import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
@@ -26,6 +26,7 @@ const Panel = {
       idPanel: '',
       parentIdModal: '',
       scrollClassContainer: '',
+      htmlFormHeader: async () => '',
       formData: [],
       data: [],
       originData: () => [],
@@ -51,8 +52,6 @@ const Panel = {
       <i style="font-size: 25px" class="fa-solid fa-cloud"></i>
     </div>`;
 
-    let editId;
-
     const openPanelForm = () => {
       s(`.${idPanel}-form-body`).classList.remove('hide');
       s(`.btn-${idPanel}-add`).classList.add('hide');
@@ -72,7 +71,7 @@ const Panel = {
     };
 
     const renderPanel = async (payload) => {
-      const obj = payload;
+      const obj = newInstance(payload);
       if ('_id' in obj) obj.id = obj._id;
       const { id } = obj;
 
@@ -98,8 +97,8 @@ const Panel = {
         });
         EventsUI.onClick(`.${idPanel}-btn-edit-${id}`, async () => {
           logger.warn('edit', obj);
-          if (obj._id) editId = obj._id;
-          else if (obj.id) editId = obj.id;
+          if (obj._id) Panel.Tokens[idPanel].editId = obj._id;
+          else if (obj.id) Panel.Tokens[idPanel].editId = obj.id;
 
           s(`.btn-${idPanel}-label-edit`).classList.remove('hide');
           s(`.btn-${idPanel}-label-add`).classList.add('hide');
@@ -171,6 +170,10 @@ const Panel = {
                   const valueIcon = formObjData?.panel?.icon?.value ? formObjData.panel.icon.value : '';
                   const keyIcon = formObjData?.panel?.icon?.key ? formObjData.panel.icon.key : '';
 
+                  if (formObjData && ['datetime-local'].includes(formObjData.inputType) && isValidDate(obj[infoKey])) {
+                    obj[infoKey] = `${obj[infoKey]}`.replace('T', ' ').replace('.000Z', '');
+                  }
+
                   if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'tags')) {
                     setTimeout(async () => {
                       let tagRender = html``;
@@ -186,22 +189,50 @@ const Panel = {
                     });
                     return html``;
                   }
+                  {
+                    const formDataObj = formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'list');
+                    if (obj[infoKey] && obj[infoKey].length > 0 && formDataObj)
+                      return html`<div class="in ${idPanel}-row">
+                        <span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
+                          ${keyIcon} ${Translate.Render(infoKey)}:</span
+                        >
+                        <span class="${idPanel}-row-value"
+                          >${valueIcon} ${obj[infoKey].map((k) => Translate.Render(k)).join(', ')}</span
+                        >
+                      </div> `;
+                  }
 
-                  if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'info-row-pin'))
-                    return html`<div class="in ${idPanel}-row">
-                      <span class="${idPanel}-row-pin-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
-                        ${keyIcon} ${infoKey}:</span
-                      >
-                      <span class="${idPanel}-row-pin-value">${valueIcon} ${obj[infoKey]}</span>
-                    </div> `;
+                  {
+                    const formDataObj = formData.find(
+                      (f) => f.model === infoKey && f.panel && f.panel.type === 'info-row-pin',
+                    );
+                    if (obj[infoKey] && formDataObj)
+                      return html`<div class="in ${idPanel}-row">
+                        <span class="${idPanel}-row-pin-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
+                          ${keyIcon}
+                          ${formDataObj.translateCode
+                            ? Translate.Render(formDataObj.translateCode)
+                            : Translate.Render(infoKey)}:</span
+                        >
+                        <span class="${idPanel}-row-pin-value">${valueIcon} ${obj[infoKey]}</span>
+                      </div> `;
+                  }
 
-                  if (formData.find((f) => f.model === infoKey && f.panel && f.panel.type === 'info-row'))
-                    return html`<div class="in ${idPanel}-row">
-                      <span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
-                        ${keyIcon} ${infoKey}:</span
-                      >
-                      <span class="${idPanel}-row-value"> ${valueIcon} ${obj[infoKey]}</span>
-                    </div> `;
+                  {
+                    const formDataObj = formData.find(
+                      (f) => f.model === infoKey && f.panel && f.panel.type === 'info-row',
+                    );
+                    if (obj[infoKey] && formDataObj)
+                      return html`<div class="in ${idPanel}-row">
+                        <span class="${idPanel}-row-key capitalize ${formObjData.label?.disabled ? 'hide' : ''}">
+                          ${keyIcon}
+                          ${formDataObj.translateCode
+                            ? Translate.Render(formDataObj.translateCode)
+                            : Translate.Render(infoKey)}:</span
+                        >
+                        <span class="${idPanel}-row-value"> ${valueIcon} ${obj[infoKey]}</span>
+                      </div> `;
+                  }
 
                   return html``;
                 })
@@ -214,16 +245,41 @@ 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;
       switch (modelData.inputType) {
+        case 'dropdown-checkbox': {
+          renderForm += html`<div class="in section-mp">
+            ${await DropDown.Render({
+              id: `${modelData.id}`,
+              label: html`${Translate.Render(modelData.model)}`,
+              type: 'checkbox',
+              value: modelData.dropdown.options[0],
+              resetOption: true,
+              containerClass: `${idPanel}-dropdown-checkbox`,
+              data: modelData.dropdown.options.map((dKey) => {
+                return {
+                  value: dKey,
+                  data: dKey,
+                  checked: false,
+                  display: html`${Translate.Render(dKey)}`,
+                  onClick: function () {
+                    logger.info('DropDown onClick', this.checked);
+                  },
+                };
+              }),
+            })}
+          </div>`;
+          break;
+        }
         case 'dropdown':
           renderForm += html` <div class="in section-mp">
             ${await DropDown.Render({
@@ -418,21 +474,23 @@ const Panel = {
         obj.id = `${data.length}`;
         let documents;
         if (options && options.on && options.on.add) {
-          const { status, data } = await options.on.add({ data: obj, editId });
+          const { status, data } = await options.on.add({ data: obj, editId: Panel.Tokens[idPanel].editId });
           if (status === 'error') return;
           documents = data;
         }
         s(`.btn-${idPanel}-clean`).click();
-        if (editId && s(`.${idPanel}-${editId}`)) s(`.${idPanel}-${editId}`).remove();
+        if (Panel.Tokens[idPanel].editId && s(`.${idPanel}-${Panel.Tokens[idPanel].editId}`))
+          s(`.${idPanel}-${Panel.Tokens[idPanel].editId}`).remove();
         if (Array.isArray(documents)) {
           htmls(`.${idPanel}-render`, '');
           for (const doc of documents) {
             append(`.${idPanel}-render`, await renderPanel(doc));
           }
-        } else htmls(`.${idPanel}-render`, await renderPanel(obj));
+        } else htmls(`.${idPanel}-render`, await renderPanel({ ...obj, ...documents }));
         Input.cleanValues(formData);
         s(`.btn-${idPanel}-close`).click();
         s(`.${scrollClassContainer}`).scrollTop = 0;
+        if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
       });
       s(`.btn-${idPanel}-clean`).onclick = () => {
         Input.cleanValues(formData);
@@ -458,13 +516,14 @@ const Panel = {
       s(`.btn-${idPanel}-add`).onclick = (e) => {
         e.preventDefault();
         // s(`.btn-${idPanel}-clean`).click();
-        editId = undefined;
+        Panel.Tokens[idPanel].editId = undefined;
         s(`.btn-${idPanel}-label-add`).classList.remove('hide');
         s(`.btn-${idPanel}-label-edit`).classList.add('hide');
         s(`.${scrollClassContainer}`).scrollTop = 0;
 
         openPanelForm();
       };
+      if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
     });
 
     if (data.length > 0) for (const obj of data) render += await renderPanel(obj);
@@ -597,7 +656,9 @@ const Panel = {
         >
           <div class="in ${idPanel}-form-header">
             ${await BtnIcon.Render({
-              class: `section-mp btn-custom btn-${idPanel}-add`,
+              class: `section-mp btn-custom btn-${idPanel}-add ${
+                options?.role?.add ? (!options.role.add() ? 'hide' : '') : ''
+              }`,
               label: html`<i class="fas fa-plus"></i> ${Translate.Render('add')}`,
               type: 'button',
             })}

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;
@@ -90,16 +92,7 @@ const PanelForm = {
         },
       },
     ];
-    const dateFormat = (date) =>
-      html`<span
-        style="${renderCssAttr({
-          style: {
-            'font-size': '14px',
-            color: '#888',
-          },
-        })}"
-        >${new Date(date).toLocaleString().replaceAll(',', '')}</span
-      >`;
+
     const titleIcon = html`<i class="fa-solid fa-quote-left"></i>`;
     const panelRender = async ({ data }) =>
       await Panel.Render({
@@ -108,6 +101,7 @@ const PanelForm = {
         heightTopBar,
         heightBottomBar,
         data,
+        htmlFormHeader: options.htmlFormHeader,
         parentIdModal: options.parentIdModal,
         originData: () => PanelForm.Data[idPanel].originData,
         filesData: () => PanelForm.Data[idPanel].filesData,
@@ -271,7 +265,7 @@ const PanelForm = {
                 fileId: file ? URL.createObjectURL(file) : undefined,
                 _id: documentData._id,
                 id: documentData._id,
-                createdAt: dateFormat(documentData.createdAt),
+                createdAt: documentData.createdAt,
               };
 
               if (documentStatus === 'error') status = 'error';
@@ -376,7 +370,7 @@ const PanelForm = {
           PanelForm.Data[idPanel].data.push({
             id: documentObject._id,
             title: documentObject.title,
-            createdAt: dateFormat(documentObject.createdAt),
+            createdAt: documentObject.createdAt,
             tags: documentObject.tags.filter((t) => !prefixTags.includes(t)),
             mdFileId: marked.parse(mdFileId),
             userId: documentObject.userId._id,
@@ -430,38 +424,46 @@ const PanelForm = {
           ssr: true,
         })),
       });
-
-    let lastCid;
-    let lasUserId;
+    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 (lastCid === cid && lasUserId === Elements.Data.user.main.model.user._id) return;
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
-      lastCid = cid;
-      lasUserId = newInstance(Elements.Data.user.main.model.user._id);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
       await getPanelData();
       htmls(
         `.${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 (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>