@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/utils/date/date.utils.ts

@@ -0,0 +1,129 @@
+import { FORMAT_DATE_PATTERNS } from '../../consts/fields';
+
+// Chuyển đổi đối tượng Date thành string có format DDMMYYYY.
+export const formatDateToDDMMYYYY = (date: Date, separator: '-' | '/' = '-'): string => {
+  const dd = String(date.getDate()).padStart(2, '0');
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const yyyy = date.getFullYear();
+
+  return `${dd}${separator}${mm}${separator}${yyyy}`;
+};
+
+// Chuyển đổi đối tượng Date thành string có format DDMMYYYY.
+export const formatDateToYYYYMMDD = (date: Date, separator: '-' | '/' = '-'): string => {
+  const dd = String(date.getDate()).padStart(2, '0');
+  const mm = String(date.getMonth() + 1).padStart(2, '0');
+  const yyyy = date.getFullYear();
+
+  return `${yyyy}${separator}${mm}${separator}${dd}`;
+};
+
+// Chuyển đổi string ở các dạng: YYYY-MM-DD, DD-MM-YYYY, MM-DD-YYYY đến Date, nếu sẵn là Date thì mặc định không đổi.
+export const normalizeToDate = (input: string | Date | undefined): Date | null => {
+  if (!input) return null;
+
+  if (input instanceof Date && !isNaN(input.getTime())) return input;
+  if (typeof input !== 'string') return null;
+
+  const inputTrimed = input.trim();
+
+  let match: RegExpMatchArray | null;
+  let year: number, month: number, day: number;
+  let hour = 0,
+    minute = 0,
+    second = 0;
+
+  if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.YYYY_MM_DD))) {
+    year = +match[1];
+    month = +match[3] - 1;
+    day = +match[4];
+  } else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.DD_MM_YYYY))) {
+    day = +match[1];
+    month = +match[3] - 1;
+    year = +match[4];
+  } else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY))) {
+    month = +match[1] - 1;
+    day = +match[3];
+    year = +match[4];
+  } else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY_HMS))) {
+    month = +match[1] - 1;
+    day = +match[3];
+    year = +match[4];
+    hour = +match[5];
+    minute = +match[6];
+    second = +match[7];
+  } else {
+    console.warn('Sai định dạng chuỗi date');
+    return null;
+  }
+
+  const date = new Date(year, month, day, hour, minute, second);
+
+  if (
+    date.getFullYear() === year &&
+    date.getMonth() === month &&
+    date.getDate() === day &&
+    date.getHours() === hour &&
+    date.getMinutes() === minute &&
+    date.getSeconds() === second
+  ) {
+    return date;
+  }
+
+  console.warn('Ngày hoặc giờ không hợp lệ');
+  return null;
+};
+
+export const normalizeToDate1 = (input: string | Date | undefined): Date | null => {
+  if (input) {
+    if (input instanceof Date && !isNaN(input.getTime())) return input;
+    if (typeof input !== 'string') return null;
+    const inputTrimed = String(input).trim();
+    let match: RegExpMatchArray | null;
+    let year: number, month: number, day: number;
+    if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.YYYY_MM_DD))) {
+      year = +match[1];
+      month = +match[3] - 1;
+      day = +match[4];
+    } else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.DD_MM_YYYY))) {
+      day = +match[1];
+      month = +match[3] - 1;
+      year = +match[4];
+    } else if ((match = inputTrimed.match(FORMAT_DATE_PATTERNS.MM_DD_YYYY))) {
+      month = +match[1] - 1;
+      day = +match[3];
+      year = +match[4];
+    } else {
+      console.warn('Sai định dạng chuỗi date');
+      return null;
+    }
+    const date = new Date(year, month, day); // Validate: kiểm tra lại giá trị date (28/29/30/31 hợp lệ)
+    if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
+      return date;
+    } else {
+      console.warn('Ngày đưa vào không hợp lệ');
+      return null;
+    }
+  }
+  return null;
+};
+
+// Tạo danh sách năm chạy ngược từ hiện tại đến năm chỉ định.
+export const generateYearsDesc = (from: number): number[] => {
+  const currentYear = new Date().getFullYear();
+  const years: number[] = [];
+  for (let year = currentYear; year >= from; year--) {
+    years.push(year);
+  }
+  return years;
+};
+
+// Tạo danh sách năm chạy từ năm chỉ định đến năm hiện tại.
+export const generateYearsAsc = (from: number): number[] => {
+  const currentYear = new Date().getFullYear();
+  const years: number[] = [];
+  for (let year = from; year <= currentYear; year++) {
+    years.push(year);
+  }
+  return years;
+};

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

