@uxland/primary-shell 4.3.1 → 5.1.0

package/src/api/http-client/http-client.ts

@@ -2,28 +2,76 @@ import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
 import { TokenManager } from "../token-manager/token-manager";
 import { shellEvents } from "../../events";
 import { PrimariaBroker } from "../broker/primaria-broker";
+import { jwtDecode } from "jwt-decode";
 
-export const createAxiosInstance = (tokenManager: TokenManager, broker: PrimariaBroker) => {
+const mpidHeader = "x-catsalut-mpid";
+const obtainMpid = (token: string) => {
+  const mpid = (jwtDecode(token) as any).access_info?.mpi_patient_id;
+  return mpid;
+};
+
+export class MissingMpidHeaderError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "MissingMpidHeaderError";
+  }
+}
+
+export class InvalidMpidHeaderError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "InvalidMpidHeaderError";
+  }
+}
+const validateMpidHeader = (response: AxiosResponse, tokenManager: TokenManager): boolean => {
+  const mpidHeaderValue = response.headers[mpidHeader];
+  if (!mpidHeaderValue) {
+    throw new MissingMpidHeaderError("Mpid header is missing");
+  }
+  if (mpidHeaderValue !== obtainMpid(tokenManager.getToken())) {
+    throw new InvalidMpidHeaderError("Mpid header value is invalid");
+  }
+  return true;
+};
+
+export const createAxiosInstance = (
+  tokenManager: TokenManager,
+  broker: PrimariaBroker,
+  validateMpid: boolean = false,
+) => {
   const instance = axios.create();
   instance.interceptors.request.use((config) => {
     config.headers.Authorization = `Bearer ${tokenManager.getToken()}`;
     return config;
   });
-  
+
   instance.interceptors.response.use(
-    (response: AxiosResponse) => response,
+    (response: AxiosResponse) => {
+      try {
+        if (validateMpid) validateMpidHeader(response, tokenManager);
+        return response;
+      } catch (error) {
+        if (error instanceof InvalidMpidHeaderError) {
+          broker.publish(shellEvents.mpidHeaderInvalid, {
+            request: response.config,
+          });
+        }
+        return Promise.reject(error);
+      }
+    },
     async (error) => {
       const originalRequest = error.config;
-      if (error.response.status === 401 && !originalRequest._retry) {
+      if (error.response?.status === 401 && !originalRequest._retry) {
         originalRequest._retry = true;
-        // Implement token refresh logic here and update the token in headers
         try {
-        const newToken = await tokenManager.refreshToken();
-        originalRequest.headers.Authorization = `Bearer ${newToken}`;
-        return instance(originalRequest);
+          const newToken = await tokenManager.refreshToken();
+          originalRequest.headers.Authorization = `Bearer ${newToken}`;
+          return instance(originalRequest);
         } catch (refreshError) {
           console.error("Error refreshing token:", refreshError);
-          broker.publish(shellEvents.refreshTokenFailed, {request: originalRequest});
+          broker.publish(shellEvents.refreshTokenFailed, {
+            request: originalRequest,
+          });
           return Promise.reject(error);
         }
       }
@@ -41,9 +89,12 @@ let instance;
 export interface HttpClient {
   request<T = any, R = AxiosResponse<T>, D = any>(config: AxiosRequestConfig<D>): Promise<R>;
 }
-export const createHttpClient = (tokenManager: TokenManager, broker: PrimariaBroker): HttpClient => {
+export const createHttpClient = (
+  tokenManager: TokenManager,
+  broker: PrimariaBroker,
+): HttpClient => {
   if (!instance) {
     instance = createAxiosInstance(tokenManager, broker);
   }
   return { request: instance.request };
-};
+};

package/src/api/interaction-service/confirmation-message.tsx

@@ -0,0 +1,5 @@
+import { ConfirmationContentProps } from "./interaction-service.ts";
+
+export const ConfirmationMessage = ({ data }: ConfirmationContentProps<string>) => {
+    return (<div>{data}</div>)
+}

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

@@ -0,0 +1 @@
+export * from "./interaction-service";

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

@@ -0,0 +1,203 @@
+import {
+  ConfirmationContentProps,
+  ConfirmationOptions,
+  ConfirmationResult,
+  ConfirmationWithResultContentProps,
+  PrimariaInteractionService,
+} from "./interaction-service";
+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ó",
+  showConfirmButton: true,
+  showCancelButton: true,
+  confirmButtonText: "Acceptar",
+  cancelButtonText: "Cancel·lar",
+  showCloseButton: true,
+  fullCustomization: false,
+  closeOnOutsideClick: false,
+};
+
+export class ParimariaInteractionServiceImpl extends PrimariaInteractionService {
+  confirm<TData = undefined, TResult = undefined>(
+    data: TData | undefined,
+    DialogComponent:
+      | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
+      | (new () => HTMLElement),
+    options?: ConfirmationOptions | undefined,
+  ): Promise<ConfirmationResult<TResult | undefined>> {
+    const finalOptions: ConfirmationOptions = { ...defaultOptions, ...(options || {}) };
+    return new Promise((resolve) => {
+      const div = document.createElement("div");
+      document.body.appendChild(div);
+      const style = document.createElement("style");
+      style.textContent = modalStyles;
+
+      document.head.appendChild(style);
+
+      const DialogWrapper = () => {
+        const [result, setResult] = useState<ConfirmationResult<TResult | undefined>>();
+        const [isValid, setIsValid] = useState(true);
+        const dialogComponentRef = useRef(null);
+        const dialogRef = useRef<HTMLDivElement>(null);
+        const modalRef = useRef<HTMLDivElement>(null);
+
+        const isWebComponent =
+          typeof DialogComponent === "function" && DialogComponent.prototype instanceof HTMLElement;
+
+        useEffect(() => {
+          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;
+
+            // ⚠ Aquí creamos la instancia del Web Component manualmente
+            const wcElement = new (DialogComponent as any)();
+
+            // Asignar propiedades manualmente
+            (wcElement as any).data = data;
+            (wcElement as any).setResult = setResult;
+            (wcElement as any).setIsValid = setIsValid;
+            (wcElement as any).confirm = () => isValid && handleClose(true);
+            (wcElement as any).confirmResult = (result) => isValid && handleCloseWithResult(result);
+            (wcElement as any).cancel = () => handleClose(false);
+
+            // Agregar el Web Component al DOM
+            parent.appendChild(wcElement);
+
+            return () => {
+              parent.removeChild(wcElement);
+            };
+          }
+        }, [DialogComponent, data]);
+
+        const handleClose = (confirmed: boolean) => {
+          resolvePromise(result, confirmed);
+        };
+
+        const handleCloseWithResult = (finalResult: TResult) => {
+          resolvePromise(finalResult, true);
+        };
+
+        const resolvePromise = (finalResult: TResult, confirmed: boolean) => {
+          setTimeout(() => {
+            const confirmationResult = {
+              result: confirmed ? finalResult : undefined,
+              confirmed: confirmed,
+            };
+            resolve(confirmationResult);
+            document.body.removeChild(div);
+            document.head.removeChild(style);
+            window.removeEventListener('keydown', handleKeydown);
+          }, 300);
+        };
+
+        const getConfirmButtonVariant = () => {
+          if (finalOptions.state === "error") return "error";
+          if (finalOptions.state === "success") return "success";
+          if (finalOptions.state === "info") return "primary";
+          if (finalOptions.state === "alert") return "warning";
+          return "primary";
+        };
+
+        const getCancelButtonVariant = () => {
+          if (finalOptions.state) return "alternative-dark";
+          return "secondary";
+        };
+
+        const _renderContent = () => {
+          return isWebComponent ? (
+            <div ref={dialogComponentRef} />
+          ) : (
+            <DialogComponent
+              {...{
+                data,
+                setResult,
+                setIsValid,
+                confirm: () => isValid && handleClose(true),
+                cancel: () => handleClose(false),
+              }}
+            />
+          );
+        };
+        return (
+          <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>
+              )}
+              <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>
+          </div>
+        );
+      };
+
+
+      const root = createRoot(div);
+      root.render(<DialogWrapper />);
+    });
+  }
+
+  confirmMessage(
+    message: string,
+    options?: ConfirmationOptions | undefined,
+  ): Promise<ConfirmationResult> {
+    return this.confirm(message, ConfirmationMessage, options);
+  }
+}

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

