@jinntec/fore 0.25.0 → 1.0.0-2

package/src/fx-submission.js

@@ -1,7 +1,11 @@
+import { Fore } from './fore.js';
 import { foreElementMixin } from './ForeElementMixin.js';
-import { evaluateXPathToString } from './xpath-evaluation.js';
+import { evaluateXPathToString, evaluateXPath } from './xpath-evaluation.js';
 import getInScopeContext from './getInScopeContext.js';
 
+/**
+ * todo: validate='false'
+ */
 export class FxSubmission extends foreElementMixin(HTMLElement) {
   constructor() {
     super();
@@ -9,16 +13,22 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   }
 
   connectedCallback() {
-    this.style.display = 'none';
+    // this.style.display = 'none';
+    this.methods = ['get', 'put', 'post', 'delete', 'head', 'urlencoded-post'];
+
     this.model = this.parentNode;
 
     // ### initialize properties with defaults
-    if (!this.hasAttribute('id')) throw new Error('id is required');
+    // if (!this.hasAttribute('id')) throw new Error('id is required');
+    if (!this.hasAttribute('id')) console.warn('id is required');
     this.id = this.getAttribute('id');
 
     /** if present should be a existing instance id */
     this.instance = this.hasAttribute('instance') ? this.getAttribute('instance') : null;
 
+    /** if present will determine XPath where to insert a response into when mode is 'replace' */
+    this.into = this.hasAttribute('into') ? this.getAttribute('into') : null;
+
     /** http method */
     this.method = this.hasAttribute('method') ? this.getAttribute('method') : 'get';
 
@@ -30,7 +40,12 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     /** replace might be 'all', 'instance' or 'none' */
     this.replace = this.hasAttribute('replace') ? this.getAttribute('replace') : 'all';
 
-    if (!this.hasAttribute('url')) throw new Error(`url is required for submission: ${this.id}`);
+    this.serialization = this.hasAttribute('serialization')
+      ? this.getAttribute('serialization')
+      : 'xml';
+
+    // if (!this.hasAttribute('url')) throw new Error(`url is required for submission: ${this.id}`);
+    if (!this.hasAttribute('url')) console.warn(`url is required for submission: ${this.id}`);
     this.url = this.getAttribute('url');
 
     this.targetref = this.hasAttribute('targetref') ? this.getAttribute('targetref') : null;
@@ -40,10 +55,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       : 'application/xml';
 
     this.validate = this.getAttribute('validate') ? this.getAttribute('validate') : 'true';
-
     this.shadowRoot.innerHTML = this.renderHTML();
-
-    this.addEventListener('submit', () => this._submit());
   }
 
   // eslint-disable-next-line class-methods-use-this
@@ -53,17 +65,12 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     `;
   }
 
-  submit() {
-    this.dispatchEvent(
-      new CustomEvent('submit', {
-        composed: true,
-        bubbles: true,
-        detail: {},
-      }),
-    );
+  async submit() {
+    await this.dispatch('submit', { submission: this });
+    this._submit();
   }
 
-  _submit() {
+  async _submit() {
     console.log('submitting....');
     this.evalInContext();
     const model = this.getModel();
@@ -73,11 +80,12 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.validate) {
       const valid = model.revalidate();
       if (!valid) {
+        console.log('validation failed. Bubmission stopped');
         return;
       }
     }
-
-    this._serializeAndSend();
+    console.log('model updated....');
+    await this._serializeAndSend();
   }
 
   /**
@@ -96,7 +104,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
         const inscope = getInScopeContext(node, naked);
         const result = evaluateXPathToString(naked, inscope, this.getOwnerForm());
         const replaced = expr.replaceAll(match, result);
-        console.log('result of replacing ', replaced);
+        console.log('replacing ', expr, ' with ', replaced);
         expr = replaced;
       });
     }
@@ -111,34 +119,74 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
    */
   async _serializeAndSend() {
     const resolvedUrl = this._evaluateAttributeTemplateExpression(this.url, this);
-    const serializer = new XMLSerializer();
-    let serialized = serializer.serializeToString(this.nodeset);
+
+    const instance = this.getInstance();
+    if (instance.type !== 'xml') {
+      console.error('JSON serialization is not supported yet');
+      return;
+    }
+
+    // let serialized = serializer.serializeToString(this.nodeset);
+    let serialized;
+    if (this.serialization === 'none') {
+      serialized = undefined;
+    } else {
+      const relevant = this.selectRelevant();
+      serialized = this._serialize(instance.type, relevant);
+    }
+
+    // let serialized = serializer.serializeToString(relevant);
     if (this.method.toLowerCase() === 'get') {
       serialized = undefined;
     }
+    // console.log('data being send', serialized);
+    // console.log('submitting data',serialized);
+
+    if (resolvedUrl === '#echo') {
+      let doc;
+      if (serialized) {
+        doc = new DOMParser().parseFromString(serialized, 'application/xml');
+      } else {
+        doc = undefined;
+      }
+      // const doc = new DOMParser().parseFromString(serialized, 'application/xml');
+      // const newDoc = doc.replaceChild(relevant, doc.firstElementChild);
+      this._handleResponse(doc);
+      this.dispatch('submit-done', {});
+      return;
+    }
+    // ### setting headers
+    const headers = this._getHeaders();
+    console.log('headers', headers);
+
+    // ### map urlencoded-post to post for fetch
+    if (this.method === 'urlencoded-post') {
+      this.method = 'post';
+    }
+
+    if (!this.methods.includes(this.method.toLowerCase())) {
+      this.dispatch('error', { message: `Unknown method ${this.method}` });
+      return;
+    }
     const response = await fetch(resolvedUrl, {
       method: this.method,
       mode: 'cors',
-      credentials: 'same-origin',
-      headers: {
-        'Content-type': 'application/xml; charset=UTF-8',
-      },
+      credentials: 'include',
+      headers,
       body: serialized,
     });
 
-    if (!response.ok) {
-      this.dispatchEvent(
-        new CustomEvent('submit-error', {
-          composed: true,
-          bubbles: true,
-          detail: { message: `Error while submitting ${this.id}` },
-        }),
-      );
+    if (!response.ok || response.status > 400) {
+      this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+      return;
     }
 
     const contentType = response.headers.get('content-type').toLowerCase();
-
-    if (contentType.startsWith('text/plain') || contentType.startsWith('text/html')) {
+    if (
+      contentType.startsWith('text/plain') ||
+      contentType.startsWith('text/html') ||
+      contentType.startsWith('text/markdown')
+    ) {
       const text = await response.text();
       this._handleResponse(text);
     } else if (contentType.startsWith('application/json')) {
@@ -152,6 +200,53 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       const blob = await response.blob();
       this._handleResponse(blob);
     }
+
+    this.dispatch('submit-done', {});
+  }
+
+  _serialize(instanceType, relevantNodes) {
+    if (this.method === 'urlencoded-post') {
+      // this.method = 'post';
+      const params = new URLSearchParams();
+      // console.log('nodes to serialize', relevantNodes);
+      Array.from(relevantNodes.children).forEach(child => {
+        params.append(child.nodeName, child.textContent);
+      });
+      return params;
+    }
+    if (instanceType === 'xml') {
+      const serializer = new XMLSerializer();
+      return serializer.serializeToString(relevantNodes);
+    }
+    /*
+            if(instanceType === 'json'){
+                console.warn('JSON serialization is not yet supported')
+            }
+    */
+    throw new Error('unknown instance type ', instanceType);
+  }
+
+  _getHeaders() {
+    const headers = new Headers();
+
+    // ### set content-type header according to type of instance
+    const instance = this.getInstance();
+    const contentType = Fore.getContentType(instance, this.method);
+    headers.append('Content-Type', contentType);
+    // ### needed to overwrite browsers' setting of 'Accept' header
+    if (headers.has('Accept')) {
+      headers.delete('Accept');
+    }
+    // headers.append('Accept', 'application/xml');
+
+    // ### add header defined by fx-header elements
+    const headerElems = this.querySelectorAll('fx-header');
+    Array.from(headerElems).forEach(header => {
+      const { name } = header;
+      const val = header.getValue();
+      headers.append(name, val);
+    });
+    return headers;
   }
 
   _getUrlExpr() {
@@ -176,9 +271,31 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.replace === 'instance') {
       const targetInstance = this._getTargetInstance();
       if (targetInstance) {
-        const instanceData = data;
-        targetInstance.instanceData = instanceData;
-        console.log('### replaced instance ', targetInstance.instanceData);
+        if (this.targetref) {
+          const theTarget = evaluateXPath(
+            this.targetref,
+            targetInstance.instanceData.firstElementChild,
+            this,
+          );
+          console.log('theTarget', theTarget);
+          const clone = data.firstElementChild;
+          const parent = theTarget.parentNode;
+          parent.replaceChild(clone, theTarget);
+          console.log('finally ', parent);
+        } else if (this.into) {
+          const theTarget = evaluateXPath(
+            this.into,
+            targetInstance.instanceData.firstElementChild,
+            this,
+          );
+          console.log('theTarget', theTarget);
+          theTarget.innerHTML = data;
+        } else {
+          const instanceData = data;
+          targetInstance.instanceData = instanceData;
+          console.log('### replaced instance ', targetInstance.instanceData);
+        }
+
         this.model.updateModel(); // force update
         // this.model.formElement.refresh();
         this.getOwnerForm().refresh();
@@ -199,24 +316,89 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       window.location.href = data;
     }
 
-    this.dispatchEvent(
-      new CustomEvent('submit-done', {
-        composed: true,
-        bubbles: true,
-        detail: {},
-      }),
-    );
+    /*
+                const event = new CustomEvent('submit-done', {
+                    composed: true,
+                    bubbles: true,
+                    detail: {},
+                });
+                console.log('firing',event);
+                this.dispatchEvent(event);
+        */
+    // this.dispatch('submit-done', {});
+  }
+
+  /**
+   * select relevant nodes
+   *
+   * todo: support for 'empty'
+   * @returns {*}
+   */
+  selectRelevant() {
+    // ### no relevance selection - current nodeset is used 'as-is'
+    if (this.nonrelevant === 'keep') {
+      return this.nodeset;
+    }
+
+    // first check if nodeset of submission is relevant - otherwise bail out
+    const mi = this.getModel().getModelItem(this.nodeset);
+    if (mi && !mi.relevant) return null;
+
+    const doc = new DOMParser().parseFromString('<data></data>', 'application/xml');
+    const root = doc.firstElementChild;
+
+    if (this.nodeset.children.length === 0 && this._isRelevant(this.nodeset)) {
+      return this.nodeset;
+    }
+    const result = this._filterRelevant(this.nodeset, root);
+    return result;
+  }
+
+  _filterRelevant(node, result) {
+    const { childNodes } = node;
+    Array.from(childNodes).forEach(n => {
+      if (this._isRelevant(n)) {
+        const clone = n.cloneNode(false);
+        result.appendChild(clone);
+        const { attributes } = n;
+        if (attributes) {
+          Array.from(attributes).forEach(attr => {
+            if (this._isRelevant(attr)) {
+              clone.setAttribute(attr.nodeName, attr.value);
+            } else if (this.nonrelevant === 'empty') {
+              clone.setAttribute(attr.nodeName, '');
+            } else {
+              clone.removeAttribute(attr.nodeName);
+            }
+          });
+        }
+        return this._filterRelevant(n, clone);
+      }
+      return null;
+    });
+    return result;
+  }
+
+  _isRelevant(node) {
+    const mi = this.getModel().getModelItem(node);
+    if (!mi || mi.relevant) {
+      return true;
+    }
+    return false;
   }
 
   _handleError() {
-    console.log('ERRRORRRRR');
-    this.dispatchEvent(
-      new CustomEvent('submit-error', {
-        composed: true,
-        bubbles: true,
-        detail: {},
-      }),
-    );
+    this.dispatch('submit-error', {});
+    /*
+                console.log('ERRRORRRRR');
+                this.dispatchEvent(
+                    new CustomEvent('submit-error', {
+                        composed: true,
+                        bubbles: true,
+                        detail: {},
+                    }),
+                );
+        */
   }
 }
 

package/src/getInScopeContext.js

@@ -1,5 +1,4 @@
-// import evaluateXPathToNodes from './xpath-evaluation.js';
-import { evaluateXPathToNodes, evaluateXPathToFirstNode } from './xpath-evaluation.js';
+import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
 
 import { XPathUtil } from './xpath-util.js';
 
@@ -32,7 +31,7 @@ function _getInitialContext(node, ref) {
     const instanceId = XPathUtil.getInstanceId(ref);
     return model.getInstance(instanceId).getDefaultContext();
   }
-  if (model.getDefaultInstance() !== null) {
+  if (model.getDefaultInstance() !== null && model.inited) {
     return model.getDefaultInstance().getDefaultContext();
   }
   return [];

package/src/ui/abstract-control.js

@@ -8,20 +8,6 @@ import { ModelItem } from '../modelitem.js';
  *
  */
 export default class AbstractControl extends foreElementMixin(HTMLElement) {
-  /*
-  static get properties() {
-    return {
-      ...super.properties,
-      value: {
-        type: String,
-      },
-      widget: {
-        type: Object,
-      },
-    };
-  }
-*/
-
   constructor() {
     super();
     this.value = '';
@@ -34,14 +20,14 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   // eslint-disable-next-line class-methods-use-this
   getWidget() {
-    throw new Error('You have to implement the method updateWidgetValue!');
+    throw new Error('You have to implement the method getWidget!');
   }
 
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
-  async refresh() {
-    console.log('### AbstractControl.refresh on : ', this);
+  async refresh(force) {
+    // console.log('### AbstractControl.refresh on : ', this);
 
     const currentVal = this.value;
 
@@ -76,29 +62,31 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         if (currentVal !== this.value) {
           // console.log('dispatching value-changed for ', this);
           // console.log('value-changed path ', this.modelItem.path);
-          this.dispatchEvent(
-            new CustomEvent('value-changed', {
-              composed: true,
-              bubbles: true,
-              detail: { path: this.modelItem.path },
-            }),
-          );
+          this.dispatch('value-changed', { path: this.modelItem.path });
         }
         // this.requestUpdate();
       }
     }
+    // Fore.refreshChildren(this,force);
     // await this.updateComplete;
   }
 
+  /**
+   *
+   * @returns {Promise<void>}
+   */
   // eslint-disable-next-line class-methods-use-this
   async updateWidgetValue() {
     throw new Error('You have to implement the method updateWidgetValue!');
   }
 
   handleModelItemProperties() {
+    // console.log('form ready', this.getOwnerForm().ready);
     this.handleRequired();
     this.handleReadonly();
-    this.handleValid();
+    if (this.getOwnerForm().ready) {
+      this.handleValid();
+    }
     this.handleRelevant();
   }
 
@@ -108,7 +96,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
   _dispatchEvent(event) {
     if (this.getOwnerForm().ready) {
-      this.dispatchEvent(new CustomEvent(event, {}));
+      this.dispatch(event, {});
     }
   }
 
@@ -121,21 +109,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       if (this.modelItem.required) {
         this.widget.setAttribute('required', 'required');
         this.classList.add('required');
-        // this.dispatchEvent(new CustomEvent('required', {}));
-
-        /*
-        if(this.getOwnerForm().ready){
-          this.dispatchEvent(new CustomEvent('required', {}));
-        }
-*/
         this._dispatchEvent('required');
       } else {
         this.widget.removeAttribute('required');
         this.required = false;
         // this.removeAttribute('required');
         this.classList.toggle('required');
-
-        this.dispatchEvent(new CustomEvent('optional', {}));
+        this._dispatchEvent('optional');
       }
     }
   }
@@ -147,15 +127,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
         this.widget.setAttribute('readonly', 'readonly');
         // this.setAttribute('readonly','readonly');
         this.classList.toggle('readonly');
-        // this.dispatchEvent(new CustomEvent('readonly', {}));
         this._dispatchEvent('readonly');
       }
       if (!this.modelItem.readonly) {
         this.widget.removeAttribute('readonly');
         // this.removeAttribute('readonly');
         this.classList.toggle('readonly');
-
-        this.dispatchEvent(new CustomEvent('readwrite', {}));
+        this._dispatchEvent('readwrite');
       }
     }
   }
@@ -168,8 +146,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     if (this.isValid() !== this.modelItem.constraint) {
       if (this.modelItem.constraint) {
         this.classList.remove('invalid');
-        alert.style.display = 'none';
-        this.dispatchEvent(new CustomEvent('valid', {}));
+        if (alert) alert.style.display = 'none';
+        this._dispatchEvent('valid');
       } else {
         // ### constraint is invalid - handle alerts
         this.classList.add('invalid');
@@ -201,12 +179,13 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // console.log('mip valid', this.modelItem.enabled);
     if (this.isEnabled() !== this.modelItem.relevant) {
       if (this.modelItem.relevant) {
-        this.dispatchEvent(new CustomEvent('relevant', {}));
-        this._fadeIn(this, this.display);
+        this._dispatchEvent('relevant');
+        // this._fadeIn(this, this.display);
+        this.style.display = this.display;
       } else {
-        // this.dispatchEvent(new CustomEvent('nonrelevant', {}));
         this._dispatchEvent('nonrelevant');
-        this._fadeOut(this);
+        // this._fadeOut(this);
+        this.style.display = 'none';
       }
     }
   }

package/src/ui/fx-alert.js

@@ -1,12 +1,14 @@
-import { html, css } from 'lit-element';
+import AbstractControl from './abstract-control.js';
 
-import XfAbstractControl from './abstract-control.js';
+export class FxAlert extends AbstractControl {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
 
-export class FxAlert extends XfAbstractControl {
-  static get styles() {
-    return css`
+  connectedCallback() {
+    const style = `
       :host {
-        display: block;
         height: auto;
         font-size: 0.8em;
         font-weight: 400;
@@ -14,23 +16,22 @@ export class FxAlert extends XfAbstractControl {
         display: none;
       }
     `;
-  }
 
-  constructor() {
-    super();
-    this.style.display = 'none';
-  }
+    const html = `
+      <slot></slot>
+    `;
 
-  static get properties() {
-    return {
-      ...super.properties,
-    };
+    this.shadowRoot.innerHTML = `
+        <style>
+            ${style}
+        </style>
+        ${html}
+    `;
   }
 
-  render() {
-    return html`
-      <slot></slot>
-    `;
+  async updateWidgetValue() {
+    console.log('alert update', this);
+    this.innerHTML = this.value;
   }
 }
 customElements.define('fx-alert', FxAlert);

package/src/ui/fx-container.js

@@ -30,18 +30,21 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
             </style>
             ${html}
     `;
+
+    this.getOwnerForm().registerLazyElement(this);
   }
 
   /**
    * (re)apply all state properties to this control.
    */
-  refresh() {
-    console.log('### FxContainer.refresh on : ', this);
+  refresh(force) {
+    if (!force && this.hasAttribute('refresh-on-view')) return;
+    // console.log('### FxContainer.refresh on : ', this);
 
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();
-      this.value = this.modelItem.value;
+      // this.value = this.modelItem.value;
     }
 
     // await this.updateComplete;
@@ -50,7 +53,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this._getForm().ready) {
       this.handleModelItemProperties();
     }
-    Fore.refreshChildren(this);
+    Fore.refreshChildren(this, force);
   }
 
   handleModelItemProperties() {
@@ -78,6 +81,8 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
 
   handleRelevant() {
     // console.log('mip valid', this.modelItem.enabled);
+    if (!this.modelItem) return;
+
     if (this.isEnabled() !== this.modelItem.enabled) {
       if (this.modelItem.enabled) {
         this.dispatchEvent(new CustomEvent('enabled', {}));