@@ -1 +1 @@
-export * from './date.utils';
+export * from './date.utils';

package/src/lib/shared/utils/dynamic-form/dynamic-form.ts

@@ -0,0 +1,114 @@
+import { AbstractControl, FormGroup } from "@angular/forms";
+import { BaseField } from "../../models/fields/field.model";
+import { FormMode } from "../../models/form";
+import { FormModeEnum } from "../../enums/form";
+import { SelectBaseField } from "../../models/fields/select/select-base-field.model";
+import { InputPasswordField } from "../../models/fields/input";
+import { FieldTypeEnum } from "../../enums/fields";
+
+export const buildForm = (
+  fields: BaseField<any>[],
+  mode: FormMode,
+  model?: Record<string, any>,
+): FormGroup => {
+  const groupObj: Record<string, AbstractControl<any, any>> = {};
+  // console.log("model", model);
+
+  for (const field of fields) {
+    // Loại bỏ nếu quyết định ẩn field đi.
+    if (field.isHidden) continue;
+    // Nếu là dạng InputPasswordField nhưng ở mode edit và view thì không được dùng.
+    if (
+      field instanceof InputPasswordField &&
+      (mode === FormModeEnum.Edit || mode === FormModeEnum.View)
+    )
+      continue;
+
+    const fieldKey = field?.key;
+    // field.value = field.allowSetValue ? (model?.[fieldKey] || field.value) : null;
+
+    if (field.allowSetValue) {
+      field.value = field.getDefaultValue();
+      field.modelValue = null;
+      if (model?.[fieldKey]) {
+        field.value = field.toFormValue(model[fieldKey]);
+        field.modelValue = model[fieldKey];
+      }
+
+      field.initialValue = field.value;
+    }
+    //  console.log("e", field.value );
+    // field.value = field.allowSetValue ? field.toFormValue(model?.[fieldKey] | field.getDefaultValue()) : field.getDefaultValue();
+    const control = field.toFormControl();
+    control.reset(field.value);
+    if (field.isDisabled) {
+      //console.log(field.key, 'dfdfdfdf');
+
+      control?.disable();
+    }
+    groupObj[fieldKey] = control;
+  }
+
+  return new FormGroup(groupObj);
+};
+
+// Tạo tự động placeholder cho các dạng control nhập với label hoặc key từ field
+export const createInputPlaceholder = (field: BaseField<any>): string => {
+  const label = field?.label;
+  if (label) return `Nhập ${label?.toLowerCase()}`;
+
+  return `Nhập ${field.key?.toLowerCase()}`;
+};
+
+// Tạo tự động placeholder cho các dạng single select với label hoặc key từ field
+export const createSingleSelectPlaceholder = (
+  field: BaseField<any>,
+): string => {
+  const label = field?.label;
+  if (label) return `Chọn ${label?.toLowerCase()}`;
+
+  return `Chọn ${field.key?.toLowerCase()}`;
+};
+
+// Tạo tự động placeholder cho các dạng multi select với label hoặc key từ field
+export const createMultiSelectPlaceholder = (field: BaseField<any>): string => {
+  const label = field?.label;
+  if (label) return `Chọn các ${label?.toLowerCase()}`;
+
+  return `Chọn các ${field.key?.toLowerCase()}`;
+};
+
+// Tạo tự động placeholder cho các dạng date-picker với label hoặc key từ field
+export const createDatePickerPlaceholder = (field: BaseField<any>): string => {
+  const label = field?.label;
+  if (label) return `Chọn ${label?.toLowerCase()}`;
+
+  return `Chọn ${field.key?.toLowerCase()}`;
+};
+
+// Tạo placeholder mặc định cho các dạng Input, Textarea.
+export const createPlaceholder = (field: BaseField<any>): string => {
+  const placeholder = field?.placeholder;
+  if (placeholder) return placeholder;
+
+  const label = field?.label;
+  if (label) return `Nhập ${label?.toLowerCase()}`;
+
+  return `Nhập ${field.key?.toLowerCase()}`;
+};
+
+// Tạo placeholder mặc định cho các dạng Select.
+export const createSelectPlaceholder = <K>(
+  field: SelectBaseField<K>,
+): string => {
+  const placeholder = field?.placeholder;
+  if (placeholder) return placeholder;
+
+  const label = field?.label;
+  if (label) {
+    const isSingleSelect = field?.type === FieldTypeEnum.SingleSelect;
+    return `Chọn ${isSingleSelect ? "" : "các"} ${label?.toLowerCase()}`;
+  }
+
+  return `Nhập ${field.key?.toLowerCase()}`;
+};

