@underpostnet/underpost 2.96.1 → 2.97.0

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

@@ -3,7 +3,7 @@ import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
 import { darkTheme, ThemeEvents } from './Css.js';
-import { append, getDataFromInputFile, htmls, s } from './VanillaJs.js';
+import { append, copyData, getDataFromInputFile, htmls, s } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Translate } from './Translate.js';
 import { DropDown } from './DropDown.js';
@@ -14,6 +14,8 @@ import { RichText } from './RichText.js';
 import { loggerFactory } from './Logger.js';
 import { Badge } from './Badge.js';
 import { Content } from './Content.js';
+import { DocumentService } from '../../services/document/document.service.js';
+import { NotificationManager } from './NotificationManager.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -30,6 +32,9 @@ const Panel = {
       originData: () => [],
       filesData: () => [],
       onClick: () => {},
+      share: {
+        copyLink: false,
+      },
     },
   ) {
     const idPanel = options?.idPanel ? options.idPanel : getId(this.Tokens, `${idPanel}-`);
@@ -87,6 +92,62 @@ const Panel = {
               htmls(`.${idPanel}-cell-col-a-${id}`, render);
             },
           });
+        if (options.share && options.share.copyLink) {
+          EventsUI.onClick(
+            `.${idPanel}-btn-copy-share-${id}`,
+            async (e) => {
+              try {
+                const shareUrl = `${window.location.origin}${window.location.pathname}?cid=${obj._id}`;
+                await copyData(shareUrl);
+                await NotificationManager.Push({
+                  status: 'success',
+                  html: html`<div>${Translate.Render('link-copied')}</div>`,
+                });
+                // Track the copy share link event
+                await DocumentService.patch({ id: obj._id, action: 'copy-share-link' });
+                // Update the count in the UI - read current value from span first
+                const countSpan = s(`.${idPanel}-share-count-${id}`);
+                if (countSpan) {
+                  const currentCount = parseInt(countSpan.textContent) || 0;
+                  const newCount = currentCount + 1;
+                  htmls(`.${idPanel}-share-count-${id}`, newCount);
+                } else {
+                  // Create count badge if it didn't exist before (was 0)
+                  const btn = s(`.${idPanel}-btn-copy-share-${id}`);
+                  if (btn) {
+                    const countBadge = document.createElement('span');
+                    countBadge.className = `${idPanel}-share-count-${id}`;
+                    countBadge.style.cssText =
+                      'position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;';
+                    countBadge.textContent = '1';
+                    btn.appendChild(countBadge);
+                  }
+                }
+              } catch (error) {
+                logger.error('Error copying share link:', error);
+                await NotificationManager.Push({
+                  status: 'error',
+                  html: html`<div>${Translate.Render('error-copying-link')}</div>`,
+                });
+              }
+            },
+            { context: 'modal' },
+          );
+
+          // Add tooltip hover effect
+          setTimeout(() => {
+            const btn = s(`.${idPanel}-btn-copy-share-${id}`);
+            const tooltip = s(`.${idPanel}-share-tooltip-${id}`);
+            if (btn && tooltip) {
+              btn.addEventListener('mouseenter', () => {
+                tooltip.style.opacity = '1';
+              });
+              btn.addEventListener('mouseleave', () => {
+                tooltip.style.opacity = '0';
+              });
+            }
+          });
+        }
         EventsUI.onClick(
           `.${idPanel}-btn-delete-${id}`,
           async (e) => {
@@ -99,6 +160,8 @@ const Panel = {
         );
         EventsUI.onClick(`.${idPanel}-btn-edit-${id}`, async () => {
           logger.warn('edit', obj);
+          const searchId = String(obj._id || obj.id);
+
           if (obj._id) Panel.Tokens[idPanel].editId = obj._id;
           else if (obj.id) Panel.Tokens[idPanel].editId = obj.id;
 
@@ -106,14 +169,11 @@ const Panel = {
           s(`.btn-${idPanel}-label-add`).classList.add('hide');
 
           openPanelForm();
-          // s(`.btn-${idPanel}-add`).click();
-          s(`.${scrollClassContainer}`).scrollTop = 0;
-
+          // s(`.${scrollClassContainer}`).scrollTop = 0;
           const originData = options.originData();
           const filesData = options.filesData();
 
           // Convert IDs to strings for comparison to handle ObjectId vs string issues
-          const searchId = String(obj._id || obj.id);
           const foundOrigin = originData.find((d) => String(d._id || d.id) === searchId);
           const foundFiles = filesData.find((d) => String(d._id || d.id) === searchId);
 
@@ -133,6 +193,8 @@ const Panel = {
             );
           }
 
+          // Clear previous form values then populate with the current item's data
+          Input.cleanValues(formData);
           Input.setValues(formData, obj, foundOrigin, foundFiles);
           if (options.on.initEdit) await options.on.initEdit({ data: obj });
         });
@@ -146,28 +208,28 @@ const Panel = {
         };
       });
       if (s(`.${idPanel}-${id}`)) s(`.${idPanel}-${id}`).remove();
