@startinblox/components-ds4go 3.1.2 → 3.1.3

package/dist/index.js

@@ -1 +1 @@
-import "./index-juyC2UdH.js";
+import "./index-aCtNDRnY.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "3.1.2",
+  "version": "3.1.3",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",

package/src/component.d.ts

@@ -87,14 +87,20 @@ export interface LiveOrbit extends Orbit {
   getRoute: (
     type: string,
     returnFirst?: boolean,
-    ignoreError?: boolean
+    ignoreError?: boolean,
   ) => string | false;
   Swal: any;
   defaultRoute: string;
 }
 
 export type Context = Record<string, string | { "@id": string }>;
-export type Permission = "add" | "delete" | "change" | "control" | "view" | string;
+export type Permission =
+  | "add"
+  | "delete"
+  | "change"
+  | "control"
+  | "view"
+  | string;
 export type DateTime = string;
 
 export interface LimitedResource {
@@ -231,38 +237,81 @@ export interface PolicyDefinitionInput {
   "@type"?: string;
   "@id": string;
   policy: OdrlPolicy;
-}interface AssetSelector {
-	"@type": "CriterionDto";
-	operandLeft: string;
-	operator: string;
-	operandRight: any;
+}
+
+interface AssetSelector {
+  "@type": "CriterionDto";
+  operandLeft: string;
+  operator: string;
+  operandRight: any;
+}
+
+export type NegotiationState =
+  | "REQUESTING"
+  | "REQUESTED"
+  | "OFFERING"
+  | "OFFERED"
+  | "ACCEPTING"
+  | "ACCEPTED"
+  | "AGREEING"
+  | "AGREED"
+  | "VERIFYING"
+  | "VERIFIED"
+  | "FINALIZING"
+  | "FINALIZED"
+  | "TERMINATING"
+  | "TERMINATED";
+
+export type NegotiationType = "CONSUMER" | "PROVIDER";
+
+export interface ContractNegotiation {
+  "@id": string;
+  "@type"?: string;
+  state: NegotiationState;
+  counterPartyId?: string;
+  counterPartyAddress?: string;
+  contractAgreementId?: string;
+  assetId?: string;
+  errorDetail?: string;
+  createdAt?: number;
+  type?: NegotiationType;
+}
+
+export interface ContractAgreement {
+  "@type": "ContractAgreement";
+  "@id": string;
+  assetId: string;
+  policy?: any;
+  contractSigningDate?: number;
+  consumerId?: string;
+  providerId?: string;
 }
 
 export interface ContractDefinition {
-	"@type": "ContractDefinition";
-	"@id": string;
-	"@context"?: any;
-	accessPolicyId: string;
-	contractPolicyId: string;
-	assetsSelector?: AssetSelector[] | AssetSelector;
-	createdAt?: number;
+  "@type": "ContractDefinition";
+  "@id": string;
+  "@context"?: any;
+  accessPolicyId: string;
+  contractPolicyId: string;
+  assetsSelector?: AssetSelector[] | AssetSelector;
+  createdAt?: number;
 }
 
 export interface ContractDefinitionInput {
-	"@id": string;
-	accessPolicyId: string;
-	contractPolicyId: string;
-	assetsSelector?: AssetSelector[];
+  "@id": string;
+  accessPolicyId: string;
+  contractPolicyId: string;
+  assetsSelector?: AssetSelector[];
 }
 
 export interface PolicyDefinition {
-	"@id": string;
-	policy?: OdrlPolicy;
+  "@id": string;
+  policy?: OdrlPolicy;
 }
 
 export interface Asset {
-	"@id": string;
-	properties?: Record<string, any>;
+  "@id": string;
+  properties?: Record<string, any>;
 }
 
 export declare global {

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

@@ -1,82 +1,221 @@
-import { ComponentObjectHandler } from "@helpers";
+import { OrbitComponent } from "@helpers";
 import { localized, msg } from "@lit/localize";
-import type { Resource } from "@src/component";
+import { Task } from "@lit/task";
+import type {
+  Asset,
+  ContractAgreement,
+  ContractDefinition,
+  ContractNegotiation,
+  OrbitComponent as OrbitComponentConfig,
+  PolicyDefinition,
+  Resource,
+} from "@src/component";
 
 import ModalStyle from "@styles/modal/ds4go-fact-bundle-modal.scss?inline";
 import { css, html, nothing, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+
+type ExtendedContractNegotiation = ContractNegotiation & {
+  agreement?: ContractAgreement;
+};
 
 @customElement("ds4go-fact-bundle-modal")
 @localized()
-export class Ds4goFactBundleModal extends ComponentObjectHandler {
+export class Ds4goFactBundleModal extends OrbitComponent {
+  constructor() {
+    super({ setupSubscriptions: false, ignoreRouter: true });
+  }
+
   static styles = css`
     ${unsafeCSS(ModalStyle)}
   `;
 
-  @property({ attribute: false, type: Object })
-  object: Resource = { "@id": "" };
+  @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"));
   }
 
+  @state()
+  assets: Asset[] = [];
+
+  @state()
+  policies: PolicyDefinition[] = [];
+
+  @state()
+  contracts: ContractDefinition[] = [];
+
+  @state()
+  negotiations: ExtendedContractNegotiation[] = [];
+
+  _getResource = new Task(this, {
+    task: async () => {
+      if (!this.object) return;
+
+      if (this.dspConnector?.instance) {
+        this.assets = this.dspConnector.instance.assets.filter(
+          (a: Asset) =>
+            a.dataAddress?.baseUrl ===
+            "https://api.stg.ds4go.startinblox.com/factbundles/21/",
+        );
+
+        this.contracts = this.dspConnector.instance.contracts.filter(
+          (c: ContractDefinition) =>
+            (this.assets || []).find((a: Asset) => {
+              if (!c.assetsSelector) {
+                return false;
+              }
+              if (Array.isArray(c.assetsSelector)) {
+                return c.assetsSelector.find(
+                  (s) => s.operandRight === a["@id"],
+                );
+              }
+              return c.assetsSelector.operandRight === a["@id"];
+            }),
+        );
+
+        this.policies = [
+          ...(this.contracts || []).flatMap((c: ContractDefinition) => {
+            if (!c.accessPolicyId && !c.contractPolicyId) return [];
+            return this.dspConnector?.instance?.policies.filter(
+              (p: PolicyDefinition) =>
+                p["@id"] === c.accessPolicyId ||
+                p["@id"] === c.contractPolicyId,
+            );
+          }),
+        ];
+
+        this.negotiations = this.dspConnector.instance.negotiations.filter(
+          (c: ContractNegotiation) => {
+            if (!c.assetId) return false;
+            return this.assets.find((a: Asset) => a["@id"] === c.assetId);
+          },
+        );
+
+        this.negotiations.forEach((n: ExtendedContractNegotiation) => {
+          if (n.contractAgreementId) {
+            n.agreement = this.dspConnector?.instance?.loadAgreement(n["@id"]);
+          }
+        });
+      } 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 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(this.object.name || "")}</div></tems-division
-            >
-            <tems-division type="body-m"
-              ><div>${String(this.object.description || "")}</div></tems-division
-            >
-            <tems-division type="h4"
-              ><div>${msg("All facts in this bundle")}</div></tems-division
-            >
-            <div class="card-grid card-grid-vertical">
-              ${this.object.facts.map((fact: Resource) => {
-                const tags = fact.categories.map((c: Resource) => ({
-                  name: c.name,
-                  type: "information",
-                }));
-                if (tags.length > 3) {
-                  const overflowTags = tags.length - 3;
-                  tags.splice(3, overflowTags);
-                  tags.push({
-                    name: `+${overflowTags} ${msg("more")}`,
-                    type: "information",
-                  });
-                }
-                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}
-                ></ds4go-card-catalog>`;
-              })}
-            </div>
-            <tems-division type="body-sm"
-              ><div>
-                <div>
-                  ${msg("Bundle created on")} ${String(this.object.created_at)}
-                </div>
-                <div>
-                  ${msg("Bundle updated on")} ${String(this.object.updated_at)}
+    return this._getResource.render({
+      pending: () => html`<solid-loader></solid-loader>`,
+      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>${String(obj.description || "")}</div></tems-division
+                >
+                <tems-division type="h4"
+                  ><div>${msg("All facts in this bundle")}</div></tems-division
+                >
+                <div class="card-grid card-grid-vertical">
+                  ${obj.facts.map((fact: Resource) => {
+                    const tags = fact.categories.map((c: Resource) => ({
+                      name: c.name,
+                      type: "information",
+                    }));
+                    if (tags.length > 3) {
+                      const overflowTags = tags.length - 3;
+                      tags.splice(3, overflowTags);
+                      tags.push({
+                        name: `+${overflowTags} ${msg("more")}`,
+                        type: "information",
+                      });
+                    }
+                    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}
+                    ></ds4go-card-catalog>`;
+                  })}
                 </div>
-              </div></tems-division
-            >
+                <tems-division type="body-sm"
+                  ><div>
+                    <div>
+                      ${msg("Bundle created on")} ${String(obj.created_at)}
+                    </div>
+                    <div>
+                      ${msg("Bundle updated on")} ${String(obj.updated_at)}
+                    </div>
+                  </div></tems-division
+                >
+                <tems-division type="h4"
+                  ><div>${msg("Technical informations")}</div></tems-division
+                >
+                ${this.contracts && this.contracts.length > 0
+                  ? html`${this.contracts.map(
+                      (contract: ContractDefinition) =>
+                        html`<ds4go-contract-modal-part
+                          .contract=${contract}
+                          .assets=${this.assets}
+                          .policies=${this.policies}
+                        ></ds4go-contract-modal-part>`,
+                    )}`
+                  : nothing}
+                ${this.negotiations && this.negotiations.length > 0
+                  ? html`<ds4go-negotiations-modal-part
+                        .negotiations=${this.negotiations}
+                        .assets=${this.assets}
+                        .type=${"PROVIDER"}
+                      ></ds4go-negotiations-modal-part>
+                      <ds4go-negotiations-modal-part
+                        .negotiations=${this.negotiations}
+                        .assets=${this.assets}
+                        .type=${"CONSUMER"}
+                      ></ds4go-negotiations-modal-part>`
+                  : nothing}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-    </div>`;
+        </div>`;
+      },
+      error: (e) => {
+        if (import.meta.env.DEV) {
+          console.error(e, this);
+        }
+        return nothing;
+      },
+    });
   }
 }

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

