@ldquocc/dynamic-form 0.0.9 → 0.0.10

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

@@ -1,67 +0,0 @@
-import { Component, inject, input } from "@angular/core";
-import { BaseField } from "../../models/fields/field.model";
-import {
-  AbstractControl,
-  FormGroup,
-  FormsModule,
-  ReactiveFormsModule,
-} from "@angular/forms";
-import { FormMode } from "../../models/form";
-import { FORM_MODULES } from "../../consts/common";
-import { FIELD_COMPONENTS } from "../component";
-import { NzFormModule } from "ng-zorro-antd/form";
-import { FieldTypeEnum } from "../../enums/fields";
-import { FormModeEnum } from "../../enums/form";
-import { ValidationService } from "../../services/validation.service";
-import { NzGridModule } from "ng-zorro-antd/grid";
-import { FieldUserConfigComponent } from "../field-user-config/field-user-config.component";
-import { CommonModule } from "@angular/common";
-import { NzDropDownModule } from "ng-zorro-antd/dropdown";
-import { NzIconModule } from "ng-zorro-antd/icon";
-import { NzSwitchModule } from "ng-zorro-antd/switch";
-import { NzFlexModule } from "ng-zorro-antd/flex";
-
-const modules = [CommonModule, FormsModule, ReactiveFormsModule];
-const zorroModules = [
-  NzFormModule,
-  NzGridModule,
-  NzDropDownModule,
-  NzIconModule,
-  NzSwitchModule,
-  NzFlexModule,
-];
-const components = [...FIELD_COMPONENTS, FieldUserConfigComponent];
-
-@Component({
-  selector: "app-dynamic-field",
-  standalone: true,
-  imports: [...modules, ...zorroModules, ...components],
-  templateUrl: "./dynamic-field.component.html",
-  styleUrls: ["./dynamic-field.component.scss"],
-})
-export class DynamicFieldComponent {
-  readonly field = input.required<BaseField<any>>();
-  readonly fields = input.required<BaseField<any>[]>();
-  readonly mode = input.required<FormMode>();
-  readonly control = input.required<AbstractControl>();
-  readonly formGroup = input.required<FormGroup>();
-  readonly formId = input.required<string>();
-
-  fieldTypeEnum = FieldTypeEnum;
-  formModeEnum = FormModeEnum;
-
-  private validationService = inject(ValidationService);
-
-  /**
-   * Lấy thông báo lỗi đầu tiên của trường đang thao tác dựa trên control và field.
-   */
-  protected getErrorMessage(): string {
-    return (
-      this.validationService.getFirstError(
-        this.control(),
-        this.field(),
-        this.fields(),
-      ) ?? ""
-    );
-  }
-}

package/src/lib/shared/components/field-user-config/field-user-config.component.html

@@ -1,38 +0,0 @@
-<!-- Cấu hình (Dropdown & Menu) chỉ hiện khi có bất kỳ config nào -->
-@if (field().userConfigs) {
-  <!-- Trigger Nút Cấu hình -->
-  <a
-    nz-dropdown
-    [nzDropdownMenu]="configMenu"
-    nzTrigger="click"
-    [nzClickHide]="false"
-    [title]="'Cấu hình'"
-    nzPlacement="bottomRight"
-  >
-    <span
-      nz-icon
-      nzType="setting"
-      nzTheme="outline"
-      class="config-trigger-icon"
-    ></span>
-  </a>
-
-  <!-- Menu Cấu hình -->
-  <nz-dropdown-menu #configMenu="nzDropdownMenu">
-    <ul nz-menu>
-      @if (field().userConfigs?.allowOverrideRequired) {
-        <li nz-menu-item nzDisableItemHover class="config-menu-item">
-          <div class="config-item-content">
-            <span class="config-item-label">Bắt buộc nhập</span>
-            <nz-switch
-              nzSize="small"
-              [ngModel]="field().required"
-              [ngModelOptions]="{ standalone: true }"
-              (ngModelChange)="onToggleUserRequired($event)"
-            ></nz-switch>
-          </div>
-        </li>
-      }
-    </ul>
-  </nz-dropdown-menu>
-}

package/src/lib/shared/components/field-user-config/field-user-config.component.scss

@@ -1,29 +0,0 @@
-.config-trigger-icon {
-  color: #bfbfbf;
-  cursor: pointer;
-  font-size: 16px;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  display: inline-block;
-
-  &:hover {
-    color: #1890ff; /* Màu xanh Ant Design */
-    transform: rotate(90deg) scale(1.1);
-  }
-}
-
-.config-menu-item {
-  padding: 8px 12px;
-  cursor: default;
-}
-
-.config-item-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 16px;
-  min-width: 130px;
-}
-
-.config-item-label {
-  font-size: 13px;
-}

package/src/lib/shared/components/field-user-config/field-user-config.component.ts

