@ldquocc/dynamic-form 0.0.9 → 0.0.11

package/src/lib/dynamic-form.component.ts

@@ -1,237 +0,0 @@
-import { BaseField } from "./shared/models/fields/field.model";
-import {
-  Component,
-  computed,
-  effect,
-  EventEmitter,
-  inject,
-  input,
-  Input,
-  output,
-  Output,
-  signal,
-  untracked,
-} from "@angular/core";
-import { AbstractControl, FormGroup } from "@angular/forms";
-import { buildForm } from "./shared/utils/dynamic-form/dynamic-form";
-import { FieldTypeEnum } from "./shared/enums/fields";
-import { NzFormModule } from "ng-zorro-antd/form";
-import { FormModeEnum } from "./shared/enums/form";
-import { FormMode } from "./shared/models/form";
-import { DynamicFormService } from "./shared/services/dynamic-form.service";
-
-import { FORM_MODULES } from "./shared/consts/common";
-import { InputPasswordField } from "./shared/models/fields/input";
-import { clone, isEqual } from "lodash-es";
-import {
-  FieldGroup,
-  GroupedFields,
-} from "./shared/models/fields/field-group.model";
-import { buildGroupedFields } from "./shared/utils/fields";
-import { DynamicFieldComponent } from "./shared/components/dynamic-field/dynamic-field.component";
-import { debounceTime, distinctUntilChanged, Subject, takeUntil } from "rxjs";
-
-import { NzGridModule } from "ng-zorro-antd/grid";
-import { NzCollapseModule } from "ng-zorro-antd/collapse";
-import { FormDataService } from "./shared/services/form-data.service";
-
-const ZORRO_MODULES = [NzFormModule, NzGridModule, NzCollapseModule];
-const COMPONENTS = [DynamicFieldComponent];
-
-@Component({
-  selector: "app-dynamic-forms",
-  standalone: true,
-  imports: [...FORM_MODULES, ...ZORRO_MODULES, ...COMPONENTS],
-  templateUrl: "./dynamic-form.component.html",
-  styleUrls: ["./dynamic-form.component.scss"],
-})
-export class DynamicFormComponent {
-  // Id phân biệt form.
-  @Input() formId!: string;
-
-  // ===================== NGOÀI LUỒNG LOGIC ======================== //
-  // Debounce time for form value changes (ms)
-  // Default: 300ms
-  // Thời gian trễ cho sự thay đổi giá trị của form (ms)
-  @Input() valueChangesDebounceTime = 300;
-
-  //  Emit form value changes
-  @Output() readonly formValueChanges = new EventEmitter<
-    Record<string, unknown>
-  >();
-
-  //  Subject for cleanup subscriptions
-  private readonly destroy$ = new Subject<void>();
-  // ====================================================== //
-
-  // Input.
-  // Mảng fields mới.
-  readonly fields = input.required<BaseField<any>[]>();
-  // Signal model data.
-  readonly model = input<Record<string, any>>({});
-  // Signal form mode.
-  readonly mode = input<FormMode>(FormModeEnum.Add);
-  // Input signal groupFields.
-  readonly fieldGroups = input<FieldGroup[]>([]);
-
-  // Cho phép show nhưng field không thuộc group nào
-  readonly displayNonGroupedFields = input(true);
-
-  // Output.
-  readonly formSubmit = output<Record<string, unknown>>();
-  readonly formInvalid = output<BaseField<any>[]>();
-
-  // Mảng field cũ.
-  protected readonly oldFields = signal<BaseField<any>[]>([]);
-
-  // Check mode là add hay edit.
-  readonly isAddOrEdit = computed(() =>
-    [FormModeEnum.Add, FormModeEnum.Edit].includes(this.mode() as FormModeEnum),
-  );
-
-  // FormState check sự thay đổi giữa mode, newFields, model chỉ chạy 1 lần dù 3 cái đều đổi.
-  readonly formState = computed(() => ({
-    mode: this.mode(),
-    newFields: this.fields(),
-    model: this.model(),
-  }));
-
-  // Computed chạy lại khi fields hoặc groupFields thay đổi.
-  groupedFields = computed<GroupedFields>(() => {
-    const groups = this.fieldGroups();
-    const groupedFields = buildGroupedFields(this.oldFields(), groups);
-    return groupedFields;
-  });
-
-  protected readonly formModeEnum = FormModeEnum;
-  protected readonly fieldTypeEnum = FieldTypeEnum;
-
-  // Kiểm tra có cần ẩn field không?
-  isHiddenField = (field: BaseField<any>): boolean => {
-    const { isHidden } = field;
-    if (isHidden) return true;
-    if (field instanceof InputPasswordField) {
-      if (
-        this.mode() === FormModeEnum.Edit ||
-        this.mode() === FormModeEnum.View
-      ) {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  // Form group cho reactive form.
-  formGroup!: FormGroup;
-
-  readonly formDataService = inject(FormDataService);
-  constructor(private dFormService: DynamicFormService) {
-    // Trigger form từ submit bên ngoài.
-    effect(() => {
-      this.dFormService.submitTrigger();
-      if (untracked(() => this.isAddOrEdit())) {
-        const submit = this.dFormService.submitTrigger();
-
-        if (submit?.formId === this.formId) {
-          this.handleSubmit();
-          this.dFormService.triggerSubmit(null);
-        }
-      }
-    });
-  }
-
-  ngOnDestroy(): void {
-    // Cleanup subscriptions
-    //  Dọn dẹp các subscription
-    this.destroy$.next();
-    this.destroy$.complete();
-
-    // Loại bỏ output data khi dynamic form destroy component.
-    this.formDataService.clear(this.formId);
-  }
-
-  // Đồng bộ fields sang dynamic-form service mỗi lần fields signal change.
-  syncFieldsEffect = effect(() => {
-    this.dFormService.setFields(this.fields());
-    this.formDataService.clear(this.formId);
-  });
-
-  /**
-   * Effect tạo FormGroup.
-   */
-  createFormGroupEffect = effect(() => {
-    const { mode, newFields, model } = this.formState();
-    this.oldFields.set(newFields);
-    const computedFields = clone(newFields);
-    this.formGroup = buildForm(computedFields, mode, model);
-    this.dFormService.setFormGroup(this.formGroup);
-  });
-
-  /**
-   *  Subscribe to form value changes
-   *  Subscribe lắng nghe sự thay đổi giá trị của form
-   */
-  private subscribeToFormValueChanges(): void {
-    if (!this.formGroup) return;
-
-    // Unsubscribe previous subscription if exists
-    this.destroy$.next();
-
-    this.formGroup.valueChanges
-      .pipe(
-        debounceTime(this.valueChangesDebounceTime),
-        distinctUntilChanged((prev, curr) => isEqual(prev, curr)),
-        takeUntil(this.destroy$),
-      )
-      .subscribe((formValue) => {
-        // console.log('Form value changed:', formValue);
-        this.formValueChanges.emit(formValue);
-      });
-  }
-
-  /**
-   * Xử lý submit form và output ra ngoài.
-   */
-  private handleSubmit() {
-    const form = this.formGroup;
-    const invalidFields: Array<BaseField<any>> = [];
-
-    // Xử lý trường hợp form chưa thỏa mãn validation.
-    if (form.invalid) {
-      const controls = form.controls;
-      for (const name in controls) {
-        if (controls[name].invalid) {
-          this.markControlForValidation(controls[name]);
-          const field = this.fields().find((field) => field.key === name);
-          if (field) invalidFields.push(field);
-        }
-      }
-      this.formInvalid.emit(invalidFields);
-      return;
-    }
-
-    const formData = untracked(() => this.formDataService.get(this.formId));
-    this.formSubmit.emit(formData ?? {});
-  }
-
-  /**
-   * Kích submit form ảo khi nhấn nút submit.
-   */
-  private markControlForValidation(control: AbstractControl) {
-    control.markAllAsTouched();
-    control.markAsDirty();
-    control.updateValueAndValidity({ onlySelf: true, emitEvent: true });
-  }
-
-  /**
-   * TrackBy function for ngFor to optimize rendering.
-   */
-  protected trackByField(index: number, field: BaseField<any>): string {
-    return field.key || `field-${index}`;
-  }
-
-  readonly collapseCustomStyle = {
-    background: "#fff",
-    border: "0px",
-  };
-}

package/src/lib/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/dynamic-form.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DynamicFormService {
-
-  constructor() { }
-}

package/src/lib/shared/base/base-select.component.ts

@@ -1,183 +0,0 @@
-import { computed, Directive, effect, untracked } from "@angular/core";
-import { rxResource, toObservable, toSignal } from "@angular/core/rxjs-interop";
-import { combineLatest, Observable, of } from "rxjs";
-import { catchError, map, switchMap } from "rxjs/operators";
-import { DependTypeEnum } from "../enums/common";
-import { ApiResponse } from "../models/common/api-response.model";
-import {
-  FieldDependency,
-  FieldDependencyType,
-} from "../models/common/field-dependency.model";
-import { SelectBaseField } from "../models/fields/select/select-base-field.model";
-import { BaseValueAccessor } from "./base-value-accessor";
-
-@Directive()
-export abstract class BaseSelectComponent<T> extends BaseValueAccessor<T> {
-  // Alias to strongly type the field input for Select base logic
-  protected readonly selectField = computed(
-    () => this.fieldInput() as SelectBaseField<any>,
-  );
-
-  protected isFirstLoad = true;
-
-  // 1. Tạo stream params từ các field phụ thuộc
-  private dependParams$ = toObservable(this.selectField).pipe(
-    switchMap((field) => {
-      const { dependsOn, dependType } = field;
-
-      if (!dependsOn || dependsOn.length === 0) {
-        return of({ valid: true, params: {} });
-      }
-
-      const dependObs$ = this.createDependencyStreams(dependsOn);
-
-      return combineLatest(dependObs$).pipe(
-        map((results) => this.evaluateDependencies(results, dependType)),
-      );
-    }),
-  );
-
-  private createDependencyStreams(
-    dependsOn: FieldDependency[],
-  ): Observable<{ key: string; value: string | null }>[] {
-    return dependsOn.map((depend) =>
-      this.fieldService
-        .getDependValueChanges$(depend.fieldKey)
-        .pipe(map((val) => ({ key: depend.paramKey, value: val }))),
-    );
-  }
-
-  private evaluateDependencies(
-    results: { key: string; value: string | null }[],
-    dependType: FieldDependencyType,
-  ): { valid: boolean; params: Record<string, unknown> } {
-    const isValidValue = (val: string | null) =>
-      val !== null && val !== "" && val !== undefined;
-
-    let isConditionMet = false;
-
-    if (dependType === DependTypeEnum.Any) {
-      isConditionMet = results.some((r) => isValidValue(r.value));
-    } else {
-      isConditionMet = results.every((r) => isValidValue(r.value));
-    }
-
-    const params = results.reduce(
-      (acc, curr) => ({ ...acc, [curr.key]: curr.value }),
-      {},
-    );
-    return { valid: isConditionMet, params };
-  }
-
-  private dependParamsSignal = toSignal(this.dependParams$, {
-    initialValue: { valid: false, params: {} },
-  });
-
-  // 2. rxResource lấy danh sách
-  optionsResource = rxResource({
-    request: () => {
-      if (this.isView()) return undefined;
-
-      const state = this.dependParamsSignal();
-      if (!state || !state.valid) return undefined;
-      return state.params;
-    },
-    loader: ({ request: params }) => {
-      const field = untracked(() => this.selectField());
-      const fullApiUrl = field?.apiConfig?.baseUrl || "";
-      const apiParams = field?.apiConfig?.params || {};
-
-      const rawParams = { ...apiParams, ...params };
-      const finalParams = Object.fromEntries(
-        Object.entries(rawParams).filter(
-          ([_, val]) => val !== null && val !== undefined && val !== "",
-        ),
-      );
-
-      if (!fullApiUrl) {
-        return of({
-          code: 0,
-          message: "Success",
-          data: field?.options ?? [],
-        } as ApiResponse<Record<string, unknown>[]>);
-      }
-
-      return this.fieldService.getAllOptions(fullApiUrl, finalParams).pipe(
-        catchError((error) =>
-          of({ code: -1, message: "Error", data: [] } as ApiResponse<
-            Record<string, unknown>[]
-          >),
-        ),
-      );
-    },
-  });
-
-  // Gom chung loading từ rxResource và isDisabledSignal
-  disabled = computed(
-    () => this.optionsResource.isLoading() || this.disabledSignal(),
-  );
-
-  // 3. Xào nấu Options (Prepend, Append, Filter)
-  options = computed<Record<string, unknown>[]>(() => {
-    const state = this.dependParamsSignal();
-    const isLoading = this.optionsResource.isLoading();
-    const res = this.optionsResource.value();
-
-    if (!state || !state.valid || isLoading || !res || res.code !== 0) {
-      return [];
-    }
-
-    const field = this.selectField();
-    const { optionsToPrepend, optionsToAppend, exceptOptions } = field;
-    const rawData = res.data || [];
-
-    return [...optionsToPrepend, ...rawData, ...optionsToAppend].filter(
-      (opt) =>
-        !exceptOptions.some(
-          (ex) => ex[field.bindValue] === opt[field.bindValue],
-        ),
-    );
-  });
-
-  constructor() {
-    super();
-
-    // 4. Effect xử lý toàn bộ logic Form Control (Disable/Enable/Reset)
-    effect(() => {
-      const state = this.dependParamsSignal();
-      const isLoading = this.optionsResource.isLoading();
-      const res = this.optionsResource.value();
-
-      untracked(() => {
-        // CASE 1 & 2: CHƯA ĐỦ ĐIỀU KIỆN HOẶC ĐANG GỌI API -> Disable và Reset
-        if (!state || !state.valid || isLoading) {
-          this.disableControl();
-          if (!this.isFirstLoad) {
-            this.resetControl();
-          }
-          this.isFirstLoad = false;
-          return;
-        }
-
-        // CASE 3: API ĐÃ LOAD XONG
-        if (res) {
-          if (res.code !== 0) {
-            this.disableAndResetControl();
-            return;
-          }
-
-          const field = this.selectField();
-          if (!field.isDisabled) {
-            this.enableControl();
-          }
-          
-          // Móc nối cho các class con có nhu cầu đồng bộ data sau khi load API
-          this.onApiOptionsLoaded();
-        }
-      });
-    });
-  }
-
-  // Cho phép component con overide nếu cần (ví dụ để hydrate sourceObject)
-  protected onApiOptionsLoaded(): void {}
-}

package/src/lib/shared/base/base-value-accessor.ts

@@ -1,192 +0,0 @@
-import {
-  computed,
-  Directive,
-  inject,
-  input,
-  Input,
-  untracked,
-  signal,
-  effect,
-} from "@angular/core";
-import { AbstractControl, ControlValueAccessor } from "@angular/forms";
-import { Subject, takeUntil } from "rxjs";
-import { FormMode } from "../models/form";
-import { FormModeEnum } from "../enums/form";
-import { DynamicFormService } from "../services/dynamic-form.service";
-import { FieldService } from "../services/field.service";
-import { LastChangedParent } from "../models/common";
-import { BaseField } from "../models/fields/field.model";
-import { ViewModeEnum } from "../enums/common";
-import { FormDataService } from "../services/form-data.service";
-
-@Directive() // Dùng @Directive vì class này không có template riêng
-export abstract class BaseValueAccessor<T> implements ControlValueAccessor {
-  // Control theo dạng field lấy từ reactive form.
-  @Input({ required: true }) formId!: string;
-
-  readonly fieldInput = input.required<BaseField<T>>();
-  protected readonly fieldKey = untracked(() =>
-    computed<string>(() => this.fieldInput().key),
-  );
-
-  @Input({ required: false }) control: AbstractControl<T> | null = null;
-
-  // Chế độ form: Add, Edit, View...
-  readonly modeSignal = input<FormMode>(FormModeEnum.Add);
-
-  readonly isAdd = computed(() => this.modeSignal() === "add");
-  readonly isEdit = computed(() => this.modeSignal() === "edit");
-  readonly isView = computed(() => this.modeSignal() === "view");
-  readonly isAddOrEdit = computed(() =>
-    ["add", "edit"].includes(this.modeSignal()),
-  );
-  readonly isEditOrView = computed(() =>
-    ["edit", "view"].includes(this.modeSignal()),
-  );
-
-  protected readonly formModeEnum = FormModeEnum;
-  protected readonly viewModeEnum = ViewModeEnum;
-
-  protected readonly destroy$ = new Subject<void>();
-
-  // Dành cho ControlValueAccessor.
-  protected value: T | null = null;
-  protected readonly valueSignal = signal<T | null>(null);
-  protected onChange: (value: T | null) => void = () => {};
-  protected onTouched: () => void = () => {};
-  protected isDisabled = false;
-  protected readonly disabledSignal = signal(false); // Đang có select dùng isDisableSignal nên sau này đồng bộ lại.
-
-  protected dFormService = inject(DynamicFormService);
-  protected formDataService = inject(FormDataService);
-  protected fieldService = inject(FieldService);
-
-  private readonly resetEffect = effect(() => {
-    const reset = this.dFormService.resetTrigger();
-    if (reset?.formId === this.formId) {
-      this.reset();
-    }
-  });
-
-  // Dành cho UI
-  protected readonly viewMode = computed(() => this.fieldInput().viewMode);
-
-  protected readonly displayPlaceholder = computed(() => {
-    if (!this.isAddOrEdit()) return "";
-
-    const placeholder = this.fieldInput()?.placeholder;
-    if (placeholder) return placeholder;
-
-    return this.resolvePlaceholderText();
-  });
-
-  // 2. Hàm sinh text mặc định (Component con có thể override hàm này)
-  protected resolvePlaceholderText(): string {
-    return "Nhập dữ liệu";
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
-  protected takeUntilDestroy<T>() {
-    return takeUntil<T>(this.destroy$);
-  }
-
-  writeValue(value: T | null): void {
-    this.value = value;
-    this.valueSignal.set(value);
-    this.writeValueToView(value); // 👈 component con override nếu cần.
-  }
-
-  registerOnChange(fn: (value: T | null) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.isDisabled = isDisabled;
-    this.disabledSignal.set(isDisabled);
-    this.setDisabledOnView(isDisabled);
-  }
-
-  protected propagateValue(value: T | null): void {
-    this.value = value;
-    this.valueSignal.set(value);
-    this.fieldService.onFieldChange(this.fieldKey(), value);
-    this.onChange(this.value);
-    // Khi thay đổi value.
-    this.handleValueChange(value);
-  }
-
-  // Xử lý reset chung ban đầu.
-  protected reset(): void {
-    if (!this.control || !this.isAddOrEdit()) return;
-    const baseField = untracked(() => this.fieldInput());
-    this.control.reset(baseField.initialValue as T);
-  }
-
-  /**
-   * Thêm dữ liệu ở từng dạng field vào form data theo form id cụ thể.
-   * @param key Mã của field.
-   * @param value Giá trị của field.
-   */
-  protected patchFormData(key: string, value: T | null): void {
-    this.formDataService.patch(this.formId, { [key]: value });
-  }
-
-  // Update data ở từng prop vào dependValuesSignal. Cơ chế nếu falsy thì không được phép cho vào dependValuesSignal.
-  protected updateDependValues(key: string, value: string): void {
-    this.fieldService.removeDependValues(key);
-    if (value) {
-      this.fieldService.updateDependValues(key, value);
-    }
-  }
-
-  // Đánh dấu field có isParent là true vừa thay đổi.
-  protected updateLastChangedParent(key: string, value: unknown): void {
-    this.fieldService.updateLastChangedParent(key, value);
-  }
-
-  protected disableAndResetControl(): void {
-    this.control?.reset();
-    this.control?.disable();
-  }
-
-  protected disableControl(): void {
-    this.control?.disable();
-  }
-
-  protected enableControl(): void {
-    this.control?.enable();
-  }
-
-  protected resetControl(): void {
-    this.control?.reset();
-  }
-
-  /**
-   * Optional: để component override riêng.
-   */
-  // Xử lý giao diện khi ghi giá trị mới.
-  protected writeValueToView(value: T | null): void {}
-
-  // Khi value change.
-  protected handleValueChange(value: T | null): void {}
-
-  // Xử lý giao diện khi ghi thay đổi giá trị isDisabled.
-  protected setDisabledOnView(isDisabled: boolean): void {}
-
-  // Xử lý các logic riêng của reset ở add mode.
-  protected resetForAdd(): void {}
-
-  // Xử lý các logic riêng của reset ở edit mode.
-  protected resetForEdit(): void {}
-
-  // Xử lý các logic riêng chung cuối cùng.
-  protected finalizeReset(): void {}
-}