@startinblox/core 0.0.0

package/dist/mixins/paginateMixin.js

@@ -0,0 +1,97 @@
+import { html } from "../_snowpack/pkg/lit-html.js";
+const PaginateMixin = {
+  name: 'paginate-mixin',
+  use: [],
+  attributes: {
+    paginateBy: {
+      type: Number,
+      default: 0
+    },
+    paginateLoop: {
+      type: String,
+      default: null
+    }
+  },
+  initialState: {
+    currentPage: []
+  },
+  created() {
+    this.currentPage = [];
+  },
+  attached() {
+    this.listPostProcessors.push(this.paginateCallback.bind(this));
+  },
+  async paginateCallback(resources, listPostProcessors, div, context) {
+    if (this.paginateBy > 0) {
+      if (!this.currentPage[context]) this.currentPage[context] = 1;
+      const parentDiv = this.initParentPaginationDiv(div, context);
+      this.renderCallbacks.push({
+        template: this.renderPaginationNav(this.getPageCount(resources.length), context, div),
+        parent: parentDiv
+      });
+      const firstElementIndex = (this.getCurrentPage(context) - 1) * this.paginateBy;
+      resources = resources.slice(firstElementIndex, firstElementIndex + this.paginateBy);
+    }
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  },
+  getNavElement(div) {
+    const insertNode = div.parentNode || div;
+    return insertNode.querySelector(`nav[data-id="nav"]`);
+  },
+  /**
+   * Find nav element or create it if not existing
+   * @param div - insert nav next to this div
+   */
+  initParentPaginationDiv(div) {
+    let nav = this.getNavElement(div);
+    if (!nav) {
+      nav = document.createElement('nav');
+      nav.setAttribute('data-id', 'nav');
+      const insertNode = div.parentNode || div;
+      insertNode.appendChild(nav);
+    }
+    return nav;
+  },
+  getCurrentPage(context) {
+    return this.currentPage[context];
+  },
+  setCurrentPage(page, context, pageCount) {
+    if (page < 1) page = !this.shouldLoop() ? 1 : pageCount;
+    if (page > pageCount) page = !this.shouldLoop() ? pageCount : 1;
+    this.currentPage[context] = page;
+    this.empty();
+    this.populate();
+  },
+  getPageCount(size) {
+    return Math.max(1, Math.ceil(size / this.paginateBy));
+  },
+  shouldLoop() {
+    return this.paginateLoop !== null;
+  },
+  /**
+   * Create pagination template
+   * @param pageCount
+   * @param context
+   */
+  renderPaginationNav(pageCount, context, div) {
+    this.getNavElement(div).toggleAttribute('hidden', pageCount <= 1);
+    const currentPage = this.getCurrentPage(context);
+    return html`
+      <button
+        data-id="prev"
+        ?disabled=${!this.shouldLoop() && currentPage <= 1}
+        @click=${() => this.setCurrentPage(currentPage - 1, context, pageCount)}
+      >←</button>
+      <button
+        data-id="next"
+        ?disabled=${!this.shouldLoop() && currentPage >= pageCount}
+        @click=${() => this.setCurrentPage(currentPage + 1, context, pageCount)}
+      >→</button>
+      <span>
+        <span data-id="current">${currentPage}</span> / <span data-id="count">${String(pageCount)}</span>
+      </span>
+    `;
+  }
+};
+export { PaginateMixin };

package/dist/mixins/requiredMixin.js

@@ -0,0 +1,26 @@
+const RequiredMixin = {
+  name: 'required-mixin',
+  use: [],
+  attached() {
+    this.listPostProcessors.push(this.requiredResources.bind(this));
+  },
+  async requiredResources(resources, listPostProcessors, div, context) {
+    const displays = [];
+    const requiredFields = Array.from(this.element.attributes).filter(attr => attr.name.startsWith('required-')).map(attr => attr['name'].replace('required-', ''));
+    if (requiredFields.length) {
+      for (let resource of resources) {
+        let hasProps = true;
+        for (let field of requiredFields) {
+          if ((await resource[field]) == null || (await resource[field]) == "") {
+            hasProps = false;
+            continue;
+          }
+        }
+        if (hasProps) displays.push(resource);
+      }
+    }
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(requiredFields.length ? displays : resources, listPostProcessors, div, context);
+  }
+};
+export { RequiredMixin };

package/dist/mixins/serverPaginationMixin.js

