@uxland/primary-shell 3.5.3 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "3.5.3",
+  "version": "4.0.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
-    "@uxland/harmonix": "^1.0.0",
-    "@uxland/harmonix-adapters": "^1.0.1",
+    "@uxland/harmonix": "^1.1.0",
+    "@uxland/harmonix-adapters": "^2.0.0",
     "axios": "^1.7.2",
     "date-fns": "^3.6.0",
     "inversify": "^6.0.2",
@@ -44,7 +44,7 @@
     "axios-mock-adapter": "^2.0.0",
     "inversify": "^6.0.2",
     "inversify-inject-decorators": "^3.1.0",
-    "@salut/design-system-salut": "../../design-system-salut-2.0.5.tgz",
+    "@salut/design-system-salut": "../../design-system-salut-2.1.1.tgz",
     "jwt-decode": "^4.0.0",
     "lit": "^3.1.0",
     "mediatr-ts": "^1.2.1",

package/src/UI/components/shell-header/template.ts

@@ -1,6 +1,8 @@
 import { html } from "lit";
 import salutLogo from "../../../UI/images/Salut_Logotip.svg";
 import { ShellHeader } from "./shell-header";
+import { when } from "lit/directives/when.js";
+import {translate} from '../../../locales';
 
 export const template = (props: ShellHeader) => {
   const workCenterElements = [{ label: props.professional?.workCenter, value: "1" }];
@@ -17,21 +19,24 @@ export const template = (props: ShellHeader) => {
     </div>
     <div class="header__right">
       <div id="header-actions-region-container"></div>
-      <dss-header-menu-professional slot="professional-menu" name="${props.professional?.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional?.workCenter}" collegiate="${props.professional?.registrationNumber}">
-        <dss-avatar size="xl" name="${props.professional?.firstName}" surname="${props.professional?.familyName}" slot="avatar"></dss-avatar>
+      ${when(
+        props.professional,
+        () => html`<dss-header-menu-professional slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">
+        <dss-avatar size="xl" name="${props.professional.firstName}" surname="${props.professional?.familyName}" slot="avatar"></dss-avatar>
         <dss-input-dropdown icon="maps_home_work" type="default" .elements=${workCenterElements} selectedvalue="[&quot;1&quot;]">
-            <label slot="label" for="preferences1">Centre treball</label>
+            <label slot="label" for="preferences1">${translate("header.workCenter")}</label>
             <input id="preferences1" slot="input" type="text" class="dss-input" readonly="">
         </dss-input-dropdown>
         <dss-input-dropdown icon="business_center" type="default" .elements=${roleElements} selectedvalue="[&quot;1&quot;]">
-          <label slot="label" for="preferences2">Rol</label>
+          <label slot="label" for="preferences2">${translate("header.role")}</label>
           <input id="preferences2" slot="input" type="text" class="dss-input" readonly="">
         </dss-input-dropdown>
         <dss-input-dropdown icon="people_alt" type="default" .elements=${specialityElements} selectedvalue="[&quot;1&quot;]">
-          <label slot="label" for="preferences3">Ambit treball</label>
+          <label slot="label" for="preferences3">${translate("header.speciality")}</label>
           <input id="preferences3" slot="input" type="text" class="dss-input" readonly="">
         </dss-input-dropdown>
-      </dss-header-menu-professional>
+      </dss-header-menu-professional>`,
+      )}
     </div>
   </div>
 `;

package/src/UI/shared-components/index.ts

@@ -2,3 +2,4 @@ import "./primaria-content-switcher/primaria-content-switcher";
 import "./primaria-nav-item/primaria-nav-item";
 import "./primaria-text-editor/primaria-rich-text-editor";
 export * from "./primaria-interaction";
+export { PrimariaContentSwitcher } from "./primaria-content-switcher/primaria-content-switcher";

package/src/index.ts

@@ -5,7 +5,7 @@ export * from "./api/region-manager/regions";
 export * from "./handle-plugins";
 export * from "./api/api";
 export * from "./api/broker/primaria-broker";
-import "./UI/index";
+export * from "./UI/index";
 export { PrimariaNavItem } from "./UI/shared-components/primaria-nav-item/primaria-nav-item";
 export { confirmMixin } from "./UI/shared-components/primaria-interaction";
 export type { CustomConfirmOptions } from "./UI/shared-components/primaria-interaction";

package/src/internal-plugins/activity-history/activity-history-item/add/add-async-history-items/bootstrapper.ts

@@ -1,12 +1,12 @@
 import { BrokerExtensions } from "@primaria/plugins-core";
-import { injectAsyncHistoryItemsRequest } from "./request";
+import { addAsyncHistoryItemsCommand } from "./request";
 import { InjectAsyncHistoryItemsHandler } from "./handler";
 import { BrokerDisposableHandler } from "../../../../../api/broker/primaria-broker";
 
 let request: BrokerDisposableHandler;
 
 export const bootstrapInjectAsyncHistoryItems = (broker: BrokerExtensions) => {
-  request = broker.registerRequest(injectAsyncHistoryItemsRequest, InjectAsyncHistoryItemsHandler);
+  request = broker.registerRequest(addAsyncHistoryItemsCommand, InjectAsyncHistoryItemsHandler);
 };
 
 export const teardownInjectAsyncHistoryItems = () => {

package/src/internal-plugins/activity-history/activity-history-item/add/add-async-history-items/handler.ts

@@ -1,21 +1,22 @@
 import { BaseHandler } from "../../../infrastructure/base-handlers";
+import { AddCustomFiltersCommand } from "../../filter/custom-filters/add-custom-filters/request";
 import { addBusyHistoryItem, removeBusyHistoryItem } from "../../list/handle-busy/actions";
 import { addErrorHistoryItem } from "../../list/handle-error/actions";
-import { addHistoryItemsRequest } from "../add-history-items/request";
+import { addHistoryItemsCommand } from "../add-history-items/request";
 import { InjectAsyncHistoryItemsPayload } from "./request";
 
 export class InjectAsyncHistoryItemsHandler extends BaseHandler {
   async handle(payload: InjectAsyncHistoryItemsPayload) {
     this.store.dispatch(addBusyHistoryItem(payload.entityId));
     try {
-      let items = await payload.asyncTask();
-      if (payload.mapFn) items = items.map(payload.mapFn);
-      this.api.broker.send(addHistoryItemsRequest, {
+      const items = await payload.asyncDataProvider();
+      this.api.broker.send(addHistoryItemsCommand, {
         entityId: payload.entityId,
         items,
         componentFactory: payload.componentFactory,
         searchPredicate: payload.searchPredicate,
       });
+      payload.filters ? this.api.broker.send(new AddCustomFiltersCommand(payload.filters)) : null;
     } catch (e) {
       this.store.dispatch(
         addErrorHistoryItem({ id: payload.entityId, message: payload.errorMessage || e.message }),

package/src/internal-plugins/activity-history/activity-history-item/add/add-async-history-items/request.ts

@@ -1,12 +1,13 @@
 import { IActivityHistoryItem } from "../../domain/model";
+import { IActivityHistoryCommonFilterGroup } from "../../filter";
 
 export interface InjectAsyncHistoryItemsPayload {
   entityId: string;
-  asyncTask: () => Promise<any>;
-  mapFn?: (item: any) => any;
+  asyncDataProvider: () => Promise<IActivityHistoryItem[]>;
   componentFactory: (item: IActivityHistoryItem) => HTMLElement;
-  searchPredicate?: (searchString: string, item: any) => boolean;
+  searchPredicate?: (searchString: string, item: IActivityHistoryItem) => boolean;
   errorMessage: string;
+  filters?: IActivityHistoryCommonFilterGroup;
 }
 
-export const injectAsyncHistoryItemsRequest = "inject_async_history_items_request";
+export const addAsyncHistoryItemsCommand = "inject_async_history_items_request";

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

@@ -1,12 +1,12 @@
 import { BrokerExtensions } from "@primaria/plugins-core";
 import { AddHistoryItemHandler } from "./handler";
-import { addHistoryItemRequest } from "./request";
+import { addHistoryItemCommand } from "./request";
 import { BrokerDisposableHandler } from "../../../../../api/broker/primaria-broker";
 
 let request: BrokerDisposableHandler;
 
 export const bootstrapAddHistoryItem = (broker: BrokerExtensions) => {
-  request = broker.registerRequest(addHistoryItemRequest, AddHistoryItemHandler);
+  request = broker.registerRequest(addHistoryItemCommand, AddHistoryItemHandler);
 };
 
 export const teardownAddHistoryItem = () => {

package/src/internal-plugins/activity-history/activity-history-item/add/add-history-item/request.ts

@@ -5,4 +5,4 @@ export interface AddHistoryItemPayload {
   item: IActivityHistoryItem;
 }
 
-export const addHistoryItemRequest = "add_history_item_request";
+export const addHistoryItemCommand = "add_history_item_request";

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

@@ -1,12 +1,12 @@
 import { BrokerExtensions } from "@primaria/plugins-core";
 import { AddHistoryItemsHandler } from "./handler";
-import { addHistoryItemsRequest } from "./request";
+import { addHistoryItemsCommand } from "./request";
 import { BrokerDisposableHandler } from "../../../../../api/broker/primaria-broker";
 
 let request: BrokerDisposableHandler;
 
 export const bootstrapAddHistoryItems = (broker: BrokerExtensions) => {
-  request = broker.registerRequest(addHistoryItemsRequest, AddHistoryItemsHandler);
+  request = broker.registerRequest(addHistoryItemsCommand, AddHistoryItemsHandler);
 };
 
 export const teardownAddHistoryItems = () => {

package/src/internal-plugins/activity-history/activity-history-item/add/add-history-items/request.ts

@@ -7,4 +7,4 @@ export interface AddHistoryItemsPayload {
   searchPredicate?: (searchString: string, item: any) => boolean;
 }
 
-export const addHistoryItemsRequest = "add_history_items_request";
+export const addHistoryItemsCommand = "add_history_items_request";

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

@@ -0,0 +1,18 @@
+import { IActivityHistoryCommonFilter } from "../../filter";
+import { IActivityHistoryItem } from "../model";
+import { Spec } from "./spec";
+import { TrueSpec } from "./true-spec";
+
+export class CommonFilterSpec extends Spec<IActivityHistoryItem> {
+  constructor(private commonFilters: IActivityHistoryCommonFilter[]) {
+    super();
+  }
+
+  isSatisfiedBy(item: IActivityHistoryItem): boolean {
+    const enabledCommonFilters = this.commonFilters.filter((f) => f.enabled);
+    const finalCommonSpec = enabledCommonFilters.reduce((acc, filter) => {
+      return acc.and(new filter.spec());
+    }, new TrueSpec());
+    return finalCommonSpec.isSatisfiedBy(item);
+  }
+}

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

@@ -0,0 +1,59 @@
+import { IActivityHistoryCommonFilterGroup, IActivityHistoryCustomFilterGroup } from "../../filter";
+import { IActivityHistoryItem } from "../model";
+import { FalseSpec } from "./false-spec";
+import { PropPathSpec } from "./prop-path-spec";
+import { Spec } from "./spec";
+
+export class CustomFilterSpec extends Spec<IActivityHistoryItem> {
+  constructor(private filters: IActivityHistoryCustomFilterGroup[]) {
+    super();
+  }
+
+  isSatisfiedBy(item: IActivityHistoryItem): boolean {
+    const enabledGroups = this.filters.filter((group) => group.enabled);
+
+    if (enabledGroups.length === 0) {
+      return true; // No hay filtros activados, se aceptan todos los items
+    }
+
+    return enabledGroups.every((group) => {
+      if (!this.belongsToGroup(item, group)) {
+        return true;
+      }
+
+      const enabledFilters = group.filters.filter(
+        (filter) => filter.enabled || filter.singleOption,
+      );
+
+      if (enabledFilters.length === 0) {
+        return true;
+      }
+
+      return enabledFilters.every((filter) => {
+        if (filter.singleOption) {
+          // Si el filtro booleano está DESACTIVADO, debe filtrar los elementos con ese valor
+          return !filter.enabled
+            ? new PropPathSpec(filter.propPathValue, false).isSatisfiedBy(item)
+            : true; // Si está activado, no filtra nada
+        }
+
+        if (!filter.enabledValues || filter.enabledValues.length === 0) {
+          return true;
+        }
+
+        const propSpec = filter.enabledValues.reduce((acc, value) => {
+          return acc.or(new PropPathSpec(filter.propPathValue, value));
+        }, new FalseSpec());
+
+        return propSpec.isSatisfiedBy(item);
+      });
+    });
+  }
+
+  private belongsToGroup(
+    item: IActivityHistoryItem,
+    group: IActivityHistoryCustomFilterGroup,
+  ): boolean {
+    return item.type === group.id;
+  }
+}

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

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

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

@@ -0,0 +1,19 @@
+import { IActivityHistoryItem } from "../model";
+import { Spec } from "./spec";
+
+export class PropPathSpec extends Spec<IActivityHistoryItem> {
+  constructor(
+    public propPath: string[],
+    private value: any,
+  ) {
+    super();
+  }
+
+  isSatisfiedBy(context: IActivityHistoryItem): boolean {
+    // Reducir el context siguiendo el path hasta llegar al valor final
+    const propValue = this.propPath.reduce((acc, key) => acc?.[key], context);
+
+    // Comparar con el valor esperado
+    return propValue === this.value;
+  }
+}

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

@@ -0,0 +1,26 @@
+import { IActivityHistoryCustomFilterGroup } from "../../filter";
+import { IActivityHistoryItem } from "../model";
+import { FalseSpec } from "./false-spec";
+import { Spec } from "./spec";
+
+export class TypeSpec extends Spec<IActivityHistoryItem> {
+  constructor(public itemType: string) {
+    super();
+  }
+  isSatisfiedBy(context: IActivityHistoryItem): boolean {
+    return context?.type === this.itemType;
+  }
+}
+
+export class ComposedTypeSpec extends Spec<IActivityHistoryItem> {
+  constructor(public filters: IActivityHistoryCustomFilterGroup[]) {
+    super();
+  }
+  isSatisfiedBy(item: IActivityHistoryItem): boolean {
+    const enabledGroupTypes = this.filters.filter((f) => f.enabled).map((f) => f.id);
+    const finalSpec = enabledGroupTypes.reduce((acc, groupId) => {
+      return acc.or(new TypeSpec(groupId));
+    }, new FalseSpec());
+    return finalSpec.isSatisfiedBy(item);
+  }
+}

package/src/internal-plugins/activity-history/activity-history-item/export-to-pdf/export-pdf-modal/export-pdf-modal.css

@@ -43,8 +43,8 @@ dss-datepicker {
     width: 234px;
     height: 48px;
     border-radius: var(--dss-radius-sm);
-    border: var(--dds-border-width-sm);
-    padding: var(--dds-spacing-sm);
-    gap: var(--dds-spacing-xs);
+    border: var(--dss-border-width-sm);
+    padding: var(--dss-spacing-sm);
+    gap: var(--dss-spacing-xs);
     color: var(--color-neutral-100);
 }

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

@@ -37,8 +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. 
-                    Sense seleccionar data de fi, s'aplicarà la de l'última entrada.">
+                  }} helpText=${translate("modal.helpText")}>
                     <label slot="label-range-start" for="myDatepickerRangeStart">${translate("modal.startDate")}</label>
                     <input slot="input-range-start" id="myDatepickerRangeStart" type="text" class="dss-input">
                     <label slot="label-range-end" for="myDatepickerRangeEnd">${translate("modal.endDate")}</label>

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

@@ -1,14 +1,17 @@
 import { LitElement, css, html, unsafeCSS } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, 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 { IActivityHistoryCommonFilter, IActivityHistoryCustomFilterGroup } from "../../model";
 import styles from "./styles.css?inline";
 import { template } from "./template";
-import { activityHistoryCommonFiltersSelector } from "../../selectors";
-import { SetCommonFilter } from "../../set-common-filter/request";
+import { SetCustomFilterGroup } from "../../custom-filters/set-custom-filter-group/request";
+import { SetCommonFilter } from "../../common-filters/set-common-filter/request";
+import { activityHistoryCommonFiltersSelector } from "../../common-filters/selectors";
+import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
+import { customFilterGroupsWithOptionsSelector } from "../../../selectors";
 
 //@ts-ignore
 @customElement("activity-history-filters")
@@ -22,7 +25,10 @@ export class ActivityHistoryFilters extends LitElement {
   `;
 
   @connectedProperty(activityHistoryCommonFiltersSelector)
-  filters: IActivityHistoryFilter[];
+  commonFilters: IActivityHistoryCommonFilter[];
+
+  @connectedProperty(customFilterGroupsWithOptionsSelector)
+  customFilterGroups: IActivityHistoryCustomFilterGroup[];
 
   @lazyInject(TYPES.primaryApi)
   api: PrimariaApi;
@@ -30,6 +36,15 @@ export class ActivityHistoryFilters extends LitElement {
   @state()
   filtersExpanded = false;
 
+  @property({ type: Boolean })
+  wrapperMaximized: boolean;
+
+  updated(changedProperties) {
+    if (changedProperties.has("wrapperMaximized")) {
+      this.filtersExpanded = this.wrapperMaximized;
+    }
+  }
+
   _toggleFilters() {
     this.filtersExpanded = !this.filtersExpanded;
   }
@@ -37,4 +52,24 @@ export class ActivityHistoryFilters extends LitElement {
   _onChangeCommonFilterValue(filterId: string, value: boolean) {
     this.api.broker.send(new SetCommonFilter({ id: filterId, enabled: value }));
   }
+
+  _onChangeCustomFilterGroupValue(filterGroupId: string, value: boolean) {
+    this.api.broker.send(new SetCustomFilterGroup({ id: filterGroupId, enabled: value }));
+  }
+
+  _onChangeCustomFilterValue(
+    filterGroupId: string,
+    filterId: string,
+    optionId: string,
+    value: boolean,
+  ) {
+    this.api.broker.send(
+      new SetCustomFilterValue({
+        filterGroupId,
+        filterId,
+        optionId,
+        enabled: value,
+      }),
+    );
+  }
 }

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

@@ -26,14 +26,30 @@
 
 
 .filter-container{
-      display: flex;
+    display: flex;
     flex-direction: column;
     padding: 16px 8px 8px 8px;
-
-    
+    overflow:auto;
 }
 
 .filter-container .filter{
   padding: 8px 0;
       border-bottom: 1px solid var(--color-neutral-200);
-    }
+}
+
+.filter-group{
+    display: flex;
+    flex-direction: column;
+    padding-top: 12px;
+
+    .custom-filter{
+      display: flex;
+      flex-direction: column;
+      padding: 6px 8px 6px var(--dss-spacing-xl);
+
+      .custom-filter-content{
+        display: flex;
+        flex-direction: column;
+      }
+    }
+}

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

@@ -1,19 +1,57 @@
 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 {
+  ActivityHistoryFilterType,
+  IActivityHistoryCommonFilter,
+  IActivityHistoryCustomFilter,
+  IActivityHistoryCustomFilterGroup,
+  IActivityHistoryFilterGroup,
+} from "../../model";
 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>`;
-  }
+const filterTemplates = {
+  [ActivityHistoryFilterType.Switch]: (id, title, handleChange, isSelected, isEnabled) => html`
+    <dss-input-switch size="sm" .checked=${isSelected} @onChangeValue=${handleChange} >
+      <input slot="input" id="switch-${id}" aria-label=${title} type="checkbox" ?disabled=${!isEnabled}>
+      <label slot="label" for="switch-${id}">${title}</label>
+    </dss-input-switch>`,
+
+  [ActivityHistoryFilterType.Checkbox]: (id, title, handleChange, isSelected, isEnabled) => html`
+    <dss-checkbox variant="default" .checked=${isSelected} @onChange=${(e) => handleChange(e)}> 
+      <input slot="input" id="checkboxStory-${id}" type="checkbox" ?disabled=${!isEnabled}>
+      <label slot="label" for="checkboxStory-${id}">${title}</label>
+    </dss-checkbox>`,
+};
+
+const getFilterTemplate = (
+  filter: IActivityHistoryCommonFilter | IActivityHistoryCustomFilter,
+  onChangeValue: (...args: any[]) => void,
+  filterGroup?: IActivityHistoryFilterGroup,
+  option?: { id: string; title: string },
+) => {
+  const isCustom = !!filterGroup?.id && !!option;
+  //const id = isCustom ? `${filterGroupId}-${filter.id}-${option.id}` : filter.id;
+  const id = crypto.randomUUID();
+  const title = isCustom ? option.title : filter.title;
+
+  const handleChange = (e) => {
+    if (filter.singleOption) onChangeValue(filterGroup?.id, filter.id, null, e.detail);
+    else if (isCustom && option) onChangeValue(filterGroup?.id, filter.id, option.id, e.detail);
+    else onChangeValue(filter.id, e.detail);
+  };
+
+  const isSelected =
+    isCustom && option
+      ? (filter as IActivityHistoryCustomFilter).enabledValues?.includes(option.id)
+      : filter.enabled;
+
+  const isEnabled =
+    (isCustom && option) || filter.singleOption
+      ? (filterGroup as IActivityHistoryCustomFilterGroup).enabled
+      : true;
+
+  return filterTemplates[filter.type]?.(id, title, handleChange, isSelected, isEnabled) || html``;
 };
 
 export const template = (props: ActivityHistoryFilters) =>
@@ -21,10 +59,44 @@ export const template = (props: ActivityHistoryFilters) =>
   <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> `)}