package/src/lib/shared/utils/fields/fields.ts

@@ -0,0 +1,78 @@
+import { ControlTypeEnum } from '../../enums/controls';
+import { FieldTypeEnum, InputFieldTypeEnum } from '../../enums/fields';
+import { DateFieldTypeEnum } from '../../enums/fields/date-field.enum';
+import { SelectFieldTypeEnum } from '../../enums/fields/select-field.enum';
+import { UploadFieldTypeEnum } from '../../enums/fields/upload-field.enum';
+import { DatePickerField } from '../../models/fields/date/date-picker-field.model';
+import { DateRangeField } from '../../models/fields/date/date-range-field.model';
+import { FieldGroup, GroupedFields } from '../../models/fields/field-group.model';
+import { BaseField } from '../../models/fields/field.model';
+import { InputPasswordField, InputTextField } from '../../models/fields/input';
+import { MultiSelectField } from '../../models/fields/select/multi-select-field.model';
+import { SingleSelectField } from '../../models/fields/select/single-select-field.model';
+import { AvatarUploadField } from '../../models/fields/upload/avatar-upload-field.model';
+import { MultiFileUploadField } from '../../models/fields/upload/multi-file-upload-field.model';
+import { SingleFileUploadField } from '../../models/fields/upload/single-file-upload-field.model';
+
+export const isInputTextField = (field: BaseField<any>): field is InputTextField => {
+  return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputText;
+};
+
+export const isInputPasswordField = (field: BaseField<any>): field is InputPasswordField => {
+  return field.controlType === ControlTypeEnum.Input && field.type === FieldTypeEnum.InputPassword;
+};
+
+export const isSingleSelectField = (field: BaseField<any>): field is SingleSelectField => {
+  return field.controlType === ControlTypeEnum.Select && field.type === FieldTypeEnum.SingleSelect;
+};
+
+export const isMultiSelectField = (field: BaseField<any>): field is MultiSelectField => {
+  return field.controlType === ControlTypeEnum.Select && field.type === FieldTypeEnum.MultiSelect;
+};
+
+export const isDatePickerField = (field: BaseField<any>): field is DatePickerField => {
+  return field.controlType === ControlTypeEnum.Date && field.type === FieldTypeEnum.DatePicker;
+};
+
+export const isDateRangeField = (field: BaseField<any>): field is DateRangeField => {
+  return field.controlType === ControlTypeEnum.Date && field.type === FieldTypeEnum.DateRange;
+};
+
+export const isSingleFileUploadField = (field: BaseField<any>): field is SingleFileUploadField => {
+  return (
+    field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.SingleFileUpload
+  );
+};
+
+export const isMultiFileUploadField = (field: BaseField<any>): field is MultiFileUploadField => {
+  return (
+    field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.MultiFileUpload
+  );
+};
+
+export const isAvatarUploadField = (field: BaseField<any>): field is AvatarUploadField => {
+  return field.controlType === ControlTypeEnum.Upload && field.type === FieldTypeEnum.AvatarUpload;
+};
+
+// Tạo FieldGroup render UI từ thông tin fields và groups truyền vào cho dynamic-form.
+export const buildGroupedFields = (
+  fields: BaseField<any>[],
+  groups: FieldGroup[] = [],
+): GroupedFields => {
+  const noGroup = fields.filter(
+    field => !field?.groupCode || field?.groupCode.toLowerCase() === 'none',
+  );
+
+  const sortedGroups = [...groups].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  const grouped = sortedGroups
+    .map(group => ({
+      group,
+      fields: fields.filter(field => field.groupCode?.toLowerCase() === group.code.toLowerCase()),
+    }))
+    .filter(groupedFields => groupedFields.fields.length > 0);
+
+  return new GroupedFields({
+    noGroup,
+    grouped,
+  });
+};

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