@@ -0,0 +1,145 @@
+import { localized, msg } from "@lit/localize";
+import type {
+  Asset,
+  ContractDefinition,
+  PolicyDefinition,
+} from "@src/component";
+import ComponentStyle from "@styles/modal/fact-bundle-modal/ds4go-contract-modal-part.scss?inline";
+import { css, html, LitElement, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-contract-modal-part")
+@localized()
+export class DS4GOContractModalPart extends LitElement {
+  static styles = css`
+    ${unsafeCSS(ComponentStyle)}
+  `;
+
+  @state()
+  contract?: ContractDefinition;
+
+  @state()
+  assets?: Asset[] = [];
+
+  @state()
+  policies?: PolicyDefinition[] = [];
+
+  @state()
+  expandedAssets = false;
+
+  @state()
+  expandedPolicies = false;
+
+  _toggleSection(section: "assets" | "policies") {
+    if (section === "assets") {
+      this.expandedAssets = !this.expandedAssets;
+    } else {
+      this.expandedPolicies = !this.expandedPolicies;
+    }
+  }
+
+  render() {
+    if (!this.contract) {
+      return nothing;
+    }
+
+    const contractId = this.contract["@id"];
+    const relatedAssets = this.assets?.filter((a: Asset) => {
+      if (!this.contract?.assetsSelector) return false;
+      if (Array.isArray(this.contract.assetsSelector)) {
+        return this.contract.assetsSelector.find(
+          (s) => s.operandRight === a["@id"],
+        );
+      }
+      return this.contract.assetsSelector.operandRight === a["@id"];
+    });
+
+    const relatedPolicies = this.policies?.filter(
+      (p: PolicyDefinition) =>
+        p["@id"] === this.contract?.accessPolicyId ||
+        p["@id"] === this.contract?.contractPolicyId,
+    );
+
+    return html`<div class="contract-section">
+      <div class="contract-header">
+        <tems-division type="h5">${msg("Contract")}</tems-division>
+        <tems-division type="body-sm"
+          >${contractId.split("/").pop()}</tems-division
+        >
+        ${this.contract.createdAt
+          ? html`<tems-division type="body-sm"
+              >${msg("Created")}:
+              ${new Date(
+                this.contract.createdAt,
+              ).toLocaleString()}</tems-division
+            >`
+          : nothing}
+      </div>
+
+      ${relatedAssets && relatedAssets.length > 0
+        ? html`<div class="contract-subsection">
+            <div
+              class="collapsible-header"
+              @click=${() => this._toggleSection("assets")}
+            >
+              <tems-division type="body-m">${msg("Assets")}</tems-division>
+              <icon-material-symbols-expand-more
+                class="chevron ${this.expandedAssets ? "expanded" : ""}"
+              ></icon-material-symbols-expand-more>
+            </div>
+            <div
+              class="collapsible-content ${this.expandedAssets
+                ? "expanded"
+                : ""}"
+            >
+              <div class="assets-list">
+                ${relatedAssets.map(
+                  (asset: Asset) =>
+                    html`<div class="asset-item">
+                      <tems-division type="body-sm"
+                        >${asset["@id"].split("/").pop()}</tems-division
+                      >
+                      <tems-division type="body-xs"
+                        >${asset.dataAddress?.baseUrl ||
+                        msg("No base URL")}</tems-division
+                      >
+                      ${asset.dataAddress?.type
+                        ? html`<tems-division type="body-xs"
+                            >${msg("Type")}:
+                            ${asset.dataAddress.type}</tems-division
+                          >`
+                        : nothing}
+                    </div>`,
+                )}
+              </div>
+            </div>
+          </div>`
+        : nothing}
+      ${relatedPolicies && relatedPolicies.length > 0
+        ? html`<div class="contract-subsection">
+            <div
+              class="collapsible-header"
+              @click=${() => this._toggleSection("policies")}
+            >
+              <tems-division type="body-m">${msg("Policies")}</tems-division>
+              <icon-material-symbols-expand-more
+                class="chevron ${this.expandedPolicies ? "expanded" : ""}"
+              ></icon-material-symbols-expand-more>
+            </div>
+            <div
+              class="collapsible-content ${this.expandedPolicies
+                ? "expanded"
+                : ""}"
+            >
+              ${relatedPolicies.map(
+                (policy: PolicyDefinition) =>
+                  html`<ds4go-odrl-policy-modal-part
+                    .policy=${policy}
+                  ></ds4go-odrl-policy-modal-part>`,
+              )}
+            </div>
+          </div>`
+        : nothing}
+    </div>`;
+  }
+}