@startinblox/components-ds4go 3.3.8 → 4.1.0

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

@@ -0,0 +1,217 @@
+import { formatDate, formatCase, OrbitComponent } from "@helpers";
+import { localized, msg } from "@lit/localize";
+import { Task } from "@lit/task";
+import { PropertiesPicker } from "@src/component";
+import type { Category, Fact } from "@src/ds4go";
+
+import ModalStyle from "@styles/modal/ds4go-fact-modal.scss?inline";
+import { css, html, nothing, unsafeCSS } from "lit";
+import { customElement, state } from "lit/decorators.js";
+
+@customElement("ds4go-fact-modal")
+@localized()
+export class Ds4goFactModal extends OrbitComponent {
+  constructor() {
+    super({ setupSubscriptions: false, ignoreRouter: true });
+  }
+
+  static styles = css`
+    ${unsafeCSS(ModalStyle)}
+  `;
+
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "created_at", value: "created_at" },
+    { key: "updated_at", value: "updated_at", cast: formatDate },
+    { key: "name", value: "name" },
+    { key: "description", value: "description" },
+    { key: "author", value: "author" },
+    { key: "link", value: "link" },
+    { key: "enclosure", value: "enclosure" },
+    { key: "categories", value: "categories", expand: true },
+    { key: "medias", value: "medias", expand: true },
+    { key: "url", value: "url" },
+    // { key: "file_size", value: "file_size" },
+    // { key: "file_type", value: "file_type" },
+    // { key: "width", value: "width" },
+    // { key: "height", value: "height" },
+    // Can't get raw review json, as store does not support datas without ids
+    // { key: "review", value: "review" },
+  ];
+
+  @state()
+  disableButton = false;
+
+  _generateVideo() {
+    this.orbit?.Swal.fire({
+      title: msg("Generate with Tralalère"),
+      text: msg(
+        "This will create an AI-Generated video of this fact.\nYou will be charged 5€ on your account.",
+      ),
+      icon: "warning",
+      position: "center",
+      backdrop: true,
+      showCancelButton: true,
+      confirmButtonText: msg("Yes, generate it!"),
+      cancelButtonText: msg("Cancel"),
+      customClass: {
+        confirmButton:
+          "button text-xsmall text-bold text-center reversed color-secondary bordered icon icon-check icon-margin-right-xsmall no-background-image",
+        cancelButton:
+          "button text-xsmall text-bold text-center reversed color-primary bordered icon icon-exclamation icon-margin-right-xsmall no-background-image",
+      },
+    }).then((result: any) => {
+      if (result.isConfirmed) {
+        this.orbit?.Swal.fire({
+          title: msg("Generating..."),
+          text: msg("Please wait while Tralalère generates your AI-Video..."),
+          icon: "info",
+          showConfirmButton: false,
+          allowOutsideClick: false,
+          allowEscapeKey: false,
+          allowEnterKey: false,
+        });
+        setTimeout(() => {
+          this.orbit?.Swal.fire({
+            title: msg("AI-Video generated!"),
+            text: msg(
+              "Your AI-Generated video has been generated and is available in your Tralalère space.",
+            ),
+            icon: "success",
+          });
+          this.disableButton = true;
+        }, 2500);
+      }
+    });
+  }
+
+  _closeModal() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+
+  _getResource = new Task(this, {
+    task: async () => {
+      if (!this.object) return;
+
+      this.object = await this._getProxyValue(this.object["@id"]);
+
+      return this.object;
+    },
+    args: () => [this.caching, this.currentRoute],
+  });
+
+  render() {
+    return this._getResource.render({
+      pending: () => html`<solid-loader></solid-loader>`,
+      complete: (obj?: Fact) => {
+        if (!obj) {
+          this._closeModal();
+          return nothing;
+        }
+
+        const formattedDate = formatDate(obj.created_at, {
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+          hour: "2-digit",
+          minute: "2-digit",
+          hour12: false,
+        });
+
+        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>
+            <tems-button
+              @click=${this._generateVideo}
+              disabled=${this.disableButton || nothing}
+              >${this.disableButton
+                ? msg("Video already generated")
+                : msg("Generate an AI-Video with Tralalère (5€)")}</tems-button
+            >
+          </div>
+          <div class="modal-content-wrapper">
+            <div class="modal-box">
+              <div class="modal-content">
+                ${obj.enclosure
+                  ? html`<div class="cover-image">
+                      <img src=${String(obj.enclosure)} alt="Cover image" />
+                    </div>`
+                  : nothing}
+                ${obj.author
+                  ? html`<tems-division type="body-sm" class="author-section">
+                      <div>
+                        ${msg("Published on")} ${formattedDate} | ${msg("By")}
+                        ${String(obj.author)}
+                      </div>
+                    </tems-division>`
+                  : nothing}
+                <tems-division type="h3"
+                  ><div>${String(obj.name || "")}</div></tems-division
+                >
+                <tems-division type="body-m"
+                  ><div>${String(obj.description || "")}</div></tems-division
+                >
+                ${obj.link
+                  ? html`<tems-division type="body-sm">
+                      <tems-button
+                        type="outline-color"
+                        .label=${msg("Open link on a new tab")}
+                        @click=${() => window.open(String(obj.link), "_blank")}
+                      ></tems-button>
+                    </tems-division>`
+                  : nothing}
+                ${(obj.medias || []).length > 0
+                  ? html`<tems-division type="h4"
+                        >${msg("Media files")}</tems-division
+                      >
+                      <div class="medias-gallery">
+                        ${(obj.medias || []).map(
+                          (media: any) =>
+                            html`<div class="media-item">
+                              ${media.url
+                                ? html`<img
+                                    src=${String(media.url)}
+                                    alt=${media.description || "Media"}
+                                    @click=${() =>
+                                      window.open(String(media.url), "_blank")}
+                                  />`
+                                : nothing}
+                            </div>`,
+                        )}
+                      </div>`
+                  : nothing}
+                ${(obj.categories || []).length > 0
+                  ? html`<tems-division type="h4"
+                        >${msg("Categories")}</tems-division
+                      >
+                      <div class="categories-list">
+                        ${(obj.categories || []).map(
+                          (c: Category) =>
+                            html`<tems-badge type="neutral" size="sm"
+                              >${formatCase(String(c.name))}</tems-badge
+                            >`,
+                        )}
+                      </div>`
+                  : nothing}
+                <tems-division type="body-sm"
+                  ><div>
+                    <div>${msg("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/odrl/policy-composer.ts

@@ -930,7 +930,7 @@ export class PolicyComposer extends LitElement {
       </fieldset>
       <div class="flex align-right spacer-top">
         <tems-button type="outline-gray" size="sm" @click=${this._resetPolicy}>
-          ${msg(`Reset to ${this.template.name} default`)}
+          ${msg(str`Reset to ${this.template.name} default`)}
         </tems-button>
       </div>
     </form>`;

package/src/components/odrl-policy-viewer.ts

@@ -1,18 +1,3 @@
-/**
- * ODRL Policy Viewer Component
- *
- * A Lit web component for displaying ODRL policies in a user-friendly format.
- *
- * Usage:
- * ```html
- * <odrl-policy-viewer .policy=${policyObject}></odrl-policy-viewer>
- * ```
- *
- * Attributes:
- * - policy: OdrlPolicy object to display
- * - compact: boolean (optional) - Show compact view
- */
-
 import {
   type OdrlPolicy,
   OdrlPolicyRenderer,
@@ -171,9 +156,3 @@ export class OdrlPolicyViewer extends LitElement {
     }
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "odrl-policy-viewer": OdrlPolicyViewer;
-  }
-}

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

@@ -1,5 +1,4 @@
 import * as utils from "@helpers";
-import { msg, str } from "@lit/localize";
 import { Task } from "@lit/task";
 import type {
   Resource,
@@ -12,13 +11,6 @@ import {
 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() {
@@ -175,40 +167,7 @@ export class DSPCatalog extends OrbitDSPComponent {
         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
+            <ds4go-catalog-filter-holder
               .displayFiltering=${false}
               @search=${this._search}
               .search=${this.search}
@@ -216,7 +175,7 @@ export class DSPCatalog extends OrbitDSPComponent {
               .objects=${datas}
               .resultCount=${this.resultCount}
               .filterCount=${this.filterCount}
-            ></tems-catalog-filter-holder>
+            ></ds4go-catalog-filter-holder>
             <ds4go-catalog-data-holder
               .view=${"card"}
               .objects=${datas}

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

@@ -0,0 +1,307 @@
+import {
+  formatCase,
+  formatDate,
+  OrbitComponent,
+  requestNavigation,
+  setupCacheInvalidation,
+  sort,
+} from "@helpers";
+import { Task } from "@lit/task";
+import type {
+  Asset,
+  ContractAgreement,
+  ContractNegotiation,
+  OrbitComponent as OrbitComponentConfig,
+  PropertiesPicker,
+  Resource,
+  SearchObject,
+} from "@src/component";
+import type { Category, Fact } from "@src/ds4go";
+import { css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+@customElement("solid-fact-list")
+export class SolidFactList extends OrbitComponent {
+  @property({ attribute: false })
+  objects?: Fact[] = [];
+
+  @state()
+  dspConnector: OrbitComponentConfig | undefined;
+
+  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 Fact List";
+
+  @state()
+  search: SearchObject[] = [];
+
+  @state()
+  resultCount = this.objects?.length || 0;
+
+  @state()
+  consumerAgreements: ContractAgreement[] = [];
+
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "created_at", value: "created_at", cast: formatDate },
+    { key: "updated_at", value: "updated_at", cast: formatDate },
+    { key: "ldp:contains", value: "facts" },
+  ];
+
+  async _afterAttach() {
+    setupCacheInvalidation(this, {
+      keywords: ["fact"],
+    });
+
+    // 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) {
+        // Get all data from DSP connector
+        await this.dspConnector.instance.loadAll();
+
+        const participantId = (this.dspConnector as any).parameters[
+          "participant-id"
+        ];
+        if (participantId) {
+          // Load agreements for all negotiations to find consumer/provider relationships
+          const allNegotiations = this.dspConnector.instance.negotiations || [];
+          const negotiationToAgreementMap = new Map<
+            string,
+            ContractAgreement
+          >();
+
+          const allAgreements: ContractAgreement[] = [];
+
+          await Promise.all(
+            allNegotiations.map(async (n: ContractNegotiation) => {
+              if (n.contractAgreementId) {
+                const agreement =
+                  await this.dspConnector?.instance?.loadAgreement(n["@id"]);
+                if (agreement) {
+                  allAgreements.push(agreement);
+                  negotiationToAgreementMap.set(n["@id"], agreement);
+                }
+              }
+            }),
+          );
+
+          const consumerAgreements = allAgreements.filter(
+            (a: ContractAgreement) => {
+              if (!a.consumerId) return false;
+              const consumerParticipantId = a.consumerId.split("/").pop();
+              return consumerParticipantId?.startsWith(participantId);
+            },
+          );
+
+          const bundles = [];
+          for (const agreement of consumerAgreements) {
+            const asset = this.dspConnector?.instance?.assets.find(
+              (d: Asset) => d["@id"] === agreement.assetId,
+            );
+            const bundleUrl = asset?.dataAddress?.baseUrl;
+            if (bundleUrl) {
+              bundles.push(this._getProxyValue(bundleUrl));
+            }
+          }
+          const facts = Array.from(
+            new Set(
+              (await Promise.all(bundles))
+                .flatMap((bundle: any) => bundle?.facts || [])
+                .map((fact: Fact) => fact["@id"]),
+            ),
+          );
+
+          this.objects = await Promise.all(
+            facts.map((fact: string): Promise<Fact> => {
+              return this._getProxyValue(fact, true, [
+                { key: "created_at", value: "created_at" },
+                { key: "updated_at", value: "updated_at", cast: formatDate },
+                { key: "name", value: "name" },
+                { key: "description", value: "description" },
+                { key: "author", value: "author" },
+                { key: "link", value: "link" },
+                { key: "enclosure", value: "enclosure" },
+                {
+                  key: "categories",
+                  value: "categories",
+                  expand: true,
+                  cast: async (c: Resource) =>
+                    await Promise.all(
+                      (await c._originalResource?.["ldp:contains"]).map(
+                        async (c: Category) => ({"@id": c["@id"], name: formatCase((await c["name"]) || "")}),
+                      ),
+                    ),
+                },
+                { key: "medias", value: "medias", expand: true },
+                { key: "url", value: "url" },
+                { key: "file_size", value: "file_size" },
+                { key: "file_type", value: "file_type" },
+                { key: "width", value: "width" },
+                { key: "height", value: "height" },
+                // Can't get raw review json, as store does not support datas without ids
+                // { key: "review", value: "review" },
+              ]) as Promise<Fact>;
+            }),
+          );
+        }
+
+        if (!Array.isArray(this.objects)) {
+          this.objects = [];
+        }
+
+        if (objSrc) {
+          this.object = this.objects.find((obj: Fact) => obj["@id"] === objSrc);
+        } else {
+          this.object = undefined;
+        }
+
+        if (this.objects.length > 0) {
+          return sort(this.objects, "name", "asc");
+        }
+      } else {
+        const listener = () => {
+          this.caching++;
+          this.requestUpdate();
+          document.removeEventListener("dsp-connector-ready", listener);
+        };
+        document.addEventListener("dsp-connector-ready", listener);
+        return;
+      }
+
+      return [];
+    },
+    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 || {})) {
+        this.object = e.detail;
+        this.dataSrc = e.detail["@id"];
+        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);
+      this.dataSrc = undefined;
+      this.object = undefined;
+    }
+  }
+
+  _closeModalFromBackground(e: Event) {
+    e.preventDefault();
+    if (this.route && e.target?.classList.contains("modal")) {
+      requestNavigation(this.route, this.defaultDataSrc);
+      this.dataSrc = undefined;
+      this.object = undefined;
+    }
+  }
+
+  _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) => {
+        console.warn("[solid-fact-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-fact-holder
+              .objects=${datas}
+              .search=${this.search}
+              @clicked=${this._openModal}
+              @result-count=${this._resultCountUpdate}
+            ></ds4go-fact-holder>
+            ${this.object
+              ? html`<div
+                  class="modal"
+                  @click=${this._closeModalFromBackground}
+                >
+                  <ds4go-fact-modal
+                    .object=${this.object}
+                    @close=${this._closeModal}
+                  ></ds4go-fact-modal>
+                </div>`
+              : nothing}
+          </div>
+        </tems-viewport>`;
+      },
+    });
+  }
+}