@@ -1 +1 @@
-export * from './fields';
+export * from './fields';

package/src/lib/shared/utils/file/file.utils.ts

@@ -0,0 +1,37 @@
+import { MIME_TYPES_TO_EXTENSION } from '../../consts/common';
+import { FileSizeTypeEnum } from '../../enums/common/file-size-type.enum';
+
+// Format file size, đầu vào là Byte, và loại muốn format sang.
+export const formatFileSize = (size: number, type: FileSizeTypeEnum): number => {
+  let returnVal = 0;
+  switch (type) {
+    case 'KB':
+      returnVal = size / 1024;
+      break;
+    case 'MB':
+      returnVal = size / (1024 * 1024);
+      break;
+    case 'GB':
+      returnVal = size / (1024 * 1024 * 1024);
+      break;
+    case 'TB':
+      returnVal = size / (1024 * 1024 * 1024 * 1024);
+      break;
+    default:
+      returnVal = size;
+      break;
+  }
+  return returnVal;
+};
+
+// Lấy extension. dựa vào các cấu hình mimeTypes sẵn.
+export const getExtensions = (acptMimeTypes: string[]): string[] => {
+  return acptMimeTypes.map(mime => `.${MIME_TYPES_TO_EXTENSION[mime] || mime}`);
+};
+
+// Tạo một file giả từ thông tin name, type và size.
+export const createFakeFile = (name: string, type: string, size: number): File => {
+  const buffer = new Uint8Array(size); // tạo buffer theo size, không crash nếu file có dung lượng lớn.
+  const blob = new Blob([buffer], { type });
+  return new File([blob], name, { type, lastModified: Date.now() });
+};

package/{lib/shared/utils/file/index.d.ts → src/lib/shared/utils/file/index.ts}

@@ -1 +1 @@
-export * from './file.utils';
+export * from './file.utils';

package/src/lib/shared/utils/validators/custom-validators.ts

