@jinntec/fore 2.1.1 → 2.3.0

package/src/actions/fx-replace.js

@@ -40,7 +40,6 @@ export default class FxReplace extends AbstractAction {
     const target = evaluateXPathToFirstNode(this.with, this.nodeset, this);
     if (!target) return;
 
-
     this.replace(this.nodeset, target);
   }
 

package/src/actions/fx-reset.js

@@ -1,5 +1,5 @@
-import {Fore} from '../fore.js';
-import {AbstractAction} from './abstract-action.js';
+import { Fore } from '../fore.js';
+import { AbstractAction } from './abstract-action.js';
 
 /**
  * `fx-reset`
@@ -9,40 +9,40 @@ import {AbstractAction} from './abstract-action.js';
  * @demo demo/project.html
  */
 export class FxReset extends AbstractAction {
-    static get properties() {
-        return {
-            ...super.properties,
-            instance: {
-                type: String,
-            },
-        };
-    }
+  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'});
-        }
+  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},
-            }),
-        );
+  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;
-    }
+    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);
+  window.customElements.define('fx-reset', FxReset);
 }

package/src/actions/fx-send.js

@@ -1,12 +1,10 @@
 import '../fx-model.js';
 import '../fx-submission.js';
 import { AbstractAction } from './abstract-action.js';
-import {XPathUtil} from "../xpath-util.js";
+import { XPathUtil } from '../xpath-util.js';
 
 /**
- * `fx-send` - finds and activates a `fx-submission` element.
- *
- * extension idea: allow params to be passed as with dispatch action which can be used to set properties on submission attributes
+ * `fx-send` - finds and activates a `fx-submission` or a `fx-connection` element.
  *
  * @customElement
  */
@@ -15,7 +13,7 @@ class FxSend extends AbstractAction {
     super();
     this.value = '';
     this.url = null;
-    this.target=null;
+    this.target = null;
   }
 
   connectedCallback() {
@@ -23,79 +21,88 @@ 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;
+    this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
+    this.target = this.hasAttribute('target') ? this.getAttribute('target') : null;
+    this.connection = this.hasAttribute('connection') ? this.getAttribute('connection') : 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
-    // todo: instead of relying on model just use pure dom to find submission as the context could be broken due to a delete action
-    // const fore = this.closest('fx-fore');
-    // const submission = fore.querySelector(`#${this.submission}`);
+    if (this.connection) {
+      const connectionElement = this.getModel().querySelector(`#${this.connection}`);
+      if (connectionElement === null) {
+        this.dispatchEvent(
+          new CustomEvent('error', {
+            composed: false,
+            bubbles: true,
+            cancelable: true,
+            detail: {
+              id: this.id,
+              origin: this,
+              message: `<fx-connection id="${this.connection}"> not found`,
+              expr: XPathUtil.getDocPath(this),
+              level: 'Error',
+            },
+          }),
+        );
+        return;
+      }
+      this._emitToChannel();
+      return;
+    }
+
     const submission = this.getModel().querySelector(`#${this.submission}`);
     if (submission === null) {
-/*
       this.dispatchEvent(
         new CustomEvent('error', {
-          composed: true,
+          composed: false,
           bubbles: true,
-          detail: { message: `fx-submission element with id: '${this.submission}' not found - ${XPathUtil.getDocPath(this)}` },
+          cancelable: true,
+          detail: {
+            id: this.id,
+            origin: this,
+            message: `<fx-submission id="${this.submission}"> not found`,
+            expr: XPathUtil.getDocPath(this),
+            level: 'Error',
+          },
         }),
       );
-*/
-      this.dispatchEvent(
-          new CustomEvent('error', {
-            composed: false,
-            bubbles: true,
-            cancelable:true,
-            detail: { id:this.id,
-                      origin: this,
-                      message: `<fx-submission id="${this.submission}"> not found`,
-                      expr:XPathUtil.getDocPath(this),
-                      level:'Error'},
-          }),
-      );
       return;
 
       // throw new Error(`submission with id: ${this.submission} not found`);
     }
+    // console.log('submission', submission);
 
-    if(this.url){
-      const resolved = this.evaluateAttributeTemplateExpression(this.url,this);
-      submission.parameters.set('url',resolved);
+    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);
+    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();
-/*
-    if(submission.replace === 'instance'){
-      this.getModel().updateModel();
-      this.getOwnerForm().refresh();
-    }
-*/
+    /*
+            if(submission.replace === 'instance'){
+              this.getModel().updateModel();
+              this.getOwnerForm().refresh();
+            }
+        */
     // if not of type fx-submission signal error
   }
