@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

@@ -0,0 +1,33 @@
+import { BaseUploadField } from './base-upload-field.model';
+import { FieldTypeEnum } from '../../../enums/fields';
+import { DEFAULT_ACCEPTED_IMAGE_MIME_TYPES } from '../../../consts/common';
+
+const DEFAULT_AVATAR_UPLOAD_VALUE = '';
+
+/**
+ * Interface của Avatar upload.
+ */
+export class AvatarUploadField extends BaseUploadField<string | Record<string, unknown>> {
+  constructor(init: Partial<AvatarUploadField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Avatar upload.
+     */
+
+    this.type = FieldTypeEnum.AvatarUpload;
+    this.value = DEFAULT_AVATAR_UPLOAD_VALUE;
+    this.acceptedMimeTypes = DEFAULT_ACCEPTED_IMAGE_MIME_TYPES;
+    this.initialValue = DEFAULT_AVATAR_UPLOAD_VALUE;
+
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | Record<string, unknown> {
+    return DEFAULT_AVATAR_UPLOAD_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string | Record<string, unknown> {
+    return String(modelValue);
+  }
+}

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

@@ -0,0 +1,105 @@
+import { FormControl, ValidatorFn } from '@angular/forms';
+import { FieldTypeEnum } from '../../../enums/fields';
+import { BaseField } from '../field.model';
+import { UPLOAD_FIELD_TYPES } from '../../../consts/fields/upload-field.const';
+import { ApiConfig, ApiFileConfig, UploadOutputValueType } from '../../common';
+import {
+  acceptedMimeTypesValidator,
+  getDefaultAcptMimeTypesErrorMessage,
+  getDefaultMaxSizeInMBErrorMessage,
+  maxFileSizeInMBValidator,
+} from '../../../utils/validators';
+import { DEFAULT_ACCEPTED_MIME_TYPES } from '../../../consts/common';
+import { CustomValidaterEnum } from '../../../enums/validators';
+import { getExtensions } from '../../../utils/file';
+import { UploadOutputValueTypeEnum } from '../../../enums/common';
+import { ControlTypeEnum } from '../../../enums/controls';
+
+export type UploadFieldType = (typeof UPLOAD_FIELD_TYPES)[number];
+
+/**
+ * Interface base chung cho Các dạng Date.
+ */
+export abstract class BaseUploadField<K> extends BaseField<K> {
+  // Dữ liệu sẽ gửi từ form khi submit.
+  outputAs!: UploadOutputValueType;
+
+  // Config api file liên quan: upload, delete.
+  apiFileConfig: ApiFileConfig;
+
+  // Các loại mimetypes được chấp nhận.
+  acceptedMimeTypes: string[];
+
+  // Kích thước tối đa của tập tin tải lên tính bằng MB.
+  maxSizeInMB: number;
+
+  // Hiển thị thông tin hướng dẫn các định dạng file được phép upload theo config của acceptedMimeTypes
+  showAcceptedExtensionGuide: boolean;
+
+  // Mở/tắt cơ chế upload tạm.
+  uploadTemp: boolean;
+
+  /**
+   * Props validation chung cho các dạng Date.
+   */
+
+  constructor(init: Partial<BaseUploadField<K>>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Date.
+     */
+    this.controlType = ControlTypeEnum.Upload;
+    this.outputAs = UploadOutputValueTypeEnum.Object;
+    this.apiFileConfig = {
+      uploadUrl: '',
+      deleteUrl: '',
+    };
+    this.acceptedMimeTypes = DEFAULT_ACCEPTED_MIME_TYPES;
+    this.maxSizeInMB = 25;
+    this.showAcceptedExtensionGuide = true;
+    this.uploadTemp = true;
+
+    Object.assign(this, init);
+  }
+
+  // Mảng ValidatorFn các validation chung được hỗ trợ sẵn bởi angular cho Input Password.
+  protected getCustomBaseUploadValidators(): ValidatorFn[] {
+    const validators = this.getCustomValidators();
+
+    // Kiểm tra xem file tải lên có type nằm trong mảng acceptedMimeTypes đã chỉ định hay không.
+    if (this.acceptedMimeTypes?.length > 0)
+      validators.push(acceptedMimeTypesValidator(this.acceptedMimeTypes));
+
+    // Kiểm tra kích thước tối đa mà file tải lên được cho phép.
+    validators.push(maxFileSizeInMBValidator(this.maxSizeInMB));
+
+    return validators;
+  }
+
+  // Tạo Form Control cho Input Field.
+  override toFormControl(): FormControl {
+    const commonValidators = this.getCommonValidators();
+    const customValidators = this.getCustomBaseUploadValidators();
+    return new FormControl(this.value ?? '', [...commonValidators, ...customValidators]);
+  }
+
+  abstract override getDefaultValue(): K;
+
+  abstract override toFormValue(modelValue: unknown): K;
+
+  override getErrorMessage(errorKey: string, errorValue: any, allFields: BaseField<any>[]): string {
+    // Lấy error message mặc định của acceptedMimeTypes.
+    if (errorKey === CustomValidaterEnum.AcceptedMimiTypes) {
+      const typeString = getExtensions(this.acceptedMimeTypes).join(', ');
+      return getDefaultAcptMimeTypesErrorMessage(typeString);
+    }
+
+    // Lấy error message mặc định của maxSizeInMB.
+    if (errorKey === CustomValidaterEnum.MaxSizeInMB) {
+      return getDefaultMaxSizeInMBErrorMessage(this.maxSizeInMB);
+    }
+
+    return super.getErrorMessage(errorKey, errorValue, allFields);
+  }
+}

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

@@ -1,5 +1,5 @@
-export * from './base-upload-field.model';
-export * from './single-file-upload-field.model';
-export * from './multi-file-upload-field.model';
-export * from './avatar-upload-field.model';
-export * from './multi-image-upload-field.model';
+export * from './base-upload-field.model';
+export * from './single-file-upload-field.model';
+export * from './multi-file-upload-field.model';
+export * from './avatar-upload-field.model';
+export * from './multi-image-upload-field.model';

package/src/lib/shared/models/fields/upload/multi-file-upload-field.model.ts

@@ -0,0 +1,34 @@
+import { BaseUploadField } from './base-upload-field.model';
+import { FieldTypeEnum } from '../../../enums/fields';
+
+const DEFAULT_MULTI_FILE_UPLOAD_VALUE = '';
+
+/**
+ * Interface của Multi file upload.
+ */
+export class MultiFileUploadField extends BaseUploadField<string | File> {
+  // Số lượng tập tin tối đa có thể tải lên.
+  maxFileCount: number;
+
+  constructor(init: Partial<MultiFileUploadField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Multi file upload.
+     */
+    this.type = FieldTypeEnum.MultiFileUpload;
+    this.value = DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+    this.initialValue = DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+    this.maxFileCount = 6;
+
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | File {
+    return DEFAULT_MULTI_FILE_UPLOAD_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string | File {
+    return String(modelValue);
+  }
+}

package/src/lib/shared/models/fields/upload/multi-image-upload-field.model.ts

@@ -0,0 +1,42 @@
+import { BaseUploadField } from "./base-upload-field.model";
+import { FieldTypeEnum } from "../../../enums/fields";
+
+const DEFAULT_MULTI_IMAGE_UPLOAD_VALUE = "";
+
+/**
+ * Interface của Multi image upload.
+ */
+export class MultiImageUploadField extends BaseUploadField<string | File> {
+  // Số lượng hình ảnh tối đa có thể tải lên.
+  maxFileCount: number;
+
+  // Độ dài card bao image.
+  imageCardWidth: string;
+
+  // Độ cao card bao image.
+  imageCardHeight: string;
+
+  constructor(init: Partial<MultiImageUploadField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Multi image upload.
+     */
+    this.type = FieldTypeEnum.MultiImageUpload;
+    this.value = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
+    this.initialValue = DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
+    this.maxFileCount = 6;
+    this.imageCardWidth = "108px";
+    this.imageCardHeight = "108px";
+
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | File {
+    return DEFAULT_MULTI_IMAGE_UPLOAD_VALUE;
+  }
+
+  override toFormValue(modelValue: string | File): string {
+    return String(modelValue);
+  }
+}

package/src/lib/shared/models/fields/upload/single-file-upload-field.model.ts

@@ -0,0 +1,33 @@
+import { FieldTypeEnum } from '../../../enums/fields';
+import { Suffix } from '../../common/common.model';
+import { BaseUploadField } from './base-upload-field.model';
+
+const DEFAULT_SINGLE_FILE_UPLOAD_VALUE = '';
+
+/**
+ * Interface của Single file upload. Đầu vào có thể là chuỗi JSON hoặc đối tượng File.
+ */
+export class SingleFileUploadField extends BaseUploadField<string | File> {
+  suffixes: Suffix[];
+  constructor(init: Partial<SingleFileUploadField>) {
+    super(init);
+
+    /**
+     * Gán giá trị cho các props cần giá trị mặc định ở Single file upload.
+     */
+
+    this.type = FieldTypeEnum.SingleFileUpload;
+    this.value = DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
+    this.initialValue = DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
+    this.suffixes = [];
+    Object.assign(this, init);
+  }
+
+  override getDefaultValue(): string | File {
+    return DEFAULT_SINGLE_FILE_UPLOAD_VALUE;
+  }
+
+  override toFormValue(modelValue: unknown): string {
+    return String(modelValue);
+  }
+}

package/{lib/shared/models/form/dynamic-form.model.d.ts → src/lib/shared/models/form/dynamic-form.model.ts}

@@ -1 +1 @@
-export type FormMode = 'add' | 'edit' | 'view' | 'design';
+export type FormMode = 'add' | 'edit' | 'view' | 'design';

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

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

package/src/lib/shared/models/validations/index.ts

@@ -0,0 +1 @@
+export * from './validations.model';

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

@@ -0,0 +1,14 @@
+export interface RawValidation {
+  // Loại validation: required, minValue, maxLength,...
+  type: string;
+
+  // Dùng để truyền value cho loại validate. Cả có sẵn từ Reactive Form hoặc Custom Validate.
+  // Ví dụ: {type: minLength, params: {min:2}} hoặc Custom {type:between, params: {min:2, max:9}}
+  params?: any;
+
+  // Message chỉ địng cho validation.
+  message?: string;
+
+  // Phạm vi validation chỉ ở một field, hoặc group là validation chéo.
+  scope?: 'field' | 'group';
+}

package/src/lib/shared/services/dynamic-form.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DynamicFormService } from './dynamic-form.service';
+
+describe('DynamicFormService', () => {
+  let service: DynamicFormService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DynamicFormService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/shared/services/dynamic-form.service.ts

@@ -0,0 +1,251 @@
+import { computed, inject, Injectable, signal } from "@angular/core";
+import { BaseField } from "../models/fields/field.model";
+import { Extra, ObjField } from "../models/common/obj-field.model";
+import { isValidJSON, lowerCaseFirstChar } from "../utils/common";
+import { FieldTypeEnum } from "../enums/fields";
+import { InputPasswordField, InputTextField } from "../models/fields/input";
+import { TextareaField } from "../models/fields/textarea/textarea-field.model";
+import { SingleSelectField } from "../models/fields/select/single-select-field.model";
+import { MultiSelectField } from "../models/fields/select/multi-select-field.model";
+import { DatePickerField, DateRangeField } from "../models/fields/date";
+import { SingleFileUploadField } from "../models/fields/upload/single-file-upload-field.model";
+import { MultiFileUploadField } from "../models/fields/upload/multi-file-upload-field.model";
+import { FormGroup } from "@angular/forms";
+import { MultiImageUploadField } from "../models/fields/upload/multi-image-upload-field.model";
+import { FormConfigService } from "./form-config.service";
+import { AvatarUploadField } from "../models/fields/upload/avatar-upload-field.model";
+import { TreeSelectField } from "../models/fields/select/tree-select-field.model";
+
+@Injectable({
+  providedIn: "root",
+})
+export class DynamicFormService {
+  private formConfigService = inject(FormConfigService);
+
+  /**
+   * Lưu giữ FormGroup hiện tại của dynamic form.
+   */
+  private _formGroup!: FormGroup;
+
+  // Lấy FormGroup.
+  get formGroup() {
+    return this._formGroup;
+  }
+
+  // Gán FormGroup.
+  setFormGroup(formGroup: FormGroup) {
+    this._formGroup = formGroup;
+  }
+
+  /**
+   * Lưu giữ fields hiện tại của dynamic form.
+   */
+  private _fields!: BaseField<any>[];
+
+  // Lấy fields.
+  get fields() {
+    return this._fields;
+  }
+
+  // Gán fields.
+  setFields(fields: BaseField<any>[]) {
+    this._fields = fields;
+  }
+
+  /**
+   * Thao tác với control và fields cũng như output đầu ra của data form.
+   */
+  setFieldValue(fieldKey: string, rawValue: unknown) {
+    const field = this.fields.find((f) => f.key === fieldKey);
+    if (!field) return;
+
+    const formValue = field.toFormValue(rawValue);
+    this.formGroup.get(fieldKey)?.setValue(formValue);
+  }
+
+  /**
+   * Signal để kích hoạt submit từ bên ngoài.
+   */
+  private readonly _submitTrigger = signal<{
+    formId: string | null;
+    time: number;
+  } | null>(null);
+
+  // Lấy signal để track vào effect.
+  get submitTrigger() {
+    return this._submitTrigger.asReadonly();
+  }
+
+  // Tiến hành submit.
+  triggerSubmit(formId: string | null) {
+    this._submitTrigger.set({ formId, time: Date.now() }); // trigger tạo theo formId.
+  }
+
+  /**
+   * Signal để kích hoạt reset từ bên ngoài.
+   */
+  private readonly _resetTrigger = signal<{
+    formId: string;
+    time: number;
+  } | null>(null);
+
+  get resetTrigger() {
+    return this._resetTrigger.asReadonly();
+  }
+
+  triggerReset(formId: string) {
+    if (formId) this._resetTrigger.set({ formId, time: Date.now() });
+  }
+
+  /**
+   * Tạo mảng fields đầu vào theo mảng data từ objField.
+   */
+  createFieldsByObjFields(
+    objFields: ObjField[],
+    formType: string,
+    options?: {},
+  ): BaseField<any>[] {
+    let fields: BaseField<any>[] = [];
+
+    // Nếu không tồn tại objFields hoặc objFields là mảng rỗng.
+    if (!objFields || objFields.length === 0) return [];
+
+    for (const objField of objFields) {
+      // Bỏ qua những field không cấu hình.
+      if (!objField?.extra) {
+        continue;
+      }
+
+      // Nếu extra không phải chuỗi JSON hợp lệ.
+      if (objField?.extra && !isValidJSON(objField?.extra)) {
+        // console.warn(`Extra của field ${objField.code} không phải chuỗi dạng JSON`);
+        continue;
+      }
+
+      const extra: Extra = JSON.parse(objField?.extra);
+      if (!extra.form) {
+        continue;
+      }
+
+      const form = extra.form;
+      const { formTypes, configs } = form;
+
+      if (!formTypes.includes(formType)) {
+        // console.error(`Field '${objField.code}' không tồn tại formType '${formType}'`);
+        continue;
+      }
+
+      const fieldConfig = configs?.[formType];
+      if (!fieldConfig) {
+        // console.error(`Field '${objField.code}' không có config field với formType '${formType}'`);
+        continue;
+      }
+
+      const field = this.createFieldFromJson(fieldConfig, objField);
+      if (field) {
+        fields.push(field);
+      } else {
+        // console.error(`Field '${objField.code}' không có fieldType phù hợp`);
+        continue;
+      }
+    }
+
+    return fields.sort((a, b) => a.seqNum - b.seqNum);
+  }
+
+  private createFieldFromJson(
+    fieldConfig: BaseField<any>,
+    objField: ObjField,
+  ): BaseField<any> | null {
+    fieldConfig.key =
+      fieldConfig?.key || lowerCaseFirstChar(objField.code) || "";
+    fieldConfig.label = fieldConfig?.label || objField?.name || "";
+    fieldConfig.groupCode = fieldConfig.groupCode ?? objField.viewType ?? "";
+    fieldConfig.seqNum = fieldConfig.seqNum ?? objField.seqNum;
+    fieldConfig.required = fieldConfig.required ?? objField.required === 3;
+
+    const fieldType = fieldConfig.type;
+    if (fieldType === FieldTypeEnum.InputText) {
+      return new InputTextField({ ...(fieldConfig as InputTextField) });
+    }
+
+    if (fieldType === FieldTypeEnum.InputPassword) {
+      return new InputPasswordField({ ...(fieldConfig as InputPasswordField) });
+    }
+
+    if (fieldType === FieldTypeEnum.Textarea) {
+      return new TextareaField({ ...(fieldConfig as TextareaField) });
+    }
+
+    if (fieldType === FieldTypeEnum.SingleSelect) {
+      const singleSelect = fieldConfig as SingleSelectField;
+      if (!singleSelect.apiConfig) {
+        singleSelect.apiConfig = {
+          baseUrl: this.formConfigService.handleApiUrlCreation(
+            objField.apiURL || "",
+            objField.objTypeGroupCode,
+          ),
+        };
+      }
+      return new SingleSelectField({ ...singleSelect });
+    }
+
+    if (fieldType === FieldTypeEnum.MultiSelect) {
+      const multiSelect = fieldConfig as MultiSelectField;
+      if (!multiSelect.apiConfig) {
+        multiSelect.apiConfig = {
+          baseUrl: this.formConfigService.handleApiUrlCreation(
+            objField.apiURL || "",
+            objField.objTypeGroupCode,
+          ),
+        };
+      }
+      return new MultiSelectField({ ...multiSelect });
+    }
+
+    if (fieldType === FieldTypeEnum.TreeSelect) {
+      const treeSelect = fieldConfig as TreeSelectField;
+      if (!treeSelect.apiConfig) {
+        treeSelect.apiConfig = {
+          baseUrl: this.formConfigService.handleApiUrlCreation(
+            objField.apiURL || "",
+            objField.objTypeGroupCode,
+          ),
+        };
+      }
+      return new TreeSelectField({ ...treeSelect });
+    }
+
+    if (fieldType === FieldTypeEnum.DatePicker) {
+      return new DatePickerField({ ...(fieldConfig as DatePickerField) });
+    }
+
+    if (fieldType === FieldTypeEnum.DateRange) {
+      return new DateRangeField({ ...(fieldConfig as DateRangeField) });
+    }
+
+    if (fieldType === FieldTypeEnum.SingleFileUpload) {
+      return new SingleFileUploadField({
+        ...(fieldConfig as SingleFileUploadField),
+      });
+    }
+
+    if (fieldType === FieldTypeEnum.MultiFileUpload) {
+      return new MultiFileUploadField({
+        ...(fieldConfig as MultiFileUploadField),
+      });
+    }
+
+    if (fieldType === FieldTypeEnum.AvatarUpload) {
+      return new AvatarUploadField({ ...(fieldConfig as AvatarUploadField) });
+    }
+
+    if (fieldType === FieldTypeEnum.MultiImageUpload) {
+      return new MultiImageUploadField({
+        ...(fieldConfig as MultiImageUploadField),
+      });
+    }
+
+    return null;
+  }
+}

package/src/lib/shared/services/field.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FieldService } from './field.service';
+
+describe('FieldService', () => {
+  let service: FieldService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FieldService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});