@uxland/primary-shell 3.5.2 → 3.5.3

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/activity-history-filters.ts

@@ -0,0 +1,40 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { PrimariaApi } from "../../../../../../api/api";
+import { IActivityHistoryFilter } from "../../model";
+import { lazyInject } from "../../../../infrastructure/ioc/container";
+import { TYPES } from "../../../../infrastructure/ioc/types";
+import { connectedProperty } from "../../../../infrastructure/state/connected-property";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+import { activityHistoryCommonFiltersSelector } from "../../selectors";
+import { SetCommonFilter } from "../../set-common-filter/request";
+
+//@ts-ignore
+@customElement("activity-history-filters")
+export class ActivityHistoryFilters extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  @connectedProperty(activityHistoryCommonFiltersSelector)
+  filters: IActivityHistoryFilter[];
+
+  @lazyInject(TYPES.primaryApi)
+  api: PrimariaApi;
+
+  @state()
+  filtersExpanded = false;
+
+  _toggleFilters() {
+    this.filtersExpanded = !this.filtersExpanded;
+  }
+
+  _onChangeCommonFilterValue(filterId: string, value: boolean) {
+    this.api.broker.send(new SetCommonFilter({ id: filterId, enabled: value }));
+  }
+}

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/styles.css

@@ -0,0 +1,39 @@
+.filters-sidebar {
+      padding: 8px 4px;
+      border-right: 1px solid rgb(189, 189, 189);
+      width: 56px;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    dss-icon-button{
+      align-self: center;
+    }
+      &[expanded] {
+        width: 296px;
+        .filters-sidebar-opened {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding-inline: 8px;
+          color: var(--color-neutral-900);
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 24px;
+        }
+      }
+    }
+
+
+.filter-container{
+      display: flex;
+    flex-direction: column;
+    padding: 16px 8px 8px 8px;
+
+    
+}
+
+.filter-container .filter{
+  padding: 8px 0;
+      border-bottom: 1px solid var(--color-neutral-200);
+    }

package/src/internal-plugins/activity-history/activity-history-item/filter/UI/activity-history-filters/template.ts

