@jinntec/fore 1.4.0 → 1.6.0

package/src/actions/fx-message.js

@@ -1,6 +1,6 @@
 import { AbstractAction } from './abstract-action.js';
-import {evaluateXPathToString} from "../xpath-evaluation";
-import {Fore} from "../fore";
+import {evaluateXPathToString} from "../xpath-evaluation.js";
+import {Fore} from "../fore.js";
 import getInScopeContext from '../getInScopeContext.js';
 
 /**
@@ -16,10 +16,24 @@ class FxMessage extends AbstractAction {
     this.attachShadow({ mode: 'open' });
   }
 
+	static get properties () {
+		return {
+			...AbstractAction.properties,
+			modelItem:undefined,
+			messageTextContent: {
+				type: String,
+				get value() {
+					return "here!";
+				}
+			}
+		};
+	}
+
   connectedCallback() {
     super.connectedCallback();
     this.event = this.hasAttribute('event') ? this.getAttribute('event') : '';
     this.level = this.hasAttribute('level') ? this.getAttribute('level') : 'ephemeral';
+    this.message = '';
 
 	this.messageTextContent = this.textContent;
     const style = `
@@ -35,10 +49,12 @@ class FxMessage extends AbstractAction {
     `;
   }
 
+/*
   disconnectedCallback() {
     // super.disconnectedCallback();
     this.targetElement.removeEventListener(this.event, e => this.execute(e));
   }
+*/
 
   // eslint-disable-next-line class-methods-use-this
   renderHTML() {
@@ -49,19 +65,18 @@ class FxMessage extends AbstractAction {
 
   async perform() {
     super.perform();
-    let message;
     if (this.hasAttribute('value')) {
-      message = this._getValue();
+      this.message = this._getValue();
     } else {
 		this.getOwnerForm().evaluateTemplateExpression(this.messageTextContent, this.firstChild);
-      message = this.textContent;
+      this.message = this.textContent;
     }
 
     this.dispatchEvent(
       new CustomEvent('message', {
-        composed: true,
+        composed: false,
         bubbles: true,
-        detail: { level: this.level, message },
+        detail: { level: this.level, message:this.message },
       }),
     );
   }

package/src/actions/fx-refresh.js

@@ -1,6 +1,7 @@
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
 import {resolveId} from "../xpath-evaluation.js";
+import {XPathUtil} from "../xpath-util.js";
 
 /**
  * `fx-refresh`
@@ -10,8 +11,17 @@ import {resolveId} from "../xpath-evaluation.js";
  */
 class FxRefresh extends AbstractAction {
   async perform() {
+    this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable:true,
+          detail: { action: this, event:this.event},
+        }),
+    );
+
     if (this.hasAttribute('self')) {
-      const control = Fore.getClosest('fx-control', this);
+      const control = XPathUtil.getClosest('fx-control', this);
       if (control) {
         control.refresh();
         return;

package/src/actions/fx-reload.js

@@ -1,6 +1,5 @@
 import { Fore } from '../fore.js';
 import { AbstractAction } from './abstract-action.js';
-import { resolveId } from '../xpath-evaluation.js';
 
 /**
  * `fx-reload`
@@ -13,13 +12,24 @@ import { resolveId } from '../xpath-evaluation.js';
 export class FxReload extends AbstractAction {
 
   connectedCallback() {
+    if(super.connectedCallback){
     super.connectedCallback();
-    this.addEventListener('reload', event => {
+    }
+    this.addEventListener('reload', () => {
       window.location.reload();
     },{once:true});
   }
 
   async perform() {
+    this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable:true,
+          detail: { action: this, event:this.event},
+        }),
+    );
+
     Fore.dispatch(this, 'reload', {});
   }
 }

package/src/actions/fx-replace.js

@@ -2,7 +2,6 @@
 import '../fx-model.js';
 import { AbstractAction } from './abstract-action.js';
 import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
-import getInScopeContext from "../getInScopeContext";
 
 /**
  * `fx-replace` - replaces the node referred to with 'ref' with node referred to with 'with' attribute.
@@ -34,7 +33,6 @@ export default class FxReplace extends AbstractAction {
 
   async perform() {
     super.perform();
-    console.log('replace action');
     // console.log('replace action variables', this.inScopeVariables);
     // if (!this.nodeset) {
     //   return;
@@ -46,8 +44,12 @@ export default class FxReplace extends AbstractAction {
     this.replace(this.nodeset, target);
   }
 
+  actionPerformed() {
+    this.getModel().rebuild();
+    super.actionPerformed();
+  }
+
   replace(toReplace, replaceWith) {
-    console.log('replace', toReplace, replaceWith);
     if (!toReplace || !replaceWith) return; // bail out silently
     if (!toReplace.nodeName || !replaceWith.nodeName) {
       console.warn('fx-replace: one argument is not a node');
@@ -58,7 +60,6 @@ export default class FxReplace extends AbstractAction {
       const { ownerElement } = toReplace;
       ownerElement.setAttribute(replaceWith.nodeName, replaceWith.textContent);
       ownerElement.removeAttribute(toReplace.nodeName);
-      console.log('owner', ownerElement);
     } else if (toReplace.nodeType === Node.ELEMENT_NODE) {
       const cloned = replaceWith.cloneNode(true);
       toReplace.replaceWith(cloned);

package/src/actions/fx-reset.js

@@ -0,0 +1,48 @@
+import {Fore} from '../fore.js';
+import {AbstractAction} from './abstract-action.js';
+
+/**
+ * `fx-reset`
+ * resets an instance to use inline template data
+ *
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxReset extends AbstractAction {
+    static get properties() {
+        return {
+            ...super.properties,
+            instance: {
+                type: String,
+            },
+        };
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.instance = this.getAttribute('instance');
+        if (!this.instance) {
+            Fore.dispatch(this, 'error', {message: 'instance does not exist'});
+        }
+    }
+
+    async perform() {
+        this.dispatchEvent(
+            new CustomEvent('execute-action', {
+                composed: true,
+                bubbles: true,
+                cancelable: true,
+                detail: {action: this, event: this.event},
+            }),
+        );
+
+        const model = this.getModel();
+        const data = model.getInstance(this.instance);
+        data.reset();
+        this.needsUpdate = true;
+    }
+}
+
+if (!customElements.get('fx-reset')) {
+    window.customElements.define('fx-reset', FxReset);
+}

package/src/actions/fx-return.js

@@ -22,7 +22,6 @@ export class FxReturn extends AbstractAction {
 
   async perform() {
     super.perform();
-    console.log('performing return with nodes', this.nodeset);
 
     /*
     ### note that this event does not use Fore.dispatch as the event uses 'composed:true' to let the event travel

package/src/actions/fx-send.js

@@ -13,6 +13,8 @@ class FxSend extends AbstractAction {
   constructor() {
     super();
     this.value = '';
+    this.url = null;
+    this.target=null;
   }
 
   connectedCallback() {
@@ -20,12 +22,16 @@ class FxSend extends AbstractAction {
     super.connectedCallback();
     // console.log('connectedCallback ', this);
     this.submission = this.getAttribute('submission');
+    this.url = this.hasAttribute('url') ? this.getAttribute('url'):null;
+    this.target = this.hasAttribute('target') ? this.getAttribute('target'):null;
   }
 
   async perform() {
     super.perform();
 
     console.log('submitting ', this.submission);
+    // reset CSS class that signalled validation error during last submit
+    this.getOwnerForm().classList.remove('submit-validation-failed');
     // console.log('submitting model', this.getModel());
 
     // if not exists signal error
@@ -34,6 +40,7 @@ class FxSend extends AbstractAction {
     // const submission = fore.querySelector(`#${this.submission}`);
     const submission = this.getModel().querySelector(`#${this.submission}`);
     if (submission === null) {
+/*
       this.dispatchEvent(
         new CustomEvent('error', {
           composed: true,
@@ -41,10 +48,41 @@ class FxSend extends AbstractAction {
           detail: { message: `fx-submission element with id: '${this.submission}' not found` },
         }),
       );
-      throw new Error(`submission with id: ${this.submission} not found`);
+*/
+      this.dispatchEvent(
+          new CustomEvent('log', {
+            composed: false,
+            bubbles: true,
+            cancelable:true,
+            detail: { id:this.id, message: `fx-submission element with id: '${this.submission}' not found`, level:'Error'},
+          }),
+      );
+      return;
+
+      // throw new Error(`submission with id: ${this.submission} not found`);
+    }
+
+    if(this.url){
+      const resolved = this.evaluateAttributeTemplateExpression(this.url,this);
+      submission.parameters.set('url',resolved);
     }
+    if(this.target){
+      const resolved = this.evaluateAttributeTemplateExpression(this.target,this);
+      submission.parameters.set('target',resolved);
+    }
+
+
+/*
+    Array.from(this.attributes).forEach( attr => {
+      if(attr.nodeName !== 'submission'){
+        const resolved = this.evaluateAttributeTemplateExpression(attr,this);
+        submission.parameters.set(attr.nodeName,resolved);
+      }
+    });
+*/
+
     console.log('submission', submission);
-      await submission.submit();
+    await submission.submit();
 /*
     if(submission.replace === 'instance'){
       this.getModel().updateModel();

package/src/actions/fx-setfocus.js

@@ -1,5 +1,4 @@
-import {AbstractAction} from "./abstract-action";
-import {resolveId} from "../xpath-evaluation";
+import {AbstractAction} from "./abstract-action.js";
 
 /**
  * `fx-setfocus`
@@ -9,21 +8,37 @@ import {resolveId} from "../xpath-evaluation";
  */
 export class FxSetfocus extends AbstractAction {
   connectedCallback() {
+        if (super.connectedCallback) {
       super.connectedCallback();
+        }
       this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
   }
 
   async perform() {
-      console.log('setting focus', this.control);
+
+        this.dispatchEvent(
+            new CustomEvent('execute-action', {
+                composed: true,
+                bubbles: true,
+                cancelable: true,
+                detail: {action: this, event: this.event},
+            }),
+        );
+
       // super.perform();
       const selector = '#'+this.control;
 
-      let targetElement = this.getOwnerForm().querySelector(selector);;
+
+        let targetElement = document.querySelector(selector);
+
+      if(!targetElement) {
+          console.warn('targetElement of setfocus action does not exist (yet)', selector);
+          return;
+      }
 
       // ### focus action is itself hosted within a repeat
-      const parentIItem = this.closest('fx-repeatitem');
+      const parentIItem = targetElement.closest('fx-repeatitem');
       if(parentIItem){
-          console.log('parentRepeat',parentIItem);
           targetElement = parentIItem.querySelector(selector);
           this._focus(targetElement);
           return;
@@ -45,9 +60,12 @@ export class FxSetfocus extends AbstractAction {
   }
 
     _focus(targetElement){
-        if(targetElement){
+        if(targetElement && typeof targetElement.getWidget === 'function'){
             targetElement.getWidget().focus();
         }
+        if(targetElement && targetElement.nodeType === Node.ELEMENT_NODE){
+            targetElement.click();
+        }
     }
 
     _select(targetElement){

package/src/actions/fx-setvalue.js

@@ -2,6 +2,7 @@
 import '../fx-model.js';
 import {AbstractAction} from './abstract-action.js';
 import {evaluateXPath} from '../xpath-evaluation.js';
+import {Fore} from '../fore.js';
 
 /**
  * `fx-setvalue`
@@ -50,9 +51,7 @@ export default class FxSetvalue extends AbstractAction {
         } else {
             value = '';
         }
-        console.log('value', value);
-        if (value.nodeType === Node.ATTRIBUTE_NODE) {
-            // console.log('value', value.nodeValue);
+        if (value?.nodeType && value.nodeType === Node.ATTRIBUTE_NODE) {
             value = value.nodeValue;
         }
         const mi = this.getModelItem();
@@ -62,12 +61,41 @@ export default class FxSetvalue extends AbstractAction {
 
     }
 
+    /**
+     * need to overwrite default dispatchExecute to do it ourselves. This is necessary for tracking control value changes
+     * which call setvalue directly without perform().
+     */
+    dispatchExecute() {}
+
     setValue(modelItem, newVal) {
         const item = modelItem;
         if (!item) return;
 
         if (item.value !== newVal) {
-            item.value = newVal;
+            // const path = XPathUtil.getPath(modelItem.node);
+            const path = Fore.getDomNodeIndexString(modelItem.node)
+
+            const ev = this.event;
+            const targetElem = this;
+            this.dispatchEvent(
+                new CustomEvent('execute-action', {
+                    composed: true,
+                    bubbles: true,
+                    cancelable:true,
+                    detail: { action: targetElem, event:ev, value:newVal, path:path},
+                }),
+            );
+
+            if(newVal?.nodeType){
+                if(newVal.nodeType === Node.ELEMENT_NODE){
+                    item.value = newVal.textContent;
+                }
+                if(newVal.nodeType === Node.ATTRIBUTE_NODE){
+                    item.value = newVal.getValue()
+                }
+            }else{
+                item.value = newVal;
+            }
             this.getModel().changed.push(modelItem);
             this.needsUpdate = true;
         }

package/src/actions/fx-show.js

@@ -3,14 +3,17 @@ import { FxAction } from './fx-action.js';
 import { resolveId } from '../xpath-evaluation.js';
 
 /**
- * `fx-confirm`
+ * `fx-show`
  * Displays a simple confirmation before actually executing the nested actions.
  *
  * @customElement
- * @demo demo/project.html
+ * @event fx-show dispatched when dialog is shown
  */
 export class FxShow extends FxAction {
   connectedCallback() {
+    if (super.connectedCallback) {
+    super.connectedCallback();
+    }
     this.dialog = this.getAttribute('dialog');
     if (!this.dialog) {
       Fore.dispatch(this, 'error', { message: 'dialog does not exist' });
@@ -18,6 +21,15 @@ export class FxShow extends FxAction {
   }
 
   async perform() {
+    this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable:true,
+          detail: { action: this, event:this.event},
+        }),
+    );
+
     const targetDlg = resolveId(this.dialog,this);
     if(!targetDlg){
       console.error('target dialog with given id does not exist',this.dialog);

package/src/actions/fx-toggle.js

@@ -21,7 +21,6 @@ class FxToggle extends AbstractAction {
 
   async perform() {
     super.perform();
-    console.log('### fx-toggle.execute ');
     if (this.case) {
       const ownerForm = this.getOwnerForm();
       const caseElement = ownerForm.querySelector(`#${this.case}`);

package/src/actions/fx-update.js

@@ -8,6 +8,15 @@ import { AbstractAction } from './abstract-action.js';
  */
 class FxUpdate extends AbstractAction {
   async perform() {
+    this.dispatchEvent(
+        new CustomEvent('execute-action', {
+          composed: true,
+          bubbles: true,
+          cancelable:true,
+          detail: { action: this, event:this.event},
+        }),
+    );
+
     this.getModel().updateModel();
   }
 }

package/src/events.js

@@ -1,5 +1,4 @@
 export function leadingDebounce(caller, func, timeout = 300){
-    console.log('debouncing', func);
     let timer;
     return (...args) => {
         if (!timer) {