@uxland/primary-shell 6.0.4 → 6.0.6

package/dist/internal-plugins/activity-history/activity-history-item/filter/up-filters/handle-add-up-options-from-item.d.ts

@@ -1,4 +1,13 @@
 import { Store } from '@reduxjs/toolkit';
 import { IActivityHistoryItem } from '../../domain/model';
 
+export declare const getUpFilter: (items: IActivityHistoryItem[]) => {
+    id: string;
+    title: string;
+    values: {
+        label: any;
+        value: any;
+    }[];
+    enabledValues: never[];
+} | undefined;
 export declare const handleAddUpFilter: (items: IActivityHistoryItem[], store: Store) => void;

package/dist/internal-plugins/activity-history/activity-history-item/filter/up-filters/handle-add-up-options-from-item.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/internal-plugins/activity-history/activity-history-item/list/UI/timeline/virtual-scroller.d.ts

@@ -0,0 +1,39 @@
+export interface VirtualScrollerOptions<T> {
+    items: T[];
+    estimatedItemHeight: number;
+    bufferSize: number;
+}
+export interface VirtualScrollerState {
+    viewportHeight: number;
+    scrollTop: number;
+    totalHeight: number;
+    visibleRange: {
+        start: number;
+        end: number;
+    };
+    containerOffset: number;
+    visibleItems: any[];
+}
+export declare class VirtualScroller<T = any> {
+    private _itemHeights;
+    private _itemOffsets;
+    private _totalHeight;
+    private _viewportHeight;
+    private _scrollTop;
+    private _visibleRange;
+    private _options;
+    private _viewport?;
+    private _content?;
+    private _resizeObserver?;
+    private _isScrolling;
+    private _scrollTimeout?;
+    constructor(options: VirtualScrollerOptions<T>);
+    private _initializeHeights;
+    setup(viewport: HTMLElement, content: HTMLElement, onStateChange: (state: VirtualScrollerState) => void): () => void;
+    updateItems(items: T[]): void;
+    private _measureActualHeights;
+    private _updateVisibleRange;
+    scrollToIndex(index: number, behavior?: ScrollBehavior): void;
+    getState(): VirtualScrollerState;
+    findClosestIndex<K>(getValue: (item: T) => K, targetValue: K, compare: (a: K, b: K) => number): number;
+}

package/package.json

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

package/src/internal-plugins/activity-history/activity-history-item/filter/up-filters/handle-add-up-options-from-item.test.ts

