@uxland/primary-shell 6.0.5 → 7.0.0

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

@@ -1,139 +0,0 @@
-:host {
-  display: flex;
-  min-height: 1px;
-  height: 100%;
-  width: 100%;
-}
-
-.container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  border: 1px solid rgb(189, 189, 189);
-  border-radius: var(--dss-radius-sm);
-  &[maximized] {
-    position: absolute;
-    background: white;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    border: none;
-    .header-maximized-container {
-      display: flex;
-      flex-direction: column;
-      .header__maximized {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        gap: 24px;
-        padding-top: 24px;
-        padding-bottom: 24px;
-        padding-inline: 40px;
-        .header__maximized__search {
-          flex: 1;
-          border-radius: 8px;
-          border: 1px solid rgb(189, 189, 189);
-          padding: 8px;
-          width: 300px;
-        }
-        .title {
-          color: var(--color-neutral-900);
-          font-weight: 700;
-          font-size: 20px;
-          line-height: 30px;
-          white-space: nowrap;
-        }
-        .options {
-          display: flex;
-          align-items: center;
-          color: var(--color-primary-400);
-          font-weight: 600;
-          font-size: 14px;
-          line-height: 24px;
-          cursor: pointer;
-        }
-        .header__maximized__left {
-          display: flex;
-          flex-direction: row;
-          gap: 24px;
-          align-items: center;
-          width: 100%;
-        }
-        .header__maximized__right {
-          display: flex;
-          flex-direction: row;
-          gap: 16px;
-          align-items: center;
-        }
-      }
-    }
-    .wrapper {
-      height: calc(100vh - 175px);
-      border: 1px solid rgb(189, 189, 189);
-      border-radius: var(--dss-radius-sm);
-      margin-bottom: 24px;
-      margin-inline: 40px;
-      width: calc(100% - 80px);
-    }
-  }
-  .header {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 12px;
-    border-bottom: 1px solid rgb(189, 189, 189);
-    gap: 16px;
-    
-    .header__left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      flex: 1;
-      gap: 16px;
-      .title {
-        color: var(--color-neutral-800);
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 24px;
-        white-space: nowrap;
-      }
-    }
-    .header__right {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 8px;
-      .action-icons {
-        display: flex;
-        align-items: center;
-      }
-    }
-  }
-  .wrapper {
-    display: flex;
-    flex-direction: row;
-    min-height: 1px;
-    width: 100%;
-    height: 100%;
-    &[maximized] {
-      .content {
-        width: 100%;
-        background: var(--color-neutral-50);
-        border-top-right-radius: var(--dss-radius-sm);
-        display: flex;
-        flex-direction: column;
-      }
-    }
-    
-    .content {
-      width: 100%;
-      background: var(--color-neutral-50);
-      border-bottom-right-radius: var(--dss-radius-sm);
-      overflow: hidden; 
-      display: flex;
-      flex-direction: column;
-    }
-  }
-}

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

