@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/components/fields/input/input-text/input-text.component.html

@@ -0,0 +1,73 @@
+<div class="flex">
+  @if (modeSignal() === formModeEnum.View) {
+    @if (field().viewMode === viewModeEnum.form) {
+      @if (field().isCurrency) {
+        <input
+          nz-input
+          [ngModel]="viewDisplayValue()"
+          class="modeView"
+          [currencyMask]="{
+            prefix: '',
+            suffix: ' VND',
+            thousands: ',',
+            decimal: '.',
+            precision: 2,
+            align: 'left',
+          }"
+        />
+      } @else {
+        <input nz-input [value]="viewDisplayValue()" class="modeView" />
+      }
+    }
+    @if (field().viewMode === viewModeEnum.text) {
+      @if (field().isCurrency) {
+        <span class="modeView">
+          {{
+            viewDisplayValue() | currency: "VND" : "symbol" : "1.0-0" : "vi-VN"
+          }}
+        </span>
+      } @else {
+        <span class="modeView">{{ viewDisplayValue() }}</span>
+      }
+    }
+  } @else {
+    @if (field().isCurrency) {
+      <input
+        nz-input
+        class="input-control"
+        [currencyMask]="{
+          prefix: '',
+          suffix: ' VND',
+          thousands: ',',
+          decimal: '.',
+          precision: 2,
+          align: 'left',
+        }"
+        [(ngModel)]="value"
+        [placeholder]="displayPlaceholder()"
+        [disabled]="isDisabled"
+        (ngModelChange)="handleChangeFormValue($event)"
+        (blur)="onTouched()"
+      />
+    } @else {
+      <input
+        nz-input
+        class="input-control"
+        [value]="value"
+        [placeholder]="displayPlaceholder()"
+        [disabled]="isDisabled"
+        (input)="handleChangeInputText($event)"
+        (blur)="onTouched()"
+      />
+    }
+  }
+
+  <!-- Suffixes -->
+  @if (field().suffixes.length > 0) {
+    @for (suffix of field().suffixes; track $index) {
+      @if (suffix.visibleOn?.includes(this.modeSignal())) {
+        <app-suffix [suffixConfig]="suffix" [formId]="formId"> </app-suffix>
+      }
+    }
+  }
+</div>

package/src/lib/shared/components/fields/input/input-text/input-text.component.spec.ts

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

package/src/lib/shared/components/fields/input/input-text/input-text.component.ts

@@ -0,0 +1,98 @@
+import {
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  untracked,
+} from "@angular/core";
+import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { InputTextField } from "../../../../models/fields/input";
+import {
+  createInputPlaceholder,
+  createPlaceholder,
+} from "../../../../utils/dynamic-form/dynamic-form";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { NO_INFO_TEXT } from "../../../../consts/common";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { SuffixComponent } from "../../components/suffix/suffix.component";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { CommonModule, CurrencyPipe } from "@angular/common";
+import { NgxCurrencyDirective } from "ngx-currency";
+
+const ZORRO_MODULES = [
+  NzInputModule,
+  NgxCurrencyDirective,
+  CurrencyPipe,
+  CommonModule,
+  FormsModule,
+];
+const COMPONENTS = [SuffixComponent];
+@Component({
+  selector: "app-input-text",
+  standalone: true,
+  imports: [...ZORRO_MODULES, ...COMPONENTS],
+  templateUrl: "./input-text.component.html",
+  styleUrls: ["./input-text.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputTextComponent),
+      multi: true,
+    },
+  ],
+})
+export class InputTextComponent extends BaseValueAccessor<string> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof InputTextField) ||
+      (base.type !== FieldTypeEnum.InputText &&
+        base.controlType !== ControlTypeEnum.Input)
+    ) {
+      throw new Error("Expected InputTextField");
+    }
+    return base;
+  });
+
+  readonly viewDisplayValue = computed(() => {
+    // 1. Nếu không phải View thì không cần quan tâm text này
+    if (!this.isView()) return "";
+
+    // 2. Lấy giá trị từ valueSignal
+    const val = this.valueSignal();
+    return val ? val : NO_INFO_TEXT;
+  });
+
+  constructor() {
+    super();
+  }
+
+  // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+  override resolvePlaceholderText(): string {
+    return createInputPlaceholder(this.field());
+  }
+
+  // Xử lý khi nhập giá trị mới vào input
+  handleChangeInputText(event: Event): void {
+    const inputValue = (event.target as HTMLInputElement).value;
+    this.propagateValue(inputValue);
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(this.fieldKey(), inputValue);
+  }
+
+  handleChangeFormValue(value: number): void {
+    const inputValue = value?.toString();
+    this.propagateValue(inputValue);
+    this.patchFormData(this.fieldKey(), inputValue);
+  }
+
+  protected override writeValueToView(value: string): void {
+    if (!this.isAddOrEdit()) return;
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(this.fieldKey(), value);
+  }
+}

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.html

