@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/models/common/common.model.ts

@@ -0,0 +1,39 @@
+import { NzUploadFile } from 'ng-zorro-antd/upload';
+import { ObjectStorage } from './object-storage.model';
+import { FormMode } from '../form';
+
+export interface ExtendUploadFile {
+  fromServer?: boolean;
+  markedForDelete?: boolean;
+  objStorage: ObjectStorage;
+}
+
+export interface MyUploadFile extends NzUploadFile {
+  fromServer?: boolean;
+  markedForDelete?: boolean;
+  objStorage: ObjectStorage;
+  isTemp: boolean;
+  previewUrl: string;
+  // Trạng thái upload tùy chỉnh: loading → success | error.
+  // Dùng tên khác để tránh xung đột với NzUploadFile.status (UploadFileStatus).
+  uploadStatus?: 'loading' | 'success' | 'error';
+}
+
+export class Suffix {
+  key!: string;
+  label?: string;
+  class?: string;
+  description: string;
+  icon?: {
+    type: 'mdi' | 'zorro';
+    value: string;
+    class?: string;
+  };
+  visibleOn?: FormMode[]; // nếu undefined => hiển thị tất cả mode
+
+  constructor(init: Partial<Suffix>) {
+    this.visibleOn = ['add', 'edit'];
+    this.description = '';
+    Object.assign(this, init);
+  }
+}

package/src/lib/shared/models/common/field-dependency.model.ts

@@ -0,0 +1,27 @@
+import { COMBINE_DEPEND_TYPES } from '../../consts/common';
+
+export interface FieldDependency {
+  // Key của field sẽ phụ thuộc.
+  fieldKey: string;
+
+  // Tên pararms sẽ dùng gọi api sau dấu ? theo giá trị của field đang phụ thuộc (có thể hiểu là parent).
+  paramKey: string;
+
+  // Label của field sẽ phụ thuộc.
+  fieldLabel?: string;
+
+  // Xử lý biến đổi giá trị nếu cần.
+  mapFn?: (value: any) => any;
+}
+
+/**
+ * FieldDependencyType:
+ * - 'all'  → cần tất cả field cha có giá trị mới gọi API
+ * - 'any'  → chỉ cần 1 field cha có giá trị cũng gọi API theo từng cha
+ */
+export type FieldDependencyType = 'all' | 'any';
+
+export interface LastChangedParent {
+  key: string;
+  value: unknown;
+}

package/src/lib/shared/models/common/file-config.model.ts

@@ -0,0 +1,22 @@
+export interface ApiFileConfig {
+  // Upload url để upload file đến máy chủ.
+  uploadUrl: string;
+
+  // Delete url để xóa file khỏi máy chủ.
+  deleteUrl: string;
+
+  uploadByPath?: boolean;
+
+  uploadPath?: string;
+
+  isOriginName?: boolean;
+
+  // Custom upload theo mimeTypes.
+  perMimeTypeConfig?: Record<
+    string,
+    {
+      uploadUrl?: string;
+      buildFormData?: (file: File, extraParams?: Record<string, any>) => FormData;
+    }
+  >;
+}

package/{lib/shared/models/common/index.d.ts → src/lib/shared/models/common/index.ts}

@@ -1,7 +1,7 @@
-export * from "./api-config.model";
-export * from "./field-dependency.model";
-export * from "./api-response.model";
-export * from "./object-storage.model";
-export * from "./output-value-type.model";
-export * from "./file-config.model";
-export * from "./view-mode.model";
+export * from "./api-config.model";
+export * from "./field-dependency.model";
+export * from "./api-response.model";
+export * from "./object-storage.model";
+export * from "./output-value-type.model";
+export * from "./file-config.model";
+export * from "./view-mode.model";

package/src/lib/shared/models/common/obj-field.model.ts

