@startinblox/components-ds4go 3.0.3 → 3.1.0

package/src/components/catalog/ds4go-catalog-filter-holder.ts

@@ -0,0 +1,459 @@
+import { sort } from "@helpers";
+import { msg } from "@lit/localize";
+import type { Resource } from "@src/component";
+import {
+  TemsObjectsHandler,
+  type TemsSearchObject,
+} from "@startinblox/solid-tems-shared";
+import {
+  css,
+  html,
+  nothing,
+  type PropertyValues,
+  type TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("ds4go-catalog-filter-holder")
+export class DS4GOCatalogFilterHolder extends TemsObjectsHandler {
+  static styles = css`
+    .filter-bar {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 2, 49, 0.2);
+      z-index: 9999;
+      display: flex;
+      justify-content: flex-end;
+    }
+  `;
+
+  @property({ attribute: false })
+  displayFiltering = false;
+
+  search: TemsSearchObject[] = [];
+
+  @state()
+  protected _internalFilters: TemsSearchObject[] = [];
+
+  @state()
+  displayFilters = false;
+
+  @state()
+  resultCount = 0;
+
+  @state()
+  filterCount = 0;
+
+  @state()
+  view: "card" | "list" | "table" | "map" = "card";
+
+  @state()
+  protected _accordionStates: { [key: string]: boolean } = {};
+
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("search")) {
+      this._internalFilters = [...this.search];
+    }
+  }
+
+  protected shouldUpdate(changedProperties: PropertyValues): boolean {
+    if (changedProperties.has("_accordionStates")) {
+      return true;
+    }
+    if (
+      changedProperties.has("search") ||
+      changedProperties.has("_internalFilters")
+    ) {
+      return false;
+    }
+    return super.shouldUpdate(changedProperties);
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("displayFilters") && this.displayFilters) {
+      const needsInitialization =
+        !changedProperties.get("displayFilters") ||
+        Object.keys(this._accordionStates).length === 0;
+
+      if (needsInitialization) {
+        const initialStates: { [key: string]: boolean } = {};
+        const filters = this._getFiltersDefinition();
+        for (const filter of filters) {
+          let condition = true;
+          if (filter.type && typeof filter.type === "string") {
+            condition = this.hasType(filter.type, this.objects);
+          } else if (filter.type && Array.isArray(filter.type)) {
+            condition = filter.type
+              .flat()
+              .some((typeString) => this.hasType(typeString, this.objects));
+          }
+
+          if (condition && filter.condition()) {
+            initialStates[filter.name] = !!this._internalFilters.find(
+              (f: TemsSearchObject) => f.name === filter.name,
+            );
+          } else {
+            initialStates[filter.name] = false;
+          }
+        }
+        if (
+          JSON.stringify(this._accordionStates) !==
+          JSON.stringify(initialStates)
+        ) {
+          this._accordionStates = initialStates;
+        }
+      }
+    }
+  }
+
+  protected shouldUpdateSearch() {
+    this.dispatchEvent(
+      new CustomEvent("search", { detail: this._internalFilters }),
+    );
+  }
+
+  protected _toggleChangeView(e: Event) {
+    e.preventDefault();
+    this.dispatchEvent(
+      new CustomEvent("change-view", {
+        detail: e.detail,
+      }),
+    );
+  }
+
+  protected _displayFilters() {
+    this.displayFilters = !this.displayFilters;
+  }
+
+  protected _hideFiltersFromBackground(e: Event) {
+    e.preventDefault();
+    if (e.target?.classList.contains("filter-bar")) this.displayFilters = false;
+  }
+
+  protected _searchByText(e: Event) {
+    e.preventDefault();
+    this._internalFilters = this._internalFilters.filter(
+      (s) => s.name !== "search",
+    );
+    if (e.detail) {
+      this._internalFilters.push({
+        name: "search",
+        value: e.detail,
+      });
+      this._internalFilters = [...this._internalFilters];
+    }
+    this.shouldUpdateSearch();
+  }
+
+  protected _resetFilters() {
+    this._internalFilters = [
+      this._internalFilters.find((s) => s.name === "search") || {
+        name: "search",
+        value: "",
+      },
+    ];
+    this.shouldUpdateSearch();
+  }
+
+  // matchId
+  protected renderFilterItemsById(objects: any[], propertyName: string) {
+    if (!objects) {
+      return nothing;
+    }
+
+    return html`${sort(
+      objects
+        .flatMap((item: Resource) => {
+          let obj = item;
+          if (propertyName) {
+            obj = obj[propertyName];
+            if (!obj) {
+              return [];
+            }
+          }
+          return obj;
+        })
+        .filter((o: Resource) => o)
+        .reduce((acc: Resource[], current: Resource) => {
+          if (!acc.find((res: Resource) => res["@id"] === current["@id"])) {
+            acc.push(current);
+          }
+          return acc;
+        }, []),
+      "name",
+    ).map((obj: Resource) => {
+      const filterValue = !!this._internalFilters.find(
+        (s) =>
+          s.type === "matchId" &&
+          s.name === propertyName &&
+          s.value === obj["@id"],
+      );
+      return html`<tems-filter-item
+        label=${obj.name}
+        type="checkbox"
+        count=${
+          this.objects?.filter((o: Resource) => {
+            let to = o;
+            if (propertyName) {
+              to = to[propertyName];
+              if (!to) {
+                return false;
+              }
+            }
+            if (Array.isArray(to)) {
+              return to.some((i) => i["@id"] === obj["@id"]);
+            }
+            return to["@id"] === obj["@id"];
+          }).length
+        }
+        value=${filterValue || nothing}
+        checked=${filterValue || nothing}
+        @change=${(e: Event) => {
+          e.preventDefault();
+          if (e.detail.value) {
+            this._internalFilters.push({
+              type: "matchId",
+              name: propertyName,
+              value: obj["@id"],
+            });
+            this._internalFilters = [...this._internalFilters];
+          } else {
+            this._internalFilters = this._internalFilters.filter(
+              (s) =>
+                !(
+                  s.type === "matchId" &&
+                  s.name === propertyName &&
+                  s.value === obj["@id"]
+                ),
+            );
+          }
+          this.shouldUpdateSearch();
+        }}
+      >
+      </tems-filter-item>`;
+    })}`;
+  }
+
+  // matchValue
+  protected renderFilterItemsByValue(objects: any[], propertyName: string) {
+    if (!objects) {
+      return nothing;
+    }
+
+    const filterValue = this._internalFilters.find(
+      (s) => s.type === "matchValue" && s.name === propertyName,
+    );
+
+    return html`
+      <tems-input-field
+        label=${msg("Search for...")}
+        type="text"
+        value=${filterValue?.value ?? ""}
+        @change=${(e: Event) => {
+          e.preventDefault();
+          this._internalFilters = this._internalFilters.filter(
+            (s) => !(s.type === "matchValue" && s.name === propertyName),
+          );
+          if (e.detail.value) {
+            this._internalFilters.push({
+              type: "matchValue",
+              name: propertyName,
+              value: e.detail.value,
+            });
+            this._internalFilters = [...this._internalFilters];
+          }
+          this.shouldUpdateSearch();
+        }}
+      ></tems-input-field>
+    `;
+  }
+
+  // dateAfter
+  protected renderFilterItemsFromDate(objects: any[], propertyName: string) {
+    if (!objects) {
+      return nothing;
+    }
+
+    const filterValue = this._internalFilters.find(
+      (s) => s.type === "dateAfter" && s.name === propertyName,
+    );
+
+    return html`
+      <tems-input-field
+        label=${msg("Date after")}
+        type="date"
+        value=${filterValue?.value ?? ""}
+        @change=${(e: Event) => {
+          e.preventDefault();
+          this._internalFilters = this._internalFilters.filter(
+            (s) => !(s.type === "dateAfter" && s.name === propertyName),
+          );
+          if (e.detail.value) {
+            this._internalFilters.push({
+              type: "dateAfter",
+              name: propertyName,
+              value: e.detail.value,
+            });
+            this._internalFilters = [...this._internalFilters];
+          }
+          this.shouldUpdateSearch();
+        }}
+      ></tems-input-field>
+    `;
+  }
+
+  protected renderFilterItemsByNumberRange(
+    objects: any[],
+    propertyName: string,
+  ) {
+    if (!objects) {
+      return nothing;
+    }
+
+    const numbers = objects
+      .map((o: any) => Number(o[propertyName]) || 0)
+      .filter(Number.isFinite);
+
+    const min = numbers.length > 0 ? Math.min(...numbers) : 0;
+    const max = numbers.length > 0 ? Math.max(...numbers) : 0;
+
+    if (min === max) {
+      return nothing;
+    }
+
+    const filterValue = this._internalFilters.find(
+      (s) => s.type === "interval" && s.name === propertyName,
+    );
+
+    const valueMin = filterValue?.value?.split("/")[0] || min;
+    const valueMax = filterValue?.value?.split("/")[1] || max;
+
+    return html`
+      <tems-slider
+        type="multiple"
+        min=${min}
+        max=${max}
+        value=${valueMin}
+        value-max=${valueMax}
+        @change=${(e: Event) => {
+          e.preventDefault();
+          this._internalFilters = this._internalFilters.filter(
+            (s) => !(s.type === "interval" && s.name === propertyName),
+          );
+          const min = e.detail.min ?? 0;
+          const max = e.detail.max ?? 0;
+          this._internalFilters.push({
+            type: "interval",
+            name: propertyName,
+            value: `${min}/${max}`,
+          });
+          this._internalFilters = [...this._internalFilters];
+          this.shouldUpdateSearch();
+        }}
+      ></tems-slider>
+    `;
+  }
+
+  protected _handleAccordionOpened(filterName: string) {
+    if (this._accordionStates[filterName] !== true) {
+      this._accordionStates = {
+        ...this._accordionStates,
+        [filterName]: true,
+      };
+    }
+  }
+
+  protected _handleAccordionClosed(filterName: string) {
+    if (this._accordionStates[filterName] !== false) {
+      this._accordionStates = {
+        ...this._accordionStates,
+        [filterName]: false,
+      };
+    }
+  }
+
+  protected _getFiltersDefinition(): {
+    name: string;
+    type: string;
+    condition: () => boolean;
+    label: string;
+    icon: TemplateResult;
+    render: () => TemplateResult;
+  }[] {
+    return [];
+  }
+
+  render() {
+    const filters = this._getFiltersDefinition();
+
+    return html`
+      <div>
+        <tems-search-bar
+          .displayFilters=${this.displayFiltering}
+          .displaySavedSearch=${this.displayFiltering}
+          .displayViews=${this.displayFiltering}
+          .dropdownCardElement=${true}
+          .dropdownListElement=${true}
+          .dropdownTableElement=${false}
+          .dropdownMapElement=${false}
+          .displayActiveTags=${false}
+          .view=${this.view}
+          .value=${
+            this._internalFilters.find((s) => s.name === "search")?.value
+          }
+          @search=${this._searchByText}
+          @change-view=${this._toggleChangeView}
+          @toggle-filters=${this._displayFilters}
+        ></tems-search-bar>
+        ${
+          this.displayFilters
+            ? html`<div
+              class="filter-bar"
+              @click=${this._hideFiltersFromBackground}
+            >
+              <tems-filter-sidebar
+                counter=${this.filterCount || nothing}
+                result-counter=${this.resultCount}
+                @close=${this._displayFilters}
+                @show-results=${this._displayFilters}
+                @clear-filters=${this._resetFilters}
+              >
+                ${filters.map((filter) => {
+                  let condition = true;
+                  if (filter.type && typeof filter.type === "string") {
+                    condition = this.hasType(filter.type, this.objects);
+                  } else if (filter.type && Array.isArray(filter.type)) {
+                    condition = filter.type
+                      .flat()
+                      .some((typeString) =>
+                        this.hasType(typeString, this.objects),
+                      );
+                  }
+
+                  const shouldRender = condition && filter.condition();
+
+                  return shouldRender
+                    ? html`<tems-vertical-accordion
+                        label=${filter.label}
+                        .icon=${filter.icon}
+                        .open=${this._accordionStates[filter.name] ?? false}
+                        @opened=${() =>
+                          this._handleAccordionOpened(filter.name)}
+                        @closed=${() =>
+                          this._handleAccordionClosed(filter.name)}
+                      >
+                        ${filter.render()}
+                      </tems-vertical-accordion>`
+                    : nothing;
+                })}
+              </tems-filter-sidebar>
+            </div>`
+            : nothing
+        }
+      </div>
+    `;
+  }
+}