+
+  _emitToChannel() {
+    const channel = this.getModel().querySelector(`#${this.connection}`);
+    if (channel === null) {
+      return;
+    }
+    channel.send();
+  }
 }
 
 if (!customElements.get('fx-send')) {

package/src/actions/fx-setattribute.js

@@ -1,9 +1,9 @@
 // import { FxAction } from './fx-action.js';
 import '../fx-model.js';
-import {AbstractAction} from './abstract-action.js';
-import {evaluateXPathToString} from '../xpath-evaluation.js';
-import {Fore} from '../fore.js';
-import getInScopeContext from "../getInScopeContext";
+import { AbstractAction } from './abstract-action.js';
+import { evaluateXPathToString } from '../xpath-evaluation.js';
+import { Fore } from '../fore.js';
+import getInScopeContext from '../getInScopeContext';
 
 /**
  * `fx-setattribute` allows to create and set an attribute value in the data.
@@ -11,58 +11,57 @@ import getInScopeContext from "../getInScopeContext";
  * @customElement
  */
 export default class FxSetattribute extends AbstractAction {
-    static get properties() {
-        return {
-            ...super.properties,
-            ref: {
-                type: String,
-            },
-            attrName: {
-                type: String,
-            },
-            attrValue:{
-                type: String
-            }
-        };
-    }
-
-    constructor() {
-        super();
-        this.ref = '';
-        this.attrName = '';
-        this.attrValue = '';
-    }
+  static get properties() {
+    return {
+      ...super.properties,
+      ref: {
+        type: String,
+      },
+      attrName: {
+        type: String,
+      },
+      attrValue: {
+        type: String,
+      },
+    };
+  }
 
-    connectedCallback() {
-        if (super.connectedCallback) {
-            super.connectedCallback();
-        }
+  constructor() {
+    super();
+    this.ref = '';
+    this.attrName = '';
+    this.attrValue = '';
+  }
 
-        if (this.hasAttribute('ref')) {
-            this.ref = this.getAttribute('ref');
-        } else {
-            throw new Error('fx-setvalue must specify a "ref" attribute');
-        }
-        this.attrName = this.hasAttribute('name') ? this.getAttribute('name') : null;
-        this.attrValue = this.hasAttribute('value') ? this.getAttribute('value') : '';
-        if(!this.attrName){
-            Fore.dispatch('this', 'error',{message:'name or value not specified'});
-        }
+  connectedCallback() {
+    if (super.connectedCallback) {
+      super.connectedCallback();
     }
 
-    async perform() {
-        super.perform();
-        const mi = this.getModelItem();
-        if(mi.node.nodeType !== Node.ELEMENT_NODE){
-            Fore.dispatch('this', 'error',{message:'referenced item is not an element'});
-            return;
-        }
-        mi.node.setAttribute(this.attrName, this.attrValue);
-        this.needsUpdate = true;
+    if (this.hasAttribute('ref')) {
+      this.ref = this.getAttribute('ref');
+    } else {
+      throw new Error('fx-setvalue must specify a "ref" attribute');
     }
+    this.attrName = this.hasAttribute('name') ? this.getAttribute('name') : null;
+    this.attrValue = this.hasAttribute('value') ? this.getAttribute('value') : '';
+    if (!this.attrName) {
+      Fore.dispatch('this', 'error', { message: 'name or value not specified' });
+    }
+  }
 
+  async perform() {
+    super.perform();
+    const mi = this.getModelItem();
+    if (mi.node.nodeType !== Node.ELEMENT_NODE) {
+      Fore.dispatch('this', 'error', { message: 'referenced item is not an element' });
+      return;
+    }
+    mi.node.setAttribute(this.attrName, this.attrValue);
+    this.needsUpdate = true;
+  }
 }
 
 if (!customElements.get('fx-setattribute')) {
-    window.customElements.define('fx-setattribute', FxSetattribute);
+  window.customElements.define('fx-setattribute', FxSetattribute);
 }

package/src/actions/fx-setfocus.js

@@ -1,5 +1,5 @@
-import {AbstractAction} from "./abstract-action.js";
-import {Fore} from "../fore";
+import { AbstractAction } from './abstract-action.js';
+import { Fore } from '../fore';
 
 /**
  * `fx-setfocus`
@@ -9,79 +9,75 @@ import {Fore} from "../fore";
  */
 export class FxSetfocus extends AbstractAction {
   connectedCallback() {
-        if (super.connectedCallback) {
+    if (super.connectedCallback) {
       super.connectedCallback();
-        }
-      this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
+    }
+    this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
   }
 
   async perform() {
+    this.dispatchEvent(
+      new CustomEvent('execute-action', {
+        composed: true,
+        bubbles: true,
+        cancelable: true,
+        detail: { action: this, event: this.event },
+      }),
+    );
 
-        this.dispatchEvent(
-            new CustomEvent('execute-action', {
-                composed: true,
-                bubbles: true,
-                cancelable: true,
-                detail: {action: this, event: this.event},
-            }),
-        );
-
-      // super.perform();
-      const selector = '#'+this.control;
+    // super.perform();
+    const selector = `#${this.control}`;
 
+    let targetElement = document.querySelector(selector);
 
-        let targetElement = document.querySelector(selector);
-
-      if(!targetElement) {
-          Fore.dispatch(this, 'error', {
-              origin: this,
-              message: `Instance '${this.control}' not found`,
-              level:'Error'
-          });
-          return;
-      }
+    if (!targetElement) {
+      Fore.dispatch(this, 'error', {
+        origin: this,
+        message: `Instance '${this.control}' not found`,
+        level: 'Error',
+      });
+      return;
+    }
 
-      // ### focus action is itself hosted within a repeat
-      const parentIItem = targetElement.closest('fx-repeatitem');
-      if(parentIItem){
-          targetElement = parentIItem.querySelector(selector);
-          this._focus(targetElement);
-          // return;
-      }
+    // ### focus action is itself hosted within a repeat
+    const parentIItem = targetElement.closest('fx-repeatitem');
+    if (parentIItem) {
+      targetElement = parentIItem.querySelector(selector);
+      this._focus(targetElement);
+      // return;
+    }
 
-      // ### the target element is hosted within a repeat
-      const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
-      if(repeatitem){
-        // targetElement is repeated
-        // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
-        const repeat = repeatitem.parentNode;
-        targetElement = repeat.querySelector('[repeat-index] ' + selector);
-      }
+    // ### the target element is hosted within a repeat
+    const repeatitem = targetElement.closest('fx-repeatitem, .fx-repeatitem');
+    if (repeatitem) {
+      // targetElement is repeated
+      // get the active repeatitem (only for fx-repeat for now - todo: support repeat attributes
+      const repeat = repeatitem.parentNode;
+      targetElement = repeat.querySelector(`[repeat-index] ${selector}`);
+    }
 
-      this._focus(targetElement);
-      if(this.hasAttribute('select')){
-          this._select(targetElement);
-      }
+    this._focus(targetElement);
+    if (this.hasAttribute('select')) {
+      this._select(targetElement);
+    }
   }
 
-    _focus(targetElement){
-        if(targetElement && typeof targetElement.getWidget === 'function'){
-            targetElement.getWidget().focus();
-        }
-        if(targetElement && targetElement.nodeType === Node.ELEMENT_NODE){
-            targetElement.click();
-        }
+  _focus(targetElement) {
+    if (targetElement && typeof targetElement.getWidget === 'function') {
+      targetElement.getWidget().focus();
     }
-
-    _select(targetElement){
-        if(targetElement){
-            targetElement.getWidget().select();
-        }
+    if (targetElement && targetElement.nodeType === Node.ELEMENT_NODE) {
+      targetElement.click();
     }
+  }
 
+  _select(targetElement) {
+    if (targetElement) {
+      targetElement.getWidget().select();
+    }
+  }
 }
 
-
 if (!customElements.get('fx-setfocus')) {
   window.customElements.define('fx-setfocus', FxSetfocus);
 }