@underpostnet/underpost 2.97.1 → 2.97.5

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

@@ -13,8 +13,8 @@ const Chat = {
     this.Data[idModal] = {};
     setTimeout(() => {
       Modal.Data[idModal].onObserverListener[`chat-${idModal}`] = (options) => {
-        const { width, height } = options;
-        s(`.chat-box`).style.height = `${height * 0.5}px`;
+        const { height } = options;
+        s(`.chat-box`).style.height = `${height - 250}px`;
       };
       s(`.btn-send-chat-${idModal}`).onclick = (e) => {
         e.preventDefault();

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

@@ -5,7 +5,7 @@ import { s4 } from './CommonJs.js';
 import { Translate } from './Translate.js';
 import { Modal, renderViewTitle } from './Modal.js';
 import { DocumentService } from '../../services/document/document.service.js';
-import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
+import { CoreService, getApiBaseUrl, headersFactory } from '../../services/core/core.service.js';
 import { loggerFactory } from './Logger.js';
 import { imageShimmer, renderChessPattern, renderCssAttr, styleFactory } from './Css.js';
 import { getQueryParams } from './Router.js';
@@ -39,20 +39,32 @@ const Content = {
           }
           documentObj = data[0];
         }
-        if (documentObj.fileId) {
+
+        // Get file metadata (does not include buffer data)
+        if (documentObj.fileId && documentObj.fileId._id) {
           const { data, status, message } = await FileService.get({ id: documentObj.fileId._id });
           if (status !== 'success' || !data || !data[0]) {
-            logger.error(message);
-            // throw new Error(`no-preview-available`);
+            logger.warn('File metadata not found:', message);
+            // Continue without file - not fatal
+          } else {
+            file = data[0];
           }
-          file = data[0];
         }
-        if (documentObj.mdFileId) {
-          const { data, status, message } = await FileService.get({ id: documentObj.mdFileId });
+
+        // Get markdown file metadata (optional)
+        if (documentObj.mdFileId && documentObj.mdFileId._id) {
+          const { data, status, message } = await FileService.get({ id: documentObj.mdFileId._id });
           if (status !== 'success' || !data || !data[0]) {
-            logger.error(message);
-            throw new Error(`no-preview-available`);
-          } else md = data[0];
+            logger.warn('Markdown file metadata not found:', message);
+            // Continue without markdown - try to render file instead
+          } else {
+            md = data[0];
+          }
+        }
+
+        // Check if we have at least one file to render
+        if (!md && !file) {
+          throw new Error(`no-preview-available`);
         }
 
         htmls(
@@ -63,6 +75,8 @@ const Content = {
           })} `,
         );
         htmls(`.content-render-${idModal}`, ``);
+
+        // Pass file IDs to RenderFile - it will fetch blobs as needed
         if (md) await this.RenderFile({ idModal, file: md, id: md._id });
         if (file) await this.RenderFile({ idModal, file, id: file._id });
         Modal.Data[idModal].onObserverListener[`main-content-observer`]();
@@ -89,17 +103,48 @@ const Content = {
       </div>
       <div class="abs center error-${idModal} hide"></div>`;
   },
+
+  /**
+   * Helper function to get file content
+   * Supports both legacy format (with buffer data) and new format (metadata only)
+   * For new format, fetches content from blob endpoint
+   */
+  getFileContent: async function (file, options = {}) {
+    // If custom URL provided, use it
+    if (options.url) {
+      return await CoreService.getRaw({ url: options.url });
+    }
+
+    // If buffer data exists in file object (legacy format), use it
+    if (file.data?.data) {
+      return await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+    }
+
+    // Otherwise, fetch from blob endpoint (new metadata-only format)
+    if (file._id) {
+      try {
+        const { data: blobArray, status } = await FileService.get({ id: `blob/${file._id}` });
+        if (status === 'success' && blobArray && blobArray[0]) {
+          return await blobArray[0].text();
+        }
+        throw new Error('Failed to fetch file content');
+      } catch (error) {
+        logger.error('Error fetching file content from blob endpoint:', error);
+        throw new Error('Could not load file content');
+      }
+    }
+
+    throw new Error('No file content available');
+  },
+
   RenderFile: async function (
     options = {
       file: {
         _id: '',
-        data: {
-          data: [0],
-        },
         mimetype: '',
         url: '',
         name: '',
-        cid: '', // TODO: IPFS env
+        cid: '',
       },
       idModal: '',
       style: {},
@@ -116,80 +161,116 @@ const Content = {
         border: 'none',
       };
     if (!options.class) options.class = ``;
+
     const { container, file } = options;
-    const ext = file.name.split('.')[file.name.split('.').length - 1];
+    const ext = (file.name || '').split('.').pop()?.toLowerCase() || '';
     let render = '';
 
-    switch (ext) {
-      case 'md':
-        {
-          const content = options.url
-            ? await CoreService.getRaw({ url: options.url })
-            : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
-          render += html`<div class="${options.class}" ${styleFactory(options.style)}>${marked.parse(content)}</div>`;
+    try {
+      switch (ext) {
+        case 'md':
+          {
+            const content = await Content.getFileContent(file, options);
+            render += html`<div class="${options.class}" ${styleFactory(options.style)}>${marked.parse(content)}</div>`;
+          }
+          break;
+
+        case 'jpg':
+        case 'jpeg':
+        case 'webp':
+        case 'svg':
+        case 'gif':
+        case 'png': {
+          const url = await Content.urlFactory(options);
+          if (url) {
+            const imgRender = html`<img
+              alt="${file.name ? file.name : `file ${s4()}`}"
+              class="in ${options.class}"
+              ${styleFactory(options.style, `${renderChessPattern(50)}`)}
+              src="${url}"
+            />`;
+            render += imgRender;
+          } else {
+            render = html`<div class="in ${options.class}" ${styleFactory(options.style)}>
+              <p style="color: red;">Error loading image</p>
+            </div>`;
+          }
+          break;
         }
 
-        break;
-
-      case 'jpg':
-      case 'jpeg':
-      case 'webp':
-      case 'svg':
-      case 'gif':
-      case 'png': {
-        const url = Content.urlFactory(options);
-        const imgRender = html`<img
-          alt="${file.name ? file.name : `file ${s4()}`}"
-          class="in ${options.class}"
-          ${styleFactory(options.style, `${renderChessPattern(50)}`)}
-          src="${url}"
-        />`;
-        render += imgRender;
-        break;
-      }
-      case 'pdf': {
-        const url = Content.urlFactory(options);
-        render += html`<iframe
-          class="in ${options.class} iframe-${options.idModal}"
-          ${styleFactory(options.style)}
-          src="${url}"
-        ></iframe>`;
-        break;
-      }
+        case 'pdf': {
+          const url = await Content.urlFactory(options);
+          if (url) {
+            render += html`<iframe
+              class="in ${options.class} iframe-${options.idModal}"
+              ${styleFactory(options.style)}
+              src="${url}"
+            ></iframe>`;
+          } else {
+            render = html`<div class="in ${options.class}" ${styleFactory(options.style)}>
+              <p style="color: red;">Error loading PDF</p>
+            </div>`;
+          }
+          break;
+        }
+
+        case 'json':
+          {
+            const content = await Content.getFileContent(file, options);
+            render += html`<pre class="in ${options.class}" ${styleFactory(options.style)}>
+${JSON.stringify(JSON.parse(content), null, 4)}</pre
+            >`;
+          }
+          break;
 
-      case 'json':
-        render += html`<pre class="in ${options.class}" ${styleFactory(options.style)}>
-        ${JSON.stringify(
-            JSON.parse(
-              options.url
-                ? await CoreService.getRaw({ url: options.url })
-                : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype)),
-            ),
-            null,
-            4,
-          )}</pre
-        >`;
-        break;
-
-      default:
-        render += html`<div class="in ${options.class}" ${styleFactory(options.style)}>
-          ${options.url
-            ? await CoreService.getRaw({ url: options.url })
-            : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype))}
-        </div>`;
-        break;
+        default:
+          {
+            const content = await Content.getFileContent(file, options);
+            render += html`<div class="in ${options.class}" ${styleFactory(options.style)}>${content}</div>`;
+          }
+          break;
+      }
+    } catch (error) {
+      logger.error('Error rendering file:', error);
+      render = html`<div class="in ${options.class}" ${styleFactory(options.style)}>
+        <p style="color: red;">Error loading file: ${error.message}</p>
+      </div>`;
     }
+
     if (options.raw) return render;
     append(container, render);
   },
-  urlFactory: function (options) {
-    return options.url
-      ? options.url
-      : options.file?.data?.data
-      ? URL.createObjectURL(getBlobFromUint8ArrayFile(options.file.data.data, options.file.mimetype))
-      : options.file._id
-      ? getApiBaseUrl({ id: options.file._id, endpoint: 'file/blob' })
-      : null;
+
+  /**
+   * Generate appropriate URL for file display
+   * Prefers blob endpoint for new metadata-only format
+   */
+  urlFactory: async function (options) {
+    // If custom URL provided, use it
+    if (options.url) {
+      return options.url;
+    }
+
+    // If buffer data exists (legacy), create object URL
+    if (options.file?.data?.data) {
+      return URL.createObjectURL(getBlobFromUint8ArrayFile(options.file.data.data, options.file.mimetype));
+    }
+
+    // Use blob endpoint for metadata-only format with proper authentication
+    if (options.file?._id) {
+      try {
+        const { data: blobArray, status } = await FileService.get({ id: `blob/${options.file._id}` });
+        if (status === 'success' && blobArray && blobArray[0]) {
+          return URL.createObjectURL(blobArray[0]);
+        }
+        throw new Error('Failed to fetch file blob');
+      } catch (error) {
+        logger.error('Error fetching file blob:', error);
+        return null;
+      }
+    }
+
+    return null;
   },
 };
 

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

@@ -232,6 +232,9 @@ const CssCommonCore = async () => {
         width: 40px;
         text-align: center;
       }
+      .input-container {
+        width: 275px;
+      }
     </style>
     ${boxShadow({ selector: '.account-profile-image' })}
     <div class="ag-grid-style"></div>`;
@@ -404,9 +407,7 @@ const CssCoreDark = {
           color: #fff;
           background: #313131;
         }
-        .input-container {
-          width: 256px;
-        }
+
         .btn-eye-password {
           text-align: center;
           background: #1a1a1a;
@@ -480,7 +481,7 @@ const CssCoreDark = {
           cursor: pointer;
         }
         .btn-custom {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           min-height: 45px;
@@ -491,7 +492,7 @@ const CssCoreDark = {
         }
         .toggle-form-container,
         .dropdown-option {
-          width: 238px;
+          width: 255px;
           font-size: 20px;
           padding: 10px;
         }
@@ -503,7 +504,7 @@ const CssCoreDark = {
           background: #232323;
         }
         .form-button {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           text-align: center;
@@ -599,10 +600,14 @@ const CssCoreLight = {
         }
 
         .box-shadow {
-          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          box-shadow:
+            0 4px 8px 0 rgba(0, 0, 0, 0.2),
+            0 6px 20px 0 rgba(0, 0, 0, 0.19);
         }
         .box-shadow:hover {
-          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+          box-shadow:
+            0 8px 16px 0 rgba(0, 0, 0, 0.2),
+            0 10px 30px 0 rgba(0, 0, 0, 0.3);
         }
         .box-content-border {
           border: 2px solid #bbb;
@@ -715,7 +720,6 @@ const CssCoreLight = {
           border-radius: 5px;
           border: 2px solid #bbb;
           transition: 0.3s;
-          width: 256px;
         }
         .input-container:hover {
           color: #1a1a1a;
@@ -793,7 +797,7 @@ const CssCoreLight = {
           cursor: pointer;
         }
         .btn-custom {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           min-height: 45px;
@@ -805,7 +809,7 @@ const CssCoreLight = {
         }
         .toggle-form-container,
         .dropdown-option {
-          width: 238px;
+          width: 255px;
           font-size: 20px;
           padding: 10px;
         }
@@ -817,7 +821,7 @@ const CssCoreLight = {
           background: #e4e4e4;
         }
         .form-button {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           text-align: center;

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

@@ -156,6 +156,15 @@ const FileExplorer = {
 
       EventsUI.onClick(`.btn-input-file-explorer`, async (e) => {
         e.preventDefault();
+
+        // Check authentication before upload
+        if (!Auth.getToken()) {
+          return NotificationManager.Push({
+            html: Translate.Render(`error-user-not-authenticated`),
+            status: 'error',
+          });
+        }
+
         const { errorMessage } = await validators();
         if (!formBodyFiles)
           return NotificationManager.Push({
@@ -166,6 +175,12 @@ const FileExplorer = {
         let fileData;
         {
           const { status, data } = await FileService.post({ body: formBodyFiles });
+          if (status === 'error' || !data) {
+            return NotificationManager.Push({
+              html: Translate.Render(`error-upload-file`),
+              status: 'error',
+            });
+          }
           fileData = data;
         }
         {
@@ -259,6 +274,8 @@ const FileExplorer = {
         // params.data._id
 
         this.eGui = document.createElement('div');
+        const isPublic = params.data.isPublic;
+        const toggleId = `toggle-public-${params.data._id}`;
         this.eGui.innerHTML = html`
           <div class="fl">
             ${await BtnIcon.Render({
@@ -281,6 +298,13 @@ const FileExplorer = {
               label: html`<i class="fas fa-copy"></i>`,
               type: 'button',
             })}
+            ${await BtnIcon.Render({
+              class: `in fll management-table-btn-mini ${toggleId}`,
+              label: isPublic
+                ? html`<i class="fas fa-globe" style="color: #4caf50;"></i>`
+                : html`<i class="fas fa-lock" style="color: #9e9e9e;"></i>`,
+              type: 'button',
+            })}
           </div>
         `;
 
@@ -315,13 +339,21 @@ const FileExplorer = {
 
           EventsUI.onClick(`.btn-file-download-${params.data._id}`, async (e) => {
             e.preventDefault();
-            console.log(params);
-            const {
-              data: [file],
-              status,
-            } = await FileService.get({ id: params.data.fileId });
-
-            downloadFile(new Blob([new Uint8Array(file.data.data)], { type: params.data.mimetype }), params.data.name);
+            try {
+              // Use FileService with blob/ prefix for centralized blob fetching
+              const { data: blobArray, status } = await FileService.get({ id: `blob/${params.data.fileId}` });
+              if (status === 'success' && blobArray && blobArray[0]) {
+                downloadFile(blobArray[0], params.data.name);
+              } else {
+                throw new Error('Failed to fetch file blob');
+              }
+            } catch (error) {
+              logger.error('Download failed:', error);
+              NotificationManager.Push({
+                html: 'Download failed',
+                status: 'error',
+              });
+            }
           });
           EventsUI.onClick(
             `.btn-file-delete-${params.data._id}`,
@@ -371,6 +403,80 @@ const FileExplorer = {
             },
             { context: 'modal' },
           );
+
+          // Toggle public/private status
+          EventsUI.onClick(
+            `.${toggleId}`,
+            async (e) => {
+              e.preventDefault();
+
+              // If document is currently private, show confirmation before making public
+              if (!params.data.isPublic) {
+                const confirmResult = await Modal.RenderConfirm({
+                  html: async () => {
+                    return html`
+                      <div class="in section-mp" style="text-align: center">
+                        ${Translate.Render('confirm-make-public')}
+                        <br />
+                        "${params.data.title}"
+                      </div>
+                    `;
+                  },
+                  id: `confirm-toggle-public-${params.data._id}`,
+                });
+                if (confirmResult.status !== 'confirm') return;
+              }
+
+              try {
+                const { data, status } = await DocumentService.patch({
+                  id: params.data._id,
+                  action: 'toggle-public',
+                });
+
+                if (status === 'success') {
+                  // Update local data
+                  params.data.isPublic = data.isPublic;
+
+                  // Update documentInstance
+                  const docIndex = documentInstance.findIndex((d) => d._id === params.data._id);
+                  if (docIndex !== -1) {
+                    documentInstance[docIndex].isPublic = data.isPublic;
+                  }
+
+                  // Update button icon
+                  const btnElement = s(`.${toggleId}`);
+                  if (btnElement) {
+                    const iconElement = btnElement.querySelector('i');
+                    if (iconElement) {
+                      if (data.isPublic) {
+                        iconElement.className = 'fas fa-globe';
+                        iconElement.style.color = '#4caf50';
+                      } else {
+                        iconElement.className = 'fas fa-lock';
+                        iconElement.style.color = '#9e9e9e';
+                      }
+                    }
+                  }
+
+                  NotificationManager.Push({
+                    html: data.isPublic
+                      ? Translate.Render('document-now-public')
+                      : Translate.Render('document-now-private'),
+                    status: 'success',
+                  });
+                } else {
+                  throw new Error('Failed to toggle public status');
+                }
+              } catch (error) {
+                logger.error('Toggle public failed:', error);
+                NotificationManager.Push({
+                  html: Translate.Render('error-toggle-public'),
+                  status: 'error',
+                });
+              }
+            },
+            { context: 'modal' },
+          );
         });
       }
 
@@ -618,7 +724,7 @@ const FileExplorer = {
                   columnDefs: [
                     { field: 'name', flex: 2, headerName: 'Name', cellRenderer: LoadFileNameRenderer },
                     { field: 'mimetype', flex: 1, headerName: 'Type' },
-                    { headerName: '', width: 80, cellRenderer: LoadFileActionsRenderer },
+                    { headerName: '', width: 120, cellRenderer: LoadFileActionsRenderer },
                   ],
                 },
               })}
@@ -680,6 +786,7 @@ const FileExplorer = {
         fileId: f.fileId._id,
         _id: f._id,
         title: f.title,
+        isPublic: f.isPublic || false,
       };
     });
     let documentId = document._id;