@@ -0,0 +1,30 @@
+import { html } from "lit";
+import { ActivityHistoryFilters } from "./activity-history-filters";
+import { repeat } from "lit/directives/repeat.js";
+import { IActivityHistoryFilter } from "../../model";
+import { ActivityHistoryFilterType } from "../../constants";
+import { translate } from "../../../../localization";
+
+const getFilterTemplate = (props: ActivityHistoryFilters, filter: IActivityHistoryFilter) => {
+  switch (filter.type) {
+    case ActivityHistoryFilterType.Switch:
+      return html`
+      <dss-input-switch size="sm" @onChangeValue=${(e) => props._onChangeCommonFilterValue(filter.id, e.detail)}>
+        <input slot="input" id="switch-${filter.id}" aria-label=${filter.title} type="checkbox">
+         <label slot="label" for="switch-${filter.id}">${filter.title}</label>
+      </dss-input-switch>`;
+  }
+};
+
+export const template = (props: ActivityHistoryFilters) =>
+  html`
+  <div class="filters-sidebar" ?expanded=${props.filtersExpanded} >
+      ${
+        props.filtersExpanded
+          ? html`<div class="filters-sidebar-opened">${translate("filters.filters")}<dss-icon-button @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_left"></dss-icon-button></div><div class="filter-container">
+                  ${repeat(props.filters, (filter: IActivityHistoryFilter) => html`<div class="filter">${getFilterTemplate(props, filter)}</div> `)}
+                </div> `
+          : html`<dss-icon-button @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_right"></dss-icon-button>`
+      }
+  </div>
+  `;

package/src/internal-plugins/activity-history/activity-history-item/filter/actions.ts

@@ -0,0 +1,3 @@
+import { activityHistoryFiltersSlice } from "./slice";
+
+export const { setCommonFilterValue } = activityHistoryFiltersSlice.actions;

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

@@ -0,0 +1,14 @@
+import { BrokerExtensions } from "@primaria/plugins-core";
+import "../../activity-history-item/filter/UI/activity-history-filters/activity-history-filters";
+import {
+  bootstrapSetCommonFilter,
+  teardownSetCommonFilter,
+} from "./set-common-filter/bootstrapper";
+
+export const bootstrapFilters = (broker: BrokerExtensions) => {
+  bootstrapSetCommonFilter(broker);
+};
+
+export const teardownFilters = () => {
+  teardownSetCommonFilter();
+};

package/src/internal-plugins/activity-history/activity-history-item/filter/common-filters.ts

@@ -0,0 +1,29 @@
+import { OwnSpec } from "../domain/specs/own-spec";
+import { RelevantSpec } from "../domain/specs/relevant-spec";
+import { ActivityHistoryFilterOperation, ActivityHistoryFilterType } from "./constants";
+import { IActivityHistoryFilterGroup } from "./model";
+
+export const commonFilters: IActivityHistoryFilterGroup[] = [
+  {
+    id: "common",
+    title: "Comuns",
+    filters: [
+      {
+        id: "relevant",
+        title: "Veure rellevants",
+        spec: RelevantSpec,
+        enabled: false,
+        type: ActivityHistoryFilterType.Switch,
+        operation: ActivityHistoryFilterOperation.And,
+      },
+      {
+        id: "own",
+        title: "Veure meus",
+        spec: OwnSpec,
+        enabled: false,
+        type: ActivityHistoryFilterType.Switch,
+        operation: ActivityHistoryFilterOperation.And,
+      },
+    ],
+  },
+];

package/src/internal-plugins/activity-history/activity-history-item/filter/constants.ts

@@ -0,0 +1,8 @@
+export enum ActivityHistoryFilterType {
+  Switch = "switch",
+}
+
+export enum ActivityHistoryFilterOperation {
+  And = "and",
+  Or = "or",
+}

package/src/internal-plugins/activity-history/activity-history-item/filter/model.ts

@@ -0,0 +1,20 @@
+import { IActivityHistoryItem } from "../domain/model";
+import { Spec } from "../domain/specs/spec";
+import { ActivityHistoryFilterOperation, ActivityHistoryFilterType } from "./constants";
+
+type Constructor<T> = new (...args: any[]) => T;
+
+export interface IActivityHistoryFilterGroup {
+  id: string;
+  title: string;
+  filters: IActivityHistoryFilter[];
+}
+
+export interface IActivityHistoryFilter {
+  id: string;
+  title: string;
+  spec: Constructor<Spec<IActivityHistoryItem>>;
+  enabled: boolean;
+  type: ActivityHistoryFilterType;
+  operation: ActivityHistoryFilterOperation;
+}

package/src/internal-plugins/activity-history/activity-history-item/filter/selectors.ts

@@ -0,0 +1,28 @@
+import { createSelector } from "@reduxjs/toolkit";
+import { RootState } from "../../infrastructure/state/store";
+import { TrueSpec } from "../domain/specs/true-spec";
+import { IActivityHistoryFilter } from "./model";
+
+export const activityHistoryFiltersSelector = (state: RootState) =>
+  state.activityHistoryFilters.filters;
+
+export const activityHistoryCommonFiltersSelector = createSelector(
+  activityHistoryFiltersSelector,
+  (filters) => filters.find((f) => f.id === "common")?.filters,
+);
+export const isEnabledCommonFilterSelector = (filterId: string) =>
+  createSelector(
+    activityHistoryCommonFiltersSelector,
+    (filterSpecs) => filterSpecs?.find((s) => s.id === filterId)?.enabled,
+  );
+
+export const commonSpecSelector = createSelector(
+  activityHistoryCommonFiltersSelector,
+  (commonFilters: IActivityHistoryFilter[]) => {
+    const enabledCommonFilters = commonFilters.filter((f) => f.enabled);
+    const finalCommonSpec = enabledCommonFilters.reduce((acc, filter) => {
+      return acc.and(new filter.spec());
+    }, new TrueSpec());
+    return finalCommonSpec;
+  },
+);

package/src/internal-plugins/activity-history/activity-history-item/filter/set-common-filter/bootstrapper.ts

@@ -0,0 +1,14 @@
+import { BrokerExtensions } from "@primaria/plugins-core";
+import { BrokerDisposableHandler } from "../../../../../api/broker/primaria-broker";
+import { SetCommonFilter } from "./request";
+import { SetCommonFilterHandler } from "./handler";
+
+let request: BrokerDisposableHandler;
+
+export const bootstrapSetCommonFilter = (broker: BrokerExtensions) => {
+  request = broker.registerRequest(SetCommonFilter, SetCommonFilterHandler);
+};
+
+export const teardownSetCommonFilter = () => {
+  request?.dispose();
+};

package/src/internal-plugins/activity-history/activity-history-item/filter/set-common-filter/handler.ts

@@ -0,0 +1,13 @@
+import { StoreBaseHandler } from "../../../infrastructure/base-handlers";
+import { setCommonFilterValue } from "../actions";
+import { SetCommonFilter } from "./request";
+
+export class SetCommonFilterHandler extends StoreBaseHandler {
+  async handle(request: SetCommonFilter) {
+    try {
+      this.store.dispatch(setCommonFilterValue(request.payload));
+    } catch (e) {
+      console.log(e.message);
+    }
+  }
+}

package/src/internal-plugins/activity-history/activity-history-item/filter/set-common-filter/request.ts

@@ -0,0 +1,3 @@
+export class SetCommonFilter {
+  constructor(public payload: { id: string; enabled: boolean }) {}
+}

package/src/internal-plugins/activity-history/activity-history-item/filter/slice.ts

@@ -0,0 +1,27 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { commonFilters } from "./common-filters";
+import { setSearchStringReducer } from "../search/reducer";
+
+export const activityHistoryFiltersSlice = createSlice({
+  name: "activity-history-filters",
+  initialState: {
+    searchString: "",
+    filters: [...commonFilters],
+  },
+  reducers: {
+    setSearchString: setSearchStringReducer,
+    setCommonFilterValue(state, action) {
+      state.filters = state.filters.map((f) => {
+        if (f.id === "common") {
+          return {
+            ...f,
+            filters: f.filters.map((ff) =>
+              ff.id === action.payload.id ? { ...ff, enabled: action.payload.enabled } : ff,
+            ),
+          };
+        }
+        return f;
+      });
+    },
+  },
+});

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

@@ -0,0 +1,91 @@
+import { parse } from "date-fns";
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { PrimariaApi, PrimariaRegionHost } from "../../../../../../api/api";
+import { BrokerDisposableHandler } from "../../../../../../api/broker/primaria-broker";
+import { shellEvents } from "../../../../../../events";
+import { lazyInject } from "../../../../infrastructure/ioc/container";
+import { TYPES } from "../../../../infrastructure/ioc/types";
+import { connectedProperty } from "../../../../infrastructure/state/connected-property";
+import { SearchActivityHistoryItems } from "../../../search/request";
+import { activityHistoryCollectionsSelector } from "../../selectors";
+import { ActivityHistoryTimeline } from "../timeline/activity-history-timeline";
+import styles from "./styles.css?inline";
+import { template } from "./template";
+
+//@ts-ignore
+@customElement("activity-history-main")
+export class ActivityHistoryMain extends PrimariaRegionHost(LitElement) {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  subscriptions: BrokerDisposableHandler[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._subscribeEvents();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubscribeEvents();
+  }
+
+  @property({ type: Boolean })
+  maximized = false;
+
+  @lazyInject(TYPES.primaryApi)
+  api: PrimariaApi;
+
+  @connectedProperty(activityHistoryCollectionsSelector)
+  historyItems: any[];
+
+  _maximize() {
+    this.maximized = true;
+  }
+
+  _minimize() {
+    this.maximized = false;
+  }
+
+  _subscribeEvents() {
+    const subscription = this.api.broker.subscribe(
+      shellEvents.openClinicalMonitoringRequested,
+      () => {
+        this.maximized = false;
+      },
+    );
+    this.subscriptions.push(subscription);
+  }
+
+  _unsubscribeEvents() {
+    this.subscriptions.forEach((s) => s.dispose());
+  }
+
+  @property()
+  searchQuery = "";
+
+  _handleSelectDate(date: string) {
+    const selectedDate = parse(date, "dd/MM/yyyy", new Date());
+    this.scrollToClosestDate(selectedDate);
+  }
+
+  _handleSearchChange(event: CustomEvent) {
+    if (typeof event.detail !== "string") return;
+    this.searchQuery = event.detail;
+    this.api.broker.send(new SearchActivityHistoryItems(this.searchQuery));
+  }
+
+  scrollToClosestDate(date: Date) {
+    const selectedDate = date.getTime();
+    const timeline = this.shadowRoot.querySelector(
+      "activity-history-timeline",
+    ) as ActivityHistoryTimeline;
+    timeline._scrollIntoDate(selectedDate);
+  }
+}

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

@@ -100,13 +100,6 @@
         white-space: nowrap;
       }
     }
-    .header__search {
-      flex: 1;
-      border-radius: 8px;
-      border: 1px solid rgb(189, 189, 189);
-      padding: 8px;
-      width: 300px;
-    }
     .header__right {
       display: flex;
       flex-direction: row;
@@ -131,43 +124,13 @@
         border-top-right-radius: var(--dss-radius-sm);
       }
     }
-    .filters-sidebar {
-      padding: 8px 4px;
-      border-right: 1px solid rgb(189, 189, 189);
-      width: 30px;
-      &[expanded] {
-        width: 296px;
-        .filters-sidebar-opened {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding-inline: 8px;
-          color: var(--color-neutral-900);
-          font-weight: 700;
-          font-size: 16px;
-          line-height: 24px;
-        }
-      }
-    }
+    
     .content {
       width: 100%;
       background: var(--color-neutral-50);
       border-bottom-right-radius: var(--dss-radius-sm);
       overflow: hidden; 
-      .spinner-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        gap: 24px;
-        justify-content: center;
-      }
-      .spinner-full-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+      
     }
   }
 }

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

@@ -1,12 +1,9 @@
-import { html, nothing } from "lit";
-import { ActivityHistory } from "./activity-history";
-import "./activity-history-search-header/activity-history-search-header"
-import "./activity-history-timeline/activity-history-timeline";
-import "../export-pdf-modal/export-pdf-modal";
-import { ExportPdf } from "../../features/export-to-pdf/request";
-import { translate } from "../../localization";
+import { html } from "lit";
+import { ActivityHistoryMain } from "./activity-history-main";
+import { ExportPdf } from "../../../export-to-pdf/request";
+import { translate } from "../../../../localization";
 import { when } from "lit/directives/when.js";
-export const template = (props: ActivityHistory) =>
+export const template = (props: ActivityHistoryMain) =>
   html`<div class="container" ?maximized=${props.maximized}>
   ${
     props.maximized
@@ -14,10 +11,7 @@ export const template = (props: ActivityHistory) =>
       : html`<div class="header">
             <div class="header__left">
                 <div class="title">${translate("activityHistory")}</div>
-                <dss-search-bar dropdownStyle=${"display: none"} @onSearchChange=${props._handleSearchChange} icon="search" inputsize="md" threshold="2" recentsearchestext="" emptydropdowntext="">
-                    <label slot="label" for="searchbar1" aria-hidden="false"></label>
-                    <input slot="input" id="searchbar1" type="text" value=${props.searchQuery} @input=${(e) => props._handleSearchChange({ detail: [e.target.value] })}>
-                </dss-search-bar>
+                <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">
@@ -37,36 +31,21 @@ export const template = (props: ActivityHistory) =>
         </div>`
   } 
         <div class="wrapper" ?maximized=${props.maximized}>
