@uxland/primary-shell 5.4.6 → 5.4.7

package/dist/primary/shell/src/UI/components/communication-action-menu/communication-action-menu.d.ts

@@ -0,0 +1,16 @@
+import { PropertyValues } from 'lit';
+import { IRegion } from '@uxland/regions';
+
+declare const CommunicationActionMenu_base: any;
+export declare class CommunicationActionMenu extends CommunicationActionMenu_base {
+    constructor(icon: string, label: string);
+    showText: boolean;
+    comminucationSidenavRegion: IRegion | undefined;
+    static styles: import('lit').CSSResult;
+    firstUpdated(_changedProps: PropertyValues<CommunicationActionMenu>): void;
+    observeHostResize(): void;
+    render(): import('lit').TemplateResult<1>;
+    icon: string;
+    label: string;
+}
+export {};

package/dist/primary/shell/src/UI/components/communication-action-menu/template.d.ts

@@ -0,0 +1,3 @@
+import { CommunicationActionMenu } from './communication-action-menu';
+
+export declare const template: (props: CommunicationActionMenu) => import('lit').TemplateResult<1>;

package/dist/primary/shell/src/UI/internal-views/upper-nav-views.d.ts

@@ -1 +1,3 @@
 export declare const registerUpperNavMenuViews: () => void;
+export declare const registerCommunicationNavMenuItem: () => void;
+export declare const registerCommunicationMenuActions: () => void;

package/dist/primary/shell/src/UI/shared-components/quick-action-item/quick-action-item.d.ts

@@ -0,0 +1,9 @@
+import { LitElement } from 'lit';
+
+export declare class QuickActionItem extends LitElement {
+    constructor(icon: string, label: string, callbackFn: () => void);
+    render(): import('lit').TemplateResult<1>;
+    icon: string;
+    label: string;
+    callbackFn: () => void;
+}

package/dist/primary/shell/src/UI/shared-components/quick-action-item/template.d.ts

@@ -0,0 +1,3 @@
+import { QuickActionItem } from './quick-action-item';
+
+export declare const template: (props: QuickActionItem) => import('lit').TemplateResult<1>;

package/dist/primary/shell/src/api/region-manager/regions.d.ts

@@ -6,6 +6,7 @@ export declare const shellRegions: {
     navigationLowerLeftMenu: string;
     quickActions: string;
     floating: string;
+    communicationSidenav: string;
 };
 export declare const clinicalMonitoringRegions: {
     sidebar: string;

package/package.json

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

package/src/UI/components/bootstrapper.ts

@@ -6,6 +6,7 @@ import { PrimariaShellHeader } from "./primaria-shell/shell-header/shell-header"
 import { PocEventsEcap } from "./poc-events-ecap/poc-events-ecap";
 import { FinalizeVisitButton } from "../../features/visit/finalize-visit/component/finalize-visit-button";
 import { PrimariaAccordion } from "./primaria-accordion/primaria-accordion";
+import { CommunicationActionMenu } from "./communication-action-menu/communication-action-menu";
 
 export const useComponents = () => {
   //@ts-ignore
@@ -15,6 +16,7 @@ export const useComponents = () => {
   customElement("primaria-error-view")(PrimariaErrorView);
   customElement("quick-actions-menu")(QuickActionsMenu);
   customElement("finalize-visit-button")(FinalizeVisitButton);
+  customElement("communication-action-menu")(CommunicationActionMenu);
   //@ts-ignore
   customElement("poc-events-ecap")(PocEventsEcap);
   customElement("primaria-accordion")(PrimariaAccordion);

package/src/UI/components/communication-action-menu/communication-action-menu.ts

@@ -0,0 +1,48 @@
+import { LitElement, html, css, unsafeCSS, PropertyValues } from "lit";
+import { template } from "./template";
+import { property, state } from "lit/decorators.js";
+import { shellRegions } from "../../../api/region-manager/regions";
+import { IRegion, region } from "@uxland/regions";
+import { PrimariaRegionHost } from "../../../api/api";
+import styles from "./styles.css?inline";
+
+export class CommunicationActionMenu extends PrimariaRegionHost(LitElement) {
+  constructor(icon: string, label: string) {
+    super();
+    this.icon = icon;
+    this.label = label;
+  }
+
+  @state() showText = false;
+
+  @region({ targetId: "communication-sidenav-region-container", name: shellRegions.communicationSidenav })
+  comminucationSidenavRegion: IRegion | undefined;
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  firstUpdated(_changedProps: PropertyValues<CommunicationActionMenu>) {
+    super.firstUpdated(_changedProps);
+    this.observeHostResize();
+  }
+
+  observeHostResize() {
+    const parentElement = this.parentElement;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const width = entry.target.clientWidth;
+        this.showText = width > 100;
+      }
+    });
+
+    observer.observe(parentElement as HTMLElement);
+  }
+
+  render() {
+    return html`${template(this)}`;
+  }
+
+  @property({ type: String }) icon = "";
+  @property({ type: String }) label = "";
+}

