@uxland/primary-shell 4.1.0 → 4.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",
@@ -24,15 +24,16 @@
   "bugs": {
     "url": "https://github.com/uxland/harmonix/issues"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@uxland/harmonix": "^1.0.5",
+    "@uxland/harmonix-adapters": "^1.0.1"
+  },
   "devDependencies": {
     "@reduxjs/toolkit": "^2.6.1",
-    "@uxland/harmonix-adapters": "^1.0.1",
     "axios": "^1.7.2",
     "date-fns": "^3.6.0",
     "ramda": "^0.30.1",
     "@primaria/plugins-core": "^1.0.14",
-    "@uxland/harmonix": "^1.0.0",
     "@uxland/lit-utilities": "^1.0.0",
     "@uxland/localization": "^1.0.3",
     "@uxland/regions": "^1.0.0",
@@ -40,7 +41,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.1.1.tgz",
+    "@salut/design-system-salut": "../../design-system-salut-2.2.0.tgz",
     "jwt-decode": "^4.0.0",
     "lit": "^3.1.0",
     "mediatr-ts": "^1.2.1",

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

@@ -7,7 +7,7 @@ export interface InjectAsyncHistoryItemsPayload {
   componentFactory: (item: IActivityHistoryItem) => HTMLElement;
   searchPredicate?: (searchString: string, item: IActivityHistoryItem) => boolean;
   errorMessage: string;
-  filters?: IActivityHistoryCommonFilterGroup;
+  filters: IActivityHistoryCommonFilterGroup;
 }
 
 export const addAsyncHistoryItemsCommand = "inject_async_history_items_request";

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

@@ -0,0 +1,43 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+import { connectedProperty } from "../../../../infrastructure/state/connected-property";
+import { lazyInject } from "../../../../infrastructure/ioc/container";
+import { PrimariaApi } from "../../../../../../api/api";
+import { TYPES } from "../../../../infrastructure/ioc/types";
+import { template } from "./template";
+import styles from "./styles.css?inline";
+import {
+  activeGroupsWithEnabledFilters,
+  activityHistoryCustomFilterGroupsSelector,
+} from "../../custom-filters/selectors";
+import { SetCustomFilterValue } from "../../custom-filters/set-custom-filter-value/request";
+import { IActivityHistoryCustomFilterGroup } from "../../model";
+
+//@ts-ignore
+@customElement("active-filters-badges")
+export class ActiveFiltersBadges extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  @lazyInject(TYPES.primaryApi)
+  api: PrimariaApi;
+
+  @connectedProperty(activeGroupsWithEnabledFilters)
+  enabledFilters: IActivityHistoryCustomFilterGroup[];
+
+  _onDeleteFilterValue(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/active-filters-badges/styles.css

@@ -0,0 +1,31 @@
+.filters-container{
+  display: flex;
+  gap: var(--dss-spacing-md);
+}
+
+.filters-header{
+  font-weight: 700;
+}
+
+.filter-groups{
+  display: flex;
+  gap: var(--dss-spacing-xs);
+}
+
+.filter-group{
+  display: flex;
+  gap: var(--dss-spacing-xs);
+  color: var(--color-neutral-600);
+  font-weight: 600;
+}
+
+.popover-content {
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dss-spacing-xs);
+  padding: 10px;
+  max-width: 368px; 
+  max-height: 336px; 
+  overflow: auto;
+}

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

@@ -0,0 +1,79 @@
+import { html, nothing } from "lit";
+import { ActiveFiltersBadges } from "./active-filters-badges";
+import { translate } from "../../../../localization";
+
+const MAX_VISIBLE_CHIPS = 5;
+
+const renderChip = (id, filter, value, props) => html`
+  <dss-chip
+    label=${value}
+    size="sm"
+    hasdelete
+    selected
+    @click=${() => props._onDeleteFilterValue(id, filter.id, value, false)}
+    @onDelete=${() => props._onDeleteFilterValue(id, filter.id, value, false)}
+  ></dss-chip>
+`;
+
+const renderFilterTitle = (title) => html`<div class="filter-title">${`${title}:`}</div>`;
+
+export const template = (props: ActiveFiltersBadges) => {
+  if (props.enabledFilters.length === 0) return nothing;
+
+  let visibleCount = 0;
+  const visibleChips: any[] = [];
+  const hiddenElements: any[] = [];
+  const hiddenChips: any[] = [];
+
+  for (const { title, id, filters } of props.enabledFilters) {
+    let titleAddedToVisible = false;
+    let titleAddedToHidden = false;
+
+    for (const filter of filters) {
+      for (const value of [...new Set(filter.enabledValues)]) {
+        const chip = renderChip(id, filter, value, props);
+
+        if (visibleCount < MAX_VISIBLE_CHIPS) {
+          if (!titleAddedToVisible) {
+            visibleChips.push(renderFilterTitle(title));
+            titleAddedToVisible = true;
+          }
+          visibleChips.push(chip);
+          visibleCount++;
+        } else {
+          if (!titleAddedToHidden) {
+            hiddenElements.push(renderFilterTitle(title));
+            titleAddedToHidden = true;
+          }
+          hiddenElements.push(chip);
+          hiddenChips.push(chip);
+        }
+      }
+    }
+  }
+
+  return html`
+  <div class="filters-container">
+    <div class="filters-header">${translate("chipHeader.selection")}</div>
+    <div class="filter-groups">
+      ${visibleChips}
+      ${
+        hiddenChips.length > 0
+          ? html`
+            <div>
+              <dss-button label="+ ${hiddenChips.length}" size="sm" variant="primary"></dss-button>
+              <dss-popover title=${translate("chipHeader.selection")} position="bottom" popoverFixed>
+                <dss-popover-body slot="body">
+                  <div class="popover-content">
+                    ${hiddenElements}
+                  </div>
+                </dss-popover-body>
+              </dss-popover>
+            </div>
+          `
+          : nothing
+      }
+    </div>
+  </div>
+  `;
+};

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

@@ -0,0 +1,32 @@
+import { LitElement, css, html, unsafeCSS } from "lit";
+import { template } from "./template";
+import styles from "./styles.css?inline";
+import { customElement } from "lit/decorators.js";
+import { connectedProperty } from "../../../../infrastructure/state/connected-property";
+import { activityHistorySearchStringSelector } from "../../../search/selectors";
+import {
+  activityHistoryCustomFilterGroupsSelector,
+  areCustomFiltersActive,
+} from "../../custom-filters/selectors";
+import { IActivityHistoryCustomFilterGroup } from "../../model";
+
+//@ts-ignore
+@customElement("active-filters-header")
+export class ActiveFiltersHeader extends LitElement {
+  render() {
+    return html`${template(this)}`;
+  }
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  @connectedProperty(activityHistorySearchStringSelector)
+  searchString: string;
+
+  @connectedProperty(activityHistoryCustomFilterGroupsSelector)
+  filters: IActivityHistoryCustomFilterGroup[];
+
+  @connectedProperty(areCustomFiltersActive)
+  areCustomFiltersActive: boolean;
+}

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

@@ -0,0 +1,12 @@
+.active-filters-header{
+  display: flex;
+  flex-direction: column;
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: #D8D8D8;
+  background-color: #FFFFFF;
+  padding: var(--dss-spacing-sm) var(--dss-spacing-md);
+  gap: var(--dss-spacing-xs);
+  font-size: 14px;
+  line-height: 24px;
+}

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

@@ -0,0 +1,14 @@
+import { html, nothing } from "lit";
+import { ActiveFiltersHeader } from "./active-filters-header";
+import { when } from "lit/directives/when.js";
+
+export const template = (props: ActiveFiltersHeader) => {
+  if (!props.areCustomFiltersActive && props.searchString.length < 1) return nothing;
+
+  return html`
+    <div class="active-filters-header">
+      <active-filters-badges></active-filters-badges>
+      ${when(props.searchString.length > 1, () => html`<activity-history-search-results searchQuery=${props.searchString}></activity-history-search-results>`)}
+    </div>
+  `;
+};

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

@@ -1,5 +1,6 @@
 import { createSelector } from "@reduxjs/toolkit";
 import {
+  IActivityHistoryCustomFilter,
   IActivityHistoryCustomFilterGroup,
   IActivityHistoryFilterGroup,
   isNotCommonFilterGroup,
@@ -18,3 +19,28 @@ const sortBySortProperty = (
   a: IActivityHistoryCustomFilterGroup,
   b: IActivityHistoryCustomFilterGroup,
 ) => Number(a.sort) - Number(b.sort);
+
+export const areCustomFiltersActive = createSelector(
+  activityHistoryCustomFilterGroupsSelector,
+  (filters: IActivityHistoryCustomFilterGroup[]) => {
+    return filters.some((filter) =>
+      filter.filters.some((singleFilter) => singleFilter.enabledValues?.length),
+    );
+  },
+);
+
+export const activeGroupsWithEnabledFilters = createSelector(
+  activityHistoryCustomFilterGroupsSelector,
+  (filters: IActivityHistoryCustomFilterGroup[]) => {
+    return filters
+      .filter((group) => group.enabled)
+      .map(({ id, title, enabled, sort, filters }) => ({
+        id,
+        title,
+        enabled,
+        sort,
+        filters: filters.filter((filter) => filter.enabledValues?.length),
+      }))
+      .filter((group) => group.filters.length > 0);
+  },
+);

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

@@ -33,7 +33,7 @@ export const template = (props: ActivityHistoryMain) =>
         <div class="wrapper" ?maximized=${props.maximized}>
           <activity-history-filters .wrapperMaximized=${props.maximized}></activity-history-filters>
           <div class="content">
-            ${when(props.searchQuery.length > 1, () => html`<activity-history-search-header searchQuery="${props.searchQuery}"></activity-history-search-header>`)}
+            <active-filters-header></active-filters-header>
             <activity-history-busy></activity-history-busy>
             <activity-history-timeline></activity-history-timeline>
           </div>  

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

@@ -1,4 +1,5 @@
 import "./UI/timeline/activity-history-timeline";
+import "../filter/UI/active-filters-header/active-filters-header";
 
 export const bootstrapListActivityHistoryItems = () => {
   () => null;

package/src/internal-plugins/activity-history/activity-history-item/search/activity-history-search-results/styles.css

@@ -1,14 +1,5 @@
 .search-header {
-  padding-inline: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
-  gap: var(--dss-spacing-xs);
-  border-width: 0px 0px 1px 0px;
-  border-style: solid;
-  border-color: #D8D8D8;
-  background-color: #FFFFFF;
   color: var(--color-neutral-900);
   font-weight: 600;
-  font-size: 14px;
-  line-height: 24px;
+
 }

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

@@ -4,6 +4,7 @@ import { SearchActivityHistoryItems } from "./request";
 import { BrokerDisposableHandler } from "../../../../api/broker/primaria-broker";
 import "./activity-history-search-results/activity-history-search-results";
 import "./activity-history-search-bar/activity-history-search-bar";
+import "../filter/UI/active-filters-badges/active-filters-badges";
 
 let request: BrokerDisposableHandler;
 

package/src/internal-plugins/activity-history/localization.ts

@@ -54,14 +54,15 @@ export const locales = {
         allActivityHistory: "Tot l’històric d’activitat",
         onlyAppliedFilters: "Només amb filtres aplicats",
         selectDateRange: "En el cas que sigui necessari, selecciona un rang de dates",
-        helpText: "Sense seleccionar data, s'aplicarà la de la primera entrada. Sense seleccionar data de fi, s'aplicarà la de l'última entrada.",
+        helpText:
+          "Sense seleccionar data, s'aplicarà la de la primera entrada. Sense seleccionar data de fi, s'aplicarà la de l'última entrada.",
         startDate: "Data Inici",
         endDate: "Data Fi",
         cancel: "Cancel·lar",
         export: "Exportar",
       },
       filters: {
-        filters: "Filtres",  
+        filters: "Filtres",
         searchFilter: "Cercar filtre",
         ownFilters: "Els meus",
         rellevantFilters: "Rellevants",
@@ -84,6 +85,9 @@ export const locales = {
         variablees: "Variables",
         prescriptions: "Prescripcions",
       },
+      chipHeader: {
+        selection: "Selecció:",
+      },
     },
   },
 };