-          <div class="filters-sidebar" ?expanded=${props.filtersExpanded} >
-            ${
-              props.filtersExpanded
-                ? html`<div class="filters-sidebar-opened">${translate("filters.filters")}<dss-icon-button @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_left"></dss-icon-button></div>`
-                : html`<dss-icon-button @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_right"></dss-icon-button>`
-            }  
-          </div>
+          <activity-history-filters></activity-history-filters>
           <div class="content">
-            ${when(props.searchQuery.length > 1,() => html`<activity-history-search-header searchQuery="${props.searchQuery}"></activity-history-search-header>`)}
-            ${
-              props.isAnyCollectionLoadingWithoutAnyLoaded
-                ? html`<div class="spinner-full-container"><dss-spinner></dss-spinner></div>`
-                : props.isSomeCollectionLoadedAndOtherLoading
-                  ? html`<div class="spinner-container"><dss-spinner size="sm"></dss-spinner><div class="busy-description">${translate("busyEntriesLoading")}</div></div>`
-                  : nothing
-            }
+            ${when(props.searchQuery.length > 1, () => html`<activity-history-search-header searchQuery="${props.searchQuery}"></activity-history-search-header>`)}
+            <activity-history-busy></activity-history-busy>
             <activity-history-timeline></activity-history-timeline>
           </div>  
         </div>
     </div>`;
 
-export const headerMaximizedTemplate = (props: ActivityHistory) => html`
+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>
-                <dss-search-bar dropdownStyle=${"display: none"} @onSearchChange=${props._handleSearchChange} icon="search" inputsize="md" threshold="3" recentsearchestext="" emptydropdowntext="Sense resultats per">
-                    <label slot="label" for="searchbar1" aria-hidden="false"></label>
-                    <input slot="input" id="searchbar1" type="text" value=${props.searchQuery} @input=${(e) => props._handleSearchChange({ detail: [e.target.value] })}>
-                </dss-search-bar>
+                <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">

