@underpostnet/underpost 2.97.0 → 2.97.5

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

@@ -34,6 +34,7 @@ import { Badge } from './Badge.js';
 import { Worker } from './Worker.js';
 import { Scroll } from './Scroll.js';
 import { windowGetH, windowGetW } from './windowGetDimensions.js';
+import { SearchBox } from './SearchBox.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
@@ -73,7 +74,7 @@ const Modal = {
     const minWidth = width;
     const heightDefaultTopBar = 50;
     const heightDefaultBottomBar = 0;
-    const idModal = options && 'id' in options ? options.id : getId(this.Data, 'modal-');
+    const idModal = options.id ? options.id : getId(this.Data, 'modal-');
     this.Data[idModal] = {
       options,
       onCloseListener: {},
@@ -549,6 +550,9 @@ const Modal = {
             const inputInfoNode = s(`.input-info-${inputSearchBoxId}`).cloneNode(true);
             s(`.input-info-${inputSearchBoxId}`).remove();
             {
+              // Inject SearchBox base styles
+              SearchBox.injectStyles();
+
               const id = 'search-box-history';
               const searchBoxHistoryId = id;
               const formDataInfoNode = [
@@ -568,7 +572,6 @@ const Modal = {
               });
               let currentKeyBoardSearchBoxIndex = 0;
               let results = [];
-              let historySearchBox = [];
 
               const checkHistoryBoxTitleStatus = () => {
                 if (s(`.search-box-result-title`) && s(`.search-box-result-title`).classList) {
@@ -589,8 +592,28 @@ const Modal = {
                 } else s(`.key-shortcut-container-info`).classList.add('hide');
               };
 
-              const renderSearchResult = async (results) => {
+              const renderSearchResult = async (results, isRecentHistory = false) => {
+                // Check if the search history modal still exists before rendering
+                if (!s(`.html-${searchBoxHistoryId}`)) return;
+
                 htmls(`.html-${searchBoxHistoryId}`, '');
+
+                // Show/hide clear-all button based on whether showing recent history
+                // Use setTimeout to ensure the button is in the DOM after modal renders
+                const updateClearAllBtn = () => {
+                  const clearAllBtn = s(`.btn-search-history-clear-all`);
+                  if (clearAllBtn) {
+                    if (isRecentHistory && results.length > 0) {
+                      clearAllBtn.style.display = 'flex';
+                    } else {
+                      clearAllBtn.style.display = 'none';
+                    }
+                  }
+                };
+                // Try immediately and also with a delay to handle timing
+                updateClearAllBtn();
+                setTimeout(updateClearAllBtn, 50);
+
                 if (results.length === 0) {
                   append(
                     `.html-${searchBoxHistoryId}`,
@@ -609,108 +632,63 @@ const Modal = {
                       }),
                     }),
                   );
+                  return;
                 }
-                let indexResult = -1;
-                for (const result of results) {
-                  indexResult++;
-                  const indexRender = indexResult;
-                  append(
-                    `.html-${searchBoxHistoryId}`,
-                    await BtnIcon.Render({
-                      label: `${
-                        result.fontAwesomeIcon
-                          ? html`<i class="${result.fontAwesomeIcon.classList.toString()}"></i> `
-                          : result.imgElement
-                            ? html`<img
-                                class="inl"
-                                src="${result.imgElement.src}"
-                                style="${renderCssAttr({ style: { width: '25px', height: '25px' } })}"
-                              />`
-                            : ''
-                      } ${Translate.Render(result.routerId)}`,
-                      class: `wfa search-result-btn-${result.routerId} ${
-                        indexResult === currentKeyBoardSearchBoxIndex ? 'main-btn-menu-active' : ''
-                      } search-result-btn-${indexResult}`,
-                      style: renderCssAttr({
-                        style: { padding: '3px', margin: '2px', 'text-align': 'left' },
-                      }),
-                    }),
-                  );
-                  s(`.search-result-btn-${result.routerId}`).onclick = () => {
-                    if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
-                    s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                      `main-btn-menu-active`,
-                    );
-                    currentKeyBoardSearchBoxIndex = indexRender;
-                    s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                      `main-btn-menu-active`,
-                    );
-                    setSearchValue(`.search-result-btn-${result.routerId}`);
-                  };
-                }
+
+                // Use SearchBox component for rendering results
+                const searchContext = {
+                  RouterInstance: Worker.RouterInstance,
+                  options: options,
+                  isRecentHistory: isRecentHistory, // Flag for delete button visibility
+                  onResultClick: () => {
+                    // Dismiss search box on result click
+                    if (s(`.${searchBoxHistoryId}`)) {
+                      Modal.removeModal(searchBoxHistoryId);
+                    }
+                  },
+                };
+
+                SearchBox.renderResults(results, `html-${searchBoxHistoryId}`, searchContext);
               };
 
-              const getResultSearchBox = (validatorData) => {
-                if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
+              const getResultSearchBox = async (validatorData) => {
+                if (!s(`.html-${searchBoxHistoryId}`)) return;
                 const { model, id } = validatorData;
+
                 switch (model) {
                   case 'search-box':
                     {
-                      if (
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList
-                      )
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                          `main-btn-menu-active`,
-                        );
                       currentKeyBoardSearchBoxIndex = 0;
-                      if (
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList
-                      )
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                          `main-btn-menu-active`,
-                        );
                       results = [];
-                      const routerInstance = Worker.RouterInstance.Routes();
-                      for (const _routerId of Object.keys(routerInstance)) {
-                        const routerId = _routerId.slice(1);
-                        if (routerId) {
-                          if (
-                            s(`.main-btn-${routerId}`) &&
-                            (routerId.toLowerCase().match(s(`.${id}`).value.toLowerCase()) ||
-                              (Translate.Data[routerId] &&
-                                Object.keys(Translate.Data[routerId]).filter((keyLang) =>
-                                  Translate.Data[routerId][keyLang]
-                                    .toLowerCase()
-                                    .match(s(`.${id}`).value.toLowerCase()),
-                                ).length > 0))
-                          ) {
-                            const fontAwesomeIcon = getAllChildNodes(s(`.main-btn-${routerId}`)).find((e) => {
-                              return (
-                                e.classList &&
-                                Array.from(e.classList).find((e) => e.match('fa-') && !e.match('fa-grip-vertical'))
-                              );
-                            });
-                            const imgElement = getAllChildNodes(s(`.main-btn-${routerId}`)).find((e) => {
-                              return (
-                                e.classList &&
-                                Array.from(e.classList).find((e) =>
-                                  options.searchCustomImgClass
-                                    ? e.match(options.searchCustomImgClass)
-                                    : e.match('img-btn-square-menu'),
-                                )
-                              );
-                            });
-                            if (imgElement || fontAwesomeIcon) {
-                              results.push({
-                                routerId,
-                                fontAwesomeIcon: fontAwesomeIcon,
-                                imgElement,
-                              });
-                            }
+
+                      const query = s(`.${id}`) ? s(`.${id}`).value : '';
+                      const trimmedQuery = query.trim();
+
+                      // Use SearchBox component for extensible search
+                      const searchContext = {
+                        RouterInstance: Worker.RouterInstance,
+                        options: options,
+                        minQueryLength: options?.minSearchQueryLength || 1, // Allow single character search by default
+                        onResultClick: () => {
+                          // Dismiss search box on result click
+                          if (s(`.${searchBoxHistoryId}`)) {
+                            Modal.removeModal(searchBoxHistoryId);
                           }
-                        }
+                        },
+                      };
+
+                      // Check minimum query length (default: 1 character)
+                      const minLength = searchContext.minQueryLength;
+                      if (trimmedQuery.length >= minLength) {
+                        results = await SearchBox.search(trimmedQuery, searchContext);
+                        renderSearchResult(results, false); // Search results - no delete buttons
+                      } else if (trimmedQuery.length === 0) {
+                        // Show recent results from persistent history when query is empty
+                        const recentResults = SearchBox.RecentResults.getAll();
+                        renderSearchResult(recentResults, true); // Recent history - show delete buttons
+                      } else {
+                        // Query is too short - show nothing or a hint
+                        renderSearchResult([], false);
                       }
                     }
                     break;
@@ -718,8 +696,6 @@ const Modal = {
                   default:
                     break;
                 }
-                if (s(`.${inputSearchBoxId}`).value.trim()) renderSearchResult(results);
-                else renderSearchResult(historySearchBox);
               };
 
               const searchBoxCallBack = async (validatorData) => {
@@ -742,28 +718,20 @@ const Modal = {
                 });
               };
 
-              const getDefaultSearchBoxSelector = () => `.search-result-btn-${currentKeyBoardSearchBoxIndex}`;
-
               const updateSearchBoxValue = (selector) => {
-                if (!selector) selector = getDefaultSearchBoxSelector();
-                // check exist childNodes
-                if (!s(selector) || !s(selector).hasChildNodes()) return;
-
-                if (s(selector).childNodes) {
-                  if (
-                    s(selector).childNodes[s(selector).childNodes.length - 1] &&
-                    s(selector).childNodes[s(selector).childNodes.length - 1].data &&
-                    s(selector).childNodes[s(selector).childNodes.length - 1].data.trim()
-                  ) {
-                    s(`.${inputSearchBoxId}`).value =
-                      s(selector).childNodes[s(selector).childNodes.length - 1].data.trim();
-                  } else if (
-                    s(selector).childNodes[s(selector).childNodes.length - 2] &&
-                    s(selector).childNodes[s(selector).childNodes.length - 2].outerText &&
-                    s(selector).childNodes[s(selector).childNodes.length - 2].outerText.trim()
-                  ) {
-                    s(`.${inputSearchBoxId}`).value =
-                      s(selector).childNodes[s(selector).childNodes.length - 2].outerText.trim();
+                if (!selector) {
+                  // Get the currently active search result item
+                  const activeItem = s(`.html-${searchBoxHistoryId} .search-result-item.active-search-result`);
+                  if (activeItem) {
+                    const titleEl = activeItem.querySelector('.search-result-title');
+                    if (titleEl && titleEl.textContent) {
+                      s(`.${inputSearchBoxId}`).value = titleEl.textContent.trim();
+                    }
+                  }
+                } else if (s(selector)) {
+                  const titleEl = s(selector).querySelector('.search-result-title');
+                  if (titleEl && titleEl.textContent) {
+                    s(`.${inputSearchBoxId}`).value = titleEl.textContent.trim();
                   }
                 }
                 checkHistoryBoxTitleStatus();
@@ -771,17 +739,32 @@ const Modal = {
               };
 
               const setSearchValue = (selector) => {
-                if (!selector) selector = getDefaultSearchBoxSelector();
-
-                // check exist childNodes
-                if (!s(selector) || !s(selector).hasChildNodes()) return;
-
-                historySearchBox = historySearchBox.filter(
-                  (h) => h.routerId !== results[currentKeyBoardSearchBoxIndex].routerId,
-                );
-                historySearchBox.unshift(results[currentKeyBoardSearchBoxIndex]);
-                updateSearchBoxValue(selector);
-                s(`.main-btn-${results[currentKeyBoardSearchBoxIndex].routerId}`).click();
+                // Get all search result items
+                const allItems = sa(`.html-${searchBoxHistoryId} .search-result-item`);
+                if (!allItems || allItems.length === 0) return;
+
+                const activeItem = allItems[currentKeyBoardSearchBoxIndex];
+                if (!activeItem) return;
+
+                const resultId = activeItem.getAttribute('data-result-id');
+                const resultType = activeItem.getAttribute('data-result-type');
+
+                if (resultType === 'route' && results[currentKeyBoardSearchBoxIndex]) {
+                  const result = results[currentKeyBoardSearchBoxIndex];
+                  // Track in persistent history
+                  SearchBox.RecentResults.add(result);
+                  updateSearchBoxValue();
+                  if (s(`.main-btn-${resultId}`)) {
+                    s(`.main-btn-${resultId}`).click();
+                  }
+                } else {
+                  // Track custom provider result in persistent history
+                  if (results[currentKeyBoardSearchBoxIndex]) {
+                    SearchBox.RecentResults.add(results[currentKeyBoardSearchBoxIndex]);
+                  }
+                  // Trigger click on custom result
+                  activeItem.click();
+                }
                 Modal.removeModal(searchBoxHistoryId);
               };
               let boxHistoryDelayRender = 0;
@@ -799,21 +782,28 @@ const Modal = {
                   barConfig.buttons.restore.disabled = true;
                   barConfig.buttons.menu.disabled = true;
                   barConfig.buttons.close.disabled = false;
+
                   await Modal.Render({
                     id: searchBoxHistoryId,
                     barConfig,
-                    title: html`<div class="search-box-recent-title">
-                        ${renderViewTitle({
-                          icon: html`<i class="fas fa-history mini-title"></i>`,
-                          text: Translate.Render('recent'),
-                        })}
+                    title: html`<div
+                      style="display: flex; align-items: center; justify-content: space-between; width: 100%;"
+                    >
+                      <div style="display: flex; align-items: center; gap: 8px;">
+                        <div class="search-box-recent-title">
+                          ${renderViewTitle({
+                            icon: html`<i class="fas fa-history mini-title"></i>`,
+                            text: Translate.Render('recent'),
+                          })}
+                        </div>
+                        <div class="search-box-result-title hide">
+                          ${renderViewTitle({
+                            icon: html`<i class="far fa-list-alt mini-title"></i>`,
+                            text: Translate.Render('results'),
+                          })}
+                        </div>
                       </div>
-                      <div class="search-box-result-title hide">
-                        ${renderViewTitle({
-                          icon: html`<i class="far fa-list-alt mini-title"></i>`,
-                          text: Translate.Render('results'),
-                        })}
-                      </div>`,
+                    </div>`,
                     html: () => html``,
                     titleClass: 'mini-title',
                     style: {
@@ -825,6 +815,7 @@ const Modal = {
                           : '300px !important',
                       'z-index': 7,
                     },
+                    class: 'search-history-modal',
                     dragDisabled: true,
                     maximize: true,
                     barMode: options.barMode,
@@ -842,6 +833,63 @@ const Modal = {
 
                   Modal.MoveTitleToBar(id);
 
+                  // Add styles for inline button layout in the search history modal bar
+                  const styleId = 'search-history-modal-bar-styles';
+                  if (!s(`#${styleId}`)) {
+                    const styleTag = document.createElement('style');
+                    styleTag.id = styleId;
+                    styleTag.textContent = `
+                      .search-history-modal .btn-bar-modal-container .bar-default-modal {
+                        display: flex;
+                        flex-direction: row-reverse;
+                        align-items: center;
+                      }
+                      .search-history-modal .btn-bar-modal-container .btn-modal-default {
+                        display: inline-flex;
+                        align-items: center;
+                        justify-content: center;
+                        float: none;
+                      }
+                      .search-history-modal .html-${searchBoxHistoryId} {
+                        overflow-x: hidden;
+                        box-sizing: border-box;
+                      }
+                      .search-history-modal .html-${searchBoxHistoryId} .search-result-item,
+                      .search-history-modal .html-${searchBoxHistoryId} .search-result-history-item {
+                        box-sizing: border-box;
+                        max-width: 100%;
+                      }
+                    `;
+                    document.head.appendChild(styleTag);
+                  }
+
+                  // Add clear all button to the bar area, before the close button
+                  const clearAllBtnHtml = await BtnIcon.Render({
+                    class: `btn-search-history-clear-all btn-modal-default btn-modal-default-${searchBoxHistoryId}`,
+                    label: html`<i class="fas fa-trash-alt"></i>`,
+                    attrs: `title="Clear all recent items"`,
+                    style: 'padding: 4px 8px; font-size: 12px; display: none;',
+                  });
+
+                  // Insert before close button in the bar (with flex row-reverse, inserting after close button places our button to its left visually)
+                  const closeBtn = s(`.btn-close-${searchBoxHistoryId}`);
+                  if (closeBtn) {
+                    closeBtn.insertAdjacentHTML('afterend', clearAllBtnHtml);
+                  }
+
+                  // Add click handler for clear all history button
+                  const clearAllBtn = s(`.btn-search-history-clear-all`);
+                  if (clearAllBtn) {
+                    clearAllBtn.onclick = (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      // Clear all history from persistent storage
+                      SearchBox.RecentResults.clear();
+                      // Re-render to show empty history (with isRecentHistory true to hide button)
+                      renderSearchResult([], true);
+                    };
+                  }
+
                   prepend(`.btn-bar-modal-container-${id}`, html`<div class="hide">${inputInfoNode.outerHTML}</div>`);
                 }
               };
@@ -879,27 +927,29 @@ const Modal = {
                 keys: ['ArrowUp'],
                 eventCallBack: () => {
                   if (s(`.${id}`)) {
-                    if (
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex - 1]
-                    ) {
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                        `main-btn-menu-active`,
-                      );
+                    const allItems = sa(`.html-${searchBoxHistoryId} .search-result-item`);
+                    if (!allItems || allItems.length === 0) return;
+
+                    // Remove active class from current
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.remove('active-search-result');
+                    }
+
+                    // Navigate up
+                    if (currentKeyBoardSearchBoxIndex > 0) {
                       currentKeyBoardSearchBoxIndex--;
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                        `main-btn-menu-active`,
-                      );
                     } else {
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                          `main-btn-menu-active`,
-                        );
-                      currentKeyBoardSearchBoxIndex = s(`.html-${searchBoxHistoryId}`).childNodes.length - 1;
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                          `main-btn-menu-active`,
-                        );
+                      currentKeyBoardSearchBoxIndex = allItems.length - 1;
+                    }
+
+                    // Add active class to new and ensure visibility
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.add('active-search-result');
+                      // Use optimized scroll method to ensure item is always visible
+                      const container = s(`.html-${searchBoxHistoryId}`);
+                      if (container) {
+                        SearchBox.scrollIntoViewIfNeeded(allItems[currentKeyBoardSearchBoxIndex], container);
+                      }
                     }
                     updateSearchBoxValue();
                   }
@@ -912,27 +962,29 @@ const Modal = {
                 keys: ['ArrowDown'],
                 eventCallBack: () => {
                   if (s(`.${id}`)) {
-                    if (
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex] &&
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex + 1]
-                    ) {
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                        `main-btn-menu-active`,
-                      );
+                    const allItems = sa(`.html-${searchBoxHistoryId} .search-result-item`);
+                    if (!allItems || allItems.length === 0) return;
+
+                    // Remove active class from current
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.remove('active-search-result');
+                    }
+
+                    // Navigate down
+                    if (currentKeyBoardSearchBoxIndex < allItems.length - 1) {
                       currentKeyBoardSearchBoxIndex++;
-                      s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                        `main-btn-menu-active`,
-                      );
                     } else {
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
-                          `main-btn-menu-active`,
-                        );
                       currentKeyBoardSearchBoxIndex = 0;
-                      if (s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex])
-                        s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.add(
-                          `main-btn-menu-active`,
-                        );
+                    }
+
+                    // Add active class to new and ensure visibility
+                    if (allItems[currentKeyBoardSearchBoxIndex]) {
+                      allItems[currentKeyBoardSearchBoxIndex].classList.add('active-search-result');
+                      // Use optimized scroll method to ensure item is always visible
+                      const container = s(`.html-${searchBoxHistoryId}`);
+                      if (container) {
+                        SearchBox.scrollIntoViewIfNeeded(allItems[currentKeyBoardSearchBoxIndex], container);
+                      }
                     }
                     updateSearchBoxValue();
                   }
@@ -2054,6 +2106,34 @@ const Modal = {
   },
   mobileModal: () => windowGetW() < 600 || windowGetH() < 600,
   writeHTML: ({ idModal, html }) => htmls(`.html-${idModal}`, html),
+  updateModal: async function ({ idModal, html, title }) {
+    if (!this.Data[idModal] || !s(`.${idModal}`)) {
+      console.warn(`Modal ${idModal} not found for update`);
+      return false;
+    }
+
+    // Update modal content
+    if (html) {
+      this.writeHTML({ idModal, html });
+    }
+
+    // Update modal title if provided
+    if (title) {
+      const titleElement = s(`.${idModal} .modal-title`);
+      if (titleElement) {
+        titleElement.innerHTML = title;
+      }
+    }
+
+    // Trigger reload listeners
+    if (this.Data[idModal].onReloadModalListener) {
+      for (const event of Object.keys(this.Data[idModal].onReloadModalListener)) {
+        await this.Data[idModal].onReloadModalListener[event]();
+      }
+    }
+
+    return true;
+  },
   viewModalOpen: function () {
     return Object.keys(this.Data).find((idModal) => s(`.${idModal}`) && this.Data[idModal].options.mode === 'view');
   },