@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

@@ -0,0 +1,152 @@
+import { HttpClient } from "@angular/common/http";
+import {
+  inject,
+  Injectable,
+  Signal,
+  signal,
+  WritableSignal,
+} from "@angular/core";
+import { ApiResponse } from "../models/common/api-response.model";
+import { LastChangedParent } from "../models/common";
+import { BehaviorSubject, Observable, Subject } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class FieldService {
+  private httpClient = inject(HttpClient);
+
+  // Options for dropdown.
+  getAllOptions<T = Record<string, unknown>>(
+    apiUrl: string,
+    queryParams: Record<string, unknown>,
+  ) {
+    return this.httpClient.get<ApiResponse<T[]>>(apiUrl, {
+      params: { ...(queryParams as { [key: string]: any }) },
+    });
+  }
+
+  // =========================================================================
+  // --- CODE CŨ (Sử dụng Signal cho luồng phụ thuộc) ---
+  // =========================================================================
+  private dependValuesMap = new Map<string, WritableSignal<string>>();
+
+  updateDependValuesMap(key: string, value: string): void {
+    if (!this.dependValuesMap.has(key)) {
+      this.dependValuesMap.set(key, signal(value));
+      return;
+    }
+
+    const fieldSignal = this.dependValuesMap.get(key)!;
+    fieldSignal.set(value);
+  }
+
+  getDependValuesMap(): Map<string, Signal<string>> {
+    return this.dependValuesMap;
+  }
+
+  // =========================================================================
+  // --- CODE MỚI (Sử dụng RxJS BehaviorSubject cho luồng phụ thuộc) ---
+  // =========================================================================
+  // Giải thích kiến trúc mới:
+  // - Dùng BehaviorSubject vì nó lưu lại giá trị cuối cùng. Khi một field Con
+  //   được khởi tạo sau field Cha và subscribe vào, nó sẽ lập tức nhận được
+  //   giá trị hiện hành thay vì phải chờ Cha thay đổi lần nữa.
+  // - Cách này giúp thiết lập luồng dữ liệu dạng Push, rất dễ dàng kết hợp
+  //   với rxResource hoặc switchMap ở phía Component Con để triệt tiêu lỗi Race-condition.
+
+  private dependValuesSubjectMap = new Map<
+    string,
+    BehaviorSubject<string | null>
+  >();
+
+  /**
+   * Bắn (Emit) giá trị thay đổi của một trường Parent vào stream.
+   * Sẽ được gọi bởi Component đóng vai trò là Cha (isParent = true).
+   */
+  emitDependValueChange(key: string, value: string): void {
+    if (!this.dependValuesSubjectMap.has(key)) {
+      this.dependValuesSubjectMap.set(
+        key,
+        new BehaviorSubject<string | null>(value),
+      );
+      return;
+    }
+
+    // Nếu đã có stream, đẩy giá trị mới vào ống nước.
+    this.dependValuesSubjectMap.get(key)!.next(value);
+  }
+
+  /**
+   * Trả về Observable của một trường để các Component Con có thể subscribe/nghe ngóng.
+   * Sẽ được gọi bởi các Component có chứa `dependsOn`.
+   */
+  getDependValueChanges$(key: string): Observable<string | null> {
+    if (!this.dependValuesSubjectMap.has(key)) {
+      // Đề phòng trường hợp Con subscribe trước khi Cha khởi tạo (hoặc Cha chưa patch value)
+      // Ta tạo sẵn một ống nước rỗng với giá trị ban đầu là null.
+      this.dependValuesSubjectMap.set(
+        key,
+        new BehaviorSubject<string | null>(null),
+      );
+    }
+    return this.dependValuesSubjectMap.get(key)!.asObservable();
+  }
+
+  // Signal lưu trữ đối tượng chứa các prop là fieldKey có isParent là true.
+  private dependValues = signal<Record<string, string>>({});
+
+  // Cập nhật giá trị theo key vào đối tượng của signal.
+  updateDependValues(key: string, value: string): void {
+    this.dependValues.update((curr) => ({ ...curr, [key]: value }));
+  }
+  // Xóa giá trị và loại bỏ key theo key khỏi đối tượng của signal.
+  removeDependValues(key: string): void {
+    this.dependValues.update(({ [key]: _, ...rest }) => rest);
+  }
+
+  getDependValues(): Record<string, string> {
+    return this.dependValues();
+  }
+
+  clearDependValues(): void {
+    this.dependValues.set({});
+  }
+
+  // Lấy trị trị theo key.
+  getValueProp(key: string) {
+    return this.dependValues()[key];
+  }
+
+  // Signal lưu giữ xem field có isParent gần nhất vừa change giá trị.
+  private lastChangedParent = signal<LastChangedParent | null>(null);
+
+  // Cập nhật key của parent gần nhất change.
+  updateLastChangedParent(key: string, value: unknown): void {
+    this.lastChangedParent.set({ key, value });
+  }
+
+  // Lấy ra key của parent gần nhất change.
+  getLastChangedParent(): LastChangedParent | null {
+    return this.lastChangedParent();
+  }
+
+  clearLastChangedParent(): void {
+    this.lastChangedParent.set(null);
+  }
+
+  // Field change cho bên ngoài form
+  private fieldChange = new Subject<{
+    key: string;
+    value: any;
+  }>();
+
+  fieldChange$ = this.fieldChange.asObservable(); // expose ra ngoài.
+
+  onFieldChange(key: string, value: any) {
+    this.fieldChange.next({
+      key,
+      value,
+    });
+  }
+}

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

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

