@startinblox/components-ds4go 3.0.2 → 3.1.0

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

@@ -17,6 +17,13 @@ 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)];
@@ -36,9 +43,15 @@ export class SolidFactBundle extends OrbitComponent {
   @state()
   bundleDescription = "";
 
+  @state()
+  bundleCategory = "";
+
   @state()
   bundleLanguage = "en";
 
+  @state()
+  step = 0;
+
   policyTemplates: { id: string; name: string; policy: OdrlPolicy }[] = [
     {
       id: "policy-open-access",
@@ -73,7 +86,9 @@ export class SolidFactBundle extends OrbitComponent {
 
   async _afterAttach() {
     // use this.dspConnector.instance to reach the connector
-    this.dspConnector = this.orbit?.components.find((c) => c.type === "dsp-connector");
+    this.dspConnector = this.orbit?.components.find(
+      (c) => c.type === "dsp-connector",
+    );
 
     return Promise.resolve();
   }
@@ -119,17 +134,19 @@ export class SolidFactBundle extends OrbitComponent {
         this.facts = [];
       }
 
+      const factsWithoutSelected = this.facts.filter(
+        (fact: Resource) => !selectedFacts.includes(fact),
+      );
+
       if (filterText) {
-        return sort(
-          filterObjectByValue(
-            this.facts.filter(
-              (fact: Resource) => !selectedFacts.includes(fact),
-            ),
-            filterText,
-          ),
-          "name",
-          "asc",
+        const filteredFacts = filterObjectByValue(
+          factsWithoutSelected,
+          filterText,
         );
+        if (filteredFacts.length > 0) {
+          return sort(filteredFacts, "name", "asc");
+        }
+        return [];
       }
 
       if (selectedFacts.length === 0) {
@@ -138,13 +155,11 @@ export class SolidFactBundle extends OrbitComponent {
           Math.floor((window.innerHeight - 255) / 500);
       }
 
-      return sort(
-        this.facts.filter(
-          (fact: Resource) => !this.selectedFacts.includes(fact),
-        ),
-        "name",
-        "asc",
-      );
+      if (factsWithoutSelected.length > 0) {
+        return sort(factsWithoutSelected, "name", "asc");
+      }
+
+      return [];
     },
     args: () => [
       this.factsSrc,
@@ -163,6 +178,12 @@ export class SolidFactBundle extends OrbitComponent {
     this.spliceLength = this.facts.length;
   }
 
+  _nextStep() {
+    if (this.selectedFacts.length > 0) {
+      this.step++;
+    }
+  }
+
   async _createFactBundle() {
     if (!this.bundleName || !(this.selectedFacts.length > 0)) {
       return;
@@ -175,6 +196,7 @@ export class SolidFactBundle extends OrbitComponent {
       ],
       "@type": ["ldp:Container", "ds4go:FactBundle"],
       name: this.bundleName,
+      category: this.bundleCategory,
       description: this.bundleDescription || "",
       "ldp:contains": this.selectedFacts.map((fact: Resource) => ({
         "@id": fact["@id"],
@@ -215,7 +237,21 @@ export class SolidFactBundle extends OrbitComponent {
           name: this.bundleName,
           description: this.bundleDescription,
           contenttype: "application/ld+json",
-          language: this.bundleLanguage,
+          "dcterms:language": this.bundleLanguage,
+          category: this.bundleCategory,
+          bundleSize: this.selectedFacts.length,
+          offeredAccess: "40",
+          pricingTier: "premium",
+          // "dcat:endpointUrl": "https://api.stg.ds4go.startinblox.com/facts/", // ?
+          previewLinks: this.selectedFacts.slice(0, 3).join(", "),
+          "dsif:pricing": {
+            "dsif:costPerAPICall": 0.15,
+            "dsif:setupFee": 50,
+            "dsif:billingPeriod": "monthly",
+            "dsif:currency": "EUR",
+            "dsif:description":
+              "Premium tier: 40 API calls/month, ideal for media organizations",
+          },
         },
         dataAddress: {
           "@type": "DataAddress",
@@ -265,30 +301,34 @@ export class SolidFactBundle extends OrbitComponent {
       const TemsAssetManagement = document.querySelector(
         "solid-tems-assets-management",
       );
-      if (TemsAssetManagement) {
+      if (TemsAssetManagement?.loadAssets) {
         TemsAssetManagement.loadAssets();
       }
 
       const TemsPoliciesManagement = document.querySelector(
         "solid-tems-policies-management",
       );
-      if (TemsPoliciesManagement) {
+      if (TemsPoliciesManagement?.loadPolicies) {
         TemsPoliciesManagement.loadPolicies();
       }
 
       const TemsContractsManagement = document.querySelector(
         "solid-tems-contracts-management",
       );
-      if (TemsContractsManagement) {
+      if (TemsContractsManagement?.loadData) {
         TemsContractsManagement.loadData();
       }
     }
 
     this.bundleName = "";
     this.bundleDescription = "";
+    this.bundleDescription = "";
+    this.step = 0;
     this.selectedFacts = [];
 
-    const factbundleComponent: any = this.orbit?.components.find((c) => c.type === "fact-bundle");
+    const factbundleComponent: any = this.orbit?.components.find(
+      (c) => c.type === "fact-bundle",
+    );
 
     document.dispatchEvent(
       new CustomEvent("save", {
@@ -323,6 +363,13 @@ export class SolidFactBundle extends OrbitComponent {
     }
   }
 
+  _selectBundleCategory(e: Event) {
+    e.preventDefault();
+    if (e.target) {
+      this.bundleCategory = e.target.value;
+    }
+  }
+
   _selectBundleContractPolicy(e: Event) {
     e.preventDefault();
     if (e.target) {
@@ -366,75 +413,26 @@ export class SolidFactBundle extends OrbitComponent {
           return html`<tems-viewport>
             <tems-header slot="header" heading=${this.header}>
               <div slot="cta">
-                <tems-button
-                  type="primary"
-                  disabled=${!allowCreation || nothing}
-                  label=${msg("Create bundle")}
-                  @click=${this._createFactBundle}
-                ></tems-button>
+                ${this.step === 0
+                  ? html`<tems-button
+                      type="primary"
+                      disabled=${this.selectedFacts.length === 0 || nothing}
+                      label=${msg("Set bundle informations")}
+                      @click=${this._nextStep}
+                    ></tems-button>`
+                  : html`<tems-button
+                      type="primary"
+                      disabled=${!allowCreation || nothing}
+                      label=${msg("Create bundle")}
+                      @click=${this._createFactBundle}
+                    ></tems-button>`}
               </div>
             </tems-header>
             <div slot="content">
               <section class="flex flex-1">
-                <div>
-                  <div>
-                    <tems-input
-                      type="text"
-                      label=${msg("Bundle name")}
-                      placeholder=${msg("Bundle name")}
-                      required=""
-                      .value=${this.bundleName}
-                      @change=${this._updateBundleName}
-                    ></tems-input>
-                  </div>
-                  <div>
-                    <tems-textarea
-                      rows="4"
-                      label=${msg("Bundle description")}
-                      placeholder=${msg("Bundle description")}
-                      .value=${this.bundleDescription}
-                      @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">
+                ${this.step === 0
+                  ? html`<div>
+                        <tems-division type="h4">
                           <div>
                             ${msg(
                               str`${selectedFactsCount} selected fact${selectedFactsCount > 1 ? "s" : ""}`,
@@ -455,7 +453,7 @@ export class SolidFactBundle extends OrbitComponent {
                                 type: "information",
                               });
                             }
-                            return html`<tems-card-catalog
+                            return html`<ds4go-card-catalog
                               .object=${import.meta.env.DEV ? fact : nothing}
                               .header=${fact.name || nothing}
                               date=${fact.updated_at || nothing}
@@ -464,91 +462,190 @@ export class SolidFactBundle extends OrbitComponent {
                                 fact,
                               )}
                               selected=${true}
-                            ></tems-card-catalog>`;
+                            ></ds4go-card-catalog>`;
                           })}
-                        </div>`
-                    : nothing}
-                </div>
-                ${splicedDatas.length > 0 || this.filterFactText
-                  ? html`<div>
-                      <div>
-                        <tems-search-bar
-                          .displayFilters=${false}
-                          .displaySavedSearch=${false}
-                          .displayViews=${false}
-                          .dropdownCardElement=${false}
-                          .dropdownListElement=${false}
-                          .dropdownTableElement=${false}
-                          .dropdownMapElement=${false}
-                          .displayActiveTags=${false}
-                          .value=${this.filterFactText}
-                          @search=${this._searchFacts}
-                        ></tems-search-bar>
+                        </div>
                       </div>
-                      ${splicedDatas.length > 0
-                        ? html` <div class="card-grid card-grid-vertical">
-                              ${splicedDatas.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`<tems-card-catalog
-                                  .object=${import.meta.env.DEV
-                                    ? fact
-                                    : nothing}
-                                  .tags=${tags}
-                                  .header=${fact.name || nothing}
-                                  .content=${fact.description || nothing}
-                                  date=${fact.updated_at || nothing}
-                                  @click=${this._toggleFactSelection.bind(
-                                    this,
-                                    fact,
-                                  )}
-                                ></tems-card-catalog>`;
-                              })}
+                      ${splicedDatas.length > 0 || this.filterFactText
+                        ? html`<div>
+                            <div>
+                              <tems-search-bar
+                                .displayFilters=${false}
+                                .displaySavedSearch=${false}
+                                .displayViews=${false}
+                                .dropdownCardElement=${false}
+                                .dropdownListElement=${false}
+                                .dropdownTableElement=${false}
+                                .dropdownMapElement=${false}
+                                .displayActiveTags=${false}
+                                .value=${this.filterFactText}
+                                @search=${this._searchFacts}
+                              ></tems-search-bar>
                             </div>
-                            ${splicedDatas.length < datas.length
-                              ? html`<div
-                                  class="flex flex-row justify-content-space-between align-items-flex-end"
-                                >
-                                  <div>
-                                    ${msg(
-                                      str`Displaying ${splicedDatas.length} of ${datas.length} result${datas.length > 1 ? "s" : ""}`,
-                                    )}
-                                  </div>
-                                  <div class="flex flex-row gap-400">
-                                    <tems-button
-                                      @click=${this._showMoreResults}
-                                      type="primary"
-                                      size="sm"
-                                      label=${msg("Show more results")}
-                                    ></tems-button>
-                                    <tems-button
-                                      @click=${this._showAllResults}
-                                      type="primary"
-                                      size="sm"
-                                      label=${msg("Show all results")}
-                                    ></tems-button>
+                            ${splicedDatas.length > 0
+                              ? html` <div class="card-grid card-grid-vertical">
+                                    ${splicedDatas.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}
+                                        @click=${this._toggleFactSelection.bind(
+                                          this,
+                                          fact,
+                                        )}
+                                      ></ds4go-card-catalog>`;
+                                    })}
                                   </div>
-                                </div>`
-                              : nothing}`
-                        : html`${msg("No results found")}
-                          ${this.filterFactText
-                            ? `for "${this.filterFactText}".`
-                            : ""}`}
-                    </div>`
-                  : nothing}
+                                  ${splicedDatas.length < datas.length
+                                    ? html`<div
+                                        class="flex flex-row justify-content-space-between align-items-flex-end"
+                                      >
+                                        <div>
+                                          ${msg(
+                                            str`Displaying ${splicedDatas.length} of ${datas.length} result${datas.length > 1 ? "s" : ""}`,
+                                          )}
+                                        </div>
+                                        <div class="flex flex-row gap-400">
+                                          <tems-button
+                                            @click=${this._showMoreResults}
+                                            type="primary"
+                                            size="sm"
+                                            label=${msg("Show more results")}
+                                          ></tems-button>
+                                          <tems-button
+                                            @click=${this._showAllResults}
+                                            type="primary"
+                                            size="sm"
+                                            label=${msg("Show all results")}
+                                          ></tems-button>
+                                        </div>
+                                      </div>`
+                                    : nothing}`
+                              : html`${msg("No results found")}
+                                ${this.filterFactText
+                                  ? `for "${this.filterFactText}".`
+                                  : ""}`}
+                          </div>`
+                        : nothing}`
+                  : html`<div>
+                        <div>
+                          <tems-input
+                            type="text"
+                            label=${msg("Bundle name")}
+                            placeholder=${msg("Bundle name")}
+                            required=""
+                            .value=${this.bundleName}
+                            @change=${this._updateBundleName}
+                          ></tems-input>
+                        </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("Category")}></tems-label>
+                          <select @change=${this._selectBundleCategory}>
+                            <option
+                              value=""
+                              ?selected="${"" === this.bundleCategory}"
+                            >
+                              ${msg("No category")}
+                            </option>
+                            ${Array.from(
+                              new Set(
+                                this.selectedFacts.flatMap((fact) =>
+                                  fact.categories.map(
+                                    (category: Resource) => formatCase(category.name),
+                                  ),
+                                ),
+                              ),
+                            )
+                              .filter((i) => i)
+                              .sort((a, b) => a.localeCompare(b))
+                              .map(
+                                (category: string) =>
+                                  html`<option
+                                    value="${category}"
+                                    ?selected="${category ===
+                                    this.bundleCategory}"
+                                  >
+                                    ${category}
+                                  </option>`,
+                              )}
+                          </select>
+                        </div>
+                      </div>
+                      <div>
+                        <div>
+                          <tems-textarea
+                            rows="5"
+                            label=${msg("Bundle description")}
+                            placeholder=${msg("Bundle description")}
+                            .value=${this.bundleDescription}
+                            @change=${this._updateBundleDescription}
+                          ></tems-textarea>
+                        </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>
+                      </div>`}
               </section>
             </div>
           </tems-viewport>`;

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

@@ -95,7 +95,9 @@ export class SolidFactBundle extends OrbitComponent {
       `[uniq="${this.orbit?.getComponent("menu")?.uniq}"]`,
     );
 
-    this.bundleCreationComponent = this.orbit?.components.find((c) => c.type === "fact-bundle-creation");
+    this.bundleCreationComponent = this.orbit?.components.find(
+      (c) => c.type === "fact-bundle-creation",
+    );
 
     return Promise.resolve();
   }
@@ -145,7 +147,10 @@ export class SolidFactBundle extends OrbitComponent {
         this.dataSrc = dataSrc;
       }
 
-      return sort(this.objects, "name", "asc");
+      if (this.objects.length > 0) {
+        return sort(this.objects, "name", "asc");
+      }
+      return [];
     },
     args: () => [
       this.defaultDataSrc,
@@ -225,14 +230,14 @@ export class SolidFactBundle extends OrbitComponent {
               </div>
             </tems-header>
             <div slot="content">
-              <tems-catalog-filter-holder
+              <ds4go-catalog-filter-holder
                 .displayFiltering=${this.displayFiltering}
                 @search=${this._search}
                 .search=${this.search}
                 .objects=${datas}
                 .resultCount=${this.resultCount}
                 .filterCount=${this.filterCount}
-              ></tems-catalog-filter-holder>
+              ></ds4go-catalog-filter-holder>
               <ds4go-fact-bundle-holder
                 .objects=${datas}
                 .search=${this.search}

package/src/helpers/components/orbitComponent.ts

@@ -98,20 +98,19 @@ export default class extends ComponentObjectsHandler {
               }
             }
           }
-
-          await this._afterAttach();
-
-          this.ready = true;
-          this.dispatchEvent(
-            new CustomEvent("component-ready", {
-              detail: {
-                component: this.component,
-              },
-            }),
-          );
-
-          return Promise.resolve(true);
         }
+        await this._afterAttach();
+
+        this.ready = true;
+        this.dispatchEvent(
+          new CustomEvent("component-ready", {
+            detail: {
+              component: this.component,
+            },
+          }),
+        );
+
+        return Promise.resolve(true);
       }
     }
     return Promise.resolve(false);

package/src/helpers/i18n/configureLocalization.ts

@@ -10,8 +10,15 @@ const localizedTemplates: Map<string, any> = new Map(
   ]),
 );
 
-export const { getLocale, setLocale } = configureLocalization({
-  sourceLocale,
-  targetLocales,
-  loadLocale: async (locale) => localizedTemplates.get(locale),
-});
+export const { getLocale, setLocale } = !import.meta.env.BASE_URL.includes(
+  "cypress",
+)
+  ? configureLocalization({
+      sourceLocale,
+      targetLocales,
+      loadLocale: async (locale) => localizedTemplates.get(locale),
+    })
+  : {
+      getLocale: () => sourceLocale,
+      setLocale: () => {},
+    };

package/src/helpers/index.ts

@@ -1,7 +1,6 @@
 import { ComponentObjectHandler } from "@helpers/components/componentObjectHandler";
 import { ComponentObjectsHandler } from "@helpers/components/componentObjectsHandler";
 import OrbitComponent from "@helpers/components/orbitComponent";
-import dspComponent from "@helpers/components/orbitDspComponent";
 import setupCacheInvalidation from "@helpers/components/setupCacheInvalidation";
 import setupCacheOnResourceReady from "@helpers/components/setupCacheOnResourceReady";
 import setupComponentSubscriptions from "@helpers/components/setupComponentSubscriptions";
@@ -21,7 +20,6 @@ import uniq from "@helpers/utils/uniq";
 import CLIENT_CONTEXT from "@src/context.json";
 
 export {
-  dspComponent,
   CLIENT_CONTEXT,
   filterGenerator,
   filterObjectByDateAfter,