@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/components/fields/date/date-picker/date-picker.component.ts

@@ -0,0 +1,148 @@
+import {
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  untracked,
+} from "@angular/core";
+import { FORM_MODULES } from "../../../../consts/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { DatePickerField } from "../../../../models/fields/date/date-picker-field.model";
+
+import { differenceInCalendarDays } from "date-fns";
+import { DatePickerOutputValueTypeEnum } from "../../../../enums/common";
+import {
+  formatDateToDDMMYYYY,
+  formatDateToYYYYMMDD,
+} from "../../../../utils/date";
+import { DatePickerOutputValueType } from "../../../../models/common/output-value-type.model";
+import { NO_INFO_TEXT } from "../../../../consts/common/common.const";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { NzDatePickerModule } from "ng-zorro-antd/date-picker";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { FormUtils } from "../../../../services/form-utils";
+import { createDatePickerPlaceholder } from "../../../../utils/dynamic-form/dynamic-form";
+
+const ZORRO_MODULES = [NzDatePickerModule, NzInputModule];
+
+@Component({
+  selector: "app-date-picker",
+  standalone: true,
+  imports: [...FORM_MODULES, ...ZORRO_MODULES],
+  templateUrl: "./date-picker.component.html",
+  styleUrls: ["./date-picker.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DatePickerComponent),
+      multi: true,
+    },
+  ],
+})
+export class DatePickerComponent extends BaseValueAccessor<string | Date> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof DatePickerField) ||
+      (base.type !== FieldTypeEnum.DatePicker &&
+        base.controlType !== ControlTypeEnum.Date)
+    ) {
+      throw new Error("Expected DatePickerField");
+    }
+    return base;
+  });
+
+  // Định dạng ngày
+  format = computed(() => {
+    return this.field().format ?? "dd-MM-yyyy";
+  });
+
+  // Kiểm tra có cho phép chọn ngày quá khứ hay ngày tương lai hay không?
+  disabledDate = computed(() => {
+    const field = this.field();
+
+    return (current: Date): boolean => {
+      if (field.disabledDateFn) {
+        return field.disabledDateFn(current);
+      }
+      const today = new Date();
+      const diff = differenceInCalendarDays(current, today);
+
+      // if (field.onlyToday) return diff !== 0;
+      if (!field.allowPastDates && diff < 0) return true;
+      if (!field.allowFutureDates && diff > 0) return true;
+
+      return false;
+    };
+  });
+
+  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() as Date;
+    return val ? FormUtils.convertViewDate(val, this.format()) : 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 createDatePickerPlaceholder(this.field());
+  }
+
+  // Sự kiện khi người dùng chọn ngày
+  handleChangeDate(date: Date): void {
+    this.propagateValue(date);
+  }
+
+  // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue
+  protected override writeValueToView(value: Date): void {
+    if (!this.isAddOrEdit()) return;
+
+    const { outputAs } = this.field();
+
+    this.fieldService.updateDependValuesMap(
+      this.fieldKey(),
+      value ? formatDateToYYYYMMDD(value) : "",
+    );
+
+    // Gán data vào đầu ra của form
+    const newOutputValue = value && this.getValueByOutputAs(value, outputAs);
+    this.patchFormData(this.fieldKey(), newOutputValue);
+  }
+
+  // Xử lý phụ thuộc khi change value
+  protected override handleValueChange(value: Date): void {
+    const { outputAs, isParent } = this.field();
+
+    if (isParent) {
+      this.fieldService.updateDependValuesMap(
+        this.fieldKey(),
+        value ? formatDateToYYYYMMDD(value) : "",
+      );
+    }
+
+    // Gán data vào đầu ra của form
+    const newOutputValue = value && this.getValueByOutputAs(value, outputAs);
+    this.patchFormData(this.fieldKey(), newOutputValue);
+  }
+
+  // Biến đổi giá trị đầu ra theo outputAs
+  private getValueByOutputAs(
+    date: Date,
+    outputAs: DatePickerOutputValueType,
+  ): string | Date {
+    let value: string | Date = date;
+
+    if (outputAs === DatePickerOutputValueTypeEnum.String) {
+      value = formatDateToYYYYMMDD(value);
+    }
+    return value;
+  }
+}

package/src/lib/shared/components/fields/date/date-range/date-range.component.html