@@ -0,0 +1,122 @@
+import { html, render } from "../_snowpack/pkg/lit-html.js";
+const ServerPaginationMixin = {
+  name: 'server-pagination-mixin',
+  use: [],
+  attributes: {
+    limit: {
+      type: Number,
+      default: undefined
+    },
+    offset: {
+      type: Number,
+      default: undefined
+    },
+    pageCount: {
+      type: Number,
+      default: 1000
+    },
+    pageNumber: {
+      type: Number,
+      default: 0
+    }
+  },
+  initialState: {
+    currentOffset: []
+  },
+  attached() {
+    if (this.limit) {
+      this.setCurrentOffset(this.resourceId, 0);
+      const parentDiv = this.initServerPaginationDiv(this.div);
+      this.renderCallbacks.push({
+        template: this.renderServerPaginationNav(this.resourceId, parentDiv),
+        parent: parentDiv
+      });
+    }
+  },
+  getCurrentOffset(resourceId, limit) {
+    return this.currentOffset[resourceId + "#p" + limit];
+  },
+  async setCurrentOffset(resourceId, offset) {
+    let index = resourceId + "#p" + this.limit;
+    this.currentOffset[index] = this.offset = offset;
+    this.pageNumber = Number(this.offset / this.limit);
+    this.currentPage[resourceId] = this.pageNumber;
+    await this.fetchData(this.dataSrc);
+  },
+  async decreaseCurrentOffset(resourceId) {
+    let index = resourceId + "#p" + this.limit;
+    this.currentOffset[index] = this.offset = this.offset - this.limit;
+    this.currentPage[index] = this.offset / this.limit;
+    this.pageNumber = this.offset / this.limit;
+    this.updateNavButtons(resourceId, index, -1);
+    await this.fetchData(this.dataSrc);
+  },
+  async increaseCurrentOffset(resourceId) {
+    let index = resourceId + "#p" + this.limit;
+    this.currentOffset[index] = this.offset = this.offset + this.limit;
+    this.currentPage[index] = this.offset / this.limit;
+    this.updateNavButtons(resourceId, index, 1);
+    await this.fetchData(this.dataSrc);
+  },
+  updateNavButtons(resourceId, index, variance) {
+    this.element.querySelector("[data-id='prev']").disabled = this.currentOffset[index] <= 0;
+    this.element.querySelector("[data-id='next']").disabled = this.currentOffset[index] * this.limit >= this.pageCount;
+    this.element.querySelector("[data-id='current']").innerText = this.getCurrentServedPage(resourceId, variance);
+  },
+  getServerNavElement(div) {
+    if (div) {
+      const insertNode = div.parentNode || div;
+      return insertNode.querySelector(`nav[data-id="nav"]`);
+    }
+    return null;
+  },
+  getCurrentServedPage(context, variance) {
+    this.currentPage[context] = Number(this.currentPage[context]) + variance;
+    return this.currentPage[context];
+  },
+  /**
+   * Find nav element or create it if not existing
+   * @param div - insert nav next to this div
+   */
+  initServerPaginationDiv(div) {
+    let nav = this.getServerNavElement(div);
+    if (!nav) {
+      nav = document.createElement('nav');
+      nav.setAttribute('data-id', 'nav');
+      const insertNode = div.parentNode || div;
+      insertNode.appendChild(nav);
+    }
+    return nav;
+  },
+  /**
+   * Create pagination template
+   */
+  renderServerPaginationNav(resourceId, div) {
+    if (this.limit) {
+      const currentOffset = this.getCurrentOffset(resourceId, this.limit);
+      var currentPageNumber = this.getCurrentServedPage(resourceId, 1);
+      const pageCount = Math.ceil(this.pageCount / this.limit);
+      render(html`
+        <button
+          data-id="prev"
+          ?disabled=${currentOffset <= 0}
+          @click=${() => this.decreaseCurrentOffset(resourceId)}
+        >←</button>
+        <button
+          data-id="next"
+          ?disabled=${currentOffset >= (pageCount - 1) * this.limit}
+          @click=${() => this.increaseCurrentOffset(resourceId)}
+        >→</button>
+        <span>
+          <span data-id="current">
+            ${currentPageNumber}
+          </span> / 
+          <span data-id="count">
+            ${this.pageCount}
+          </span>
+        </span>
+      `, div);
+    }
+  }
+};
+export { ServerPaginationMixin };

package/dist/mixins/sorterMixin.js

