@jinntec/fore 1.2.0 → 1.3.0

package/src/fx-submission.js

@@ -81,11 +81,12 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     if (this.validate==='true') {
       const valid = model.revalidate();
       if (!valid) {
-        console.log('validation failed. Bubmission stopped');
+        console.log('validation failed. Submission stopped');
+        this.getOwnerForm().classList.add('submit-validation-failed');
         // ### allow alerts to pop up
         // this.dispatch('submit-error', {});
         Fore.dispatch(this, 'submit-error', {});
-        this.getModel().parentNode.refresh();
+        this.getModel().parentNode.refresh(true);
         return;
       }
     }
@@ -152,29 +153,39 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
       return;
     }
 
-    if(resolvedUrl.startsWith('localStore:') && this.method === 'post'){
-      // let data = this._parse(serialized, instance);
-      const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
-      localStorage.setItem(key,serialized);
-      Fore.dispatch(this, 'submit-done', {});
-      return;
-    }
+    if(resolvedUrl.startsWith('localStore:')){
 
-    if(resolvedUrl.startsWith('localStore:') && (this.method === 'consume' || this.method === 'get')){
-      // let data = this._parse(serialized, instance);
-      this.replace = 'instance';
-      const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
-      const serialized = localStorage.getItem(key);
-      if(!serialized){
-        Fore.dispatch(this, 'submit-error', { message: `Error reading key ${key} from localstorage` });
-        return;
+      if(this.method === 'get' || this.method === 'consume'){
+        // let data = this._parse(serialized, instance);
+        this.replace = 'instance';
+        const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
+        const serialized = localStorage.getItem(key);
+        if(!serialized){
+          Fore.dispatch(this, 'submit-error', { message: `Error reading key ${key} from localstorage` });
+          return;
+        }
+        let data = this._parse(serialized, instance);
+        this._handleResponse(data);
+        if(this.method === 'consume'){
+          localStorage.removeItem(key);
+        }
+        Fore.dispatch(this, 'submit-done', {});
       }
-      let data = this._parse(serialized, instance);
-      this._handleResponse(data);
-      if(this.method === 'consume'){
+      if(this.method === 'post'){
+        // let data = this._parse(serialized, instance);
+        const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
+        localStorage.setItem(key,serialized);
+        this._handleResponse(instance.instanceData);
+        Fore.dispatch(this, 'submit-done', {});
+      }
+      if(this.method === 'delete'){
+        const key = resolvedUrl.substring(resolvedUrl.indexOf(':')+1);
         localStorage.removeItem(key);
+        const newInst = new DOMParser().parseFromString('<data></data>', 'application/xml');
+        this._handleResponse(newInst);
+        Fore.dispatch(this, 'submit-done', {});
       }
-      Fore.dispatch(this, 'submit-done', {});
+
       return;
     }
 
@@ -182,52 +193,51 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
     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}` });
       Fore.dispatch(this, 'error', { message: `Unknown method ${this.method}` });
       return;
     }
-    const response = await fetch(resolvedUrl, {
-      method: this.method,
-      mode: 'cors',
-      credentials: 'include',
-      headers,
-      body: serialized,
-    });
+    try{
+      const response = await fetch(resolvedUrl, {
+        method: this.method,
+        mode: 'cors',
+        credentials: 'include',
+        headers,
+        body: serialized,
+      });
 
-    if (!response.ok || response.status > 400) {
-      // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
-      Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
-      return;
-    }
+      if (!response.ok || response.status > 400) {
+        // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+        Fore.dispatch(this, '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') ||
-      contentType.startsWith('text/markdown')
-    ) {
-      const text = await response.text();
-      this._handleResponse(text);
-    } else if (contentType.startsWith('application/json')) {
-      const json = await response.json();
-      this._handleResponse(json);
-    } else if (contentType.startsWith('application/xml')) {
-      const text = await response.text();
-      const xml = new DOMParser().parseFromString(text, 'application/xml');
-      this._handleResponse(xml);
-    } else {
-      const blob = await response.blob();
-      this._handleResponse(blob);
-    }
+      const contentType = response.headers.get('content-type').toLowerCase();
+      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')) {
+        const json = await response.json();
+        this._handleResponse(json);
+      } else if (contentType.startsWith('application/xml')) {
+        const text = await response.text();
+        const xml = new DOMParser().parseFromString(text, 'application/xml');
+        this._handleResponse(xml);
+      } else {
+        const blob = await response.blob();
+        this._handleResponse(blob);
+      }
 
-    // this.dispatch('submit-done', {});
-    Fore.dispatch(this, 'submit-done', {});
+      // this.dispatch('submit-done', {});
+      Fore.dispatch(this, 'submit-done', {});
+    } catch (error){
+      Fore.dispatch(this, 'submit-error', {error:error.message});
+    }
   }
 
   _parse(serialized, instance) {
@@ -242,7 +252,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
   }
 
   _serialize(instanceType, relevantNodes) {
-    if (this.method === 'urlencoded-post') {
+    if (this.serialization === 'application/x-www-form-urlencoded') {
       // this.method = 'post';
       const params = new URLSearchParams();
       // console.log('nodes to serialize', relevantNodes);
@@ -267,7 +277,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
     // ### set content-type header according to type of instance
     const instance = this.getInstance();
-    const contentType = Fore.getContentType(instance, this.method);
+    const contentType = Fore.getContentType(instance, this.serialization);
     headers.append('Content-Type', contentType);
     // ### needed to overwrite browsers' setting of 'Accept' header
     if (headers.has('Accept')) {
@@ -340,7 +350,11 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             this,
           );
           console.log('theTarget', theTarget);
-          theTarget.innerHTML = data;
+          if(data.nodeType === Node.DOCUMENT_NODE){
+            theTarget.appendChild( data.firstElementChild);
+          }else{
+            theTarget.innerHTML = data;
+          }
         } else {
           const instanceData = data;
           targetInstance.instanceData = instanceData;

package/src/getInScopeContext.js

@@ -1,106 +1,114 @@
-import { evaluateXPathToFirstNode } from './xpath-evaluation.js';
-import { Fore } from './fore.js';
+import {evaluateXPathToFirstNode} from './xpath-evaluation.js';
+import {Fore} from './fore.js';
 
-import { XPathUtil } from './xpath-util.js';
+import {XPathUtil} from './xpath-util.js';
 
 function _getElement(node) {
-  if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
-    // The context of an attribute is the ref of the element it's defined on
-    return node.ownerElement;
-  }
-
-  if (node.nodeType === Node.ELEMENT_NODE) {
-    // The context of a query should be the element having a ref
-    return node;
-  }
-
-  // For text nodes, just start looking from the parent element
-  return node.parentNode;
+    if (node && node.nodeType && node.nodeType === Node.ATTRIBUTE_NODE) {
+        // The context of an attribute is the ref of the element it's defined on
+        return node.ownerElement;
+    }
+
+    if (node.nodeType === Node.ELEMENT_NODE) {
+        // The context of a query should be the element having a ref
+        return node;
+    }
+
+    // For text nodes, just start looking from the parent element
+    return node.parentNode;
 }
 
 function _getForeContext(node) {
-  return node.closest('fx-fore');
+    return node.closest('fx-fore');
 }
 
 function _getModelInContext(node) {
-  // const ownerForm = node.closest('fx-fore');
-  const ownerForm = _getForeContext(node);
-  return ownerForm.getModel();
+    // const ownerForm = node.closest('fx-fore');
+    const ownerForm = _getForeContext(node);
+    return ownerForm.getModel();
 }
 
 function _getInitialContext(node, ref) {
-  const parentBind = Fore.getClosest('[ref]', node);
-  const localFore = Fore.getClosest('fx-fore', node);
-
-  const model = _getModelInContext(node);
-
-  if (parentBind !== null) {
-    /*
-    make sure that the closest ref belongs to the same fx-fore element
-    */
-    const parentBindFore = parentBind.closest('fx-fore');
-    if (localFore === parentBindFore) {
-      return parentBind.nodeset;
+    const parentBind = Fore.getClosest('[ref]', node);
+    const localFore = Fore.getClosest('fx-fore', node);
+
+    const model = _getModelInContext(node);
+
+    if (parentBind !== null) {
+        /*
+        make sure that the closest ref belongs to the same fx-fore element
+        */
+        const parentBindFore = parentBind.closest('fx-fore');
+        if (localFore === parentBindFore) {
+            return parentBind.nodeset;
+        }
+        return model.getDefaultInstance().getDefaultContext();
     }
-    return model.getDefaultInstance().getDefaultContext();
-  }
 
-  if (XPathUtil.isAbsolutePath(ref)) {
-    const instanceId = XPathUtil.getInstanceId(ref);
-    if (instanceId) {
-      return model.getInstance(instanceId).getDefaultContext();
+    if (XPathUtil.isAbsolutePath(ref)) {
+        const instanceId = XPathUtil.getInstanceId(ref);
+        if (instanceId) {
+            return model.getInstance(instanceId).getDefaultContext();
+        }
+        return model.getDefaultInstance().getDefaultContext();
+    }
+    if (model.getDefaultInstance() !== null && model.inited) {
+        return model.getDefaultInstance().getDefaultContext();
     }
-    return model.getDefaultInstance().getDefaultContext();
-  }
-  if (model.getDefaultInstance() !== null && model.inited) {
-    return model.getDefaultInstance().getDefaultContext();
-  }
-  return [];
+    return [];
 }
 
 export default function getInScopeContext(node, ref) {
-  const parentElement = _getElement(node);
-
-  const repeatItem = Fore.getClosest('fx-repeatitem', parentElement);
-  if (repeatItem) {
-    if (node.nodeName === 'context') {
-      return evaluateXPathToFirstNode(
-        node.nodeValue,
-        repeatItem.nodeset,
-        _getForeContext(parentElement),
-      );
+    const parentElement = _getElement(node);
+
+    if(parentElement.nodeName === 'FX-FORE'){
+        return parentElement.getModel().getDefaultInstance().getDefaultContext();
     }
-    return repeatItem.nodeset;
-  }
-
-  if (parentElement.hasAttribute('context')) {
-    const initialContext = _getInitialContext(parentElement.parentNode, ref);
-    const contextAttr = parentElement.getAttribute('context');
-    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-  }
-
-  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
-    const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-    const contextAttr = node.ownerElement.getAttribute('context');
-    return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-  }
-  if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
-    // Note: do not consider the ref of the owner element since it should not be used to define the
-    // context
-    if (node.ownerElement.hasAttribute('context')) {
-      const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
-      const contextAttr = node.ownerElement.getAttribute('context');
-      return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    const parentBind = Fore.getClosest('[ref]', parentElement.parentNode);
+    if (parentBind && parentBind.nodeName === 'FX-GROUP') {
+        return parentBind.nodeset;
     }
 
-    // Never resolve the context from a ref itself!
-    return _getInitialContext(parentElement.parentNode, ref);
-  }
+    const repeatItem = Fore.getClosest('fx-repeatitem', parentElement);
+    if (repeatItem) {
+        if (node.nodeName === 'context') {
+            return evaluateXPathToFirstNode(
+                node.nodeValue,
+                repeatItem.nodeset,
+                _getForeContext(parentElement),
+            );
+        }
+        return repeatItem.nodeset;
+    }
+
+    if (parentElement.hasAttribute('context')) {
+        const initialContext = _getInitialContext(parentElement.parentNode, ref);
+        const contextAttr = parentElement.getAttribute('context');
+        return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    }
+
+    if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'context') {
+        const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+        const contextAttr = node.ownerElement.getAttribute('context');
+        return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    }
+    if (node.nodeType === Node.ATTRIBUTE_NODE && node.nodeName === 'ref') {
+        // Note: do not consider the ref of the owner element since it should not be used to define the
+        // context
+        if (node.ownerElement.hasAttribute('context')) {
+            const initialContext = _getInitialContext(node.ownerElement.parentNode, ref);
+            const contextAttr = node.ownerElement.getAttribute('context');
+            return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+        }
+
+        // Never resolve the context from a ref itself!
+        return _getInitialContext(parentElement.parentNode, ref);
+    }
 
-  // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
-  //   const initialContext = _getInitialContext(node.parentNode, ref);
-  //   const contextAttr = node.getAttribute('context');
-  //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
-  // }
-  return _getInitialContext(parentElement, ref);
+    // if (node.nodeType === Node.ELEMENT_NODE && node.hasAttribute('context')) {
+    //   const initialContext = _getInitialContext(node.parentNode, ref);
+    //   const contextAttr = node.getAttribute('context');
+    //   return evaluateXPathToFirstNode(contextAttr, initialContext, _getForeContext(parentElement));
+    // }
+    return _getInitialContext(parentElement, ref);
 }

package/src/modelitem.js

@@ -50,8 +50,8 @@ export class ModelItem {
   }
 
   set value(newVal) {
-    console.log('modelitem.setvalue oldVal', this.value);
-    console.log('modelitem.setvalue newVal', newVal);
+    // console.log('modelitem.setvalue oldVal', this.value);
+    // console.log('modelitem.setvalue newVal', newVal);
 
     if (newVal.nodeType === Node.DOCUMENT_NODE) {
       this.node.replaceWith(newVal.firstElementChild);

package/src/relevance.js

@@ -1,6 +1,6 @@
 export class Relevance {
   static selectRelevant(element, type) {
-    console.log('selectRelevant', type);
+    // console.log('selectRelevant', type);
     switch (type) {
       case 'xml':
         return Relevance._relevantXmlNodes(element);

package/src/ui/abstract-control.js

@@ -16,9 +16,32 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     this.required = false;
     this.readonly = false;
     this.widget = null;
+    this.visited = false;
+    this.force = false;
     // this.attachShadow({ mode: 'open' });
   }
 
+
+  // todo: discuss - this is a hack to circumvent that modelItems in toRefresh diverge from the modelItems in
+  // the model in some situations. This code first looks for refresh
+/*
+  getModelItem() {
+    console.log('toRefreshModelItems', this.getOwnerForm().toRefresh);
+    const s = this.modelItem.path;
+    console.log('toRefreshModelItems path', s);
+
+    const toRefresh = this.getOwnerForm().toRefresh;
+    let mi;
+    if(toRefresh){
+      mi = this.getOwnerForm().toRefresh.find(m => m.path === s);
+    }
+
+    return mi? mi: super.getModelItem();
+    // console.log('toRefreshModelItems realitem', mi);
+
+  }
+*/
+
   // eslint-disable-next-line class-methods-use-this
   getWidget() {
     throw new Error('You have to implement the method getWidget!');
@@ -27,7 +50,8 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   /**
    * (re)apply all modelItem state properties to this control. model -> UI
    */
-  async refresh() {
+  async refresh(force) {
+    if(force) this.force=true;
     // console.log('### AbstractControl.refresh on : ', this);
 
     const currentVal = this.value;
@@ -40,6 +64,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     this.oldVal = this.nodeset ? this.nodeset : null;
     this.evalInContext();
 
+    // todo this if should be removed - see above
     if (this.isBound()) {
       // this.control = this.querySelector('#control');
 
@@ -49,6 +74,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       }
 
       this.modelItem = this.getModelItem();
+      // console.log('refresh modelItem', this.modelItem);
 
       if (this.modelItem instanceof ModelItem) {
         // console.log('### XfAbstractControl.refresh modelItem : ', this.modelItem);
@@ -94,13 +120,19 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
 
         // if(!this.closest('fx-fore').ready) return; // state change event do not fire during init phase (initial refresh)
         if (!this.getOwnerForm().ready) return; // state change event do not fire during init phase (initial refresh)
-        if (currentVal !== this.value) {
-          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path });
+        if (currentVal !== this.value ) {
+          // todo: discuss how to prevent unnecessary/unwanted value-changes e.g. when repeatitems are inserted
+        // if (currentVal !== this.value && this.visited) {
+          Fore.dispatch(this, 'value-changed', { path: this.modelItem.path , value:this.modelItem.value});
         }
       }
     }
   }
 
+  refreshFromModelItem(modelItem){
+
+  }
+
   /**
    *
    * @returns {Promise<void>}
@@ -135,24 +167,71 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
   handleRequired() {
     // console.log('mip required', this.modelItem.required);
     this.widget = this.getWidget();
-    // if (this.required !== this.modelItem.required) {
+
+    if(!this.modelItem.required){
+      this.widget.removeAttribute('required');
+      this.removeAttribute('required');
+      if (this.isRequired() !== this.modelItem.required){
+        this._dispatchEvent('optional');
+      }
+      return;
+    }
+
+    // ### modelItem is required
+    if (this.visited || this.force) {
+      if (this.modelItem.value === '') {
+        this.classList.add('isEmpty');
+        this._toggleValid(false);
+      } else {
+        this.classList.remove('isEmpty');
+        this._toggleValid(true);
+      }
+    }
+    this.widget.setAttribute('required', '');
+    this.setAttribute('required', '');
     if (this.isRequired() !== this.modelItem.required) {
-      if (this.modelItem.required) {
-        if (this.getOwnerForm().ready){
-          if(this.widget.value === ''){
-            this.classList.add('isRequiredFalse');
-          }else{
-            this.classList.remove('isRequiredFalse');
-          }
+      this._dispatchEvent('required');
+    }
+
+/*
+    if (this.isRequired() !== this.modelItem.required) {
+      this._updateRequired();
+    }
+*/
+  }
+
+
+  _updateRequired() {
+    if (this.modelItem.required) {
+      // if (this.getOwnerForm().ready){
+      if (this.visited || this.force) {
+      // if (this.visited ) {
+      //   if (this.widget.value === '') {
+        if (this.modelItem.value === '') {
+          this.classList.add('isEmpty');
+          this._toggleValid(false);
+        } else {
+          this.classList.remove('isEmpty');
+          this._toggleValid(true);
         }
-        this.widget.setAttribute('required', '');
-        this.setAttribute('required', '');
-        this._dispatchEvent('required');
-      } else {
-        this.widget.removeAttribute('required');
-        this.removeAttribute('required');
-        this._dispatchEvent('optional');
       }
+      this.widget.setAttribute('required', '');
+      this.setAttribute('required', '');
+      this._dispatchEvent('required');
+    } else {
+      this.widget.removeAttribute('required');
+      this.removeAttribute('required');
+      this._dispatchEvent('optional');
+    }
+  }
+
+  _toggleValid(valid){
+    if(valid){
+      this.removeAttribute('invalid');
+      this.setAttribute('valid','');
+    }else{
+      this.removeAttribute('valid');
+      this.setAttribute('invalid','');
     }
   }
 
@@ -177,28 +256,35 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
     // console.log('mip valid', this.modelItem.required);
     const alert = this.querySelector('fx-alert');
 
+    const mi = this.getModelItem();
+    console.log('late modelItem', mi);
     if (this.isValid() !== this.modelItem.constraint) {
       if (this.modelItem.constraint) {
-        if (alert) alert.style.display = 'none';
+        // if (alert) alert.style.display = 'none';
         this._dispatchEvent('valid');
+        this.setAttribute('valid','');
         this.removeAttribute('invalid');
       } else {
         this.setAttribute('invalid', '');
+        this.removeAttribute('valid');
         // ### constraint is invalid - handle alerts
+/*
         if (alert) {
           alert.style.display = 'block';
         }
+*/
         if (this.modelItem.alerts.length !== 0) {
-          const { alerts } = this.modelItem;
-          // console.log('alerts from bind: ', alerts);
 
           const controlAlert = this.querySelector('fx-alert');
           if (!controlAlert) {
+            const { alerts } = this.modelItem;
+            // console.log('alerts from bind: ', alerts);
             alerts.forEach(modelAlert => {
               const newAlert = document.createElement('fx-alert');
+              // const newAlert = document.createElement('span');
               newAlert.innerHTML = modelAlert;
               this.appendChild(newAlert);
-              newAlert.style.display = 'block';
+              // newAlert.style.display = 'block';
             });
           }
         }

package/src/ui/fx-alert.js

@@ -13,7 +13,6 @@ export class FxAlert extends AbstractControl {
         font-size: 0.8em;
         font-weight: 400;
         color: red;
-        display: none;
       }
     `;