@uxland/primary-shell 5.0.0 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -44,7 +44,7 @@
     "react-dom": "^19.0.0",
     "@types/react": "^19.0.12",
     "inversify-inject-decorators": "^3.1.0",
-    "@salut/design-system-salut": "../../design-system-salut-2.2.1.tgz",
+    "@salut/design-system-salut": "../../design-system-salut-2.3.0.tgz",
     "jwt-decode": "^4.0.0",
     "lit": "^3.1.0",
     "mediatr-ts": "^1.2.1",

package/src/UI/components/clinical-monitoring/styles.css

@@ -9,7 +9,8 @@
   min-height: 1px;
   height: 100%;
   display: flex;
-flex-direction: row;
+  flex-direction: row;
+  
   #widgets-sidebar-region {
     width: 25%;
     border-left: 1px solid rgb(189, 189, 189);
@@ -17,7 +18,7 @@ flex-direction: row;
   .content {
     flex: 1;
     display: flex;
-  flex-direction: column;
+    flex-direction: column;
     #header-widgets-region {
       display: grid;
       grid-template-columns: repeat(3, 1fr);

package/src/UI/components/index.ts

@@ -4,3 +4,4 @@ import "../shared-components";
 import "./shell-header/shell-header";
 import "./quick-actions-menu/quick-actions-menu";
 import "../../api/plugin-busy-manager/plugin-busy-list/component";
+import "./pdf-visor/pdf-selector/pdf-selector";

package/src/UI/components/pdf-visor/pdf-selector/pdf-selector.ts

@@ -0,0 +1,40 @@
+import { LitElement, css, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { IPdfDocument } from "../../../../../src/api/pdf-viewer-manager/pdf-viewer-manager";
+import { template } from "./template";
+import styles from "./styles.css?inline";
+import { createUrlFromBase64 } from "../utils";
+
+@customElement("pdf-selector")
+export class PdfSelector extends LitElement {
+  render() {
+    return template(this);
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  @property({ type: Array })
+  pdfList: IPdfDocument[];
+
+  @property({ type: Array })
+  activePdfs: IPdfDocument[] = [];
+
+  removePdf(id: string) {
+    this.dispatchEvent(
+      new CustomEvent("pdf-removed", { detail: id, bubbles: true, composed: true }),
+    );
+  }
+
+  setActivePdf(id: string) {
+    this.dispatchEvent(
+      new CustomEvent("active-pdf-changed", { detail: id, bubbles: true, composed: true }),
+    );
+  }
+
+  openInNewWindow(pdf: IPdfDocument) {
+    const url = pdf.data.url ? pdf.data.url : createUrlFromBase64(pdf.data.b64 as string);
+    url && window.open(url);
+  }
+}

package/src/UI/components/pdf-visor/pdf-selector/styles.css

@@ -0,0 +1,24 @@
+:host {
+  width: 250px;
+  gap: 8px
+}
+
+.pdf-item{
+  display: flex;
+  align-items: flex-start;
+  padding: 8px; 
+  gap:8px;
+  color:black;
+  border-bottom: 1px solid var(--color-neutral-100);
+}
+
+.header-icons{
+  display: flex;
+  gap: 8px;
+}
+
+.container{
+  gap: 8px;   
+  display: flex;
+  flex-direction: column;
+}

package/src/UI/components/pdf-visor/pdf-selector/template.ts

@@ -0,0 +1,37 @@
+import { html } from "lit";
+import { PdfSelector } from "./pdf-selector";
+import { IPdfDocument } from "primary/shell/src/api/pdf-viewer-manager/pdf-viewer-manager";
+import { repeat } from "lit/directives/repeat.js";
+
+export const template = (props: PdfSelector) => {
+  const pdfitem = (pdf: IPdfDocument) => {
+    return html`
+    <div class="pdf-item">
+      <dss-checkbox @onChange=${() => props.setActivePdf(pdf.id)}>
+        <input 
+          slot="input" 
+          type="checkbox" 
+          aria-label="Label"
+          .checked=${props.activePdfs.some((p) => p.id === pdf.id)}
+        >
+      </dss-checkbox>
+      <div class="container">
+        <div class="header-icons">
+          <dss-icon-button size="md" variant="error" icon="picture_as_pdf"></dss-icon-button> 
+          <dss-icon-button size="md" variant="error" icon="close" @click=${() => props.removePdf(pdf.id)}></dss-icon-button> 
+          <dss-icon-button size="md"  icon="open_in_new" @click=${() => props.openInNewWindow(pdf)}></dss-icon-button> 
+        </div>
+        <div class="data">
+          ${pdf.pdfName}
+        </div>
+      </div>
+    </div>
+  `;
+  };
+
+  return html`
+    <div>
+        ${repeat(props.pdfList, (pdf: IPdfDocument) => pdfitem(pdf))}
+    </div> 
+  `;
+};

package/src/UI/components/pdf-visor/pdf-visor.ts

@@ -0,0 +1,124 @@
+import styles from "./styles.css?inline";
+import { html, LitElement, css, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { BrokerDisposableHandler } from "../../../api/broker/primaria-broker";
+import { PrimariaApi } from "../../../api/api";
+import { TYPES } from "../../../../src/infrastructure/ioc/types";
+import { lazyInject } from "../../../../src/infrastructure/ioc/container";
+import { pdfViwerEvents } from "../../../../src/api/pdf-viewer-manager/events";
+import { IPdfDocument } from "../../../api/pdf-viewer-manager/pdf-viewer-manager";
+import { translate } from "../../../../src/locales";
+import { createUrlFromBase64 } from "./utils";
+
+@customElement("pdf-visor")
+export class PdfVisor extends LitElement {
+  static styles = css`${unsafeCSS(styles)}`;
+
+  @lazyInject(TYPES.primaryApi)
+  api: PrimariaApi;
+
+  @property({ type: Array })
+  pdfList: IPdfDocument[] = [];
+
+  @property({ type: Array })
+  activePdfs: IPdfDocument[] = [];
+
+  private subscriptions: BrokerDisposableHandler[] = [];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this._initializePdfState();
+    this._subscribeEvents();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._unsubscribeEvents();
+  }
+
+  private _initializePdfState() {
+    const initialPdfs = this.api.pdfViewerManager.getPdfs?.() || [];
+    this.pdfList = [...initialPdfs];
+
+    if (initialPdfs.length === 1) {
+      this.activePdfs = [initialPdfs[0] as IPdfDocument];
+    } else if (initialPdfs.length >= 2) {
+      this.activePdfs = initialPdfs.slice(-2);
+    }
+  }
+
+  private _getPdfSrc(pdf: IPdfDocument) {
+    if (pdf.data.url) return pdf.data.url;
+    if (pdf.data.b64) return createUrlFromBase64(pdf.data.b64);
+    return "";
+  }
+
+  private _subscribeEvents() {
+    const subscriptions = [
+      this.api.broker.subscribe(pdfViwerEvents.added, (pdf: IPdfDocument) => this._onPdfAdded(pdf)),
+      this.api.broker.subscribe(pdfViwerEvents.deleted, ({ id }) => this._onPdfDeleted({ id })),
+    ];
+    subscriptions.forEach((s) => this.subscriptions.push(s));
+  }
+
+  private _unsubscribeEvents() {
+    this.subscriptions.forEach((s) => s.dispose());
+  }
+
+  private _onPdfAdded(pdf: IPdfDocument) {
+    this.pdfList = [...this.pdfList, pdf];
+    this._updateActivePdfs(pdf.id);
+  }
+
+  private _onPdfDeleted({ id }) {
+    this.pdfList = this.pdfList.filter((pdf) => pdf.id !== id);
+    this.activePdfs = this.activePdfs.filter((pdf) => pdf.id !== id);
+    this.requestUpdate();
+  }
+
+  private _removePdf(id: string) {
+    this.api.pdfViewerManager.delete(id);
+    this.activePdfs = this.activePdfs.filter((pdf) => pdf.id !== id);
+  }
+
+  private _updateActivePdfs(id: string) {
+    const isAlreadyActive = this.activePdfs.some((pdf) => pdf.id === id);
+    if (isAlreadyActive) {
+      this.activePdfs = this.activePdfs.filter((pdf) => pdf.id !== id);
+    } else {
+      const newPdf = this.pdfList.find((pdf) => pdf.id === id);
+      if (!newPdf) return;
+      if (this.activePdfs.length === 2) {
+        this.activePdfs = [this.activePdfs[1] as IPdfDocument, newPdf];
+      } else {
+        this.activePdfs = [...this.activePdfs, newPdf];
+      }
+    }
+    this.requestUpdate();
+  }
+
+  render() {
+    return html`
+      <div class="pdf-container">
+        ${
+          this.activePdfs.length > 0
+            ? this.activePdfs.map(
+                (pdf) =>
+                  html`<iframe height="100%" src=${this._getPdfSrc(pdf)} frameborder="0"></iframe>`,
+              )
+            : html`
+                <div class="no-pdf">
+                  <p>${translate("pdfVisor.noPdfSelected")}</p>
+                </div>
+              `
+        }
+      </div>
+      <pdf-selector
+        .pdfList=${this.pdfList}
+        .activePdfs=${this.activePdfs}
+        @pdf-removed=${(e: CustomEvent) => this._removePdf(e.detail)}
+        @active-pdf-changed=${(e: CustomEvent) => this._updateActivePdfs(e.detail)}
+      ></pdf-selector>
+    `;
+  }
+}

package/src/UI/components/pdf-visor/styles.css

@@ -0,0 +1,29 @@
+:host {
+  min-height: 1px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+iframe {
+  border: none;
+  flex:1;
+  height: 100%;
+
+}
+
+.pdf-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex: 1;
+  border: 1px solid #ccc;
+}
+
+.no-pdf {
+  text-align: center;
+  color: #666;
+  font-size: 1.2rem;
+  font-weight: bold;
+}

package/src/UI/components/pdf-visor/utils.ts

@@ -0,0 +1,16 @@
+function base64ToBlob(base64, type = "application/octet-stream") {
+  const binStr = window.atob(base64);
+  const len = binStr.length;
+  const arr = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    arr[i] = binStr.charCodeAt(i);
+  }
+  return new Blob([arr], { type: type });
+}
+
+export const createUrlFromBase64 = (b64: string, type?: string) => {
+  if (b64) {
+    const blob = base64ToBlob(b64, type || "application/pdf");
+    return URL.createObjectURL(blob);
+  }
+};

package/src/UI/components/poc-events-ecap/poc-events-ecap.ts

@@ -22,19 +22,49 @@ export class PocEventsEcap extends LitElement {
 
     </form>
     <button @click=${(e) => this.goToLinkOnEcap()}>LLennçar event ecap</button>
-    </div>`;
+    </div>
+    
+    <form>
+        <label for="pdfName">PDF Name</label>
+        <input type="text" id="pdfName" name="pdfName" placeholder="pdfName">
+        <label for="url">URL</label>
+        <input type="text" id="url" name="url" placeholder="url">
+
+
+    </form>
+    <button @click=${(e) => this.sendPdfToViewer()}>Add PDF</button>
+
+
+    <button @click=${(e) => this.getPDFS()}>GET PDFs</button>
+    `;
   }
 
-  goToLinkOnEcap() {
+  sendPdfToViewer() {
+    const pdfName = (this as any).shadowRoot?.getElementById("pdfName")?.value as string;
+    const fileName = (this as any).shadowRoot?.getElementById("url")?.value as string;
 
-    const eventType =  (this as any).shadowRoot?.getElementById("eventType")?.value;
-    const accio =  (this as any).shadowRoot?.getElementById("accio")?.value;
-    const parameterName =  (this as any).shadowRoot?.getElementById("parameterName")?.value;
-    const parameterValue =  (this as any).shadowRoot?.getElementById("parameterValue")?.value;
+    const data = fileName;
+
+    const pdf = { pdfName, data };
+    console.log("Añadiendo PDF:", pdf);
+
+    shellApi.pdfViewerManager.add(pdf);
+  }
+
+  getPDFS() {
+    const pdfs = shellApi.pdfViewerManager.getPdfs();
+    console.log(pdfs);
+  }
+
+  goToLinkOnEcap() {
+    const eventType = (this as any).shadowRoot?.getElementById("eventType")?.value;
+    const accio = (this as any).shadowRoot?.getElementById("accio")?.value;
+    const parameterName = (this as any).shadowRoot?.getElementById("parameterName")?.value;
+    const parameterValue = (this as any).shadowRoot?.getElementById("parameterValue")?.value;
 
     //sending data to parent window if opened inside iframe
     shellApi.ecapEventManager.publish(eventType, accio, {
-      [parameterName]: parameterValue
+      [parameterName]: parameterValue,
     });
   }
 

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

@@ -67,6 +67,9 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
   @state()
   error: { message: string };
 
+  @state()
+  quickActionBusy = false;
+
   _toggleSidebar() {
     this.sidebarExpanded = !this.sidebarExpanded;
   }
@@ -91,6 +94,12 @@ export class PrimariaShell extends PrimariaRegionHost(LitElement) {
         this._handleError({ message: translate("errors.invalidPatient") });
       }),
     );
+
+    this.subscriptions.push(
+      shellApi.broker.subscribe(shellEvents.quickActionBusyChanged, (detail: { busy: boolean }) => {
+        this.quickActionBusy = detail.busy;
+      }),
+    );
   }
 
   _handleError(error: { message: string }) {

package/src/UI/components/primaria-shell/styles.css

@@ -29,15 +29,28 @@
     width: 40px;
     height: 100%;
     color: white;
-    .top-content {
+    .quick-actions-content {
       padding-top: 24px;
-      padding-bottom: 24px;
+      padding-bottom: 22px;
       border-radius: 8px;
+      .create-button-icon-badge{
+        position: relative;
+        dss-notification-badge {
+          position: absolute;
+          top: -7px;
+          right: -6px;
+          z-index: 1;
+        }
+        dss-icon {
+          position: relative;
+        }
+      }
     }
     .icon {
       margin-left: 8px;
     }
     #menu-region-container {
+      padding-top: 24px;
       min-height: 1px;
       height: 100%;
       width: 100%;

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

@@ -13,10 +13,15 @@ export const template = (props: PrimariaShell) => html`
     <shell-header></shell-header>
     <div class="main-container">
       <div class="sidebar" ?expanded=${props.sidebarExpanded}>
-        <div class="top-content">
+        <div id="menu-region-container"></div>
+        <div class="quick-actions-content">
           <quick-actions-menu>
             <div class="${props.sidebarExpanded ? "create-button-opened" : "create-button-closed"} " slot="anchor" id="usage-anchor">
-              <dss-icon class="${props.sidebarExpanded ? "icon" : ""}" icon="add_circle_outline" size="md"></dss-icon>${props.sidebarExpanded ? translate('actions.create') : nothing}
+              <div class="${props.quickActionBusy ? "create-button-icon-badge" : ""}">
+                ${props.quickActionBusy ? html`<dss-notification-badge value="" state="error" borderwhite="" type="default" dot=""></dss-notification-badge>`: nothing}  
+                <dss-icon class="${props.sidebarExpanded ? "icon" : ""}" icon="add_circle_outline" size="md"></dss-icon>
+              </div>
+              ${props.sidebarExpanded ? translate('actions.create') : nothing}
               ${!props.sidebarExpanded ? html`<dss-tooltip position="right">
                 ${translate('actions.create')}
               </dss-tooltip>` : nothing}
@@ -24,7 +29,6 @@ export const template = (props: PrimariaShell) => html`
             <dss-action-menu id="quick-actions-region-container" slot="content" id="content" anchor="usage-anchor"></dss-action-menu>
           </quick-actions-menu>
         </div>
-        <div id="menu-region-container"></div>
         <div class="bottom-content">
           <div class="bottom-content-first">
             <hr class="dss-divider--bold ${props.sidebarExpanded ? "divider-opened" : "divider-closed"}" />

package/src/UI/components/shell-header/template.ts

@@ -21,7 +21,7 @@ export const template = (props: ShellHeader) => {
       <div id="header-actions-region-container"></div>
       ${when(
         props.professional,
-        () => html`<dss-header-menu-professional @onLogout=${props.logout} slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">
+        () => html`<dss-header-menu-professional @onExit=${props.logout} slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">
         <dss-avatar size="xl" name="${props.professional.firstName}" surname="${props.professional?.familyName}" slot="avatar"></dss-avatar>
         <dss-input-dropdown icon="maps_home_work" type="default" .elements=${workCenterElements} selectedvalue="[&quot;1&quot;]">
             <label slot="label" for="preferences1">${translate("header.workCenter")}</label>

package/src/api/api.ts

@@ -22,8 +22,10 @@ import { PrimariaInteractionService } from "./interaction-service";
 import { ParimariaInteractionServiceImpl } from "./interaction-service/interaction-service-impl";
 import { PrimariaNotificationService } from "./notification-service/notification-service";
 import { PrimariaNotificationServiceImpl } from "./notification-service/notification.service-impl";
+import { createPdfViewerManager, PdfViewerManager } from "./pdf-viewer-manager/pdf-viewer-manager";
 
 const broker = createBroker();
+
 export interface PrimariaApi extends HarmonixApi {
   httpClient: HttpClient;
   interactionService: PrimariaInteractionService;
@@ -34,13 +36,14 @@ export interface PrimariaApi extends HarmonixApi {
   tokenManager: TokenManager;
   ecapEventManager: EcapEventManager;
   pluginBusyManager: PluginBusyManager;
+  pdfViewerManager: PdfViewerManager;
 }
 
 const regionManager: IRegionManager = createRegionManager("primaria");
 export const PrimariaRegionHost: any = createRegionHost(regionManager as any);
 const tokenManager = createTokenManager();
 const globalStateManager: PrimariaGlobalStateManager = createGlobalStateManager(broker);
-const pluginBusyManager = new PluginBusyManagerImpl();
+const pluginBusyManager = new PluginBusyManagerImpl(broker);
 const interactionService = new ParimariaInteractionServiceImpl();
 const notificationService = new PrimariaNotificationServiceImpl();
 
@@ -53,9 +56,11 @@ const notificationService = new PrimariaNotificationServiceImpl();
 export const primariaApiFactory: ApiFactory<PrimariaApi> = (
   pluginInfo: PluginInfo,
 ): PrimariaApi => {
+  const regionManagerProxy = createRegionManagerProxy(pluginInfo, regionManager, broker);
+
   return {
     pluginInfo: pluginInfo,
-    regionManager: createRegionManagerProxy(pluginInfo, regionManager, broker),
+    regionManager: regionManagerProxy,
     httpClient: createHttpClient(tokenManager, broker),
     broker: broker,
     createLocaleManager: createLocaleManager(pluginInfo.pluginId) as any,
@@ -65,6 +70,7 @@ export const primariaApiFactory: ApiFactory<PrimariaApi> = (
     pluginBusyManager,
     interactionService,
     notificationService,
+    pdfViewerManager: createPdfViewerManager(broker, notificationService, regionManagerProxy),
   };
 };