@@ -0,0 +1,131 @@
+const SorterMixin = {
+  name: 'sorter-mixin',
+  use: [],
+  attributes: {
+    orderBy: {
+      type: String,
+      default: null
+    },
+    orderAsc: {
+      type: String,
+      default: null
+    },
+    orderDesc: {
+      type: String,
+      default: null
+    },
+    orderByRandom: {
+      type: String,
+      default: null
+    },
+    sortedBy: {
+      type: String,
+      default: null,
+      callback(newValue) {
+        // if we change search form, re-populate
+        if (newValue && this.sortForm && newValue !== this.sortForm.getAttribute('id')) {
+          this.sortForm = null;
+          this.populate();
+        }
+      }
+    }
+  },
+  initialState: {
+    randomOrder: null
+  },
+  attached() {
+    this.listPostProcessors.push(this.orderCallback.bind(this));
+  },
+  created() {
+    this.randomOrder = [];
+  },
+  async sorterList() {
+    if (!this.resource) return;
+    this.empty();
+    await this.populate();
+  },
+  linkSorterForm() {
+    this.sortForm.addEventListener('formChange', () => {
+      this.sorterList();
+    });
+  },
+  async orderCallback(resources, listPostProcessors, div, context) {
+    if (this.orderBy) this.orderAsc = this.orderBy; // retrocompatibility. remove in 0.15
+    let sortingKey = '';
+    let orderValueToSort = '';
+
+    // if order-asc or order-desc attribute
+    if (this.orderAsc || this.orderDesc) {
+      sortingKey = this.orderAsc || this.orderDesc;
+    }
+    // if sorted-by attribute (solid-form-search data used)
+    else if (this.sortedBy) {
+      const sortedBy = this.sortedBy;
+      if (sortedBy != null) {
+        if (!this.sortForm) {
+          this.sortForm = document.getElementById(sortedBy);
+          if (!this.sortForm) throw `#${sortedBy} is not in DOM`;
+          this.linkSorterForm();
+        }
+        if (!this.sortForm.component.value.field) {
+          console.warn('The attribute field does not exist');
+        } else {
+          sortingKey = this.sortForm.component.value.field['value'];
+        }
+        const orderField = this.sortForm.component.value.order;
+        orderValueToSort = orderField && orderField.value ? orderField.value : 'asc';
+      }
+    }
+    // sorting data according to the defined value of sortingKey
+    if (sortingKey) {
+      let orderToSort = true; // set 'asc' by default
+      if (this.orderDesc || orderValueToSort == "desc") orderToSort = false;
+      resources = (await Promise.all(resources.map(async resource => ({
+        sortingKey: await resource[sortingKey],
+        // fetch sorting value
+        proxy: resource // and keep proxy
+      })))).sort(this.sortValuesByKey("sortingKey", orderToSort)) // sort this array
+      .map(r => r.proxy); // re-create array
+    }
+    // if order-by-random attribute
+    else if (this.isRandomSorted()) {
+      resources = this.shuffleResources(resources); // shuffle resources
+    }
+
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  },
+  isRandomSorted() {
+    return this.orderByRandom !== null;
+  },
+  sortValuesByKey(key, asc) {
+    return function (a, b) {
+      if (!a[key]) return 1;
+      if (!b[key]) return -1;
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
+      let comparison = 0;
+      if (varA > varB) comparison = asc ? 1 : -1;else if (varA < varB) comparison = asc ? -1 : 1;
+      return comparison;
+    };
+  },
+  shuffleResources(array) {
+    let currentIndex = array.length;
+    let temporaryValue;
+    let randomIndex;
+    if (this.randomOrder.length !== array.length) {
+      // if no random order existing
+      this.randomOrder = [...Array(array.length).keys()]; // generate array of indexes
+      while (0 !== currentIndex) {
+        randomIndex = Math.floor(Math.random() * currentIndex);
+        currentIndex -= 1;
+        temporaryValue = this.randomOrder[currentIndex];
+        this.randomOrder[currentIndex] = this.randomOrder[randomIndex];
+        this.randomOrder[randomIndex] = temporaryValue;
+      }
+    }
+    return this.randomOrder.map(i => array[i]); // rebuild array with random order
+  }
+};
+
+export { SorterMixin };

package/dist/mixins/storeMixin.js

