@startinblox/components-ds4go 3.1.4 → 3.1.6

package/src/components/solid-dsif-explorer-poc.ts

@@ -1,68 +1,20 @@
-import { formatDate, OrbitComponent, sort } from "@helpers";
+import { OrbitComponent, sort } from "@helpers";
 import { msg, str } from "@lit/localize";
 import { Task } from "@lit/task";
-import type { PropertiesPicker, Resource, SearchObject } from "@src/component";
-import { css, html, nothing } from "lit";
+import type {
+  PropertiesPicker,
+  SearchObject,
+  DSIFRootAuthoritySector,
+  DSIFSectorAuthority,
+  DSIFCatalogEntry,
+  DSIFCatalogWithContext,
+  DSIFDatasetWithContext,
+} from "@src/component";
+import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-// TODO: move to @src/component
-//------------------------------------------------------------------------------
-interface Sector {
-  sectorName: string;
-  description: string;
-  federatedCatalogEndpoint: string;
-  lastUpdated: string;
-  id: string;
-}
-
-interface Catalog {
-  catalogId: string;
-  type: string;
-  description: string;
-  endpoints: {
-    catalog: string;
-  };
-  lastUpdated: string;
-}
-
-interface Dataset extends Resource {
-  "dct:title": string;
-  "dct:description": string;
-  "dct:creator": string;
-}
-
-interface CatalogEntry extends Resource {
-  "dct:title": string;
-  "dct:description": string;
-  "dcat:dataset": Dataset[];
-}
-//------------------------------------------------------------------------------
-
 @customElement("solid-dsif-explorer-poc")
 export class SolidDsifExplorerPoc extends OrbitComponent {
-  static styles = css`
-    .card-grid {
-      margin: var(--scale-900) 0;
-      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;
-    }
-    ds4go-card-catalog.cursor-pointer {
-      cursor: pointer;
-    }
-    tems-division {
-      margin-top: var(--scale-900);
-    }
-  `;
-
   @property({ attribute: "sector-id", type: String })
   sectorId?: string;
 
@@ -80,6 +32,11 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
     { key: "dct:description", value: "description" },
     { key: "dcat:dataset", value: "dataset", expand: true },
     { key: "dct:creator", value: "creator" },
+    { key: "dspace:assetId", value: "assetId" },
+    { key: "dsif:pricing", value: "pricing" },
+    { key: "dsif:previewLinks", value: "previewLinks" },
+    { key: "dsif:negotiation", value: "negotiation" },
+    { key: "dsif:originCatalogId", value: "originCatalogId" },
   ];
 
   async _afterAttach() {
@@ -91,13 +48,13 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
   }
 
   @state()
-  sectors: Sector[] = [];
+  sectors: DSIFRootAuthoritySector[] = [];
 
   @state()
-  catalogs?: Catalog[];
+  catalogs?: DSIFCatalogWithContext[];
 
   @state()
