@startinblox/components-ds4go 3.2.2 → 3.3.1

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

@@ -196,17 +196,21 @@ export class Ds4goCustomerModal extends OrbitComponent {
             .map(([negotiationId]) => negotiationId);
 
           // Filter negotiations where counterPartyId === participant_id OR participant is in agreements
-          this.negotiations = allNegotiations.filter((n: ContractNegotiation) => {
-            const counterPartyId = n.counterPartyId;
-            if (counterPartyId) {
-              const counterPartyParticipantId = counterPartyId.split("/").pop();
-              if (counterPartyParticipantId?.startsWith(participantId)) {
-                return true;
+          this.negotiations = allNegotiations.filter(
+            (n: ContractNegotiation) => {
+              const counterPartyId = n.counterPartyId;
+              if (counterPartyId) {
+                const counterPartyParticipantId = counterPartyId
+                  .split("/")
+                  .pop();
+                if (counterPartyParticipantId?.startsWith(participantId)) {
+                  return true;
+                }
               }
-            }
-            // Also include negotiations that have agreements where participant is consumer or provider
-            return negotiationIdsWithParticipant.includes(n["@id"]);
-          });
+              // Also include negotiations that have agreements where participant is consumer or provider
+              return negotiationIdsWithParticipant.includes(n["@id"]);
+            },
+          );
 
           // Load agreements for filtered negotiations for display
           await Promise.all(
@@ -224,7 +228,9 @@ export class Ds4goCustomerModal extends OrbitComponent {
             (n: ExtendedContractNegotiation) => {
               if (!n.agreement) return false;
               if (!n.agreement.providerId) return false;
-              const providerParticipantId = n.agreement.providerId.split("/").pop();
+              const providerParticipantId = n.agreement.providerId
+                .split("/")
+                .pop();
               return providerParticipantId?.startsWith(participantId);
             },
           );
@@ -233,15 +239,21 @@ export class Ds4goCustomerModal extends OrbitComponent {
             (n: ExtendedContractNegotiation) => {
               if (!n.agreement) return false;
               if (!n.agreement.consumerId) return false;
-              const consumerParticipantId = n.agreement.consumerId.split("/").pop();
+              const consumerParticipantId = n.agreement.consumerId
+                .split("/")
+                .pop();
               return consumerParticipantId?.startsWith(participantId);
             },
           );
         }
       } else {
-        console.warn(
-          "DSP Connector not found. Please ensure the DSP Connector is properly initialized.",
-        );
+        const listener = () => {
+          this.caching++;
+          this.requestUpdate();
+          document.removeEventListener("dsp-connector-ready", listener);
+        };
+        document.addEventListener("dsp-connector-ready", listener);
+        return;
       }
 
       return this.object;
@@ -286,9 +298,12 @@ export class Ds4goCustomerModal extends OrbitComponent {
                       </div></tems-division
                     >`
                   : nothing}
-                ${this.providerNegotiations && this.providerNegotiations.length > 0
+                ${this.providerNegotiations &&
+                this.providerNegotiations.length > 0
                   ? html`<tems-division type="h4"
-                        ><div>${msg("Provider Negotiations")}</div></tems-division
+                        ><div>
+                          ${msg("Provider Negotiations")}
+                        </div></tems-division
                       >
                       <div class="card-grid card-grid-vertical">
                         ${this.providerNegotiations.map(
@@ -313,9 +328,12 @@ export class Ds4goCustomerModal extends OrbitComponent {
                         )}
                       </div>`
                   : nothing}
-                ${this.consumerNegotiations && this.consumerNegotiations.length > 0
+                ${this.consumerNegotiations &&
+                this.consumerNegotiations.length > 0
                   ? html`<tems-division type="h4"
-                        ><div>${msg("Customer Negotiations")}</div></tems-division
+                        ><div>
+                          ${msg("Customer Negotiations")}
+                        </div></tems-division
                       >
                       <div class="card-grid card-grid-vertical">
                         ${this.consumerNegotiations.map(

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

@@ -116,9 +116,13 @@ export class Ds4goFactBundleModal extends OrbitComponent {
           }
         });
       } else {
-        console.warn(
-          "DSP Connector not found. Please ensure the DSP Connector is properly initialized.",
-        );
+        const listener = () => {
+          this.caching++;
+          this.requestUpdate();
+          document.removeEventListener("dsp-connector-ready", listener);
+        };
+        document.addEventListener("dsp-connector-ready", listener);
+        return;
       }
 
       return this.object;

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

@@ -0,0 +1,234 @@
+import * as utils from "@helpers";
+import { msg, str } from "@lit/localize";
+import { Task } from "@lit/task";
+import type {
+  Resource,
+  OrbitComponent as OrbitComponentConfig,
+} from "@src/component";
+import {
+  OrbitDSPComponent,
+  type TemsSearchObject,
+} from "@startinblox/solid-tems-shared";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+export interface DSPProviderConfig {
+  name: string;
+  address: string;
+  color?: string;
+  participantId?: string;
+}
+
+@customElement("solid-dsp-catalog")
+export class DSPCatalog extends OrbitDSPComponent {
+  constructor() {
+    super();
+    utils.setupCacheInvalidation(this, {
+      keywords: ["groups", "objects", "dsp"],
+    });
+  }
+
+  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;
+    }
+  `;
+
+  @state()
+  dspConnector: OrbitComponentConfig | undefined;
+
+  @property({ attribute: "header", type: String })
+  header?: string = "DSP Catalog";
+
+  @state()
+  search: TemsSearchObject[] = [];
+
+  @state()
+  resultCount = this.objects?.length || 0;
+
+  async _afterAttach() {
+    // use this.dspConnector.instance to reach the connector
+    this.dspConnector = this.orbit?.components.find(
+      (c) => c.type === "dsp-connector",
+    );
+
+    return Promise.resolve();
+  }
+
+  _getResource = new Task(this, {
+    task: async ([objSrc]) => {
+      if (
+        !this.orbit ||
+        (!this.noRouter &&
+          this.route &&
+          this.currentRoute &&
+          !this.route.startsWith(this.currentRoute))
+      )
+        return;
+
+      if (this.dspConnector?.instance) {
+        await this.dspConnector.instance.loadAll();
+        this.datas = this.dspConnector.instance.datas;
+        this.providers = this.dspConnector.instance.providers;
+      } else {
+        const listener = () => {
+          this.caching++;
+          this.requestUpdate();
+          document.removeEventListener("dsp-connector-ready", listener);
+        };
+        document.addEventListener("dsp-connector-ready", listener);
+      return;
+      }
+
+      if (objSrc) {
+        this.object = this.datas.find((obj: Resource) => obj["@id"] === objSrc);
+      } else {
+        this.object = undefined;
+      }
+
+      return this.datas;
+    },
+    args: () => [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 || {})) {
+        utils.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) {
+            utils.requestNavigation(
+              compatibleComponents[0]?.route,
+              e.detail["@id"],
+            );
+          }
+        }
+      }
+    }
+  }
+
+  _closeModal(e: Event) {
+    e.preventDefault();
+    if (this.route) utils.requestNavigation(this.route, this.defaultDataSrc);
+  }
+
+  _closeModalFromBackground(e: Event) {
+    e.preventDefault();
+    if (this.route && e.target?.classList.contains("modal"))
+      utils.requestNavigation(this.route, this.defaultDataSrc);
+  }
+
+  _resultCountUpdate(e: Event) {
+    this.resultCount = e.detail ?? 0;
+  }
+
+  render() {
+    // Can't use gatekeeper as dataSrc can be none here
+    if (
+      !this.orbit ||
+      (!this.noRouter &&
+        this.route &&
+        this.currentRoute &&
+        !this.route.startsWith(this.currentRoute))
+    ) {
+      return nothing;
+    }
+
+    return this._getResource.render({
+      pending: () => html`<solid-loader></solid-loader>`,
+      error: (e) => html`<p>${e}</p>`,
+      complete: (datas) => {
+        if (!datas || !this.providers) {
+          return nothing;
+        }
+        return html`<tems-viewport>
+          <tems-header slot="header" heading=${this.header}></tems-header>
+          <div slot="content">
+            ${this.providers.length > 0
+              ? html`<div
+                  style="background: white; padding: 1rem; border-radius: 8px; margin-bottom: 1rem;"
+                >
+                  <h3 style="margin: 0 0 1rem 0;">
+                    ${msg("Provider Statistics")}
+                  </h3>
+                  <div
+                    style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;"
+                  >
+                    ${this.providers.map((provider: DSPProviderConfig) => {
+                      const providerDatasets = datas.filter(
+                        (d: Resource) => d._provider === provider.name,
+                      );
+                      return html`
+                        <div
+                          style="background: #f5f5f5; padding: 1rem; border-radius: 4px; border-left: 4px solid ${provider.color ||
+                          "#1976d2"};"
+                        >
+                          <div
+                            style="font-weight: bold; margin-bottom: 0.5rem;"
+                          >
+                            ${provider.name}
+                          </div>
+                          <div style="font-size: 1.125rem; color: #1976d2;">
+                            ${msg(str`${providerDatasets.length} datasets`)}
+                          </div>
+                        </div>
+                      `;
+                    })}
+                  </div>
+                </div>`
+              : nothing}
+            <tems-catalog-filter-holder
+              .displayFiltering=${false}
+              @search=${this._search}
+              .search=${this.search}
+              .view=${"card"}
+              .objects=${datas}
+              .resultCount=${this.resultCount}
+              .filterCount=${this.filterCount}
+            ></tems-catalog-filter-holder>
+            <ds4go-catalog-data-holder
+              .view=${"card"}
+              .objects=${datas}
+              .search=${this.search}
+              @clicked=${this._openModal}
+              @result-count=${this._resultCountUpdate}
+            ></ds4go-catalog-data-holder>
+            ${this.object
+              ? html`<div
+                  class="modal"
+                  @click=${this._closeModalFromBackground}
+                >
+                  <ds4go-catalog
+                    .object=${this.object}
+                    @close=${this._closeModal}
+                  ></ds4go-catalog>
+                </div>`
+              : nothing}
+          </div>
+        </tems-viewport>`;
+      },
+    });
+  }
+}

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

@@ -20,6 +20,14 @@ export class SolidDspConnector extends OrbitDSPComponent {
     await super._afterAttach();
     await this.loadAll();
     this.setupAutoRefresh();
+
+    this.dispatchEvent(
+      new CustomEvent("dsp-connector-ready", {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+
     return Promise.resolve();
   }
 

package/src/styles/cards/ds4go-card-dataspace-catalog.scss

@@ -0,0 +1,215 @@
+@mixin card-content-max-height($height) {
+  max-height: $height;
+  tems-division {
+    max-height: $height;
+  }
+}
+
+:host {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  height: fit-content;
+}
+
+article {
+  border-radius: var(--border-radius-lg);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  width: 100%;
+  display: flex;
+  font-family: var(--font-family-body);
+  &.vertical {
+    min-width: 295px;
+    .card-content {
+      max-height: 180px;
+      tems-division {
+        max-height: 180px;
+      }
+    }
+  }
+  &.horizontal,
+  &.billImage {
+    header {
+      width: auto;
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
+    }
+    header.image {
+      flex-shrink: 0;
+      width: 33%;
+      height: 100%;
+    }
+    main {
+      flex-grow: 1;
+      .card-content {
+        max-height: 78px;
+        tems-division {
+          max-height: 78px;
+        }
+      }
+    }
+  }
+  &.billImage {
+    header.image {
+      width: 50%;
+    }
+    .card-content {
+      max-height: 206px;
+      tems-division {
+        max-height: 206px;
+      }
+    }
+  }
+  header {
+    display: flex;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 16px;
+  }
+  main {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-400);
+    flex: 1;
+    .content {
+      flex: 1;
+    }
+    .orgLogo {
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: center center;
+      width: 48px;
+      height: 48px;
+    }
+    .card-content {
+      flex-grow: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 100%;
+    }
+    .address-line {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: end;
+      width: 100%;
+      > div:first-child {
+        flex: 1;
+        display: flex;
+        gap: 16px;
+        flex-direction: column;
+      }
+    }
+    .lang-date {
+      width: fit-content;
+      display: flex;
+      gap: 24px;
+      flex-direction: row;
+      color: var(--color-text-disabled-on);
+      font-size: var(--typography-size-body-sm);
+
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-body-sm);
+      text-transform: uppercase;
+    }
+    .address,
+    .source-logo {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--scale-200);
+      color: var(--color-text-information);
+      font-size: var(--typography-size-body-sm);
+      font-style: normal;
+      font-weight: var(--font-weight-regular);
+      line-height: var(--line-height-body-sm);
+      text-decoration: underline;
+      a {
+        color: var(--color-text-information);
+      }
+      svg {
+        color: var(--color-text-information);
+        width: var(--icon-size-sm);
+        height: var(--icon-size-sm);
+        display: flex;
+      }
+      .source,
+      .logo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--scale-200);
+      }
+      // logo image in source block
+      .logo {
+        margin-left: auto;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center center;
+        width: 76px;
+        height: 24px;
+      }
+    }
+  }
+  .tags,
+  .action {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--scale-200);
+  }
+  .action ::slotted(*) {
+    width: 100%;
+    padding: var(--scale-400);
+    border-top: var(--border-width-sm) solid var(--color-border-primary);
+  }
+  .action slot:not(:has-slotted) {
+    display: none;
+  }
+
+  &.vertical {
+    flex-direction: column;
+    header {
+      width: 100%;
+      border-bottom: var(--border-width-sm) solid var(--color-border-primary);
+      border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
+      &.image {
+        height: 167px;
+      }
+    }
+    main {
+      padding: var(--scale-600);
+      padding-bottom: var(--scale-800);
+    }
+    
+  }
+
+  &.vertical,
+  &.billImage {
+    .lang-date {
+      width: 100%;
+      justify-content: space-between;
+    }
+  }
+
+  &.horizontal,
+  &.billImage {
+    
+    main {
+      padding: var(--scale-600);
+      padding-bottom: var(--scale-800);
+      
+
+      .source-logo .logo {
+        margin-left: 0px;
+      }
+    }
+  }
+  div:has(slot:not(:has-slotted)) {
+    display: none;
+  }
+}