@daracl/form 0.0.4 → 0.0.6

package/src/FieldInfoMap.ts

@@ -0,0 +1,356 @@
+import { FIELD_PREFIX } from "src/constants";
+import { FormField } from "./types/FormField";
+import { ValidResult } from "./types/ValidResult";
+import { getRenderer } from "./util/renderFactory";
+import Lanauage from "./util/Lanauage";
+import * as utils from "./util/utils";
+import DaraForm from "./DaraForm";
+
+interface NumberFieldMap {
+  [key: string]: FormField;
+}
+
+interface StringNumberMap {
+  [key: string]: string;
+}
+
+export default class FieldInfoMap {
+  private fieldIdx = 0;
+
+  private allFieldInfo: NumberFieldMap = {};
+
+  private keyNameMap: StringNumberMap = {};
+
+  private conditionFields: string[] = [];
+
+  private fieldPrefix;
+
+  private form;
+
+  constructor(selector: string, form: DaraForm) {
+    this.fieldPrefix = `${FIELD_PREFIX}_${utils.getHashCode(selector)}`;
+    this.form = form;
+  }
+
+  /**
+   * add Field 정보
+   *
+   * @public
+   * @param {FormField} field 폼필드 정보
+   */
+  public addField(field: FormField) {
+    utils.replaceXssField(field);
+    this.fieldIdx += 1;
+    field.$key = `${this.fieldPrefix}_${this.fieldIdx}`;
+    field.$validName = field.name ?? field.label;
+    this.keyNameMap[field.$validName] = field.$key;
+    this.allFieldInfo[field.$key] = field;
+    field.$renderType = getRenderer(field);
+
+    if (field.conditional) {
+      this.conditionFields.push(field.$key);
+    }
+  }
+
+  /**
+   * 필드명으로 필드 정부 구하기
+   *
+   * @public
+   * @param {string} fieldName 필드명
+   * @returns {FormField}
+   */
+  public getFieldName(fieldName: string): FormField {
+    return this.allFieldInfo[this.keyNameMap[fieldName]];
+  }
+
+  /**
+   * 필드 키로 정보 구하기
+   *
+   * @public
+   * @param {string} fieldKey
+   * @returns {FormField}
+   */
+  public get(fieldKey: string): FormField {
+    return this.allFieldInfo[fieldKey];
+  }
+
+  /**
+   * 필드명 있는지 여부 체크.
+   *
+   * @public
+   * @param {string} fieldName 필드명
+   * @returns {boolean}
+   */
+  public hasFieldName(fieldName: string): boolean {
+    if (this.keyNameMap[fieldName] && this.allFieldInfo[this.keyNameMap[fieldName]]) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * 모든 필드 정보
+   *
+   * @public
+   * @returns {NumberFieldMap}
+   */
+  public getAllFieldInfo(): NumberFieldMap {
+    return this.allFieldInfo;
+  }
+
+  /**
+   * 필드 정보 맵에서 지우기
+   *
+   * @public
+   * @param {string} fieldName
+   */
+  public removeFieldInfo(fieldName: string) {
+    delete this.allFieldInfo[this.keyNameMap[fieldName]];
+  }
+
+  /**
+   * 모든 필드값 구하기
+   *
+   * @public
+   * @param {boolean} validationCheck
+   * @returns {*}
+   */
+  public getAllFieldValue(formValue: any, validationCheck: boolean) {
+    const useTypeValue = this.form.getOptions().useTypeValue;
+
+    if (validationCheck !== true) {
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        formValue = addFormValue(formValue, fieldInfo, useTypeValue);
+      }
+      return formValue;
+    }
+
+    return new Promise((resolve, reject) => {
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        if (!fieldInfo.$instance.isEnableView()) {
+          continue;
+        }
+
+        let fieldValid = this.getFieldValidation(fieldInfo, true);
+
+        if (fieldValid !== true) {
+          reject(new Error(fieldValid.message, { cause: fieldValid }));
+          return;
+        }
+
+        formValue = addFormValue(formValue, fieldInfo, useTypeValue);
+      }
+
+      resolve(formValue);
+    });
+  }
+
+  public getFormDataValue(formValue: any, validationCheck: boolean) {
+    if (validationCheck !== true) {
+      let reval = new FormData();
+
+      for (let [key, value] of Object.entries(formValue)) {
+        reval.set(key, value as any);
+      }
+
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        addFieldFormData(reval, fieldInfo, fieldInfo.$instance.getValue());
+      }
+
+      return reval;
+    }
+
+    return new Promise((resolve, reject) => {
+      let reval = new FormData();
+
+      for (let [key, value] of Object.entries(formValue)) {
+        reval.set(key, value as any);
+      }
+
+      for (let [key, fieldInfo] of Object.entries(this.allFieldInfo)) {
+        if (!fieldInfo.$instance.isEnableView()) {
+          continue;
+        }
+
+        let fieldValid = this.getFieldValidation(fieldInfo, true);
+
+        if (fieldValid !== true) {
+          reject(new Error(fieldValid.message, { cause: fieldValid }));
+          return;
+        }
+
+        addFieldFormData(reval, fieldInfo, fieldInfo.$instance.getValue());
+      }
+
+      resolve(reval);
+    });
+  }
+
+  /**
+   *
+   *
+   * @param field
+   * @returns
+   */
+  public isConditionFieldCheck(field: FormField) {
+    let parent = field;
+
+    while (typeof parent !== "undefined") {
+      if (!this.isConditionField(parent)) {
+        return false;
+      }
+
+      parent = parent.$parent;
+    }
+
+    return true;
+  }
+
+  /**
+   * field 활성 비활성화 여부.
+   *
+   * @param field form field
+   * @returns
+   */
+  public isConditionField(field: FormField) {
+    if (!this.conditionFields.includes(field.$key)) {
+      return true;
+    }
+
+    let condFlag = false;
+
+    if (field.conditional.custom) {
+      condFlag = field.conditional.custom.call(null, field);
+    } else {
+      if (field.conditional.field) {
+        const condField = this.getFieldName(field.conditional.field);
+
+        if (condField) {
+          if (field.conditional.eq == condField.$instance.getValue()) {
+            condFlag = true;
+          }
+        }
+      }
+    }
+
+    return condFlag;
+  }
+
+  /**
+   * 컬럼 로우 보이고 안보이기 체크.
+   *
+   * @public
+   */
+  public conditionCheck() {
+    this.conditionFields.forEach((fieldKey) => {
+      const fieldInfo = this.allFieldInfo[fieldKey];
+
+      let condFlag = this.isConditionField(fieldInfo);
+
+      if (condFlag) {
+        fieldInfo.$instance.show();
+      } else {
+        fieldInfo.$instance.hide();
+      }
+    });
+  }
+
+  /**
+   * field validation check
+   *
+   * @param fieldInfo FormField
+   * @returns boolean true or ValidResult
+   */
+  public getFieldValidation(fieldInfo: FormField, focusFlag: boolean | undefined) {
+    if (!this.isConditionFieldCheck(fieldInfo)) {
+      return true;
+    }
+
+    const renderInfo = fieldInfo.$instance;
+    let fieldValid = renderInfo.valid();
+
+    if (fieldValid === true) return true;
+
+    if (focusFlag) {
+      renderInfo.focus();
+    }
+    fieldValid = fieldValid as ValidResult;
+    if (utils.isUndefined(fieldValid.message)) {
+      fieldValid.message = Lanauage.validMessage(fieldInfo, fieldValid)[0];
+    }
+
+    return fieldValid;
+  }
+}
+
+/**
+ * add form value
+ * @param formData {Object} return Object value
+ * @param fieldInfo {FormField} field info
+ * @param fieldValue {any} form value
+ */
+function addFormValue(formData: any, fieldInfo: FormField, useTypeValue?: boolean) {
+  if (utils.ignoreValueField(fieldInfo)) {
+    return formData;
+  }
+
+  const fieldValue = fieldInfo.$instance.getValue();
+
+  if (fieldInfo.renderType === "file") {
+    const uploadFiles = fieldValue["uploadFile"];
+
+    formData[fieldInfo.$validName] = uploadFiles;
+    formData[fieldInfo.$validName + "RemoveIds"] = fieldValue["removeIds"];
+  } else {
+    if (useTypeValue !== true) {
+      if (utils.isTabType(fieldInfo)) {
+        for (let [key, value] of Object.entries(fieldValue)) {
+          formData[key] = value;
+        }
+      } else {
+        if (!utils.isEmpty(fieldInfo.name)) {
+          formData[fieldInfo.name] = fieldValue;
+        }
+      }
+    } else {
+      formData[fieldInfo.$validName] = fieldValue;
+    }
+  }
+
+  return formData;
+}
+
+function addFieldFormData(formData: FormData, fieldInfo: FormField, useTypeValue?: boolean) {
+  if (utils.ignoreValueField(fieldInfo)) {
+    return formData;
+  }
+
+  const fieldValue = fieldInfo.$instance.getValue();
+
+  if (fieldInfo.renderType === "file") {
+    const uploadFiles = fieldValue["uploadFile"];
+    formData.delete(fieldInfo.$validName);
+    for (let uploadFile of uploadFiles) {
+      formData.append(fieldInfo.$validName, uploadFile);
+    }
+
+    formData.set(fieldInfo.$validName + "RemoveIds", fieldValue["removeIds"]);
+  } else {
+    if (useTypeValue !== true) {
+      if (utils.isTabType(fieldInfo)) {
+        for (let [key, value] of Object.entries(fieldValue)) {
+          formData.set(key, value as any);
+        }
+      } else {
+        if (!utils.isEmpty(fieldInfo.name)) {
+          formData.set(fieldInfo.$validName, fieldValue);
+        }
+      }
+    } else {
+      formData.set(fieldInfo.$validName, fieldValue);
+    }
+  }
+
+  return formData;
+}

