@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

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

package/{lib/shared/components/component.d.ts → src/lib/shared/components/component.ts}

@@ -1,14 +1,34 @@
-import { DatePickerComponent } from "./fields/date/date-picker/date-picker.component";
-import { DateRangeComponent } from "./fields/date/date-range/date-range.component";
-import { InputFormattedComponent } from "./fields/input/input-formatted/input-formatted.component";
-import { InputPasswordComponent } from "./fields/input/input-password/input-password.component";
-import { InputTextComponent } from "./fields/input/input-text/input-text.component";
-import { MultiSelectComponent } from "./fields/select/multi-select/multi-select.component";
-import { SingleSelectComponent } from "./fields/select/single-select/single-select.component";
-import { TreeSelectComponent } from "./fields/select/tree-select/tree-select.component";
-import { TextareaComponent } from "./fields/textarea/textarea.component";
-import { AvatarUploadComponent } from "./fields/upload/avatar-upload/avatar-upload.component";
-import { MultiFileUploadComponent } from "./fields/upload/multi-file-upload/multi-file-upload.component";
-import { MultiImageUploadComponent } from "./fields/upload/multi-image-upload/multi-image-upload.component";
-import { SingleFileUploadComponent } from "./fields/upload/single-file-upload/single-file-upload.component";
-export declare const FIELD_COMPONENTS: (typeof DatePickerComponent | typeof DateRangeComponent | typeof InputFormattedComponent | typeof InputPasswordComponent | typeof InputTextComponent | typeof MultiSelectComponent | typeof SingleSelectComponent | typeof TreeSelectComponent | typeof TextareaComponent | typeof AvatarUploadComponent | typeof MultiFileUploadComponent | typeof MultiImageUploadComponent | typeof SingleFileUploadComponent)[];
+import { DatePickerComponent } from "./fields/date/date-picker/date-picker.component";
+import { DateRangeComponent } from "./fields/date/date-range/date-range.component";
+import { InputFormattedComponent } from "./fields/input/input-formatted/input-formatted.component";
+import { InputPasswordComponent } from "./fields/input/input-password/input-password.component";
+import { InputTextComponent } from "./fields/input/input-text/input-text.component";
+import { MultiSelectComponent } from "./fields/select/multi-select/multi-select.component";
+import { SingleSelectComponent } from "./fields/select/single-select/single-select.component";
+import { TreeSelectComponent } from "./fields/select/tree-select/tree-select.component";
+import { TextareaComponent } from "./fields/textarea/textarea.component";
+import { AvatarUploadComponent } from "./fields/upload/avatar-upload/avatar-upload.component";
+import { MultiFileUploadComponent } from "./fields/upload/multi-file-upload/multi-file-upload.component";
+import { MultiImageUploadComponent } from "./fields/upload/multi-image-upload/multi-image-upload.component";
+import { SingleFileUploadComponent } from "./fields/upload/single-file-upload/single-file-upload.component";
+
+// Các field component đại diện cho giao diện của từng control.
+export const FIELD_COMPONENTS = [
+  InputTextComponent,
+  InputPasswordComponent,
+  InputFormattedComponent,
+
+  SingleSelectComponent,
+  MultiSelectComponent,
+  TreeSelectComponent,
+
+  TextareaComponent,
+
+  DatePickerComponent,
+  DateRangeComponent,
+
+  SingleFileUploadComponent,
+  MultiFileUploadComponent,
+  MultiImageUploadComponent,
+  AvatarUploadComponent,
+];

package/src/lib/shared/components/d-form-testing/d-form-testing.component.html

