@ldquocc/dynamic-form 0.0.9 → 0.0.10

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

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

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

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

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

package/src/lib/shared/components/dynamic-field/dynamic-field.component.html

@@ -1,218 +0,0 @@
-<div [formGroup]="formGroup()">
-  <nz-form-item>
-    <nz-form-label
-      [nzXXl]="field().labelGrid.xxl ?? null"
-      [nzXl]="field().labelGrid.xl ?? null"
-      [nzLg]="field().labelGrid.lg ?? null"
-      [nzMd]="field().labelGrid.md ?? null"
-      [nzSm]="field().labelGrid.sm ?? null"
-      [nzXs]="field().labelGrid.xs ?? null"
-      [nzLabelAlign]="field().labelAlign"
-    >
-      @if (field().required) {
-        <span class="required">*</span>
-      }
-      <span class="form-label">
-        {{ field().label }}
-        @if (field().sublabel) {
-          <span class="sub-label mb-sm">{{ field().sublabel }}</span>
-        }
-      </span>
-    </nz-form-label>
-
-    <nz-form-control
-      [nzXXl]="field().controlGrid.xxl ?? null"
-      [nzXl]="field().controlGrid.xl ?? null"
-      [nzLg]="field().controlGrid.lg ?? null"
-      [nzMd]="field().controlGrid.md ?? null"
-      [nzSm]="field().controlGrid.sm ?? null"
-      [nzXs]="field().controlGrid.xs ?? null"
-      [nzErrorTip]="getErrorMessage()"
-    >
-      <div nz-flex [nzAlign]="'flex-start'" [nzGap]="8" class="w-100">
-        <div class="flex-1 min-w-0">
-          @switch (field().type) {
-            <!-- Input text -->
-            @case (fieldTypeEnum.InputText) {
-              <app-input-text
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-input-text>
-            }
-
-            <!-- Input password -->
-            @case (fieldTypeEnum.InputPassword) {
-              @if (mode() === formModeEnum.Add) {
-                <app-input-password
-                  [formControlName]="field().key"
-                  [fieldInput]="field()"
-                  [modeSignal]="mode()"
-                  [control]="control()"
-                  [formId]="formId()"
-                ></app-input-password>
-              }
-            }
-
-            <!-- Input formatted -->
-            @case (fieldTypeEnum.InputFormatted) {
-              <app-input-formatted
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-input-formatted>
-            }
-
-            <!-- Textarea -->
-            @case (fieldTypeEnum.Textarea) {
-              <app-textarea
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-textarea>
-            }
-
-            <!-- Single select -->
-            @case (fieldTypeEnum.SingleSelect) {
-              <app-single-select
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-single-select>
-            }
-
-            <!-- Multi select -->
-            @case (fieldTypeEnum.MultiSelect) {
-              <app-multi-select
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-multi-select>
-            }
-
-            @case (fieldTypeEnum.TreeSelect) {
-              <app-tree-select
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-tree-select>
-            }
-
-            <!-- Date Picker -->
-            @case (fieldTypeEnum.DatePicker) {
-              <app-date-picker
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-date-picker>
-            }
-
-            <!-- Date Range -->
-            @case (fieldTypeEnum.DateRange) {
-              <app-date-range
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-date-range>
-            }
-
-            <!-- Single File Upload -->
-            @case (fieldTypeEnum.SingleFileUpload) {
-              <app-single-file-upload
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-single-file-upload>
-            }
-
-            <!-- Multi File Upload -->
-            @case (fieldTypeEnum.MultiFileUpload) {
-              <app-multi-file-upload
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-multi-file-upload>
-            }
-
-            <!-- Multi File Upload -->
-            @case (fieldTypeEnum.MultiImageUpload) {
-              <app-multi-image-upload
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-multi-image-upload>
-            }
-
-            <!-- Avatar -->
-            @case (fieldTypeEnum.AvatarUpload) {
-              <app-avatar-upload
-                [formControlName]="field().key"
-                [fieldInput]="field()"
-                [modeSignal]="mode()"
-                [control]="control()"
-                [formId]="formId()"
-              ></app-avatar-upload>
-            }
-
-            <!-- Radio -->
-            @case (fieldTypeEnum.Radio) {
-              <span>Radio</span>
-            }
-
-            <!-- Checkbox -->
-            @case (fieldTypeEnum.Checkbox) {
-              <span>Checkbox</span>
-            }
-
-            <!-- Radio -->
-            @case (fieldTypeEnum.Radio) {
-              <span>Radio</span>
-            }
-
-            <!-- Switch -->
-            @case (fieldTypeEnum.Switch) {
-              <span>Switch</span>
-            }
-
-            <!-- Autocomplete -->
-            @case (fieldTypeEnum.Autocomplete) {
-              <span>Autocomplete</span>
-            }
-          }
-        </div>
-
-        <!-- Tách phần cấu hình ra Component riêng -->
-        @if (mode() !== formModeEnum.View) {
-          <div class="field-user-config-ctn">
-            <app-field-user-config
-              [field]="field()"
-              [control]="control()"
-            ></app-field-user-config>
-          </div>
-        }
-      </div>
-    </nz-form-control>
-  </nz-form-item>
-</div>

package/src/lib/shared/components/dynamic-field/dynamic-field.component.scss

@@ -1,28 +0,0 @@
-.required {
-  color: red;
-  font-weight: bold;
-  margin-right: 4px;
-}
-
-.form-label {
-  white-space: normal !important;
-  word-break: break-word;
-  font-weight: 500;
-  font-size: 12px;
-}
-
-.sub-label {
-  white-space: normal !important;
-  word-break: break-word;
-  font-size: 11px;
-  font-style: italic;
-}
-:host ::ng-deep {
-  .ant-form-item {
-    align-items: center;
-  }
-
-  .ant-form-item-label > label {
-    display: inline-block !important;
-  }
-}

package/src/lib/shared/components/dynamic-field/dynamic-field.component.spec.ts

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