@startinblox/components-ds4go 3.0.3 → 3.1.0

package/src/components/modal/ds4go-customer-modal.ts

@@ -0,0 +1,134 @@
+import { OrbitComponent } from "@helpers";
+import { localized, msg, str } from "@lit/localize";
+import { Task } from "@lit/task";
+import type {
+  OrbitComponent as OrbitComponentConfig,
+  Resource,
+} from "@src/component";
+
+import ModalStyle from "@styles/modal/ds4go-customer-modal.scss?inline";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-customer-modal")
+@localized()
+export class Ds4goCustomerModal extends OrbitComponent {
+  constructor() {
+    super({ setupSubscriptions: false, ignoreRouter: true });
+  }
+
+  static styles = css`
+    ${unsafeCSS(ModalStyle)}
+  `;
+
+  @state()
+  dspConnector: OrbitComponentConfig | undefined;
+
+  async _afterAttach() {
+    // use this.dspConnector.instance to reach the connector
+    this.dspConnector = this.orbit?.components.find(
+      (c) => c.type === "dsp-connector",
+    );
+
+    return Promise.resolve();
+  }
+
+  _closeModal() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+
+  _getResource = new Task(this, {
+    task: async () => {
+      if (!this.object) return;
+
+      if (this.dspConnector?.instance) {
+        await this.dspConnector.instance.loadContracts();
+        console.log(this.dspConnector.instance.contracts);
+      } else {
+        console.warn(
+          "DSP Connector not found. Please ensure the DSP Connector is properly initialized.",
+        );
+      }
+
+      return this.object;
+    },
+    args: () => [this.caching, this.currentRoute],
+  });
+
+  render() {
+    return this._getResource.render({
+      pending: () => nothing,
+      complete: (obj?: Resource) => {
+        if (!obj) {
+          this._closeModal();
+          return nothing;
+        }
+
+        return html`<div class="modal">
+          <div class="topbar">
+            <tems-button
+              @click=${this._closeModal}
+              type="outline-gray"
+              .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
+            ></tems-button>
+          </div>
+          <div class="modal-content-wrapper">
+            <div class="modal-box">
+              <div class="modal-content">
+                <tems-division type="h3"
+                  ><div>${String(obj.name || "")}</div></tems-division
+                >
+                <tems-division type="body-m"
+                  ><div>
+                    ${
+                      obj.participant_id
+                        ? msg(
+                            str`Participant ID: ${String(obj.participant_id)}`,
+                          )
+                        : ""
+                    }
+                  </div></tems-division
+                >
+                ${
+                  obj.signed_contracts
+                    ? html`<tems-division type="h4"
+                        ><div>
+                          ${msg("Contracts signed with the customer")}
+                        </div></tems-division
+                      >
+                      <div class="card-grid card-grid-vertical">
+                        ${obj.signed_contracts?.map((contract: Resource) => {
+                          return html`<ds4go-card-catalog
+                            .object=${import.meta.env.DEV ? contract : nothing}
+                            .header=${contract.name || nothing}
+                            .content=${contract.description || nothing}
+                            date=${contract.updated_at || nothing}
+                          ></ds4go-card-catalog>`;
+                        })}
+                      </div>`
+                    : nothing
+                }
+                <tems-division type="body-sm"
+                  ><div>
+                    <div>
+                      ${msg("Customer created on")} ${String(obj.created_at)}
+                    </div>
+                    <div>
+                      ${msg("Customer updated on")} ${String(obj.updated_at)}
+                    </div>
+                  </div></tems-division
+                >
+              </div>
+            </div>
+          </div>
+        </div>`;
+      },
+      error: (e) => {
+        if (import.meta.env.DEV) {
+          console.error(e, this);
+        }
+        return nothing;
+      },
+    });
+  }
+}

package/src/components/modal/ds4go-fact-bundle-modal.ts

@@ -55,13 +55,13 @@ export class Ds4goFactBundleModal extends ComponentObjectHandler {
                     type: "information",
                   });
                 }
-                return html`<tems-card-catalog
+                return html`<ds4go-card-catalog
                   .object=${import.meta.env.DEV ? fact : nothing}
                   .tags=${tags}
                   .header=${fact.name || nothing}
                   .content=${fact.description || nothing}
                   date=${fact.updated_at || nothing}
-                ></tems-card-catalog>`;
+                ></ds4go-card-catalog>`;
               })}
             </div>
             <tems-division type="body-sm"