package/src/lib/shared/services/file.service.ts

@@ -0,0 +1,53 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { ApiResponse } from '../models/common/api-response.model';
+import { ObjectStorage } from '../models/common/object-storage.model';
+import { Subject } from 'rxjs';
+import { FormConfigService } from './form-config.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FileService {
+  private httpClient = inject(HttpClient);
+  private formConfigService = inject(FormConfigService);
+
+  private fileClick$ = new Subject<ObjectStorage>();
+
+  fileClick = this.fileClick$.asObservable(); // expose ra ngoài.
+
+  onFileClick(objStorage: ObjectStorage) {
+    this.fileClick$.next(objStorage);
+  }
+
+  // Upload file đến server và trả về 1 ObjectStorage.
+  uploadFile(
+    file: File,
+    formData: FormData,
+    options?: {
+      uploadUrl?: string;
+      directoryId?: string;
+    },
+  ) {
+    if (!options) options = {};
+    if (!options.uploadUrl) {
+      options.uploadUrl = this.formConfigService['config'].systemApiUrl + 'ObjectStorage/public/upload'; // fallback
+    }
+    return this.httpClient.post<any>(options.uploadUrl, formData);
+  }
+
+  // Xóa ObjectStorage.
+  deleteObjStorage(
+    id: string,
+    options?: {
+      deleteUrl?: string;
+      directoryId?: string;
+    },
+  ) {
+    if (!options) options = {};
+    if (!options.deleteUrl) {
+      options.deleteUrl = this.formConfigService['config'].systemApiUrl + 'ObjectStorage/public/delete'; // fallback
+    }
+    return this.httpClient.delete<ApiResponse<unknown>>(`${options.deleteUrl}/${id}`);
+  }
+}

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

