@underpostnet/underpost 2.97.1 → 2.98.0

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

@@ -1,3 +1,11 @@
+/**
+ * Input component module for form controls and file handling utilities.
+ * Provides input rendering, file data conversion, and blob endpoint integration.
+ *
+ * @module src/client/components/core/Input.js
+ * @namespace InputClient
+ */
+
 import { AgGrid } from './AgGrid.js';
 import { BtnIcon } from './BtnIcon.js';
 import { isValidDate } from './CommonJs.js';
@@ -8,8 +16,26 @@ import { RichText } from './RichText.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
 import { Translate } from './Translate.js';
 import { htmls, htmlStrSanitize, s } from './VanillaJs.js';
+import { getApiBaseUrl } from '../../services/core/core.service.js';
+import { FileService } from '../../services/file/file.service.js';
+
+/**
+ * Logger instance for this module.
+ * @type {Function}
+ * @memberof InputClient
+ * @private
+ */
 const logger = loggerFactory(import.meta);
 
+/**
+ * Creates a FormData object from file input event.
+ * Filters files by extension if provided.
+ * @function fileFormDataFactory
+ * @memberof InputClient
+ * @param {Event} e - The input change event containing files.
+ * @param {string[]} [extensions] - Optional array of allowed MIME types.
+ * @returns {FormData} FormData object containing the valid files.
+ */
 const fileFormDataFactory = (e, extensions) => {
   const form = new FormData();
   for (const keyFile of Object.keys(e.target.files)) {
@@ -17,22 +43,163 @@ const fileFormDataFactory = (e, extensions) => {
       logger.error('Invalid file extension', e.target.files[keyFile]);
       continue;
     }
-    form.append(e.target.files[keyFile].name, e.target.files[keyFile]);
+    // form.append(e.target.files[keyFile].name, e.target.files[keyFile]);
+    // Use standard 'file' field name for all files - server expects this format
+    form.append('file', e.target.files[keyFile]);
   }
   return form;
 };
 
+/**
+ * Convert file data to File object.
+ * Supports both legacy format (with buffer data) and new format (metadata only).
+ *
+ * Legacy format: `{ data: { data: [0, 1, 2, ...] }, mimetype: 'text/markdown', name: 'file.md' }`
+ * New format: `{ _id: '...', mimetype: 'text/markdown', name: 'file.md' }`
+ *
+ * @function getFileFromFileData
+ * @memberof InputClient
+ * @param {Object} fileData - File data object in legacy or new format.
+ * @param {Object} [fileData.data] - Legacy format data container.
+ * @param {Array<number>} [fileData.data.data] - Legacy format byte array.
+ * @param {string} [fileData._id] - New format file ID.
+ * @param {string} fileData.mimetype - MIME type of the file.
+ * @param {string} fileData.name - Name of the file.
+ * @returns {File|null} File object if legacy format, null if metadata-only or invalid.
+ */
 const getFileFromFileData = (fileData) => {
-  const blob = new Blob([new Uint8Array(fileData.data.data)], { type: fileData.mimetype });
-  return new File([blob], fileData.name, { type: fileData.mimetype });
+  if (!fileData) {
+    logger.error('getFileFromFileData: fileData is undefined');
+    return null;
+  }
+
+  // Check if this is legacy format with buffer data
+  if (fileData.data?.data) {
+    try {
+      const blob = new Blob([new Uint8Array(fileData.data.data)], { type: fileData.mimetype });
+      return new File([blob], fileData.name, { type: fileData.mimetype });
+    } catch (error) {
+      logger.error('Error creating File from legacy buffer data:', error);
+      return null;
+    }
+  }
+
+  // New format - metadata only, cannot create File without content
+  // Return null and let caller fetch from blob endpoint if needed
+  if (fileData._id && !fileData.data?.data) {
+    logger.warn(
+      'getFileFromFileData: File is metadata-only, cannot create File object without content. File ID:',
+      fileData._id,
+    );
+    return null;
+  }
+
+  logger.error('getFileFromFileData: Invalid file data structure', fileData);
+  return null;
+};
+
+/**
+ * Fetch file content from blob endpoint and create File object.
+ * Used for metadata-only format files during edit mode.
+ * Uses FileService with blob/ prefix for centralized blob fetching.
+ *
+ * @async
+ * @function getFileFromBlobEndpoint
+ * @memberof InputClient
+ * @param {Object} fileData - File metadata object with _id.
+ * @param {string} fileData._id - File ID for blob endpoint lookup.
+ * @param {string} [fileData.name] - Optional file name.
+ * @param {string} [fileData.mimetype] - Optional MIME type.
+ * @returns {Promise<File|null>} File object from blob endpoint, or null on error.
+ */
+const getFileFromBlobEndpoint = async (fileData) => {
+  if (!fileData || !fileData._id) {
+    return null;
+  }
+
+  try {
+    const { data: blobArray, status } = await FileService.get({ id: `blob/${fileData._id}` });
+    if (status !== 'success' || !blobArray || !blobArray[0]) {
+      logger.error('Failed to fetch file from blob endpoint');
+      return null;
+    }
+
+    const blob = blobArray[0];
+    return new File([blob], fileData.name || 'file', { type: fileData.mimetype || blob.type });
+  } catch (error) {
+    logger.error('Error fetching file from blob endpoint:', error);
+    return null;
+  }
 };
 