package/src/components/solid-customer-list.ts

@@ -0,0 +1,195 @@
+import {
+  formatDate,
+  OrbitComponent,
+  requestNavigation,
+  setupCacheInvalidation,
+  sort,
+} from "@helpers";
+import { Task } from "@lit/task";
+import type {
+  OrbitComponent as OrbitComponentConfig,
+  PropertiesPicker,
+  Resource,
+  SearchObject,
+} from "@src/component";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("solid-customer-list")
+export class SolidCustomerList extends OrbitComponent {
+  static styles = css`
+    .modal {
+      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: center;
+      align-items: center;
+    }
+  `;
+
+  @property({ attribute: "header", type: String })
+  header?: string = "DS4GO Customer List";
+
+  @state()
+  search: SearchObject[] = [];
+
+  @state()
+  resultCount = this.objects?.length || 0;
+
+  @state()
+  bundleCreationComponent: OrbitComponentConfig | undefined;
+
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "created_at", value: "created_at", cast: formatDate },
+    { key: "updated_at", value: "updated_at", cast: formatDate },
+    { key: "name", value: "name" },
+    { key: "participant_id", value: "participant_id" },
+    { key: "balance", value: "balance" },
+  ];
+
+  async _afterAttach() {
+    setupCacheInvalidation(this, {
+      keywords: ["customers"],
+    });
+    return Promise.resolve();
+  }
+
+  _getResource = new Task(this, {
+    task: async ([dataSrc, objSrc]) => {
+      if (
+        !dataSrc ||
+        !this.orbit ||
+        (!this.noRouter &&
+          this.route &&
+          this.currentRoute &&
+          !this.route.startsWith(this.currentRoute))
+      )
+        return;
+
+      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
+        if (!dataSrc) return;
+
+        this.objects = (await this._getProxyValue(dataSrc)) as Resource[];
+        this.hasCachedDatas = true;
+      }
+
+      if (this.oldDataSrc !== dataSrc) {
+        this.oldDataSrc = dataSrc;
+      }
+
+      if (!Array.isArray(this.objects)) {
+        this.objects = [];
+      }
+
+      if (objSrc) {
+        this.object = this.objects.find(
+          (obj: Resource) => obj["@id"] === objSrc,
+        );
+      } else {
+        this.dataSrc = dataSrc;
+      }
+
+      if (this.objects.length > 0) {
+        return sort(this.objects, "name", "asc");
+      }
+      return [];
+    },
+    args: () => [
+      this.defaultDataSrc,
+      this.dataSrc,
+      this.caching,
+      this.currentRoute,
+    ],
+  });
+
+  _search(e: Event) {
+    e.preventDefault();
+    this.search = e.detail;
+    this.filterCount = this.search.filter((s) => s.name !== "search").length;
+  }
+
+  _openModal(e: Event) {
+    e.preventDefault();
+    if (this.route) {
+      if ("use-id" in (this.component.routeAttributes || {})) {
+        requestNavigation(this.route, e.detail["@id"]);
+      } else {
+        const rdfType = e.detail["@type"]?.at(-1) ?? e.detail["@type"];
+        if (rdfType) {
+          const compatibleComponents = window.orbit?.components?.filter(
+            (c) => c?.routeAttributes?.["rdf-type"] === rdfType,
+          );
+
+          if (compatibleComponents?.[0]?.route) {
+            requestNavigation(compatibleComponents[0]?.route, e.detail["@id"]);
+          }
+        }
+      }
+    }
+  }
+
+  _closeModal(e: Event) {
+    e.preventDefault();
+    if (this.route) requestNavigation(this.route, this.defaultDataSrc);
+  }
+
+  _closeModalFromBackground(e: Event) {
+    e.preventDefault();
+    if (this.route && e.target?.classList.contains("modal"))
+      requestNavigation(this.route, this.defaultDataSrc);
+  }
+
+  _resultCountUpdate(e: Event) {
+    this.resultCount = e.detail ?? 0;
+  }
+
+  render() {
+    return (
+      this.gatekeeper() ||
+      this._getResource.render({
+        pending: () => html`<solid-loader></solid-loader>`,
+        error: (e) => {
+          console.warn("[solid-customer-list] Task error:", e);
+          return nothing;
+        },
+        complete: (datas) => {
+          return html`<tems-viewport>
+            <tems-header slot="header" heading=${this.header}></tems-header>
+            <div slot="content">
+              <ds4go-catalog-filter-holder
+                .displayFiltering=${this.displayFiltering}
+                @search=${this._search}
+                .search=${this.search}
+                .objects=${datas}
+                .resultCount=${this.resultCount}
+                .filterCount=${this.filterCount}
+              ></ds4go-catalog-filter-holder>
+              <ds4go-customer-holder
+                .objects=${datas}
+                .search=${this.search}
+                @clicked=${this._openModal}
+                @result-count=${this._resultCountUpdate}
+              ></ds4go-customer-holder>
+              ${this.object
+                ? html`<div
+                    class="modal"
+                    @click=${this._closeModalFromBackground}
+                  >
+                    <ds4go-customer-modal
+                      .object=${this.object}
+                      @close=${this._closeModal}
+                    ></ds4go-customer-modal>
+                  </div>`
+                : nothing}
+            </div>
+          </tems-viewport>`;
+        },
+      })
+    );
+  }
+}