@@ -0,0 +1,73 @@
+<div class="flex">
+  @if (modeSignal() === formModeEnum.View) {
+    @if (viewMode() === viewModeEnum.form) {
+      @if (field().value!.length > 0) {
+        <nz-select
+          nzAllowClear
+          [nzMode]="'multiple'"
+          [ngModel]="viewDisplayValue()"
+          [nzMaxTagCount]="field().maxTagCount!"
+          [nzMaxMultipleCount]="field().maxMultipleCount!"
+          [nzDisabled]="true"
+        >
+          @for (displayOption of viewDisplayValue(); track $index) {
+            <nz-option [nzValue]="displayOption" [nzLabel]="displayOption">
+            </nz-option>
+          }
+        </nz-select>
+      } @else {
+        <input nz-input [value]="displayNoValueText" [disabled]="true" />
+      }
+    }
+
+    @if (viewMode() === viewModeEnum.text) {
+      @if (viewDisplayValue().length) {
+        <ul class="view-list">
+          @for (label of viewDisplayValue(); track $index) {
+            <li>{{ label }}</li>
+          }
+        </ul>
+      } @else {
+        <span class="modeView">{{ displayNoValueText }}</span>
+      }
+    }
+  } @else {
+    <nz-select
+      [id]="fieldKey()"
+      nzShowSearch
+      nzAllowClear
+      [nzDisabled]="disabled()"
+      [nzMode]="'multiple'"
+      [nzPlaceHolder]="displayPlaceholder()"
+      [nzMaxTagCount]="field().maxTagCount!"
+      [nzMaxMultipleCount]="field().maxMultipleCount!"
+      [nzSuffixIcon]="optionsResource.isLoading() ? loadingIcon : null"
+      [ngModel]="value"
+      (ngModelChange)="handleChangeOptions($event)"
+    >
+      @for (
+        option of options();
+        track `${option[this.field().bindValue]}-${$index}`
+      ) {
+        <nz-option
+          [nzValue]="transformOptionValue(option)"
+          [nzLabel]="getOptionLabel(option)"
+        >
+        </nz-option>
+      }
+    </nz-select>
+
+    <ng-template #loadingIcon>
+      <nz-spin nzSimple [nzSize]="'small'"></nz-spin>
+    </ng-template>
+  }
+
+  <!-- Suffixes -->
+  @if (field().suffixes.length > 0) {
+    @for (suffix of field().suffixes; track $index) {
+      @if (suffix.visibleOn?.includes(this.modeSignal())) {
+        <app-suffix [suffixConfig]="suffix" [formId]="formId"> </app-suffix>
+      }
+    }
+  }
+</div>

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.scss

@@ -0,0 +1,21 @@
+.view-list {
+  margin-bottom: 0;
+  padding-inline-start: 24px !important;
+}
+:host ::ng-deep {
+  .ant-input[disabled] {
+    background-color: white;
+    color: #575757 !important;
+    // font-size: 12px;
+  }
+  .ant-select-multiple.ant-select-disabled.ant-select:not(
+      .ant-select-customize-input
+    )
+    .ant-select-selector {
+    background: #ffffff;
+  }
+  .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
+    color: #575757;
+    // font-size: 12px;
+  }
+}

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.spec.ts

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

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.ts

