@uxland/primary-shell 3.5.1 → 3.5.3

package/src/internal-plugins/activity-history/activity-history-item/domain/specs/spec.ts

@@ -0,0 +1,54 @@
+export interface ISpec<TContext> {
+  isSatisfiedBy(context: TContext): boolean;
+  and(spec: ISpec<TContext>): ISpec<TContext>;
+  or(spec: ISpec<TContext>): ISpec<TContext>;
+  not(): ISpec<TContext>;
+}
+
+
+export abstract class Spec<TContext> implements ISpec<TContext> {
+  abstract isSatisfiedBy(context: TContext): boolean;
+  and(spec: ISpec<TContext>): ISpec<TContext> {
+    return new AndSpec(this as unknown as ISpec<TContext>, spec);
+  }
+    or(spec: ISpec<TContext>): ISpec<TContext> {
+        return new OrSpec(this as unknown as ISpec<TContext>, spec);
+    }
+    not(): ISpec<TContext> {
+      return new NotSpec(this as unknown as ISpec<TContext>);
+    }
+}
+export class AndSpec<TContext> extends Spec<TContext> {
+  constructor(
+    private left: ISpec<TContext>,
+    private right: ISpec<TContext>,
+  ) {
+    super();
+  }
+  isSatisfiedBy(context: TContext): boolean {
+    return this.left.isSatisfiedBy(context) && this.right.isSatisfiedBy(context);
+  }
+}
+
+export class OrSpec<TContext> extends Spec<TContext> {
+  constructor(
+    private left: ISpec<TContext>,
+    private right: ISpec<TContext>,
+  ) {
+    super();
+  }
+
+  isSatisfiedBy(context: TContext): boolean {
+    return this.left.isSatisfiedBy(context) || this.right.isSatisfiedBy(context);
+  }
+}
+
+export class NotSpec<TContext> extends Spec<TContext> {
+  constructor(private spec: ISpec<TContext>) {
+    super();
+  }
+
+  isSatisfiedBy(context: TContext): boolean {
+    return !this.spec.isSatisfiedBy(context);
+  }
+}

package/src/internal-plugins/activity-history/activity-history-item/domain/specs/true-spec.ts

@@ -0,0 +1,8 @@
+import { IActivityHistoryItem } from "../model";
+import { Spec } from "./spec";
+
+export class TrueSpec extends Spec<IActivityHistoryItem> {
+  isSatisfiedBy(): boolean {
+    return true;
+  }
+}

package/src/internal-plugins/activity-history/{features → activity-history-item}/export-to-pdf/bootstrapper.ts

@@ -2,6 +2,7 @@ import { BrokerExtensions } from "plugins/core";
 import { ExportToPdfHandler } from "./handler";
 import { ExportPdf } from "./request";
 import { BrokerDisposableHandler } from "../../../../api/broker/primaria-broker";
+import "./export-pdf-modal/export-pdf-modal";
 
 let request: BrokerDisposableHandler;
 
@@ -9,6 +10,6 @@ export const bootstrapExportPdf = (broker: BrokerExtensions) => {
   request = broker.registerRequest(ExportPdf, ExportToPdfHandler);
 };
 
-export const teardownExportPdf = (broker: BrokerExtensions) => {
+export const teardownExportPdf = () => {
   request?.dispose();
 };

package/src/internal-plugins/activity-history/{components → activity-history-item/export-to-pdf}/export-pdf-modal/export-pdf-modal.ts

@@ -2,7 +2,7 @@ import { LitElement, css, html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import styles from "./export-pdf-modal.css?inline";
 import { template } from "./template";
-import { confirmMixin } from "../../../../index";
+import { confirmMixin } from "../../../../../UI/shared-components/primaria-interaction/confirm-mixin";
 
 @customElement("export-pdf-modal")
 export class ExportPdfModal extends confirmMixin(LitElement) {
@@ -49,7 +49,7 @@ export class ExportPdfModal extends confirmMixin(LitElement) {
   handleTest() {
     console.log(
       // this.selectedVisibilityLevelElement,
-      this.selectedPeriodDate
+      this.selectedPeriodDate,
     );
   }
 }

package/src/internal-plugins/activity-history/{components → activity-history-item/export-to-pdf}/export-pdf-modal/template.ts

@@ -1,6 +1,6 @@
 import { html, nothing } from "lit";
 import { ExportPdfModal } from "./export-pdf-modal";
-import { translate } from "../../localization";
+import { translate } from "../../../localization";
 
 export const template = (props: ExportPdfModal) => {
   const { arrayElements, text } = props;
@@ -18,14 +18,14 @@ export const template = (props: ExportPdfModal) => {
               <div class="selector-options">
                 <dss-radio-button>
                   <input slot="input" id="radioButton1" type="radio" name="exportOption" @change=${() => {
-                  props.selectedRadioOption = "history";
+                    props.selectedRadioOption = "history";
                   }}>
                   <label slot="label" for="radioButton1">${translate("modal.allActivityHistory")}</label>
                 </dss-radio-button>
                 <dss-radio-button>
                   <input slot="input" id="radioButton2" type="radio" name="exportOption" @change=${() => {
-                  props.selectedRadioOption = "filters";
-                }}>
+                    props.selectedRadioOption = "filters";
+                  }}>
                   <label slot="label" for="radioButton2">${translate("modal.onlyAppliedFilters")}</label>
                 </dss-radio-button>
               </div>
@@ -37,7 +37,7 @@ export const template = (props: ExportPdfModal) => {
                 <div class="datepicker-canvas">
                   <dss-datepicker-range inputsize="md" @onRangeChange=${(e) => {
                     props.selectedPeriodDate = e.detail;
-                    }} helpText="Sense seleccionar data, s'aplicarà la de la primera entrada. 
+                  }} helpText="Sense seleccionar data, s'aplicarà la de la primera entrada. 
                     Sense seleccionar data de fi, s'aplicarà la de l'última entrada.">
                     <label slot="label-range-start" for="myDatepickerRangeStart">${translate("modal.startDate")}</label>
                     <input slot="input-range-start" id="myDatepickerRangeStart" type="text" class="dss-input">

package/src/internal-plugins/activity-history/{features → activity-history-item}/export-to-pdf/handler.ts

@@ -1,10 +1,7 @@
-import { inject } from "inversify";
-import { TYPES } from "../../infrastructure/ioc/types";
-import { ExportPdfModal } from "../../components/export-pdf-modal/export-pdf-modal";
-import { PrimariaApi } from "../../../../api/api";
+import { ApiBaseHandler } from "../../infrastructure/base-handlers";
+import { ExportPdfModal } from "./export-pdf-modal/export-pdf-modal";
 
-export class ExportToPdfHandler {
-  constructor(@inject(TYPES.primaryApi) private api: PrimariaApi) {}
+export class ExportToPdfHandler extends ApiBaseHandler {
   async handle() {
     try {
       this.api.interactionManager.customConfirm({

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" @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" @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">