package/src/FormTemplate.ts

@@ -0,0 +1,207 @@
+import { FormOptions } from "@t/FormOptions";
+import { FieldStyle, FormField } from "@t/FormField";
+import * as utils from "./util/utils";
+import FieldInfoMap from "src/FieldInfoMap";
+
+import styleUtils from "./util/styleUtils";
+import DaraForm from "./DaraForm";
+import TabRender from "./renderer/TabRender";
+import GridRender from "./renderer/GridRender";
+
+/**
+ * form template
+ *
+ * @class FormTemplate
+ * @typedef {FormTemplate}
+ */
+export default class FormTemplate {
+  private readonly options: FormOptions;
+  private readonly formElement;
+
+  private fieldInfoMap;
+
+  private daraform: DaraForm;
+
+  private addRowFields: string[] = [];
+
+  constructor(daraform: DaraForm, formElement: Element, fieldInfoMap: FieldInfoMap) {
+    this.daraform = daraform;
+    this.options = daraform.getOptions();
+    this.formElement = formElement;
+
+    this.fieldInfoMap = fieldInfoMap;
+  }
+
+  /**
+   * field row 추가.
+   *
+   * @param field
+   */
+  public addRow(field: FormField) {
+    if (this.checkHiddenField(field)) {
+      return;
+    }
+
+    this.addRowFields = [];
+
+    this.addRowTemplate(field);
+  }
+
+  /**
+   * 그룹 템플릿
+   *
+   * @param {FormField} field
+   * @returns {string} row template
+   */
+  public addRowTemplate(field: FormField): void {
+    let labelHideFlag = this.isLabelHide(field);
+
+    let fieldStyle: FieldStyle = styleUtils.fieldStyle(this.options, field, null, labelHideFlag);
+
+    this.addRowFieldInfo(field);
+
+    const rowElement = utils.templateToElement(`
+        <div class="df-row form-group ${fieldStyle.fieldClass}" id="${field.$key}">
+          ${labelHideFlag ? "" : `<div class="df-label ${fieldStyle.labelClass} ${fieldStyle.labelAlignClass}" title="${field.label ?? ""}" style="${fieldStyle.labelStyle}">${this.getLabelTemplate(field)}</div>`}
+
+          <div class="df-field-container ${fieldStyle.valueClass} ${field.required ? "required" : ""}" style="${fieldStyle.valueStyle}"></div>
+        </div>
+    `);
+
+    if (rowElement) {
+      this.createField(field, rowElement);
+      this.formElement.append(rowElement);
+
+      if (field.children) {
+        this.childTemplate(field, fieldStyle);
+      }
+    }
+  }
+
+  public createField(field: FormField, element: Element): void {
+    field.$instance = new (field.$renderType as any)(field, element, this.daraform);
+  }
+
+  /**
+   * child template
+   *
+   * @param {FormField} field
+   * @param {FieldStyle} parentFieldStyle
+   * @returns {*}
+   */
+  public childTemplate(field: FormField, parentFieldStyle: FieldStyle): void {
+    let beforeField: FormField = null as any;
+    let firstFlag = true;
+    let isEmptyLabel = false;
+
+    if (!(field.$renderType as any).isChildrenCreate()) {
+      return;
+    }
+
+    const rowElement = document.createElement("div");
+    rowElement.classList.add("df-row", parentFieldStyle.rowStyleClass ?? "");
+
+    let idx = 0;
+
+    for (const childField of field.children) {
+      if (utils.isEmpty(childField)) {
+        throw new Error(`parent field :[${field.$validName}], children index ${idx},  empty [${childField}]`);
+      }
+
+      childField.$parent = field;
+      ++idx;
+
+      if (this.checkHiddenField(childField)) {
+        continue;
+      }
+
+      this.addRowFieldInfo(childField);
+
+      if (firstFlag) {
+        beforeField = childField;
+      }
+
+      let labelHideFlag = this.isLabelHide(childField);
+
+      let childFieldStyle;
+
+      let labelTemplate = "";
+      if (labelHideFlag) {
+        childFieldStyle = styleUtils.fieldStyle(this.options, childField, beforeField, !isEmptyLabel);
+        labelTemplate = isEmptyLabel ? `<span class="df-label empty ${childFieldStyle.labelClass}" style="${childFieldStyle.labelStyle}"></span>` : "";
+      } else {
+        childFieldStyle = styleUtils.fieldStyle(this.options, childField, beforeField, false);
+        labelTemplate = `<span class="df-label ${childFieldStyle.labelClass} ${childFieldStyle.labelAlignClass}" title="${childField.label ?? ""}" style="${childFieldStyle.labelStyle}">${this.getLabelTemplate(childField)}</span>`;
+      }
+
+      const groupElement = utils.templateToElement(`<div class="form-group ${childFieldStyle.fieldClass}" style="${childFieldStyle.fieldStyle}" id="${childField.$key}">
+        ${labelTemplate}
+        <span class="df-field-container ${childFieldStyle.valueClass} ${childField.required ? "required" : ""}" style="${childFieldStyle.valueStyle}"></span>
+      </div>`);
+
+      if (groupElement) {
+        this.createField(childField, groupElement);
+        rowElement.append(groupElement);
+
+        if (childField.children) {
+          this.childTemplate(childField, childField.children ? childFieldStyle : parentFieldStyle);
+        }
+      }
+      if (!labelHideFlag) {
+        isEmptyLabel = true;
+      }
+
+      firstFlag = false;
+    }
+
+    field.$instance.addChildField(rowElement);
+  }
+
+  /**
+   * label template
+   *
+   * @param {FormField} field form field
+   * @returns {string} template string
+   */
+  public getLabelTemplate(field: FormField) {
+    const requiredTemplate = field.required ? `<span class="required"></span>` : "";
+    const tooltipTemplate = utils.isBlank(field.tooltip) ? "" : `<span class="df-tooltip">?<span class="tooltip">${field.tooltip}</span></span>`;
+
+    return `${field.label ?? ""} ${tooltipTemplate} ${requiredTemplate}`;
+  }
+
+  /**
+   * label 숨김 여부
+   *
+   * @param field formfield
+   * @returns
+   */
+  public isLabelHide(field: FormField): boolean {
+    return field.style?.labelHide || utils.isUndefined(field.label);
+  }
+
+  public checkHiddenField(field: FormField) {
+    if (utils.isHiddenField(field)) {
+      this.fieldInfoMap.addField(field);
+      field.$instance = new (field.$renderType as any)(field, null, this.daraform);
+
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * add row file map
+   *
+   * @param {FormField} field
+   */
+  public addRowFieldInfo(field: FormField) {
+    if (!utils.isBlank(field.name) && this.fieldInfoMap.hasFieldName(field.name)) {
+      throw new Error(`Duplicate field name "${field.name}"`);
+    }
+
+    this.fieldInfoMap.addField(field);
+    this.addRowFields.push(field.$key);
+  }
+}

package/src/constants.ts

@@ -0,0 +1,100 @@
+import NumberRender from "src/renderer/NumberRender";
+import TextAreaRender from "src/renderer/TextAreaRender";
+import DropdownRender from "src/renderer/DropdownRender";
+import TextRender from "src/renderer/TextRender";
+import CheckboxRender from "src/renderer/CheckboxRender";
+import RadioRender from "src/renderer/RadioRender";
+import PasswordRender from "src/renderer/PasswordRender";
+import FileRender from "src/renderer/FileRender";
+import CustomRender from "./renderer/CustomRender";
+import GroupRender from "./renderer/GroupRender";
+import HiddenRender from "./renderer/HiddenRender";
+import ButtonRender from "./renderer/ButtonRender";
+import RangeRender from "./renderer/RangeRender";
+import DateRender from "./renderer/DateRender";
+import TabRender from "./renderer/TabRender";
+import GridRender from "./renderer/GridRender";
+
+export type FORM_MODE = "new" | "modify" | "view";
+
+export const RULES = {
+  NAN: "nan",
+  MIN: "minimum",
+  EXCLUSIVE_MIN: "exclusiveMinimum",
+  MAX: "maximum",
+  EXCLUSIVE_MAX: "exclusiveMaximum",
+  MIN_LENGTH: "minLength",
+  MAX_LENGTH: "maxLength",
+  BETWEEN: "between",
+  BETWEEN_EXCLUSIVE_MIN: "betweenExclusiveMin",
+  BETWEEN_EXCLUSIVE_MAX: "betweenExclusiveMax",
+  BETWEEN_EXCLUSIVE_MINMAX: "betweenExclusiveMinMax",
+  REGEXP: "regexp",
+  REQUIRED: "required",
+  VALIDATOR: "validator",
+} as const;
+
+export const FIELD_PREFIX = "dff"; // daracl form field
+
+export const RENDER_TEMPLATE: any = {
+  number: NumberRender,
+  textarea: TextAreaRender,
+  dropdown: DropdownRender,
+  checkbox: CheckboxRender,
+  radio: RadioRender,
+  text: TextRender,
+  password: PasswordRender,
+  file: FileRender,
+  custom: CustomRender,
+  group: GroupRender,
+  hidden: HiddenRender,
+  button: ButtonRender,
+  range: RangeRender,
+  datehour: DateRender,
+  datemonth: DateRender,
+  date: DateRender,
+  datetime: DateRender,
+  tab: TabRender,
+  grid: GridRender,
+};
+
+export const ALIGN = {
+  left: "left",
+  center: "center",
+  right: "right",
+} as const;
+
+export type TEXT_ALIGN_TYPE = (typeof ALIGN)[keyof typeof ALIGN];
+
+export type RENDER_TYPE = "number" | "text" | "file" | "textarea" | "dropdown" | "radio" | "checkbox" | "date" | "datetime" | "dateyear" | "datemonth" | "datehour" | "group" | "custom";
+
+export type REGEXP_TYPE = "email" | "url" | "alpha" | "alpha-num";
+
+export type PASSWORD_TYPE = "number" | "upper" | "upper-special" | "upper-special-number"; // 숫자 | 대문자 포함, 대문자 특수문자 포함, 대문자 특수문자 숫자
+
+export type FIELD_POSITION = "top" | "left" | "left-left" | "left-right" | "right" | "right-left" | "right-right" | "bottom";
+
+export type ORIENTATION_TYPE = "horizontal" | "vertical";
+
+interface StringArrayMap {
+  [key: string]: string[];
+}
+
+export const FIELD_POSITION_STYLE: StringArrayMap = {
+  "top-left": ["top", "txt-left"],
+  "top-center": ["top", "txt-center"],
+  "top-right": ["top", "txt-right"],
+  "left-left": ["", "txt-left"],
+  "left-center": ["", "txt-center"],
+  "left-right": ["", "txt-right"],
+  "right-right": ["right", "txt-right"],
+  "right-center": ["right", "txt-center"],
+  "right-left": ["right", "txt-left"],
+  "bottom-left": ["bottom", "txt-left"],
+  "bottom-center": ["bottom", "txt-center"],
+  "bottom-right": ["bottom", "txt-right"],
+};
+FIELD_POSITION_STYLE["top"] = FIELD_POSITION_STYLE["top-left"];
+FIELD_POSITION_STYLE["right"] = FIELD_POSITION_STYLE["right-right"];
+FIELD_POSITION_STYLE["left"] = FIELD_POSITION_STYLE["left-left"];
+FIELD_POSITION_STYLE["bottom"] = FIELD_POSITION_STYLE["bottom-left"];

package/src/event/renderEvents.ts

@@ -0,0 +1,41 @@
+import { FormField } from "@t/FormField";
+import Render from "src/renderer/Render";
+import * as utils from "src/util/utils";
+
+export const inputEvent = (field: FormField, element: Element, renderInfo: Render) => {
+  element.addEventListener("input", (e: Event) => {
+    customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+    renderInfo.valid();
+  });
+};
+
+export const numberInputEvent = (field: FormField, element: HTMLInputElement, renderInfo: Render) => {
+  element.addEventListener("keyup", (e: any) => {
+    const val = e.target.value;
+
+    if (!utils.isNumber(val)) {
+      element.value = val.replace(/[^0-9\.\-\+]/g, "");
+      e.preventDefault();
+    }
+    customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+    renderInfo.valid();
+  });
+
+  /*
+    element.addEventListener('input', (e: any) => {
+        customChangeEventCall(field, e, renderInfo);
+        renderInfo.valid();
+    })
+    */
+};
+
+export const dropdownChangeEvent = (field: FormField, element: Element, renderInfo: Render) => {
+  element.addEventListener("change", (e: any) => {
+    customChangeEventCall(field, e, renderInfo, renderInfo.getValue());
+    renderInfo.valid();
+  });
+};
+
+export const customChangeEventCall = (field: FormField, e: Event, renderInfo: Render, value: any) => {
+  renderInfo.changeEventCall(field, e, renderInfo, value);
+};