@@ -1,33 +0,0 @@
-import { Component, input } from "@angular/core";
-import { BaseField } from "../../models/fields/field.model";
-import { AbstractControl, Validators } from "@angular/forms";
-import { NzDropDownModule } from "ng-zorro-antd/dropdown";
-import { NzIconModule } from "ng-zorro-antd/icon";
-import { NzSwitchModule } from "ng-zorro-antd/switch";
-import { FormsModule } from "@angular/forms";
-
-@Component({
-  selector: "app-field-user-config",
-  standalone: true,
-  imports: [NzDropDownModule, NzIconModule, NzSwitchModule, FormsModule],
-  templateUrl: "./field-user-config.component.html",
-  styleUrls: ["./field-user-config.component.scss"],
-})
-export class FieldUserConfigComponent {
-  readonly field = input.required<BaseField<any>>();
-  readonly control = input.required<AbstractControl>();
-
-  onToggleUserRequired(isRequired: boolean): void {
-    this.field().required = isRequired;
-    const ctrl = this.control();
-
-    if (isRequired) {
-      ctrl.addValidators(Validators.required);
-    } else {
-      ctrl.removeValidators(Validators.required);
-    }
-
-    // Cập nhật lại trạng thái validation ngay lập tức
-    ctrl.updateValueAndValidity();
-  }
-}

package/src/lib/shared/components/fields/components/suffix/suffix.component.html

@@ -1,42 +0,0 @@
-<button
-  nz-button
-  nzType="primary"
-  nzSize="small"
-  [title]="suffixConfig.description"
-  class="h-100 suffix-btn font-size-12"
-  [ngClass]="suffixConfig.class ?? ''"
-  (click)="handleSuffix()"
->
-  @if (suffixConfig.icon) {
-    <span class="icon">
-      <!-- Nếu là icon Zorro -->
-      @if (suffixConfig.icon.type === 'zorro') {
-        <span
-          nz-icon
-          [nzType]="suffixConfig.icon.value"
-          nzTheme="outline"
-          [ngClass]="suffixConfig.icon.class ?? ''"
-        >
-        </span>
-      }
-
-      <!-- Nếu là Boxicons -->
-      @if (suffixConfig.icon.type === 'mdi') {
-        <span [class]="'mdi ' + suffixConfig.icon.value" [ngClass]="suffixConfig.icon.class ?? ''">
-        </span>
-      }
-    </span>
-  }
-
-  @if (suffixConfig.label) {
-    <span class="label">
-      {{ suffixConfig.label }}
-    </span>
-  }
-
-  @if (!suffixConfig.icon && !suffixConfig.label) {
-    <span class="label">
-      {{ defaultText }}
-    </span>
-  }
-</button>

package/src/lib/shared/components/fields/components/suffix/suffix.component.scss

@@ -1,3 +0,0 @@
-.suffix-btn {
-  margin-left: 0.5rem;
-}

package/src/lib/shared/components/fields/components/suffix/suffix.component.spec.ts

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

package/src/lib/shared/components/fields/components/suffix/suffix.component.ts

@@ -1,32 +0,0 @@
-import { Component, inject, Input } from '@angular/core';
-import { Suffix } from '../../../../models/common/common.model';
-import { CORE_MODULES } from '../../../../consts/common';
-import { SuffixService } from '../../../../services/suffix.service';
-import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-
-const ZORRO_MODULES = [NzButtonModule, NzIconModule];
-
-@Component({
-  selector: 'app-suffix',
-  standalone: true,
-  imports: [...CORE_MODULES, ...ZORRO_MODULES],
-  templateUrl: './suffix.component.html',
-  styleUrl: './suffix.component.scss',
-})
-export class SuffixComponent {
-  @Input() suffixConfig!: Suffix;
-  @Input() formId = '';
-
-  protected defaultText = '';
-
-  private suffixService = inject(SuffixService);
-
-  ngOnInit(): void {
-    this.defaultText = `Suffix ${this.suffixConfig.key}`;
-  }
-
-  handleSuffix(): void {
-    this.suffixService.onSuffixClick(this.suffixConfig.key, this.formId);
-  }
-}

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

@@ -1,20 +0,0 @@
-@if (modeSignal() === formModeEnum.View) {
-  <input
-    nz-input
-    [value]="viewDisplayValue()"
-    [disabled]="true"
-    class="modeView"
-  />
-} @else {
-  <nz-date-picker
-    [id]="fieldKey()"
-    [class]="'w-100'"
-    [nzDisabled]="disabledSignal()"
-    [nzPlaceHolder]="displayPlaceholder()"
-    [nzFormat]="format()"
-    [nzDisabledDate]="disabledDate()"
-    [ngModel]="valueSignal()"
-    (ngModelChange)="handleChangeDate($event)"
-  >
-  </nz-date-picker>
-}

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

@@ -1,5 +0,0 @@
-:host ::ng-deep {
-  .ant-input[disabled] {
-    background-color: #fff;
-  }
-}

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

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

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

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

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

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

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

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