qcobjects-sdk 2.4.60 → 2.4.61

package/src/js/org.qcobjects.components.ts

@@ -0,0 +1,336 @@
+/**
+ * QCObjects SDK 2.4
+ * ________________
+ *
+ * Author: Jean Machuca <correojean@gmail.com>
+ *
+ * Cross Browser Javascript Framework for MVC Patterns
+ * QuickCorp/QCObjects is licensed under the
+ * GNU Lesser General Public License v3.0
+ * [LICENSE] (https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt)
+ *
+ * Permissions of this copyleft license are conditioned on making available
+ * complete source code of licensed works and modifications under the same
+ * license or the GNU GPLv3. Copyright and license notices must be preserved.
+ * Contributors provide an express grant of patent rights. However, a larger
+ * work using the licensed work through interfaces provided by the licensed
+ * work may be distributed under different terms and without source code for
+ * the larger work.
+ *
+ * Copyright (C) 2015 Jean Machuca,<correojean@gmail.com>
+ *
+ * Everyone is permitted to copy and distribute verbatim copies of this
+ * license document, but changing it is not allowed.
+ */
+"use strict";
+
+import { Package, Component, logger, _DOMCreateElement, CONFIG, New, ClassFactory, Tag, ComponentURI, QCObjectsElement, ComponentDoneResponse, ComponentParams } from "qcobjects";
+import { ModalFade, ModalMoveDown, ModalMoveUp } from "./org.qcobjects.effects";
+const _top:any = (typeof module === "object" && typeof module.exports === "object") ? (
+  module.exports = (typeof globalThis !== "undefined"
+  ? globalThis
+  : typeof self !== "undefined"
+  ? self
+  : typeof window !== "undefined"
+  ? window
+  : typeof global !== "undefined"
+  ? global
+  : {})
+) : ((typeof global === "object") ? (global) : (
+  (typeof window === "object") ? (window) : ({})
+));
+(function (global:any) {
+
+  type FieldComponentParams = ComponentParams & {
+    basePath?:string;
+    fieldType:string;
+  }
+  class FormField extends Component {
+    fieldType!:string;
+    cached = false;
+    reload = true;
+    constructor (o:FieldComponentParams){
+      o.name = (typeof o.name !== "undefined")?(o.name):("form-field");
+      super(o);
+    }
+
+    createBindingEvents() {
+      let _objList;
+      if (typeof this.fieldType === "undefined" || this.fieldType == null) {
+        _objList = (this.body as QCObjectsElement).subelements("*[data-field]"); // every child with data-field set
+      } else {
+        _objList = (this.body as QCObjectsElement).subelements(this.fieldType + "[data-field]"); // every child with data-field set and tagname is equal to fieldType property
+      }
+      for (let _datak = 0; _datak < _objList.length; _datak++) {
+        const _obj = _objList[_datak];
+        _obj.addEventListener("change",  () => {
+          logger.debug("Executing change event binding");
+          this.executeBindings();
+        });
+        _obj.addEventListener("blur", () => {
+          logger.debug("Executing change event binding");
+          this.executeBindings();
+        });
+        _obj.addEventListener("focus", () => {
+          logger.debug("Executing change event binding");
+          this.executeBindings();
+        });
+        _obj.addEventListener("keydown", () =>{
+          logger.debug("Executing keydown event binding");
+          this.executeBindings();
+        });
+      }
+    }
+
+    executeBinding(_obj:HTMLElement & {value:any}) {
+      const _datamodel = _obj.getAttribute("data-field");
+      logger.debug("Binding " + _datamodel + " for " + this.name);
+      this.data[_datamodel as keyof typeof this.data] = _obj.value;
+    }
+
+    executeBindings() {
+      let _objList;
+      if (typeof this.fieldType === "undefined" || this.fieldType == null) {
+        _objList = (this.body as QCObjectsElement).subelements("*[data-field]"); // every child with data-field set
+      } else {
+        _objList = (this.body as QCObjectsElement).subelements(this.fieldType + "[data-field]"); // every child with data-field set and tagname is equal to fieldType property
+      }
+      for (let _datak = 0; _datak < _objList.length; _datak++) {
+        const _obj = _objList[_datak] as HTMLElement & {value:any};
+        const _datamodel = _obj.getAttribute("data-field");
+        logger.debug("Binding " + _datamodel + " for " + this.name);
+        this.data[_datamodel as keyof typeof this.data] = _obj.value;
+      }
+    }
+
+    done(standardResponse:ComponentDoneResponse):Promise<ComponentDoneResponse> {
+      const _ret_ = super.done(standardResponse);
+      this.executeBindings();
+      this.createBindingEvents();
+      logger.debug("Field loaded: " + this.fieldType + "[name=" + this.name + "]");
+      return _ret_;
+    }
+
+
+  }
+
+  Package("org.qcobjects.base.components", [
+    FormField
+  ]);
+
+  class ShadowedComponent extends Component {
+    container = null;
+    shadowed = true;
+    cached = false;
+    controller = null;
+    view = null;
+    data = {};
+
+    constructor (o:FieldComponentParams){
+      o.body = _DOMCreateElement("div") as QCObjectsElement;
+      super(o);
+    }
+
+
+  }
+
+  class ButtonField extends FormField {
+    constructor(o:FieldComponentParams) {
+      o.fieldType = "button";
+      super(o);
+    }
+  }
+
+  class InputField extends FormField {
+    constructor(o:FieldComponentParams) {
+      o.fieldType = "input";
+      super(o);
+    }
+
+  }
+
+  class TextField extends FormField {
+    constructor(o:FieldComponentParams) {
+      o.fieldType = "textarea";
+      super(o);
+    }
+
+  }
+
+  class EmailField extends FormField {
+    constructor(o:FieldComponentParams) {
+      o.fieldType = "input";
+      super(o);
+    }
+
+  }
+
+  class ModalEnclosureComponent extends Component {
+    name = "modalenclosure";
+    tplsource = "inline";
+    cached = false;
+    basePath = CONFIG.get("modalBasePath", CONFIG.get("remoteSDKPath", ""));
+    template = `
+<!-- The Modal -->
+<style>
+@import url('https://sdk.qcobjects.dev/css/modal.css');
+</style>
+<div id="modalInstance_{{modalId}}" class="modal">
+
+<!-- Modal content -->
+<div class="modal-content">
+<span class="close">&times;</span>
+{{content}}
+</div>
+
+</div>
+`;
+
+    data = {};
+    constructor(o:FieldComponentParams) {
+      o.body = _DOMCreateElement("div") as QCObjectsElement;
+      super(o);
+    }
+
+  }
+
+  class ModalComponent extends Component {
+    name = "modal";
+    cached = false;
+    modalEnclosureComponentClass = "ModalEnclosureComponent";
+    controller = null;
+    view = null;
+    tplsource = "none";
+    closeOnClickOutside = false;
+    data = {
+      content: "",
+      modalId: 0
+    };
+
+    submodal = null;
+
+    constructor(o:FieldComponentParams) {
+      o.basePath = CONFIG.get("modalBasePath", CONFIG.get("remoteSDKPath", ""));
+      super(o);
+      this.data.modalId = this.__instanceID;
+      const submodal = New(ClassFactory(this.modalEnclosureComponentClass), {
+        name: this.name,
+        basePath: this.basePath,
+        data: this.data
+      });
+      this.subcomponents.push(submodal);
+      this.submodal = submodal;
+      if (submodal.tplsource === "none") {
+        this.body.innerHTML = submodal.parsedAssignmentText;
+      } else {
+        this.body.append(submodal.body);
+      }
+
+    }
+
+    modal() {
+      const modalId = this.data.modalId;
+
+      Tag("#modalInstance_" + modalId + ".modal").map( (modal) => {
+        modal.style.display = "block";
+        return (new ModalFade({})).apply(modal, 0, 1);
+      });
+      Tag("#modalInstance_" + modalId + ".modal .modal-content").map( (modalcontent) => {
+        return (new ModalMoveDown({})).apply(modalcontent, 0, -document.body.clientHeight, 0, 0);
+      });
+      Tag("#modalInstance_" + modalId + ".modal .modal-content .close").map( (closebtn) => {
+        return closebtn.addEventListener("click",  () => {
+          this.close();
+        }, false);
+      });
+      if (this.closeOnClickOutside) {
+        window.addEventListener("click",  () => {
+          this.close();
+        }, false);
+      }
+    }
+
+    close() {
+      const modalId = this.data.modalId;
+      Tag("#modalInstance_" + modalId + ".modal").map( (modal) => {
+        modal.style.display = "block";
+        return (new ModalFade({})).apply(modal, 1, 0);
+      });
+      Tag("#modalInstance_" + modalId + ".modal .modal-content").map(function (modalcontent) {
+        return (new ModalMoveUp({})).apply(modalcontent, 0, 0, 0, -document.body.clientHeight);
+      });
+      setTimeout(function () {
+        Tag("#modalInstance_" + modalId + ".modal").map((modal) => {
+          modal.style.display = "none";
+          return true;
+        });
+      }, 900);
+    }
+
+    rebuild() {
+      const _ret_ = super.rebuild();
+      this.templateURI = ComponentURI({
+        "COMPONENTS_BASE_PATH": CONFIG.get("componentsBasePath", ""),
+        "COMPONENT_NAME": "modal",
+        "TPLEXTENSION": CONFIG.get("tplextension", ""),
+        "TPL_SOURCE": "default" // here is always default in order to get the right uri
+      });
+      return _ret_; // parent call
+    }
+
+
+  }
+
+  class SwaggerUIComponent extends Component {
+    cached = false;
+    basePath = CONFIG.get("remoteSDKPath", "");
+    tplextension = "tpl.html";
+    name = "swagger-ui";
+
+  }
+
+
+  Package("org.qcobjects.form.components", [
+    ShadowedComponent,
+    ButtonField,
+    InputField,
+    TextField,
+    EmailField,
+    ModalEnclosureComponent,
+    ModalComponent,
+    SwaggerUIComponent
+  ]);
+
+  global.FormField = FormField;
+  global.ShadowedComponent = ShadowedComponent;
+  global.ButtonField = ButtonField;
+  global.InputField = InputField;
+  global.TextField = TextField;
+  global.EmailField = EmailField;
+  global.ModalEnclosureComponent = ModalEnclosureComponent;
+  global.ModalComponent = ModalComponent;
+  global.SwaggerUIComponent = SwaggerUIComponent;    
+
+})(_top);
+
+const FormField = _top.FormField;
+const ShadowedComponent = _top.ShadowedComponent;
+const ButtonField = _top.ButtonField;
+const InputField = _top.InputField;
+const TextField = _top.TextField;
+const EmailField = _top.EmailField;
+const ModalEnclosureComponent = _top.ModalEnclosureComponent;
+const ModalComponent = _top.ModalComponent;
+const SwaggerUIComponent = _top.SwaggerUIComponent;
+
+export {
+  FormField,
+  ShadowedComponent, 
+  ButtonField, 
+  InputField, 
+  TextField, 
+  EmailField, 
+  ModalComponent, 
+  ModalEnclosureComponent, 
+  SwaggerUIComponent
+};

