@jinntec/fore 1.2.0 → 1.4.0

package/src/actions/fx-delete.js

@@ -1,83 +1,74 @@
-import { AbstractAction } from './abstract-action.js';
-import { Fore } from '../fore.js';
+import {AbstractAction} from './abstract-action.js';
+import {Fore} from '../fore.js';
+import {evaluateXPathToNodes} from "../xpath-evaluation.js";
+import {XPathUtil} from "../xpath-util";
+import getInScopeContext from '../getInScopeContext.js';
 
 /**
  * `fx-delete`
- * general class for bound elements
+ * deletes nodes from instance data.
  *
+ * @fires deleted event
  * @customElement
  * @demo demo/todo.html
  */
 class FxDelete extends AbstractAction {
-  constructor() {
-    super();
-    this.repeatId = '';
-  }
-
-  /**
-   * deletes a
-   */
-  perform() {
-    super.perform();
-    console.log('##### fx-delete executing...');
-
-    // this.ref = this.getAttribute('ref');
-    // const inscope = this.getInScopeContext();
-    // this.nodeset = fx.evaluateXPathToNodes(this.ref, inscope, null, {});
-
-    console.log('delete nodeset ', this.nodeset);
-
-    // ### if there's no repeat the delete action is inside of a repeat template
-    if (this.repeatId === '') {
-      // find the index to delete
-      const rItem = Fore.getClosest('fx-repeatitem', this.parentNode);
-      const idx = Array.from(rItem.parentNode.children).indexOf(rItem) + 1;
-      // console.log('>>> idx to delete ', idx);
+    constructor() {
+        super();
+    }
 
-      // ### get the model now as it'll be hard once we've deleted ourselves ;)
-      this.model = this.getModel();
-      const repeat = Fore.getClosest('fx-repeat', this.parentNode);
+    /**
+     * deletes nodes from instance data.
+     *
+     * Will NOT perform delete if nodeset is pointing to document node, document fragment, root node or being readonly.
+     */
+    async perform() {
+        console.log('##### fx-delete executing...');
+        const inscopeContext = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+        this.nodeset = evaluateXPathToNodes(this.ref, inscopeContext, this);
 
-      // ### update the nodeset
-      let nodeToDelete;
-      if (Array.isArray(this.nodeset)) {
-        nodeToDelete = this.nodeset[idx - 1];
-      } else {
-        nodeToDelete = this.nodeset;
-      }
-      const p = nodeToDelete.parentNode;
-      p.removeChild(nodeToDelete);
+        console.log('delete nodeset ', this.nodeset);
 
-      // ### remove the repeatitem
-      rItem.parentNode.removeChild(rItem);
+        const nodesToDelete = this.nodeset;
+        let parent;
+        if (Array.isArray(nodesToDelete)) {
+            if(nodesToDelete.length === 0) return;
+            parent = nodesToDelete[0].parentNode;
+            nodesToDelete.forEach(item => {
+                this._deleteNode(parent, item);
+            });
+        } else {
+            parent = nodesToDelete.parentNode;
+            this._deleteNode(parent, nodesToDelete);
+        }
 
-      // ### update the index (set 'repeat-index' attribute on repeatitem
-      const { repeatSize } = repeat;
-      if (idx === 1 || repeatSize === 1) {
-        repeat.setIndex(1);
-      } else if (idx > repeatSize) {
-        repeat.setIndex(repeatSize);
-      } else {
-        repeat.setIndex(idx);
-      }
+        const instanceId = XPathUtil.resolveInstance(this);
+        const instance = this.getModel().getInstance(instanceId);
+        Fore.dispatch(instance, 'deleted', {deletedNodes:nodesToDelete});
+        this.needsUpdate = true;
     }
 
-    // this.needsRebuild = true;
-    // this.needsRecalculate = true;
-    // this.needsRevalidate = true;
-    // this.needsRefresh = true;
+    _deleteNode(parent, node) {
+        if (parent.nodeType === Node.DOCUMENT_NODE) return;
+        if (node.nodeType === Node.DOCUMENT_NODE) return;
+        if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return;
+        if (node.parentNode === null) return;
 
-    this.needsUpdate = true;
+        const mi = this.getModelItem();
+        if (mi.readonly) return;
 
-    // this.actionPerformed();
-  }
+        parent.removeChild(node);
+    }
 
-  actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
-  }
+    /**
+     * overwriting as we need to perform additional rebuild()
+     */
+    actionPerformed() {
+        this.getModel().rebuild();
+        super.actionPerformed();
+    }
 }
 
 if (!customElements.get('fx-delete')) {
-  window.customElements.define('fx-delete', FxDelete);
+    window.customElements.define('fx-delete', FxDelete);
 }

package/src/actions/fx-dispatch.js

