@startinblox/core 0.0.0

package/dist/components/solid-ac-checker.js

@@ -0,0 +1,45 @@
+import JSONLDContextParser from '../_snowpack/pkg/jsonld-context-parser.js';
+import { Sib } from '../libs/Sib.js';
+import { StoreMixin } from '../mixins/storeMixin.js';
+export const SolidAcChecker = {
+  name: 'solid-ac-checker',
+  use: [StoreMixin],
+  attributes: {
+    permission: {
+      type: String,
+      default: ''
+    },
+    noPermission: {
+      type: String,
+      default: ''
+    }
+  },
+  async populate() {
+    if (!this.resource) return;
+    let displayElement;
+    const ContextParser = JSONLDContextParser.ContextParser;
+    const myParser = new ContextParser();
+    const context = await myParser.parse(this.context);
+    const permissions = await this.resource.permissions;
+    if (this.permission) {
+      // User has permission of ...
+      displayElement = permissions.some(p => {
+        return ContextParser.compactIri(p, context) === this.permission;
+      });
+    } else if (this.noPermission) {
+      // User has no permission of ...
+      displayElement = permissions.every(p => {
+        return ContextParser.compactIri(p, context) !== this.noPermission;
+      });
+    } else {
+      // No parameter provided
+      console.warn('solid-ac-checker: you should define at least one of "permission" or "no-permission" attribute.');
+      return;
+    }
+    if (displayElement) this.element.removeAttribute('hidden');
+  },
+  empty() {
+    this.element.setAttribute('hidden', '');
+  }
+};
+Sib.register(SolidAcChecker);

package/dist/components/solid-calendar.js

@@ -0,0 +1,66 @@
+import { Sib } from '../libs/Sib.js';
+import { ListMixin } from '../mixins/listMixin.js';
+import { StoreMixin } from '../mixins/storeMixin.js';
+import { NextMixin } from '../mixins/nextMixin.js';
+import { store } from '../libs/store/store.js';
+import { uniqID } from '../libs/helpers.js';
+import Calendar from '../_snowpack/pkg/tui-calendar.js';
+import { html, render } from '../_snowpack/pkg/lit-html.js';
+export const SolidCalendar = {
+  name: 'solid-calendar',
+  use: [ListMixin, StoreMixin, NextMixin],
+  initialState: {
+    subscriptions: null
+  },
+  created() {
+    //@ts-ignore
+    import("../_snowpack/pkg/tui-calendar/dist/tui-calendar.css.proxy.js");
+    const id = uniqID();
+    const template = html`
+      <div id=${id} style="width:100%;height:100%;"></div>
+    `;
+    render(template, this.element);
+    this.calendar = new Calendar(this.element.querySelector(`#${id}`), {
+      defaultView: 'month'
+    });
+    this.calendar.on('clickSchedule', this.dispatchSelect.bind(this));
+    this.subscriptions = new Map();
+  },
+  get extra_context() {
+    return {
+      date: "http://www.w3.org/2001/XMLSchema#dateTime"
+    };
+  },
+  dispatchSelect(event) {
+    const resource = {
+      '@id': event['schedule'].id
+    };
+    this.element.dispatchEvent(new CustomEvent('resourceSelect', {
+      detail: {
+        resource: resource
+      }
+    }));
+    this.goToNext(resource);
+  },
+  async appendChildElt(resourceId) {
+    const resource = await store.getData(resourceId, this.context);
+    if (!resource) return;
+    if (!this.subscriptions.get(resourceId)) {
+      this.subscriptions.set(resourceId, PubSub.subscribe(resourceId, () => this.updateDOM()));
+    } // TODO : mixin gestion des enfants
+    const date = await resource['date'];
+    const name = await resource['name'];
+    if (name && date) {
+      this.calendar.createSchedules([{
+        id: resource['@id'],
+        title: name.toString(),
+        category: 'time',
+        start: date.toString()
+      }]);
+    }
+  },
+  empty() {
+    this.calendar.clear();
+  }
+};
+Sib.register(SolidCalendar);

package/dist/components/solid-delete.js

