@daracl/form 0.0.3 → 0.0.5

package/src/renderer/FileRender.ts

@@ -0,0 +1,239 @@
+import { FileInfo, FormField } from "@t/FormField";
+import Render from "./Render";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { fileValidator } from "src/rule/fileValidator";
+import Lanauage from "src/util/Lanauage";
+import { customChangeEventCall } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+import * as utils from "src/util/utils";
+
+export default class FileRender extends Render {
+  private element: HTMLInputElement;
+  private removeIds: any[] = [];
+  private uploadFiles: any = {};
+  private fileList: any[] = [];
+  private fileSeq = 0;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.element = rowElement.querySelector(`[name="${field.$xssName}"]`) as HTMLInputElement;
+    this.fileList = field.listItem?.list || [];
+    this.mounted();
+    this.setDefaultOption();
+  }
+
+  mounted() {
+    this.element.addEventListener("change", (e: Event) => {
+      const files = (e.target as HTMLInputElement)?.files;
+
+      if (files) {
+        let fileList = [];
+        for (let item of files) {
+          fileList.push(item);
+        }
+        this.addFiles(fileList);
+      }
+      customChangeEventCall(this.field, e, this, this.fileList);
+      this.valid();
+    });
+
+    this.fileList.forEach((file) => {
+      file.$seq = this.fileSeq += 1;
+    });
+
+    this.setFileList(this.fileList);
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    fieldContainerElement.innerHTML = `
+    <div class="df-field">
+      <span class="file-wrapper">
+        <label class="file-label">
+          <input type="file" name="${field.$xssName}" class="form-field file" multiple />
+          ${Lanauage.getMessage("fileButton")}
+        </label>
+        <i class="daracl-icon help-icon"></i>
+      </span>
+    </div>
+    ${Render.getDescriptionTemplate(field)}
+    <div class="daracl-file-list"></div>
+    <div class="help-message"></div>
+    `;
+
+    this.element = fieldContainerElement.querySelector(`[name="${field.$xssName}"]`) as HTMLInputElement;
+  }
+
+  addFiles(files: any[]) {
+    let addFlag = false;
+
+    const newFiles: FileInfo[] = [];
+
+    for (let item of files) {
+      const fileCheckList = this.fileList.filter((fileItem) => fileItem.fileName == item.name && fileItem.fileSize == item.size && fileItem.lastModified == item.lastModified);
+
+      if (fileCheckList.length > 0) continue;
+      this.fileSeq += 1;
+      this.uploadFiles[this.fileSeq] = item;
+
+      let newFileInfo = {
+        fileName: item.name,
+        $seq: this.fileSeq,
+        fileSize: item.size,
+        lastModified: item.lastModified,
+      } as FileInfo;
+
+      newFiles.push(newFileInfo);
+      addFlag = true;
+    }
+    if (addFlag) {
+      this.setFileList(newFiles);
+      this.fileList.push(...newFiles);
+    }
+  }
+
+  private setFileList(fileList: FileInfo[], initFlag?: boolean | undefined) {
+    const fileListElement = this.rowElement.querySelector(".daracl-file-list");
+
+    if (fileListElement) {
+      if (initFlag === true) {
+        fileListElement.innerHTML = "";
+      }
+
+      const fileTemplateHtml: string[] = [];
+
+      fileList.forEach((file) => {
+        fileTemplateHtml.push(`
+        <div class="file-item" data-seq="${file.$seq}">
+          ${file.fileId ? '<span class="file-icon download"></span>' : '<span class="file-icon"></span>'} <span class="file-icon remove"></span>
+          <span class="file-name">${file.fileName}</span > 
+        </div>`);
+      });
+
+      fileListElement.insertAdjacentHTML("beforeend", fileTemplateHtml.join(""));
+
+      fileList.forEach((item) => {
+        this.removeFileEvent(item, fileListElement);
+        this.downloadFileEvent(item, fileListElement);
+      });
+    }
+  }
+
+  /**
+   * 파일 다운로드 이벤트 처리.
+   *
+   * @param item
+   * @param fileListElement
+   */
+  private downloadFileEvent(item: FileInfo, fileListElement: Element) {
+    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .download`);
+    if (ele) {
+      ele.addEventListener("click", (evt: Event) => {
+        const fileItemElement = (evt.target as Element).closest(".file-item");
+
+        if (fileItemElement) {
+          const attrSeq = fileItemElement.getAttribute("data-seq");
+          if (attrSeq) {
+            const seq = parseInt(attrSeq, 10);
+            const idx = this.fileList.findIndex((v) => v.$seq === seq);
+
+            const item = this.fileList[idx];
+
+            if (item["url"]) {
+              location.href = item["url"];
+              return;
+            }
+
+            if (this.field.fileDownload) {
+              this.field.fileDownload.call(null, { file: item, field: this.field });
+              return;
+            }
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * 파일 삭제  처리.
+   *
+   * @param item
+   * @param fileListElement
+   */
+  private removeFileEvent(item: FileInfo, fileListElement: Element) {
+    const ele = fileListElement.querySelector(`[data-seq="${item.$seq}"] .remove`);
+    if (ele) {
+      ele.addEventListener("click", (evt: Event) => {
+        const fileItemElement = (evt.target as Element).closest(".file-item");
+
+        if (fileItemElement) {
+          const attrSeq = fileItemElement.getAttribute("data-seq");
+          if (attrSeq) {
+            const seq = parseInt(attrSeq, 10);
+            const removeIdx = this.fileList.findIndex((v) => v.$seq === seq);
+
+            const removeItem = this.fileList[removeIdx];
+
+            this.fileList.splice(removeIdx, 1);
+            delete this.uploadFiles[seq];
+            fileItemElement.remove();
+
+            if (removeItem.fileId) {
+              this.removeIds.push(removeItem.fileId);
+            }
+          }
+        }
+        this.valid();
+      });
+    }
+  }
+
+  getValue() {
+    return {
+      uploadFile: Object.values(this.uploadFiles),
+      removeIds: this.removeIds,
+    };
+  }
+
+  public setValueItems(value: any): void {
+    this.fileList = [];
+    this.uploadFiles = [];
+    this.removeIds = [];
+    for (let file of value) {
+      file.$seq = this.fileSeq += 1;
+
+      this.fileList.push(file);
+    }
+
+    this.setFileList(this.fileList, true);
+  }
+
+  setValue(value: any): void {
+    if (utils.isArray(value)) {
+      this.setValueItems(value);
+    }
+    this.element.value = "";
+  }
+
+  reset() {
+    this.setValue("");
+    this.setValueItems([]);
+    resetRowElementStyleClass(this.rowElement);
+  }
+
+  getElement(): HTMLInputElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const validResult = fileValidator(this.element, this.field, this.fileList);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}

package/src/renderer/GridRender.ts

@@ -0,0 +1,289 @@
+import { FieldStyle, 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";
+import styleUtils from "src/util/styleUtils";
+import FormTemplate from "src/FormTemplate";
+import { FormOptions } from "@t/FormOptions";
+import { NumberKeyMap } from "@t/DataMap";
+
+let $$idx = 0;
+
+export default class GridRender extends Render {
+  private customFunction;
+  private gridForm;
+  private allAddRowInfo = {} as NumberKeyMap;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    if (field.renderer) {
+      this.customFunction = field.renderer;
+    } else {
+      this.customFunction = {} as any;
+    }
+
+    const gridFormOptions = {
+      style: {
+        width: "100%",
+        labelWidth: 3,
+        valueWidth: 9,
+        position: "left-right",
+      },
+      autoCreate: false,
+      notValidMessage: "This form is not valid.",
+      fields: [],
+    } as FormOptions;
+
+    this.gridForm = new DaraForm(document.createElement("div"), gridFormOptions);
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+
+  mounted() {
+    this.addRow();
+
+    if (this.customFunction.mounted) {
+      (this.customFunction.mounted as any).call(this, this.field, this.rowElement);
+    }
+
+    this.rowElement.querySelector(".df-grid-add-row-btn")?.addEventListener("click", (evt) => {
+      this.addRow();
+    });
+  }
+
+  static isDataRender(): boolean {
+    return false;
+  }
+
+  static isChildrenCreate(): boolean {
+    return false;
+  }
+
+  createField() {
+    const field = this.field;
+
+    const fieldContainerElement = this.rowElement.querySelector(".df-field-container") as HTMLElement;
+
+    let theadTemplate = [];
+    let colgroupTemplate = [];
+    let addBtnTemplate = [];
+    addBtnTemplate.push("");
+
+    if (field.children) {
+      colgroupTemplate.push("<colgroup>");
+
+      theadTemplate.push("<tr>");
+
+      colgroupTemplate.push(`<col style="width:38px">`);
+      theadTemplate.push("<th>");
+      if (field.gridOptions?.disableAddButton !== true) {
+        theadTemplate.push(`<button type="button" class="df-btn df-grid-add-row-btn" title="Add"><i class="df-icon df-add-icon"></i></button>`);
+      }
+      theadTemplate.push("</th>");
+
+      for (const childField of field.children) {
+        colgroupTemplate.push(`<col style="width:${childField.style?.width ?? "*"}">`);
+        theadTemplate.push(`<th class="df-grid-header">${childField.label}</th>`);
+      }
+      colgroupTemplate.push("</colgroup>");
+      theadTemplate.push("</tr>");
+    }
+
+    fieldContainerElement.innerHTML = `
+    <div class="df-grid-field">
+      ${addBtnTemplate.join("")}
+     <div class="df-grid-container ${field.style?.position ?? ""}" style="height:${field.gridOptions?.height ?? "auto"};">
+        <table class="df-grid">${colgroupTemplate.join("")}<thead>${theadTemplate.join("")}</thead><tbody></tbody></table>
+     </div>
+     </div>
+     `;
+  }
+
+  /**
+   * add row
+   */
+  addRow(valueItem?: any): void {
+    let rowTemplate = [];
+
+    const options = this.daraForm.getOptions();
+    const formTemplate = this.gridForm.formTemplate;
+    const parentName = this.field.$xssName;
+
+    ++$$idx;
+    let addColumns = [];
+    rowTemplate.push(`<tr class="grid-row">`);
+
+    rowTemplate.push("<td>");
+    if (this.field.gridOptions?.disableRemoveButton !== true) {
+      rowTemplate.push(`<button type="button" data-row-idx="${$$idx}" class="df-btn df-grid-row-remove"><i class="df-icon df-remove-icon"></i></button>`);
+    }
+    rowTemplate.push("</td>");
+
+    for (const childField of this.field.children) {
+      let fieldStyle: FieldStyle = styleUtils.fieldStyle(options, childField, null, true);
+
+      let columnField = utils.merge({}, childField) as FormField;
+
+      addColumns.push(columnField);
+      columnField.$orgin = childField;
+      columnField.name = columnField.name + "_" + $$idx;
+      columnField.$xssName = parentName + "_" + utils.getXssFieldName(columnField);
+
+      formTemplate.addRowFieldInfo(columnField);
+
+      rowTemplate.push(`<td id="${columnField.$xssName}"><div class="df-field-container ${columnField.required ? "required" : ""} " style="${fieldStyle.valueStyle}"></div></td>`);
+    }
+    rowTemplate.push("</tr>");
+
+    this.allAddRowInfo[$$idx] = addColumns;
+
+    const addRowElement = utils.templateToElement(rowTemplate.join(""));
+
+    if (addRowElement) {
+      this.rowElement.querySelector("tbody")?.append(addRowElement);
+
+      addRowElement.querySelector(".df-grid-row-remove")?.addEventListener("click", (evt) => {
+        this.removeRow(evt);
+      });
+    }
+
+    valueItem = valueItem ?? {};
+    for (let columnField of addColumns) {
+      columnField.$instance = new (columnField.$renderType as any)(columnField, addRowElement?.querySelector(`#${columnField.$xssName}`), this.gridForm);
+
+      if (valueItem[columnField.$orgin.name]) {
+        columnField.$instance.setValue(valueItem[columnField.$orgin.name]);
+      }
+    }
+  }
+
+  /**
+   * remove row
+   *
+   * @param evt event
+   */
+  removeRow(evt: Event): void {
+    const target = evt.target as Element;
+
+    const rowElement = target.closest("tr");
+
+    if (rowElement) {
+      if (rowElement.parentElement?.childElementCount == 1) return;
+
+      let rowIdx = (evt.currentTarget as Element)?.getAttribute("data-row-idx") || "-1";
+
+      this.removeFieldInfo(rowIdx);
+      rowElement.remove();
+    }
+  }
+
+  /**
+   *
+   * @param rowIdx row index
+   */
+  removeFieldInfo(rowIdx?: string) {
+    let removeFieldArrs = [] as any;
+    if (utils.isEmpty(rowIdx)) {
+      for (let key in this.allAddRowInfo) {
+        removeFieldArrs = removeFieldArrs.concat(this.allAddRowInfo[key]);
+      }
+      this.allAddRowInfo = {} as NumberKeyMap;
+    } else if (rowIdx) {
+      const rowIdxNum = parseInt(rowIdx, 10);
+      removeFieldArrs = removeFieldArrs.concat(this.allAddRowInfo[rowIdxNum]);
+      delete this.allAddRowInfo[rowIdxNum];
+    }
+
+    for (let columnField of removeFieldArrs) {
+      this.gridForm.getFieldInfoMap().removeFieldInfo(columnField.name);
+    }
+  }
+
+  allRemoveRow(): void {
+    this.rowElement.querySelector("tbody")?.replaceChildren();
+    this.removeFieldInfo();
+  }
+
+  getValue() {
+    if (this.customFunction.getValue) {
+      return (this.customFunction.getValue as any).call(this, this.field, this.rowElement);
+    }
+    let result = [];
+    const children = this.field.children;
+    const childrenLength = children.length;
+    for (let idx in this.allAddRowInfo) {
+      const rowColumns = this.allAddRowInfo[idx];
+
+      let rowInfo = {} as any;
+      for (let childIdx = 0; childIdx < childrenLength; childIdx++) {
+        let childField = children[childIdx];
+        rowInfo[childField.name] = this.gridForm.getFieldValue(rowColumns[childIdx].name); // rowColumns[childIdx].$instance.getValue();
+      }
+
+      result.push(rowInfo);
+    }
+    return result;
+  }
+
+  setValue(value: any): void {
+    this.field.$value = value;
+
+    let valueArr: any[] = [];
+    if (Array.isArray(value)) {
+      valueArr = value;
+    } else {
+      if (utils.isPlainObject(value)) {
+        valueArr.push(value);
+      }
+    }
+
+    this.allRemoveRow();
+
+    for (let valueItem of valueArr) {
+      this.addRow(valueItem);
+    }
+  }
+
+  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 = this.gridForm.validForm();
+
+    if (validResult.length > 0) {
+      const firstItem = validResult[0];
+
+      if (firstItem.message) {
+        firstItem.message = "[" + this.field.label + "] " + firstItem.message;
+
+        return firstItem;
+      }
+    }
+
+    return true;
+  }
+
+  focus(): void {}
+}