@@ -0,0 +1,237 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { getUpFilter } from "./handle-add-up-options-from-item";
+
+// Mock de las dependencias
+const mockMapArrayToLabelValue = vi.fn((arr, descField, idField) => 
+  arr.map(item => ({ 
+    label: item[descField] || item[idField], // Usa el ID como fallback si description está vacía
+    value: item[idField] 
+  }))
+);
+
+vi.mock('./path/to/your/utils', () => ({
+  mapArrayToLabelValue: mockMapArrayToLabelValue,
+}));
+
+const upFilterId = 'history-up'; // Define el valor que uses en tu código
+
+describe('getUpFilter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  it('debe retornar filtro cuando hay UPs válidos con ID', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          { id: 'up1', description: 'UP 1' },
+          { id: 'up2', description: 'UP 2' },
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [
+        { label: 'UP 1', value: 'up1' },
+        { label: 'UP 2', value: 'up2' },
+      ],
+      enabledValues: [],
+    });
+  });
+
+  it('debe permitir UPs con description vacía pero ID válido', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          { id: 'up1', description: '' },
+          { id: 'up2', description: null },
+          { id: 'up3', description: undefined },
+          { id: 'up4', description: 'UP 4' },
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [
+        { label: 'up1', value: 'up1' },
+        { label: 'up2', value: 'up2' },
+        { label: 'up3', value: 'up3' },
+        { label: 'UP 4', value: 'up4' },
+      ],
+      enabledValues: [],
+    });
+  });
+
+  it('no debe incluir UPs con ID vacío, null, undefined o solo espacios', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          { id: '', description: 'UP con ID vacío' },
+          { id: null, description: 'UP con ID null' },
+          { id: undefined, description: 'UP con ID undefined' },
+          { id: '   ', description: 'UP con ID solo espacios' },
+          { id: '\t\n  ', description: 'UP con ID espacios y tabs' },
+          { id: 'up1', description: 'UP válido' },
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [{ label: 'UP válido', value: 'up1' }],
+      enabledValues: [],
+    });
+  });
+
+  it('debe filtrar UPs duplicados por ID', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          { id: 'up1', description: 'UP 1 - Primera aparición' },
+          { id: 'up2', description: 'UP 2' },
+        ],
+      },
+      {
+        id: '2',
+        up: [
+          { id: 'up1', description: 'UP 1 - Duplicado' },
+          { id: 'up3', description: 'UP 3' },
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [
+        { label: 'UP 1 - Primera aparición', value: 'up1' },
+        { label: 'UP 2', value: 'up2' },
+        { label: 'UP 3', value: 'up3' },
+      ],
+      enabledValues: [],
+    });
+  });
+
+  it('debe manejar items sin propiedad up', () => {
+    const items = [
+      { id: '1' },
+      { id: '2', up: null },
+      { id: '3', up: undefined },
+      { id: '4', up: [{ id: 'up1', description: 'UP 1' }] },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [{ label: 'UP 1', value: 'up1' }],
+      enabledValues: [],
+    });
+  });
+
+  it('debe manejar array up vacío', () => {
+    const items = [
+      { id: '1', up: [] },
+      { id: '2', up: [{ id: 'up1', description: 'UP 1' }] },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [{ label: 'UP 1', value: 'up1' }],
+      enabledValues: [],
+    });
+  });
+
+  it('debe retornar undefined cuando no hay UPs válidos', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          { id: '', description: 'UP con ID vacío' },
+          { id: null, description: 'UP con ID null' },
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('debe retornar undefined cuando items está vacío', () => {
+    const items = [];
+
+    const result = getUpFilter(items);
+
+    expect(result).toBeUndefined();
+  });
+
+  it('debe manejar objetos up que son null o undefined en el array', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          null,
+          undefined,
+          { id: 'up1', description: 'UP válido' },
+          null,
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [{ label: 'UP válido', value: 'up1' }],
+      enabledValues: [],
+    });
+  });
+
+  it('debe rechazar IDs que son solo espacios en blanco', () => {
+    const items = [
+      {
+        id: '1',
+        up: [
+          { id: '   ', description: 'UP con ID solo espacios' },
+          { id: '\t\n  \r', description: 'UP con tabs y saltos' },
+          { id: 'up1', description: 'UP válido' },
+          { id: ' up2 ', description: 'UP válido con espacios al inicio/final' },
+        ],
+      },
+    ];
+
+    const result = getUpFilter(items);
+
+    expect(result).toEqual({
+      id: upFilterId,
+      title: 'UP',
+      values: [
+        { label: 'UP válido', value: 'up1' },
+        { label: 'UP válido con espacios al inicio/final', value: ' up2 ' },
+      ],
+      enabledValues: [],
+    });
+  });
+});

package/src/internal-plugins/activity-history/activity-history-item/filter/up-filters/handle-add-up-options-from-item.ts

@@ -4,8 +4,11 @@ import { IActivityHistoryItem } from "../../domain/model";
 import { upFilterId } from "../model";
 import { addUpFilters } from "./add/actions";
 