-  object?: CatalogEntry;
+  object?: DSIFCatalogEntry;
 
   _getResource = new Task(this, {
     task: async ([dataSrc, sectorId, catalogId]) => {
@@ -119,11 +76,17 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
         this.sectors = [];
         try {
           const rootAuthority = await fetch(dataSrc);
-          this.sectors = await rootAuthority.json();
+          const rootData =
+            (await rootAuthority.json()) as DSIFRootAuthoritySector[];
+
+          this.sectors = rootData.map((sector) => ({
+            ...sector,
+            rootAuthorityUrl: dataSrc,
+          })) as DSIFRootAuthoritySector[];
 
           this.hasCachedDatas = true;
         } catch (error) {
-          console.warn(`Failed to fetch sector authority ${dataSrc}`, error);
+          console.warn(`Failed to fetch root authority ${dataSrc}`, error);
           return;
         }
       }
@@ -144,7 +107,16 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                   const response = await fetch(
                     `${sector.federatedCatalogEndpoint}/discovery`,
                   );
-                  return (await response.json()).catalogs as Catalog[];
+                  const sectorAuthority =
+                    (await response.json()) as DSIFSectorAuthority;
+
+                  return sectorAuthority.catalogs.map((catalog) => ({
+                    ...catalog,
+                    sectorName: sector.sectorName,
+                    sectorId: sector.id,
+                    rootAuthorityUrl: sector.rootAuthorityUrl,
+                    sectorAuthorityUrl: `${sector.federatedCatalogEndpoint}/discovery`,
+                  })) as DSIFCatalogWithContext[];
                 } catch (error) {
                   console.warn(
                     `Failed to fetch sector authority ${sector.federatedCatalogEndpoint}/discovery`,
@@ -159,33 +131,45 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
 
         if (catalogId) {
           if (catalogId === "*") {
+            const allDatasets = (
+              await Promise.all(
+                this.catalogs.map(async (catalog) => {
+                  try {
+                    const catalogEntry = (await (
+                      await fetch(catalog.endpoints.catalog)
+                    ).json()) as DSIFCatalogEntry;
+
+                    return catalogEntry["dcat:dataset"].map((dataset) => ({
+                      ...dataset,
+                      catalogTitle: catalogEntry["dct:title"],
+                      catalogId: catalog.catalogId,
+                      sectorName: catalog.sectorName,
+                      sectorId: catalog.sectorId,
+                      rootAuthorityUrl: catalog.rootAuthorityUrl,
+                      sectorAuthorityUrl: catalog.sectorAuthorityUrl,
+                    })) as DSIFDatasetWithContext[];
+                  } catch (error) {
+                    console.warn(
+                      `Failed to fetch catalog from ${catalog.endpoints.catalog}`,
+                      error,
+                    );
+                    return [];
+                  }
+                }),
+              )
+            ).flat() as DSIFDatasetWithContext[];
+
             this.object = {
               "@id": "urn:uuid:all-catalogs",
+              "@type": "dcat:Catalog",
               "dct:title": msg("All Catalogs"),
               "dct:description": "",
-              "dcat:dataset": (
-                await Promise.all(
-                  this.catalogs.map(async (catalog) => {
-                    try {
-                      return (
-                        (await (
-                          await fetch(catalog.endpoints.catalog)
-                        ).json()) as CatalogEntry
-                      )["dcat:dataset"];
-                    } catch (error) {
-                      console.warn(
-                        `Failed to fetch catalog from ${catalog.endpoints.catalog}`,
-                        error,
-                      );
-                      return [];
-                    }
-                  }),
-                )
-              ).flat() as Dataset[],
+              "dcat:dataset": allDatasets,
             };
 
             return this.object;
           }
+
           // FIXME: What if both sbx and sa use the same catalogId?
           const selectedCatalog = this.catalogs.find(
             (catalog) => catalog.catalogId === catalogId,
@@ -193,9 +177,23 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
 
           if (selectedCatalog) {
             try {
-              this.object = (await (
+              const catalogEntry = (await (
                 await fetch(selectedCatalog.endpoints.catalog)
-              ).json()) as CatalogEntry;
+              ).json()) as DSIFCatalogEntry;
+
+              catalogEntry["dcat:dataset"] = catalogEntry["dcat:dataset"].map(
+                (dataset) => ({
+                  ...dataset,
+                  catalogTitle: catalogEntry["dct:title"],
+                  catalogId: selectedCatalog.catalogId,
+                  sectorName: selectedCatalog.sectorName,
+                  sectorId: selectedCatalog.sectorId,
+                  rootAuthorityUrl: selectedCatalog.rootAuthorityUrl,
+                  sectorAuthorityUrl: selectedCatalog.sectorAuthorityUrl,
+                }),
+              ) as DSIFDatasetWithContext[];
+
+              this.object = catalogEntry;
 
               this.object["dcat:dataset"] = sort(
                 this.object["dcat:dataset"],
@@ -279,7 +277,7 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                   : this.catalogId === "*"
                     ? `${msg("All Datasets")}`
                     : `${msg("Datasets from")}
-                  ${(datas as CatalogEntry)["dct:title"]} (From ${this.sectorId})`
+                  ${(datas as DSIFCatalogEntry)["dct:title"]} (From ${this.sectorId})`
                 : this.sectorId
                   ? this.sectorId === "*"
                     ? `${msg("All Sectors")}`
@@ -300,79 +298,22 @@ export class SolidDsifExplorerPoc extends OrbitComponent {
                 : nothing}</tems-header
             >
             <div slot="content">
-              ${datas
-                ? html`<div>
-                    ${this.catalogId
-                      ? html`<tems-division type="body-m"
-                          >${(datas as CatalogEntry)[
-                            "dct:description"
-                          ]}</tems-division
-                        >`
-                      : nothing}
-                    <div class="card-grid card-grid-vertical">
-                      ${this.catalogId
-                        ? html`${(datas as CatalogEntry)["dcat:dataset"].map(
-                            (dataset: Dataset) =>
-                              html`<ds4go-card-catalog
-                                .object=${import.meta.env.DEV
-                                  ? dataset
-                                  : nothing}
-                                type=${"bill-image"}
-                                .header=${dataset["dct:title"] || nothing}
-                                .content=${dataset["dct:description"] ||
-                                nothing}
-                              ></ds4go-card-catalog>`,
-                          )}`
-                        : this.sectorId
-                          ? html`${datas.map(
-                              (catalog: Catalog) =>
-                                html`<ds4go-card-catalog
-                                  class="cursor-pointer"
-                                  .object=${import.meta.env.DEV
-                                    ? catalog
-                                    : nothing}
-                                  type=${"bill-image"}
-                                  .header=${catalog.catalogId || nothing}
-                                  .content=${catalog.description || nothing}
-                                  date=${formatDate(catalog.lastUpdated) ||
-                                  nothing}
-                                  @click=${() =>
-                                    this._selectCatalog(catalog.catalogId)}
-                                ></ds4go-card-catalog>`,
-                            )}`
-                          : html`${datas.map(
-                              (sector: Sector) =>
-                                html`<ds4go-card-catalog
-                                  class="cursor-pointer"
-                                  .object=${import.meta.env.DEV
-                                    ? sector
-                                    : nothing}
-                                  type=${"bill-image"}
-                                  .header=${sector.id || nothing}
-                                  .content=${sector.description || nothing}
-                                  date=${formatDate(sector.lastUpdated) ||
-                                  nothing}
-                                  @click=${() => this._selectSector(sector.id)}
-                                ></ds4go-card-catalog>`,
-                            )}`}
-                    </div>
-                  </div>`
-                : html`<p>
-                      ${msg(
-                        "No data available, data source may be temporarily unavailable.",
-                      )}
-                    </p>
-                    ${this.sectorId || this.catalogId
-                      ? html`<tems-button
-                          type="primary"
-                          label=${msg("Back")}
-                          @click=${this._back}
-                        ></tems-button>`
-                      : html`<tems-button
-                          type="primary"
-                          label=${msg("Retry")}
-                          @click=${this.requestUpdate}
-                        ></tems-button>`}`}
+              <ds4go-catalog-filter-holder
+                .displayFiltering=${false}
+                @search=${this._search}
+                .search=${this.search}
+                .objects=${datas}
+                .resultCount=${this.resultCount}
+                .filterCount=${this.filterCount}
+              ></ds4go-catalog-filter-holder>
+              <ds4go-dsif-explorer-poc-holder
+                .objects=${datas}
+                .search=${this.search}
+                @result-count=${this._resultCountUpdate}
+                .sectorId=${this.sectorId}
+                .catalogId=${this.catalogId}
+                .parent=${this}
+              ></ds4go-dsif-explorer-poc-holder>
             </div>
           </tems-viewport>`;
         },

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

@@ -1,5 +1,6 @@
 import {
   filterObjectByValue,
+  formatCase,
   formatDate,
   OrbitComponent,
   requestNavigation,
@@ -17,13 +18,6 @@ import ComponentStyles from "@styles/fact-bundle-creation.scss?inline";
 import { html, nothing, unsafeCSS } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
-const formatCase = (str: string) => {
-  return str
-    .replace(/([A-Z])/g, " $1")
-    .replace(/^./, (str) => str.toUpperCase())
-    .trim();
-};
-
 @customElement("solid-fact-bundle-creation")
 export class SolidFactBundle extends OrbitComponent {
   static styles = [unsafeCSS(ComponentStyles)];
@@ -153,6 +147,9 @@ export class SolidFactBundle extends OrbitComponent {
         this.spliceLength =
           Math.floor((window.innerWidth - 800) / 354) *
           Math.floor((window.innerHeight - 255) / 500);
+        if (this.spliceLength < 5) {
+          this._showAllResults();
+        }
       }
 
       if (factsWithoutSelected.length > 0) {
@@ -254,7 +251,10 @@ export class SolidFactBundle extends OrbitComponent {
           offeredAccess: "40",
           pricingTier: "premium",
           "dcat:endpointUrl": newFactBundleId,
-          previewLinks: this.selectedFacts.slice(0, 3).map(fact => fact["@id"]).join(", "),
+          previewLinks: this.selectedFacts
+            .slice(0, 3)
+            .map((fact) => fact["@id"])
+            .join(", "),
           "dsif:pricing": {
             "dsif:costPerAPICall": 0.15,
             "dsif:setupFee": 50,
@@ -424,7 +424,7 @@ export class SolidFactBundle extends OrbitComponent {
                   ? html`<tems-button
                       type="primary"
                       disabled=${this.selectedFacts.length === 0 || nothing}
-                      label=${msg("Set bundle informations")}
+                      label=${msg("Next")}
                       @click=${this._nextStep}
                     ></tems-button>`
                   : html`<div class="flex">

package/src/helpers/index.ts

@@ -14,6 +14,7 @@ import filterObjectByNamedValue from "@helpers/datas/filterObjectByNamedValue";
 import filterObjectByType from "@helpers/datas/filterObjectByType";
 import filterObjectByValue from "@helpers/datas/filterObjectByValue";
 import sort from "@helpers/datas/sort";
+import formatCase from "@helpers/ui/formatCase";
 import formatDate from "@helpers/ui/formatDate";
 import requestNavigation from "@helpers/utils/requestNavigation";
 import uniq from "@helpers/utils/uniq";
@@ -29,6 +30,7 @@ export {
   filterObjectByValue,
   filterObjectByType,
   filterObjectByDateInterval,
+  formatCase,
   formatDate,
   ComponentObjectHandler,
   ComponentObjectsHandler,

package/src/helpers/ui/formatCase.ts

@@ -0,0 +1,8 @@
+const formatCase = (str: string) => {
+  return str
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim();
+};
+
+export default formatCase;