package/src/UI/components/communication-action-menu/styles.css

@@ -0,0 +1,25 @@
+.item {
+  display: flex;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 8px;
+  justify-content: center;
+  transition: background-color 0.3s ease;
+  &[expanded] {
+    justify-content: space-between;
+  }
+  &:hover {
+    background-color: var(--color-primary-900);
+    color: white;
+  }
+  .icon-label {
+    display: flex;
+    gap: 8px;
+    transition: background-color 0.3s;
+  }
+}
+
+.item.active{
+  outline: 2px solid white;
+  outline-offset: -2px;
+}

package/src/UI/components/communication-action-menu/template.ts

@@ -0,0 +1,23 @@
+import { html, nothing } from "lit";
+import { CommunicationActionMenu } from "./communication-action-menu";
+
+export const template = (props: CommunicationActionMenu) => {
+  return html`
+    <div class="item" ?expanded=${props.showText}>
+      <div class="icon-label">
+        <dss-icon icon=${props.icon} size="md"></dss-icon>
+        ${props.showText ? html`<span>${props.label}</span>` : ""}
+        ${
+          !props.showText
+            ? html`
+          <dss-tooltip position="right">
+            ${props.label}
+          </dss-tooltip>`
+            : nothing
+        }
+        <dss-action-menu id="communication-sidenav-region-container" slot="content" >
+        </dss-action-menu>
+      </div>
+    </div>
+  `;
+};

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

@@ -90,9 +90,6 @@
         gap: 4px;
       }
     }