-export const handleAddUpFilter = (items: IActivityHistoryItem[], store: Store) => {
-  const allUps = items.flatMap((item) => item.up ?? []).filter((up, index, self) => index === self.findIndex((u) => u.id === up.id));
+export const getUpFilter = (items: IActivityHistoryItem[]) => {
+  const allUps = items
+    .flatMap((item) => item.up ?? [])
+    .filter((up) => up?.id?.trim()) // Filtrar UPs que tienen ID válido (no vacío ni solo espacios)
+    .filter((up, index, self) => index === self.findIndex((u) => u.id === up.id)); // Filtrar duplicados
 
   if (allUps.length > 0) {
     const newUpFilter = {
@@ -15,6 +18,12 @@ export const handleAddUpFilter = (items: IActivityHistoryItem[], store: Store) =
       enabledValues: [],
     };
 
-    store.dispatch(addUpFilters(newUpFilter));
+    return newUpFilter;
   }
 };
+
+export const handleAddUpFilter = (items: IActivityHistoryItem[], store: Store) => {
+  const newUpFilter = getUpFilter(items);
+  if (newUpFilter)
+    store.dispatch(addUpFilters(newUpFilter));
+};

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

@@ -8,8 +8,7 @@ import styles from "./styles.css?inline";
 import { template } from "./template";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { isSomeCollectionLoadedAndOtherLoading, isCollectionInitialState } from "../../../add/handle-busy/selectors";
-import { virtualizerRef } from "@lit-labs/virtualizer/virtualize.js";
-import "@lit-labs/virtualizer";
+import { VirtualScroller, VirtualScrollerState } from "./virtual-scroller";
 
 const createZIndexStyles = (max: number) => {
   let styles = "";
@@ -50,11 +49,27 @@ export class ActivityHistoryTimeline extends LitElement {
   @connectedProperty(activityHistorySearchStringSelector)
   searchString: string;
 
-  @query(".virtualizer") private _virtualizer!: HTMLElement;
+  @query(".virtual-container") private _virtualContainer!: HTMLElement;
+  @query(".virtual-viewport") private _viewport!: HTMLElement;
+  @query(".virtual-content") private _content!: HTMLElement;
 
   @state()
   renderGroupsControlTimeExpired = false;
 
+  // Virtual scroller instance and state
+  private _virtualScroller?: VirtualScroller<IActivityHistoryGroup>;
+  private _cleanupVirtualScroller?: () => void;
+
+  @state()
+  _virtualScrollerState: VirtualScrollerState = {
+    viewportHeight: 0,
+    scrollTop: 0,
+    totalHeight: 0,
+    visibleRange: { start: 0, end: 0 },
+    containerOffset: 0,
+    visibleItems: []
+  };
+
   connectedCallback(): void {
     super.connectedCallback();
     setTimeout(() => {
@@ -64,12 +79,19 @@ export class ActivityHistoryTimeline extends LitElement {
 
   disconnectedCallback(): void {
     super.disconnectedCallback();
+    this._cleanupVirtualScroller?.();
   }
 
   async updated(changedProperties) {
     if (changedProperties.has("historyGroups") && this.historyGroups?.length) {
       // Resolver los elementos antes de actualizar el template
       await this.prepareComponents(this.historyGroups);
+      this._updateVirtualScroller();
+    }
+    
+    // Setup virtualizer when DOM elements are available
+    if (this._viewport && this._content && !this._virtualScroller) {
+      setTimeout(() => this._setupVirtualScroller(), 0);
     }
   }
 
@@ -93,7 +115,6 @@ export class ActivityHistoryTimeline extends LitElement {
         );
       }
     }
-    this.requestUpdate(); // 🔥 Forzar actualización del template
   }
 
   highlightMatch(text: string, searchString: string): string {
@@ -106,29 +127,70 @@ export class ActivityHistoryTimeline extends LitElement {
     return text ? unsafeHTML(this.highlightMatch(text, this.searchString)) : null;
   }
 
+  // Public API for scrolling to date (maintains original functionality)
   _scrollIntoDate(selectedDate: number) {
-    let closestIndex = -1;
-    let closestDifference = Number.POSITIVE_INFINITY;
-
-    (this.historyGroups ?? []).forEach((group, index) => {
-      const dateStr = group.items?.[0]?.date || group.subGroups?.[0]?.items?.[0]?.date;
-      if (!dateStr) return;
+    if (!this._virtualScroller) return;
+
+    const closestIndex = this._virtualScroller.findClosestIndex(
+      (group) => {
+        const dateStr = group.items?.[0]?.date || group.subGroups?.[0]?.items?.[0]?.date;
+        return dateStr ? new Date(dateStr).getTime() : 0;
+      },
+      selectedDate,
+      (a, b) => a - b
+    );
+
+    if (closestIndex !== -1) {
+      this._virtualScroller.scrollToIndex(closestIndex);
+    }
+  }
 
-      const groupDate = new Date(dateStr).getTime();
-      const difference = Math.abs(groupDate - selectedDate);
+  // === VIRTUAL SCROLLER LOGIC ===
+  
+  private _setupVirtualScroller() {
+    if (!this._viewport || !this._content || this._virtualScroller) return;
+    
+    this._virtualScroller = new VirtualScroller({
+      items: this.historyGroups || [],
+      estimatedItemHeight: 200,
+      bufferSize: 50 // 50% buffer
+    });
 
-      if (difference < closestDifference) {
-        closestDifference = difference;
-        closestIndex = index;
+    this._cleanupVirtualScroller = this._virtualScroller.setup(
+      this._viewport, 
+      this._content, 
+      (state) => {
+        this._virtualScrollerState = state;
+        this.requestUpdate();
       }
-    });
+    );
 
-    if (closestIndex !== -1 && this._virtualizer) {
-      this._virtualizer[virtualizerRef].element(closestIndex).scrollIntoView({
-        block: "nearest",
-        inline: "nearest",
-        behavior: "smooth",
-      });
-    }
+    // Get initial state
+    this._virtualScrollerState = this._virtualScroller.getState();
+  }
+
+  private _updateVirtualScroller() {
+    if (!this._virtualScroller || !this.historyGroups?.length) return;
+    
+    this._virtualScroller.updateItems(this.historyGroups);
+    this._virtualScrollerState = this._virtualScroller.getState();
+  }
+
+  // Getters for template (maintaining original API)
+  get _visibleItems() {
+    return this._virtualScrollerState.visibleItems;
   }
-}
+  
+  get _containerOffset() {
+    return this._virtualScrollerState.containerOffset;
+  }
+
+  get _visibleRange() {
+    return this._virtualScrollerState.visibleRange;
+  }
+
+  // Scroll handler for template
+  _onScroll = () => {
+    // Virtual scroller handles this internally
+  };
+}

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

@@ -5,11 +5,26 @@
   flex: 1 1 0%;
 }
 
-.virtualizer {
+.virtual-container {
   height: 100%;
+  position: relative;
+}
+
+.virtual-viewport {
+  height: 100%;
+  overflow: auto;
   padding-inline: 16px;
 }
 
+.virtual-content {
+  position: relative;
+  width: 100%;
+}
+
+.virtual-items {
+  position: relative;
+}
+
 .container {
   min-height: 1px;
   height: 100%;

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

@@ -27,53 +27,64 @@ export const template = (props: ActivityHistoryTimeline) => {
       ${
         props.historyGroups?.length > 0
           ? html`
-            <lit-virtualizer class="virtualizer"
-              ?scroller=${true}
-              .items=${props.historyGroups}
-              .renderItem=${(itemGroup: IActivityHistoryGroup, index: number) => html`
-                <div class="visit zIndex${props.historyGroups.length - index}"
-                     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">
+            <div class="virtual-container">
+              <div class="virtual-viewport" @scroll=${props._onScroll}>
+                <div class="virtual-content">
+                  <div class="virtual-items" style="transform: translateY(${props._containerOffset}px)">
                     ${repeat(
-                      mergeHistoryItemsAndSubgroups(itemGroup),
-                      (entry) => (entry.type === "item" ? entry.item.id : entry.subGroup.id),
-                      (entry: ActivityHistoryEntry) => {
-                        if (entry.type === "item") {
-                          const item = entry.item;
-                          return html`
-                            <div
-                              class="item"
-                              ?has-divider=${hasItemDivider(item, itemGroup?.items as IActivityHistoryItemWithComponent[])}
-                            >
-                              ${item.component}
-                            </div>
-                          `;
-                        }
-                        const subGroup = entry.subGroup;
+                      props._visibleItems,
+                      (itemGroup, index) => itemGroup?.items?.[0]?.id || itemGroup?.subGroups?.[0]?.items?.[0]?.id,
+                      (itemGroup: IActivityHistoryGroup, localIndex: number) => {
+                        const globalIndex = props._visibleRange.start + localIndex;
                         return html`
-                          <div class="diagnostics">
-                            ${diagnosticHeaderTemplate(subGroup?.items[0])}
-                            <div class="diagnostics__items">
+                          <div class="visit zIndex${props.historyGroups.length - globalIndex}"
+                               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(
-                                subGroup?.items,
-                                (item) => item.id,
-                                (item: IActivityHistoryItemWithComponent) => html`
-                                  <div class="item"
-                                       ?has-divider=${hasItemDivider(item, subGroup?.items as IActivityHistoryItemWithComponent[])}>
-                                    ${item.component}
-                                  </div>
-                                `,
+                                mergeHistoryItemsAndSubgroups(itemGroup),
+                                (entry) => (entry.type === "item" ? entry.item.id : entry.subGroup.id),
+                                (entry: ActivityHistoryEntry) => {
+                                  if (entry.type === "item") {
+                                    const item = entry.item;
+                                    return html`
+                                      <div
+                                        class="item"
+                                        ?has-divider=${hasItemDivider(item, itemGroup?.items as IActivityHistoryItemWithComponent[])}
+                                      >
+                                        ${item.component}
+                                      </div>
+                                    `;
+                                  }
+                                  const subGroup = entry.subGroup;
+                                  return html`
+                                    <div class="diagnostics">
+                                      ${diagnosticHeaderTemplate(subGroup?.items[0])}
+                                      <div class="diagnostics__items">
+                                        ${repeat(
+                                          subGroup?.items,
+                                          (item) => item.id,
+                                          (item: IActivityHistoryItemWithComponent) => html`
+                                            <div class="item"
+                                                 ?has-divider=${hasItemDivider(item, subGroup?.items as IActivityHistoryItemWithComponent[])}>
+                                              ${item.component}
+                                            </div>
+                                          `,
+                                        )}
+                                      </div>
+                                    </div>
+                                  `;
+                                },
                               )}
                             </div>
                           </div>
                         `;
-                      },
+                      }
                     )}
                   </div>
                 </div>
-              `}
-            ></lit-virtualizer>
+              </div>
+            </div>
           `
           : noGroupsTemplate(props)
       }