@uxland/primary-shell 7.18.0 → 7.19.0

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

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

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

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

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

@@ -1,2 +1,4 @@
+export declare const registerClinicalPathwaysNavMenu: () => void;
 export declare const registerDoctorCommunicationMenuActions: () => void;
+export declare const registerDoctorClinicalPathwaysMenuActions: () => void;
 export declare const registerDoctorNavMenuViews: () => void;

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

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

package/package.json

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

package/src/UI/components/bootstrapper.ts

@@ -7,6 +7,7 @@ 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";
+import { ClinicalPathwaysActionMenu } from "./clinical-pathways-action-menu/clinical-pathways-action-menu";
 import { HeaderDivider } from "./primaria-shell/shell-header/header-divider/header-divider";
 
 export const useComponents = () => {
@@ -21,6 +22,8 @@ export const useComponents = () => {
   //@ts-ignore
   customElement("communication-action-menu")(CommunicationActionMenu);
   //@ts-ignore
+  customElement("clinical-pathways-action-menu")(ClinicalPathwaysActionMenu);
+  //@ts-ignore
   customElement("poc-events-ecap")(PocEventsEcap);
   customElement("primaria-accordion")(PrimariaAccordion);
 };

package/src/UI/components/clinical-pathways-action-menu/clinical-pathways-action-menu.ts

@@ -0,0 +1,47 @@
+import { LitElement, html, css, unsafeCSS, PropertyValues } from "lit";
+import { template } from "./template";
+import { property, state } from "lit/decorators.js";
+import { IRegion, region } from "@uxland/regions";
+import { PrimariaRegionHost, shellApi } from "../../../api/api";
+import styles from "./styles.css?inline";
+
+export class ClinicalPathwaysActionMenu extends PrimariaRegionHost(LitElement) {
+  constructor(icon: string, label: string) {
+    super();
+    this.icon = icon;
+    this.label = label;
+  }
+
+  @state() showText = false;
+
+  @region({ targetId: "clinical-pathways-sidenav-region-container", name: shellApi.regionManager.regions.shell.clinicalPathwaysSidenav })
+  clinicalPathwaysSidenavRegion: IRegion | undefined;
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  firstUpdated(_changedProps: PropertyValues<ClinicalPathwaysActionMenu>) {
+    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/clinical-pathways-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/clinical-pathways-action-menu/template.ts

@@ -0,0 +1,24 @@
+import { html, nothing } from "lit";
+import { ClinicalPathwaysActionMenu } from "./clinical-pathways-action-menu";
+
+export const template = (props: ClinicalPathwaysActionMenu) => {
+  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
+        }
+      </div>
+      <dss-action-menu id="clinical-pathways-sidenav-region-container" slot="content" >
+      </dss-action-menu>
+      ${props.showText ? html`<dss-icon icon="chevron_right" size="md"></dss-icon>` : nothing}
+    </div>
+  `;
+};

package/src/UI/internal-views/common-nav-menu.ts

@@ -73,4 +73,4 @@ export const registerCommunicationNavMenu = () => {
       return Promise.resolve(menuItem as any);
     },
   });
-};
+};

package/src/UI/internal-views/doctor-nav-menu.ts

@@ -3,7 +3,12 @@ import { navigateToEcapWithoutClosingWithCip } from "../../features/navigate-to-
 import { GetVisitId } from "../../features/visit/get-visit-id/request";
 import { shellApi } from "../../api/api";
 import { QuickActionItem } from "../shared-components/quick-action-item/quick-action-item";
-import { MenuItemConfig, registerNavMenuViews, registerCommunicationNavMenu } from "./common-nav-menu";
+import { ClinicalPathwaysActionMenu } from "../components/clinical-pathways-action-menu/clinical-pathways-action-menu";
+import {
+  MenuItemConfig,
+  registerNavMenuViews,
+  registerCommunicationNavMenu,
+} from "./common-nav-menu";
 
 const doctorNavMenuItems: MenuItemConfig[] = [
   {
@@ -14,45 +19,6 @@ const doctorNavMenuItems: MenuItemConfig[] = [
     sortHint: "0030",
     callbackFn: () => navigateToEcapWithoutClosingWithCip("IA_DEV"),
   },
-  {
-    id: "processes",
-    icon: "account_tree",
-    label: "Vies clíniques",
-    type: "tree",
-    sortHint: "0040",
-    actionMenuItems: [
-      {
-        icon: "open_in_new",
-        label: "Proces d'atenció - ARES",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("PROCES_ATENCIO"),
-      },
-      {
-        icon: "open_in_new",
-        label: "Nen sa",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("NEN_SA"),
-      },
-      {
-        icon: "open_in_new",
-        label: "ASSIR",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("NAVEGACIO_ASSIR"),
-      },
-      {
-        icon: "open_in_new",
-        label: "Odontologia",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("ODONTOLOGO"),
-      },
-      {
-        icon: "open_in_new",
-        label: "Situació d'especial cura",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("SIT_ESPEC_CURA_DEV"),
-      },
-      {
-        icon: "open_in_new",
-        label: "Valoració social",
-        callbackFn: () => navigateToEcapWithoutClosingWithCip("VALORACIO_SOCIAL"),
-      },
-    ],
-  },
   {
     id: "unique-petition",
     icon: "playlist_add",
@@ -181,6 +147,18 @@ const doctorNavMenuItems: MenuItemConfig[] = [
   },
 ];
 
+export const registerClinicalPathwaysNavMenu = () => {
+  shellApi.regionManager.registerView(shellApi.regionManager.regions.shell.navigationMenu, {
+    id: "processes",
+    sortHint: "0040",
+    factory: () => {
+      const menuItem = new ClinicalPathwaysActionMenu("account_tree", "Vies clíniques");
+
+      return Promise.resolve(menuItem as any);
+    },
+  });
+};
+
 export const registerDoctorCommunicationMenuActions = () => {
   const communicationItems = [
     {
@@ -244,8 +222,67 @@ export const registerDoctorCommunicationMenuActions = () => {
   }
 };
 
+export const registerDoctorClinicalPathwaysMenuActions = () => {
+  const clinicalPathwaysItems = [
+    {
+      id: "1",
+      sortHint: "0010",
+      icon: "open_in_new",
+      label: "Proces d'atenció - ARES",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("PROCES_ATENCIO"),
+    },
+    {
+      id: "3",
+      sortHint: "0030",
+      icon: "open_in_new",
+      label: "Nen sa",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("NEN_SA"),
+    },
+    {
+      id: "4",
+      sortHint: "0040",
+      icon: "open_in_new",
+      label: "ASSIR",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("NAVEGACIO_ASSIR"),
+    },
+    {
+      id: "5",
+      sortHint: "0050",
+      icon: "open_in_new",
+      label: "Odontologia",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("ODONTOLOGO"),
+    },
+    {
+      id: "6",
+      sortHint: "0060",
+      icon: "open_in_new",
+      label: "Situació d'especial cura",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("SIT_ESPEC_CURA_DEV"),
+    },
+    {
+      id: "7",
+      sortHint: "0070",
+      icon: "open_in_new",
+      label: "Valoració social",
+      callbackFn: () => navigateToEcapWithoutClosingWithCip("VALORACIO_SOCIAL"),
+    },
+  ];
+  for (const item of clinicalPathwaysItems) {
+    shellApi.regionManager.registerView(shellApi.regionManager.regions.shell.clinicalPathwaysSidenav, {
+      id: item.id,
+      sortHint: item.sortHint,
+      factory: () => {
+        const menuTest = new QuickActionItem(item.icon, item.label, item.callbackFn);
+        return Promise.resolve(menuTest as any);
+      },
+    });
+  }
+};
+
 export const registerDoctorNavMenuViews = () => {
   registerCommunicationNavMenu();
   registerDoctorCommunicationMenuActions();
+  registerClinicalPathwaysNavMenu();
+  registerDoctorClinicalPathwaysMenuActions();
   registerNavMenuViews(doctorNavMenuItems);
-};
+};

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

@@ -7,6 +7,7 @@ export const shellRegions = {
   quickActions: "quick-actions-region",
   floating: "floating-region",
   communicationSidenav: "communication-sidenav-region",
+  clinicalPathwaysSidenav: "clinical-pathways-sidenav-region",
   importData: "import-data-region",
 };