@@ -52,7 +52,7 @@ export class FxDispatch extends AbstractAction {
 
 */
 
-  perform() {
+  async perform() {
     console.log('### fx-dispatch.perform ', this);
 
     const properties = this.querySelectorAll('fx-property');

package/src/actions/fx-hide.js

@@ -17,8 +17,10 @@ export class FxHide extends AbstractAction {
     }
   }
 
-  perform() {
-    resolveId(this.dialog, this).hide();
+  async perform() {
+    const dialog = resolveId(this.dialog, this);
+    dialog.hide();
+    Fore.dispatch(dialog,'dialog-hidden',{})
   }
 }
 

package/src/actions/fx-insert.js

@@ -81,7 +81,7 @@ export class FxInsert extends AbstractAction {
     return targetSequence.length;
   }
 
-  perform() {
+  async perform() {
     // super.perform();
 
     /*

package/src/actions/fx-message.js

@@ -1,4 +1,7 @@
 import { AbstractAction } from './abstract-action.js';
+import {evaluateXPathToString} from "../xpath-evaluation";
+import {Fore} from "../fore";
+import getInScopeContext from '../getInScopeContext.js';
 
 /**
  * `fx-message`
@@ -17,6 +20,8 @@ class FxMessage extends AbstractAction {
     super.connectedCallback();
     this.event = this.hasAttribute('event') ? this.getAttribute('event') : '';
     this.level = this.hasAttribute('level') ? this.getAttribute('level') : 'ephemeral';
+
+	this.messageTextContent = this.textContent;
     const style = `
         :host{
             display:none;
@@ -42,12 +47,13 @@ class FxMessage extends AbstractAction {
     `;
   }
 
-  perform() {
+  async perform() {
     super.perform();
     let message;
     if (this.hasAttribute('value')) {
-      message = this.getValue();
+      message = this._getValue();
     } else {
+		this.getOwnerForm().evaluateTemplateExpression(this.messageTextContent, this.firstChild);
       message = this.textContent;
     }
 
@@ -59,6 +65,24 @@ class FxMessage extends AbstractAction {
       }),
     );
   }
+
+  _getValue() {
+    if (this.hasAttribute('value')) {
+      const valAttr = this.getAttribute('value');
+      try {
+        const inscopeContext = getInScopeContext(this, valAttr);
+        return evaluateXPathToString(valAttr, inscopeContext, this);
+      } catch (error) {
+        console.error(error);
+        Fore.dispatch(this, 'error', { message: error });
+      }
+    }
+    if (this.textContent) {
+      return this.textContent;
+    }
+    return null;
+  }
+
 }
 
 if (!customElements.get('fx-message')) {

package/src/actions/fx-refresh.js

@@ -9,7 +9,7 @@ import {resolveId} from "../xpath-evaluation.js";
  *
  */
 class FxRefresh extends AbstractAction {
-  perform() {
+  async perform() {
     if (this.hasAttribute('self')) {
       const control = Fore.getClosest('fx-control', this);
       if (control) {
@@ -24,7 +24,7 @@ class FxRefresh extends AbstractAction {
     if(this.hasAttribute('control')){
       const targetId = this.getAttribute('control');
       const ctrl = resolveId(targetId, this);
-      if (Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
+      if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
         ctrl.refresh();
       }
       return;

package/src/actions/fx-reload.js

@@ -0,0 +1,30 @@
+import { Fore } from '../fore.js';
+import { AbstractAction } from './abstract-action.js';
+import { resolveId } from '../xpath-evaluation.js';
+
+/**
+ * `fx-reload`
+ * reloads browser window when receiving 'reload' event
+ *
+ * @event reload dispatched when action executes. Usually calls its own handler but might get cancelled by other handler.
+ * @customElement
+ * @demo demo/project.html
+ */
+export class FxReload extends AbstractAction {
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('reload', event => {
+      window.location.reload();
+    },{once:true});
+  }
+
+  async perform() {
+    Fore.dispatch(this, 'reload', {});
+  }
+}
+
+if (!customElements.get('fx-reload')) {
+  window.customElements.define('fx-reload', FxReload);
+}
+

package/src/actions/fx-replace.js

@@ -32,7 +32,7 @@ export default class FxReplace extends AbstractAction {
     this.with = this.getAttribute('with');
   }
 
-  perform() {
+  async perform() {
     super.perform();
     console.log('replace action');
     // console.log('replace action variables', this.inScopeVariables);

package/src/actions/fx-return.js

@@ -20,7 +20,7 @@ export class FxReturn extends AbstractAction {
     // const nonrelevant = this.hasAttribute('nonrelevant') ? this.getAttribute('nonrelevant') : null;
   }
 
-  perform() {
+  async perform() {
     super.perform();
     console.log('performing return with nodes', this.nodeset);
 

package/src/actions/fx-send.js

@@ -5,6 +5,7 @@ import { AbstractAction } from './abstract-action.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
  *
  * @customElement
  */
@@ -21,13 +22,16 @@ class FxSend extends AbstractAction {
     this.submission = this.getAttribute('submission');
   }
 
-  perform() {
+  async perform() {
     super.perform();
 
     console.log('submitting ', this.submission);
-    console.log('submitting model', this.getModel());
+    // 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}`);
     const submission = this.getModel().querySelector(`#${this.submission}`);
     if (submission === null) {
       this.dispatchEvent(
@@ -40,7 +44,13 @@ class FxSend extends AbstractAction {
       throw new Error(`submission with id: ${this.submission} not found`);
     }
     console.log('submission', submission);
-    submission.submit();
+      await submission.submit();
+/*
+    if(submission.replace === 'instance'){
+      this.getModel().updateModel();
+      this.getOwnerForm().refresh();
+    }
+*/
     // if not of type fx-submission signal error
   }
 }

package/src/actions/fx-setfocus.js

@@ -3,7 +3,7 @@ import {resolveId} from "../xpath-evaluation";
 
 /**
  * `fx-setfocus`
- * Set the focus to a target control.
+ * Set the focus to a target control optionally selecting eventual value in case a `select` attribute is given.
  *
  * @customElement
  */
@@ -13,25 +13,52 @@ export class FxSetfocus extends AbstractAction {
       this.control = this.hasAttribute('control') ? this.getAttribute('control') : null;
   }
 
-  perform() {
+  async perform() {
       console.log('setting focus', this.control);
       // super.perform();
-
-      // const targetElement = resolveId(this.control, this);
       const selector = '#'+this.control;
-      let targetElement = document.querySelector(selector);
+
+      let targetElement = this.getOwnerForm().querySelector(selector);;
+
+      // ### focus action is itself hosted within a repeat
+      const parentIItem = this.closest('fx-repeatitem');
+      if(parentIItem){
+          console.log('parentRepeat',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);
+      }
 
+      this._focus(targetElement);
+      if(this.hasAttribute('select')){
+          this._select(targetElement);
       }
-      targetElement.getWidget().focus();
   }
+
+    _focus(targetElement){
+        if(targetElement){
+            targetElement.getWidget().focus();
+        }
+    }
+
+    _select(targetElement){
+        if(targetElement){
+            targetElement.getWidget().select();
+        }
+    }
+
 }
 
+
 if (!customElements.get('fx-setfocus')) {
   window.customElements.define('fx-setfocus', FxSetfocus);
 }

package/src/actions/fx-setvalue.js

@@ -40,7 +40,7 @@ export default class FxSetvalue extends AbstractAction {
         this.valueAttr = this.getAttribute('value');
     }
 
-    perform() {
+    async perform() {
         super.perform();
         let {value} = this;
         if (this.valueAttr !== null) {
@@ -52,16 +52,17 @@ export default class FxSetvalue extends AbstractAction {
         }
         console.log('value', value);
         if (value.nodeType === Node.ATTRIBUTE_NODE) {
-            console.log('value', value.nodeValue);
+            // console.log('value', value.nodeValue);
             value = value.nodeValue;
         }
         const mi = this.getModelItem();
         this.setValue(mi, value);
+        // todo: check this again - logically needsUpate should be set but makes tests fail
+        //  this.needsUpdate = true;
+
     }
 
     setValue(modelItem, newVal) {
-        console.log('setvalue[1]  ', modelItem, newVal);
-
         const item = modelItem;
         if (!item) return;
 
@@ -69,7 +70,6 @@ export default class FxSetvalue extends AbstractAction {
             item.value = newVal;
             this.getModel().changed.push(modelItem);
             this.needsUpdate = true;
-            console.log('setvalue[2] ', item, newVal);
         }
     }
 }

package/src/actions/fx-show.js

@@ -17,12 +17,13 @@ export class FxShow extends FxAction {
     }
   }
 
-  perform() {
+  async perform() {
     const targetDlg = resolveId(this.dialog,this);
     if(!targetDlg){
       console.error('target dialog with given id does not exist',this.dialog);
     }
     targetDlg.open();
+    Fore.dispatch(targetDlg,'dialog-shown',{});
   }
 }
 

package/src/actions/fx-toggle.js

@@ -1,4 +1,5 @@
 import { AbstractAction } from './abstract-action.js';
+import {Fore} from "../fore";
 
 /**
  * `fx-toggle`
@@ -18,12 +19,16 @@ class FxToggle extends AbstractAction {
     }
   }
 
-  perform() {
+  async perform() {
     super.perform();
     console.log('### fx-toggle.execute ');
     if (this.case) {
       const ownerForm = this.getOwnerForm();
       const caseElement = ownerForm.querySelector(`#${this.case}`);
+      if(!caseElement){
+        Fore.dispatch(this, 'error', { message: `fx-case id not found: ${this.case}` });
+        return;
+      }
       const fxSwitch = caseElement.parentNode;
       fxSwitch.toggle(caseElement);
     }

package/src/actions/fx-update.js

@@ -7,7 +7,7 @@ import { AbstractAction } from './abstract-action.js';
  *
  */
 class FxUpdate extends AbstractAction {
-  perform() {
+  async perform() {
     this.getModel().updateModel();
   }
 }

package/src/events.js

@@ -0,0 +1,24 @@
+export function leadingDebounce(caller, func, timeout = 300){
+    console.log('debouncing', func);
+    let timer;
+    return (...args) => {
+        if (!timer) {
+            func.apply(caller, args);
+        }
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            timer = undefined;
+            return null;
+        }, timeout);
+    };
+}
+
+export function debounce(caller, func, timeout = 300) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func.apply(caller, args);
+        }, timeout);
+    };
+}