@uxland/primary-shell 7.27.0 → 7.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.27.0",
+  "version": "7.28.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",

package/src/UI/components/navigation-tooltip/index.ts

@@ -0,0 +1,2 @@
+export { showNavItemTooltip } from "./tooltip-manager";
+export { default as NavigationTooltip } from "./navigation-tooltip";

package/src/UI/components/navigation-tooltip/navigation-tooltip.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { createRoot, Root } from "react-dom/client";
+import "./styles.css";
+
+interface NavigationTooltipProps {
+  text: string;
+  itemAbsoluteY: number;
+}
+
+const NavigationTooltip: React.FC<NavigationTooltipProps> = ({ text, itemAbsoluteY }) => {
+  const itemHeight = 51;
+  const centerY = itemAbsoluteY + itemHeight / 2;
+
+  const style = {
+    left: "73px", // 60px (sidebar width) + 13px offset
+    top: `${centerY}px`,
+  };
+
+  return (
+    <div className="tooltip-overlay">
+      <div className="navigation-tooltip" style={style}>
+        <dss-icon icon="info" size="md" />
+        {text}
+        <div className="arrow" />
+      </div>
+    </div>
+  );
+};
+
+export default NavigationTooltip;
+
+// Singleton root to manage the tooltip rendering
+let tooltipRoot: Root | null = null;
+let tooltipContainer: HTMLDivElement | null = null;
+
+export const renderNavigationTooltip = (text: string, itemAbsoluteY: number) => {
+  // Clean up existing tooltip if any
+  if (tooltipRoot && tooltipContainer) {
+    tooltipRoot.unmount();
+    if (document.body.contains(tooltipContainer)) {
+      document.body.removeChild(tooltipContainer);
+    }
+  }
+
+  // Create new container
+  tooltipContainer = document.createElement("div");
+  document.body.appendChild(tooltipContainer);
+
+  // Create root and render
+  tooltipRoot = createRoot(tooltipContainer);
+  tooltipRoot.render(<NavigationTooltip text={text} itemAbsoluteY={itemAbsoluteY} />);
+
+  // Auto-remove after 5 seconds
+  setTimeout(() => {
+    if (tooltipRoot && tooltipContainer) {
+      tooltipRoot.unmount();
+      if (document.body.contains(tooltipContainer)) {
+        document.body.removeChild(tooltipContainer);
+      }
+      tooltipRoot = null;
+      tooltipContainer = null;
+    }
+  }, 5000);
+};

package/src/UI/components/navigation-tooltip/styles.css

@@ -0,0 +1,63 @@
+.tooltip-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+.navigation-tooltip {
+  position: absolute;
+  min-width: 250px;
+  transform: translateY(-50%);
+  background: #EAF7FD;
+  color: #0F4877;
+  border: 2px solid #0F4877;
+  padding: 12px 16px;
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 13px;
+  font-family: var(--etc-font-family, inherit);
+  font-weight: 500;
+  animation: fadeInOut 5s ease-in-out forwards;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tooltip-icon {
+  font-size: 16px;
+}
+
+.arrow {
+  position: absolute;
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border: 12px solid transparent;
+  border-right-color: #1e88e5;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-10px);
+  }
+  10% {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0px);
+  }
+  90% {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0px);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-50%) translateX(-10px);
+  }
+}

package/src/UI/components/navigation-tooltip/tooltip-manager.ts