-      return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}">
+      return html` <div class="in box-shadow ${idPanel} ${idPanel}-${id}" style="position: relative;">
         <div class="fl ${idPanel}-tools session-fl-log-in  ${obj.tools ? '' : 'hide'}">
           ${await BtnIcon.Render({
-            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-edit-${id}`,
-            label: html`<div class="abs center"><i class="fas fa-edit"></i></div>`,
+            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-delete-${id}`,
+            label: html`<div class="abs center"><i class="fas fa-trash"></i></div>`,
             useVisibilityHover: true,
             tooltipHtml: await Badge.Render({
               id: `tooltip-${idPanel}-${id}`,
-              text: `${Translate.Render(`edit`)}`,
+              text: `${Translate.Render(`delete`)}`,
               classList: '',
-              style: { top: `-22px`, left: '-5px' },
+              style: { top: `-22px`, left: '-13px' },
             }),
           })}
           ${await BtnIcon.Render({
-            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-delete-${id}`,
-            label: html`<div class="abs center"><i class="fas fa-trash"></i></div>`,
+            class: `in flr main-btn-menu action-bar-box ${idPanel}-btn-tool ${idPanel}-btn-edit-${id}`,
+            label: html`<div class="abs center"><i class="fas fa-edit"></i></div>`,
             useVisibilityHover: true,
             tooltipHtml: await Badge.Render({
               id: `tooltip-${idPanel}-${id}`,
-              text: `${Translate.Render(`delete`)}`,
+              text: `${Translate.Render(`edit`)}`,
               classList: '',
-              style: { top: `-22px`, left: '-13px' },
+              style: { top: `-22px`, left: '-5px' },
             }),
           })}
         </div>
