@uxland/primary-shell 6.0.6 → 7.0.0

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

@@ -1,196 +0,0 @@
-import { LitElement, PropertyValues, css, html, unsafeCSS } from "lit";
-import { customElement, query, state } from "lit/decorators.js";
-import { connectedProperty } from "../../../../infrastructure/state/connected-property";
-import { IActivityHistoryGroup } from "../../../domain/model";
-import { activityHistorySearchStringSelector } from "../../../search/selectors";
-import { activityHistoryGroupedItems } from "../../../selectors";
-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 { VirtualScroller, VirtualScrollerState } from "./virtual-scroller";
-
-const createZIndexStyles = (max: number) => {
-  let styles = "";
-  for (let i = 0; i <= max; i++) {
-    styles += `.zIndex${i} { z-index: ${i} !important; }\n`;
-  }
-  return styles;
-};
-
-//@ts-ignore
-@customElement("activity-history-timeline")
-export class ActivityHistoryTimeline extends LitElement {
-  render() {
-    const maxIndex = this.historyGroups?.length ?? 0;
-    const dynamicStyles = createZIndexStyles(maxIndex);
-
-    return html`
-    <style>
-      ${unsafeCSS(dynamicStyles)}
-    </style>
-    ${template(this)}
-  `;
-  }
-
-  static styles = css`
-    ${unsafeCSS(styles)}
-  `;
-
-  @connectedProperty(activityHistoryGroupedItems)
-  historyGroups: IActivityHistoryGroup[];
-
-  @connectedProperty(isCollectionInitialState)
-  isCollectionInitialState: boolean;
-
-  @connectedProperty(isSomeCollectionLoadedAndOtherLoading)
-  isSomeCollectionLoadedAndOtherLoading: boolean;
-
-  @connectedProperty(activityHistorySearchStringSelector)
-  searchString: string;
-
-  @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(() => {
-      this.renderGroupsControlTimeExpired = true;
-    }, 8000);
-  }
-
-  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);
-    }
-  }
-
-  async prepareComponents(historyGroups) {
-    for (const group of historyGroups) {
-      // Resolver items del grupo principal
-      group.items = await Promise.all(
-        group.items.map(async (item) => ({
-          ...item,
-          component: await item.componentFactory({ item }),
-        })),
-      );
-
-      // Resolver subgrupos
-      for (const subGroup of group.subGroups) {
-        subGroup.items = await Promise.all(
-          subGroup.items.map(async (item) => ({
-            ...item,
-            component: await item.componentFactory({ item }),
-          })),
-        );
-      }
-    }
-  }
-
-  highlightMatch(text: string, searchString: string): string {
-    if (!this.searchString || this.searchString.length < 2) return text;
-    const regex = new RegExp(`(${searchString})`, "gi");
-    return text.replace(regex, `<span class="highlight">$1</span>`);
-  }
-
-  highlighted(text?: string) {
-    return text ? unsafeHTML(this.highlightMatch(text, this.searchString)) : null;
-  }
-
-  // Public API for scrolling to date (maintains original functionality)
-  _scrollIntoDate(selectedDate: number) {
-    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);
-    }
-  }
-
-  // === 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
-    });
-
-    this._cleanupVirtualScroller = this._virtualScroller.setup(
-      this._viewport, 
-      this._content, 
-      (state) => {
-        this._virtualScrollerState = state;
-        this.requestUpdate();
-      }
-    );
-
-    // 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

@@ -1,121 +0,0 @@
-:host {
-  min-height: 1px;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-}
-
-.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%;
-
-}
-
-.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-sm);
-  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: 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;
-    }
-  }
-  .visit__items {
-    display: flex;
-    flex-direction: column;
-    gap: var(--dss-spacing-sm);
-      .item[has-divider] {
-        border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
-        &:last-of-type {
-          border: none;
-        }
-      }
-  }
-  .diagnostics {
-    display: flex;
-    flex-direction: column;
-    gap: var(--dss-spacing-sm);
-    border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
-    &:last-of-type {
-      border: none;
-    }
-    .diagnostics__header {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 16px;
-      flex-wrap: wrap;
-    }
-    .diagnostics__items {
-      display: flex;
-      flex-direction: column;
-      .item[has-divider] {
-        border-bottom: var(--dss-border-width-sm) solid var(--color-neutral-200);
-        &:last-of-type {
-          border: none;
-        }
-      }
-    }
-  }
-}
-.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

