@ldquocc/dynamic-form 0.0.9 → 0.0.10

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

@@ -1,34 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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/src/lib/shared/models/validations/index.ts

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

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

@@ -1,14 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,251 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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();
-  });
-});

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

@@ -1,152 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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;
-  }
-}