@startinblox/core 0.17.31 → 0.18.0-beta.1

package/dist/mixins/listMixin.js

@@ -1,25 +1,3 @@
-function _templateObject2() {
-  const data = _taggedTemplateLiteral([""]);
-
-  _templateObject2 = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  const data = _taggedTemplateLiteral(["\n        <", " value=", "></", ">\n      "]);
-
-  _templateObject = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 import { html, render } from '../_snowpack/pkg/lit-html.js';
 import { preHTML } from '../libs/lit-helpers.js';
 import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
@@ -42,20 +20,16 @@ const ListMixin = {
     // Rendering to execute after all the processors have been executed
     renderCallbacks: []
   },
-
   created() {
     this.listPostProcessors = [];
     this.renderCallbacks = [];
   },
-
   appendSingleElt(parent) {
     this.appendChildElt(this.resource['@id'], parent);
   },
-
   setElementAttribute(attr) {
     const containerAttribute = "solid-container";
     const resourceAttribute = "solid-resource";
-
     if (attr === "resource") {
       this.element.removeAttribute(containerAttribute);
       this.element.setAttribute(resourceAttribute, "");
@@ -64,32 +38,32 @@ const ListMixin = {
       this.element.setAttribute(containerAttribute, "");
     }
   },
-
   async populate() {
     const div = this.div;
-    if (!this.resource) return; // Not a container but a single resource
+    if (!this.resource) return;
 
-    if (!this.resource.isContainer()) {
+    // Not a container but a single resource
+    if (!this.resource.isContainer?.()) {
       this.setElementAttribute("resource");
       this.appendSingleElt(div);
       return;
     }
-
     this.setElementAttribute("container");
     const listPostProcessors = [...this.listPostProcessors];
     this.renderCallbacks = [];
     listPostProcessors.push(this.renderDOM.bind(this));
-    listPostProcessors.push(this.handleEmptyWidget.bind(this)); // Execute the first post-processor of the list
+    listPostProcessors.push(this.handleEmptyWidget.bind(this));
 
+    // Execute the first post-processor of the list
     const nextProcessor = listPostProcessors.shift();
-    await nextProcessor(this.resource['ldp:contains'], listPostProcessors, div, this.dataSrc); // Execute the render callbacks
+    await nextProcessor(this.resource['ldp:contains'], listPostProcessors, div, this.dataSrc);
 
+    // Execute the render callbacks
     for (const renderCallback of this.renderCallbacks) {
       // Render the template in the given parent element
       render(renderCallback.template, renderCallback.parent);
     }
   },
-
   /**
    * Render resources in the DOM
    * @param resources
@@ -103,11 +77,9 @@ const ListMixin = {
       if (!resource) continue;
       this.appendChildElt(resource['@id'], div);
     }
-
     const nextProcessor = listPostProcessors.shift();
     if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
   },
-
   /**
    * Show empty widget if no resources in the list
    * @param resources
@@ -117,20 +89,17 @@ const ListMixin = {
    */
   async handleEmptyWidget(resources, listPostProcessors, div, context) {
     if (this.emptyWidget) {
-      const emptyWidgetTemplate = preHTML(_templateObject(), this.emptyWidget, ifDefined(this.emptyValue), this.emptyWidget);
-
+      const emptyWidgetTemplate = preHTML`
+        <${this.emptyWidget} value=${ifDefined(this.emptyValue)}></${this.emptyWidget}>
+      `;
       if (!this.emptyWrapper) {
         this.emptyWrapper = document.createElement('span');
         this.element.appendChild(this.emptyWrapper);
       }
-
-      render(resources.length > 0 ? html(_templateObject2()) : emptyWidgetTemplate, this.emptyWrapper);
+      render(resources.length > 0 ? html`` : emptyWidgetTemplate, this.emptyWrapper);
     }
-
     const nextProcessor = listPostProcessors.shift();
     if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
   }
-
 };
-export { ListMixin };
-//# sourceMappingURL=listMixin.js.map
+export { ListMixin };

package/dist/mixins/nextMixin.js

@@ -7,7 +7,6 @@ const NextMixin = {
       default: ''
     }
   },
-
   // Here "even.target" points to the content of the widgets of the children of solid-display
   goToNext(resource) {
     if (this.next) {
@@ -20,7 +19,5 @@ const NextMixin = {
       }));
     }
   }
-
 };
-export { NextMixin };
-//# sourceMappingURL=nextMixin.js.map
+export { NextMixin };

