@startinblox/components-ds4go 2.2.3 → 2.3.0

package/locales/en.xlf

@@ -23,6 +23,81 @@
 <trans-unit id="sd3682395cf86f913">
   <source>Bundle updated on</source>
 </trans-unit>
+<trans-unit id="s20acf344316637a0">
+  <source>All Catalogs</source>
+</trans-unit>
+<trans-unit id="s67269ab6dc51ec41">
+  <source>Error while loading catalog <x id="0" equiv-text="${this.catalogId}"/></source>
+</trans-unit>
+<trans-unit id="s0b88896b7338837d">
+  <source>All Datasets</source>
+</trans-unit>
+<trans-unit id="s541d9cd11a5bc840">
+  <source>Datasets from</source>
+</trans-unit>
+<trans-unit id="s01ceffa02fa6bd7f">
+  <source>All Sectors</source>
+</trans-unit>
+<trans-unit id="s4aaac20ff7887391">
+  <source>Catalogs available in</source>
+</trans-unit>
+<trans-unit id="sa89a60c3e1230cec">
+  <source>Root Authority</source>
+</trans-unit>
+<trans-unit id="se5784a16a6799dad">
+  <source>Back to <x id="0" equiv-text="${this.catalogId ? this.sectorId : &quot;Root Authority&quot;}"/></source>
+</trans-unit>
+<trans-unit id="s6665daa6d6147db0">
+  <source>No data available, data source may be temporarily unavailable.</source>
+</trans-unit>
+<trans-unit id="sc16e00a7a8b2fde2">
+  <source>Back</source>
+</trans-unit>
+<trans-unit id="s2c8189544e3ea679">
+  <source>Retry</source>
+</trans-unit>
+<trans-unit id="seb1a452f2df70baf">
+  <source>Create bundle</source>
+</trans-unit>
+<trans-unit id="sed5b6ae54e00125c">
+  <source>Bundle name</source>
+</trans-unit>
+<trans-unit id="s11099da36cbc3173">
+  <source>Bundle description</source>
+</trans-unit>
+<trans-unit id="sac1b0231875ff056">
+  <source><x id="0" equiv-text="${selectedFactsCount}"/> selected fact<x id="1" equiv-text="${selectedFactsCount &gt; 1 ? &quot;s&quot; : &quot;&quot;}"/></source>
+</trans-unit>
+<trans-unit id="s8272d3578b7c78d5">
+  <source>Displaying <x id="0" equiv-text="${splicedDatas.length}"/> of <x id="1" equiv-text="${datas.length}"/> result<x id="2" equiv-text="${datas.length &gt; 1 ? &quot;s&quot; : &quot;&quot;}"/></source>
+</trans-unit>
+<trans-unit id="sa40e7f4f2a43e2f7">
+  <source>Show more results</source>
+</trans-unit>
+<trans-unit id="sacf246e0fa11730d">
+  <source>Show all results</source>
+</trans-unit>
+<trans-unit id="s9094c0cde8fb5058">
+  <source>No results found</source>
+</trans-unit>
+<trans-unit id="sc7e3b594ffcd9d61">
+  <source>Open access</source>
+</trans-unit>
+<trans-unit id="sefcf950b3cc4fc3b">
+  <source>Language</source>
+</trans-unit>
+<trans-unit id="s6ae6714aac4ba43d">
+  <source>Language code (en, de, es, fr...)</source>
+</trans-unit>
+<trans-unit id="s21fb127cabcd5617">
+  <source>Comma-separated, eg.: en,de,es,fr)</source>
+</trans-unit>
+<trans-unit id="sa6ef22f7e7e95e2b">
+  <source>Access policy</source>
+</trans-unit>
+<trans-unit id="s6de61424bb681993">
+  <source>Contract policy</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/package.json

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

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