@@ -0,0 +1,197 @@
+@if (showTestFormInModal) {
+  <h4>
+    =============================================== FORM IN MODAL
+    ==================================================</h4
+  >
+  <div class="my-4">
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="openModal(formModeEnum.Add)"
+    >
+      <span>OpenModal add</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="openModal(formModeEnum.Edit)"
+    >
+      <span>OpenModal edit</span>
+    </button>
+
+    <nz-modal
+      [nzVisible]="isVisibleModal"
+      [nzContent]="modalContent"
+      [nzWidth]="800"
+      (nzOnCancel)="handleCancel()"
+      (nzOnOk)="handleOk()"
+      [nzKeyboard]="false"
+    >
+      <ng-template #modalContent>
+        <app-dynamic-forms
+          [formId]="formId"
+          [mode]="formMode"
+          [fields]="fields"
+          [model]="model"
+          (formSubmit)="handleWhenFormSubmit($event)"
+        ></app-dynamic-forms>
+      </ng-template>
+    </nz-modal>
+  </div>
+}
+
+@if (showTestForm) {
+  <h4>
+    =============================================== FORM
+    ==================================================</h4
+  >
+  <div>
+    <app-dynamic-forms
+      [formId]="formId"
+      [mode]="formMode"
+      [fields]="fields"
+      [model]="model"
+      (formSubmit)="handleWhenFormSubmit($event)"
+    ></app-dynamic-forms>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleSubmitDform()"
+    >
+      <span>Submit</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleResetDform()"
+    >
+      <span>Reset</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleChangeModelData()"
+    >
+      <span>Change model data</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleChangeMode(formModeEnum.Add)"
+    >
+      <span>Change mode add</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleChangeMode(formModeEnum.Edit)"
+    >
+      <span>Change mode edit</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleChangeMode(formModeEnum.View)"
+    >
+      <span>Change mode view</span>
+    </button>
+
+    <button
+      class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+      nz-button
+      nzType="primary"
+      (click)="handleSetDataOutsideForm()"
+    >
+      <span>Set data outside form for field</span>
+    </button>
+  </div>
+}
+
+<!-- Test trường hợp nhiều dynamic form cùng một giao diện -->
+@if (showTestMultiForm) {
+  <div class="multi-form">
+    <div>
+      <h2>Form A</h2>
+      <app-dynamic-forms
+        [formId]="multiFormIdA"
+        [mode]="multiFormMode"
+        [fields]="multiFormFieldsA"
+        [model]="multiFormModelA"
+        (formSubmit)="multiFormSubmitA($event)"
+      ></app-dynamic-forms>
+    </div>
+
+    <div>
+      <h2>Form B</h2>
+      <app-dynamic-forms
+        [formId]="multiFormIdB"
+        [mode]="multiFormMode"
+        [fields]="multiFormFieldsB"
+        [model]="multiFormModelB"
+        (formSubmit)="multiFormSubmitB($event)"
+      ></app-dynamic-forms>
+    </div>
+
+    <div>
+      <button
+        class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+        nz-button
+        nzType="primary"
+        (click)="submitMultiFormA()"
+      >
+        <span>Submit A</span>
+      </button>
+
+      <button
+        class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+        nz-button
+        nzType="primary"
+        (click)="submitMultiFormB()"
+      >
+        <span>Submit B</span>
+      </button>
+    </div>
+  </div>
+}
+
+<!-- Test trường hợp multi select field phụ thuộc vào parent -->
+@if (showTestMultiSelectDependOnParent) {
+  <div class="multi-select-depend-on-parent">
+    <div>
+      <h2>Multi select depend on parent</h2>
+      <app-dynamic-forms
+        [formId]="multiSelectDependOnParentId"
+        [mode]="multiSelectDependOnParentFormMode"
+        [fields]="multiSelectDependOnParentFields"
+        [model]="multiSelectDependOnParentModel"
+        (formSubmit)="multiSelectDependOnParentResponse($event)"
+      ></app-dynamic-forms>
+    </div>
+
+    <div>
+      <button
+        class="btn-add-new d-inline-flex align-items-center mt-2 ms-2 me-2"
+        nz-button
+        nzType="primary"
+        (click)="multiSelectDependOnParentSubmit()"
+      >
+        <span>Submit</span>
+      </button>
+    </div>
+  </div>
+}

package/src/lib/shared/components/d-form-testing/d-form-testing.component.less

@@ -0,0 +1,12 @@
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.my-4 {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}

package/src/lib/shared/components/d-form-testing/d-form-testing.component.spec.ts

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

package/src/lib/shared/components/d-form-testing/d-form-testing.component.ts