@@ -1,171 +0,0 @@
-import { html, nothing } from "lit";
-import { ActivityHistoryTimeline } from "./activity-history-timeline";
-import { repeat } from "lit/directives/repeat.js";
-import { format } from "date-fns";
-import notFound from "../../../../../../UI/images/not-found.svg";
-import { ifDefined } from "lit/directives/if-defined.js";
-import {
-  IActivityHistoryDiagnostic,
-  IActivityHistoryGroup,
-  IActivityHistoryItem,
-  IActivityHistoryItemWithComponent,
-} from "../../../domain/model";
-import { translate } from "../../../../localization";
-import { hasItemDivider, shouldShowRole } from "../../../domain/business-rules";
-import {
-  ActivityHistoryEntry,
-  mergeHistoryItemsAndSubgroups,
-} from "../../merge-history-items-and-subgroups/merge-history-items-and-subgroups";
-import "../../../add/handle-busy/is-grouping-busy/component";
-
-export const template = (props: ActivityHistoryTimeline) => {
-  return html`
-    <div class="container">
-      <activity-history-full-data-error></activity-history-full-data-error>
-      <activity-history-partial-data-error></activity-history-partial-data-error>
-
-      ${
-        props.historyGroups?.length > 0
-          ? html`
-            <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(
-                      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="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(
-                                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>
-              </div>
-            </div>
-          `
-          : noGroupsTemplate(props)
-      }
-    </div>
-  `;
-};
-
-const noGroupsTemplate = (props: ActivityHistoryTimeline) => html`
-${
-  props.searchString?.length > 1
-    ? html`
-          <dss-user-feedback
-            class="feedback"
-            imagesrc=${notFound}
-            title=${translate("noResults")}>
-          </dss-user-feedback>
-        `
-    : props.renderGroupsControlTimeExpired
-      ? html`<dss-user-feedback
-            class="feedback"
-            imagesrc=${notFound}
-            title=${translate("noData.title")}
-            description=${translate("noData.description")}>
-          </dss-user-feedback>`
-      : html`<activity-history-is-grouping-busy></activity-history-is-grouping-busy>`
-}`;
-
-const visitHeaderTemplate = (props: ActivityHistoryTimeline, item: IActivityHistoryItem | undefined) => {
-  if (!item) return nothing;
-  return html`  
-  <div class="visit__header">
-    <div class="title">
-      <div class="title-date">
-        <div>${format(new Date(item.date), "dd/MM/yyyy")}</div>
-      </div>
-      <div class="title-description">
-        <div>
-          ${renderProfessionalValues(props, item)}
-        </div>
-      </div>
-    </div>
-  </div>
-  `;
-};
-
-const renderProfessionalValues = (props: ActivityHistoryTimeline, item: IActivityHistoryItem) => {
-  if (!item.professional) return nothing;
-  const showRole = shouldShowRole(item);
-
-  const values: Array<any> = [];
-
-  values.push(props.highlighted(item.professional.name));
-
-  if (showRole && item.professional?.role?.description) {
-    values.push(props.highlighted(item.professional.role.description));
-  }
-
-  if (item.professional?.speciality?.description) {
-    values.push(props.highlighted(item.professional.speciality.description));
-  }
-
-  if (item.up?.description) {
-    values.push(props.highlighted(item.up.description));
-  }
-
-  if (item.service?.description) {
-    values.push(props.highlighted(item.service.description));
-  }
-
-  return values.map((v, i) => html`${v}${i < values.length - 1 ? " | " : ""}`);
-};
-
-const diagnosticHeaderTemplate = (item: IActivityHistoryItem | undefined) =>
-  item &&
-  html`
-    <div class="diagnostics__header">
-      ${item.diagnostics
-        .filter((diagnostic: IActivityHistoryDiagnostic) => diagnostic.descripcio != null && diagnostic.descripcio.trim() !== "")
-        .map(
-          (diagnostic: IActivityHistoryDiagnostic) =>
-            html`<dss-badge text=${diagnostic.descripcio?.toUpperCase() as string} state="info" size="sm" outlined></dss-badge>`,
-        )}
-    </div>
-  `;