@@ -0,0 +1,96 @@
+import { Sib } from '../libs/Sib.js';
+import { base_context, store } from '../libs/store/store.js';
+import { NextMixin } from '../mixins/nextMixin.js';
+import { ValidationMixin } from '../mixins/validationMixin.js';
+import { AttributeBinderMixin } from '../mixins/attributeBinderMixin.js';
+import { html, render } from '../_snowpack/pkg/lit-html.js';
+export const SolidDelete = {
+  name: 'solid-delete',
+  use: [NextMixin, ValidationMixin, AttributeBinderMixin],
+  attributes: {
+    dataSrc: {
+      type: String,
+      default: null,
+      callback: function () {
+        this.resourceId = this.dataSrc;
+      }
+    },
+    dataLabel: {
+      type: String,
+      default: null,
+      callback: function (newValue, oldValue) {
+        if (newValue !== oldValue) this.planRender();
+      }
+    },
+    extraContext: {
+      type: String,
+      default: null
+    }
+  },
+  initialState: {
+    renderPlanned: false
+  },
+  created() {
+    this.planRender();
+  },
+  planRender() {
+    if (!this.renderPlanned) {
+      this.renderPlanned = true;
+      setTimeout(() => {
+        this.render();
+        this.renderPlanned = false;
+      });
+    }
+  },
+  get context() {
+    let extraContextElement = this.extraContext ? document.getElementById(this.extraContext) :
+    // take element extra context first
+    document.querySelector('[data-default-context]'); // ... or look for a default extra context
+
+    let extraContext = {};
+    if (extraContextElement) extraContext = JSON.parse(extraContextElement.textContent || "{}");
+    return {
+      ...base_context,
+      ...extraContext
+    };
+  },
+  async delete(e) {
+    e.stopPropagation();
+    if (!this.dataSrc) return;
+    this.performAction(); // In validationMixin, method defining what to do according to the present attributes
+  },
+
+  deletion() {
+    return store.delete(this.dataSrc, this.context).then(response => {
+      if (!response.ok) return;
+      this.goToNext(null);
+      const eventData = {
+        detail: {
+          resource: {
+            "@id": this.dataSrc
+          }
+        },
+        bubbles: true
+      };
+      this.element.dispatchEvent(new CustomEvent('save', eventData));
+      this.element.dispatchEvent(new CustomEvent('resourceDeleted', eventData)); // Deprecated. To remove in 0.15
+    });
+  },
+
+  validateModal() {
+    // Send method to validationMixin, used by the dialog modal and performAction method
+    return this.deletion();
+  },
+  update() {
+    this.render();
+  },
+  async render() {
+    await this.replaceAttributesData(false);
+    const button = html`
+      <button @click=${this.delete.bind(this)}>${this.dataLabel || this.t("solid-delete.button")}</button>
+      ${this.getModalDialog()}
+    `;
+    render(button, this.element);
+  }
+};
+Sib.register(SolidDelete);

package/dist/components/solid-display.js

