@startinblox/components-ds4go 3.1.2 → 3.1.3

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

@@ -0,0 +1,132 @@
+import { localized, msg } from "@lit/localize";
+import type {
+  Asset,
+  ContractAgreement,
+  ContractNegotiation,
+} from "@src/component";
+import ComponentStyle from "@styles/modal/fact-bundle-modal/ds4go-negotiations-modal-part.scss?inline";
+import { css, html, LitElement, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+type ExtendedContractNegotiation = ContractNegotiation & {
+  agreement?: ContractAgreement;
+};
+
+@customElement("ds4go-negotiations-modal-part")
+@localized()
+export class DS4GONegotiationsModalPart extends LitElement {
+  static styles = css`
+    ${unsafeCSS(ComponentStyle)}
+  `;
+
+  @state()
+  negotiations?: ExtendedContractNegotiation[] = [];
+
+  @state()
+  assets?: Asset[] = [];
+
+  @state()
+  type: "PROVIDER" | "CONSUMER" = "PROVIDER";
+
+  _getNegotiationTags(negotiation: ExtendedContractNegotiation) {
+    const tags: Array<{ name: string; type: string }> = [
+      {
+        name: `State: ${negotiation.state}`,
+        type:
+          negotiation.state === "FINALIZED" || negotiation.state === "VERIFIED"
+            ? "success"
+            : "information",
+      },
+    ];
+
+    if (negotiation.counterPartyId) {
+      tags.push({
+        name: `Counterparty: ${negotiation.counterPartyId.split("/").pop()}`,
+        type: "information",
+      });
+    }
+
+    if (negotiation.agreement) {
+      tags.push({
+        name: msg("Has Agreement"),
+        type: "success",
+      });
+    }
+
+    return tags;
+  }
+
+  _getAgreementTags(agreement: ContractAgreement) {
+    const tags: Array<{ name: string; type: string }> = [];
+
+    if (agreement.consumerId) {
+      tags.push({
+        name: `Consumer: ${agreement.consumerId.split("/").pop()}`,
+        type: "information",
+      });
+    }
+
+    if (agreement.providerId) {
+      tags.push({
+        name: `Provider: ${agreement.providerId.split("/").pop()}`,
+        type: "information",
+      });
+    }
+
+    if (agreement.contractSigningDate) {
+      tags.push({
+        name: `Signed: ${new Date(
+          agreement.contractSigningDate,
+        ).toLocaleDateString()}`,
+        type: "success",
+      });
+    }
+
+    return tags;
+  }
+
+  _renderNegotiationCard(negotiation: ExtendedContractNegotiation) {
+    const tags = this._getNegotiationTags(negotiation);
+    const relatedAsset = this.assets?.find(
+      (a: Asset) => a["@id"] === negotiation.assetId,
+    );
+
+    return html`<ds4go-card-catalog
+      .object=${import.meta.env.DEV ? negotiation : nothing}
+      .header=${negotiation["@id"].split("/").pop()}
+      .content=${relatedAsset
+        ? `Asset: ${relatedAsset["@id"].split("/").pop()}`
+        : msg("No associated asset")}
+      .tags=${tags}
+      date=${negotiation.createdAt
+        ? new Date(negotiation.createdAt).toLocaleString()
+        : nothing}
+    ></ds4go-card-catalog>`;
+  }
+
+  render() {
+    if (!this.negotiations || this.negotiations.length === 0) {
+      return nothing;
+    }
+
+    const filteredNegotiations = this.negotiations.filter(
+      (n: ContractNegotiation) => n.type === this.type,
+    );
+
+    if (filteredNegotiations.length === 0) {
+      return nothing;
+    }
+
+    const title =
+      this.type === "PROVIDER"
+        ? msg("Provider Negotiations")
+        : msg("Consumer Negotiations");
+
+    return html`<tems-division type="body-m"><div>${title}</div></tems-division>
+      <div class="card-grid card-grid-vertical">
+        ${filteredNegotiations.map((negotiation: ExtendedContractNegotiation) =>
+          this._renderNegotiationCard(negotiation),
+        )}
+      </div>`;
+  }
+}

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

@@ -0,0 +1,233 @@
+import { localized, msg } from "@lit/localize";
+import type {
+  Constraint,
+  Duty,
+  OdrlPermission,
+  OdrlPolicy,
+  PolicyDefinition,
+  Prohibition,
+  Resource,
+} from "@src/component";
+import ComponentStyle from "@styles/modal/fact-bundle-modal/ds4go-odrl-policy-modal-part.scss?inline";
+import { css, html, LitElement, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+type ODSLPolicyReformater = OdrlPolicy & {
+  "odrl:target"?: OdrlPolicy["target"];
+  "odrl:permission"?: (OdrlPermission & {
+    "odrl:action": OdrlPermission["action"];
+    "odrl:target"?: OdrlPermission["target"];
+    "odrl:constraint"?: OdrlPermission["constraint"][];
+  })[];
+  "odrl:prohibition"?: (Prohibition & {
+    "odrl:action": Prohibition["action"];
+    "odrl:target"?: Prohibition["target"];
+    "odrl:constraint"?: Prohibition["constraint"][];
+  })[];
+  "odrl:obligation"?: (Duty & {
+    "odrl:action": Duty["action"];
+    "odrl:constraint"?: Duty["constraint"][];
+  })[];
+};
+
+@customElement("ds4go-odrl-policy-modal-part")
+@localized()
+export class DS4GOOdrlPolicyModalPart extends LitElement {
+  static styles = css`
+    ${unsafeCSS(ComponentStyle)}
+  `;
+
+  @state()
+  policy?: PolicyDefinition;
+
+  _formatAction(action: string | string[] | Resource | Resource[]): string {
+    if (Array.isArray(action)) {
+      return action
+        .map((a) => {
+          if ((a as Resource)["@id"]) {
+            return (a as Resource)["@id"];
+          }
+          return a;
+        })
+        .join(", ");
+    }
+    if (typeof action === "object") {
+      return action["@id"];
+    }
+    return action;
+  }
+
+  _renderConstraint(constraint: Constraint) {
+    return html`<div class="constraint-item">
+      <tems-division type="body-xs"
+        >${constraint.leftOperand} ${constraint.operator}
+        ${String(constraint.rightOperand)}</tems-division
+      >
+      ${constraint["@type"]
+        ? html`<tems-division type="body-xs"
+            >${msg("Type")}: ${constraint["@type"]}</tems-division
+          >`
+        : nothing}
+    </div>`;
+  }
+
+  render() {
+    if (!this.policy) {
+      return nothing;
+    }
+    const odrlPolicy: ODSLPolicyReformater = this.policy.policy;
+
+    if (!Array.isArray(odrlPolicy?.["odrl:permission"])) {
+      odrlPolicy["odrl:permission"] = odrlPolicy["odrl:permission"]
+        ? [odrlPolicy["odrl:permission"]]
+        : [];
+    }
+
+    if (!Array.isArray(odrlPolicy?.["odrl:prohibition"])) {
+      odrlPolicy["odrl:prohibition"] = odrlPolicy["odrl:prohibition"]
+        ? [odrlPolicy["odrl:prohibition"]]
+        : [];
+    }
+
+    if (!Array.isArray(odrlPolicy?.["odrl:obligation"])) {
+      odrlPolicy["odrl:obligation"] = odrlPolicy["odrl:obligation"]
+        ? [odrlPolicy["odrl:obligation"]]
+        : [];
+    }
+
+    return html`<div class="policy-card">
+      <div class="policy-header">
+        <tems-division type="body-m"
+          >${msg("Policy")}:
+          ${this.policy["@id"].split("/").pop()}</tems-division
+        >
+        <tems-division type="body-xs"
+          >${msg("Type")}: ${odrlPolicy?.["@type"] || "Unknown"}</tems-division
+        >
+        ${this.policy.createdAt
+          ? html`<tems-division type="body-xs"
+              >${msg("Created")}:
+              ${new Date(this.policy.createdAt).toLocaleString()}</tems-division
+            >`
+          : nothing}
+      </div>
+
+      ${odrlPolicy?.["odrl:permission"] &&
+      odrlPolicy["odrl:permission"].length > 0
+        ? html`<div class="policy-section">
+            <tems-division type="body-sm" class="policy-section-title"
+              >${msg("Permissions")}</tems-division
+            >
+            ${odrlPolicy["odrl:permission"].map(
+              (permission) =>
+                html`<div class="policy-item">
+                  <tems-division type="body-xs"
+                    >${msg("Action")}:
+                    ${this._formatAction(
+                      permission.action || permission["odrl:action"],
+                    )}</tems-division
+                  >
+                  ${permission.target || permission["odrl:target"]
+                    ? html`<tems-division type="body-xs"
+                        >${msg("Target")}:
+                        ${(permission.target || permission["odrl:target"])
+                          ?.split("/")
+                          .pop()}</tems-division
+                      >`
+                    : nothing}
+                  ${(permission.constraint || permission["odrl:constraint"]) &&
+                  (permission.constraint || permission["odrl:constraint"] || [])
+                    .length > 0
+                    ? html`<div class="constraints-list">
+                        ${(
+                          permission.constraint ||
+                          permission["odrl:constraint"] ||
+                          []
+                        ).map((constraint) =>
+                          this._renderConstraint(constraint as Constraint),
+                        )}
+                      </div>`
+                    : nothing}
+                </div>`,
+            )}
+          </div>`
+        : nothing}
+      ${odrlPolicy?.["odrl:prohibition"] &&
+      odrlPolicy["odrl:prohibition"].length > 0
+        ? html`<div class="policy-section">
+            <tems-division type="body-sm" class="policy-section-title"
+              >${msg("Prohibitions")}</tems-division
+            >
+            ${odrlPolicy["odrl:prohibition"].map(
+              (prohibition) =>
+                html`<div class="policy-item">
+                  <tems-division type="body-xs"
+                    >${msg("Action")}:
+                    ${this._formatAction(
+                      prohibition.action || prohibition["odrl:action"],
+                    )}</tems-division
+                  >
+                  ${prohibition.target || prohibition["odrl:target"]
+                    ? html`<tems-division type="body-xs"
+                        >${msg("Target")}:
+                        ${(prohibition.target || prohibition["odrl:target"])
+                          ?.split("/")
+                          .pop()}</tems-division
+                      >`
+                    : nothing}
+                  ${(prohibition.constraint ||
+                    prohibition["odrl:constraint"]) &&
+                  (
+                    prohibition.constraint ||
+                    prohibition["odrl:constraint"] ||
+                    []
+                  ).length > 0
+                    ? html`<div class="constraints-list">
+                        ${(
+                          prohibition.constraint ||
+                          prohibition["odrl:constraint"] ||
+                          []
+                        ).map((constraint) =>
+                          this._renderConstraint(constraint as Constraint),
+                        )}
+                      </div>`
+                    : nothing}
+                </div>`,
+            )}
+          </div>`
+        : nothing}
+      ${odrlPolicy?.["odrl:obligation"] &&
+      odrlPolicy["odrl:obligation"].length > 0
+        ? html`<div class="policy-section">
+            <tems-division type="body-sm" class="policy-section-title"
+              >${msg("Obligations")}</tems-division
+            >
+            ${odrlPolicy["odrl:obligation"].map(
+              (obligation) =>
+                html`<div class="policy-item">
+                  <tems-division type="body-xs"
+                    >${msg("Action")}:
+                    ${this._formatAction(
+                      obligation.action || obligation["odrl:action"],
+                    )}</tems-division
+                  >
+                  ${(obligation.constraint || obligation["odrl:constraint"]) &&
+                  (obligation.constraint || obligation["odrl:constraint"] || [])
+                    .length > 0
+                    ? html`<div class="constraints-list">
+                        ${(
+                          obligation.constraint ||
+                          obligation["odrl:constraint"] ||
+                          []
+                        ).map((constraint: any) =>
+                          this._renderConstraint(constraint as Constraint),
+                        )}
+                      </div>`
+                    : nothing}
+                </div>`,
+            )}
+          </div>`
+        : nothing}
+    </div>`;
+  }
+}

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

@@ -2,34 +2,54 @@ import { Task } from "@lit/task";
 import type {
   Asset,
   AssetInput,
+  ContractAgreement,
   ContractDefinition,
   ContractDefinitionInput,
+  ContractNegotiation,
   PolicyDefinition,
   PolicyDefinitionInput,
   Resource,
 } from "@src/component";
 import { OrbitDSPComponent } from "@startinblox/solid-tems-shared";
 import { nothing } from "lit";
-import { customElement, state } from "lit/decorators.js";
-
-export interface DSPProviderConfig {
-  name: string;
-  address: string;
-  color?: string;
-  participantId?: string;
-}
+import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("solid-dsp-connector")
 export class SolidDspConnector extends OrbitDSPComponent {
-  async _responseAdaptator(response: Resource): Promise<Resource> {
-    if (response.providers) {
-      if (!Array.isArray(response.providers)) {
-        response.providers = [response.providers].filter((i: any) => i);
-      }
-    } else if (response.provider) {
-      response.providers = [response.provider].filter((i: any) => i);
+  async _afterAttach(): Promise<void> {
+    await super._afterAttach();
+    await this.loadAll();
+    this.setupAutoRefresh();
+    return Promise.resolve();
+  }
+
+  @property({ attribute: "auto-refresh", type: Number })
+  autoRefreshInterval = 0;
+
+  private refreshTimer?: number;
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
     }
-    return response;
+  }
+
+  private setupAutoRefresh() {
+    if (this.autoRefreshInterval > 0) {
+      this.refreshTimer = window.setInterval(async () => {
+        await this.loadAll();
+      }, this.autoRefreshInterval * 1000);
+    }
+  }
+
+  async loadAll() {
+    await Promise.all([
+      this.loadAssets(),
+      this.loadPolicies(),
+      this.loadContracts(),
+      this.loadNegotiations(),
+    ]);
   }
 
   @state()
@@ -152,6 +172,40 @@ export class SolidDspConnector extends OrbitDSPComponent {
     }
   }
 
+  @state()
+  negotiations: ContractNegotiation[] = [];
+
+  private async loadNegotiations() {
+    if (!this.storeService) {
+      console.error("Store not initialized. Check connector configuration.");
+      return;
+    }
+
+    try {
+      const negotiations = await this.storeService.getAllContractNegotiations();
+      this.negotiations = Array.isArray(negotiations) ? negotiations : [];
+    } catch (e) {
+      console.error("Failed to load contract negotiations", e);
+    }
+  }
+
+  async loadAgreement(
+    negotiationId: ContractNegotiation["@id"],
+  ): Promise<ContractAgreement | undefined> {
+    if (!this.storeService) {
+      console.error("Store not initialized. Check connector configuration.");
+      return Promise.resolve(undefined);
+    }
+
+    try {
+      return this.storeService.getContractAgreement(negotiationId);
+    } catch (e) {
+      console.error("Failed to load contract negotiations", e);
+    }
+
+    return Promise.resolve(undefined);
+  }
+
   _getResource = new Task(this, {
     task: async () => {
       if (!this.orbit) return;

package/src/styles/modal/ds4go-customer-modal.scss

@@ -86,6 +86,6 @@
     width: fit-content;
     max-width: 80vw;
     height: fit-content;
-    max-height: 80vw;
+    max-height: 80vh;
   }
 }

package/src/styles/modal/ds4go-fact-bundle-modal.scss

@@ -86,6 +86,6 @@
     width: fit-content;
     max-width: 80vw;
     height: fit-content;
-    max-height: 80vw;
+    max-height: 80vh;
   }
 }

package/src/styles/modal/fact-bundle-modal/ds4go-contract-modal-part.scss

@@ -0,0 +1,84 @@
+.contract-section {
+  background-color: var(--color-surface-secondary);
+  border: var(--border-width-sm) solid var(--color-border-secondary);
+  border-radius: var(--border-radius-md);
+  padding: var(--scale-500);
+  margin-bottom: var(--scale-400);
+  display: flex;
+  flex-direction: column;
+  gap: var(--scale-400);
+
+  .contract-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-200);
+    padding-bottom: var(--scale-300);
+    border-bottom: var(--border-width-sm) solid
+      var(--color-border-secondary);
+  }
+
+  .contract-subsection {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-300);
+
+    .collapsible-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      user-select: none;
+      padding: var(--scale-300) var(--scale-400);
+      border-radius: var(--border-radius-sm);
+      background-color: var(--color-surface-primary);
+      border: var(--border-width-sm) solid var(--color-border-secondary);
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: var(--color-surface-tertiary);
+        border-color: var(--color-border-primary);
+      }
+
+      .chevron {
+        transition: transform 0.3s ease;
+        font-size: 1.5rem;
+        color: var(--color-text-secondary);
+
+        &.expanded {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .collapsible-content {
+      max-height: 0;
+      overflow: hidden;
+      transition: max-height 0.3s ease, opacity 0.3s ease;
+      opacity: 0;
+      padding: 0 var(--scale-400);
+
+      &.expanded {
+        max-height: 2000px;
+        opacity: 1;
+        padding-top: var(--scale-300);
+        padding-bottom: var(--scale-300);
+      }
+    }
+
+    .assets-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--scale-200);
+
+      .asset-item {
+        background-color: var(--color-surface-primary);
+        border: var(--border-width-sm) solid var(--color-border-primary);
+        border-radius: var(--border-radius-sm);
+        padding: var(--scale-300);
+        display: flex;
+        flex-direction: column;
+        gap: var(--scale-100);
+      }
+    }
+  }
+}