@@ -0,0 +1,68 @@
+import { RawColumn, TableCellTypeEnum } from './table-models';
+import { BaseField } from '../fields/field.model';
+
+export class ObjField {
+  required!: number;
+  componentUI!: string;
+  appliedFields?: string[];
+  allowShare: number = 0;
+  allowView?: number;
+  allowSort?: number;
+  allowStatistic?: number;
+  code!: string;
+  createdAt!: string;
+  dataType!: string;
+  id!: string;
+  name!: string;
+  nameEn!: string;
+  objClassCode!: string;
+  objClassSubCode!: string;
+  codeOnDb?: string;
+  value?: any;
+  apiURL?: string;
+  seqNum?: number;
+  parentCode?: string;
+  parentCondition?: string;
+  parentApiBindValue!: string;
+  preventEdit?: number;
+  minSize?: number;
+  maxSize?: number;
+  minValue?: string;
+  maxValue?: string;
+  validateRegex?: string;
+  extra?: string; // JSON string khi parse sẽ thành Extra model.
+  note?: string;
+  transportType?: any;
+  iconData?: string;
+  objTypeGroupCode?: string;
+  viewType?: string;
+}
+
+interface FieldFormConfig {
+  formTypes: string[]; // mảng string động, từng giá trị là tên key truy cập cấu hình ở prop configs bên dưới.
+  configs: Record<string, BaseField<any>>; // config theo key formType.
+}
+
+export interface Extra {
+  // form.
+  form?: FieldFormConfig;
+
+  // table.
+  table?: Partial<RawColumn> & {
+    cellType: TableCellTypeEnum;
+    seqNum: number;
+    valueConfig?: {
+      params: string[];
+      body: string;
+    };
+    subValueConfig?: {
+      params: string[];
+      body: string;
+    };
+    dateFormat: string;
+  };
+  // ..........................
+
+  // chart.
+  // ..........................
+}

package/src/lib/shared/models/common/object-storage.model.ts

@@ -0,0 +1,15 @@
+export interface ObjectStorage {
+  id: string;
+  uid?: string; // Để xem là phần tử nào trong mảng NzUploadFile
+  name?: string;
+  contentType?: string;
+  size?: number;
+  bucket?: string;
+  isDir?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+  path?: string;
+  isPublic?: boolean;
+  originalName?: string;
+  nameAlias?: string;
+}

package/{lib/shared/models/common/output-value-type.model.d.ts → src/lib/shared/models/common/output-value-type.model.ts}

@@ -1,4 +1,4 @@
-export type SelectOutputValueType = 'single' | 'object' | 'sourceObject';
-export type DatePickerOutputValueType = 'string' | 'date';
-export type DateRangeOutputValueType = 'string' | 'string-array' | 'date-array';
-export type UploadOutputValueType = 'file' | 'object-storage' | 'object';
+export type SelectOutputValueType = 'single' | 'object' | 'sourceObject';
+export type DatePickerOutputValueType = 'string' | 'date';
+export type DateRangeOutputValueType = 'string' | 'string-array' | 'date-array';
+export type UploadOutputValueType = 'file' | 'object-storage' | 'object';

package/src/lib/shared/models/common/table-models.ts

@@ -0,0 +1,16 @@
+export enum TableCellTypeEnum {
+  ACTION = 'action',
+  CHECK = 'check',
+  SUBTEXT = 'subtext',
+  IMAGE = 'image',
+  BADGE = 'badge',
+  INDEX = 'index',
+  TEXT = 'text',
+  ICON_TEXT = 'icon-text',
+  SWAP_FUNC = 'swap',
+  EMPTY = 'empty',
+}
+
+export interface RawColumn {
+  [key: string]: any;
+}

package/{lib/shared/models/common/view-mode.model.d.ts → src/lib/shared/models/common/view-mode.model.ts}

@@ -1 +1 @@
-export type ViewMode = 'form' | 'text';
+export type ViewMode = 'form' | 'text';

package/{lib/shared/models/controls/control.model.d.ts → src/lib/shared/models/controls/control.model.ts}

@@ -1,2 +1,3 @@
-import { CONTROL_TYPES } from '../../consts/controls';
-export type ControlType = (typeof CONTROL_TYPES)[number];
+import { CONTROL_TYPES } from '../../consts/controls';
+
+export type ControlType = (typeof CONTROL_TYPES)[number];

package/{lib/shared/models/controls/index.d.ts → src/lib/shared/models/controls/index.ts}

@@ -1 +1 @@
-export * from './control.model';
+export * from './control.model';

package/src/lib/shared/models/fields/date/base-date-field.model.ts

@@ -0,0 +1,52 @@
+import { FormControl } from '@angular/forms';
+import { BaseField } from '../field.model';
+import { DATE_FIELD_TYPES } from '../../../consts/fields';
+import { ControlTypeEnum } from '../../../enums/controls';
+
+export type DateFieldType = (typeof DATE_FIELD_TYPES)[number];
+
+/**
+ * Interface base chung cho Các dạng Date.
+ */
+export abstract class BaseDateField<K> extends BaseField<K> {
+  // Dạng date hiển thị.
+  format: string;
+
+  // Cho phép chọn ngày quá khứ?
+  allowPastDates?: boolean;
+
+  // Cho phép chọn ngày tương lai?
+  allowFutureDates?: boolean;
+
+  /**
+   * Props validation chung cho các dạng Date.
+   */
+
+  constructor(init: Partial<BaseDateField<K>>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Date.
+     */
+    this.controlType = ControlTypeEnum.Date;
+
+    this.allowPastDates = true;
+    this.allowFutureDates = true;
+    this.format = 'dd-MM-yyyy';
+
+    // this.value = undefined;
+
+    Object.assign(this, init);
+  }
+
+  // Tạo Form Control cho Input Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getCommonValidators();
+    const customValidators = this.getCustomValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+
+  abstract override getDefaultValue(): K;
+
+  abstract override toFormValue(modelValue: unknown): K;
+}