@@ -0,0 +1,197 @@
+import { Component, inject } from "@angular/core";
+import { uuidGenerator } from "../../utils/common";
+import { BaseField } from "../../models/fields/field.model";
+import { DynamicFormService } from "../../services/dynamic-form.service";
+import { CORE_MODULES, FORM_MODULES } from "../../consts/common";
+import {
+  sampleFields,
+  sampleFields2,
+  sampleModel,
+  sampleModel2,
+  sampleMultiFormFieldsA,
+  sampleMultiFormFieldsB,
+  sampleMultiFormModelA,
+  sampleMultiFormModelB,
+  sampleMultiSelectDependOnParent,
+} from "../../consts/common/sample-test.const";
+import { FormMode } from "../../models/form";
+import { FormModeEnum } from "../../enums/form";
+import { DynamicFormComponent } from "../../../dynamic-form.component";
+import { NzModalModule, NzModalService } from "ng-zorro-antd/modal";
+import { cloneDeep, isEqual } from "lodash-es";
+import { SuffixService } from "../../services/suffix.service";
+import { NzButtonModule } from "ng-zorro-antd/button";
+
+const ZORRO_MODULES = [NzButtonModule, NzModalModule];
+@Component({
+  selector: "app-d-form-testing",
+  imports: [
+    ...CORE_MODULES,
+    ...FORM_MODULES,
+    ...ZORRO_MODULES,
+    DynamicFormComponent,
+  ],
+  templateUrl: "./d-form-testing.component.html",
+  styleUrl: "./d-form-testing.component.less",
+})
+export class DFormTestingComponent {
+  formId = "";
+  formMode: FormMode = FormModeEnum.Add;
+  fields: BaseField<any>[] = [];
+  model: Record<string, unknown> = {
+    username: "get off",
+    province: { code: 35, name: "Hà Name" },
+  };
+
+  formModeEnum = FormModeEnum;
+
+  showTestForm = true;
+  showTestFormInModal = false;
+
+  isVisibleModal = false;
+
+  private dFormService = inject(DynamicFormService);
+  private modalService = inject(NzModalService);
+  private suffixService = inject(SuffixService);
+
+  ngOnInit(): void {
+    this.formId = uuidGenerator();
+    this.formMode = FormModeEnum.Add;
+    this.fields = sampleFields;
+    //     this.fields = sampleFields2;
+    // this.model = sampleModel2
+
+    this.suffixService.suffixClick.subscribe(({ key }) => {
+      console.log("output ra với", key);
+    });
+  }
+
+  handleSubmitDform(): void {
+    this.dFormService.triggerSubmit(this.formId);
+  }
+
+  handleWhenFormSubmit(data: Record<string, unknown>): void {
+    console.log("submit data", data);
+
+    if (data["pictures"]) {
+      console.log(
+        "pictures",
+        JSON.parse(data["pictures"] as unknown as string),
+      );
+    }
+  }
+
+  handleResetDform(): void {
+    this.dFormService.triggerReset(this.formId);
+  }
+
+  handleChangeModelData(): void {
+    this.model = sampleModel2;
+  }
+
+  openModal(mode: FormMode): void {
+    this.formMode = mode;
+
+    if (mode === FormModeEnum.Add) {
+      // this.model = {};
+      this.model = sampleModel;
+    }
+
+    if (mode === FormModeEnum.Edit) {
+      // this.model = sampleModel;
+      this.model = sampleModel2;
+    }
+
+    this.isVisibleModal = true;
+  }
+
+  handleCancel(): void {
+    this.isVisibleModal = false;
+    // this.dFormService.triggerReset(this.formId)
+  }
+
+  handleOk(): void {
+    this.dFormService.triggerSubmit(this.formId);
+  }
+
+  handleChangeMode(mode: FormMode) {
+    // this.dFormService.triggerReset(this.formId);
+    this.formMode = mode;
+    const x = this.fields;
+    this.model = sampleModel2;
+    // this.fields = sampleFields;
+    if (mode === FormModeEnum.Add) {
+      // this.fields = sampleFields;
+      this.model = {};
+    }
+
+    if (mode === FormModeEnum.Edit) {
+      // this.fields = sampleFields2;
+      this.model = sampleModel2;
+    }
+  }
+
+  handleSetDataOutsideForm(): void {
+    if (
+      this.formMode === FormModeEnum.Add ||
+      this.formMode === FormModeEnum.Edit
+    ) {
+      // {
+      //   code: 'ADMIN'
+      // }
+      // 'ADMIN'
+      this.dFormService.setFieldValue("role", {
+        code: "ADMIN",
+      });
+    } else {
+      alert("Không hỗ trợ cho view");
+    }
+  }
+
+  //#region Test Multi Form
+  showTestMultiForm = false;
+
+  multiFormMode: FormMode = FormModeEnum.Add;
+
+  multiFormIdA = uuidGenerator();
+  multiFormFieldsA: BaseField<any>[] = sampleMultiFormFieldsA;
+  multiFormModelA: Record<string, unknown> = sampleMultiFormModelA;
+
+  multiFormIdB = uuidGenerator();
+  multiFormFieldsB: BaseField<any>[] = sampleMultiFormFieldsB;
+  multiFormModelB: Record<string, unknown> = sampleMultiFormModelB;
+
+  submitMultiFormA(): void {
+    this.dFormService.triggerSubmit(this.multiFormIdA);
+  }
+
+  multiFormSubmitA(rawData: Record<string, unknown>): void {
+    console.log("submit data A", rawData);
+  }
+
+  submitMultiFormB(): void {
+    this.dFormService.triggerSubmit(this.multiFormIdB);
+  }
+
+  multiFormSubmitB(rawData: Record<string, unknown>): void {
+    console.log("submit data B", rawData);
+  }
+  //#endregion Test Multi Form
+
+  //#region Test Multi Select depend on Parent
+  showTestMultiSelectDependOnParent = false;
+  multiSelectDependOnParentFormMode: FormMode = FormModeEnum.Add;
+  multiSelectDependOnParentId = uuidGenerator();
+  multiSelectDependOnParentFields: BaseField<any>[] =
+    sampleMultiSelectDependOnParent;
+  multiSelectDependOnParentModel: Record<string, unknown> = {};
+
+  multiSelectDependOnParentSubmit(): void {
+    this.dFormService.triggerSubmit(this.multiSelectDependOnParentId);
+  }
+
+  multiSelectDependOnParentResponse(rawData: Record<string, unknown>): void {
+    console.log("Multi Select Depend On Parent Response", rawData);
+  }
+  //#endregion Test Multi Select depend on Parent
+}