@@ -0,0 +1,109 @@
+import { store } from '../libs/store/store.js';
+import { formatAttributesToServerSearchOptions, mergeServerSearchOptions } from '../libs/store/server-search.js';
+import { AttributeBinderMixin } from './attributeBinderMixin.js';
+import { ContextMixin } from './contextMixin.js';
+import { ServerPaginationMixin } from './serverPaginationMixin.js';
+import { formatAttributesToServerPaginationOptions } from '../libs/store/server-pagination.js';
+const StoreMixin = {
+  name: 'store-mixin',
+  use: [AttributeBinderMixin, ContextMixin, ServerPaginationMixin],
+  attributes: {
+    noRender: {
+      type: String,
+      default: null,
+      callback: function (value) {
+        if (value === null) this.fetchData(this.dataSrc);
+      }
+    },
+    dataSrc: {
+      type: String,
+      default: null,
+      callback: async function (value) {
+        const filteredOnServer = this.element.attributes['filtered-on']?.value === 'server';
+        const limited = this.element.attributes['limit']?.value !== undefined;
+        if (this.noRender === null && !filteredOnServer && !limited) {
+          await this.fetchData(value);
+        } else if (this.noRender === null && !filteredOnServer) {
+          this.resourceId = value;
+        }
+      }
+    },
+    loaderId: {
+      type: String,
+      default: ''
+    },
+    nestedField: {
+      type: String,
+      default: null
+    }
+  },
+  initialState: {
+    resourceId: null,
+    subscription: null
+  },
+  created() {
+    if (this.element.closest('[no-render]')) this.noRender = ''; // if embedded in no-render, apply no-render to himself
+  },
+
+  detached() {
+    if (this.subscription) PubSub.unsubscribe(this.subscription);
+  },
+  get resource() {
+    let id = this.resourceId;
+    if (this.limit) {
+      id = this.resourceId + "#p" + this.limit + "?o" + this.offset;
+    }
+    const serverSearch = mergeServerSearchOptions(formatAttributesToServerSearchOptions(this.element.attributes), this.getDynamicServerSearch?.() // from `filterMixin`
+    );
+
+    return id ? store.get(id, serverSearch) : null;
+  },
+  get loader() {
+    return this.loaderId ? document.getElementById(this.loaderId) : null;
+  },
+  async fetchData(value) {
+    this.empty();
+    if (this.subscription) PubSub.unsubscribe(this.subscription);
+    if (!value || value == "undefined") return;
+    this.resourceId = value;
+    if (this.nestedField) {
+      const resource = await store.getData(value, this.context);
+      const nestedResource = resource ? await resource[this.nestedField] : null;
+      this.resourceId = nestedResource ? nestedResource['@id'] : null;
+      if (!this.resourceId) throw `Error: the key "${this.nestedField}" does not exist on the resource`;
+    }
+    this.updateNavigateSubscription();
+    this.subscription = PubSub.subscribe(this.resourceId, this.updateDOM.bind(this));
+    const serverPagination = formatAttributesToServerPaginationOptions(this.element.attributes);
+    const dynamicServerSearch = this.getDynamicServerSearch?.(); // from `filterMixin`
+    const serverSearch = mergeServerSearchOptions(formatAttributesToServerSearchOptions(this.element.attributes), dynamicServerSearch);
+    const forceRefetch = !!dynamicServerSearch;
+    await store.getData(this.resourceId, this.context, undefined, undefined, forceRefetch, serverPagination, serverSearch);
+    this.updateDOM();
+  },
+  toggleLoaderHidden(toggle) {
+    if (this.loader) this.loader.toggleAttribute('hidden', toggle);
+  },
+  updateNavigateSubscription() {},
+  async updateDOM() {
+    this.toggleLoaderHidden(false); // brings a loader out if the attribute is set
+    this.empty();
+    await this.replaceAttributesData();
+    await this.populate();
+    setTimeout(() =>
+    // Brings the dispatchEvent at the end of the queue
+    this.element.dispatchEvent(new CustomEvent('populate', {
+      detail: {
+        resource: {
+          "@id": this.dataSrc
+        }
+      }
+    })));
+    this.toggleLoaderHidden(true);
+  },
+  empty() {},
+  update() {
+    if (this.noRender === null) this.updateDOM();
+  }
+};
+export { StoreMixin };

package/dist/mixins/translationMixin.js