package/src/lib/shared/models/fields/date/date-picker-field.model.ts

@@ -0,0 +1,43 @@
+import { DatePickerOutputValueTypeEnum } from '../../../enums/common';
+import { FieldTypeEnum } from '../../../enums/fields';
+import { normalizeToDate } from '../../../utils/date';
+import { DatePickerOutputValueType } from '../../common';
+import { BaseDateField } from './base-date-field.model';
+
+const DEFAULT_DATE_PICKER_VALUE = '';
+
+/**
+ * Interface của Date type là Picker.
+ */
+export class DatePickerField extends BaseDateField<string | Date | null> {
+  // Dữ liệu sẽ gửi từ form khi submit.
+  outputAs!: DatePickerOutputValueType;
+
+  // Custom function to disable dates
+  disabledDateFn?: (current: Date) => boolean;
+
+  constructor(init: Partial<DatePickerField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Date picker.
+     */
+    this.type = FieldTypeEnum.DatePicker;
+    this.value = DEFAULT_DATE_PICKER_VALUE;
+    this.initialValue = DEFAULT_DATE_PICKER_VALUE;
+    this.outputAs = DatePickerOutputValueTypeEnum.String;
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | Date {
+    return DEFAULT_DATE_PICKER_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): Date | null {
+    const value = modelValue as string | Date;
+
+    if (!value) return null;
+
+    return normalizeToDate(value);
+  }
+}

package/src/lib/shared/models/fields/date/date-range-field.model.ts

@@ -0,0 +1,52 @@
+import { DateRangeOutputValueTypeEnum } from "../../../enums/common";
+import { FieldTypeEnum } from "../../../enums/fields";
+import { normalizeToDate } from "../../../utils/date";
+import { DateRangeOutputValueType } from "../../common";
+import { BaseDateField } from "./base-date-field.model";
+
+const DEFAULT_DATE_RANGE_VALUE: string[] | Date[] = [];
+
+/**
+ * Interface của Date type là Range.
+ */
+export class DateRangeField extends BaseDateField<string | string[] | Date[]> {
+  // Dữ liệu sẽ gửi từ form khi submit.
+  outputAs!: DateRangeOutputValueType;
+
+  // Placeholder cho Date range (mảng gồm ngày bắt đầu và kết thúc)
+  placeholders?: string[];
+
+  constructor(init: Partial<DateRangeField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Date range.
+     */
+    this.type = FieldTypeEnum.DateRange;
+    this.value = DEFAULT_DATE_RANGE_VALUE;
+    this.initialValue = DEFAULT_DATE_RANGE_VALUE;
+    this.outputAs = DateRangeOutputValueTypeEnum.StringArray;
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string[] | Date[] {
+    return DEFAULT_DATE_RANGE_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string[] | Date[] {
+    let value = modelValue as string | string[] | Date[];
+
+    if (typeof value === "string") {
+      value = value.split(",").map((dateStr) => dateStr.trim());
+    }
+
+    let dateRange: Date[] = [];
+
+    if (value?.length === 2) {
+      const startDate = normalizeToDate(value[0]);
+      const endDate = normalizeToDate(value[1]);
+      if (startDate && endDate) dateRange = [startDate, endDate];
+    }
+    return dateRange;
+  }
+}

package/{lib/shared/models/fields/date/index.d.ts → src/lib/shared/models/fields/date/index.ts}

@@ -1,3 +1,3 @@
-export * from './base-date-field.model';
-export * from './date-picker-field.model';
-export * from './date-range-field.model';
+export * from './base-date-field.model';
+export * from './date-picker-field.model';
+export * from './date-range-field.model';

package/src/lib/shared/models/fields/field-grid.model.ts

@@ -0,0 +1,10 @@
+import { EmbeddedProperty } from "ng-zorro-antd/grid";
+
+export interface FieldGrid {
+  xs?: string | number | EmbeddedProperty | null;
+  sm?: string | number | EmbeddedProperty | null;
+  md?: string | number | EmbeddedProperty | null;
+  lg?: string | number | EmbeddedProperty | null;
+  xl?: string | number | EmbeddedProperty | null;
+  xxl?: string | number | EmbeddedProperty | null;
+}

package/src/lib/shared/models/fields/field-group.model.ts

@@ -0,0 +1,50 @@
+import { TemplateRef } from '@angular/core';
+import { BaseField } from './field.model';
+
+// Dữ liệu sau khi đã tiến hành xử lý gom nhóm từ fields và groups.
+export class GroupedFields {
+  noGroup: BaseField<any>[];
+  grouped: {
+    group: FieldGroup;
+    fields: BaseField<any>[];
+  }[];
+
+  constructor(init: Partial<GroupedFields>) {
+    this.noGroup = [];
+    this.grouped = [];
+
+    Object.assign(this, init);
+  }
+}
+
+// Đại diện cho 1 group.
+export class FieldGroup {
+  // Nhãn của nhóm field.
+  label!: string;
+
+  // Mã nhóm field.
+  code!: string;
+
+  template?: TemplateRef<any>;
+
+  // Thứ tự hiển thị nhóm field.
+  order!: number;
+
+  // Có mở sẵn collapse hay không?
+  isActive: boolean;
+
+  showArrow: boolean;
+
+  required: boolean;
+
+  disabled: boolean;
+
+  constructor(init: Partial<FieldGroup>) {
+    this.isActive = false;
+    this.showArrow = true;
+    this.disabled = false;
+    this.required = false;
+
+    Object.assign(this, init);
+  }
+}

package/src/lib/shared/models/fields/field-user-config.model.ts

@@ -0,0 +1,8 @@
+export interface FieldUserConfig {
+  // Tại form public, cho phép người dùng bật/tắt required của một field đang thao tác.
+  allowOverrideRequired?: boolean;
+
+  // Sau này có thể mở rộng thêm:
+  // allowToggleVisibility?: boolean;
+  // allowToggleReadonly?: boolean;
+}

package/src/lib/shared/models/fields/field.model.ts

@@ -0,0 +1,184 @@
+import { FormControl, ValidatorFn, Validators } from "@angular/forms";
+import { FIELD_TYPES } from "../../consts/fields";
+import { matchFieldsValidator } from "../../utils/validators/custom-validators";
+import { FieldGrid } from "./field-grid.model";
+import { NzLabelAlignType } from "ng-zorro-antd/form";
+import {
+  CommonValidaterEnum,
+  CustomValidaterEnum,
+} from "../../enums/validators";
+import { ControlType } from "../controls";
+import { FormMode } from "../form";
+import { FormModeEnum } from "../../enums/form";
+import { uuidGenerator } from "../../utils/common";
+import { ViewMode } from "../common";
+import { ViewModeEnum } from "../../enums/common";
+import { FieldUserConfig } from "../fields/field-user-config.model";
+
+/**
+ * typeof FIELD_TYPES[number] có nghĩa là:
+    - FIELD_TYPES là readonly ['input', 'select', 'checkbox']
+    - FIELD_TYPES[number] = FIELD_TYPES[0] | FIELD_TYPES[1] | ... = 'input' | 'select' | 'checkbox'
+    => FieldType = 'input' | 'select' | 'checkbox'
+*/
+export type FieldType = (typeof FIELD_TYPES)[number];
+
+/**
+ * Abstract class chung cho Field.
+ */
+export abstract class BaseField<T> {
+  id: string;
+
+  // Giá trị Binding với Reactive Form dùng ở formControlName.
+  key!: string;
+
+  // Nhãn hiển thị tên của Field.
+  label!: string;
+
+  // Giá trị của Field.
+  value?: T;
+
+  // Giá trị ban đầu để reset.
+  initialValue?: T;
+
+  // Giá gốc từ model.
+  modelValue?: T;
+
+  // Loại Field: input-text, single-select,...
+  type!: FieldType;
+
+  // Loại control: input, select,... gom nhóm các dạng field.
+  controlType!: ControlType;
+
+  // Nhãn hint.
+  placeholder?: string;
+
+  // Hiển thị text khi hover.
+  tooltip?: string;
+
+  /** Props validation chung */
+  required: boolean;
+
+  /** Props validation custom chung */
+  matchField?: string;
+
+  icon?: string;
+
+  // Custom error message theo validation props.
+  errorMessages?: Record<string, string>;
+
+  // Grid layout của Field.
+  grid: FieldGrid;
+
+  // Grid layout của Label nằm trong Field.
+  labelGrid: FieldGrid;
+
+  // Vị trí của Label khi ở trong một khối cụ thể.
+  labelAlign: NzLabelAlignType;
+
+  // Grid layout của Control nằm trong Field.
+  controlGrid: FieldGrid;
+
+  // Ẩn field và không thao tác bất kì gì liên quan.
+  isHidden: boolean;
+
+  // Vô hiệu hóa field.
+  isDisabled: boolean;
+
+  // Đánh dấu giá trị của field sẽ cần cho field khác có thuộc tính dependsOn.
+  isParent: boolean;
+
+  // Cho phép gán first data ở cả mode add hoặc edit hay không.
+  allowSetValue: FormMode[];
+
+  // Gom nhóm field theo mã của nhóm. Mã này sẽ config theo code của FieldGroup model và config ở FE.
+  groupCode?: string; // Không thuộc nhóm thì bỏ trống hoặc điền None.
+
+  // Mode view: form (view theo control được disable) hoặc text (chỉ hiện thị text có thể là paragraph). Riêng upload thì không áp dụng vì không phân biệt control.
+  viewMode: ViewMode;
+
+  // Nhãn phu hiển thị tên của Field.
+  sublabel?: string;
+
+  // Thứ tự hiển thị của field
+  seqNum: number = 0;
+
+  // Cho phép field phát sự kiện change khi thay đổi giá trị.
+  enableFieldChange: boolean;
+
+  // Cấu hình các tính năng cho phép người dùng tự thay đổi trên field
+  userConfigs?: FieldUserConfig;
+
+  constructor(init?: Partial<BaseField<T>>) {
+    if (!init?.key || !init?.label) {
+      throw new Error("key, label, and type are required");
+    }
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở BaseField.
+     */
+    this.id = uuidGenerator();
+    this.required = false;
+    this.grid = { xs: 24 };
+    this.labelGrid = { xs: 24 };
+    this.controlGrid = { xs: 24 };
+    this.labelAlign = "left";
+    this.isHidden = false;
+    this.isDisabled = false;
+    this.isParent = false;
+    this.allowSetValue = [
+      FormModeEnum.Add,
+      FormModeEnum.Edit,
+      FormModeEnum.View,
+    ];
+    this.viewMode = ViewModeEnum.form;
+    this.enableFieldChange = false;
+
+    Object.assign(this, init);
+  }
+
+  // Tạo control cho từng loại field.
+  abstract toFormControl(): FormControl;
+
+  // Default value ban đầu cho từng loại field.
+  abstract getDefaultValue(): T;
+
+  abstract toFormValue(modelValue: unknown): T;
+
+  // Tạo các validate chung cho các props ở abstract. this khi gọi trong class con sẽ đại diện cho đối tượng tạo từ class đó.
+  protected getCommonValidators(): ValidatorFn[] {
+    const validators: ValidatorFn[] = [];
+
+    if (this.required) validators.push(Validators.required);
+
+    return validators;
+  }
+
+  // Tạo các validate custom chung cho các props ở abstract. this khi gọi trong class con sẽ đại diện cho đối tượng tạo từ class đó.
+  protected getCustomValidators(): ValidatorFn[] {
+    const validators: ValidatorFn[] = [];
+
+    if (this.matchField) validators.push(matchFieldsValidator(this.matchField));
+
+    return validators;
+  }
+
+  getErrorMessage(
+    errorKey: string,
+    errorValue: any,
+    allFields: BaseField<any>[],
+  ): string {
+    if (errorKey === CommonValidaterEnum.Required) {
+      return `${this.label || "Trường này"} là bắt buộc`;
+    }
+
+    if (errorKey === CustomValidaterEnum.MatchField) {
+      const matchKey = this.matchField;
+      const targetLabel =
+        allFields.find((f) => f.key === matchKey)?.label || matchKey;
+      return `${this.label} không khớp với ${targetLabel}`;
+    }
+
+    return "";
+  }
+}

package/{lib/shared/models/fields/index.d.ts → src/lib/shared/models/fields/index.ts}

@@ -1,2 +1,2 @@
-export * from "./field.model";
-export * from "./field-user-config.model";
+export * from "./field.model";
+export * from "./field-user-config.model";

package/{lib/shared/models/fields/input/index.d.ts → src/lib/shared/models/fields/input/index.ts}

@@ -1,4 +1,4 @@
-export * from "./input-field.model";
-export * from "./input-text-field.model";
-export * from "./input-password-field.model";
-export * from "./input-formatted-field.model";
+export * from "./input-field.model";
+export * from "./input-text-field.model";
+export * from "./input-password-field.model";
+export * from "./input-formatted-field.model";