@@ -0,0 +1,33 @@
+@if (modeSignal() === formModeEnum.View) {
+  @if (valueSignal()!.length > 0) {
+    <nz-range-picker
+      [class]="'w-100'"
+      [nzFormat]="format()"
+      [nzDisabled]="true"
+      [ngModel]="valueSignal()"
+      class="modeView"
+      [nzSuffixIcon]="suffixIcon"
+    ></nz-range-picker>
+    <ng-template #suffixIcon>
+      <!-- Để trống, hoặc custom icon khác -->
+    </ng-template>
+  } @else {
+    <input
+      nz-input
+      [value]="displayValueNoInfo"
+      [disabled]="true"
+      class="modeView"
+    />
+  }
+} @else {
+  <nz-range-picker
+    [id]="fieldKey()"
+    class="w-100"
+    [nzDisabled]="disabledSignal()"
+    [nzFormat]="format()"
+    [nzDisabledDate]="disabledDate()"
+    [nzPlaceHolder]="placeholders()"
+    [ngModel]="valueSignal()"
+    (ngModelChange)="handleChangeDateRange($event)"
+  ></nz-range-picker>
+}

package/src/lib/shared/components/fields/date/date-range/date-range.component.scss

@@ -0,0 +1,22 @@
+// @use "../../../../styles/common-form";
+
+:host ::ng-deep {
+  .modeView {
+    &.ant-picker.ant-picker-disabled {
+      background-color: inherit !important;
+      cursor: default;
+      pointer-events: none;
+    }
+
+    .ant-picker-input > input[disabled] {
+      color: #575757 !important;
+    }
+  }
+}
+
+.modeView {
+  pointer-events: none;
+  // background-color: white;
+  // font-size: 12px;
+  color: #575757 !important;
+}

package/src/lib/shared/components/fields/date/date-range/date-range.component.spec.ts

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

package/src/lib/shared/components/fields/date/date-range/date-range.component.ts

@@ -0,0 +1,133 @@
+import {
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  untracked,
+} from "@angular/core";
+import { FORM_MODULES } from "../../../../consts/common";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { DateRangeField } from "../../../../models/fields/date/date-range-field.model";
+import { DateRangeOutputValueType } from "../../../../models/common/output-value-type.model";
+import { DateRangeOutputValueTypeEnum } from "../../../../enums/common";
+import { formatDateToYYYYMMDD, normalizeToDate } from "../../../../utils/date";
+import { NO_INFO_TEXT } from "../../../../consts/common/common.const";
+import { differenceInCalendarDays } from "date-fns";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { NzDatePickerModule } from "ng-zorro-antd/date-picker";
+import { NzInputModule } from "ng-zorro-antd/input";
+
+const ZORRO_MODULES = [NzDatePickerModule, NzInputModule];
+
+@Component({
+  selector: "app-date-range",
+  standalone: true,
+  imports: [...FORM_MODULES, ...ZORRO_MODULES],
+  templateUrl: "./date-range.component.html",
+  styleUrls: ["./date-range.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => DateRangeComponent),
+      multi: true,
+    },
+  ],
+})
+export class DateRangeComponent extends BaseValueAccessor<
+  string | string[] | Date[]
+> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof DateRangeField) ||
+      (base.type !== FieldTypeEnum.DateRange &&
+        base.controlType !== ControlTypeEnum.Date)
+    ) {
+      throw new Error("Expected DatePickerField");
+    }
+    return base;
+  });
+
+  // Định dạng ngày
+  format = computed(() => {
+    return this.field().format ?? "dd-MM-yyyy";
+  });
+
+  placeholders = computed(() => {
+    return this.field().placeholders ?? ["Ngày bắt đầu", "Ngày kết thúc"];
+  });
+
+  // Nếu mảng date không lớn hơn 2
+  displayValueNoInfo = NO_INFO_TEXT;
+
+  // Kiểm tra có cho phép chọn ngày quá khứ hay ngày tương lai hay không?
+  disabledDate = computed(() => {
+    const field = this.field();
+    return (current: Date): boolean => {
+      const today = new Date();
+      const diff = differenceInCalendarDays(current, today);
+
+      // if (field.onlyToday) return diff !== 0;
+      if (!field.allowPastDates && diff < 0) return true;
+      if (!field.allowFutureDates && diff > 0) return true;
+
+      return false;
+    };
+  });
+
+  constructor() {
+    super();
+  }
+
+  handleChangeDateRange(dateRange: Date[]): void {
+    this.propagateValue(dateRange);
+  }
+
+  // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
+  protected override writeValueToView(value: Date[]): void {
+    if (!this.isAddOrEdit()) return;
+
+    const { outputAs } = untracked(() => this.field());
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(
+      this.fieldKey(),
+      value.length > 0 ? this.getValueByOutputAs(value, outputAs) : null,
+    );
+  }
+
+  // Xử lý phụ thuộc khi change value
+  protected override handleValueChange(value: Date[]): void {
+    const { outputAs } = untracked(() => this.field());
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(
+      this.fieldKey(),
+      value.length > 0 ? this.getValueByOutputAs(value, outputAs) : null,
+    );
+  }
+
+  // Xử lý output value đầu ra theo outputAs mà người dùng mong muốn.
+  private getValueByOutputAs(
+    dateRange: Date[],
+    outputAs: DateRangeOutputValueType,
+  ): string | string[] | Date[] {
+    let value: string | string[] | Date[] = dateRange;
+
+    if (dateRange.length > 0) {
+      if (outputAs === DateRangeOutputValueTypeEnum.String) {
+        value = `${formatDateToYYYYMMDD(dateRange[0])},${formatDateToYYYYMMDD(dateRange[1])}`;
+      }
+
+      if (outputAs === DateRangeOutputValueTypeEnum.StringArray) {
+        value = [
+          formatDateToYYYYMMDD(dateRange[0]),
+          formatDateToYYYYMMDD(dateRange[1]),
+        ];
+      }
+    }
+    return value;
+  }
+}

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