package/src/js/org.qcobjects.controllers.d.ts

@@ -0,0 +1 @@
+export {};

package/src/js/org.qcobjects.controllers.form.d.ts

@@ -0,0 +1 @@
+export {};

package/src/js/{org.qcobjects.controllers.form.js → org.qcobjects.controllers.form.ts}

@@ -1,3 +1,6 @@
+import { Package, Controller, serviceLoader, New, ClassFactory, logger, _DOMCreateElement, Tag, QCObjectsElement, ControllerParams } from "qcobjects";
+import { FormField, ModalComponent } from "./org.qcobjects.components";
+
 /**
  * QCObjects SDK 2.4
  * ________________
@@ -28,13 +31,13 @@ Package("org.qcobjects.controllers.form",[
 
   class FormValidations extends Controller {
     getDefault (){
-      return function (fieldName, dataValue, element){
-        var _regex = {
+      return function (fieldName:string, dataValue:any, element:HTMLElement){
+        const _regex = {
                       name:"^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$",
                       email:"^([A-Za-z0-9]+)@([A-Za-z0-9]+).([A-Za-z0-9]+)$"
                     };
-        var _pattern_ = (element.getAttribute("pattern") || _regex[fieldName]);
-        var pattern = new RegExp(_pattern_);
+        const _pattern_ = (element.getAttribute("pattern") || _regex[fieldName as keyof typeof _regex]);
+        const pattern = new RegExp(_pattern_);
         return pattern.test(dataValue);
       };
     }
@@ -42,8 +45,8 @@ Package("org.qcobjects.controllers.form",[
   },
 
   class FormController extends Controller {
-    dependencies=[];
-    component=null;
+    validations:any[]=[];
+    formValidatorModal:typeof ModalComponent;
     serviceClass="";
     formSettings={
       backRouting:"#",
@@ -51,48 +54,45 @@ Package("org.qcobjects.controllers.form",[
       nextRouting:"#signupsuccessful"
     };
 
-    hasValidation (element){
-      var controller = this;
-      var fieldName = element.getAttribute("data-field");
-      var _hasValidation = false;
-      if (typeof controller.validations !== "undefined"
-        && controller.validations.hasOwnProperty.call(controller.validations,fieldName)){
+    hasValidation (element:HTMLElement){
+      const fieldName = element.getAttribute("data-field") as string;
+      let _hasValidation = false;
+      if (typeof this.validations !== "undefined"
+        && Object.hasOwnProperty.call(this.validations,fieldName)){
         _hasValidation = true;
       }
       return _hasValidation;
     }
 
-    isInvalid (element){
-      var controller = this;
-      var _isInvalid = false;
-      var fieldName = element.getAttribute("data-field");
-      var dataValue = this.component.data[fieldName];
+    isInvalid (element:HTMLElement){
+      let _isInvalid = false;
+      const fieldName = element.getAttribute("data-field");
+      const dataValue = this.component.data[fieldName as string];
 
-      var _execValidation = function (fieldName, dataValue, element){
-        return (typeof controller.validations !== "undefined"
-        && controller.validations.hasOwnProperty.call(controller.validations,fieldName)
-        && controller.validations[fieldName].call(controller).call(controller,fieldName,dataValue, element));
+      const _execValidation =  (fieldName:string, dataValue:any, element:HTMLElement) => {
+        return (typeof this.validations !== "undefined"
+        && Object.hasOwnProperty.call(this.validations,fieldName as string)
+        && this.validations[fieldName as keyof typeof this.validations].call(null,fieldName,dataValue, element));
       };
 
       if (typeof this.validations !== "undefined" && (
-        !_execValidation(fieldName, dataValue, element)
+        !_execValidation(fieldName as string, dataValue, element)
       )){
         _isInvalid = true;
       }
       return _isInvalid;
     }
 
-    isValid (element){
+    isValid (element:HTMLElement){
       return !this.isInvalid(element);
     }
 
     save (){
-      var controller = this;
-      if (controller.serviceClass !== ""){
-        location.href=controller.formSettings.loadingRouting;
-        serviceLoader(New(ClassFactory(controller.serviceClass),{
-            data:controller.component.data
-        })).then(
+      if (this.serviceClass !== ""){
+        location.href=this.formSettings.loadingRouting;
+        serviceLoader(New(ClassFactory(this.serviceClass),{
+            data:this.component.data
+        }), false).then(
           (successfulResponse)=>{
             // This will show the service response as a plain text
             console.log("DONE SERVICE COMPONENT");
@@ -101,12 +101,12 @@ Package("org.qcobjects.controllers.form",[
             }catch (e){
                 // no json
             }
-            location.href=controller.formSettings.nextRouting;
+            location.href=this.formSettings.nextRouting;
 
           },
           (failedResponse)=>{
             logger.debug(failedResponse);
-            location.href=controller.formSettings.backRouting;
+            location.href=this.formSettings.backRouting;
           });
       } else {
         logger.debug("No service name declared on serviceClass property");
@@ -116,19 +116,18 @@ Package("org.qcobjects.controllers.form",[
 
     formSaveTouchHandler (){
       logger.debug("Saving data...");
-      var controller = this;
-      var _componentRoot_ = (controller.component.shadowed)?(controller.component.shadowRoot.host):(controller.component.body);
-      controller.component.executeBindings();
-      if (controller.formValidatorModal!=null){
-        var componentElementFields = _componentRoot_.subelements("*[data-field]");
-        var fieldsToValidate = componentElementFields.filter(
-          f => controller.hasValidation.call(controller,f)
+      const _componentRoot_ = (this.component.shadowed)?((this.component?.shadowRoot as ShadowRoot).host):(this.component.body);
+      (this.component as typeof FormField).executeBindings();
+      if (this.formValidatorModal!=null){
+        const componentElementFields = (_componentRoot_ as QCObjectsElement).subelements("*[data-field]");
+        const fieldsToValidate = componentElementFields.filter(
+          f => this.hasValidation(f)
         );
 
-        var _labelledby = function (parentElement, element){
-          var _arialabelledby = function (parentElement, element){
-            return (element.getAttribute("aria-labelledby") !== null)?(element.getAttribute("aria-labelledby").split(" ").map(
-              e => parentElement.subelements(`#${e}`).map(_e => _e.innerHTML)
+        const _labelledby = function (parentElement:HTMLElement, element:HTMLElement){
+          const _arialabelledby =  (parentElement:HTMLElement, element:HTMLElement) => {
+            return (element.getAttribute("aria-labelledby") !== null)?((element.getAttribute("aria-labelledby") || "").split(" ").map(
+              e => (parentElement as QCObjectsElement).subelements(`#${e}`).map(_e => _e.innerHTML)
             ).join(" ")):(null);
           };
 
@@ -139,35 +138,35 @@ Package("org.qcobjects.controllers.form",[
                   || element.getAttribute("data-field") );
         };
 
-        var _ariatitle = function (element){
+        const _ariatitle = function (element:HTMLElement){
           return (element.getAttribute("title") || element.getAttribute("aria-title") || "");
         };
 
-        var invalidFields = fieldsToValidate.filter(f=>controller.isInvalid(f));
+        const invalidFields = fieldsToValidate.filter(f=>this.isInvalid(f));
         if (invalidFields.length>0){
-          var validationMessage = `
+          const validationMessage = `
 <details>
     <summary>Please verify the following incorrect fields:</summary>
     <ul>
       <div>
-      ${invalidFields.map(element => "<li><div>"+_labelledby(_componentRoot_,element)+"</div><div>"+_ariatitle(element)+"</div></li>").join("")}
+      ${invalidFields.map(element => "<li><div>"+_labelledby(_componentRoot_ as HTMLElement,element)+"</div><div>"+_ariatitle(element)+"</div></li>").join("")}
       </div>
     </ul>
 </details>
 `;
-          controller.formValidatorModal.body.subelements(".validationMessage")[0].innerHTML=validationMessage;
-          controller.formValidatorModal.modal();
+          this.formValidatorModal.body.subelements(".validationMessage")[0].innerHTML=validationMessage;
+          this.formValidatorModal.modal();
         } else {
-          controller.save();
+          this.save();
         }
       } else {
         logger.debug("Unable to find the modal validator...");
         logger.debug("Saving data...");
-        controller.save();
+        this.save();
       }
     }
 
-    constructor (o){
+    constructor (o:ControllerParams){
       super(o);
       this.component = o.component;
       this.component = this.component.Cast(FormField);
@@ -175,12 +174,11 @@ Package("org.qcobjects.controllers.form",[
 
     done (){
       logger.debugEnabled=true;
-      var controller=this;
       try {
-        controller.component.createBindingEvents();
-        var modalBody = _DOMCreateElement("div");
+        (this.component as typeof FormField).createBindingEvents();
+        const modalBody = _DOMCreateElement("div");
         modalBody.className="modal_body";
-        controller.formValidatorModal = New(ModalComponent,{
+        this.formValidatorModal = New(ModalComponent,{
           body:modalBody,
           subcomponents:[],
           data:{
@@ -189,13 +187,13 @@ Package("org.qcobjects.controllers.form",[
         });
 
         Tag(".modal_body").map(e=>document.body.removeChild(e));
-        document.body.append(controller.formValidatorModal);
+        document.body.append(this.formValidatorModal);
 
       } catch (e){
         logger.debug("Unable to create the modal");
       }
-      controller.onpress(".submit",function (){
-        controller.formSaveTouchHandler();
+      this.onpress(".submit", () => {
+        this.formSaveTouchHandler();
       });
 
     }
@@ -205,4 +203,4 @@ Package("org.qcobjects.controllers.form",[
 
 ]);
 
-}).call(null);
+})();

package/src/js/org.qcobjects.controllers.grid.d.ts

@@ -0,0 +1 @@
+export {};