package/src/components/solid-dsif-explorer-poc.ts

@@ -51,11 +51,11 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
     .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.cursor-pointer {
+    ds4go-card-catalog.cursor-pointer {
       cursor: pointer;
     }
     tems-division {
@@ -313,7 +313,7 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                       ${this.catalogId
                         ? html`${(datas as CatalogEntry)["dcat:dataset"].map(
                             (dataset: Dataset) =>
-                              html`<tems-card-catalog
+                              html`<ds4go-card-catalog
                                 .object=${import.meta.env.DEV
                                   ? dataset
                                   : nothing}
@@ -321,12 +321,12 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                                 .header=${dataset["dct:title"] || nothing}
                                 .content=${dataset["dct:description"] ||
                                 nothing}
-                              ></tems-card-catalog>`,
+                              ></ds4go-card-catalog>`,
                           )}`
                         : this.sectorId
                           ? html`${datas.map(
                               (catalog: Catalog) =>
-                                html`<tems-card-catalog
+                                html`<ds4go-card-catalog
                                   class="cursor-pointer"
                                   .object=${import.meta.env.DEV
                                     ? catalog
@@ -338,11 +338,11 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                                   nothing}
                                   @click=${() =>
                                     this._selectCatalog(catalog.catalogId)}
-                                ></tems-card-catalog>`,
+                                ></ds4go-card-catalog>`,
                             )}`
                           : html`${datas.map(
                               (sector: Sector) =>
-                                html`<tems-card-catalog
+                                html`<ds4go-card-catalog
                                   class="cursor-pointer"
                                   .object=${import.meta.env.DEV
                                     ? sector
@@ -353,7 +353,7 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                                   date=${formatDate(sector.lastUpdated) ||
                                   nothing}
                                   @click=${() => this._selectSector(sector.id)}
-                                ></tems-card-catalog>`,
+                                ></ds4go-card-catalog>`,
                             )}`}
                     </div>
                   </div>`

package/src/components/solid-dsp-connector.ts

@@ -1,6 +1,14 @@
-import { dspComponent } from "@helpers";
 import { Task } from "@lit/task";
-import type { Asset, AssetInput, ContractDefinition, ContractDefinitionInput, PolicyDefinition, PolicyDefinitionInput, Resource } from "@src/component";
+import type {
+  Asset,
+  AssetInput,
+  ContractDefinition,
+  ContractDefinitionInput,
+  PolicyDefinition,
+  PolicyDefinitionInput,
+  Resource,
+} from "@src/component";
+import { OrbitDSPComponent } from "@startinblox/solid-tems-shared";
 import { nothing } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
@@ -12,7 +20,7 @@ export interface DSPProviderConfig {
 }
 
 @customElement("solid-dsp-connector")
-export class SolidDspConnector extends dspComponent {
+export class SolidDspConnector extends OrbitDSPComponent {
   async _responseAdaptator(response: Resource): Promise<Resource> {
     if (response.providers) {
       if (!Array.isArray(response.providers)) {
@@ -149,7 +157,7 @@ export class SolidDspConnector extends dspComponent {
       if (!this.orbit) return;
 
       if (!this.hasCachedDatas) {
-        const datasets = await this.fetchFederatedCatalog();
+        const datasets = (await this.fetchFederatedCatalog()) as Resource[];
 
         if (datasets !== undefined && Array.isArray(datasets)) {
           this.datas = await Promise.all(