@uxland/primary-shell 5.2.0 → 5.3.0

package/dist/primary/shell/src/UI/shared-components/primaria-character-limit-badge/primaria-character-limit-badge.d.ts

@@ -0,0 +1,9 @@
+import { LitElement, nothing } from 'lit';
+
+export declare class PrimariaCharacterLimitBadge extends LitElement {
+    characterCount: number;
+    characterLimit: number;
+    label: string;
+    static styles: import('lit').CSSResult;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -25,29 +25,30 @@
     "url": "https://github.com/uxland/harmonix/issues"
   },
   "dependencies": {
+    "@lit-labs/virtualizer": "^2.1.0",
     "@uxland/harmonix": "^1.0.5",
     "@uxland/harmonix-adapters": "^1.0.1"
   },
   "devDependencies": {
-    "@reduxjs/toolkit": "^2.6.1",
-    "axios": "^1.7.2",
-    "date-fns": "^3.6.0",
-    "ramda": "^0.30.1",
     "@primaria/plugins-core": "^1.0.14",
+    "@reduxjs/toolkit": "^2.6.1",
+    "@salut/design-system-salut": "../../design-system-salut-2.4.0.tgz",
+    "@types/react": "^19.0.12",
     "@uxland/lit-utilities": "^1.0.0",
     "@uxland/localization": "^1.0.3",
     "@uxland/regions": "^1.0.0",
     "@uxland/utilities": "^1.0.5",
+    "axios": "^1.7.2",
     "axios-mock-adapter": "^2.0.0",
+    "date-fns": "^3.6.0",
     "inversify": "^6.0.2",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@types/react": "^19.0.12",
     "inversify-inject-decorators": "^3.1.0",
-    "@salut/design-system-salut": "../../design-system-salut-2.4.0.tgz",
     "jwt-decode": "^4.0.0",
     "lit": "^3.1.0",
     "mediatr-ts": "^1.2.1",
+    "ramda": "^0.30.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "reflect-metadata": "^0.2.2",
     "tslib": "^2.3.0",
     "uxl-quill": "^1.0.1",

package/src/UI/shared-components/bootstrapper.ts

@@ -3,10 +3,12 @@ import { PrimariaContentSwitcher } from "./primaria-content-switcher/primaria-co
 import { PrimariaNavItem } from "./primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "./primaria-nav-tree-menu/primaria-nav-tree-menu";
 import { PrimariaRichTextEditor } from "./primaria-text-editor/primaria-rich-text-editor";
+import { PrimariaCharacterLimitBadge } from "./primaria-character-limit-badge/primaria-character-limit-badge";
 
 export const useSharedUI = () => {
   customElement("primaria-content-switcher")(PrimariaContentSwitcher);
   customElement("primaria-nav-item")(PrimariaNavItem);
   customElement("primaria-rich-text-editor")(PrimariaRichTextEditor);
   customElement("primaria-nav-tree-menu")(PrimariaNavTreeMenu);
+  customElement("primaria-character-limit-badge")(PrimariaCharacterLimitBadge);
 };

package/src/UI/shared-components/primaria-character-limit-badge/primaria-character-limit-badge.ts

@@ -0,0 +1,29 @@
+import { LitElement, html, nothing, css, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import styles from "./styles.css?inline";
+
+export class PrimariaCharacterLimitBadge extends LitElement {
+  @property({ type: Number }) characterCount = 0;
+  @property({ type: Number }) characterLimit = 0;
+  @property({ type: String }) label = "";
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  render() {
+    if (this.characterCount > this.characterLimit) {
+      return html`
+        <dss-badge
+          class="limit-badge"
+          icon="report"
+          size="md"
+          state="alert"
+          text="${this.label} ${this.characterCount}/${this.characterLimit}"
+          outlined
+        ></dss-badge>
+      `;
+    }
+    return nothing;
+  }
+}

package/src/UI/shared-components/primaria-character-limit-badge/styles.css

@@ -0,0 +1,8 @@
+:host{
+  margin: 0 auto;
+}
+
+.limit-badge {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}

package/src/handle-views.ts

@@ -5,7 +5,6 @@ import { pocTestEventsId } from "./constants";
 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 { PocEventsEcap } from "./UI/components/poc-events-ecap/poc-events-ecap";
 import { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
 import { PrimariaNavTreeMenu } from "./UI/shared-components/primaria-nav-tree-menu/primaria-nav-tree-menu";
 
@@ -116,7 +115,7 @@ const registerUpperNavMenuViews = () => {
     id: "results-reports",
     factory: () => {
       const menuItem = new PrimariaNavTreeMenu({
-        icon: "folder",
+        icon: "folder_shared",
         label: "Documents",
         actionMenuItems: [
           {
@@ -189,7 +188,7 @@ const registerUpperNavMenuViews = () => {
     id: "visits",
     factory: () => {
       const menuItem = new PrimariaNavItem({
-        icon: "today",
+        icon: "event",
         label: "Visites",
         callbackFn: async (): Promise<void> => {
           navigateToEcapWithoutClosingWithCip("CONSULTA_VISITES");
@@ -199,19 +198,6 @@ const registerUpperNavMenuViews = () => {
     },
     sortHint: "001300",
   });
-  shellApi.regionManager.registerView(shellRegions.navigationMenu, {
-    id: pocTestEventsId,
-    factory: () => {
-      const menuItem = new PrimariaNavItem({
-        icon: "bolt",
-        label: "Prova Events ECAP",
-        callbackFn: () => {
-          shellApi.regionManager.activateMainView(pocTestEventsId);
-        },
-      });
-      return Promise.resolve(menuItem);
-    },
-  });
 
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {
     id: "it",
@@ -259,14 +245,6 @@ const registerLowerNavMenuViews = () => {
 };
 
 const registerMainViews = () => {
-  shellApi.regionManager.registerMainView({
-    id: pocTestEventsId,
-    factory: () => {
-      const mainItem = new PocEventsEcap();
-      return Promise.resolve(mainItem as unknown as HTMLElement);
-    },
-  });
-
   registerPDFVisorMainView();
 };
 

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/styles.css

@@ -3,92 +3,97 @@
   height: 100%;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+.virtualizer {
+  height: 100%;
   padding-inline: 16px;
-  padding-top: 16px;
+}
+
+.container {
   min-height: 1px;
   height: 100%;
-  overflow-y: auto;
-  position: relative;
 
-  .visit {
+}
+
+.visit:first-child{
+  margin-top: var(--dss-spacing-md)
+}
+
+.visit {
+  width: calc(100% - var(--dss-spacing-md) - var(--dss-spacing-md));
+  display: flex;
+  flex-direction: column;
+  gap: var(--dss-spacing-md);
+  background-color: white;
+  border-radius: var(--dss-radius-sm);
+  padding: var(--dss-spacing-sm);
+  margin-bottom: var(--dss-spacing-md);
+  
+  .visit__header {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
     gap: 16px;
-    background-color: white;
-    border-radius: var(--dss-radius-sm);
-    padding: var(--dss-spacing-sm);
-    
-    .visit__header {
+    .title {
+      flex: 1;
+      font-size: 14px;
+      line-height: 24px;
       display: flex;
       flex-direction: row;
-      align-items: center;
-      gap: 16px;
-      .title {
-        flex: 1;
-        font-size: 14px;
-        line-height: 24px;
-        display: flex;
-        flex-direction: row;
-        gap: 12px;
-        color: var(--color-neutral-800);
-      }
-      .title-date {
-        font-weight: 700;
-      }
-      .title-description {
-        font-weight: 600;
-        display: flex;
-        flex-direction: row;
-        gap: 4px;
-      }
-      .highlight {
-        background-color: yellow;
-        font-weight: bold;
-      }
+      gap: 12px;
+      color: var(--color-neutral-800);
+    }
+    .title-date {
+      font-weight: 700;
     }
-    .visit__items {
+    .title-description {
+      font-weight: 600;
       display: flex;
-      flex-direction: column;
-      gap: 16px;
-        .item {
-          border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
-          &:last-of-type {
-            border: none;
-          }
+      flex-direction: row;
+      gap: 4px;
+    }
+    .highlight {
+      background-color: yellow;
+      font-weight: bold;
+    }
+  }
+  .visit__items {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+      .item {
+        border-bottom: var(--dss-border-width-sm) solid va(--color-neutral-200);
+        &:last-of-type {
+          border: none;
         }
+      }
+  }
+  .diagnostics {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    .diagnostics__header {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 16px;
     }
-    .diagnostics {
+    .diagnostics__items {
       display: flex;
       flex-direction: column;
-      gap: 16px;
-      .diagnostics__header {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 16px;
-      }
-      .diagnostics__items {
-        display: flex;
-        flex-direction: column;
-
-        .item {
-          border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
-          &:last-of-type {
-            border: none;
-          }
+      .item {
+        border-bottom: var(--dss-border-width-sm) solid va(--color-neutral-200);
+        &:last-of-type {
+          border: none;
         }
       }
     }
   }
-  .feedback {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
 }
+.feedback {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+

package/src/internal-plugins/activity-history/activity-history-item/list/UI/timeline/template.ts

@@ -13,50 +13,60 @@ import {
   IActivityHistorySubGroup,
 } from "../../../domain/model";
 import { translate } from "../../../../localization";
+import { virtualize } from "@lit-labs/virtualizer/virtualize.js";
 
 export const template = (props: ActivityHistoryTimeline) => {
   if (!props._hasUpdatedOnce) {
     return html`<div class="container"></div>`;
   }
-  return html`<div class="container">
+  return html`
+  <div class="container">
     ${
-      props.historyGroups && props.historyGroups.length > 0
-        ? repeat(props.historyGroups, (itemGroup: IActivityHistoryGroup) => {
-            return html`
-          <div class="visit" data-date=${ifDefined(itemGroup.items[0]?.date || itemGroup.subGroups[0]?.items[0]?.date)}>
-            ${visitHeaderTemplate(props, itemGroup.items[0] || itemGroup.subGroups[0]?.items[0])}
-            <div class="visit__items">
-              ${repeat(
-                itemGroup.items,
-                (item) => item.id,
-                (item: IActivityHistoryItemWithComponent) =>
-                  html`<div class="item">${item.component}</div> `,
-              )}
-              ${repeat(
-                itemGroup.subGroups,
-                (subGroup: IActivityHistorySubGroup) =>
-                  html`
-                <div class="diagnostics">
-                      ${diagnosticHeaderTemplate(subGroup.items[0])}
-                      <div class="diagnostics__items">${repeat(
-                        subGroup.items,
-                        (item) => item.id,
-                        (item: IActivityHistoryItemWithComponent) =>
-                          html`<div class="item">${item?.component}</div>  `,
-                      )}</div>
-                    </div>
-                `,
-              )}
-            </div>
+      props.historyGroups?.length > 0
+        ? html`
+          <div class="virtualizer">
+            ${virtualize({
+              items: props.historyGroups,
+              renderItem: (itemGroup: IActivityHistoryGroup) => html`
+                <div class="visit" data-date=${ifDefined(itemGroup.items[0]?.date || itemGroup.subGroups[0]?.items[0]?.date)}>
+                  ${visitHeaderTemplate(props, itemGroup.items[0] || itemGroup.subGroups[0]?.items[0])}
+                  <div class="visit__items">
+                    ${repeat(
+                      itemGroup.items,
+                      (item) => item.id,
+                      (item: IActivityHistoryItemWithComponent) =>
+                        html`<div class="item">${item.component}</div> `,
+                    )}
+                    ${repeat(
+                      itemGroup.subGroups,
+                      (subGroup: IActivityHistorySubGroup) => html`
+                        <div class="diagnostics">
+                          ${diagnosticHeaderTemplate(subGroup.items[0])}
+                          <div class="diagnostics__items">
+                            ${repeat(
+                              subGroup.items,
+                              (item) => item.id,
+                              (item: IActivityHistoryItemWithComponent) =>
+                                html`<div class="item">${item?.component}</div>`,
+                            )}
+                          </div>
+                        </div>
+                      `,
+                    )}
+                  </div>
+                </div>
+              `,
+              scroller: true,
+            })}
           </div>
-          `;
-          })
+        `
         : !props.isAnyCollectionLoadingWithoutAnyLoaded &&
             !props.isSomeCollectionLoadedAndOtherLoading
           ? html`<dss-user-feedback class="feedback" imagesrc=${notFound} title=${translate("noResults")}></dss-user-feedback>`
           : nothing
     }
-  </div>   `;
+  </div>
+`;
 };
 
 const visitHeaderTemplate = (