@@ -0,0 +1,212 @@
+import { Component, computed, forwardRef, untracked } from "@angular/core";
+import { CORE_MODULES, FORM_MODULES } from "../../../../consts/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { BaseSelectComponent } from "../../../../base/base-select.component";
+import { MultiSelectField } from "../../../../models/fields/select/multi-select-field.model";
+import { createMultiSelectPlaceholder } from "../../../../utils/dynamic-form/dynamic-form";
+import { SelectOutputValueTypeEnum } from "../../../../enums/common";
+import { NO_INFO_TEXT } from "../../../../consts/common/common.const";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { SuffixComponent } from "../../components/suffix/suffix.component";
+import { NzSelectModule } from "ng-zorro-antd/select";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { NzSpinModule } from "ng-zorro-antd/spin";
+
+const ZORRO_MODULES = [NzSelectModule, NzInputModule, NzSpinModule];
+const COMPONENTS = [SuffixComponent];
+
+@Component({
+  selector: "app-multi-select",
+  standalone: true,
+  imports: [...CORE_MODULES, ...FORM_MODULES, ...ZORRO_MODULES, ...COMPONENTS],
+  templateUrl: "./multi-select.component.html",
+  styleUrls: ["./multi-select.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MultiSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class MultiSelectComponent extends BaseSelectComponent<
+  string[] | number[] | Record<string, unknown>[]
+> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof MultiSelectField) ||
+      (base.type !== FieldTypeEnum.MultiSelect &&
+        base.controlType !== ControlTypeEnum.Select)
+    ) {
+      throw new Error("Expected MultiSelectField");
+    }
+    return base;
+  });
+
+  displayNoValueText = NO_INFO_TEXT;
+
+  // Biến đổi dữ liệu hiển thị ở chế độ View
+  viewDisplayValue = computed(() => {
+    if (!this.isView()) return [];
+    console.log("viewDisplayValue", this.field().modelValue || []);
+
+    return this.getDisplayValue(this.field().modelValue || []);
+  });
+
+  constructor() {
+    super();
+  }
+
+  protected override onApiOptionsLoaded(): void {
+    const field = this.field();
+    if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
+      const newOutputValue =
+        this.value && this.getValueByOutputAs(this.value as string[]);
+      this.patchFormData(this.fieldKey(), newOutputValue);
+    }
+  }
+
+  // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
+  override resolvePlaceholderText(): string {
+    return createMultiSelectPlaceholder(this.field());
+  }
+
+  handleChangeOptions(optionValue: string[]): void {
+    this.propagateValue(optionValue);
+  }
+
+  // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
+  protected override writeValueToView(value: string[]): void {
+    if (!this.isAddOrEdit()) return;
+
+    this.fieldService.emitDependValueChange(
+      this.fieldKey(),
+      value.length ? value.join(",") : "",
+    );
+
+    // Gán data vào đầu ra của form.
+    const newOutputValue = value && this.getValueByOutputAs(value);
+    this.patchFormData(this.fieldKey(), newOutputValue);
+  }
+
+  // Xử lý phụ thuộc khi change value
+  protected override handleValueChange(value: string[]): void {
+    const { isParent } = this.field();
+    if (isParent) {
+      console.log("cscs");
+
+      this.fieldService.emitDependValueChange(
+        this.fieldKey(),
+        value.length ? value.join(",") : "",
+      );
+    }
+
+    const newOutputValue = value && this.getValueByOutputAs(value);
+    this.patchFormData(this.fieldKey(), newOutputValue);
+  }
+
+  // Xử lý output value đầu ra theo outputAs mà người dùng mong muốn.
+  private getValueByOutputAs(
+    singleValueArr: string[] | number[],
+  ): string[] | Record<string, unknown>[] {
+    const field = this.field();
+    const { outputAs, bindValue, modelValue } = field;
+
+    if (singleValueArr.length === 0) {
+      return singleValueArr.map(String);
+    }
+
+    // Nếu outputAs là dạng single.
+    let value: string[] | Record<string, unknown>[] =
+      singleValueArr.map(String);
+
+    // Nếu outputAs là dạng object.
+    if (outputAs === SelectOutputValueTypeEnum.Object) {
+      value = value.map((val) => ({
+        [bindValue]: val,
+      }));
+    }
+
+    // Nếu outputAs là dạng SourceObject.
+    if (outputAs === SelectOutputValueTypeEnum.SourceObject) {
+      const options = untracked(() => this.options());
+      value = (singleValueArr as string[]).map((val) => {
+        // 1. Tìm trong options hiện tại
+        let foundValue = options.find((opt) => opt[bindValue] === val);
+
+        // 2. Fallback tìm trong modelValue (vì modelValue có thể là array of objects)
+        // if (!foundValue && modelValue && Array.isArray(modelValue)) {
+        //   foundValue = modelValue.find(
+        //     (mOpt: any) => typeof mOpt === "object" && mOpt[bindValue] === val
+        //   );
+        // }
+
+        // 3. Fallback cuối cùng
+        return foundValue ?? { [bindValue]: val };
+      });
+    }
+
+    return value;
+  }
+
+  // Làm phẳng giá trị để hiện thị ở chế độ View.
+  protected getDisplayValue(value: string[] | Record<string, unknown>[]) {
+    const optionsValue = value!.map(
+      (val: string | number | Record<string, unknown>) => {
+        if (typeof val === "object") {
+          return this.getCustomLabel(val);
+        }
+        return val as string;
+      },
+    );
+
+    return optionsValue;
+  }
+
+  protected transformOptionValue(option: Record<string, unknown>): unknown {
+    const field = this.field();
+
+    let optionValue: unknown;
+
+    optionValue = option[field.bindValue];
+
+    return optionValue;
+  }
+
+  protected getOptionLabel(option: Record<string, unknown>): string {
+    return this.getCustomLabel(option);
+  }
+
+  // Biến đổi label nếu có thuộc tính hàm biến đổi transformLabel.
+  private getCustomLabel(option: Record<string, unknown>): string {
+    const field = this.field();
+
+    // 1. Ưu tiên lấy bindLabel, nếu không có thì fallback sang bindValue
+    let rawLabel = option[field.bindLabel];
+    if (rawLabel === undefined || rawLabel === null || rawLabel === "") {
+      rawLabel = option[field.bindValue];
+    }
+
+    // 2. Kiểm tra nếu không tồn tại hoặc là dạng object/function (kể cả array)
+    if (
+      rawLabel === undefined ||
+      rawLabel === null ||
+      typeof rawLabel === "object" ||
+      typeof rawLabel === "function"
+    ) {
+      return NO_INFO_TEXT;
+    }
+
+    let optionLabel = String(rawLabel);
+
+    // 3. Biến đổi theo transformLabel nếu có
+    if (field.transformLabel) {
+      const tranformLabelValue = field.transformLabel(option);
+      if (tranformLabelValue) optionLabel = tranformLabelValue;
+    }
+
+    return optionLabel;
+  }
+}