@@ -0,0 +1,31 @@
+import { shellApi } from "../../../api/api";
+import { shellEvents } from "../../../events";
+import { renderNavigationTooltip } from "./navigation-tooltip";
+
+const scrollToNavItem = (
+  navItemMenuKey: string,
+): Promise<{ scrollTop: number; containerTop: number; itemIndex: number; itemAbsoluteY: number }> => {
+  return new Promise((resolve) => {
+    const subscription = shellApi.broker.subscribe(
+      shellEvents.scrollToNavItemCompleted,
+      (data: { scrollTop: number; containerTop: number; itemIndex: number; itemAbsoluteY: number }) => {
+        subscription.dispose();
+        resolve(data);
+      },
+    );
+
+    shellApi.broker.publish(shellEvents.scrollToNavItemRequested, navItemMenuKey);
+
+    // Fallback timeout in case the event doesn't arrive
+    setTimeout(() => {
+      subscription.dispose();
+      resolve({ scrollTop: 0, containerTop: 0, itemIndex: -1, itemAbsoluteY: window.innerHeight / 2 });
+    }, 1000);
+  });
+};
+
+export const showNavItemTooltip = async (navItemMenuKey: string, text: string) => {
+  const scrollData = await scrollToNavItem(navItemMenuKey);
+
+  renderNavigationTooltip(text, scrollData.itemAbsoluteY);
+};

package/src/UI/components/primaria-shell/primaria-shell.ts

@@ -89,6 +89,12 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
         this.quickActionBusy = detail.busy;
       }),
     );
+
+    this.subscriptions.push(
+      shellApi.broker.subscribe(shellEvents.scrollToNavItemRequested, (navItemMenuKey: string) => {
+        this._scrollToNavItem(navItemMenuKey);
+      }),
+    );
   }
 
   _handleError(error: { message: string }) {
@@ -100,4 +106,88 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
   _unsubscribeEvents() {
     this.subscriptions.forEach((s) => s.dispose());
   }
+
+  async _scrollToNavItem(navItemMenuKey: string) {
+    const region = await shellApi.regionManager.getRegion(shellApi.regionManager.regions.shell.navigationMenu);
+
+    const allViews = region.currentActiveViews;
+
+    // Extract the actual view id from the key (remove plugin prefix)
+    // navItemMenuKey comes as "primaria-shell::pdf-viewer", we need just "pdf-viewer"
+    const viewId = navItemMenuKey.includes("::") ? navItemMenuKey.split("::")[1] : navItemMenuKey;
+
+    const targetView = allViews.find((view: any) => view.id === viewId);
+
+    if (!targetView) {
+      shellApi.broker.publish(shellEvents.scrollToNavItemCompleted, {
+        scrollTop: 0,
+        containerTop: 0,
+        itemIndex: -1,
+      });
+      return;
+    }
+
+    // Sort views by sortHint to find the correct position
+    const sortedViews = [...allViews].sort((a: any, b: any) => {
+      const sortHintA = a.sortHint || "999";
+      const sortHintB = b.sortHint || "999";
+      return sortHintA.localeCompare(sortHintB);
+    });
+
+    const targetIndex = sortedViews.findIndex((view: any) => view.id === viewId);
+
+    if (targetIndex === -1) {
+      shellApi.broker.publish(shellEvents.scrollToNavItemCompleted, {
+        scrollTop: 0,
+        containerTop: 0,
+        itemIndex: -1,
+      });
+      return;
+    }
+
+    const menuContainer = this.shadowRoot?.querySelector("#menu-region-container") as HTMLElement;
+    if (!menuContainer) {
+      shellApi.broker.publish(shellEvents.scrollToNavItemCompleted, {
+        scrollTop: 0,
+        containerTop: 0,
+        itemIndex: targetIndex,
+      });
+      return;
+    }
+
+    const itemHeight = 51;
+    const targetPosition = itemHeight * targetIndex;
+    const containerHeight = menuContainer.clientHeight;
+
+    // Scroll to position the item in the middle of the container
+    const scrollPosition = targetPosition - containerHeight / 2 + itemHeight / 2;
+    menuContainer.scrollTo({
+      top: Math.max(0, scrollPosition),
+      behavior: "smooth",
+    });
+
+    // Wait for scroll to complete and then publish the completed event
+    setTimeout(() => {
+      const containerRect = menuContainer.getBoundingClientRect();
+
+      // Get all nav items from the container
+      const navItems = Array.from(menuContainer.children) as HTMLElement[];
+
+      // Find the actual DOM element for the target item
+      let itemAbsoluteY = window.innerHeight / 2; // default fallback
+
+      if (navItems[targetIndex]) {
+        const itemRect = navItems[targetIndex].getBoundingClientRect();
+        itemAbsoluteY = itemRect.top;
+      }
+
+      const data = {
+        scrollTop: menuContainer.scrollTop,
+        containerTop: containerRect.top,
+        itemIndex: targetIndex,
+        itemAbsoluteY: itemAbsoluteY,
+      };
+      shellApi.broker.publish(shellEvents.scrollToNavItemCompleted, data);
+    }, 300);
+  }
 }