@@ -0,0 +1,53 @@
+import { Injectable, inject } from '@angular/core';
+import { DYNAMIC_FORM_CONFIG } from '../config/dynamic-form.config';
+import { FormUtils } from './form-utils';
+
+@Injectable({ providedIn: 'root' })
+export class FormConfigService {
+  private config = inject(DYNAMIC_FORM_CONFIG);
+
+  public handleApiUrlCreation(apiUrlFromApi: string, typeGrpCode?: string): string {
+    if (!apiUrlFromApi) return '';
+    let newApiUrl = '';
+    const domain = apiUrlFromApi.split('/')[0];
+
+    let newDomain = '';
+    switch (domain.toLowerCase()) {
+      case '{mainapiurl}':
+        newDomain = this.config.mainApiUrl;
+        break;
+      case '{systemapiurl}':
+        newDomain = this.config.systemApiUrl;
+        break;
+      case '{portalapiurl}':
+        newDomain = this.config.portalApiUrl;
+        break;
+      default:
+        newDomain = domain;
+    }
+
+    newApiUrl = apiUrlFromApi.replace(`${domain}/`, newDomain ? `${newDomain}/` : '');
+
+    if (typeGrpCode) {
+      newApiUrl = newApiUrl.replace('{ObjTypeGroupCode}', typeGrpCode);
+    }
+
+    return newApiUrl;
+  }
+
+  public generateRandomFileName(name: string, addition = ''): string {
+    const encodedName = FormUtils.makeFileNameEncode(name);
+    return `${this.config.prefix}_${addition || 'file'}_${
+      Math.floor(Math.random() * 9000000000) + 1000000000
+    }_${encodedName}`.toLocaleLowerCase();
+  }
+
+  public getViewFileUrl(fileName: string, isTemp: boolean = false): string {
+    const type = isTemp ? 'temporary' : 'public';
+    return `${this.config.storageUrl}${type}/${fileName}`;
+  }
+
+  public getStorageUrl(): string {
+    return this.config.storageUrl;
+  }
+}

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

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

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