package/src/lib/shared/components/fields/select/single-select/single-select.component.html

@@ -0,0 +1,55 @@
+<div class="d-flex">
+  @if (isView()) {
+    @if (viewMode() === viewModeEnum.form) {
+      <input
+        [title]="viewDisplayValue()"
+        nz-input
+        [value]="viewDisplayValue()"
+        class="modeView"
+      />
+    }
+    @if (viewMode() === viewModeEnum.text) {
+      <span [title]="viewDisplayValue()" class="modeView break-work">{{
+        viewDisplayValue()
+      }}</span>
+    }
+  } @else {
+    <nz-select
+      [id]="fieldKey()"
+      nzShowSearch
+      nzAllowClear
+      [nzDisabled]="disabled()"
+      [nzPlaceHolder]="displayPlaceholder()"
+      [nzSuffixIcon]="optionsResource.isLoading() ? loadingIcon : null"
+      [title]="field().tooltip || ''"
+      [nzDropdownMatchSelectWidth]="field().matchSelectWidth"
+      [ngModel]="value"
+      class="flex-1 min-w-0"
+      (ngModelChange)="handleChangeOptions($event)"
+    >
+      @for (
+        option of options();
+        track `${option[this.field().bindValue]}-${$index}`
+      ) {
+        <nz-option
+          [nzValue]="transformOptionValue(option)"
+          [nzLabel]="getOptionLabel(option)"
+        >
+        </nz-option>
+      }
+    </nz-select>
+
+    <ng-template #loadingIcon>
+      <nz-spin nzSimple [nzSize]="'small'"></nz-spin>
+    </ng-template>
+  }
+
+  <!-- Suffixes -->
+  @if (field().suffixes.length > 0) {
+    @for (suffix of field().suffixes; track $index) {
+      @if (suffix.visibleOn?.includes(this.modeSignal())) {
+        <app-suffix [suffixConfig]="suffix" [formId]="formId"> </app-suffix>
+      }
+    }
+  }
+</div>

package/src/lib/shared/components/fields/select/single-select/single-select.component.scss

@@ -0,0 +1 @@
+

package/src/lib/shared/components/fields/select/single-select/single-select.component.spec.ts

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