@@ -0,0 +1,58 @@
+import { store } from "../libs/store/store.js";
+const TranslationMixin = {
+  name: 'translation-mixin',
+  use: [],
+  initialState: {
+    translationData: {}
+  },
+  created() {
+    this.getLang();
+  },
+  /**
+   * Returns the translation module
+   * @param langCode - string: language needed in 2 char
+   * @returns - object: {key: translation}
+   */
+  async getTranslationModule(langCode) {
+    const translationsModules = {
+      // define modules in a static way, snowpack does not support dynamic strings here
+      en: () => import("../locales/en.json.proxy.js"),
+      fr: () => import("../locales/fr.json.proxy.js")
+    };
+    if (!translationsModules[langCode]) {
+      // set default to EN if the file does not exist
+      console.warn(`${langCode}.json translation file may not exist, English is setted by default`);
+      langCode = 'en';
+    }
+    const module = await translationsModules[langCode]();
+    return module.default;
+  },
+  /**
+   * Loads the right translation file and reload the component
+   */
+  getLang() {
+    const languageStorage = store._getLanguage();
+    if (languageStorage) {
+      if (window.fetchTranslationPromise === undefined) {
+        // if translation data are not already fetched
+        window.fetchTranslationPromise = this.getTranslationModule(languageStorage);
+      }
+      window.fetchTranslationPromise.then(res => {
+        if (res) {
+          this.translationData = res; // stock data in object passed to traduction method below
+          this.update(); // update the rendering in components and widgets
+        }
+      });
+    }
+  },
+
+  /**
+   * Returns translation for a given key
+   * @param tradKey - string: key
+   * @returns - string: translation
+   */
+  t(tradKey) {
+    return this.translationData[tradKey] || '';
+  }
+};
+export { TranslationMixin };

package/dist/mixins/validationMixin.js

@@ -0,0 +1,95 @@
+import dialogPolyfill from '../_snowpack/pkg/dialog-polyfill.js';
+import { html } from '../_snowpack/pkg/lit-html.js';
+import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
+import { uniqID } from '../libs/helpers.js';
+import { TranslationMixin } from './translationMixin.js';
+import { preHTML } from '../libs/lit-helpers.js';
+const ValidationMixin = {
+  name: 'validation-mixin',
+  use: [TranslationMixin],
+  attributes: {
+    confirmationMessage: {
+      type: String,
+      default: null
+    },
+    confirmationType: {
+      type: String,
+      default: null
+    },
+    confirmationSubmitText: {
+      type: String,
+      default: null
+    },
+    confirmationCancelText: {
+      type: String,
+      default: null
+    },
+    confirmationSubmitClass: {
+      type: String,
+      default: undefined
+    },
+    confirmationCancelClass: {
+      type: String,
+      default: undefined
+    },
+    confirmationWidget: {
+      type: String,
+      default: undefined
+    }
+  },
+  created() {
+    this.dialogID = uniqID();
+  },
+  showModal() {
+    var dialog = document.getElementById(this.dialogID);
+    dialogPolyfill.registerDialog(dialog);
+    return dialog.showModal();
+  },
+  performAction() {
+    // Console warning if conf-type attr not filled AND conf-message filled
+    if (this.element.hasAttribute('confirmation-message') && !this.confirmationType) console.warn('confirmation-type attribute is missing.');
+    // Data directly submitted OR confirm dialog modal displayed
+    if (!this.confirmationType || this.confirmationType == "confirm" && confirm(this.confirmationMessage || this.t("validation.message"))) this.validateModal();
+    // Customisable dialog modal opened
+    if (this.confirmationType == "dialog") {
+      this.showModal();
+    }
+  },
+  getModalDialog() {
+    if (this.confirmationType == 'dialog') {
+      const quitDialog = () => {
+        var dialog = document.getElementById(this.dialogID);
+        if (dialog == null) return;
+        dialog.close();
+      };
+      const confirmChoice = () => {
+        this.validateModal();
+        quitDialog();
+      };
+      return html`
+        <dialog id="${this.dialogID}">
+        ${this.confirmationWidget ? preHTML`
+          <${this.confirmationWidget} value=${this.resourceId}></${this.confirmationWidget}>
+        ` : html`
+          <p>${this.confirmationMessage || this.t("validation.message")}</p>
+        `}
+          <div>
+            <button
+              @click=${confirmChoice} 
+              class=${ifDefined(this.confirmationSubmitClass)}
+            >
+            ${this.confirmationSubmitText || this.t("validation.submit-text")}
+            </button>
+            <button
+              @click=${quitDialog}
+              class=${ifDefined(this.confirmationCancelClass)}
+            >
+            ${this.confirmationCancelText || this.t("validation.cancel-text")}
+            </button>
+          </div>
+        </dialog>
+      `;
+    } else return '';
+  }
+};
+export { ValidationMixin };