@@ -33,10 +33,10 @@ export class Ds4goFactBundleModal extends ComponentObjectHandler {
         <div class="modal-box">
           <div class="modal-content">
             <tems-division type="h3"
-              ><div>${String(this.object.name)}</div></tems-division
+              ><div>${String(this.object.name || "")}</div></tems-division
             >
             <tems-division type="body-m"
-              ><div>${String(this.object.description)}</div></tems-division
+              ><div>${String(this.object.description || "")}</div></tems-division
             >
             <tems-division type="h4"
               ><div>${msg("All facts in this bundle")}</div></tems-division

package/src/components/solid-fact-bundle-creation.ts

@@ -2,68 +2,24 @@ import {
   filterObjectByValue,
   formatDate,
   OrbitComponent,
+  requestNavigation,
   sort,
 } from "@helpers";
 import { msg, str } from "@lit/localize";
 import { Task } from "@lit/task";
-import type { PropertiesPicker, Resource } from "@src/component";
-import FlexHelpers from "@styles/_helpers/flex.scss?inline";
-import { css, html, nothing, unsafeCSS } from "lit";
+import type {
+  OdrlPolicy,
+  OrbitComponent as OrbitComponentConfig,
+  PropertiesPicker,
+  Resource,
+} from "@src/component";
+import ComponentStyles from "@styles/fact-bundle-creation.scss?inline";
+import { html, nothing, unsafeCSS } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("solid-fact-bundle-creation")
 export class SolidFactBundle extends OrbitComponent {
-  static styles = [
-    unsafeCSS(FlexHelpers),
-    css`
-      [slot="content"] {
-        height: 100%;
-      }
-      section {
-        gap: var(--scale-400);
-        padding: var(--scale-900) 0;
-        height: calc(100% - var(--scale-900) * 2);
-      }
-      section > div {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: var(--scale-400);
-        flex: 1;
-      }
-      section > div:first-child {
-        max-width: 400px;
-      }
-      .card-grid {
-        flex: 1;
-        overflow-y: scroll;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 20px;
-        align-content: flex-start;
-      }
-      .card-grid-vertical {
-        justify-content: stretch;
-      }
-      .card-grid-vertical tems-card-catalog {
-        width: 354px;
-        height: fit-content;
-      }
-      tems-card-catalog {
-        cursor: pointer;
-      }
-      tems-card-catalog[selected] {
-        --color-border-primary: var(--color-surface-action-solid);
-      }
-      tems-search-bar {
-        --scale-900: 0;
-      }
-      .gap-400 {
-        gap: var(--scale-400);
-      }
-    `,
-  ];
+  static styles = [unsafeCSS(ComponentStyles)];
 
   @property({ attribute: "header", type: String })
   header?: string = "DS4GO Fact Bundling Creation";
@@ -80,12 +36,48 @@ export class SolidFactBundle extends OrbitComponent {
   @state()
   bundleDescription = "";
 
+  @state()
+  bundleLanguage = "en";
+
+  policyTemplates: { id: string; name: string; policy: OdrlPolicy }[] = [
+    {
+      id: "policy-open-access",
+      name: msg("Open access"),
+      policy: {
+        "@type": "Set",
+        permission: [
+          {
+            action: "use",
+          },
+        ],
+        prohibition: [],
+        obligation: [],
+      },
+    },
+  ];
+
+  @state()
+  bundleAccessPolicy = this.policyTemplates[0].id;
+
+  @state()
+  bundleContractPolicy = this.policyTemplates[0].id;
+
   @state()
   filterFactText = "";
 
   @state()
   spliceLength = 0;
 
+  @state()
+  dspConnector: OrbitComponentConfig | undefined;
+
+  async _afterAttach() {
+    // use this.dspConnector.instance to reach the connector
+    this.dspConnector = this.orbit?.getComponent("dsp-connector");
+
+    return Promise.resolve();
+  }
+
   cherryPickedProperties: PropertiesPicker[] = [
     { key: "created_at", value: "created_at", cast: formatDate },
     { key: "updated_at", value: "updated_at", cast: formatDate },
@@ -184,7 +176,9 @@ export class SolidFactBundle extends OrbitComponent {
       "@type": ["ldp:Container", "ds4go:FactBundle"],
       name: this.bundleName,
       description: this.bundleDescription || "",
-      "ldp:contains": this.selectedFacts.map((fact: Resource) => ({"@id": fact["@id"]})),
+      "ldp:contains": this.selectedFacts.map((fact: Resource) => ({
+        "@id": fact["@id"],
+      })),
     };
 
     const newFactBundleId = await window.sibStore.post(
@@ -205,6 +199,109 @@ export class SolidFactBundle extends OrbitComponent {
         bubbles: true,
       }),
     );
+
+    if (this.dspConnector) {
+      const idFromBundleId = await window.crypto.subtle
+        .digest("SHA-256", new TextEncoder().encode(newFactBundleId))
+        .then((hash) => {
+          return `sha-256:${Array.from(new Uint8Array(hash))
+            .map((b) => b.toString(16).padStart(2, "0"))
+            .join("")}`;
+        });
+
+      await this.dspConnector.instance?.createAsset({
+        "@id": `urn:asset-id:${idFromBundleId}`,
+        properties: {
+          name: this.bundleName,
+          description: this.bundleDescription,
+          contenttype: "application/ld+json",
+          language: this.bundleLanguage,
+        },
+        dataAddress: {
+          "@type": "DataAddress",
+          type: "HttpData",
+          baseUrl: newFactBundleId,
+        },
+      });
+
+      await Promise.all([
+        this.dspConnector.instance?.createPolicy({
+          "@id": `urn:access-policy-id:${idFromBundleId}`,
+          "@type": "PolicyDefinition",
+          policy: {
+            "@context": "http://www.w3.org/ns/odrl.jsonld",
+            ...this.policyTemplates.find(
+              (p) => p.id === this.bundleAccessPolicy,
+            )?.policy,
+          },
+        }),
+        this.dspConnector.instance?.createPolicy({
+          "@id": `urn:contract-policy-id:${idFromBundleId}`,
+          "@type": "PolicyDefinition",
+          policy: {
+            "@context": "http://www.w3.org/ns/odrl.jsonld",
+            ...this.policyTemplates.find(
+              (p) => p.id === this.bundleContractPolicy,
+            )?.policy,
+          },
+        }),
+        this.dspConnector.instance?.createContract({
+          "@id": `urn:contract-id:${idFromBundleId}`,
+          "@type": "ContractDefinition",
+          accessPolicyId: `urn:access-policy-id:${idFromBundleId}`,
+          contractPolicyId: `urn:contract-policy-id:${idFromBundleId}`,
+          assetsSelector: [
+            {
+              "@type": "Criterion",
+              operandLeft: "https://w3id.org/edc/v0.0.1/ns/id",
+              operator: "=",
+              operandRight: `urn:asset-id:${idFromBundleId}`,
+            },
+          ],
+        }),
+      ]);
+
+      // TODO: Do it from the other side, Adele
+      const TemsAssetManagement = document.querySelector(
+        "solid-tems-assets-management",
+      );
+      if (TemsAssetManagement) {
+        TemsAssetManagement.loadAssets();
+      }
+
+      const TemsPoliciesManagement = document.querySelector(
+        "solid-tems-policies-management",
+      );
+      if (TemsPoliciesManagement) {
+        TemsPoliciesManagement.loadPolicies();
+      }
+
+      const TemsContractsManagement = document.querySelector(
+        "solid-tems-contracts-management",
+      );
+      if (TemsContractsManagement) {
+        TemsContractsManagement.loadData();
+      }
+    }
+
+    this.bundleName = "";
+    this.bundleDescription = "";
+    this.selectedFacts = [];
+
+    const factbundleComponent: any = this.orbit?.getComponent("fact-bundle");
+
+    document.dispatchEvent(
+      new CustomEvent("save", {
+        detail: { resource: { "@id": factbundleComponent?.defaultDataSrc } },
+        bubbles: true,
+      }),
+    );
+    if (factbundleComponent) {
+      requestNavigation(
+        factbundleComponent?.route,
+        factbundleComponent?.defaultDataSrc,
+      );
+    }
   }
 
   _updateBundleName(e: Event) {
@@ -215,6 +312,24 @@ export class SolidFactBundle extends OrbitComponent {
     this.bundleDescription = e.detail.value;
   }
 
+  _updateBundleLanguage(e: Event) {
+    this.bundleLanguage = e.detail.value;
+  }
+
+  _selectBundleAccessPolicy(e: Event) {
+    e.preventDefault();
+    if (e.target) {
+      this.bundleAccessPolicy = e.target.value;
+    }
+  }
+
+  _selectBundleContractPolicy(e: Event) {
+    e.preventDefault();
+    if (e.target) {
+      this.bundleContractPolicy = e.target.value;
+    }
+  }
+
   _toggleFactSelection(fact: Resource) {
     if (this.selectedFacts.includes(fact)) {
       this.selectedFacts = this.selectedFacts.filter((f) => f !== fact);
@@ -241,7 +356,12 @@ export class SolidFactBundle extends OrbitComponent {
 
           const splicedDatas = datas.slice(0, this.spliceLength);
           const selectedFactsCount = this.selectedFacts.length;
-          const allowCreation = !!this.bundleName && selectedFactsCount > 0;
+          const allowCreation =
+            !!this.bundleName &&
+            selectedFactsCount > 0 &&
+            !!this.bundleLanguage &&
+            !!this.bundleAccessPolicy &&
+            !!this.bundleContractPolicy;
 
           return html`<tems-viewport>
             <tems-header slot="header" heading=${this.header}>
@@ -276,6 +396,43 @@ export class SolidFactBundle extends OrbitComponent {
                       @change=${this._updateBundleDescription}
                     ></tems-textarea>
                   </div>
+                  <div>
+                    <tems-input
+                      type="text"
+                      label=${msg("Language")}
+                      placeholder=${msg("Language code (en, de, es, fr...)")}
+                      hint=${msg("Comma-separated, eg.: en,de,es,fr)")}
+                      required=""
+                      .value=${this.bundleLanguage}
+                      @change=${this._updateBundleLanguage}
+                    ></tems-input>
+                  </div>
+                  <div class="select">
+                    <tems-label label=${msg("Access policy")}></tems-label>
+                    <select @change=${this._selectBundleAccessPolicy}>
+                      ${this.policyTemplates.map((policy) => {
+                        return html`<option
+                          value="${policy.id}"
+                          ?selected="${policy.id === this.bundleAccessPolicy}"
+                        >
+                          ${policy.name}
+                        </option>`;
+                      })}
+                    </select>
+                  </div>
+                  <div class="select">
+                    <tems-label label=${msg("Contract policy")}></tems-label>
+                    <select @change=${this._selectBundleContractPolicy}>
+                      ${this.policyTemplates.map((policy) => {
+                        return html`<option
+                          value="${policy.id}"
+                          ?selected="${policy.id === this.bundleContractPolicy}"
+                        >
+                          ${policy.name}
+                        </option>`;
+                      })}
+                    </select>
+                  </div>
                   ${selectedFactsCount > 0
                     ? html`<tems-division type="h4">
                           <div>
@@ -386,7 +543,10 @@ export class SolidFactBundle extends OrbitComponent {
                                   </div>
                                 </div>`
                               : nothing}`
-                        : html`${msg("No results found")} ${this.filterFactText ? `for "${this.filterFactText}".` : ""}`}
+                        : html`${msg("No results found")}
+                          ${this.filterFactText
+                            ? `for "${this.filterFactText}".`
+                            : ""}`}
                     </div>`
                   : nothing}
               </section>

package/src/components/solid-fact-bundle.ts

@@ -1,4 +1,10 @@
-import { formatDate, OrbitComponent, requestNavigation, setupCacheInvalidation, sort } from "@helpers";
+import {
+  formatDate,
+  OrbitComponent,
+  requestNavigation,
+  setupCacheInvalidation,
+  sort,
+} from "@helpers";
 import { msg } from "@lit/localize";
 import { Task } from "@lit/task";
 import type {
@@ -12,13 +18,6 @@ import { customElement, property, state } from "lit/decorators.js";
 
 @customElement("solid-fact-bundle")
 export class SolidFactBundle extends OrbitComponent {
-  constructor() {
-    super();
-    setupCacheInvalidation(this, {
-      keywords: ["factbundles"],
-    });
-  }
-
   static styles = css`
     .modal {
       position: fixed;
@@ -88,6 +87,10 @@ export class SolidFactBundle extends OrbitComponent {
   }
 
   async _afterAttach() {
+    setupCacheInvalidation(this, {
+      keywords: ["factbundles"],
+    });
+
     this.menuComponent = document.querySelector(
       `[uniq="${this.orbit?.getComponent("menu")?.uniq}"]`,
     );
@@ -102,7 +105,7 @@ export class SolidFactBundle extends OrbitComponent {
   _getResource = new Task(this, {
     task: async ([dataSrc, objSrc]) => {
       if (
-        (!dataSrc && !objSrc) ||
+        !dataSrc ||
         !this.orbit ||
         (!this.noRouter &&
           this.route &&
@@ -136,7 +139,13 @@ export class SolidFactBundle extends OrbitComponent {
         this.objects = [];
       }
 
-      this.object = this.objects.find((obj: Resource) => obj["@id"] === objSrc);
+      if (objSrc) {
+        this.object = this.objects.find(
+          (obj: Resource) => obj["@id"] === objSrc,
+        );
+      } else {
+        this.dataSrc = dataSrc;
+      }
 
       return sort(this.objects, "name", "asc");
     },
@@ -232,9 +241,8 @@ export class SolidFactBundle extends OrbitComponent {
                 @clicked=${this._openModal}
                 @result-count=${this._resultCountUpdate}
               ></ds4go-fact-bundle-holder>
-              ${
-                this.object
-                  ? html`<div
+              ${this.object
+                ? html`<div
                     class="modal"
                     @click=${this._closeModalFromBackground}
                   >
@@ -243,8 +251,7 @@ export class SolidFactBundle extends OrbitComponent {
                       @close=${this._closeModal}
                     ></ds4go-fact-bundle-modal>
                   </div>`
-                  : nothing
-              }
+                : nothing}
             </div>
           </tems-viewport>`;
         },

package/src/styles/fact-bundle-creation.scss

@@ -0,0 +1,102 @@
+@use "sass:meta";
+
+@include meta.load-css("./_helpers/flex");
+
+[slot="content"] {
+  height: 100%;
+}
+
+section {
+  gap: var(--scale-400);
+  padding: var(--scale-900) 0;
+  height: calc(100% - var(--scale-900) * 2);
+
+  > div {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: var(--scale-400);
+    flex: 1;
+
+    &:first-child {
+      max-width: 400px;
+    }
+  }
+}
+
+.card-grid {
+  flex: 1;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 20px;
+  align-content: flex-start;
+}
+
+.card-grid-vertical {
+  justify-content: stretch;
+
+  tems-card-catalog {
+    width: 354px;
+    height: fit-content;
+  }
+}
+
+tems-card-catalog {
+  cursor: pointer;
+
+  &[selected] {
+    --color-border-primary: var(--color-surface-action-solid);
+  }
+}
+
+tems-search-bar {
+  --scale-900: 0;
+}
+
+.gap-400 {
+  gap: var(--scale-400);
+}
+
+div.select {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--scale-200);
+  width: 100%;
+}
+
+select {
+  width: 100%;
+  background-color: var(--color-surface-primary);
+  border: var(--border-width-sm) solid var(--color-border-primary);
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-body);
+  font-family: var(--font-family-body);
+  font-size: var(--typography-size-body-sm);
+  font-style: normal;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-body-sm);
+  letter-spacing: var(--font-letter-spacing-default);
+  padding: var(--scale-100) var(--scale-300);
+  appearance: none;
+  cursor: pointer;
+
+  &:hover {
+    border: var(--border-width-sm) solid var(--color-border-action);
+  }
+
+  option {
+    background-color: var(--color-surface-primary);
+    color: var(--color-text-body);
+    font-family: var(--font-family-body);
+    font-size: var(--typography-size-body-sm);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-body-sm);
+    letter-spacing: var(--font-letter-spacing-default);
+    padding: var(--scale-100) var(--scale-300);
+    cursor: pointer;
+  }
+}