qcobjects-sdk 2.4.66 → 2.5.105

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

@@ -0,0 +1,209 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * 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, Controller, serviceLoader, New, ClassFactory, logger, _DOMCreateElement, Tag } from "qcobjects";
+import { FormField, ModalComponent } from "./org.qcobjects.components";
+
+export class FormValidations extends Controller {
+  getDefault() {
+    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]+)$"
+      };
+      const _pattern_ = (element.getAttribute("pattern") || _regex[fieldName as keyof typeof _regex]);
+      const pattern = new RegExp(_pattern_);
+      return pattern.test(dataValue);
+    };
+  }
+
+}
+
+export class FormController extends Controller {
+  validations: any[] = [];
+  formValidatorModal!: ModalComponent;
+  serviceClass = "";
+  formSettings = {
+    backRouting: "#",
+    loadingRouting: "#loading",
+    nextRouting: "#signupsuccessful"
+  };
+  component: any;
+
+  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: HTMLElement) {
+    let _isInvalid = false;
+    const fieldName = element.getAttribute("data-field");
+    const dataValue = this.component.data[fieldName as string];
+
+    const _execValidation = (fieldName: string, dataValue: any, element: HTMLElement) => {
+
+      return (typeof this.validations !== "undefined"
+        && Object.hasOwnProperty.call(this.validations, fieldName)
+        && this.validations[fieldName as keyof typeof this.validations].call(null, fieldName, dataValue, element));
+    };
+
+    if (typeof this.validations !== "undefined" && (
+      !_execValidation(fieldName as string, dataValue, element)
+    )) {
+      _isInvalid = true;
+    }
+    return _isInvalid;
+  }
+
+  isValid(element: HTMLElement) {
+    return !this.isInvalid(element);
+  }
+
+  save() {
+    if (this.serviceClass !== "") {
+      location.href = this.formSettings.loadingRouting;
+      serviceLoader(New(ClassFactory(this.serviceClass), {
+        data: this.component.data
+      }), false).then(
+        () => {
+          // This will show the service response as a plain text
+          console.log("DONE SERVICE COMPONENT");
+          location.href = this.formSettings.nextRouting;
+
+        },
+        (failedResponse: string) => {
+          logger.debug(failedResponse);
+          location.href = this.formSettings.backRouting;
+        });
+    } else {
+      logger.debug("No service name declared on serviceClass property");
+    }
+
+  }
+
+  formSaveTouchHandler() {
+    logger.debug("Saving data...");
+    const _componentRoot_ = (this.component.shadowed) ? ((this.component?.shadowRoot as ShadowRoot).host) : (this.component.body);
+    (this.component).executeBindings();
+    if (this.formValidatorModal != null) {
+      const componentElementFields = _componentRoot_.subelements("*[data-field]");
+      const fieldsToValidate = componentElementFields.filter(
+        (f: any) => this.hasValidation(f)
+      );
+
+      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 any).subelements(`#${e}`).map((_e: any) => _e.innerHTML)
+          ).join(" ")) : (null);
+        };
+
+        return (_arialabelledby(parentElement, element)
+          || element.getAttribute("aria-label")
+          || element.getAttribute("placeholder")
+          || element.getAttribute("name")
+          || element.getAttribute("data-field"));
+      };
+
+      const _ariatitle = function (element: HTMLElement) {
+        return (element.getAttribute("title") || element.getAttribute("aria-title") || "");
+      };
+
+      const invalidFields = fieldsToValidate.filter((f: any) => this.isInvalid(f));
+      if (invalidFields.length > 0) {
+        const validationMessage = `
+<details>
+  <summary>Please verify the following incorrect fields:</summary>
+  <ul>
+    <div>
+    ${invalidFields.map((element: any) => "<li><div>" + _labelledby(_componentRoot_ as HTMLElement, element) + "</div><div>" + _ariatitle(element) + "</div></li>").join("")}
+    </div>
+  </ul>
+</details>
+`;
+        this.formValidatorModal.body.subelements(".validationMessage")[0].innerHTML = validationMessage;
+        this.formValidatorModal.modal();
+      } else {
+        this.save();
+      }
+    } else {
+      logger.debug("Unable to find the modal validator...");
+      logger.debug("Saving data...");
+      this.save();
+    }
+  }
+
+  constructor(o: any) {
+    super(o);
+    this.component = o.component;
+    this.component = this.component.Cast(FormField);
+  }
+
+  done() {
+    logger.debugEnabled = true;
+    try {
+      (this.component).createBindingEvents();
+      const modalBody = _DOMCreateElement("div");
+      modalBody.className = "modal_body";
+      this.formValidatorModal = New(ModalComponent, {
+        body: modalBody,
+        subcomponents: [],
+        data: {
+          content: "<div class=\"validationMessage\"></div>"
+        }
+      });
+
+
+      Tag(".modal_body").map((e: any) => document.body.removeChild(e));
+      document.body.append(this.formValidatorModal.body);
+
+    } catch (e: any) {
+      logger.debug(`Unable to create the modal: ${e}`);
+    }
+    this.onpress(".submit", () => {
+      this.formSaveTouchHandler();
+    });
+
+  }
+  // eslint-disable-next-line no-unused-vars
+  onpress(arg0: string, arg1: () => void) {
+    throw new Error("Method not implemented.");
+  }
+
+
+}
+
+Package("org.qcobjects.controllers.form", [
+  FormController,
+  FormValidations
+
+]);
+

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