@@ -0,0 +1,31 @@
+<div class="flex">
+  @if (modeSignal() === formModeEnum.View) {
+    @if (viewMode() === viewModeEnum.form) {
+      <input nz-input [value]="inputDisplayValues()" class="modeView" />
+    }
+    @if (viewMode() === viewModeEnum.text) {
+      <span class="modeView">{{ inputDisplayValues() }}</span>
+    }
+  } @else {
+    <!-- [value]="value" -->
+
+    <input
+      #inputFormatted
+      nz-input
+      class="input-control custom-input"
+      [placeholder]="displayPlaceholder()"
+      [disabled]="isDisabled"
+      (input)="handleChangeInputText()"
+      (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"> </app-suffix>
+      }
+    }
+  }
+</div>

package/src/lib/shared/components/fields/input/input-formatted/input-formatted.component.scss

@@ -0,0 +1,3 @@
+.input-text-wrapper {
+  display: flex;
+}

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

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

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

@@ -0,0 +1,148 @@
+import {
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  forwardRef,
+  signal,
+  untracked,
+  viewChild,
+} from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import {
+  createInputPlaceholder,
+  createPlaceholder,
+} from "../../../../utils/dynamic-form/dynamic-form";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import {
+  CORE_MODULES,
+  FORM_MODULES,
+  NO_INFO_TEXT,
+} from "../../../../consts/common";
+import { ControlTypeEnum } from "../../../../enums/controls";
+import { SuffixComponent } from "../../components/suffix/suffix.component";
+import { InputFormattedField } from "../../../../models/fields/input/input-formatted-field.model";
+import AutoNumeric from "@zeedhi/autonumeric";
+import { AutoNumericOptionsFactory } from "../../../../factories/auto-numeric-options.factory";
+import { NzInputModule } from "ng-zorro-antd/input";
+
+const zorroModules = [NzInputModule];
+@Component({
+  selector: "app-input-formatted",
+  standalone: true,
+  imports: [...CORE_MODULES, ...FORM_MODULES, ...zorroModules, SuffixComponent],
+  templateUrl: "./input-formatted.component.html",
+  styleUrls: ["./input-formatted.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputFormattedComponent),
+      multi: true,
+    },
+  ],
+})
+export class InputFormattedComponent extends BaseValueAccessor<string> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof InputFormattedField) ||
+      (base.type !== FieldTypeEnum.InputFormatted &&
+        base.controlType !== ControlTypeEnum.Input)
+    ) {
+      throw new Error("Expected InputFormattedField");
+    }
+    return base;
+  });
+
+  private autoNumeric?: AutoNumeric;
+
+  readonly inputFormattedEle =
+    viewChild<ElementRef<HTMLInputElement>>("inputFormatted");
+
+  readonly autoNumericOptions = computed(() =>
+    AutoNumericOptionsFactory.create(this.field()),
+  );
+
+  readonly internalValue = signal<string>("");
+
+  readonly inputDisplayValues = computed(() => {
+    const isView = this.isView();
+    const autoNumericOptions = this.autoNumericOptions();
+    const value = this.internalValue();
+    if (isView) {
+      const viewValue = value
+        ? AutoNumeric.format(value, autoNumericOptions)
+        : undefined;
+      return viewValue || NO_INFO_TEXT;
+    }
+    return "";
+  });
+
+  readonly autoNumericLifeCycleEffect = effect((onCleanup) => {
+    const nativeEle = this.inputFormattedEle()?.nativeElement;
+    const isAddOrEdit = this.isAddOrEdit();
+    const autoNumericOptions = untracked(() => this.autoNumericOptions());
+    const value = untracked(() => this.valueSignal());
+
+    // 1. TẠO BIẾN CỤC BỘ Ở ĐÂY (Đây là mấu chốt)
+    let localAutoNumeric: AutoNumeric | undefined;
+
+    if (nativeEle && isAddOrEdit) {
+      // 2. Gán vào biến cục bộ
+      localAutoNumeric = new AutoNumeric(nativeEle, value, autoNumericOptions);
+      // 3. Vẫn cập nhật biến class để xài ở chỗ khác
+      this.autoNumeric = localAutoNumeric;
+    }
+
+    onCleanup(() => {
+      // 4. CHỈ REMOVE BIẾN CỤC BỘ (Không dùng this.autoNumeric ở đây)
+      if (localAutoNumeric) {
+        localAutoNumeric?.remove();
+
+        // Dọn dẹp biến class nếu nó đang giữ cái vừa bị remove
+        if (this.autoNumeric === localAutoNumeric) {
+          this.autoNumeric = undefined;
+        }
+      }
+    });
+  });
+
+  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 {
+    const isDisabled = this.field().isDisabled;
+    return isDisabled ? NO_INFO_TEXT : createInputPlaceholder(this.field());
+  }
+
+  // event: Event;
+  handleChangeInputText(): void {
+    const { key } = this.field();
+    // const inputValue = (event.target as HTMLInputElement).value;
+
+    // Lấy giá trị RAW chuẩn từ AutoNumeric (không lấy event.target.value nữa)
+    // Dùng fallback string rỗng nếu chưa có
+    const rawNumericValue = this.autoNumeric?.getNumericString() || "";
+
+    this.propagateValue(rawNumericValue);
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(key, rawNumericValue.trim());
+  }
+
+  // Chỗ này vẫn xử lý bình thường cho CVA không liên quan đến AutoNumeric.
+  protected override writeValueToView(value: string): void {
+    // 2. NẾU AutoNumeric ĐÃ ĐƯỢC TẠO (đang ở nhánh Add/Edit), thì ép nó format lại giá trị mới
+    if (this.autoNumeric) {
+      this.autoNumeric.set(value);
+    }
+
+    const { key } = untracked(() => this.field());
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(key, value);
+  }
+}

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