package/src/styles/modal/fact-bundle-modal/ds4go-negotiations-modal-part.scss

@@ -0,0 +1,15 @@
+.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;
+}

package/src/styles/modal/fact-bundle-modal/ds4go-odrl-policy-modal-part.scss

@@ -0,0 +1,58 @@
+.policy-card {
+  background-color: var(--color-surface-secondary);
+  border: var(--border-width-sm) solid var(--color-border-secondary);
+  border-radius: var(--border-radius-md);
+  padding: var(--scale-500);
+  margin-bottom: var(--scale-400);
+  display: flex;
+  flex-direction: column;
+  gap: var(--scale-400);
+
+  .policy-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-200);
+    padding-bottom: var(--scale-300);
+    border-bottom: var(--border-width-sm) solid var(--color-border-secondary);
+  }
+
+  .policy-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-300);
+
+    .policy-section-title {
+      font-weight: var(--font-weight-semibold);
+      color: var(--color-text-heading);
+    }
+
+    .policy-item {
+      background-color: var(--color-surface-primary);
+      border: var(--border-width-sm) solid var(--color-border-primary);
+      border-radius: var(--border-radius-sm);
+      padding: var(--scale-300);
+      display: flex;
+      flex-direction: column;
+      gap: var(--scale-200);
+
+      .constraints-list {
+        margin-top: var(--scale-200);
+        display: flex;
+        flex-direction: column;
+        gap: var(--scale-100);
+        padding-left: var(--scale-400);
+        border-left: var(--border-width-sm) solid var(--color-border-secondary);
+
+        .constraint-item {
+          background-color: var(--color-surface-secondary);
+          border: var(--border-width-sm) solid var(--color-border-secondary);
+          border-radius: var(--border-radius-xs);
+          padding: var(--scale-200);
+          display: flex;
+          flex-direction: column;
+          gap: var(--scale-100);
+        }
+      }
+    }
+  }
+}