@startinblox/components-ds4go 2.0.0 → 2.1.0

package/package.json

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

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

@@ -0,0 +1,390 @@
+import {
+  filterObjectByValue,
+  formatDate,
+  OrbitComponent,
+  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 { 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);
+      }
+    `,
+  ];
+
+  @property({ attribute: "header", type: String })
+  header?: string = "DS4GO Fact Bundling Creation";
+
+  @property({ attribute: "facts-src", reflect: true })
+  factsSrc?: string;
+
+  @state()
+  selectedFacts: Resource[] = [];
+
+  @state()
+  bundleName = "";
+
+  @state()
+  bundleDescription = "";
+
+  @state()
+  filterFactText = "";
+
+  @state()
+  spliceLength = 0;
+
+  cherryPickedProperties: PropertiesPicker[] = [
+    { key: "created_at", value: "created_at", cast: formatDate },
+    { key: "updated_at", value: "updated_at", cast: formatDate },
+    { key: "name", value: "name" },
+    { key: "description", value: "description" },
+    { key: "author", value: "author" },
+    {
+      key: "categories",
+      value: "categories",
+      expand: true,
+      cast: (c: Resource[]) => sort(c, "name"),
+    },
+  ];
+
+  _getResource = new Task(this, {
+    task: async ([factsSrc, filterText, selectedFacts]) => {
+      if (
+        !factsSrc ||
+        !this.orbit ||
+        (!this.noRouter &&
+          this.route &&
+          this.currentRoute &&
+          !this.route.startsWith(this.currentRoute))
+      )
+        return;
+
+      if (!this.hasCachedDatas || this.oldDataSrc !== factsSrc) {
+        if (!factsSrc) return;
+
+        this.facts = (await this._getProxyValue(factsSrc)) as Resource[];
+        this.hasCachedDatas = true;
+      }
+
+      if (this.oldDataSrc !== factsSrc) {
+        this.oldDataSrc = factsSrc;
+      }
+
+      if (!Array.isArray(this.facts)) {
+        this.facts = [];
+      }
+
+      if (filterText) {
+        return sort(
+          filterObjectByValue(
+            this.facts.filter(
+              (fact: Resource) => !selectedFacts.includes(fact),
+            ),
+            filterText,
+          ),
+          "name",
+          "asc",
+        );
+      }
+
+      if (selectedFacts.length === 0) {
+        this.spliceLength =
+          Math.floor((window.innerWidth - 800) / 354) *
+          Math.floor((window.innerHeight - 255) / 500);
+      }
+
+      return sort(
+        this.facts.filter(
+          (fact: Resource) => !this.selectedFacts.includes(fact),
+        ),
+        "name",
+        "asc",
+      );
+    },
+    args: () => [
+      this.factsSrc,
+      this.filterFactText,
+      this.selectedFacts,
+      this.caching,
+      this.currentRoute,
+    ],
+  });
+
+  _showMoreResults() {
+    this.spliceLength += Math.floor((window.innerWidth - 800) / 354);
+  }
+
+  _showAllResults() {
+    this.spliceLength = this.facts.length;
+  }
+
+  async _createFactBundle() {
+    if (!this.bundleName || !(this.selectedFacts.length > 0)) {
+      return;
+    }
+
+    const newFactBundle = {
+      "@context": [
+        "https://cdn.startinblox.com/owl/context.jsonld",
+        "https://cdn.startinblox.com/owl/ds4go.jsonld",
+      ],
+      "@type": ["ldp:Container", "ds4go:FactBundle"],
+      name: this.bundleName,
+      description: this.bundleDescription,
+      facts: this.selectedFacts.map((fact: Resource) => fact.id),
+    };
+
+    const newFactBundleId = await window.sibStore.post(
+      newFactBundle,
+      this.dataSrc,
+    );
+
+    document.dispatchEvent(
+      new CustomEvent("save", {
+        detail: { resource: { "@id": newFactBundleId } },
+        bubbles: true,
+      }),
+    );
+
+    document.dispatchEvent(
+      new CustomEvent("save", {
+        detail: { resource: { "@id": this.dataSrc } },
+        bubbles: true,
+      }),
+    );
+  }
+
+  _updateBundleName(e: Event) {
+    this.bundleName = e.detail.value;
+  }
+
+  _updateBundleDescription(e: Event) {
+    this.bundleDescription = e.detail.value;
+  }
+
+  _toggleFactSelection(fact: Resource) {
+    if (this.selectedFacts.includes(fact)) {
+      this.selectedFacts = this.selectedFacts.filter((f) => f !== fact);
+    } else {
+      this.selectedFacts = [...this.selectedFacts, fact];
+    }
+  }
+
+  _searchFacts(e: Event) {
+    this.filterFactText = e.detail;
+  }
+
+  render() {
+    return (
+      this.gatekeeper() ||
+      this._getResource.render({
+        pending: () => html`<solid-loader></solid-loader>`,
+        error: (e) => {
+          console.warn("[solid-fact-bundle-creation] Task error:", e);
+          return nothing;
+        },
+        complete: (datas) => {
+          if (!datas) return nothing;
+
+          const splicedDatas = datas.slice(0, this.spliceLength);
+          const selectedFactsCount = this.selectedFacts.length;
+          const allowCreation = !!this.bundleName && selectedFactsCount > 0;
+
+          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>
+              </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>
+                  ${selectedFactsCount > 0
+                    ? html`<tems-division type="h4">
+                          <div>
+                            ${msg(
+                              str`${selectedFactsCount} selected fact${selectedFactsCount > 1 ? "s" : ""}`,
+                            )}
+                          </div></tems-division
+                        >
+                        <div class="card-grid card-grid-vertical">
+                          ${this.selectedFacts.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}
+                              .header=${fact.name || nothing}
+                              date=${fact.updated_at || nothing}
+                              @click=${this._toggleFactSelection.bind(
+                                this,
+                                fact,
+                              )}
+                              selected=${true}
+                            ></tems-card-catalog>`;
+                          })}
+                        </div>`
+                    : nothing}
+                </div>
+                ̂${splicedDatas.length > 0
+                  ? 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 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>`;
+                        })}
+                      </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>
+                            </div>
+                          </div>`
+                        : nothing}
+                    </div>`
+                  : nothing}
+              </section>
+            </div>
+          </tems-viewport>`;
+        },
+      })
+    );
+  }
+}

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