package/src/internal-plugins/activity-history/{components/activity-history/activity-history-timeline → activity-history-item/list/UI/timeline}/activity-history-timeline.ts

@@ -1,20 +1,19 @@
 import { LitElement, css, html, unsafeCSS } from "lit";
-import { PrimariaRegionHost } from "../../../../../api/api";
 import { customElement } from "lit/decorators.js";
+import { connectedProperty } from "../../../../infrastructure/state/connected-property";
+import { IActivityHistoryGroup } from "../../../domain/model";
+import { activityHistorySearchStringSelector } from "../../../search/selectors";
 import {
-  activityHistoryGroupedItems,
-  activityHistorySearchStringSelector,
   isAnyCollectionLoadingWithoutAnyLoaded,
   isSomeCollectionLoadedAndOtherLoading,
-} from "../../../infrastructure/state/selectors";
-import { connectedProperty } from "../../../infrastructure/state/connected-property";
+} from "../../handle-busy/selectors";
+import { activityHistoryGroupedItems } from "../../selectors";
 import styles from "./styles.css?inline";
 import { template } from "./template";
-import { IActivityHistoryGroup } from "../../../domain/model";
 
 //@ts-ignore
 @customElement("activity-history-timeline")
-export class ActivityHistoryTimeline extends PrimariaRegionHost(LitElement) {
+export class ActivityHistoryTimeline extends LitElement {
   render() {
     return html`${template(this)}`;
   }
@@ -46,4 +45,22 @@ export class ActivityHistoryTimeline extends PrimariaRegionHost(LitElement) {
     const regex = new RegExp(`(${searchString})`, "gi");
     return text.replace(regex, `<span class="highlight">$1</span>`);
   }
+
+  _scrollIntoDate(selectedDate: number) {
+    let closestElement = null;
+    let closestDifference = Number.POSITIVE_INFINITY;
+    this.shadowRoot.querySelectorAll(".visit").forEach((element) => {
+      const itemDate = new Date(element.dataset.date).getTime();
+      const difference = Math.abs(itemDate - selectedDate);
+
+      if (difference < closestDifference) {
+        closestDifference = difference;
+        closestElement = element;
+      }
+    });
+
+    if (closestElement) {
+      closestElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }
 }

package/src/internal-plugins/activity-history/{components/activity-history/activity-history-timeline → activity-history-item/list/UI/timeline}/styles.css

@@ -8,7 +8,7 @@
   flex-direction: column;
   gap: 16px;
   padding-inline: 16px;
-  padding-top: 17px;
+  padding-top: 16px;
   min-height: 1px;
   height: 100%;
   overflow-y: auto;

package/src/internal-plugins/activity-history/{components/activity-history/activity-history-timeline → activity-history-item/list/UI/timeline}/template.ts

@@ -1,16 +1,17 @@
 import { html, nothing } from "lit";
 import { ActivityHistoryTimeline } from "./activity-history-timeline";
 import { repeat } from "lit/directives/repeat.js";
+import { IEntityDescription } from "@primaria/plugins-core";
+import { format } from "date-fns";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import notFound from "../../../../../../UI/images/not-found.svg";
+import { ifDefined } from "lit/directives/if-defined.js";
 import {
   IActivityHistoryGroup,
   IActivityHistoryItem,
   IActivityHistorySubGroup,
 } from "../../../domain/model";
-import { IEntityDescription } from "@primaria/plugins-core";
-import { format } from "date-fns";
-import { translate } from "../../../localization";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import notFound from "../../../../../UI/images/not-found.svg";
+import { translate } from "../../../../localization";
 
 export const template = (props: ActivityHistoryTimeline) => {
   if (!props._hasUpdatedOnce) {
@@ -21,7 +22,7 @@ export const template = (props: ActivityHistoryTimeline) => {
       props.historyGroups && props.historyGroups.length > 0
         ? repeat(props.historyGroups, (itemGroup: IActivityHistoryGroup) => {
             return html`
-          <div class="visit" data-date=${itemGroup.items[0]?.date || itemGroup.subGroups[0]?.items[0]?.date}>
+          <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(
@@ -38,7 +39,7 @@ export const template = (props: ActivityHistoryTimeline) => {
                       <div class="diagnostics__items">${repeat(
                         subGroup.items,
                         (item: IActivityHistoryItem) =>
-                          html`<div class="item">${item.componentFactory(item)}</div>  `,
+                          html`<div class="item">${item?.componentFactory(item)}</div>  `,
                       )}</div>
                     </div>
                 `,

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

@@ -0,0 +1,5 @@
+import "./UI/timeline/activity-history-timeline";
+
+export const bootstrapListActivityHistoryItems = () => {
+  () => null;
+};

package/src/internal-plugins/activity-history/{domain → activity-history-item/list}/group-history-items/group-history-items.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from "vitest";
 import { groupActivityHistoryItems } from "./group-history-items";
-import { IActivityHistoryItem } from "../model";
+import { IActivityHistoryItem } from "../../domain/model";
 describe("groupActivityHistoryItems", () => {
   it("should group items by visit and then by diagnostics", () => {
     const items: IActivityHistoryItem[] = [