@@ -266,6 +328,32 @@ const Panel = {
             </div>
           </div>
         </div>
+        ${options.share && options.share.copyLink
+          ? html`<div
+              class="${idPanel}-share-btn-container ${idPanel}-share-btn-container-${id}"
+              style="position: absolute; bottom: 8px; right: 8px; z-index: 2;"
+            >
+              <button
+                class="btn-icon ${idPanel}-btn-copy-share-${id}"
+                style="background: transparent; color: #888; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.3s ease;"
+              >
+                <i class="fas fa-link" style="font-size: 20px;"></i>
+                ${obj.totalCopyShareLinkCount && obj.totalCopyShareLinkCount > 0
+                  ? html`<span
+                      class="${idPanel}-share-count-${id}"
+                      style="position: absolute; top: -4px; right: -4px; background: #666; color: white; border-radius: 10px; padding: 1px 5px; font-size: 10px; font-weight: bold; min-width: 16px; text-align: center;"
+                      >${obj.totalCopyShareLinkCount}</span
+                    >`
+                  : ''}
+              </button>
+              <div
+                class="${idPanel}-share-tooltip-${id}"
+                style="position: absolute; bottom: 50px; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 6px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;"
+              >
+                ${Translate.Render('copy-share-link')}
+              </div>
+            </div>`
+          : ''}
       </div>`;
     };
 
@@ -410,6 +498,11 @@ const Panel = {
               </div>`,
             // disabled: true,
             // disabledEye: true,
+          })}
+          ${await BtnIcon.Render({
+            class: `inl section-mp btn-custom btn-${idPanel}-clean-file`,
+            label: html`<i class="fa-solid fa-file-circle-xmark"></i> ${Translate.Render('clear-file')}`,
+            type: 'button',
           })}`;
           break;
         default:
@@ -476,6 +569,15 @@ const Panel = {
       s(`.btn-${idPanel}-clean`).onclick = () => {
         Input.cleanValues(formData);
       };
+      s(`.btn-${idPanel}-clean-file`).onclick = () => {
+        // Clear file input specifically
+        const fileFormData = formData.find((f) => f.inputType === 'file');
+        if (fileFormData && s(`.${fileFormData.id}`)) {
+          s(`.${fileFormData.id}`).value = '';
+          s(`.${fileFormData.id}`).inputFiles = null;
+          htmls(`.file-name-render-${fileFormData.id}`, `${fileNameInputExtDefaultContent}`);
+        }
+      };
       s(`.btn-${idPanel}-close`).onclick = (e) => {
         e.preventDefault();
         s(`.${idPanel}-form-body`).style.opacity = 0;
@@ -494,10 +596,26 @@ const Panel = {
       };
       s(`.btn-${idPanel}-add`).onclick = async (e) => {
         e.preventDefault();
-        // s(`.btn-${idPanel}-clean`).click();
+
+        // Clean all form inputs and reset data scope
+        Input.cleanValues(formData);
+
+        // Clean file input specifically
+        const fileFormData = formData.find((f) => f.inputType === 'file');
+        if (fileFormData && s(`.${fileFormData.id}`)) {
+          s(`.${fileFormData.id}`).value = '';
+          s(`.${fileFormData.id}`).inputFiles = null;
+          htmls(`.file-name-render-${fileFormData.id}`, `${fileNameInputExtDefaultContent}`);
+        }
+
+        // Reset edit ID to ensure we're in "add" mode
         Panel.Tokens[idPanel].editId = undefined;
+
+        // Update button labels
         s(`.btn-${idPanel}-label-add`).classList.remove('hide');
         s(`.btn-${idPanel}-label-edit`).classList.add('hide');
+
+        // Scroll to top
         s(`.${scrollClassContainer}`).scrollTop = 0;
 
         openPanelForm();
@@ -617,6 +735,34 @@ const Panel = {
           color: #000000 !important;
           font-size: 17px !important;
         }
+        .${idPanel}-share-btn-container button:hover {
+          background: transparent !important;
+          transform: scale(1.1);
+          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
+        }
+        .${idPanel}-share-btn-container button:focus {
+          outline: none;
+          background: transparent !important;
+        }
+        .${idPanel}-share-btn-container button:focus {
+          outline: none;
+          background: transparent !important;
+        }
+        .${idPanel}-share-btn-container button:active {
+          transform: scale(0.95);
+        }
+        .${idPanel}-share-btn-container span[class*='share-count'] {
+          animation: ${idPanel}-share-pulse 2s infinite;
+        }
+        @keyframes ${idPanel}-share-pulse {
+          0%,
+          100% {
+            transform: scale(1);
+          }
+          50% {
+            transform: scale(1.1);
+          }
+        }
       </style>
       <style class="${idPanel}-styles"></style>
       <div class="${idPanel}-container">

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

@@ -27,6 +27,9 @@ const PanelForm = {
       route: 'home',
       htmlFormHeader: async () => '',
       firsUpdateEvent: async () => {},
+      share: {
+        copyLink: false,
+      },
     },
   ) {
     const { idPanel, defaultUrlImage, Elements } = options;
@@ -48,7 +51,7 @@ const PanelForm = {
         id: 'panel-title',
         model: 'title',
         inputType: 'text',
-        rules: [{ type: 'isEmpty' }],
+        rules: [],
         panel: { type: 'title' },
       },
       {
@@ -80,7 +83,7 @@ const PanelForm = {
         //     value: html``,
         //   },
         // },
-        rules: [{ type: 'isEmpty' }],
+        rules: [],
       },
       {
         id: 'panel-mdFileId',
@@ -108,6 +111,7 @@ const PanelForm = {
         titleIcon,
         route: options.route,
         formContainerClass: 'session-in-log-in',
+        share: options.share,
         onClick: async function ({ payload }) {
           if (options.route) {
             setQueryPath({ path: options.route, queryPath: payload._id });
@@ -169,9 +173,113 @@ const PanelForm = {
                 html: status,
                 status,
               });
-              if (getQueryParams().cid === data.id) {
-                setQueryPath({ path: options.route, queryPath: '' });
-                if (PanelForm.Data[idPanel].updatePanel) await PanelForm.Data[idPanel].updatePanel();
+
+              // Handle cid query param update (supports comma-separated list)
+              if (status === 'success') {
+                const currentCid = getQueryParams().cid;
+
+                if (currentCid) {
+                  // Parse cid as comma-separated list
+                  const cidList = currentCid
+                    .split(',')
+                    .map((id) => id.trim())
+                    .filter((id) => id);
+
+                  // Remove the deleted panel's id from the list
+                  const updatedCidList = cidList.filter((id) => id !== data.id);
+
+                  if (updatedCidList.length !== cidList.length) {
+                    // Wait for DOM cleanup before updating query
+
+                    if (updatedCidList.length === 0) {
+                      // No cids remain, clear query and reload panels with limit
+                      logger.warn('All cids removed, clearing query');
+                      setQueryPath({ path: options.route, queryPath: '' });
+
+                      if (options.parentIdModal) Modal.Data[options.parentIdModal].query = window.location.search;
+                      if (PanelForm.Data[idPanel].updatePanel) await PanelForm.Data[idPanel].updatePanel();
+                    } else {
+                      // Update query params with remaining cids only (without ?cid= prefix)
+                      const cidValue = updatedCidList.join(',');
+                      setQueryPath({ path: options.route, queryPath: cidValue });
+                      const actualQuery = window.location.search;
+                      if (options.parentIdModal) Modal.Data[options.parentIdModal].query = actualQuery;
+                    }
+                  }
+
+                  // Return early to skip smart deletion logic when cid is present
+                  return { status };
+                }
+              }
+
+              // Smart deletion: remove from arrays and intelligently load more if needed
+              if (status === 'success') {
+                const panelData = PanelForm.Data[idPanel];
+
+                // Remove the deleted item from all data arrays
+                const indexInOrigin = panelData.originData.findIndex((d) => d._id === data._id);
+                const indexInData = panelData.data.findIndex((d) => d._id === data._id);
+                const indexInFiles = panelData.filesData.findIndex((d) => d._id === data._id);
+
+                if (indexInOrigin > -1) panelData.originData.splice(indexInOrigin, 1);
+                if (indexInData > -1) panelData.data.splice(indexInData, 1);
+                if (indexInFiles > -1) panelData.filesData.splice(indexInFiles, 1);
+
+                // Adjust skip count since we removed an item
+                if (panelData.skip > 0) panelData.skip--;
+
+                // If panels are below limit and there might be more, load them
+                if (panelData.data.length < panelData.limit && panelData.hasMore && !panelData.loading) {
+                  const oldDataCount = panelData.data.length;
+                  const needed = panelData.limit - panelData.data.length; // Calculate exact number needed
+                  const originalLimit = panelData.limit;
+
+                  // Temporarily set limit to only fetch what's needed (1-to-1 replacement)
+                  panelData.limit = needed;
+                  await getPanelData(true); // Load only the needed items
+                  panelData.limit = originalLimit; // Restore original limit
+
+                  const newItems = panelData.data.slice(oldDataCount);
+
+                  if (oldDataCount === 0) {
+                    // List was empty, render all panels
+                    if (panelData.data.length > 0) {
+                      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+                      htmls(
+                        containerSelector,
+                        html`
+                          <div class="in">${await panelRender({ data: panelData.data })}</div>
+                          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+                        `,
+                      );
+
+                      // Show spinner if there's potentially more data
+                      const lastOriginItem = panelData.originData[panelData.originData.length - 1];
+                      if (
+                        !panelData.lasIdAvailable ||
+                        !lastOriginItem ||
+                        panelData.lasIdAvailable !== lastOriginItem._id
+                      )
+                        LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
+                    } else {
+                      // No more data available, show empty state
+                      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+                      htmls(
+                        containerSelector,
+                        html`
+                          <div class="in">${await panelRender({ data: [] })}</div>
+                          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+                        `,
+                      );
+                    }
+                  } else {
+                    // List had some panels, append new ones
+                    if (newItems.length > 0) {
+                      for (const item of newItems)
+                        append(`.${idPanel}-render`, await Panel.Tokens[idPanel].renderPanel(item));
+                    }
+                  }
+                }
               }
 
               return { status };
@@ -179,30 +287,58 @@ const PanelForm = {
             return { status: 'error' };
           },
           initAdd: async function () {
-            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            setTimeout(() => {
+              s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            }, 50);
           },
           initEdit: async function ({ data }) {
-            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            // Clear file input when entering edit mode
+            const fileFormData = formData.find((f) => f.inputType === 'file');
+            if (fileFormData && s(`.${fileFormData.id}`)) {
+              s(`.${fileFormData.id}`).value = '';
+              s(`.${fileFormData.id}`).inputFiles = null;
+              htmls(
+                `.file-name-render-${fileFormData.id}`,
+                `<div class="abs center"><i style="font-size: 25px" class="fa-solid fa-cloud"></i></div>`,
+              );
+            }
+            setTimeout(() => {
+              s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            }, 50);
           },
           noResultFound: async function () {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
           },
           add: async function ({ data, editId }) {
+            // Validate that either mdFileId has content OR fileId has files
+            const hasMdContent = data.mdFileId && data.mdFileId.trim().length > 0;
+            const hasFiles = data.fileId && data.fileId.length > 0;
+
+            if (!data.title || (!hasMdContent && !hasFiles)) {
+              NotificationManager.Push({
+                html: Translate.Render('require-title-and-content-or-file'),
+                status: 'error',
+              });
+              return { data: [], status: 'error', message: 'Must provide either content or attach a file' };
+            }
+
             let mdFileId;
             const mdFileName = `${getCapVariableName(data.title)}.md`;
             const location = `${prefixTags.join('/')}`;
             const blob = new Blob([data.mdFileId], { type: 'text/markdown' });
             const md = new File([blob], mdFileName, { type: 'text/markdown' });
-            const tags = uniqueArray(
-              data.tags
-                .replaceAll('/', ',')
-                .replaceAll('-', ',')
-                .replaceAll(' ', ',')
-                .split(',')
-                .map((t) => t.trim())
-                .filter((t) => t)
-                .concat(prefixTags),
-            );
+            const tags = data.tags
+              ? uniqueArray(
+                  data.tags
+                    .replaceAll('/', ',')
+                    .replaceAll('-', ',')
+                    .replaceAll(' ', ',')
+                    .split(',')
+                    .map((t) => t.trim())
+                    .filter((t) => t)
+                    .concat(prefixTags),
+                )
+              : prefixTags;
             let originObj, originFileObj, indexOriginObj;
             if (editId) {
               indexOriginObj = PanelForm.Data[idPanel].originData.findIndex((d) => d._id === editId);
@@ -341,10 +477,16 @@ const PanelForm = {
       const panelData = PanelForm.Data[idPanel];
       logger.warn('getPanelData called, isLoadMore:', isLoadMore);
       try {
-        if (panelData.loading || !panelData.hasMore) {
-          logger.warn('getPanelData early return - loading:', panelData.loading, 'hasMore:', panelData.hasMore);
-          return;
+        const cidQuery = getQueryParams().cid;
+
+        // When cid query exists, bypass pagination and loading checks
+        if (!cidQuery) {
+          if (panelData.loading || !panelData.hasMore) {
+            logger.warn('getPanelData early return - loading:', panelData.loading, 'hasMore:', panelData.hasMore);
+            return;
+          }
         }
+
         panelData.loading = true;
 
         if (!isLoadMore) {
@@ -353,13 +495,20 @@ const PanelForm = {
           panelData.hasMore = true;
         }
 
+        // When cid query exists, don't apply skip/limit pagination
+        const params = {
+          tags: prefixTags.join(','),
+          ...(cidQuery && { cid: cidQuery }),
+        };
+
+        // Only apply pagination when there's no cid query
+        if (!cidQuery) {
+          params.skip = panelData.skip;
+          params.limit = panelData.limit;
+        }
+
         const result = await DocumentService.get({
-          params: {
-            tags: prefixTags.join(','),
-            ...(getQueryParams().cid && { cid: getQueryParams().cid }),
-            skip: panelData.skip,
-            limit: panelData.limit,
-          },
+          params,
           id: 'public/',
         });
 
@@ -417,6 +566,7 @@ const PanelForm = {
                 fileId,
                 tools: Elements.Data.user.main.model.user._id === documentObject.userId._id,
                 _id: documentObject._id,
+                totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
               });
             } catch (fileError) {
               logger.error('Error fetching files for document:', documentObject._id, fileError);
@@ -425,9 +575,17 @@ const PanelForm = {
             }
           }
 
-          panelData.skip += result.data.data.length;
-          panelData.hasMore = result.data.data.length === panelData.limit;
-          if (result.data.data.length === 0 || result.data.data.pop()._id === panelData.lasIdAvailable) {
+          // Only update pagination when not using cid query
+          if (!cidQuery) {
+            panelData.skip += result.data.data.length;
+            panelData.hasMore = result.data.data.length === panelData.limit;
+          } else {
+            // When cid query is used, disable infinite scroll
+            panelData.hasMore = false;
+          }
+
+          const lastItem = result.data.data[result.data.data.length - 1];
+          if (result.data.data.length === 0 || (lastItem && lastItem._id === panelData.lasIdAvailable)) {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
             panelData.hasMore = false;
           }
@@ -538,7 +696,8 @@ const PanelForm = {
             loading: false,
           };
 
-          if (cid) this.Data[idPanel].skip = 0;
+          // Always reset skip to 0 when reloading (whether cid exists or not)
+          this.Data[idPanel].skip = 0;
 
           const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
           htmls(containerSelector, await renderSrrPanelData());
@@ -553,22 +712,26 @@ const PanelForm = {
             `,
           );
 