@@ -1,66 +0,0 @@
-import { html, nothing } from "lit";
-import { ActivityHistoryMain } from "./activity-history-main";
-import { ExportPdf } from "../../../export-to-pdf/request";
-import { translate } from "../../../../localization";
-
-export const template = (props: ActivityHistoryMain) =>
-  html`<div class="container" ?maximized=${props.maximized}>
-  ${
-    props.maximized
-      ? html`${headerMaximizedTemplate(props)}`
-      : html`<div class="header">
-            <div class="header__left">
-                <div class="title">${translate("activityHistory")}</div>
-                <activity-history-search-bar @onSearchChange=${props._handleSearchChange} .searchQuery=${props.searchQuery}></activity-history-search-bar>
-                <dss-datepicker dropdownFixed inputsize="md" class="date-picker" @onValueChange=${(event) => props._handleSelectDate(event.detail)}>
-                    <label slot="label" for="myDatepicker">${translate("goToDate")}</label>
-                    <input slot="input" id="myDatepicker" type="text" class="dss-input">
-                </dss-datepicker>
-            </div>
-            
-            <div class="header__right">
-                <dss-icon-button @click=${() => props._maximize()} size="md" variant="primary" icon="arrow_forward" label=${translate("actions.maximizeButton")}></dss-icon-button>
-                <div>|</div>
-                <dss-icon-button size="md" variant="primary" icon="more_vert" label=${translate("actions.menuButton")}></dss-icon-button>
-                <dss-action-menu position="bottom-start">
-                    <dss-action-menu-item lefticon="view_timeline" label=${translate("actions.cronogram")} @click=${props._raiseEcapCronogramEvent}></dss-action-menu-item>
-                    <!-- <dss-action-menu-item lefticon="file_download" label=${translate("actions.exportPdf")} @click=${() => props.api.broker.send(new ExportPdf())}></dss-action-menu-item> -->
-                    <!-- <dss-action-menu-item lefticon="info" label=${translate("actions.entryLegend")}></dss-action-menu-item> -->
-                </dss-action-menu>
-            </div>  
-        </div>`
-  } 
-        <div class="wrapper" ?maximized=${props.maximized}>
-          <activity-history-filters .wrapperMaximized=${props.maximized}></activity-history-filters>
-          <div class="content">
-            <active-filters-header></active-filters-header>
-            <activity-history-busy></activity-history-busy>
-            ${!props.isCollectionInitialState ? html`<activity-history-timeline></activity-history-timeline>` : nothing}
-          </div>  
-        </div>
-    </div>`;
-
-export const headerMaximizedTemplate = (props: ActivityHistoryMain) => html`
-    <div class="header-maximized-container">
-        <div class="header__maximized">
-            <div class="header__maximized__left">
-                <div class="title">${translate("activityHistory")}</div>
-                <activity-history-search-bar @onSearchChange=${props._handleSearchChange} .searchQuery=${props.searchQuery}></activity-history-search-bar>
-                <dss-datepicker dropdownFixed inputsize="md" class="date-picker" @onValueChange=${(event) => props._handleSelectDate(event.detail)}>
-                    <label slot="label" for="myDatepicker">${translate("goToDate")}</label>
-                    <input slot="input" id="myDatepicker" type="text" class="dss-input">
-                </dss-datepicker>
-            </div>
-            <div class="header__maximized__right">
-                <!-- <div>
-                  <dss-button variant="subtle" size="md" label="${translate("actions.moreOptions")}" icon="more_horiz" iconposition="left"></dss-button>
-                  <dss-action-menu position="bottom-start">
-                    <dss-action-menu-item @click=${() => props.api.broker.send(new ExportPdf())} lefticon="file_download" label=${translate("actions.exportPdf")}></dss-action-menu-item>
-                  </dss-action-menu>
-                </div> -->
-                <!-- <dss-button label="${translate("actions.entryLegend")}" size="md" variant="secondary"  icon="info"></dss-button> -->
-                <dss-button label="${translate("actions.cronogram")}" size="md" variant="primary" icon="view_timeline" @click=${props._raiseEcapCronogramEvent}></dss-button>
-            </div>
-        </div>
-    </div>
-`;

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

@@ -1,134 +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 { virtualizerRef } from "@lit-labs/virtualizer/virtualize.js";
-import "@lit-labs/virtualizer";
-
-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(".virtualizer") private _virtualizer!: HTMLElement;
-
-  @state()
-  renderGroupsControlTimeExpired = false;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    setTimeout(() => {
-      this.renderGroupsControlTimeExpired = true;
-    }, 8000);
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-  }
-
-  async updated(changedProperties) {
-    if (changedProperties.has("historyGroups") && this.historyGroups?.length) {
-      // Resolver los elementos antes de actualizar el template
-      await this.prepareComponents(this.historyGroups);
-    }
-  }
-
-  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 }),
-          })),
-        );
-      }
-    }
-    this.requestUpdate(); // 🔥 Forzar actualización del template
-  }
-
-  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;
-  }
-
-  _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;
-
-      const groupDate = new Date(dateStr).getTime();
-      const difference = Math.abs(groupDate - selectedDate);
-
-      if (difference < closestDifference) {
-        closestDifference = difference;
-        closestIndex = index;
-      }
-    });
-
-    if (closestIndex !== -1 && this._virtualizer) {
-      this._virtualizer[virtualizerRef].element(closestIndex).scrollIntoView({
-        block: "nearest",
-        inline: "nearest",
-        behavior: "smooth",
-      });
-    }
-  }
-}

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

@@ -1,106 +0,0 @@
-:host {
-  min-height: 1px;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-}
-
-.virtualizer {
-  height: 100%;
-  padding-inline: 16px;
-}
-
-.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,160 +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`
-            <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">
-                    ${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>
-              `}
-            ></lit-virtualizer>
-          `
-          : 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>
-  `;

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

@@ -1,8 +0,0 @@
-import "./UI/timeline/activity-history-timeline";
-import "../filter/UI/active-filters-header/active-filters-header";
-import "../add/handle-error/history-full-data-error/component";
-import "../add/handle-error/history-partial-data-error/component";
-
-export const bootstrapListActivityHistoryItems = () => {
-  () => null;
-};