@jinntec/fore 2.4.0 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {

package/src/fore.js

@@ -300,33 +300,29 @@ export class Fore {
       const { children } = startElement;
       if (children) {
         for (const element of Array.from(children)) {
-          if (element.nodeName.toUpperCase() === 'FX-FORE') {
-            break;
-          }
-          if (Fore.isUiElement(element.nodeName)) {
-            /**
-             * @type {import('./ForeElementMixin.js').default}
-             */
-            const foreElement = element;
-
-            if (typeof foreElement.refresh === 'function') {
-              if (
-                force &&
-                typeof force === 'object' &&
-                force.reason === 'index-function' &&
-                foreElement._dependencies.isInvalidatedByIndexFunction()
-              ) {
-                element.refresh(force);
-                continue;
-              } else if (force === true) {
-                element.refresh(force);
-              }
+            if (element.nodeName.toUpperCase() === 'FX-FORE') {
+              break;
+            }
+            if (Fore.isUiElement(element.nodeName) && typeof element.refresh === 'function') {
+                /**
+                 * @type {import('./ForeElementMixin.js').default}
+                 */
+                if (
+                    force &&
+                    typeof force === 'object' &&
+                    force.reason === 'index-function' &&
+                    element._dependencies.isInvalidatedByIndexFunction()
+                ) {
+                    element.refresh(force);
+                    continue;
+                } else if (force === true) {
+                    element.refresh(force);
+                }
+                // console.log('refreshing', element, element?.ref);
+                // console.log('refreshing ',element);
+            } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
+                Fore.refreshChildren(element, force);
             }
-            // console.log('refreshing', element, element?.ref);
-            // console.log('refreshing ',element);
-          } else if (element.nodeName.toUpperCase() !== 'FX-MODEL') {
-            Fore.refreshChildren(element, force);
-          }
         }
       }
       resolve('done');

package/src/fx-model.js

@@ -416,10 +416,12 @@ export class FxModel extends HTMLElement {
             modelItem.required = compute;
             this.formElement.addToRefresh(modelItem); // let fore know that modelItem needs refresh
             if (!modelItem.node.textContent) {
+/*
               console.log(
                 'node is required but has no value ',
                 XPathUtil.getDocPath(modelItem.node),
               );
+*/
               valid = false;
             }
             // if (!compute) valid = false;
@@ -436,7 +438,7 @@ export class FxModel extends HTMLElement {
         }
       }
     });
-    // console.log('modelItems after revalidate: ', this.modelItems);
+    console.log('modelItems after revalidate: ', this.modelItems);
     return valid;
   }
 
@@ -508,7 +510,7 @@ export class FxModel extends HTMLElement {
           ? this.fore.parentNode.host.closest('fx-fore')
           : this.fore.parentNode.closest('fx-fore');
       if (parentFore) {
-        console.log('shared instances from parent', this.parentNode.id);
+        // console.log('shared instances from parent', this.parentNode.id);
         const parentInstances = parentFore.getModel().instances;
         const shared = parentInstances.filter(shared => shared.hasAttribute('shared'));
         found = shared.find(found => found.id === id);

package/src/fx-submission.js

@@ -50,8 +50,8 @@ export class FxSubmission extends ForeElementMixin {
       ? this.getAttribute('mediatype')
       : 'application/xml';
 
-    this.responseMediatype = this.hasAttribute('response-mediatype')
-      ? this.getAttribute('response-mediatype')
+    this.responseMediatype = this.hasAttribute('responsemediatype')
+      ? this.getAttribute('responsemediatype')
       : this.mediatype;
     this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
 
@@ -83,7 +83,12 @@ export class FxSubmission extends ForeElementMixin {
   }
 
   async _submit() {
-    // console.log('submitting....', this.getAttribute('id'));
+    console.log('submitting....', this.getAttribute('id'));
+    console.info(
+        `%csubmitting #${this.id}`,
+        'background:yellow; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+    );
+
     this.evalInContext();
     const model = this.getModel();
 
@@ -232,6 +237,11 @@ export class FxSubmission extends ForeElementMixin {
 
       if (!response.ok || response.status > 400) {
         // this.dispatch('submit-error', { message: `Error while submitting ${this.id}` });
+        console.info(
+            `%csubmit-error #${this.id}`,
+            'background:red; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        );
+
         Fore.dispatch(this, 'submit-error', { message: `Error while submitting ${this.id}` });
         return;
       }
@@ -255,6 +265,11 @@ export class FxSubmission extends ForeElementMixin {
       // this.dispatch('submit-done', {});
       // console.log(`### <<<<< ${this.id} submit-done >>>>>`);
       Fore.dispatch(this, 'submit-done', {});
+      console.info(
+          `%csubmit-done #${this.id}`,
+          'background:green; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+      );
+
     } catch (error) {
       Fore.dispatch(this, 'submit-error', { error: error.message });
     } finally {
@@ -354,13 +369,6 @@ export class FxSubmission extends ForeElementMixin {
   _handleResponse(data, resolvedUrl, contentType) {
     // console.log('_handleResponse ', data);
 
-    /*
-        // ### responses need to be handled depending on their type.
-        if(this.type === 'json'){
-
-        }
-    */
-
     const targetInstance = this._getTargetInstance();
 
     /*
@@ -386,16 +394,26 @@ export class FxSubmission extends ForeElementMixin {
     if (this.replace === 'instance') {
       if (targetInstance) {
         if (this.targetref) {
+
           const [theTarget] = evaluateXPath(
-            this.targetref,
-            targetInstance.instanceData.firstElementChild,
-            this,
+              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);
+          if(this.responseMediatype === 'application/xml' || this.responseMediatype === 'text/html'){
+            const clone = data.firstElementChild;
+            const parent = theTarget.parentNode;
+            parent.replaceChild(clone, theTarget);
+            console.log('finally ', parent);
+          }
+          if(this.responseMediatype.startsWith('text/')){
+            theTarget.textContent = data;
+          }
+          if(this.responseMediatype === 'application/json'){
+            console.warn('targetref is not supported for application/json responses')
+          }
+
         } else if (this.into) {
           const [theTarget] = evaluateXPath(
             this.into,

package/src/ui/fx-switch.js

@@ -20,6 +20,7 @@ class FxSwitch extends FxContainer {
     this.formerCase = {};
     this.selectedCase = null;
     this.cases = null;
+    this.visitedResetted = false;
   }
 
   connectedCallback() {
@@ -74,10 +75,13 @@ class FxSwitch extends FxContainer {
   }
 
   _resetVisited() {
+    if(this.visitedResetted) return;
+
     const visited = this.selectedCase.querySelectorAll('.visited');
     Array.from(visited).forEach(v => {
       v.classList.remove('visited');
     });
+    this.visitedResetted = true;
   }
 
   /**