+          const lastOriginItem = this.Data[idPanel].originData[this.Data[idPanel].originData.length - 1];
           if (
             !this.Data[idPanel].lasIdAvailable ||
-            this.Data[idPanel].lasIdAvailable !==
-              this.Data[idPanel].originData[this.Data[idPanel].originData.length - 1]._id
+            !lastOriginItem ||
+            this.Data[idPanel].lasIdAvailable !== lastOriginItem._id
           )
             LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
 
           const scrollContainerSelector = `.modal-${options.route}`;
 
+          // Always remove old scroll event before setting new one
+          if (this.Data[idPanel].removeScrollEvent) {
+            this.Data[idPanel].removeScrollEvent();
+          }
+
           if (cid) {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
             return;
           }
-          if (this.Data[idPanel].removeScrollEvent) {
-            this.Data[idPanel].removeScrollEvent();
-          }
+
           const { removeEvent } = Scroll.setEvent(scrollContainerSelector, async (payload) => {
             const panelData = PanelForm.Data[idPanel];
             if (!panelData) return;

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

@@ -188,6 +188,9 @@ const TranslateCore = {
     Translate.Data['error-update-user'] = { en: 'error update user', es: 'error al actualizar el usuario' };
 
     Translate.Data['edit'] = { en: 'Edit', es: 'Editar' };
+    Translate.Data['copy-share-link'] = { en: 'Copy share link', es: 'Copiar enlace compartido' };
+    Translate.Data['link-copied'] = { en: 'Link copied to clipboard', es: 'Enlace copiado al portapapeles' };
+    Translate.Data['error-copying-link'] = { en: 'Error copying link', es: 'Error al copiar enlace' };
     Translate.Data['unconfirmed'] = { en: 'unconfirmed', es: 'No confirmado' };
     Translate.Data['confirmed'] = { en: 'confirmed', es: 'Confirmado' };
     Translate.Data['confirm'] = { en: 'confirm', es: 'confirmar' };
@@ -520,6 +523,14 @@ const TranslateCore = {
       en: 'Data reloaded successfully.',
       es: 'Datos recargados con éxito.',
     };
+    Translate.Data['clear-file'] = {
+      en: 'Clear File',
+      es: 'Limpiar Archivos',
+    };
+    Translate.Data['require-title-and-content-or-file'] = {
+      en: 'Require title and content or file',
+      es: 'Requiere título y contenido o archivo',
+    };
   },
 };
 

package/src/client/services/document/document.service.js

@@ -92,6 +92,25 @@ const DocumentService = {
           return reject(error);
         }),
     ),
+  patch: (options = { id: '', action: '' }) =>
+    new Promise((resolve, reject) =>
+      fetch(getApiBaseUrl({ id: `${options.id}/${options.action}`, endpoint }), {
+        method: 'PATCH',
+        headers: headersFactory(),
+        credentials: 'include',
+      })
+        .then(async (res) => {
+          return await res.json();
+        })
+        .then((res) => {
+          logger.info(res);
+          return resolve(res);
+        })
+        .catch((error) => {
+          logger.error(error);
+          return reject(error);
+        }),
+    ),
 };
 
 export { DocumentService };