@@ -0,0 +1,18 @@
+<nz-input-group [nzSuffix]="suffixTemplate">
+  <input
+    nz-input
+    [value]="value"
+    [type]="passwordVisible ? 'text' : 'password'"
+    autocomplete="new-password"
+    [placeholder]="displayPlaceholder()"
+    (input)="handleChangeInputPassword($event)"
+    (blur)="onTouched()"
+  />
+</nz-input-group>
+<ng-template #suffixTemplate>
+  <span
+    nz-icon
+    [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
+    (click)="passwordVisible = !passwordVisible"
+  ></span>
+</ng-template>

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

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

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

@@ -0,0 +1,56 @@
+import { Component, computed, effect, forwardRef } from "@angular/core";
+import { InputPasswordField } from "../../../../models/fields/input";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { NzInputModule } from "ng-zorro-antd/input";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { createInputPlaceholder } from "../../../../utils/dynamic-form/dynamic-form";
+import { FieldTypeEnum } from "../../../../enums/fields";
+import { ControlTypeEnum } from "../../../../enums/controls";
+
+const ZORRO_MODULES = [NzInputModule, NzIconModule];
+
+@Component({
+  selector: "app-input-password",
+  standalone: true,
+  imports: [...ZORRO_MODULES],
+  templateUrl: "./input-password.component.html",
+  styleUrls: ["./input-password.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => InputPasswordComponent),
+      multi: true,
+    },
+  ],
+})
+export class InputPasswordComponent extends BaseValueAccessor<string> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof InputPasswordField) ||
+      (base.type !== FieldTypeEnum.InputPassword &&
+        base.controlType !== ControlTypeEnum.Input)
+    ) {
+      throw new Error("Expected InputPasswordField");
+    }
+    return base;
+  });
+
+  passwordVisible = false;
+
+  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());
+  }
+
+  handleChangeInputPassword(event: Event): void {
+    const inputValue = (event.target as HTMLInputElement).value;
+    this.propagateValue(inputValue);
+    this.patchFormData(this.fieldKey(), inputValue);
+  }
+}