@@ -0,0 +1,150 @@
+import { Sib } from '../libs/Sib.js';
+import { WidgetMixin } from '../mixins/widgetMixin.js';
+import { ListMixin } from '../mixins/listMixin.js';
+import { StoreMixin } from '../mixins/storeMixin.js';
+import { PaginateMixin } from '../mixins/paginateMixin.js';
+import { FilterMixin } from '../mixins/filterMixin.js';
+import { CounterMixin } from '../mixins/counterMixin.js';
+import { SorterMixin } from '../mixins/sorterMixin.js';
+import { GrouperMixin } from '../mixins/grouperMixin.js';
+import { FederationMixin } from '../mixins/federationMixin.js';
+import { HighlighterMixin } from '../mixins/highlighterMixin.js';
+import { NextMixin } from '../mixins/nextMixin.js';
+import { RequiredMixin } from '../mixins/requiredMixin.js';
+import { spread } from '../libs/lit-helpers.js';
+import { html, render } from '../_snowpack/pkg/lit-html.js';
+import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
+export const SolidDisplay = {
+  name: 'solid-display',
+  use: [WidgetMixin, ListMixin, StoreMixin, PaginateMixin, GrouperMixin, CounterMixin, HighlighterMixin, FilterMixin, SorterMixin, RequiredMixin, FederationMixin, NextMixin],
+  attributes: {
+    defaultWidget: {
+      type: String,
+      default: 'solid-display-value'
+    }
+  },
+  initialState: {
+    activeSubscription: null,
+    removeActiveSubscription: null
+  },
+  created() {
+    // Set route active at initialization
+    const route = document.querySelector('solid-route[active]');
+    if (!route) return;
+    setTimeout(() => {
+      if (route['resourceId'] === this.resourceId) this.addActiveCallback();
+    });
+  },
+  detached() {
+    if (this.activeSubscription) PubSub.unsubscribe(this.activeSubscription);
+    if (this.removeActiveSubscription) PubSub.unsubscribe(this.removeActiveSubscription);
+  },
+  // Update subscription when id changes
+  updateNavigateSubscription() {
+    if (this.activeSubscription) PubSub.unsubscribe(this.activeSubscription);
+    if (this.resourceId) {
+      this.activeSubscription = PubSub.subscribe('enterRoute.' + this.resourceId, this.addActiveCallback.bind(this));
+    }
+  },
+  addActiveCallback() {
+    this.element.setAttribute('active', '');
+    this.removeActiveSubscription = PubSub.subscribe('leaveRoute', this.removeActiveCallback.bind(this));
+  },
+  removeActiveCallback() {
+    this.element.removeAttribute('active');
+    PubSub.unsubscribe(this.removeActiveSubscription);
+  },
+  get childTag() {
+    return this.element.dataset.child || this.element.tagName;
+  },
+  get defaultMultipleWidget() {
+    return 'solid-multiple';
+  },
+  get defaultSetWidget() {
+    return 'solid-set-default';
+  },
+  // Here "even.target" points to the content of the widgets of the children of solid-display
+  dispatchSelect(event, resourceId) {
+    const linkTarget = event.target.closest('a');
+    if (linkTarget && linkTarget.hasAttribute('href')) return;
+    const resource = {
+      "@id": resourceId
+    };
+    this.element.dispatchEvent(new CustomEvent('resourceSelect', {
+      detail: {
+        resource: resource
+      }
+    }));
+    this.goToNext(resource);
+  },
+  enterKeydownAction(event, resourceId) {
+    if (event.keyCode === 13) {
+      const resource = {
+        "@id": resourceId
+      };
+      this.goToNext(resource);
+    }
+  },
+  /**
+   * Returns template of a child element (resource)
+   * @param resourceId
+   * @param attributes
+   */
+  getChildTemplate(resourceId, attributes) {
+    let template = html`
+      <solid-display
+        data-src=${resourceId}
+        @click=${event => this.dispatchSelect(event, resourceId)}
+        @keydown=${event => this.enterKeydownAction(event, resourceId)}
+        fields=${ifDefined(this.fields)}
+        ...=${spread(attributes)}
+      ></solid-display>
+    `;
+    return template;
+  },
+  /**
+   * Creates and render the content of a single element (resource)
+   * @param parent
+   */
+  async appendSingleElt(parent) {
+    const fields = await this.getFields();
+    const widgetTemplates = await Promise.all(
+    // generate all widget templates
+    fields.map(field => this.createWidgetTemplate(field)));
+    render(html`${widgetTemplates}`, parent);
+  },
+  /**
+   * @override listMixin method to use litHtml
+   *
+   * Render resources from a container
+   * @param resources
+   * @param listPostProcessors
+   * @param div
+   * @param context
+   */
+  async renderDOM(resources, listPostProcessors, div, context) {
+    const attributes = this.getChildAttributes(); // get attributes of children only once
+    // and create a child template for each resource
+    const template = html`${resources.map(r => r ? this.getChildTemplate(r['@id'], attributes) : null)}`;
+    render(template, div);
+    const nextProcessor = listPostProcessors.shift();
+    if (nextProcessor) await nextProcessor(resources, listPostProcessors, div, context);
+  },
+  /**
+   * Get attributes to dispatch to children from current element
+   */
+  getChildAttributes() {
+    const attributes = {};
+    for (let attr of this.element.attributes) {
+      //copy widget and value attributes
+      if (attr.name.startsWith('value-') || attr.name.startsWith('label-') || attr.name.startsWith('placeholder-') || attr.name.startsWith('widget-') || attr.name.startsWith('class-') || attr.name.startsWith('multiple-') || attr.name.startsWith('editable-') || attr.name.startsWith('action-') || attr.name.startsWith('default-') || attr.name.startsWith('link-text-') || attr.name == 'extra-context') attributes[attr.name] = attr.value;
+      if (attr.name.startsWith('child-')) attributes[attr.name.replace(/^child-/, '')] = attr.value;
+      if (attr.name == 'next') {
+        attributes['role'] = 'button';
+        attributes['tabindex'] = '0';
+      }
+    }
+    return attributes;
+  }
+};
+Sib.register(SolidDisplay);

package/dist/components/solid-form-search.js