@@ -0,0 +1,291 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * 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, Controller, _DOMCreateElement, logger, _DataStringify, ClassFactory, New, ComponentURI, CONFIG, serviceLoader, Component } from "qcobjects";
+import { GridComponent } from "./org.qcobjects.components.grid";
+
+type DataGridControllerParams = {
+  component: Component;
+  rows: number | string | null;
+  cols: number | string | null;
+}
+
+export class GridController extends Controller {
+  __instanceID!: number;
+  rows: number | string | null;
+  cols: number | string | null;
+  component: any;
+
+  constructor(controller: any) {
+    super(controller);
+    this.rows = this.component.body.getAttribute("rows");
+    this.rows = (this.rows !== null) ? (this.rows) : ((this.component).rows);
+    this.cols = this.component.body.getAttribute("cols");
+    this.cols = (this.cols !== null) ? (this.cols) : ((this.component).cols);
+
+  }
+
+  cssGrid() {
+    const component = this.component;
+    const _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+    if (typeof this.rows !== "undefined" && typeof this.cols !== "undefined") {
+      const s = _DOMCreateElement("style");
+      const templateRows = "auto ".repeat(this.rows as number);
+      const templateCols = "auto ".repeat(this.cols as number);
+      const className = "grid" + this.__instanceID.toString();
+      s.innerHTML = `.${className}{
+        display: grid; \
+        grid-template-rows: ${templateRows}; \
+        grid-template-columns: ${templateCols}; \
+        margin:0 auto; \
+      }`;
+      _componentRoot?.append(s);
+      if (component.shadowed) {
+        (_componentRoot as ShadowRoot)?.host.classList.add(className);
+      } else {
+        ((_componentRoot as HTMLDivElement).classList).add(className);
+      }
+    }
+  }
+
+  done() {
+    this.cssGrid();
+
+    logger.debug("GridComponent built");
+
+  }
+
+}
+
+export class DataGridController extends Controller {
+  __instanceID!: number;
+  rows: number | string | null;
+  cols: number | string | null;
+  _componentRoot: HTMLElement | ShadowRoot | undefined;
+  component: any;
+
+  constructor(controller: DataGridControllerParams) {
+    super(controller);
+    this._componentRoot = (controller.component.shadowed) ? (controller.component.shadowRoot) : (controller.component.body);
+    this.rows = controller.component.body.getAttribute("rows");
+    this.rows = (controller.rows !== null) ? (controller.rows) : ((controller.component as GridComponent).rows);
+    this.cols = controller.component.body.getAttribute("cols");
+    this.cols = (controller.cols !== null) ? (controller.cols) : ((controller.component as GridComponent).cols);
+    logger.debug("DataGridController INIT");
+
+  }
+
+  getPageIndex(page: number, totalPage: number, totalElements: number) {
+    page = (page > 0) ? (page - 1) : (0);
+    return [totalElements * page / totalPage, (totalElements * page / totalPage) + totalElements / totalPage];
+  }
+
+  addSubcomponents() {
+    this.component.subcomponents = [];
+    if (typeof this._componentRoot !== "undefined") {
+      this._componentRoot.innerHTML = "";
+    }
+    this.cssGrid();
+    logger.debug(_DataStringify(this.component.data));
+    try {
+      const subcomponentClass = this.component.body.getAttribute("subcomponentClass");
+      if (subcomponentClass != null) {
+        let offset: number;
+        let limit: number;
+        let pagesNumber: number;
+        let list = [...this.component.data];
+        let paginateIn = this.component.body.getAttribute("paginate-in");
+        let page: number | string | null | undefined;
+        paginateIn = (paginateIn !== null) ? (paginateIn) : ("client");
+        if (paginateIn === "client") {
+          page = this.component.body.getAttribute("page-number") as unknown as number;
+          page = (isNaN(page) || page === null) ? (-1) : (page);
+          if (page !== -1) {
+            pagesNumber = this.component.body.getAttribute("total-pages") as unknown as number;
+            pagesNumber = (isNaN(pagesNumber)) ? (1) : (pagesNumber);
+            offset = this.getPageIndex(page, pagesNumber, list.length)[0];
+            limit = this.getPageIndex(page, pagesNumber, list.length)[1];
+          } else {
+            offset = 0;
+            limit = list.length;
+            pagesNumber = 1;
+          }
+          list = list.slice(offset, limit);
+        } else {
+          offset = 0;
+          limit = list.length;
+          pagesNumber = 1;
+        }
+        list.map(
+          (record, dataIndex, list) => {
+            const _ret_ = undefined;
+            try {
+              const _body = _DOMCreateElement("component");
+              _body.setAttribute("name", ClassFactory(subcomponentClass).name);
+              _body.setAttribute("shadowed", ClassFactory(subcomponentClass).shadowed);
+              _body.setAttribute("cached", ClassFactory(subcomponentClass).cached);
+              record = Object.assign(record, {
+                __dataIndex: dataIndex,
+                __dataLength: list.length,
+                __page: page,
+                __totalPages: pagesNumber,
+                __limit: limit,
+                __offset: offset
+              });
+              const subcomponent = New(ClassFactory(subcomponentClass), {
+                name: "item",
+                data: record,
+                templateURI: ComponentURI({
+                  "COMPONENTS_BASE_PATH": CONFIG.get("componentsBasePath", ""),
+                  "COMPONENT_NAME": ClassFactory(subcomponentClass).name,
+                  "TPLEXTENSION": CONFIG.get("tplextension", ""),
+                  "TPL_SOURCE": ClassFactory(subcomponentClass).tplsource
+                }),
+                body: _body,
+                template: ClassFactory(subcomponentClass).template
+              });
+              subcomponent.done = this.component.done.bind(subcomponent);
+              try {
+                if (subcomponent) {
+                  subcomponent.data.__dataIndex = dataIndex;
+                  if (Object.hasOwnProperty.call(this.component.data, "length")) {
+                    subcomponent.data.__dataLength = this.component.data.length;
+                  }
+                  logger.debug("adding subcomponent to body");
+                  this._componentRoot?.append(subcomponent.body);
+                  try {
+                    this.component.subcomponents.push(subcomponent);
+                  } catch (e: any) {
+                    logger.debug(`ERROR LOADING SUBCOMPONENT IN DATAGRID: ${e}`);
+                  }
+                } else {
+                  logger.debug("ERROR LOADING SUBCOMPONENT IN DATAGRID");
+                }
+              } catch (e: any) {
+                logger.debug(`ERROR LOADING SUBCOMPONENT IN DATAGRID: ${e}`);
+              }
+
+            } catch (e: any) {
+              logger.debug(`ERROR LOADING SUBCOMPONENT IN DATAGRID: ${e}`);
+            }
+            return _ret_;
+          }
+        );
+      } else {
+        logger.debug("NO SUBCOMPONENT CLASS IN COMPONENT");
+      }
+
+    } catch (e: any) {
+      logger.debug(`No data for component: ${e}`);
+    }
+  }
+
+  cssGrid() {
+    const component = this.component;
+    const _componentRoot = (component.shadowed) ? (component.shadowRoot) : (component.body);
+    if (typeof this.rows !== "undefined" && typeof this.cols !== "undefined") {
+      const s = _DOMCreateElement("style");
+      const templateRows = "auto ".repeat(this.rows as number);
+      const templateCols = "auto ".repeat(this.cols as number);
+      const className = "grid" + this.__instanceID.toString();
+      s.innerHTML = `.${className}{
+        display: grid; \
+        grid-template-rows: ${templateRows}; \
+        grid-template-columns: ${templateCols}; \
+        margin:0 auto; \
+      }`;
+      if (component.shadowed) {
+        component.body.append(s);
+        (_componentRoot as ShadowRoot).host.classList.add(className);
+      } else {
+        _componentRoot?.append(s);
+        (_componentRoot as HTMLElement).classList.add(className);
+      }
+    }
+  }
+
+  done() {
+    const componentInstance = this.component;
+    logger.debug("DataGridController DONE");
+    const serviceClass = this.component.body.getAttribute("serviceClass");
+    if (serviceClass != null) {
+      let offset;
+      let limit;
+      let paginateIn = componentInstance.body.getAttribute("paginate-in");
+      paginateIn = (paginateIn !== null) ? (paginateIn) : ("client");
+      if (paginateIn === "server") {
+        let page = componentInstance.body.getAttribute("page-number") as unknown as number;
+        page = (isNaN(page) || page === null) ? (-1) : (page);
+        let pagesNumber;
+        if (page !== -1) {
+          const serverDataCount = (this.component.body.getAttribute("server-data-count") !== null) ? (this.component.body.getAttribute("server-data-count") as unknown as number) : (1);
+          pagesNumber = this.component.body.getAttribute("total-pages") as unknown as number;
+          pagesNumber = (isNaN(pagesNumber)) ? (1) : (pagesNumber);
+          offset = this.getPageIndex(page, pagesNumber, serverDataCount)[0];
+          limit = this.getPageIndex(page, pagesNumber, serverDataCount)[1];
+          // send params in jsonrpc 2.0 style
+          componentInstance.serviceData = (typeof componentInstance.serviceData !== "undefined") ? (componentInstance.serviceData) : ({});
+          componentInstance.serviceData.params = (typeof componentInstance.serviceData.params !== "undefined") ? (componentInstance.serviceData.params) : ({});
+          componentInstance.serviceData.params.offset = offset;
+          componentInstance.serviceData.params.limit = limit;
+        }
+      }
+
+      serviceLoader(New(ClassFactory(serviceClass), {
+        data: componentInstance.serviceData
+      }), false).then(
+        (successfulResponse: { service: any }) => {
+          // This will show the service response as a plain text
+          logger.debug("DONE SERVICE COMPONENT");
+          successfulResponse.service.JSONresponse = JSON.parse(successfulResponse.service.template);
+          if (typeof successfulResponse.service.JSONresponse.result !== "undefined") {
+            logger.debug(_DataStringify(successfulResponse.service.JSONresponse.result));
+            componentInstance.data = successfulResponse.service.JSONresponse.result;
+          } else {
+            componentInstance.data = successfulResponse.service.JSONresponse;
+          }
+          this.addSubcomponents();
+
+        },
+        (failedResponse: string) => {
+          logger.debug(failedResponse);
+        }).catch((e: any) => {
+          logger.debug("Something went wrong when calling the service from: " + serviceClass);
+          logger.debug(e.message);
+        });
+
+    }
+
+  }
+
+
+}
+
+Package("org.qcobjects.controllers.grid", [
+  GridController,
+  DataGridController
+
+]);