@daracl/form 0.0.4 → 0.0.6

package/src/renderer/CheckboxRender.ts

@@ -0,0 +1,214 @@
+import { FormField, ValuesInfo } from "@t/FormField";
+import Render from "./Render";
+import * as utils from "src/util/utils";
+import { ValidResult } from "@t/ValidResult";
+import { RULES } from "src/constants";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { customChangeEventCall } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+
+export default class CheckboxRender extends Render {
+  private defaultCheckValue: any[] = [];
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.defaultCheckValue = [];
+    let initDefaultValue = [] as any;
+    if (!utils.isUndefined(field.defaultValue)) {
+      if (utils.isArray(field.defaultValue)) {
+        initDefaultValue = field.defaultValue;
+      } else {
+        initDefaultValue = [field.defaultValue];
+      }
+    }
+
+    const valueKey = CheckboxRender.valuesValueKey(field);
+
+    if (utils.isUndefined(this.field.listItem)) {
+      this.setValueItems([{ label: "", value: "Y" }]);
+    }
+
+    let initDefaultValueFlag = false;
+    this.field.listItem?.list?.forEach((item) => {
+      let itemValue = item[valueKey];
+      if (item.selected) {
+        this.defaultCheckValue.push(itemValue ? itemValue : true);
+      }
+      if (initDefaultValue.includes(itemValue)) {
+        initDefaultValueFlag = true;
+      }
+    });
+
+    this.defaultCheckValue = initDefaultValueFlag ? initDefaultValue : this.defaultCheckValue;
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setValue(this.defaultCheckValue, false);
+  }
+
+  public mounted() {
+    this.initEvent();
+  }
+
+  public initEvent() {
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+
+    checkboxes.forEach((ele) => {
+      ele.addEventListener("change", (e: Event) => {
+        customChangeEventCall(this.field, e, this, this.getValue());
+        this.valid();
+      });
+    });
+  }
+
+  public getSelector() {
+    return `input[type="checkbox"][name="${this.field.$xssName}"]`;
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    const templates: string[] = [];
+    const fieldName = field.$xssName;
+
+    const labelKey = Render.valuesLabelKey(field);
+    const valueKey = Render.valuesValueKey(field);
+
+    templates.push(` <div class="df-field"><div class="field-group">`);
+    field.listItem?.list?.forEach((val) => {
+      const checkVal = val[valueKey];
+      templates.push(`
+          <span class="field ${field.listItem.orientation == "vertical" ? "vertical" : "horizontal"}">
+              <label>
+                  <input type="checkbox" name="${fieldName}" value="${checkVal ? utils.replaceXss(checkVal) : ""}" class="form-field checkbox" ${val.selected ? "checked" : ""} ${val.disabled ? "disabled" : ""}  />
+                  ${Render.valuesLabelValue(labelKey, val)}
+              </label>
+          </span>
+      `);
+    });
+    templates.push(`<i class="daracl-icon help-icon"></i></div></div> ${Render.getDescriptionTemplate(field)}<div class="help-message"></div>`);
+
+    fieldContainerElement.innerHTML = templates.join("");
+  }
+
+  public setValueItems(items: any): void {
+    const containerEle = this.rowElement.querySelector(".df-field-container");
+    if (containerEle) {
+      if (this.field.listItem) {
+        this.field.listItem.list = items;
+      } else {
+        this.field.listItem = {
+          list: items,
+        } as ValuesInfo;
+      }
+
+      this.createField();
+
+      if (!utils.isBlank(this.field.$value)) {
+        const currentValue = this.field.$value;
+        this.field.$value = "";
+        this.setValue(currentValue);
+      }
+    }
+  }
+
+  getValue() {
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+
+    if (checkboxes.length > 1) {
+      const checkValue: any[] = [];
+      checkboxes.forEach((ele) => {
+        const checkEle = ele as HTMLInputElement;
+        if (checkEle.checked) {
+          checkValue.push(checkEle.value);
+        }
+      });
+      return checkValue;
+    } else {
+      const checkElement = this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement;
+
+      if (checkElement?.checked) {
+        return checkElement.value ? checkElement.value : true;
+      }
+
+      return checkElement.value ? "" : false;
+    }
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      value = this.field.$value;
+    }
+
+    this.field.$value = value;
+    if (value === true) {
+      (this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement).checked = true;
+      return;
+    }
+
+    if (value === false) {
+      (this.rowElement.querySelector(`[name="${this.field.$xssName}"]`) as HTMLInputElement).checked = false;
+      return;
+    }
+
+    let valueArr: any[] = [];
+    if (Array.isArray(value)) {
+      valueArr = value;
+    } else {
+      valueArr.push(value);
+    }
+
+    const checkboxes = this.rowElement.querySelectorAll(this.getSelector());
+
+    checkboxes.forEach((ele) => {
+      (ele as HTMLInputElement).checked = false;
+    });
+
+    valueArr.forEach((val) => {
+      const ele = this.rowElement.querySelector(`[name="${this.field.$xssName}"][value="${val}"]`) as HTMLInputElement;
+      if (ele) ele.checked = true;
+    });
+  }
+
+  reset() {
+    if (this.field.listItem?.list?.length == 1 && this.defaultCheckValue.length == 1) {
+      this.setValue(true, false);
+    } else {
+      this.setValue(this.defaultCheckValue, false);
+    }
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): any {
+    return this.rowElement.querySelectorAll(`[name="${this.field.$xssName}"]`);
+  }
+
+  public focus() {
+    const elements = this.getElement();
+
+    if (elements && elements.length > 0) {
+      this.getElement()[0].focus();
+    }
+  }
+
+  valid(): any {
+    const value = this.getValue();
+
+    let validResult: ValidResult | boolean = true;
+
+    if (this.field.required && utils.isArray(value)) {
+      if ((value as any[]).length < 1) {
+        validResult = { name: this.field.name, constraint: [] };
+        validResult.constraint.push(RULES.REQUIRED);
+      }
+    }
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/renderer/CustomRender.ts

@@ -0,0 +1,100 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import { invalidMessage, resetRowElementStyleClass } from "src/util/validUtils";
+import DaraForm from "src/DaraForm";
+import * as utils from "src/util/utils";
+import { stringValidator } from "src/rule/stringValidator";
+
+export default class CustomRender extends Render {
+  private customFunction;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+    if (field.renderer) {
+      this.customFunction = field.renderer;
+      this.mounted();
+      this.setDefaultOption();
+      this.setDefaultInfo();
+    } else {
+      this.customFunction = {} as any;
+    }
+  }
+
+  mounted() {
+    if (this.customFunction.mounted) {
+      (this.customFunction.mounted as any).call(this, this.field, this.rowElement);
+    }
+  }
+
+  static isDataRender(): boolean {
+    return false;
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldTemplate = utils.isEmpty(field.template) ? "" : utils.isString(field.template) ? field.template : field.template();
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    fieldContainerElement.innerHTML = ` <div class="df-field">
+        ${fieldTemplate}
+        </div>
+          ${Render.getDescriptionTemplate(field)}
+        <div class="help-message"></div>`;
+  }
+
+  getValue() {
+    if (this.customFunction.getValue) {
+      return (this.customFunction.getValue as any).call(this, this.field, this.rowElement);
+    }
+    return "";
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (this.customFunction.setValue) {
+      if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+        value = this.field.$value;
+      }
+      (this.customFunction.setValue as any).call(this, value, this.field, this.rowElement);
+    }
+
+    this.field.$value = value;
+  }
+
+  reset() {
+    this.setDefaultInfo();
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement() {
+    if (this.customFunction.getElement) {
+      return (this.customFunction.getElement as any).call(this, this.field, this.rowElement);
+    }
+    return null;
+  }
+
+  valid(): any {
+    if (this.customFunction.valid) {
+      const validResult = (this.customFunction.valid as any).call(this, this.field, this.rowElement);
+
+      invalidMessage(this.field, this.rowElement, validResult);
+
+      return;
+    }
+    const validResult = stringValidator(this.getValue(), this.field);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+
+  /**
+   * focus
+   */
+  focus(): void {
+    if (this.customFunction.focus) {
+      (this.customFunction.focus as any).call(this, this.field, this.rowElement);
+    }
+  }
+}

package/src/renderer/DateRender.ts

@@ -0,0 +1,104 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import { stringValidator } from "src/rule/stringValidator";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import DaraForm from "src/DaraForm";
+import DateTimePicker from "@daracl/datetimepicker";
+
+import * as utils from "src/util/utils";
+
+export default class DateRender extends Render {
+  private element: HTMLInputElement;
+  private dateObj: any;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+
+  mounted() {
+    let dateOnSelectEvent: any;
+    this.field.customOptions = Object.assign({}, this.field.customOptions);
+    if (typeof this.field.customOptions.onSelect !== "undefined") {
+      dateOnSelectEvent = typeof this.field.customOptions.onSelect;
+    }
+
+    if (utils.isUndefined(this.field.customOptions.mode)) {
+      if (this.field.renderType == "datemonth" || this.field.renderType == "datehour") {
+        this.field.customOptions.mode = this.field.renderType.replace("date", "");
+      } else {
+        this.field.customOptions.mode = this.field.renderType;
+      }
+    }
+
+    this.field.customOptions.onSelect = (dt: any, e: Event) => {
+      if (dateOnSelectEvent) {
+        dateOnSelectEvent(dt, e);
+      }
+
+      this.setValue(dt);
+
+      this.valid();
+    };
+
+    this.dateObj = new DateTimePicker(this.element, this.field.customOptions, {} as any);
+
+    //this.loadDate();
+  }
+
+  // async loadDate() {
+  //   const DateTimePicker = await import("@daracl/datetimepicker");
+  //   this.dateObj = new DateTimePicker.default(this.element, this.field.customOptions, {} as any);
+  // }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    fieldContainerElement.innerHTML = `
+    <div class="df-field">
+      <input type="text" name="${field.$xssName}" class="form-field text help-icon" autocomplete="off" readonly/>
+     </div>
+     ${Render.getDescriptionTemplate(field)}
+     <div class="help-message"></div>
+     `;
+
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLInputElement;
+  }
+
+  getValue() {
+    return this.element.value;
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+
+    this.field.$value = value;
+    this.element.value = value;
+  }
+
+  reset() {
+    this.setDefaultInfo();
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): HTMLInputElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const validResult = stringValidator(this.getValue(), this.field);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/renderer/DropdownRender.ts

@@ -0,0 +1,149 @@
+import { FormField, ValuesInfo } from "@t/FormField";
+import Render from "./Render";
+import { ValidResult } from "@t/ValidResult";
+import { RULES } from "src/constants";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { dropdownChangeEvent } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+import * as utils from "src/util/utils";
+import Lanauage from "src/util/Lanauage";
+
+export default class DropdownRender extends Render {
+  private element: HTMLSelectElement;
+  private defaultSelected;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    let initDefaultValue = "";
+
+    if (!utils.isUndefined(field.defaultValue)) {
+      initDefaultValue = field.defaultValue;
+    }
+
+    const valueKey = DropdownRender.valuesValueKey(field);
+    let initDefaultValueFlag = false;
+    this.field.listItem?.list?.forEach((item) => {
+      let itemValue = item[valueKey];
+      if (item.selected) {
+        this.defaultSelected = itemValue;
+      }
+      if (itemValue == initDefaultValue) {
+        initDefaultValueFlag = true;
+      }
+    });
+
+    if (initDefaultValueFlag) {
+      this.defaultSelected = initDefaultValue;
+    } else if (!this.defaultSelected) {
+      if (field.customOptions?.disableDefaultOption === true) {
+        this.defaultSelected = this.field.listItem?.list?.length > 0 ? this.field.listItem.list[0][valueKey] || "" : "";
+      }
+    }
+
+    if (utils.isUndefined(this.defaultSelected)) {
+      this.defaultSelected = "";
+    }
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setValue(this.defaultSelected, false);
+  }
+
+  mounted() {
+    dropdownChangeEvent(this.field, this.element, this);
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    let template = ` <div class="df-field"><select name="${field.$xssName}" class="form-field dropdown">
+          ${this.dropdownValuesTemplate(field)}
+          </select> <i class="help-icon"></i></div>
+                ${Render.getDescriptionTemplate(field)}
+      <div class="help-message"></div>
+    `;
+    fieldContainerElement.innerHTML = template;
+
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLSelectElement;
+  }
+
+  public setValueItems(items: any): void {
+    if (this.field.listItem) {
+      this.field.listItem.list = items;
+    } else {
+      this.field.listItem = {
+        list: items,
+      } as ValuesInfo;
+    }
+    this.element.innerHTML = this.dropdownValuesTemplate(this.field);
+
+    if (!utils.isBlank(this.field.$value)) {
+      const currentValue = this.field.$value;
+      this.field.$value = "";
+      this.setValue(currentValue);
+    }
+  }
+
+  getValue() {
+    return this.element.value;
+  }
+
+  setValue(value: any, changeCheckFlag?: boolean): void {
+    if (changeCheckFlag !== false && this.changeEventCall(this.field, null, this, value) === false) {
+      this.element.value = this.field.$value;
+      return;
+    }
+    this.field.$value = value;
+    this.element.value = value;
+  }
+
+  reset() {
+    this.setValue(this.defaultSelected, false);
+    this.setDisabled(false);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const value = this.getValue();
+
+    let validResult: ValidResult | boolean = true;
+
+    if (this.field.required) {
+      if (value.length < 1) {
+        validResult = { name: this.field.name, constraint: [] };
+        validResult.constraint.push(RULES.REQUIRED);
+      }
+    }
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+
+  public dropdownValuesTemplate(field: FormField) {
+    const labelKey = Render.valuesLabelKey(field);
+    const valueKey = Render.valuesValueKey(field);
+    let template = "";
+
+    if (field.customOptions?.disableDefaultOption !== true) {
+      template += `<option value="">${Lanauage.getMessage("selection")}</option>`;
+    }
+    field.listItem?.list?.forEach((val) => {
+      const attr = `${val.selected ? "selected" : ""} ${val.disabled ? "disabled" : ""}`;
+      if (utils.isUndefined(val[valueKey]) && val.label) {
+        template += `<option value="${val.value || ""}" ${attr}>${val.label}</option>`;
+      } else {
+        template += `<option value="${val[valueKey]}" ${attr}>${Render.valuesLabelValue(labelKey, val)}</option>`;
+      }
+    });
+
+    return template;
+  }
+}