@@ -0,0 +1,158 @@
+import {
+  AbstractControl,
+  AsyncValidatorFn,
+  ValidationErrors,
+  ValidatorFn,
+} from "@angular/forms";
+import { delay, Observable, of } from "rxjs";
+import { formatFileSize } from "../file";
+import { FileSizeTypeEnum } from "../../enums/common/file-size-type.enum";
+import { isValidJSON } from "../common";
+
+// Không cho phép nhập khoảng trắng ở đầu chuỗi, nếu không nhập gì vẫn tính đúng.
+export const noLeadingSpaceValidator = (): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = (control.value ?? "").toString();
+    if (!value) return null; // Không required thì để trống là hợp lệ
+    return value[0] === " " ? { leadingSpace: true } : null;
+  };
+};
+
+// Không cho phép nhập toàn khoảng trắng.
+export const noWhitespaceValidator = (): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const isWhitespace = (control.value || "").toString().trim().length === 0;
+    return isWhitespace ? { whitespace: true } : null;
+  };
+};
+
+// Bắt đầu với một kí tự được chỉ định.
+export const startsWithValidator = (prefix: string): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control.value ?? "";
+    return value.startsWith(prefix)
+      ? null
+      : { startsWith: { requiredPrefix: prefix } };
+  };
+};
+
+// So sánh giá trị field A không được lớn hơn field B.
+export const minMaxFieldValidator = (
+  minKey: string,
+  maxKey: string,
+): ValidatorFn => {
+  // group: AbstractControl sẽ đại diện cho FormGroup tức là cha bao hàm các field.
+  return (group: AbstractControl): ValidationErrors | null => {
+    const min = group.get(minKey)?.value;
+    const max = group.get(maxKey)?.value;
+    if (min != null && max != null && min > max) {
+      return { minMaxInvalid: true };
+    }
+    return null;
+  };
+};
+
+// Match giữa hai field (ví dụ: password/confirmPassword,...).
+export const matchFieldsValidator = (fieldToMatch: string): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const parent = control.parent;
+    if (!parent) return null;
+
+    const target = parent.get(fieldToMatch);
+    if (!target?.value) return null;
+
+    // Nếu đang validate chính nó (ví dụ: confirmPassword)
+    const isMismatch = control.value !== target.value;
+
+    // Nếu trước đó password (target) đang bị lỗi matchField nhưng giờ đã khớp
+    if (!isMismatch && target.hasError("matchField")) {
+      const errors = { ...target.errors };
+      delete errors["matchField"];
+
+      // Nếu không còn lỗi nào khác, set null
+      target.setErrors(Object.keys(errors).length ? errors : null);
+    }
+
+    return isMismatch ? { matchField: true } : null;
+  };
+};
+
+// Async: Check if username is taken (simulate API).
+export const asyncUsernameValidator = (
+  takenUsernames: string[],
+): AsyncValidatorFn => {
+  return (control: AbstractControl): Observable<ValidationErrors | null> => {
+    const value = control.value ?? "";
+    const isTaken = takenUsernames.includes(value);
+    return of(isTaken ? { usernameTaken: true } : null).pipe(delay(500));
+  };
+};
+
+// Không có ký tự đặc biệt.
+export const noSpecialCharValidator = (): ValidatorFn => {
+  return (control: AbstractControl) => {
+    const valid = /^[a-zA-Z0-9]*$/.test(control.value);
+    return valid ? null : { noSpecialChar: true };
+  };
+};
+
+// Username không được nằm trong blacklist.
+export const usernameBlacklistValidator = (
+  blacklist: string[],
+): ValidatorFn => {
+  return (control: AbstractControl) => {
+    return blacklist.includes(control.value) ? { blacklisted: true } : null;
+  };
+};
+
+// Có thuộc mimetypes từ mảng mimetypes được chỉ định hay không?
+export const acceptedMimeTypesValidator = (
+  acceptedMimeTypes: string[],
+): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const value = control?.value;
+
+    if (value) {
+      let fileType = "";
+      if (value instanceof File) {
+        fileType = (value as File).type;
+      }
+
+      if (isValidJSON(value as string)) {
+        const { contentType } = JSON.parse(value)[0] || {};
+        if (contentType) fileType = contentType;
+      }
+
+      if (fileType) {
+        if (!acceptedMimeTypes.includes(fileType)) {
+          return {
+            acceptedMimeTypes: {
+              actualValue: fileType,
+              requiredValue: `Nằm trong ${acceptedMimeTypes}`,
+            },
+          };
+        }
+      }
+    }
+    return null;
+  };
+};
+
+export const maxFileSizeInMBValidator = (maxSizeInMB: number): ValidatorFn => {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const file = control?.value as File;
+    if (file) {
+      const fileSizeInMB = formatFileSize(file.size, FileSizeTypeEnum.MB);
+
+      if (fileSizeInMB > maxSizeInMB) {
+        return {
+          maxSizeInMB: {
+            actualValue: fileSizeInMB,
+            requiredValue: `Nhỏ hơn ${maxSizeInMB}`,
+          },
+        };
+      }
+    }
+    return null;
+  };
+};