package/dist/mixins/paginateMixin.js

@@ -1,15 +1,3 @@
-function _templateObject() {
-  const data = _taggedTemplateLiteral(["\n      <button\n        data-id=\"prev\"\n        ?disabled=", "\n        @click=", "\n      >\u2190</button>\n      <button\n        data-id=\"next\"\n        ?disabled=", "\n        @click=", "\n      >\u2192</button>\n      <span>\n        <span data-id=\"current\">", "</span> / <span data-id=\"count\">", "</span>\n      </span>\n    "]);
-
-  _templateObject = function () {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 import { html } from "../_snowpack/pkg/lit-html.js";
 const PaginateMixin = {
   name: 'paginate-mixin',
@@ -27,15 +15,12 @@ const PaginateMixin = {
   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;
@@ -47,37 +32,30 @@ const PaginateMixin = {
       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\"]");
+    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;
@@ -85,15 +63,12 @@ const PaginateMixin = {
     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
@@ -102,9 +77,21 @@ const PaginateMixin = {
   renderPaginationNav(pageCount, context, div) {
     this.getNavElement(div).toggleAttribute('hidden', pageCount <= 1);
     const currentPage = this.getCurrentPage(context);
-    return html(_templateObject(), !this.shouldLoop() && currentPage <= 1, () => this.setCurrentPage(currentPage - 1, context, pageCount), !this.shouldLoop() && currentPage >= pageCount, () => this.setCurrentPage(currentPage + 1, context, pageCount), currentPage, String(pageCount));
+    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 };
-//# sourceMappingURL=paginateMixin.js.map
+export { PaginateMixin };

package/dist/mixins/requiredMixin.js

@@ -1,34 +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 };
-//# sourceMappingURL=requiredMixin.js.map
+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

@@ -21,7 +21,6 @@ const SorterMixin = {
     sortedBy: {
       type: String,
       default: null,
-
       callback(newValue) {
         // if we change search form, re-populate
         if (newValue && this.sortForm && newValue !== this.sortForm.getAttribute('id')) {
@@ -29,88 +28,76 @@ const SorterMixin = {
           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
+    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)
+    }
+    // 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 "#".concat(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';
+      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();
         }
-      } // sorting data according to the defined value of sortingKey
-
-
+        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
+    }
+    // if order-by-random attribute
     else if (this.isRandomSorted()) {
-        resources = this.shuffleResources(resources); // shuffle resources
-      }
+      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;
@@ -122,16 +109,13 @@ const SorterMixin = {
       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;
@@ -140,10 +124,8 @@ const SorterMixin = {
         this.randomOrder[randomIndex] = temporaryValue;
       }
     }
-
     return this.randomOrder.map(i => array[i]); // rebuild array with random order
   }
-
 };
-export { SorterMixin };
-//# sourceMappingURL=sorterMixin.js.map
+
+export { SorterMixin };

package/dist/mixins/storeMixin.js

@@ -1,9 +1,12 @@
 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],
+  use: [AttributeBinderMixin, ContextMixin, ServerPaginationMixin],
   attributes: {
     noRender: {
       type: String,
@@ -16,7 +19,13 @@ const StoreMixin = {
       type: String,
       default: null,
       callback: async function (value) {
-        if (this.noRender === null) await this.fetchData(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: {
@@ -32,7 +41,6 @@ const StoreMixin = {
     resourceId: null,
     subscription: null
   },
-
   created() {
     if (this.element.closest('[no-render]')) this.noRender = ''; // if embedded in no-render, apply no-render to himself
   },
@@ -40,47 +48,50 @@ const StoreMixin = {
   detached() {
     if (this.subscription) PubSub.unsubscribe(this.subscription);
   },
-
   get resource() {
-    return this.resourceId ? store.get(this.resourceId) : null;
-  },
+    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 \"".concat(this.nestedField, "\" does not exist on the resource");
+      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));
-    await store.getData(this.resourceId, this.context);
+    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
+    setTimeout(() =>
+    // Brings the dispatchEvent at the end of the queue
     this.element.dispatchEvent(new CustomEvent('populate', {
       detail: {
         resource: {
@@ -90,13 +101,9 @@ const StoreMixin = {
     })));
     this.toggleLoaderHidden(true);
   },
-
   empty() {},
-
   update() {
     if (this.noRender === null) this.updateDOM();
   }
-
 };
-export { StoreMixin };
-//# sourceMappingURL=storeMixin.js.map
+export { StoreMixin };