+/**
+ * Get image/file source URL from file data.
+ * Supports both legacy format (with buffer) and new format (metadata only).
+ * For new format, returns blob endpoint URL.
+ *
+ * @function getSrcFromFileData
+ * @memberof InputClient
+ * @param {Object} fileData - File data object in legacy or new format.
+ * @param {Object} [fileData.data] - Legacy format data container.
+ * @param {Array<number>} [fileData.data.data] - Legacy format byte array.
+ * @param {string} [fileData._id] - New format file ID for blob endpoint.
+ * @param {string} fileData.mimetype - MIME type of the file.
+ * @returns {string|null} Object URL for legacy format, blob endpoint URL for new format, or null on error.
+ */
 const getSrcFromFileData = (fileData) => {
-  const file = getFileFromFileData(fileData);
-  return URL.createObjectURL(file);
+  if (!fileData) {
+    logger.error('getSrcFromFileData: fileData is undefined');
+    return null;
+  }
+
+  // Legacy format with buffer data - create object URL
+  if (fileData.data?.data) {
+    try {
+      const file = getFileFromFileData(fileData);
+      if (file) {
+        return URL.createObjectURL(file);
+      }
+    } catch (error) {
+      logger.error('Error getting src from legacy buffer data:', error);
+    }
+  }
+
+  // New format - use blob endpoint
+  if (fileData._id) {
+    try {
+      return getApiBaseUrl({ id: fileData._id, endpoint: 'file/blob' });
+    } catch (error) {
+      logger.error('Error generating blob URL:', error);
+      return null;
+    }
+  }
+
+  logger.error('getSrcFromFileData: Cannot generate src, invalid file data:', fileData);
+  return null;
 };
 