package/src/renderer/GroupRender.ts

@@ -0,0 +1,47 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import DaraForm from "src/DaraForm";
+
+export default class GroupRender extends Render {
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+  }
+
+  public mounted() {}
+
+  static isDataRender(): boolean {
+    return false;
+  }
+
+  createField() {
+    return "";
+  }
+
+  getValue() {
+    return null;
+  }
+
+  setValue(value: any): void {}
+
+  reset() {}
+
+  getElement(): HTMLElement {
+    return this.rowElement;
+  }
+
+  valid(): any {
+    return true;
+  }
+
+  public addChildField(element: Element) {
+    let addContainer = this.rowElement.querySelector(".df-field-container");
+
+    if (addContainer) {
+      addContainer.append(element);
+    } else {
+      this.rowElement.append(element);
+    }
+  }
+
+  focus(): void {}
+}

package/src/renderer/HiddenRender.ts

@@ -0,0 +1,36 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import DaraForm from "src/DaraForm";
+
+export default class HiddenRender extends Render {
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+    this.field.$value = field.defaultValue;
+  }
+
+  mounted() {}
+
+  createField() {
+    return ``;
+  }
+
+  getValue() {
+    return this.field.$value;
+  }
+
+  setValue(value: any): void {
+    this.field.$value = value;
+  }
+
+  reset() {
+    this.setValue(this.field.defaultValue);
+  }
+
+  getElement() {
+    return;
+  }
+
+  valid(): any {
+    return true;
+  }
+}

package/src/renderer/NumberRender.ts

@@ -0,0 +1,68 @@
+import { FormField } from "@t/FormField";
+import Render from "./Render";
+import { numberValidator } from "src/rule/numberValidator";
+import { resetRowElementStyleClass, invalidMessage } from "src/util/validUtils";
+import { numberInputEvent } from "src/event/renderEvents";
+import DaraForm from "src/DaraForm";
+
+export default class NumberRender extends Render {
+  private element: HTMLInputElement;
+
+  constructor(field: FormField, rowElement: HTMLElement, daraForm: DaraForm) {
+    super(daraForm, field, rowElement);
+
+    this.mounted();
+    this.setDefaultOption();
+    this.setDefaultInfo();
+  }
+
+  mounted() {
+    numberInputEvent(this.field, this.element, this);
+  }
+
+  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 number help-icon" />
+        </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(): HTMLElement {
+    return this.element;
+  }
+
+  valid(): any {
+    const validResult = numberValidator(this.getValue(), this.field);
+
+    invalidMessage(this.field, this.rowElement, validResult);
+
+    return validResult;
+  }
+}