underpost 2.8.844 → 2.8.846

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

@@ -8,7 +8,12 @@ const DropDown = {
   Tokens: {},
   Render: async function (options) {
     const id = options.id ? options.id : getId(this.Tokens, 'dropdown-');
-    this.Tokens[id] = { onClickEvents: {}, lastSelectValue: undefined };
+    this.Tokens[id] = {
+      onClickEvents: {},
+      lastSelectValue: undefined,
+      oncheckvalues: {},
+      originData: options.data ? newInstance(options.data) : [],
+    };
 
     options.data.push({
       value: 'reset',
@@ -39,6 +44,100 @@ const DropDown = {
       else s(`.dropdown-option-${id}`).classList.add('hide');
     };
 
+    const _render = async (data) => {
+      let render = '';
+      let index = -1;
+      for (const optionData of data) {
+        index++;
+        const i = index;
+        const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
+        setTimeout(() => {
+          const onclick = (e) => {
+            if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
+              s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
+            }
+            this.Tokens[id].lastSelectValue = valueDisplay;
+            if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
+              s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.add(options.lastSelectClass);
+            }
+
+            if (
+              !(options && options.disableClose) &&
+              (options.type !== 'checkbox' || optionData.value === 'close' || optionData.value === 'reset')
+            )
+              s(`.dropdown-option-${id}`).classList.add('hide');
+
+            if (options.type === 'checkbox' && ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`])
+              ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`].click();
+            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),
+                  );
+                } 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;
+
+              console.warn('current value dropdown id:' + id, this.Tokens[id].value);
+
+              s(`.${id}`).value = this.Tokens[id].value;
+
+              optionData.onClick(e);
+            }
+          };
+
+          this.Tokens[id].onClickEvents[`dropdown-option-${id}-${i}`] = onclick;
+          this.Tokens[id].onClickEvents[`dropdown-option-${id}-${valueDisplay}`] = onclick;
+          this.Tokens[id].onClickEvents[`dropdown-option-${valueDisplay}`] = onclick;
+
+          s(`.dropdown-option-${id}-${i}`).onclick = onclick;
+        });
+        render += html`
+          <div
+            class="in dropdown-option dropdown-option-${id}-${i} dropdown-option-${id}-${valueDisplay} dropdown-option-${valueDisplay} ${valueDisplay ===
+              'reset' &&
+            options &&
+            !(options.resetOption === true)
+              ? 'hide'
+              : ''}"
+          >
+            ${options.type === 'checkbox' && optionData.value !== 'close' && optionData.value !== 'reset'
+              ? html`
+                  ${await ToggleSwitch.Render({
+                    id: `checkbox-role-${valueDisplay}`,
+                    type: 'checkbox',
+                    disabledOnClick: true,
+                    checked: optionData.checked,
+                    on: {
+                      unchecked: () => {
+                        optionData.checked = false;
+                        delete DropDown.Tokens[id].oncheckvalues[valueDisplay];
+                      },
+                      checked: () => {
+                        optionData.checked = true;
+                        DropDown.Tokens[id].oncheckvalues[valueDisplay] = {};
+                      },
+                    },
+                  })}
+                `
+              : ''}${optionData.display}
+          </div>
+        `;
+      }
+      return { render, index };
+    };
+
     setTimeout(() => {
       if (options.type === 'checkbox')
         options.data.map((optionData) => {
@@ -53,92 +152,48 @@ const DropDown = {
       s(`.dropdown-label-${id}`).onclick = switchOptionsPanel;
       s(`.dropdown-current-${id}`).onclick = switchOptionsPanel;
       if (options && options.open) switchOptionsPanel();
-    });
 
-    let render = '';
-    let index = -1;
-    for (const optionData of options.data) {
-      index++;
-      const i = index;
-      const valueDisplay = optionData.value.trim().replaceAll(' ', '-');
-      setTimeout(() => {
-        const onclick = (e) => {
-          if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
-            s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.remove(options.lastSelectClass);
-          }
-          this.Tokens[id].lastSelectValue = valueDisplay;
-          if (options && options.lastSelectClass && s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`)) {
-            s(`.dropdown-option-${this.Tokens[id].lastSelectValue}`).classList.add(options.lastSelectClass);
-          }
+      const dropDownSearchHandle = async () => {
+        const _data = [];
+        if (!s(`.search-box-${id}`)) return;
 
+        let _value = s(`.search-box-${id}`).value.toLowerCase();
+
+        for (const objData of options.data) {
+          const objValue = objData.value.toLowerCase();
           if (
-            !(options && options.disableClose) &&
-            (options.type !== 'checkbox' || optionData.value === 'close' || optionData.value === 'reset')
-          )
-            s(`.dropdown-option-${id}`).classList.add('hide');
-
-          if (options.type === 'checkbox' && ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`])
-            ToggleSwitch.Tokens[`checkbox-role-${valueDisplay}`].click();
-          if (optionData.value !== 'close') {
-            if (optionData.value !== 'reset')
-              htmls(
-                `.dropdown-current-${id}`,
-                options.type === 'checkbox'
-                  ? options.data
-                      .filter((d) => d.checked)
-                      .map((v, i, a) => `${v.display}${i < a.length - 1 ? ',' : ''}`)
-                      .join('')
-                  : optionData.display,
-              );
-            else htmls(`.dropdown-current-${id}`, '');
-
-            this.Tokens[id].value =
-              options.type === 'checkbox' ? options.data.filter((d) => d.checked).map((d) => d.data) : optionData.data;
-
-            console.warn('current value dropdown id:' + id, this.Tokens[id].value);
-
-            s(`.${id}`).value = this.Tokens[id].value;
-
-            optionData.onClick(e);
+            objValue.match(_value) ||
+            (Translate.Data[objData.value] &&
+              Object.keys(Translate.Data[objData.value]).find((t) =>
+                Translate.Data[objData.value][t].toLowerCase().match(_value),
+              ))
+          ) {
+            _data.push(objData);
           }
-        };
+        }
+
+        if (_data.length > 0) {
+          const { render, index } = await _render(_data);
+          htmls(`.${id}-render-container`, render);
+        } else {
+          // const { render, index } = await _render(options.data);
+          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>`,
+          );
+        }
+      };
+
+      s(`.search-box-${id}`).oninput = dropDownSearchHandle;
+
+      // Not use onblur generate bug on input toggle
+      // s(`.search-box-${id}`).onblur = dropDownSearchHandle;
+    });
 
-        this.Tokens[id].onClickEvents[`dropdown-option-${id}-${i}`] = onclick;
-        this.Tokens[id].onClickEvents[`dropdown-option-${id}-${valueDisplay}`] = onclick;
-        this.Tokens[id].onClickEvents[`dropdown-option-${valueDisplay}`] = onclick;
+    const { render, index } = await _render(options.data);
 
-        s(`.dropdown-option-${id}-${i}`).onclick = onclick;
-      });
-      render += html`
-        <div
-          class="in dropdown-option dropdown-option-${id}-${i} dropdown-option-${id}-${valueDisplay} dropdown-option-${valueDisplay} ${valueDisplay ===
-            'reset' &&
-          options &&
-          !(options.resetOption === true)
-            ? 'hide'
-            : ''}"
-        >
-          ${options.type === 'checkbox' && optionData.value !== 'close' && optionData.value !== 'reset'
-            ? html`
-                ${await ToggleSwitch.Render({
-                  id: `checkbox-role-${valueDisplay}`,
-                  type: 'checkbox',
-                  disabledOnClick: true,
-                  checked: optionData.checked,
-                  on: {
-                    unchecked: () => {
-                      optionData.checked = false;
-                    },
-                    checked: () => {
-                      optionData.checked = true;
-                    },
-                  },
-                })}
-              `
-            : ''}${optionData.display}
-        </div>
-      `;
-    }
     return html`
       <div class="inl dropdown-container ${id} ${options?.containerClass ? options.containerClass : ''}">
         <div class="in dropdown-option dropdown-label-${id} ${options && options.disableSelectLabel ? 'hide' : ''}">
@@ -158,7 +213,7 @@ const DropDown = {
               placeholder: true,
             })}
           </div>
-          ${render}
+          <div class="${id}-render-container">${render}</div>
         </div>
       </div>
     `;

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

@@ -24,7 +24,7 @@ import {
   renderStatus,
   renderCssAttr,
 } from './Css.js';
-import { setDocTitle } from './Router.js';
+import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
@@ -126,19 +126,13 @@ const Modal = {
           };
           Responsive.Event[`view-${idModal}`]();
 
-          // Router
-          if (options.route)
-            (() => {
-              let path = window.location.pathname;
-              if (path !== '/' && path[path.length - 1] === '/') path = path.slice(0, -1);
-              const proxyPath = getProxyPath();
-              const newPath = `${proxyPath}${options.route}`;
-              if (path !== newPath) {
-                // console.warn('SET MODAL URI', newPath);
-                setPath(`${newPath}`); // ${location.search}
-                setDocTitle({ ...options.RouterInstance, route: options.route });
-              }
-            })();
+          // Handle view mode modal route
+          if (options.route) {
+            handleModalViewRoute({
+              route: options.route,
+              RouterInstance: options.RouterInstance,
+            });
+          }
 
           break;
         case 'slide-menu':
@@ -249,8 +243,17 @@ const Modal = {
                     style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
                     (options.mode && options.mode.match('right'))
                       ? 'right'
-                      : 'left'}: 50px; width: 50px; height: 100px; transition: .3s"
+                      : 'left'}: 50px; width: 50px; height: 150px; transition: .3s"
                   >
+                    <div
+                      class="abs main-body-btn main-body-btn-ui"
+                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                    >
+                      <div class="abs center">
+                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
+                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                      </div>
+                    </div>
                     <div
                       class="abs main-body-btn main-body-btn-menu"
                       style="top: 50px; ${true || (options.mode && options.mode.match('right'))
@@ -263,15 +266,16 @@ const Modal = {
                       </div>
                     </div>
                     <div
-                      class="abs main-body-btn main-body-btn-ui"
-                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                      class="abs main-body-btn main-body-btn-bar-custom ${options?.slideMenuTopBarFix ? '' : 'hide'}"
+                      style="top: 100px; ${true || (options.mode && options.mode.match('right'))
+                        ? 'right'
+                        : 'left'}: 0px"
                     >
                       <div class="abs center">
-                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
-                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                        <i class="fa-solid fa-magnifying-glass main-body-btn-ui-bar-custom-open"></i>
+                        <i class="fa-solid fa-home hide main-body-btn-ui-bar-custom-close"></i>
                       </div>
                     </div>
-                    <div class="main-body-btn-container-custom"></div>
                   </div>
                 `,
               );