package/src/api/pdf-viewer-manager/handle-views.ts

@@ -3,6 +3,8 @@ import { translate } from "../../locales";
 import { PrimariaNavItem } from "../../UI/shared-components/primaria-nav-item/primaria-nav-item";
 import { shellApi } from "../api";
 import { PdfVisor } from "./pdf-visor/pdf-visor";
+import { showNavItemTooltip } from "../../UI/components/navigation-tooltip/tooltip-manager";
+import { primariaShellId } from "../../constants";
 
 export const registerPdfViewerNavItem = () => {
   shellApi.regionManager.registerView(shellApi.regionManager.regions.shell.navigationMenu, {
@@ -18,6 +20,12 @@ export const registerPdfViewerNavItem = () => {
       return Promise.resolve(menuItem);
     },
   });
+
+  // Show tooltip when PDF viewer is registered
+  setTimeout(() => {
+    const navItemKey = `${primariaShellId}::${pdfViewerId}`;
+    showNavItemTooltip(navItemKey, translate("pdfManager.tooltipMessage"));
+  }, 100);
 };
 
 export const registerPDFVisorMainView = () => {

package/src/api/pdf-viewer-manager/pdf-viewer-manager.test.ts

@@ -2,6 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createPdfViewerManager } from "./pdf-viewer-manager";
 import { pdfViwerEvents } from "./events";
 import { registerPdfViewerNavItem } from "./handle-views";