@@ -1,7 +1,12 @@
 import { formatDate, OrbitComponent, requestNavigation, sort } from "@helpers";
 import { msg } from "@lit/localize";
 import { Task } from "@lit/task";
-import type { PropertiesPicker, Resource, SearchObject } from "@src/component";
+import type {
+  OrbitComponent as OrbitComponentConfig,
+  PropertiesPicker,
+  Resource,
+  SearchObject,
+} from "@src/component";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
@@ -31,6 +36,9 @@ export class SolidFactBundle extends OrbitComponent {
   @state()
   resultCount = this.objects?.length || 0;
 
+  @state()
+  bundleCreationComponent: OrbitComponentConfig | undefined;
+
   cherryPickedProperties: PropertiesPicker[] = [
     { key: "created_at", value: "created_at", cast: formatDate },
     { key: "updated_at", value: "updated_at", cast: formatDate },
@@ -68,7 +76,6 @@ export class SolidFactBundle extends OrbitComponent {
           },
         ),
       );
-      console.log(response.facts);
     }
     return Promise.resolve(response);
   }
@@ -78,6 +85,10 @@ export class SolidFactBundle extends OrbitComponent {
       `[uniq="${this.orbit?.getComponent("menu")?.uniq}"]`,
     );
 
+    this.bundleCreationComponent = this.orbit?.getComponent(
+      "fact-bundle-creation",
+    );
+
     return Promise.resolve();
   }
 
@@ -171,6 +182,13 @@ export class SolidFactBundle extends OrbitComponent {
     this.resultCount = e.detail ?? 0;
   }
 
+  _goToBundleCreation(e: Event) {
+    e.preventDefault();
+    if (this.bundleCreationComponent?.route) {
+      requestNavigation(this.bundleCreationComponent.route);
+    }
+  }
+
   render() {
     return (
       this.gatekeeper() ||
@@ -186,7 +204,9 @@ export class SolidFactBundle extends OrbitComponent {
               <div slot="cta">
                 <tems-button
                   type="primary"
+                  disabled=${!this.bundleCreationComponent?.route || nothing}
                   label=${msg("Create a bundle")}
+                  @click=${this._goToBundleCreation}
                 ></tems-button>
               </div>
             </tems-header>
@@ -205,8 +225,9 @@ 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}
                   >
@@ -215,7 +236,8 @@ export class SolidFactBundle extends OrbitComponent {
                       @close=${this._closeModal}
                     ></ds4go-fact-bundle-modal>
                   </div>`
-                : nothing}
+                  : nothing
+              }
             </div>
           </tems-viewport>`;
         },

package/src/context.json

@@ -1 +1,15 @@
-{}
+{
+  "ds4go": "https://cdn.startinblox.com/owl/ds4go.jsonld#",
+  "link": {
+    "@id": "ds4go:link",
+    "@type": "@id"
+  },
+  "enclosure": {
+    "@id": "ds4go:enclosure",
+    "@type": "@id"
+  },
+  "url": {
+    "@id": "ds4go:url",
+    "@type": "@id"
+  }
+}

package/src/styles/_helpers/flex.scss

@@ -19,19 +19,21 @@
   .half {
     flex-basis: 50%;
   }
-  &.justify-content-center{
+  &.justify-content-center {
     justify-content: center;
   }
-  &.justify-content-space-between{
+  &.justify-content-space-between {
     justify-content: space-between;
   }
-  &.align-items-center{
+  &.align-items-center {
     align-items: center;
   }
-  &.align-items-flex-start{
+  &.align-items-flex-start {
     align-items: flex-start;
   }
-  
+  .align-items-flex-end {
+    align-items: flex-end;
+  }
 }
 
 .full-width {

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

@@ -83,7 +83,9 @@
 
 @media screen and (min-width: 1100px) {
   div.modal {
-    width: 80vw;
-    height: 80vh;
+    width: fit-content;
+    max-width: 80vw;
+    height: fit-content;
+    max-height: 80vw;
   }
 }