package/src/components/catalog/ds4go-customer-holder.ts

@@ -0,0 +1,162 @@
+import {
+  ComponentObjectsHandler,
+  filterObjectByDateAfter,
+  filterObjectById,
+  filterObjectByInterval,
+  filterObjectByNamedValue,
+  filterObjectByType,
+  filterObjectByValue,
+} from "@helpers";
+import { msg, str } from "@lit/localize";
+import type { Resource, SearchObject, UnknownResource } from "@src/component";
+import { css, html, nothing, type PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-customer-holder")
+export class Ds4goCustomerHolder extends ComponentObjectsHandler {
+  static styles = css`
+    .card-grid {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      gap: 20px;
+    }
+    .card-grid-vertical {
+      justify-content: stretch;
+    }
+    .card-grid-vertical ds4go-card-catalog {
+      width: 354px;
+      height: auto;
+    }
+    ds4go-card-catalog {
+      cursor: pointer;
+    }
+  `;
+
+  @state()
+  search: SearchObject[] = [];
+
+  @state()
+  protected _displayObjects: Resource[] = [];
+
+  protected filter(objects: Resource[], filters: SearchObject[] = []) {
+    if (!filters || filters.length === 0 || !objects || objects.length === 0) {
+      return objects;
+    }
+
+    const groupedFilters = new Map<string, SearchObject[]>();
+    for (const filter of filters) {
+      const groupKey = filter.name;
+      const group = groupedFilters.get(groupKey) || [];
+      group.push(filter);
+      groupedFilters.set(groupKey, group);
+    }
+
+    let currentFilteredObjects = [...objects];
+
+    for (const filterGroup of groupedFilters.values()) {
+      if (currentFilteredObjects.length === 0) {
+        break;
+      }
+
+      const tempResults: UnknownResource[] = [];
+      for (const filter of filterGroup) {
+        switch (filter.type) {
+          case "interval":
+            tempResults.push(
+              filterObjectByInterval(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "dateAfter":
+            tempResults.push(
+              filterObjectByDateAfter(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchId":
+            tempResults.push(
+              filterObjectById(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          case "matchType":
+            tempResults.push(
+              filterObjectByType(currentFilteredObjects, filter.value),
+            );
+            break;
+          case "exact":
+            tempResults.push(
+              filterObjectByNamedValue(
+                currentFilteredObjects,
+                filter.name,
+                filter.value,
+              ),
+            );
+            break;
+          default:
+            tempResults.push(
+              filterObjectByValue(currentFilteredObjects, filter.value),
+            );
+        }
+      }
+      currentFilteredObjects = [...tempResults.flat()] as Resource[];
+    }
+
+    return currentFilteredObjects;
+  }
+
+  protected _handleClickEvent(originalObj: Resource) {
+    this.dispatchEvent(new CustomEvent("clicked", { detail: originalObj }));
+  }
+
+  willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("objects") || changedProperties.has("search")) {
+      if (this.objects) {
+        this._displayObjects = this.filter(this.objects, this.search);
+      } else {
+        this._displayObjects = [];
+      }
+      this.dispatchEvent(
+        new CustomEvent("result-count", {
+          detail: this._displayObjects.length,
+        }),
+      );
+    }
+  }
+
+  render() {
+    if (!this._displayObjects || this._displayObjects.length === 0) {
+      return nothing;
+    }
+
+    return html`<div class="card-grid card-grid-vertical">
+      ${this._displayObjects.map((displayObj) => {
+        const tags = [
+          {
+            name: `${msg(str`Balance: ${displayObj.balance}€`)}`,
+            type: "information",
+          },
+        ];
+        return html`<ds4go-card-catalog
+          .object=${import.meta.env.DEV ? displayObj : nothing}
+          type=${"vertical"}
+          .tags=${tags}
+          .header=${displayObj.name || nothing}
+          .content=${displayObj.participant_id ? msg(str`Participant ID: ${displayObj.participant_id}`) : nothing}
+          date=${displayObj.updated_at || nothing}
+          @click=${() => this._handleClickEvent(displayObj)}
+        ></ds4go-card-catalog>`;
+      })}
+    </div>`;
+  }
+}

package/src/components/catalog/ds4go-fact-bundle-holder.ts

@@ -8,7 +8,7 @@ import {
   filterObjectByValue,
 } from "@helpers";
 import { msg } from "@lit/localize";
-import type { Resource, SearchObject } from "@src/component";
+import type { Resource, SearchObject, UnknownResource } from "@src/component";
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
@@ -24,11 +24,11 @@ export class Ds4goFactBundleHolder extends ComponentObjectsHandler {
     .card-grid-vertical {
       justify-content: stretch;
     }
-    .card-grid-vertical tems-card-catalog {
+    .card-grid-vertical ds4go-card-catalog {
       width: 354px;
       height: auto;
     }
-    tems-card-catalog {
+    ds4go-card-catalog {
       cursor: pointer;
     }
   `;
@@ -59,7 +59,7 @@ export class Ds4goFactBundleHolder extends ComponentObjectsHandler {
         break;
       }
 
-      const tempResults = [];
+      const tempResults: UnknownResource[] = [];
       for (const filter of filterGroup) {
         switch (filter.type) {
           case "interval":
@@ -109,7 +109,7 @@ export class Ds4goFactBundleHolder extends ComponentObjectsHandler {
             );
         }
       }
-      currentFilteredObjects = [...tempResults.flat()];
+      currentFilteredObjects = [...tempResults.flat()] as Resource[];
     }
 
     return currentFilteredObjects;
@@ -147,7 +147,7 @@ export class Ds4goFactBundleHolder extends ComponentObjectsHandler {
             type: "information",
           },
         ];
-        return html`<tems-card-catalog
+        return html`<ds4go-card-catalog
           .object=${import.meta.env.DEV ? displayObj : nothing}
           type=${"bill-image"}
           .tags=${tags}
@@ -155,7 +155,7 @@ export class Ds4goFactBundleHolder extends ComponentObjectsHandler {
           .content=${displayObj.description || nothing}
           date=${displayObj.updated_at || nothing}
           @click=${() => this._handleClickEvent(displayObj)}
-        ></tems-card-catalog>`;
+        ></ds4go-card-catalog>`;
       })}
     </div>`;
   }