-    #quick-actions-region-container {
-      width: 100%;
-    }
     &[expanded] {
       width: 252px;
       align-items: flex-start;

package/src/UI/internal-views/handle-views.ts

@@ -1,6 +1,6 @@
 import { registerPDFVisorMainView } from "../../api/pdf-viewer-manager/handle-views";
 import { registerLowerNavMenuViews } from "./lower-nav-menu-views";
-import { registerUpperNavMenuViews } from "./upper-nav-views";
+import { registerCommunicationMenuActions, registerCommunicationNavMenuItem, registerUpperNavMenuViews } from "./upper-nav-views";
 
 const registerMainViews = () => {
   registerPDFVisorMainView();
@@ -8,6 +8,9 @@ const registerMainViews = () => {
 
 export const useInternalViews = () => {
   registerMainViews();
+  registerCommunicationNavMenuItem();
   registerUpperNavMenuViews();
   registerLowerNavMenuViews();
+
+  registerCommunicationMenuActions();
 };

package/src/UI/internal-views/upper-nav-views.ts

@@ -3,6 +3,8 @@ import { shellRegions } from "../../api/region-manager/regions";
 import { ExitShell } from "../../features/exit/request";
 import { getPatientCip } from "../../features/get-patient-cip/action";
 import { navigateToEcapWithoutClosingWithCip } from "../../features/navigate-to-ecap/navigate-without-closing-and-with-cip";
+import { CommunicationActionMenu } from "../components/communication-action-menu/communication-action-menu";
+import { QuickActionItem } from "../shared-components/quick-action-item/quick-action-item";
 import { PrimariaNavItem } from "../shared-components/primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "../shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu";
 
@@ -201,34 +203,6 @@ const upperNavMenuItems: MenuItemConfig[] = [
     sortHint: "0100",
     callbackFn: () => navigateToEcapWithoutClosingWithCip("REV_IT"),
   },
-  {
-    id: "communication",
-    icon: "3p",
-    label: "Comunicació",
-    type: "tree",
-    sortHint: "0120",
-    actionMenuItems: [
-      {
-        icon: "open_in_new",
-        label: "SMS",
-        callbackFn: async () => {
-          const CIP = await getPatientCip(shellApi);
-          shellApi.ecapEventManager.publish("MISSATGES_DEV", "NO_TANCAR", {
-            CIP: CIP || "",
-            TipusMissatge: "SMS",
-          });
-        },
-      },
-      { icon: "open_in_new", label: "eConsulta", callbackFn: () => {} },
-      { icon: "open_in_new", label: "Mail", callbackFn: () => {} },
-      {
-        icon: "open_in_new",
-        label: "Veu IP",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("VOIP"),
-      },
-      { icon: "open_in_new", label: "Videoconsulta", callbackFn: () => {} },
-    ],
-  },
   {
     id: "visits",
     icon: "event",
@@ -271,3 +245,59 @@ export const registerUpperNavMenuViews = () => {
     });
   }
 };
+
+export const registerCommunicationNavMenuItem = () => {
+  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
+    id: "communication",
+    sortHint: "0120",
+    factory: () => {
+      const menuItem = new CommunicationActionMenu("3p", "Comunicació");
+
+      return Promise.resolve(menuItem);
+    },
+  });
+};
+
+export const registerCommunicationMenuActions = () => {
+  const communicationItems = [
+    {
+      id: "1",
+      sortHint: "0010",
+      icon: "open_in_new",
+      label: "SMS",
+      callbackFn: async () => {
+        const CIP = await getPatientCip(shellApi);
+        shellApi.ecapEventManager.publish("MISSATGES_DEV", "NO_TANCAR", {
+          CIP: CIP || "",
+          TipusMissatge: "SMS",
+        });
+      },
+    },
+    { id: "2", sortHint: "0020", icon: "open_in_new", label: "eConsulta", callbackFn: () => {} },
+    { id: "3", icon: "open_in_new", label: "Mail", callbackFn: () => {} },
+    {
+      id: "4",
+      sortHint: "0030",
+      icon: "open_in_new",
+      label: "Veu IP",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("VOIP"),
+    },
+    { id: "5", sortHint: "0040", icon: "open_in_new", label: "Videoconsulta", callbackFn: () => {} },
+  ];
+  for (const item of communicationItems) {
+    shellApi.regionManager.registerView(shellRegions.communicationSidenav, {
+      id: item.id,
+      sortHint: item.sortHint,
+      factory: () => {
+        const menuItem = new PrimariaNavItem({
+          icon: item.icon,
+          label: item.label,
+          callbackFn: item.callbackFn,
+        });
+
+        const menuTest = new QuickActionItem(item.icon, item.label, item.callbackFn);
+        return Promise.resolve(menuTest);
+      },
+    });
+  }
+};

package/src/UI/shared-components/quick-action-item/quick-action-item.ts

@@ -0,0 +1,21 @@
+import { LitElement, html } from "lit";
+import { template } from "./template";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("quick-action-item")
+export class QuickActionItem extends LitElement {
+  constructor(icon: string, label: string, callbackFn: () => void) {
+    super();
+    this.icon = icon;
+    this.label = label;
+    this.callbackFn = callbackFn;
+  }
+
+  render() {
+    return html`${template(this)}`;
+  }
+
+  @property({ type: String }) icon = "";
+  @property({ type: String }) label = "";
+  @property({ attribute: false }) callbackFn = () => {};
+}

package/src/UI/shared-components/quick-action-item/template.ts

@@ -0,0 +1,8 @@
+import { html } from "lit";
+import { QuickActionItem } from "./quick-action-item";
+
+export const template = (props: QuickActionItem) => {
+  return html`
+    <dss-action-menu-item @click=${props.callbackFn} notificationsstate="error" rightIcon=${props.icon} label=${props.label}></dss-action-menu-item>
+  `;
+};

package/src/api/region-manager/regions.ts

@@ -6,6 +6,7 @@ export const shellRegions = {
   navigationLowerLeftMenu: "navigation-lower-left-menu",
   quickActions: "quick-actions-region",
   floating: "floating-region",
+  communicationSidenav: "communication-sidenav-region",
 };
 
 export const clinicalMonitoringRegions = {