@@ -0,0 +1,114 @@
+import { Injectable, signal, untracked, WritableSignal } from '@angular/core';
+
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FormDataService {
+  // Lưu một hoặc nhiều form data.
+  private formDataMap = new Map<string, WritableSignal<Record<string, unknown>>>();
+
+  /**
+   * Kiểm tra xem đã tồn tại form data với form id truyền vào.
+   * @param formId Id của form.
+   * @returns true nếu có và ngược lại
+   */
+  has(formId: string): boolean {
+    if (!this.formDataMap.has(formId)) return false;
+    return true;
+  }
+
+  /**
+   * Cập nhật giá trị của một hoặc nhiều field vào form data theo form id.
+   * @param formId Id của form.
+   * @param data Đối tượng các field theo dạng key:value.
+   */
+  patch(formId: string, data: Record<string, unknown>) {
+    // Lấy form data từ formDataMap.
+    let formData = this.formDataMap.get(formId);
+
+    // Nếu chưa có form data trong formDataMap thì thêm mới. Ngược lại cập nhật field data vào formData.
+    if (!formData) {
+      formData = signal(data);
+    } else {
+      formData.update(curr => ({ ...curr, ...data }));
+    }
+
+    // Tiến hành cập nhật vào formDataMap.
+    this.formDataMap.set(formId, formData);
+  }
+
+  /**
+   * Gán form data theo form id.
+   * @param formId Id của form.
+   * @param data Đối tượng các field theo dạng key:value.
+   */
+  set(formId: string, data: Record<string, unknown>) {
+    this.formDataMap.set(formId, signal(data));
+  }
+
+  /**
+   * Lấy giá trị của form data theo form id có track signal.
+   * @param formId Id của form.
+   * @returns Record<string, unknown> nếu có giá trị. Ngược lại undefined.
+   */
+  get(formId: string): Record<string, unknown> | undefined {
+    const formData = this.formDataMap.get(formId);
+
+    if (!formData) return undefined;
+
+    return formData();
+  }
+
+  /**
+   * Lấy giá trị của form data theo form id không track signal.
+   * @param formId Id của form.
+   * @returns Record<string, unknown> nếu có giá trị. Ngược lại undefined.
+   */
+  getSnapshot(formId: string): Record<string, unknown> | undefined {
+    const formData = this.formDataMap.get(formId);
+
+    if (!formData) return undefined;
+
+    return untracked(() => formData());
+  }
+
+  /**
+   * Clear giá trị form data theo form id. Clear chứ không xóa khỏi formDataMap hoàn toàn.
+   * @param formId Id của form.
+   */
+  clear(formId: string) {
+    let formData = this.formDataMap.get(formId);
+
+    if (formData) {
+      formData.set({});
+      this.formDataMap.set(formId, formData);
+    }
+  }
+
+  /**
+   * Delete form data theo form id khỏi formDataMap.
+   * @param formId Id của form.
+   */
+  delete(formId: string) {
+    let formData = this.formDataMap.get(formId);
+    if (formData) this.formDataMap.delete(formId);
+  }
+
+  /**
+   *
+   * @param formId Id của form.
+   * @param key mã trường trong object form data.
+   * @returns unknown.
+   */
+  getFieldValue(formId: string, key: string): unknown {
+    let formData = this.formDataMap.get(formId);
+    let fieldValue: unknown = undefined;
+
+    if (formData) {
+      fieldValue = formData()?.[key];
+    }
+
+    return fieldValue;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { format } from 'date-fns';
+
+export class FormUtils {
+  public static makeFileNameEncode(str: string): string {
+    str = str.replace(/à|á|ạ|ả|ã|â|ầ|ấ|ậ|ẩ|ẫ|ă|ằ|ắ|ặ|ẳ|ẵ/g, 'a');
+    str = str.replace(/è|é|ẹ|ẻ|ẽ|ê|ề|ế|ệ|ể|ễ/g, 'e');
+    str = str.replace(/ì|í|ị|ỉ|ĩ/g, 'i');
+    str = str.replace(/ò|ó|ọ|ỏ|õ|ô|ồ|ố|ộ|ổ|ỗ|ơ|ờ|ớ|ợ|ở|ỡ/g, 'o');
+    str = str.replace(/ù|ú|ụ|ủ|ũ|ư|ừ|ứ|ự|ử|ữ/g, 'u');
+    str = str.replace(/ỳ|ý|ỵ|ỷ|ỹ/g, 'y');
+    str = str.replace(/đ/g, 'd');
+    str = str.replace(/À|Á|Ạ|Ả|Ã|Â|Ầ|Ấ|Ậ|Ẩ|Ẫ|Ă|Ằ|Ắ|Ặ|Ẳ|Ẵ/g, 'A');
+    str = str.replace(/È|É|Ẹ|Ẻ|Ẽ|Ê|Ề|Ế|Ệ|Ể|Ễ/g, 'E');
+    str = str.replace(/Ì|Í|Ị|Ỉ|Ĩ/g, 'I');
+    str = str.replace(/Ò|Ó|Ọ|Ỏ|Õ|Ô|Ồ|Ố|Ộ|Ổ|Ỗ|Ơ|Ờ|Ớ|Ợ|Ở|Ỡ/g, 'O');
+    str = str.replace(/Ù|Ú|Ụ|Ủ|Ũ|Ư|Ừ|Ứ|Ự|Ử|Ữ/g, 'U');
+    str = str.replace(/Ỳ|Ý|Ỵ|Ỷ|Ỹ/g, 'Y');
+    str = str.replace(/Đ/g, 'D');
+    str = str.replace(/\u0300|\u0301|\u0303|\u0309|\u0323/g, ''); 
+    str = str.replace(/\u02C6|\u0306|\u031B/g, ''); 
+    return str;
+  }
+
+  public static randomFileName(name: string): string {
+    const ns = name.split('.');
+    const extension = ns.pop();
+    const encodedName = FormUtils.makeFileNameEncode(ns.join('.'));
+    return `${encodedName}_${Math.floor(Math.random() * 90000) + 10000}.${extension}`.toLocaleLowerCase();
+  }
+
+  public static convertViewDate(date: unknown, ft: string = 'dd/MM/yyyy'): string {
+    let d: Date | null = null;
+    if (date instanceof Date) {
+      d = date;
+    } else if (typeof date === 'string') {
+      if (/^\d{4}-\d{2}-\d{2}/.test(date)) {
+        d = new Date(date);
+      } else if (/^\d{2}\/\d{2}\/\d{4}\s\d{2}:\d{2}:\d{2}$/.test(date)) {
+        const [datePart, timePart] = date.split(' ');
+        const [month, day, year] = datePart.split('/').map(Number);
+        const [hour, min, sec] = timePart.split(':').map(Number);
+        d = new Date(year, month - 1, day, hour, min, sec);
+      } else {
+        const parsed = new Date(date);
+        if (!isNaN(parsed.getTime())) {
+          d = parsed;
+        }
+      }
+    }
+    return d && !isNaN(d.getTime()) ? format(d, ft) : '';
+  }
+}

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

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

package/src/lib/shared/services/suffix.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SuffixService {
+  private suffixClick$ = new Subject<{ key: string; formId: string }>();
+
+  suffixClick = this.suffixClick$.asObservable(); // expose ra ngoài.
+
+  onSuffixClick(key: string, formId: string) {
+    this.suffixClick$.next({ key, formId });
+  }
+  constructor() {}
+}

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

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

package/src/lib/shared/services/validation.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+import { AbstractControl } from '@angular/forms';
+import { BaseField } from '../models/fields/field.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ValidationService {
+  constructor() {}
+
+  getFirstError(control: AbstractControl, field: BaseField<any>, fields: BaseField<any>[]): string {
+    // if (field.key === 'reminder') console.log("control?.errors", field.key, control?.errors);
+    if (!control?.errors || !field) return '';
+
+    const errorKey = Object.keys(control.errors)?.[0] || '';
+    const errorValue = control.errors?.[errorKey];
+
+    return this.getErrorMessage(errorKey, errorValue, field, fields);
+  }
+
+  private getErrorMessage(
+    errorKey: string,
+    errorValue: any,
+    field: BaseField<any>,
+    allFields: BaseField<any>[],
+  ): string {
+    let finalErrorMessage = '';
+
+    const customMessage = field.errorMessages?.[errorKey];
+    if (customMessage) return customMessage;
+
+    // 2. Nếu field có hàm getErrorMessage riêng.
+    const defaultErrorMessage = field.getErrorMessage(errorKey, errorValue, allFields);
+    if (defaultErrorMessage) return defaultErrorMessage;
+
+    return `Chưa cấu hình message lỗi cho trường ${field.key}`;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { BaseField } from '../../models/fields/field.model';
+
+// Kiểm tra tính hợp lệ của JSON string.
+export const isValidJSON = (str: string): boolean => {
+  try {
+    JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  return true;
+};
+
+// Tạo một chuỗi uuid.
+export const uuidGenerator = (): string => {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = (Math.random() * 16) | 0,
+      v = c == 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+};
+
+export const lowerCaseFirstChar = (str: string): string => {
+  return str.charAt(0).toLowerCase() + str.slice(1);
+};
+
+export const upperCaseFirstChar = (str: string): string => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const deepCopyArray = (array: BaseField<any>[]): BaseField<any>[] => {
+  return array.map(item => {
+    if (Array.isArray(item)) {
+      return deepCopyArray(item); // Deep copy nếu phần tử là mảng lồng nhau
+    } else if (item && typeof item === 'object') {
+      return deepCopyObject(item); // Deep copy nếu phần tử là đối tượng
+    }
+    return item; // Trả về giá trị gốc nếu không phải mảng hoặc đối tượng
+  }) as BaseField<any>[];
+};
+
+export const deepCopyObject = (obj: BaseField<any>): BaseField<any> => {
+  return Object.fromEntries(
+    Object.entries(obj).map(([key, value]) => {
+      if (Array.isArray(value)) {
+        return [key, deepCopyArray(value)]; // Deep copy nếu giá trị là mảng
+      } else if (value && typeof value === 'object') {
+        return [key, deepCopyObject(value)]; // Deep copy nếu giá trị là đối tượng
+      }
+      return [key, value]; // Trả về giá trị gốc
+    }),
+  ) as BaseField<any>;
+};

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

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