+          ? html`<div class="filters-sidebar-opened">${translate("filters.filters")}<dss-icon-button ?hidden=${props.wrapperMaximized} @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_left"></dss-icon-button></div>
+          <div class="filter-container">
+                  ${repeat(props.commonFilters, (filter: IActivityHistoryCommonFilter) => html`<div class="filter">${getFilterTemplate(filter, props._onChangeCommonFilterValue.bind(props))}</div> `)}
+                  ${repeat(
+                    props.customFilterGroups,
+                    (group: IActivityHistoryCustomFilterGroup) => html`
+                  <div class="filter-group">
+                    <dss-input-switch size="sm" .checked=${group.enabled} @onChangeValue=${(e) => props._onChangeCustomFilterGroupValue(group.id, e.detail)}>
+                      <input slot="input" id="switch-${group.id}" aria-label=${group.title} type="checkbox">
+                      <label slot="label" for="switch-${group.id}">${group.title}</label>
+                    </dss-input-switch>
+                    ${
+                      group?.filters &&
+                      repeat(group.filters, (filter: IActivityHistoryCustomFilter) =>
+                        customFilterTemplate(filter, props, group),
+                      )
+                    }
+                  </div> `,
+                  )}
                 </div> `
           : html`<dss-icon-button @click=${() => props._toggleFilters()} size="md" variant="primary" icon="keyboard_double_arrow_right"></dss-icon-button>`
       }
   </div>
   `;
+
+const customFilterTemplate = (
+  filter: IActivityHistoryCustomFilter,
+  props: ActivityHistoryFilters,
+  group: IActivityHistoryCustomFilterGroup,
+) =>
+  html`
+    <div class="custom-filter">
+      ${
+        filter.singleOption
+          ? getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group)
+          : html`<div class="custom-filter-title">${filter.title}</div>
+                <div class="custom-filter-content">${repeat(filter.options, (option) => html`${getFilterTemplate(filter, props._onChangeCustomFilterValue.bind(props), group, option)}`)}</div>`
+      }
+      
+    </div>
+  `;

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

@@ -3,12 +3,30 @@ import "../../activity-history-item/filter/UI/activity-history-filters/activity-
 import {
   bootstrapSetCommonFilter,
   teardownSetCommonFilter,
-} from "./set-common-filter/bootstrapper";
+} from "./common-filters/set-common-filter/bootstrapper";
+import {
+  bootstrapAddCustomFilter,
+  teardownAddCustomFilter,
+} from "./custom-filters/add-custom-filters/bootstrapper";
+import {
+  bootstrapSetCustomFilterGroup,
+  teardownSetCustomFilterGroup,
+} from "./custom-filters/set-custom-filter-group/bootstrapper";
+import {
+  bootstrapSetCustomFilterValue,
+  teardownSetCustomFilterValue,
+} from "./custom-filters/set-custom-filter-value/bootstrapper";
 
 export const bootstrapFilters = (broker: BrokerExtensions) => {
   bootstrapSetCommonFilter(broker);
+  bootstrapAddCustomFilter(broker);
+  bootstrapSetCustomFilterGroup(broker);
+  bootstrapSetCustomFilterValue(broker);
 };
 
 export const teardownFilters = () => {
   teardownSetCommonFilter();
+  teardownAddCustomFilter();
+  teardownSetCustomFilterGroup();
+  teardownSetCustomFilterValue();
 };

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

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