@uxland/primary-shell 5.0.0 → 5.1.1

package/src/api/interaction-service/interaction-service-impl.tsx

@@ -9,6 +9,7 @@ import * as React from "react";
 import { useEffect, useState, useRef } from "react";
 import { createRoot } from "react-dom/client";
 import { ConfirmationMessage } from "./confirmation-message.tsx";
+import modalStyles from './modal-styles.css?raw'; 
 
 const defaultOptions: ConfirmationOptions = {
   title: "Confirmació",
@@ -17,8 +18,8 @@ const defaultOptions: ConfirmationOptions = {
   confirmButtonText: "Acceptar",
   cancelButtonText: "Cancel·lar",
   showCloseButton: true,
-  fullWidth: false,
   fullCustomization: false,
+  closeOnOutsideClick: false,
 };
 
 export class ParimariaInteractionServiceImpl extends PrimariaInteractionService {
@@ -32,32 +33,39 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
     const finalOptions: ConfirmationOptions = { ...defaultOptions, ...(options || {}) };
     return new Promise((resolve) => {
       const div = document.createElement("div");
-      const shadowRoot = div.attachShadow({ mode: "open" });
-
       document.body.appendChild(div);
+      const style = document.createElement("style");
+      style.textContent = modalStyles;
+
+      document.head.appendChild(style);
 
       const DialogWrapper = () => {
-        const [open, setOpen] = useState(true);
         const [result, setResult] = useState<ConfirmationResult<TResult | undefined>>();
         const [isValid, setIsValid] = useState(true);
-        const dssModalComponentRef = useRef(null);
         const dialogComponentRef = useRef(null);
+        const dialogRef = useRef<HTMLDivElement>(null);
+        const modalRef = useRef<HTMLDivElement>(null);
 
         const isWebComponent =
           typeof DialogComponent === "function" && DialogComponent.prototype instanceof HTMLElement;
 
         useEffect(() => {
-          const dssModalComponent = dssModalComponentRef.current;
-          const handleCloseDialog = (e: Event) => {
-            e.preventDefault();
-            handleClose(false);
-          };
-          dssModalComponent?.addEventListener("onModalClosed", handleCloseDialog);
-          return () => {
-            document.body.removeChild(div);
-          };
+          window.addEventListener('keydown', handleKeydown);
         }, []);
 
+        const handleKeydown = (event: KeyboardEvent) => {
+          if (event.key === 'Escape') {
+            handleClose(false);
+          }
+        };
+        const handleOutsideClick = (event: Event) => {
+          if (dialogRef.current) {
+            if (event.target === modalRef.current && finalOptions.closeOnOutsideClick) {
+              handleClose(false);
+            }
+          }
+        };
+
         useEffect(() => {
           if (isWebComponent && dialogComponentRef.current) {
             const parent = dialogComponentRef.current;
@@ -91,7 +99,6 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
         };
 
         const resolvePromise = (finalResult: TResult, confirmed: boolean) => {
-          setOpen(false);
           setTimeout(() => {
             const confirmationResult = {
               result: confirmed ? finalResult : undefined,
@@ -99,6 +106,8 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
             };
             resolve(confirmationResult);
             document.body.removeChild(div);
+            document.head.removeChild(style);
+            window.removeEventListener('keydown', handleKeydown);
           }, 300);
         };
 
@@ -130,88 +139,57 @@ export class ParimariaInteractionServiceImpl extends PrimariaInteractionService
             />
           );
         };
-
-        if (finalOptions.fullCustomization) {
-          return (
-            <div className="modal" hidden={!open}>
-              <div className="dialog">{_renderContent()}</div>
-            </div>
-          );
-        }
         return (
-          <dss-modal
-            modalTitle={finalOptions.title}
-            open={open}
-            fullWidth={finalOptions.fullWidth}
-            ref={dssModalComponentRef}
-            hideCloseIcon={!finalOptions.showCloseButton}
-            modalStyle="padding:0px;"
-          >
-            <div slot="body">{_renderContent()}</div>
-            <div
-              className="dss-modal-footer"
-              slot="footer"
-              hidden={!finalOptions.showCancelButton && !finalOptions.showConfirmButton}
-            >
-              {finalOptions.showCancelButton && (
-                <dss-button
-                  label={finalOptions.cancelButtonText}
-                  onClick={() => handleClose(false)}
-                  size="md"
-                  variant={getCancelButtonVariant()}
-                />
+          <div className="modal" ref={modalRef} onClick={handleOutsideClick} >
+            <div className="dialog" ref={dialogRef}>
+              {!finalOptions.fullCustomization && (
+                <div className="dss-dialog-header">
+                  <div className="dss-dialog-header-title">{finalOptions.title}</div>
+                  {finalOptions.showCloseButton && (
+                    <dss-icon-button
+                      class="dss-dialog-header-close" 
+                      size="md" 
+                      variant="neutral" 
+                      icon="close" 
+                      onClick={() => handleClose(false)}
+                    ></dss-icon-button>
+                  )}
+                </div>
               )}
-              {finalOptions.showConfirmButton && (
-                <dss-button
-                  onClick={() => isValid && handleClose(true)}
-                  label={finalOptions.confirmButtonText}
-                  disabled={!isValid}
-                  size="md"
-                  variant={getConfirmButtonVariant()}
-                />
+              <div className={`modal-content ${finalOptions.fullCustomization ? 'full-customization' : ''}`}>
+                {_renderContent()}
+              </div>
+              {!finalOptions.fullCustomization && (
+                <div
+                  className="dss-modal-footer"
+                  hidden={!finalOptions.showCancelButton && !finalOptions.showConfirmButton}
+                >
+                  {finalOptions.showCancelButton && (
+                    <dss-button
+                      label={finalOptions.cancelButtonText}
+                      onClick={() => handleClose(false)}
+                      size="md"
+                      variant={getCancelButtonVariant()}
+                    />
+                  )}
+                  {finalOptions.showConfirmButton && (
+                    <dss-button
+                      onClick={() => isValid && handleClose(true)}
+                      label={finalOptions.confirmButtonText}
+                      disabled={!isValid}
+                      size="md"
+                      variant={getConfirmButtonVariant()}
+                    />
+                  )}
+                </div>
               )}
             </div>
-          </dss-modal>
+          </div>
         );
       };
 
-      // Agregar estilos al Shadow DOM
-      const style = document.createElement("style");
-      style.textContent = `
-        .modal {
-          font-family: "Open Sans";
-          display: block;
-          position: fixed;
-          z-index: 400;
-          left: 0;
-          top: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba(0, 0, 0, 0.65);
-
-        .dialog {
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          z-index: 21;
-          background: #fff;
-          border-radius: 16px;
-          width: auto;
-          height: auto;
-          max-height: 95%;
-          min-width: 400px;
-          box-shadow:
-            0px 0px 14px rgb(0 0 0 / 25%),
-            0px 1px 10px rgb(0 0 0 / 22%);
-        }
-      }
-      `;
-
-      shadowRoot.appendChild(style);
-      const root = createRoot(shadowRoot);
+
+      const root = createRoot(div);
       root.render(<DialogWrapper />);
     });
   }

package/src/api/interaction-service/interaction-service.ts

@@ -26,8 +26,8 @@ export interface ConfirmationOptions {
   confirmButtonText?: string | undefined;
   cancelButtonText?: string | undefined;
   showCloseButton?: boolean | undefined;
-  fullWidth?: boolean | undefined;
   fullCustomization?: boolean | undefined;
+  closeOnOutsideClick?: boolean | undefined;
   state?: "success" | "info" | "alert" | "error";
 }
 

package/src/api/interaction-service/modal-styles.css

@@ -0,0 +1,69 @@
+.modal {
+  font-family: "Open Sans";
+  display: block;
+  position: fixed;
+  z-index: 400;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.65);
+}
+.dialog {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 21;
+  background: #fff;
+  border-radius: 16px;
+  width: auto;
+  height: auto;
+  max-height: 95%;
+  min-width: 400px;
+  box-shadow: 0 8px 12px 6px rgba(0 0 0 / 5%), 0 4px 4px rgba(0 0 0 / 10%);
+}
+.dss-dialog-header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
+.dss-dialog-header-title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--dss-spacing-xs);
+  font-size: 20px;
+  line-height: 30px;
+  font-weight: var(--font-bold);
+  color: var(--color-neutral-900);
+}
+.dss-dialog-header-close {
+  position: absolute;
+  top: var(--dss-spacing-lg);
+  right: calc(var(--dss-spacing-lg) - 4px);
+}
+.modal-content {
+  flex: 1;
+  padding: 0 24px;
+}
+.modal-content.full-customization {
+  padding: 0;
+}
+.dss-modal-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 24px;
+  border-bottom-left-radius: 16px;
+  border-bottom-right-radius: 16px;
+}

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

@@ -0,0 +1,5 @@
+export const pdfViwerEvents = {
+  added: "added_pdf",
+  showed: "showed_pdf",
+  deleted: "deleted_pdf",
+};

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

@@ -0,0 +1,97 @@
+import { translate } from "../../locales";
+import { PrimariaNavItem } from "../../UI/shared-components/primaria-nav-item/primaria-nav-item";
+import { PrimariaBroker } from "../broker/primaria-broker";
+import { PrimariaNotificationService } from "../notification-service/notification-service";
+import { shellRegions } from "../region-manager/regions";
+import { pdfViwerEvents } from "./events";
+import { pdfViewerId } from "../../constants";
+import { PrimariaRegionManager } from "../region-manager/region-manager";
+import { generateId } from "@primaria/plugins-core";
+
+export interface IPdfDocument {
+  pdfName: string;
+  id: string;
+  data: PdfData;
+}
+
+export interface PdfData {
+  url?: string;
+  b64?: string;
+}
+
+export class PdfViewerManager {
+  constructor(
+    private broker: PrimariaBroker,
+    private notificationService: PrimariaNotificationService,
+    private regionManager: PrimariaRegionManager,
+  ) {}
+
+  private pdfs: IPdfDocument[] = [];
+  private activePdf: IPdfDocument | null = null;
+  private hasBeenActivated = false;
+
+  add(pdfName: string, data: PdfData) {
+    const id = generateId();
+    const pdf: IPdfDocument = { id, pdfName, data };
+
+    if (!data.url && !data.b64) {
+      this.notificationService.error(translate("pdfManager.missingData"));
+      return;
+    }
+    if (data.url && data.b64) {
+      this.notificationService.error(translate("pdfManager.duplicatedSource"));
+      return;
+    }
+    if (!this.hasBeenActivated) {
+      this.registerNavButton();
+      this.hasBeenActivated = true;
+    }
+    if (this.pdfs.some((p) => p.pdfName === pdf.pdfName)) {
+      this.notificationService.warning(translate("pdfManager.alreadyUploaded"));
+    } else {
+      this.pdfs.push(pdf as IPdfDocument);
+      this.broker.publish(pdfViwerEvents.added, pdf);
+
+      this.notificationService.success(translate("pdfManager.uploaded"));
+    }
+  }
+
+  delete(pdfId: string) {
+    this.pdfs = this.pdfs.filter((pdf) => pdf.id !== pdfId);
+
+    if (this.activePdf?.id === pdfId) {
+      this.activePdf = null;
+    }
+
+    this.broker.publish(pdfViwerEvents.deleted, { id: pdfId });
+  }
+
+  getPdfs(): IPdfDocument[] {
+    return this.pdfs;
+  }
+
+  private registerNavButton() {
+    this.regionManager.registerView(shellRegions.navigationMenu, {
+      id: pdfViewerId,
+      factory: () => {
+        const menuItem = new PrimariaNavItem({
+          icon: "picture_as_pdf",
+          label: translate("pdfManager.navButtonLabel"),
+          callbackFn: () => {
+            this.regionManager.activateMainView(pdfViewerId);
+          },
+        });
+        return Promise.resolve(menuItem);
+      },
+    });
+  }
+}
+
+const pdfViewerManager = (broker, interactionManager, regionManager) =>
+  new PdfViewerManager(broker, interactionManager, regionManager);
+
+export const createPdfViewerManager = (
+  broker: PrimariaBroker,
+  notificationService: PrimariaNotificationService,
+  regionManager: PrimariaRegionManager,
+) => pdfViewerManager(broker, notificationService, regionManager);

package/src/api/plugin-busy-manager/plugin-busy-manager.test.ts

@@ -1,49 +1,111 @@
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { PluginBusyManagerImpl } from "./plugin-busy-manager";
+import { shellEvents } from "../../events";
 
 describe("PluginBusyManagerImpl", () => {
+  let brokerMock: any;
   let manager: PluginBusyManagerImpl;
 
   beforeEach(() => {
-    manager = new PluginBusyManagerImpl();
+    brokerMock = {
+      publish: vi.fn(),
+    };
+    manager = new PluginBusyManagerImpl(brokerMock);
   });
 
-  it("should start with no busy plugins", () => {
-    expect(manager.getBusyPluginTasks()).toEqual([]);
-    expect(manager.isAnyPluginBusy()).toBe(false);
+  describe("addBusyPluginTask", () => {
+    it("should add a plugin busy task", () => {
+      const task = { taskId: "1", taskDescription: "Loading plugin" };
+      manager.addBusyPluginTask(task);
+      expect(manager.getBusyPluginTasks()).toContain(task);
+    });
   });
 
-  it("should add a busy plugin", () => {
-    const task = { taskId: "plugin1", taskDescription: "Description for plugin1" };
-    manager.addBusyPluginTask(task);
-    expect(manager.getBusyPluginTasks()).toContainEqual(task);
-    expect(manager.isAnyPluginBusy()).toBe(true);
+  describe("removeBusyPluginTask", () => {
+    it("should remove a plugin busy task if it exists", () => {
+      const task = { taskId: "1", taskDescription: "Loading plugin" };
+      manager.addBusyPluginTask(task);
+      manager.removeBusyPluginTask("1");
+      expect(manager.getBusyPluginTasks()).not.toContain(task);
+    });
+
+    it("should do nothing if task does not exist", () => {
+      const task = { taskId: "1", taskDescription: "Loading plugin" };
+      manager.addBusyPluginTask(task);
+      manager.removeBusyPluginTask("non-existent");
+      expect(manager.getBusyPluginTasks()).toContain(task);
+    });
+  });
+
+  describe("addBusyQuickActionTask", () => {
+    it("should add a quick action busy task and emit event", () => {
+      const task = { taskId: "qa1" };
+      manager.addBusyQuickActionTask(task);
+      expect(brokerMock.publish).toHaveBeenCalledWith(shellEvents.quickActionBusyChanged, {
+        busy: true,
+      });
+    });
+  });
+
+  describe("removeBusyQuickActionTask", () => {
+    it("should remove a quick action task and emit event", () => {
+      const task = { taskId: "qa1" };
+      manager.addBusyQuickActionTask(task);
+      manager.removeBusyQuickActionTask("qa1");
+      expect(brokerMock.publish).toHaveBeenCalledWith(shellEvents.quickActionBusyChanged, {
+        busy: false,
+      });
+    });
+
+    it("should do nothing and not emit event if task does not exist", () => {
+      manager.removeBusyQuickActionTask("non-existent");
+      expect(brokerMock.publish).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("isAnyPluginBusy", () => {
+    it("should return false when no plugin tasks exist", () => {
+      expect(manager.isAnyPluginBusy()).toBe(false);
+    });
+
+    it("should return true when plugin tasks exist", () => {
+      manager.addBusyPluginTask({ taskId: "1", taskDescription: "Busy" });
+      expect(manager.isAnyPluginBusy()).toBe(true);
+    });
+  });
+
+  describe("isAnyQuickActionBusy", () => {
+    it("should return false when no quick action tasks exist", () => {
+      expect(manager.isAnyQuickActionBusy()).toBe(false);
+    });
+
+    it("should return true when quick action tasks exist", () => {
+      manager.addBusyQuickActionTask({ taskId: "qa1" });
+      expect(manager.isAnyQuickActionBusy()).toBe(true);
+    });
   });
 
-  it("should remove a busy plugin", () => {
-    const task1 = { taskId: "plugin1", taskDescription: "Description for plugin1" };
-    const task2 = { taskId: "plugin2", taskDescription: "Description for plugin2" };
-    manager.addBusyPluginTask(task1);
-    manager.addBusyPluginTask(task2);
-    manager.removeBusyPluginTask("plugin1");
-    expect(manager.getBusyPluginTasks()).not.toContainEqual(task1);
-    expect(manager.getBusyPluginTasks()).toContainEqual(task2);
+  describe("clearAllBusyPlugins", () => {
+    it("should clear all plugin busy tasks", () => {
+      manager.addBusyPluginTask({ taskId: "1", taskDescription: "Busy" });
+      manager.clearAllBusyPlugins();
+      expect(manager.getBusyPluginTasks()).toHaveLength(0);
+    });
   });
 
-  it("should do nothing if removing a non-existent plugin", () => {
-    const task = { taskId: "plugin1", taskDescription: "Description for plugin1" };
-    manager.addBusyPluginTask(task);
-    manager.removeBusyPluginTask("nonexistent");
-    expect(manager.getBusyPluginTasks()).toEqual([task]);
+  describe("clearAllBusyQuickActions", () => {
+    it("should clear all quick action busy tasks", () => {
+      manager.addBusyQuickActionTask({ taskId: "qa1" });
+      manager.clearAllBusyQuickActions();
+      expect(manager.isAnyQuickActionBusy()).toBe(false);
+    });
   });
 
-  it("should clear all busy plugins", () => {
-    const task1 = { taskId: "plugin1", taskDescription: "Description for plugin1" };
-    const task2 = { taskId: "plugin2", taskDescription: "Description for plugin2" };
-    manager.addBusyPluginTask(task1);
-    manager.addBusyPluginTask(task2);
-    manager.clearAllBusyPlugins();
-    expect(manager.getBusyPluginTasks()).toEqual([]);
-    expect(manager.isAnyPluginBusy()).toBe(false);
+  describe("getBusyPluginTasks", () => {
+    it("should return current plugin tasks", () => {
+      const task = { taskId: "1", taskDescription: "Loading plugin" };
+      manager.addBusyPluginTask(task);
+      expect(manager.getBusyPluginTasks()).toEqual([task]);
+    });
   });
 });

package/src/api/plugin-busy-manager/plugin-busy-manager.ts

@@ -1,22 +1,44 @@
+import { shellEvents } from "../../events";
+import { PrimariaBroker } from "../broker/primaria-broker";
+
 export interface PluginBusyTask {
   taskId: string;
   taskDescription: string;
 }
 
+export interface QuickActionBusyTask {
+  taskId: string;
+}
+
 export abstract class PluginBusyManager {
   abstract addBusyPluginTask(busyTask: PluginBusyTask): void;
-  abstract removeBusyPluginTask(taskId: string): any;
+  abstract removeBusyPluginTask(taskId: string): void;
+  abstract addBusyQuickActionTask(busyTask: QuickActionBusyTask): void;
+  abstract removeBusyQuickActionTask(taskId: string): void;
   abstract clearAllBusyPlugins(): void;
   abstract isAnyPluginBusy(): boolean;
+  abstract isAnyQuickActionBusy(): boolean;
   abstract getBusyPluginTasks(): PluginBusyTask[];
 }
 export class PluginBusyManagerImpl implements PluginBusyManager {
+  constructor(public broker: PrimariaBroker) {}
   private busyPluginTasks: PluginBusyTask[] = [];
+  private busyQuickActionTasks: QuickActionBusyTask[] = [];
 
   public addBusyPluginTask(busyTask: PluginBusyTask): void {
     this.busyPluginTasks.push(busyTask);
   }
 
+  public addBusyQuickActionTask(busyTask: QuickActionBusyTask): void {
+    const index = this.busyQuickActionTasks.findIndex((item) => item.taskId === busyTask.taskId);
+    if (index > -1) {
+      return;
+    }
+
+    this.busyQuickActionTasks.push(busyTask);
+    this.emitQuickActionBusyChanged();
+  }
+
   public removeBusyPluginTask(taskId: string): any {
     const index = this.busyPluginTasks.findIndex((item) => item.taskId === taskId);
     if (index > -1) {
@@ -24,15 +46,36 @@ export class PluginBusyManagerImpl implements PluginBusyManager {
     }
   }
 
+  public removeBusyQuickActionTask(taskId: string): any {
+    const index = this.busyQuickActionTasks.findIndex((item) => item.taskId === taskId);
+    if (index > -1) {
+      this.busyQuickActionTasks.splice(index, 1);
+      this.emitQuickActionBusyChanged();
+    }
+  }
+
   public isAnyPluginBusy(): boolean {
     return this.busyPluginTasks.length > 0;
   }
 
+  public isAnyQuickActionBusy(): boolean {
+    return this.busyQuickActionTasks.length > 0;
+  }
+
   public clearAllBusyPlugins(): void {
     this.busyPluginTasks = [];
   }
 
+  public clearAllBusyQuickActions(): void {
+    this.busyQuickActionTasks = [];
+  }
+
   public getBusyPluginTasks(): PluginBusyTask[] {
     return this.busyPluginTasks;
   }
+
+  private emitQuickActionBusyChanged() {
+    const busy = this.isAnyQuickActionBusy();
+    this.broker.publish(shellEvents.quickActionBusyChanged, { busy });
+  }
 }

package/src/constants.ts

@@ -1,3 +1,4 @@
 export const primariaShellId = "primaria-shell";
 export const clinicalMonitoringId = "clinical-monitoring";
 export const pocTestEventsId = "poc-events-ecap";
+export const pdfViewerId = "pdf-viewer";

package/src/events.ts

@@ -4,4 +4,5 @@ export const shellEvents = {
   mainViewChanged: "mainViewChanged",
   refreshTokenFailed: "refreshTokenFailed",
   mpidHeaderInvalid: "mpidHeaderInvalid",
+  quickActionBusyChanged: "quickActionBusyChanged",
 };

package/src/features/exit/handler.ts

@@ -1,4 +1,4 @@
-import { CustomConfirmOptions, PrimariaApi } from "@uxland/primary-shell";
+import { PrimariaApi } from "@uxland/primary-shell";
 import { TYPES } from "../../infrastructure/ioc/types";
 import { inject } from "inversify";
 import { ExitShell } from "./request";
@@ -27,9 +27,7 @@ export class ExitShellHandler {
 
       raiseCloseEvent();
     } catch (error) {
-      this.api.notificationService.error(
-        error.message,
-      );
+      this.api.notificationService.error(error.message);
     }
   }