@@ -0,0 +1,177 @@
+import { Sib } from '../libs/Sib.js';
+import { WidgetMixin } from '../mixins/widgetMixin.js';
+import { AttributeBinderMixin } from '../mixins/attributeBinderMixin.js';
+import { ContextMixin } from '../mixins/contextMixin.js';
+import { newWidgetFactory } from '../new-widgets/new-widget-factory.js';
+import { html, render } from '../_snowpack/pkg/lit-html.js';
+import { ifDefined } from '../_snowpack/pkg/lit-html/directives/if-defined.js';
+import { uniqID } from '../libs/helpers.js';
+export const SolidFormSearch = {
+  name: 'solid-form-search',
+  use: [WidgetMixin, AttributeBinderMixin, ContextMixin],
+  attributes: {
+    defaultWidget: {
+      type: String,
+      default: 'solid-form-label-text'
+    },
+    submitButton: {
+      type: String,
+      default: null,
+      callback: function (newValue, oldValue) {
+        if (this.noRender == null && newValue !== oldValue) this.populate();
+      }
+    },
+    submitWidget: {
+      type: String,
+      default: undefined
+    },
+    classSubmitButton: {
+      type: String,
+      default: undefined
+    },
+    noRender: {
+      type: String,
+      default: null,
+      callback: function (value) {
+        if (value === null) this.populate();
+      }
+    }
+  },
+  initialState: {
+    error: ''
+  },
+  created() {
+    if (this.element.closest('[no-render]')) this.noRender = ''; // if embedded in no-render, apply no-render to himself
+    this.autoRangeValues = {};
+    this.rangeId = uniqID();
+    this.attachedElements = new Set();
+  },
+  get defaultMultipleWidget() {
+    return 'solid-multiple-form';
+  },
+  get defaultSetWidget() {
+    return 'solid-set-default';
+  },
+  // Returns the current value of the search from
+  // As a search query object
+  get value() {
+    const values = {};
+    this.widgets.forEach(widget => {
+      const name = (widget.component || widget).name;
+      if (name == null) return;
+      let value = widget.component ? widget.component.getValue() : widget.value;
+      try {
+        value = JSON.parse(value);
+      } catch {}
+      // Add another filter value in the values array
+      value = {
+        type: widget.component.type,
+        list: !!widget.component.multiple,
+        value: value
+      };
+      values[name] = value;
+    });
+    return values;
+  },
+  getWidget(field) {
+    let isSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    let tagName = '';
+    // If auto-range-[field] exists, create range-[field] and sets its value
+    if (this.element.hasAttribute('auto-range-' + field) && !this.element.hasAttribute('range-' + field)) {
+      const idField = `${this.rangeId}_${field}`;
+      this.element.setAttribute('range-' + field, 'store://local.' + idField);
+      this.populate();
+    }
+    const widgetAttribute = this.element.getAttribute('widget-' + field);
+    // Choose widget
+    if (!widgetAttribute && (this.element.hasAttribute('range-' + field) || this.element.hasAttribute('enum-' + field))) {
+      tagName = 'solid-form-dropdown';
+    } else {
+      tagName = widgetAttribute || (!isSet ? this.defaultWidget : this.defaultSetWidget);
+    }
+    // Create widget
+    if (!customElements.get(tagName)) {
+      // component does not exist
+      if (tagName.startsWith('solid')) newWidgetFactory(tagName); // solid- -> create it
+    }
+
+    return this.widgetFromTagName(tagName);
+  },
+  async attach(elm) {
+    if (this.attachedElements.has(elm)) return;
+    this.attachedElements.add(elm);
+    await this.updateAutoRanges();
+  },
+  async detach(elm) {
+    if (!this.attachedElements.has(elm)) return;
+    this.attachedElements.delete(elm);
+    await this.updateAutoRanges();
+  },
+  async updateAutoRanges() {
+    for (const attr of this.element.attributes) {
+      if (!attr['name'].startsWith('auto-range-')) continue;
+      const field = attr['name'].replace('auto-range-', '');
+      const autoRangeValues = new Set();
+      for (const elm of this.attachedElements) {
+        for (const value of await elm.getValuesOfField(field)) {
+          autoRangeValues.add(value);
+        }
+      }
+      const idField = `${this.rangeId}_${field}`;
+      const id = `store://local.${idField}`;
+      const ldpContains = Array.from(autoRangeValues).map(id => ({
+        '@id': id
+      }));
+      const data = {
+        "@type": "ldp:Container",
+        "@context": this.context,
+        "ldp:contains": ldpContains
+      };
+      sibStore.setLocalData(data, id);
+    }
+  },
+  change(resource) {
+    this.element.dispatchEvent(new CustomEvent('formChange', {
+      bubbles: true,
+      detail: {
+        resource
+      }
+    }));
+  },
+  async inputChange() {
+    this.change(this.value);
+  },
+  getSubmitTemplate() {
+    return html`
+      <div class=${ifDefined(this.classSubmitButton)}>
+        ${this.submitWidget === 'button' ? html`
+          <button type="submit">${this.submitButton || ''}</button>
+        ` : html`
+          <input type="submit" value=${ifDefined(this.submitButton || undefined)}>
+        `}
+      </div>
+    `;
+  },
+  empty() {},
+  async populate() {
+    await this.replaceAttributesData();
+    if (this.submitButton == null) {
+      this.element.addEventListener('input', () => this.inputChange());
+    } else {
+      this.element.addEventListener('submit', e => {
+        e.preventDefault();
+        this.inputChange();
+      });
+    }
+    const fields = await this.getFields();
+    const widgetTemplates = await Promise.all(fields.map(field => this.createWidgetTemplate(field)));
+    const template = html`
+      <form>
+        ${widgetTemplates}
+        ${this.submitButton == null ? '' : this.getSubmitTemplate()}
+      </form>
+    `;
+    render(template, this.element);
+  }
+};
+Sib.register(SolidFormSearch);