+import { showNavItemTooltip } from "../../UI/components/navigation-tooltip";
 
 vi.mock("@primaria/plugins-core", () => ({
   generateId: () => "generated-id",
@@ -15,6 +16,10 @@ vi.mock("../../locales", () => ({
   translate: (key: string) => key,
 }));
 
+vi.mock("../../UI/components/navigation-tooltip", () => ({
+  showNavItemTooltip: vi.fn(),
+}));
+
 describe("PdfViewerManager", () => {
   let manager: ReturnType<typeof createPdfViewerManager>;
   let broker: any;
@@ -60,6 +65,22 @@ describe("PdfViewerManager", () => {
     });
   });
 
+  it("should show tooltip when adding a valid pdf", async () => {
+    vi.useFakeTimers();
+
+    manager.add("Doc1", { url: "https://test.com/doc1.pdf" });
+
+    // Fast-forward the setTimeout(100ms)
+    vi.advanceTimersByTime(100);
+
+    expect(showNavItemTooltip).toHaveBeenCalledWith(
+      "primaria-shell::pdf-viewer",
+      "pdfManager.tooltipMessage"
+    );
+
+    vi.useRealTimers();
+  });
+
   it("should warn if pdf with same name already exists", () => {
     manager.add("Doc1", { b64: "xxx" });
     manager.add("Doc1", { b64: "xxx" });
@@ -68,6 +89,38 @@ describe("PdfViewerManager", () => {
     expect(manager.getPdfs()).toHaveLength(1); // solo el primero
   });
 
+  it("should not show tooltip when pdf with same name already exists", () => {
+    vi.useFakeTimers();
+
+    // First add succeeds and shows tooltip
+    manager.add("Doc1", { b64: "xxx" });
+    vi.advanceTimersByTime(100);
+
+    // Clear mocks after first add
+    vi.clearAllMocks();
+
+    // Second add with same name should show warning but NOT tooltip
+    manager.add("Doc1", { b64: "xxx" });
+    vi.advanceTimersByTime(100);
+
+    expect(notificationService.warning).toHaveBeenCalledWith("pdfManager.alreadyUploaded");
+    expect(showNavItemTooltip).not.toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+
+  it("should not show tooltip when pdf data is invalid", () => {
+    vi.useFakeTimers();
+
+    manager.add("Doc1", {});
+    vi.advanceTimersByTime(100);
+
+    expect(notificationService.error).toHaveBeenCalledWith("pdfManager.missingData");
+    expect(showNavItemTooltip).not.toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+
   it("should call registerNavButton only once", () => {
     manager.add("Doc1", { url: "u" });
     manager.add("Doc2", { url: "u2" });

package/src/api/pdf-viewer-manager/pdf-viewer-manager.ts

@@ -7,6 +7,9 @@ import { PrimariaNotificationService } from "../notification-service/notificatio
 import { pdfViwerEvents } from "./events";
 import { PdfSelector } from "./pdf-visor/pdf-selector/pdf-selector";
 import { PdfVisor } from "./pdf-visor/pdf-visor";
+import { showNavItemTooltip } from "../../UI/components/navigation-tooltip";
+import { pdfViewerId } from "./constants";
+import { primariaShellId } from "../../constants";
 
 export interface IPdfDocument {
   pdfName: string;
@@ -59,6 +62,12 @@ export class PdfViewerManager {
       this.broker.publish(pdfViwerEvents.added, pdf);
 
       this.notificationService.success(translate("pdfManager.uploaded"));
+
+      // Show tooltip to guide user to the PDF viewer
+      setTimeout(() => {
+        const navItemKey = `${primariaShellId}::${pdfViewerId}`;
+        showNavItemTooltip(navItemKey, translate("pdfManager.tooltipMessage"));
+      }, 100);
     }
   }
 
@@ -81,7 +90,5 @@ export class PdfViewerManager {
   }
 }
 
-export const createPdfViewerManager = (
-  broker: PrimariaBroker,
-  notificationService: PrimariaNotificationService,
-) => new PdfViewerManager(broker, notificationService);
+export const createPdfViewerManager = (broker: PrimariaBroker, notificationService: PrimariaNotificationService) =>
+  new PdfViewerManager(broker, notificationService);

package/src/events.ts

@@ -4,4 +4,6 @@ export const shellEvents = {
   refreshTokenFailed: "refreshTokenFailed",
   mpidHeaderInvalid: "mpidHeaderInvalid",
   quickActionBusyChanged: "quickActionBusyChanged",
+  scrollToNavItemRequested: "scrollToNavItemRequested",
+  scrollToNavItemCompleted: "scrollToNavItemCompleted",
 };

package/src/locales.ts

@@ -41,7 +41,7 @@ export const locales = {
       errors: {
         session: "Hi ha hagut un error amb la sessió. Siusplau, tanca i torna a obrir l'aplicació.",
         invalidPatient: "El pacient actual no és vàlid. Siusplau, tanca i torna a obrir l'aplicació.",
-        exit: "Hi ha hagut un error en sortir de l'ETC"
+        exit: "Hi ha hagut un error en sortir de l'ETC",
       },
       header: {
         workCenter: "Centre treball",
@@ -57,17 +57,18 @@ export const locales = {
         navButtonLabel: "Visor PDF",
         missingData: "Es necesita un document o URL per enviar al visor de resultats",
         duplicatedSource: "Només pots envar un document o URL a la vegada",
+        tooltipMessage: "S'ha generat el PDF al visor",
       },
       pdfVisor: {
         noPdfSelected: "No hi ha cap PDF seleccionat",
       },
-      importDataManager:{
+      importDataManager: {
         title: "Importar dades",
         actions: {
           cancel: "Cancel·lar",
           import: "Importar dades",
-        }
-      }
+        },
+      },
     },
   },
 };