@@ -280,6 +284,22 @@ const Modal = {
                 Modal.actionBtnCenter();
               };
 
+              s(`.main-body-btn-bar-custom`).onclick = () => {
+                if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui`).click();
+                }
+                if (s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui-bar-custom-open`).classList.remove('hide');
+                  s(`.main-body-btn-ui-bar-custom-close`).classList.add('hide');
+                  s(`.slide-menu-top-bar-fix`).style.top = '0px';
+                } else {
+                  s(`.main-body-btn-ui-bar-custom-open`).classList.add('hide');
+                  s(`.main-body-btn-ui-bar-custom-close`).classList.remove('hide');
+                  s(`.slide-menu-top-bar-fix`).style.top = '-100px';
+                  s(`.top-bar-search-box-container`).click();
+                }
+              };
+
               let _heightTopBar, _heightBottomBar, _topMenu;
               s(`.main-body-btn-ui`).onclick = () => {
                 if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
@@ -410,7 +430,10 @@ const Modal = {
                   </div>
                 </div>
                 ${options?.slideMenuTopBarFix
-                  ? html`<div class="abs modal slide-menu-top-bar-fix" style="height: ${options.heightTopBar}px">
+                  ? html`<div
+                      class="abs modal slide-menu-top-bar-fix"
+                      style="height: ${options.heightTopBar}px; top: 0px"
+                    >
                       ${await options.slideMenuTopBarFix()}
                     </div>`
                   : ''}
@@ -604,7 +627,16 @@ const Modal = {
                   Modal.removeModal(searchBoxHistoryId);
                   return;
                 }
-                setTimeout(() => getResultSearchBox(validatorData));
+                setTimeout(() => {
+                  getResultSearchBox(validatorData);
+
+                  if (
+                    s(`.slide-menu-top-bar-fix`) &&
+                    !s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide')
+                  ) {
+                    s(`.main-body-btn-bar-custom`).click();
+                  }
+                });
               };
 
               const getDefaultSearchBoxSelector = () => `.search-result-btn-${currentKeyBoardSearchBoxIndex}`;
@@ -890,6 +922,9 @@ const Modal = {
                   ],
                   eventCallBack: () => {
                     if (s(`.top-bar-search-box`)) {
+                      if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
+                        s(`.main-body-btn-ui-open`).click();
+                      }
                       s(`.top-bar-search-box`).blur();
                       s(`.top-bar-search-box`).focus();
                       s(`.top-bar-search-box`).select();
@@ -1026,7 +1061,7 @@ const Modal = {
                   await Modal.onHomeRouterEvent();
                   Object.keys(this.Data[idModal].onHome).map((keyListener) => this.Data[idModal].onHome[keyListener]());
                 });
-                EventsUI.onClick(`.action-btn-app-icon`, () => Modal.onHomeRouterEvent());
+                EventsUI.onClick(`.action-btn-app-icon`, () => s(`.action-btn-home`).click());
                 Keyboard.instanceMultiPressKey({
                   id: 'input-shortcut-global-escape',
                   keys: ['Escape'],
@@ -1089,12 +1124,13 @@ const Modal = {
                         icon: html`<i class="fas fa-language mini-title"></i>`,
                         text: Translate.Render('select lang'),
                       })}`,
-                      html: () => html``,
+                      html: async () => html`${await Translate.RenderSetting('action-drop-modal' + id)}`,
                       titleClass: 'mini-title',
                       style: {
                         resize: 'none',
-                        'max-width': '300px',
-                        height: '150px !important',
+                        width: '100% !important',
+                        height: '350px !important',
+                        'max-width': '350px !important',
                         'z-index': 7,
                       },
                       dragDisabled: true,
@@ -1435,7 +1471,8 @@ const Modal = {
           setDocTitle({ ...options.RouterInstance, route: '' });
         };
         s(`.main-btn-home`).onclick = async () => {
-          await this.onHomeRouterEvent();
+          // await this.onHomeRouterEvent();
+          s(`.action-btn-home`).click();
         };
         EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
@@ -1652,27 +1689,14 @@ const Modal = {
       setTimeout(() => {
         if (!s(`.${idModal}`)) return;
         this.removeModal(idModal);
-        // Router
-        if (options.route)
-          (() => {
-            let path = window.location.pathname;
-            if (path[path.length - 1] !== '/') path = `${path}/`;
-            let newPath = `${getProxyPath()}`;
-            if (path !== newPath) {
-              for (const subIdModal of Object.keys(this.Data).reverse()) {
-                if (this.Data[subIdModal].options.route) {
-                  newPath = `${newPath}${this.Data[subIdModal].options.route}`;
-                  console.warn('------------> SET MODAL URI', newPath);
-                  setPath(newPath);
-                  this.setTopModalCallback(subIdModal);
-                  return setDocTitle({ ...options.RouterInstance, route: this.Data[subIdModal].options.route });
-                }
-              }
-              console.warn('-------------> SET MODAL URI', newPath);
-              setPath(`${newPath}${Modal.homeCid ? `?cid=${Modal.homeCid}` : ''}`);
-              return setDocTitle({ ...options.RouterInstance, route: '' });
-            }
-          })();
+        // Handle modal route change
+        if (options.route) {
+          closeModalRouteChangeEvent({
+            route: options.route,
+            RouterInstance: options.RouterInstance,
+            homeCid: Modal.homeCid,
+          });
+        }
       }, 300);
     };
     s(`.btn-close-${idModal}`).onclick = btnCloseEvent;