+/**
+ * Input component for rendering various form input types.
+ * Supports text, password, file, color, date, dropdown, toggle, rich text, and grid inputs.
+ * @namespace InputClient.Input
+ * @memberof InputClient
+ */
 const Input = {
+  /**
+   * Renders an input element based on the provided options.
+   * @async
+   * @function Render
+   * @memberof InputClient.Input
+   * @param {Object} options - Input configuration options.
+   * @param {string} options.id - Unique identifier for the input.
+   * @param {string} [options.type] - Input type (text, password, file, color, datetime-local, etc.).
+   * @param {string} [options.placeholder] - Placeholder text.
+   * @param {string} [options.label] - Label text for the input.
+   * @param {string} [options.containerClass] - CSS class for the container.
+   * @param {string} [options.inputClass] - CSS class for the input element.
+   * @param {boolean} [options.disabled] - Whether the input is disabled.
+   * @returns {Promise<string>} HTML string for the input component.
+   */
   Render: async function (options) {
     const { id } = options;
     options?.placeholder
@@ -184,8 +351,8 @@ const Input = {
     }
     return obj;
   },
-  setValues: function (formData, obj, originObj, fileObj) {
-    setTimeout(() => {
+  setValues: async function (formData, obj, originObj, fileObj) {
+    setTimeout(async () => {
       for (const inputData of formData) {
         if (!s(`.${inputData.id}`)) continue;
 
@@ -194,11 +361,31 @@ const Input = {
             if (fileObj && fileObj[inputData.model] && s(`.${inputData.id}`)) {
               const dataTransfer = new DataTransfer();
 
-              if (fileObj[inputData.model].fileBlob)
-                dataTransfer.items.add(getFileFromFileData(fileObj[inputData.model].fileBlob));
+              if (fileObj[inputData.model].fileBlob) {
+                let fileBlobData = getFileFromFileData(fileObj[inputData.model].fileBlob);
+
+                // If fileBlob is metadata-only, try to fetch from blob endpoint
+                if (!fileBlobData && fileObj[inputData.model].fileBlob?._id) {
+                  fileBlobData = await getFileFromBlobEndpoint(fileObj[inputData.model].fileBlob);
+                }
+
+                if (fileBlobData) {
+                  dataTransfer.items.add(fileBlobData);
+                }
+              }
 
-              if (fileObj[inputData.model].mdBlob)
-                dataTransfer.items.add(getFileFromFileData(fileObj[inputData.model].mdBlob));
+              if (fileObj[inputData.model].mdBlob) {
+                let mdBlobData = getFileFromFileData(fileObj[inputData.model].mdBlob);
+
+                // If mdBlob is metadata-only, try to fetch from blob endpoint
+                if (!mdBlobData && fileObj[inputData.model].mdBlob?._id) {
+                  mdBlobData = await getFileFromBlobEndpoint(fileObj[inputData.model].mdBlob);
+                }
+
+                if (mdBlobData) {
+                  dataTransfer.items.add(mdBlobData);
+                }
+              }
 
               if (dataTransfer.files.length) {
                 s(`.${inputData.id}`).files = dataTransfer.files;
@@ -384,4 +571,12 @@ function isTextInputFocused() {
   return active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA');
 }
 
-export { Input, InputFile, fileFormDataFactory, getSrcFromFileData, getFileFromFileData, isTextInputFocused };
+export {
+  Input,
+  InputFile,
+  fileFormDataFactory,
+  getSrcFromFileData,
+  getFileFromFileData,
+  getFileFromBlobEndpoint,
+  isTextInputFocused,
+};

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

@@ -1,16 +1,19 @@
-import { CoreService } from '../../services/core/core.service.js';
+import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
 import { FileService } from '../../services/file/file.service.js';
 import { UserService } from '../../services/user/user.service.js';
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
 import { EventsUI } from './EventsUI.js';
 import { Input } from './Input.js';
+import { loggerFactory } from './Logger.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { htmls, s } from './VanillaJs.js';
 import { Webhook } from './Webhook.js';
 
+const logger = loggerFactory(import.meta);
+
 const LogIn = {
   Scope: {
     user: {
@@ -24,6 +27,8 @@ const LogIn = {
   Event: {},
   Trigger: async function (options) {
     const { user } = options;
+    if (user) this.Scope.user.main.model.user = { ...this.Scope.user.main.model.user, ...user };
+
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (!user || user.role === 'guest') return;
     await Webhook.register({ user });
@@ -52,26 +57,40 @@ const LogIn = {
         </style>`,
       );
     if (!this.Scope.user.main.model.user.profileImage) {
-      const resultFile = await FileService.get({ id: user.profileImageId });
-      if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
-        const imageData = resultFile.data[0];
-
-        const imageBlob = new Blob([new Uint8Array(imageData.data.data)], { type: imageData.mimetype });
-
-        const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
+      // Try to load profile image only if profileImageId exists
+      if (!this.Scope.user.main.model.user.profileImage && user?.profileImageId) {
+        try {
+          const resultFile = await FileService.get({ id: user.profileImageId });
+          if (resultFile && resultFile.status === 'success' && resultFile.data[0]) {
+            const imageData = resultFile.data[0];
+            let imageSrc = null;
 
-        const imageSrc = URL.createObjectURL(imageFile);
+            try {
+              // Handle new metadata-only format
+              if (!imageData.data?.data && imageData._id) {
+                imageSrc = getApiBaseUrl({ id: imageData._id, endpoint: 'file/blob' });
+              }
+              // Handle legacy format with buffer data
+              else if (imageData.data?.data) {
+                const imageBlob = new Blob([new Uint8Array(imageData.data.data)], { type: imageData.mimetype });
+                const imageFile = new File([imageBlob], imageData.name, { type: imageData.mimetype });
+                imageSrc = URL.createObjectURL(imageFile);
+              }
 
-        // const  rawSvg = await CoreService.getRaw({ url: imageSrc });
-        // rawSvg = rawSvg.replace(`<svg`, `<svg class="abs account-profile-image" `).replace(`#5f5f5f`, `#ffffffc8`);
-
-        this.Scope.user.main.model.user.profileImage = {
-          resultFile,
-          imageData,
-          imageBlob,
-          imageFile,
-          imageSrc,
-        };
+              if (imageSrc) {
+                this.Scope.user.main.model.user.profileImage = {
+                  resultFile,
+                  imageData,
+                  imageSrc,
+                };
+              }
+            } catch (error) {
+              logger.warn('Error processing profile image:', error);
+            }
+          }
+        } catch (error) {
+          logger.warn('Error fetching profile image:', error);
+        }
       }
       htmls(
         `.action-btn-profile-log-in-render`,
@@ -80,7 +99,10 @@ const LogIn = {
             class="abs center top-box-profile-img"
             ${this.Scope.user.main.model.user.profileImage
               ? `src="${this.Scope.user.main.model.user.profileImage.imageSrc}"`
-              : ``}
+              : `src="${getApiBaseUrl({
+                  id: 'assets/avatar',
+                  endpoint: 'user',
+                })}"`}
           />
         </div>`,
       );

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

@@ -74,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: {},
@@ -572,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) {
@@ -593,9 +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}`,
@@ -621,6 +639,7 @@ const Modal = {
                 const searchContext = {
                   RouterInstance: Worker.RouterInstance,
                   options: options,
+                  isRecentHistory: isRecentHistory, // Flag for delete button visibility
                   onResultClick: () => {
                     // Dismiss search box on result click
                     if (s(`.${searchBoxHistoryId}`)) {
@@ -662,13 +681,14 @@ const Modal = {
                       const minLength = searchContext.minQueryLength;
                       if (trimmedQuery.length >= minLength) {
                         results = await SearchBox.search(trimmedQuery, searchContext);
-                        renderSearchResult(results);
+                        renderSearchResult(results, false); // Search results - no delete buttons
                       } else if (trimmedQuery.length === 0) {
-                        // Show history when query is empty
-                        renderSearchResult(historySearchBox);
+                        // 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([]);
+                        renderSearchResult([], false);
                       }
                     }
                     break;
@@ -698,8 +718,6 @@ const Modal = {
                 });
               };
 
-              const getDefaultSearchBoxSelector = () => `.search-result-btn-${currentKeyBoardSearchBoxIndex}`;
-
               const updateSearchBoxValue = (selector) => {
                 if (!selector) {
                   // Get the currently active search result item
@@ -732,15 +750,18 @@ const Modal = {
                 const resultType = activeItem.getAttribute('data-result-type');
 
                 if (resultType === 'route' && results[currentKeyBoardSearchBoxIndex]) {
-                  historySearchBox = historySearchBox.filter(
-                    (h) => h.routerId !== results[currentKeyBoardSearchBoxIndex].routerId,
-                  );
-                  historySearchBox.unshift(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();
                 }
@@ -761,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: {
@@ -787,6 +815,7 @@ const Modal = {
                           : '300px !important',
                       'z-index': 7,
                     },
+                    class: 'search-history-modal',
                     dragDisabled: true,
                     maximize: true,
                     barMode: options.barMode,
@@ -804,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>`);
                 }
               };
@@ -2020,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');
   },