@@ -0,0 +1,46 @@
+import * as React from "react";
+
+export interface ConfirmationResult<T = undefined> {
+  confirmed: boolean;
+  result: T | undefined;
+}
+
+export interface ConfirmationContentProps<TData, TResult = undefined> {
+  data: TData | undefined;
+  setResult: (result: TResult) => void;
+  setIsValid: (isValid: boolean) => void;
+  confirm: () => void;
+  cancel: () => void;
+}
+
+export interface ConfirmationWithResultContentProps<TData, TResult = undefined> {
+  data: TData | undefined;
+  confirmResult: (result: TResult) => void;
+  cancel: () => void;
+}
+
+export interface ConfirmationOptions {
+  title?: string | undefined;
+  showConfirmButton?: boolean | undefined;
+  showCancelButton?: boolean | undefined;
+  confirmButtonText?: string | undefined;
+  cancelButtonText?: string | undefined;
+  showCloseButton?: boolean | undefined;
+  fullCustomization?: boolean | undefined;
+  closeOnOutsideClick?: boolean | undefined;
+  state?: "success" | "info" | "alert" | "error";
+}
+
+export abstract class PrimariaInteractionService {
+  abstract confirm<TData = undefined, TResult = undefined>(
+    data: TData | undefined,
+    dialogComponent:
+      | React.ComponentType<ConfirmationContentProps<TData, TResult> | ConfirmationWithResultContentProps<TData, TResult>>
+      | (new () => HTMLElement),
+    options?: ConfirmationOptions | undefined,
+  ): Promise<ConfirmationResult<TResult | undefined>>;
+  abstract confirmMessage(
+    message: string,
+    options?: ConfirmationOptions | undefined,
+  ): Promise<ConfirmationResult>;
+}

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/notification-service/notification-service.ts

