@ldquocc/dynamic-form 0.0.9 → 0.0.11

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

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

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

@@ -1 +0,0 @@
-

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

@@ -1,21 +0,0 @@
-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();
-  });
-});

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

@@ -1,217 +0,0 @@
-import {
-  Component,
-  computed,
-  forwardRef,
-  Input,
-  untracked,
-} from "@angular/core";
-import {
-  FormsModule,
-  NG_VALUE_ACCESSOR,
-  ReactiveFormsModule,
-} from "@angular/forms";
-import { BaseSelectComponent } from "../../../../base/base-select.component";
-import { SingleSelectField } from "../../../../models/fields/select/single-select-field.model";
-import { createSingleSelectPlaceholder } from "../../../../utils/dynamic-form/dynamic-form";
-import { NO_INFO_TEXT } from "../../../../consts/common/common.const";
-import { SelectOutputValueTypeEnum } from "../../../../enums/common";
-import { ApiResponse } from "../../../../models/common/api-response.model";
-import {
-  FieldDependency,
-  FieldDependencyType,
-} from "../../../../models/common/field-dependency.model";
-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 { NzSpinModule } from "ng-zorro-antd/spin";
-import { NzInputModule } from "ng-zorro-antd/input";
-import { CommonModule } from "@angular/common";
-
-const modules = [CommonModule, FormsModule, ReactiveFormsModule];
-const zorroModules = [NzSelectModule, NzSpinModule, NzInputModule];
-const components = [SuffixComponent];
-
-@Component({
-  selector: "app-single-select",
-  standalone: true,
-  imports: [...modules, ...zorroModules, ...components],
-  templateUrl: "./single-select.component.html",
-  styleUrls: ["./single-select.component.scss"],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => SingleSelectComponent),
-      multi: true,
-    },
-  ],
-})
-export class SingleSelectComponent extends BaseSelectComponent<
-  string | Record<string, unknown>
-> {
-  @Input() isCustomInputText!: boolean;
-  readonly field = computed(() => {
-    const base = this.fieldInput();
-    if (
-      !(base instanceof SingleSelectField) ||
-      (base.type !== FieldTypeEnum.SingleSelect &&
-        base.controlType !== ControlTypeEnum.Select)
-    ) {
-      throw new Error("Expected SingleSelectField");
-    }
-    return base;
-  });
-
-  // Giá trị dùng hiển thị ở chế độ View.
-  readonly viewDisplayValue = computed(() => {
-    if (!this.isView()) return "";
-    return this.getDisplayValue(
-      (this.field().modelValue as any) || this.valueSignal(),
-    );
-  });
-
-  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 createSingleSelectPlaceholder(this.field());
-  }
-
-  // Chạy khi value form được gán bởi các hàm reset, patchValue, setValue.
-  protected override writeValueToView(value: string | null): void {
-    if (!this.isAddOrEdit()) return;
-
-    // Bắn giá trị mới vào BehaviorSubject của FieldService.
-    // Việc này báo cho các component Con biết Parent vừa thay đổi data.
-    // Lợi ích: Dòng data chạy thẳng đứng (Push) vào ống, không phụ thuộc vào Signal tracking ẩn.
-    this.fieldService.emitDependValueChange(this.fieldKey(), value ?? "");
-
-    // 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) {
-      this.fieldService.emitDependValueChange(this.fieldKey(), value);
-    }
-
-    // Gán data vào đầu ra của form.
-    const newOutputValue = value && this.getValueByOutputAs(value);
-    this.patchFormData(this.fieldKey(), newOutputValue);
-  }
-
-  handleChangeOptions(optionValue: string): void {
-    const { enableFieldChange, bindValue } = untracked(() => this.field());
-
-    if (enableFieldChange) {
-      const option = this.options().find(
-        (option) => option[bindValue] === optionValue,
-      );
-      this.fieldService.onFieldChange(this.fieldKey(), option);
-    }
-
-    this.propagateValue(optionValue);
-  }
-
-  // Xử lý output value đầu ra theo outputAs mà người dùng mong muốn.
-  private getValueByOutputAs(
-    singleValue: string,
-  ): string | Record<string, unknown> {
-    const { outputAs, bindValue, bindLabel, modelValue } = this.field();
-
-    if (singleValue) {
-      // Nếu outputAs là dạng single.
-      let value: string | Record<string, unknown> = singleValue;
-
-      // Nếu outputAs là dạng object.
-      if (outputAs === SelectOutputValueTypeEnum.Object) {
-        value = {
-          [bindValue]: singleValue,
-        };
-      }
-
-      // Nếu outputAs là dạng sourceObject.
-      if (outputAs === SelectOutputValueTypeEnum.SourceObject) {
-        value =
-          this.options().find((option) => option[bindValue] === singleValue) ??
-          (modelValue && typeof modelValue === "object"
-            ? modelValue
-            : { [bindValue]: value });
-      }
-
-      return value;
-    }
-    return singleValue;
-  }
-
-  // Làm phẳng giá trị để hiện thị ở chế độ View.
-  protected getDisplayValue(value: string | Record<string, unknown>): string {
-    if (!value) return NO_INFO_TEXT;
-
-    if (typeof value === "object") {
-      return this.getCustomLabel(value);
-    }
-    return value as string;
-  }
-
-  // Lấy value ở option tag.
-  protected transformOptionValue(option: Record<string, unknown>): unknown {
-    const field = this.field()!;
-
-    let optionValue: unknown;
-
-    optionValue = option[field.bindValue];
-
-    return optionValue;
-  }
-
-  // Lấy label.
-  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;
-  }
-}