@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/ng-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/dynamic-form",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    {
+      "glob": "**/*.scss",
+      "input": "src/lib/shared/styles",
+      "output": "/styles"
+    }
+  ],
+  "allowedNonPeerDependencies": ["lodash-es", "date-fns", "@zeedhi/autonumeric"]
+}

package/package.json

@@ -1,31 +1,20 @@
-{
-  "name": "@ldquocc/dynamic-form",
-  "version": "0.0.8",
-  "peerDependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/router": "^19.2.0",
-    "ng-zorro-antd": "^19.2.1",
-    "ngx-currency": "^19.0.0",
-    "rxjs": "~7.8.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0",
-    "date-fns": "^2.30.0",
-    "lodash-es": "^4.17.21",
-    "@zeedhi/autonumeric": "^4.6.5"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ldquocc-dynamic-form.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/ldquocc-dynamic-form.mjs"
-    }
-  }
-}
+{
+  "name": "@ldquocc/dynamic-form",
+  "version": "0.0.9",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "@angular/forms": "^19.2.0",
+    "@angular/router": "^19.2.0",
+    "ng-zorro-antd": "^19.2.1",
+    "ngx-currency": "^19.0.0",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0",
+    "date-fns": "^2.30.0",
+    "lodash-es": "^4.17.21",
+    "@zeedhi/autonumeric": "^4.6.5"
+  },
+  "sideEffects": false
+}

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

@@ -0,0 +1,121 @@
+@if (formGroup) {
+  <form [formGroup]="formGroup">
+    @if (oldFields().length > 0) {
+      <!-- 1. Nếu không có groups thì render từ fields -->
+      @if (!fieldGroups() || fieldGroups().length === 0) {
+        <div nz-row [nzGutter]="[12, 0]">
+          @for (field of oldFields(); track field?.id) {
+            @if (!isHiddenField(field)) {
+              <div
+                nz-col
+                [nzXXl]="field?.grid?.xxl ?? null"
+                [nzXl]="field?.grid?.xl ?? null"
+                [nzLg]="field?.grid?.lg ?? null"
+                [nzMd]="field?.grid?.md ?? null"
+                [nzSm]="field?.grid?.sm ?? null"
+                [nzXs]="field?.grid?.xs ?? null"
+                [nzFlex]="
+                  !field?.grid?.xs &&
+                  !field?.grid?.sm &&
+                  !field?.grid?.md &&
+                  !field?.grid?.lg &&
+                  !field?.grid?.xl &&
+                  !field?.grid?.xxl
+                    ? '1 0 0'
+                    : null
+                "
+                class="field"
+              >
+                <app-dynamic-field
+                  [field]="field"
+                  [fields]="oldFields()"
+                  [mode]="mode()"
+                  [control]="formGroup.get(field.key)!"
+                  [formGroup]="formGroup"
+                  [formId]="formId"
+                />
+              </div>
+            }
+          }
+        </div>
+      }
+
+      <!-- 2. Nếu có groups thì render từ groupedFields -->
+      @if (fieldGroups() && fieldGroups().length > 0) {
+        <!-- Các field noGroup -->
+        @if (groupedFields().noGroup.length > 0 && displayNonGroupedFields()) {
+          <div nz-row [nzGutter]="24">
+            @for (field of groupedFields().noGroup; track field?.id) {
+              @if (!isHiddenField(field)) {
+                <div
+                  nz-col
+                  [nzXXl]="field?.grid?.xxl ?? null"
+                  [nzXl]="field?.grid?.xl ?? null"
+                  [nzLg]="field?.grid?.lg ?? null"
+                  [nzMd]="field?.grid?.md ?? null"
+                  [nzSm]="field?.grid?.sm ?? null"
+                  [nzXs]="field?.grid?.xs ?? null"
+                  class="field"
+                >
+                  <app-dynamic-field
+                    [field]="field"
+                    [fields]="oldFields()"
+                    [mode]="mode()"
+                    [control]="formGroup.get(field.key)!"
+                    [formGroup]="formGroup"
+                    [formId]="formId"
+                  />
+                </div>
+              }
+            }
+          </div>
+        }
+
+        <!-- Group các field -->
+        @if (groupedFields().grouped.length > 0) {
+          <nz-collapse [nzBordered]="false">
+            @for (
+              groupField of groupedFields().grouped;
+              track groupField.group.code
+            ) {
+              <nz-collapse-panel
+                [nzHeader]="groupField.group.template ?? groupField.group.label"
+                [nzActive]="groupField.group.isActive"
+                [nzShowArrow]="groupField.group.showArrow"
+                [nzDisabled]="groupField.group.disabled"
+                [style]="collapseCustomStyle"
+                class="mt-sm"
+              >
+                <div nz-row [nzGutter]="24">
+                  @for (field of groupField.fields; track field?.id) {
+                    @if (!isHiddenField(field)) {
+                      <div
+                        nz-col
+                        [nzXXl]="field?.grid?.xxl ?? null"
+                        [nzXl]="field?.grid?.xl ?? null"
+                        [nzLg]="field?.grid?.lg ?? null"
+                        [nzMd]="field?.grid?.md ?? null"
+                        [nzSm]="field?.grid?.sm ?? null"
+                        [nzXs]="field?.grid?.xs ?? null"
+                        class="field"
+                      >
+                        <app-dynamic-field
+                          [field]="field"
+                          [fields]="oldFields()"
+                          [mode]="mode()"
+                          [control]="formGroup.get(field.key)!"
+                          [formGroup]="formGroup"
+                          [formId]="formId"
+                        />
+                      </div>
+                    }
+                  }
+                </div>
+              </nz-collapse-panel>
+            }
+          </nz-collapse>
+        }
+      }
+    }
+  </form>
+}

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

@@ -0,0 +1,7 @@
+:host ::ng-deep {
+  .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header,
+  .ant-collapse .ant-collapse-item-disabled > .ant-collapse-header > .arrow {
+    color: #575757;
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DynamicFormComponent } from './dynamic-form.component';
+
+describe('DynamicFormComponent', () => {
+  let component: DynamicFormComponent;
+  let fixture: ComponentFixture<DynamicFormComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [DynamicFormComponent],
+    });
+    fixture = TestBed.createComponent(DynamicFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

@@ -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/dynamic-form.service.ts

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

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

@@ -0,0 +1,183 @@
+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 {}
+}