@@ -0,0 +1,6 @@
+export abstract class PrimariaNotificationService {
+  abstract info(message: string): void;
+  abstract warning(message: string): void;
+  abstract error(message: string): void;
+  abstract success(message: string): void;
+}

package/src/api/notification-service/notification.service-impl.ts

@@ -0,0 +1,45 @@
+import { PrimariaNotificationService } from "./notification-service";
+
+export class PrimariaNotificationServiceImpl extends PrimariaNotificationService {
+  private notify(
+    message: string,
+    state: "info" | "warning" | "error" | "success",
+    duration = 3000,
+  ): void {
+    // Crear el Web Component
+    const toast = document.createElement("dss-toast");
+    toast.setAttribute("isshow", "true");
+    toast.setAttribute("state", state);
+    toast.setAttribute("position", "bottom-left");
+    toast.setAttribute("text", message);
+    toast.setAttribute("hasicon", "true");
+    toast.setAttribute("duration", duration.toString());
+
+    // Agregar al body
+    document.body.appendChild(toast);
+
+    // Remover después del tiempo de duración
+    setTimeout(() => {
+      toast.setAttribute("isshow", "false");
+      setTimeout(() => {
+        toast.remove();
+      }, 300); // Espera un poco para animación de salida (ajustable)
+    }, duration);
+  }
+
+  info(message: string, duration?: number): void {
+    this.notify(message, "info", duration);
+  }
+
+  warning(message: string, duration?: number): void {
+    this.notify(message, "warning", duration);
+  }
+
+  error(message: string, duration?: number): void {
+    this.notify(message, "error", duration);
+  }
+
+  success(message: string, duration?: number): void {
+    this.notify(message, "success", duration);
+  }
+}

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

@@ -1,12 +1,11 @@
 import { LitElement, css, html, unsafeCSS } from "lit";
 import { customElement } from "lit/decorators.js";
+import { PluginBusyTask } from "../plugin-busy-manager";
 import styles from "./styles.css?inline";
 import { template } from "./template";
-import { confirmMixin } from "../../../UI/shared-components/primaria-interaction/confirm-mixin";
-import { PluginBusyTask } from "../plugin-busy-manager";
 
 @customElement("plugin-busy-list")
-export class PluginBusyList extends confirmMixin(LitElement) {
+export class PluginBusyList extends LitElement {
   static styles = css`
     ${unsafeCSS(styles)}
   `;
@@ -15,5 +14,5 @@ export class PluginBusyList extends confirmMixin(LitElement) {
     return html`${template(this)}`;
   }
 
-  model: { busyTasks: PluginBusyTask[] };
+  data: { busyTasks: PluginBusyTask[] };
 }

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

@@ -7,7 +7,7 @@ export const template = (props: PluginBusyList) => html`
     <div class="container">
         <div class="title">${translate("busyManager.title")}</div>
         <div class="list">
-            ${props.model?.busyTasks?.map((item: PluginBusyTask) => html`<div class="plugin-busy-item">${item.taskDescription}</div>`)}
+            ${props.data?.busyTasks?.map((item: PluginBusyTask) => html`<div class="plugin-busy-item">${item.taskDescription}</div>`)}
         </div>
     </div>
 `;

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]);
+    });
   });
 });