@uxland/primary-shell 5.2.1 → 5.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "5.2.1",
+  "version": "5.3.1",
   "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/features/clinical-monitoring/bootstrapper.ts

@@ -30,7 +30,7 @@ export const useClinicalMonitoring = (api: PrimariaApi) => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "000200",
+    sortHint: "0020",
   });
 };
 

package/src/handle-views.ts

@@ -21,7 +21,7 @@ const registerUpperNavMenuViews = () => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "000100",
+    sortHint: "0010",
   });
 
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {
@@ -68,7 +68,7 @@ const registerUpperNavMenuViews = () => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "000400",
+    sortHint: "0040",
   });
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {
     id: "unique-petition",
@@ -109,7 +109,7 @@ const registerUpperNavMenuViews = () => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "000500",
+    sortHint: "0050",
   });
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {
     id: "results-reports",
@@ -136,7 +136,7 @@ const registerUpperNavMenuViews = () => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "000700",
+    sortHint: "0070",
   });
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {
     id: "communication",
@@ -182,7 +182,7 @@ const registerUpperNavMenuViews = () => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "001200",
+    sortHint: "0120",
   });
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {
     id: "visits",
@@ -196,7 +196,7 @@ const registerUpperNavMenuViews = () => {
       });
       return Promise.resolve(menuItem);
     },
-    sortHint: "001300",
+    sortHint: "0130",
   });
 
   shellApi.regionManager.registerView(shellRegions.navigationMenu, {

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 = (