package/src/lib/shared/utils/validators/default-error-message.ts

@@ -0,0 +1,42 @@
+import { PATTERN_ERROR_MESSAGES } from '../../consts/validators/pattern.const';
+import { resolvePattern } from './pattern';
+
+export const getDefaultPatternErrorMessage = (label: string, pattern: string | RegExp): string => {
+  let finalErrorMessage = '';
+  const resolvePatternResult = resolvePattern(pattern);
+
+  // if (resolvePatternResult?.type === 'unknown') {
+  //     return finalErrorMessage; // Không phải pattern hợp lệ
+  // }
+
+  if (resolvePatternResult.type === 'regexObject') {
+    finalErrorMessage = `${label || 'Trường này'} không hợp lệ!`;
+  }
+
+  if (resolvePatternResult.type === 'regexKey') {
+    const patternMess = PATTERN_ERROR_MESSAGES?.[pattern as string] ?? '';
+    finalErrorMessage = `${label || 'Trường này'} không hợp lệ! ${patternMess.replace(/%s/g, () => label)}`;
+  }
+
+  return finalErrorMessage;
+};
+
+export const getDefaultMinLengthErrorMessage = (label: string, errorValue: any): string => {
+  return `${label || 'Trường này'} cần tối thiểu ${errorValue.requiredLength} ký tự`;
+};
+
+export const getDefaultMaxLengthErrorMessage = (label: string, errorValue: any): string => {
+  return `${label || 'Trường này'} cần đât thiểu ${errorValue.requiredLength} ký tự`;
+};
+
+export const getDefaultAcptMimeTypesErrorMessage = (typeString: string): string => {
+  return `Tập tin tải lên không được hỗ trợ. Vui lòng tải các tập tin có định dạng ${typeString}`;
+};
+
+export const getDefaultMaxSizeInMBErrorMessage = (maxSizeInMB: number): string => {
+  return `Kích thước tập tin tải lên không được phép vượt quá ${maxSizeInMB} MB`;
+};
+
+export const getLeadingSpaceErrorMessage = (label: string): string => {
+  return `${label || 'Trường này'} không được bắt đầu bằng khoảng trắng`;
+};

package/{lib/shared/utils/validators/index.d.ts → src/lib/shared/utils/validators/index.ts}

@@ -1,3 +1,3 @@
-export * from './custom-validators';
-export * from './pattern';
-export * from './default-error-message';
+export * from './custom-validators';
+export * from './pattern';
+export * from './default-error-message';

package/src/lib/shared/utils/validators/pattern.ts

@@ -0,0 +1,26 @@
+import { PATTERN_PRESETS } from '../../consts/validators/pattern.const';
+
+export const resolvePattern = (
+  pattern: string | RegExp | undefined,
+): {
+  type: 'regexKey' | 'regexString' | 'regexObject' | 'unknown';
+  value: string | RegExp;
+} => {
+  if (!pattern) return { type: 'unknown', value: '' };
+
+  // Trường hợp là RegExp thực sự
+  if (pattern instanceof RegExp) return { type: 'regexObject', value: pattern };
+
+  // Trường hợp là tên preset (ưu tiên nếu trùng)
+  if (pattern in PATTERN_PRESETS) {
+    return { type: 'regexKey', value: PATTERN_PRESETS[pattern] };
+  }
+
+  try {
+    // Trường hợp là chuỗi regex dạng "^abc$"
+    return { type: 'regexString', value: new RegExp(pattern) };
+  } catch (err) {
+    console.warn(`Không thể parse pattern "${pattern}"`, err);
+    return { type: 'unknown', value: '' };
+  }
+};