@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

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

package/src/lib/shared/components/fields/select/single-select/sl.component.old.txt

@@ -0,0 +1,337 @@
+import {
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  Input,
+  signal,
+  untracked,
+} from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { BaseValueAccessor } from "../../../../base/base-value-accessor";
+import { SingleSelectField } from "../../../../models/fields/select/single-select-field.model";
+import {
+  createSelectPlaceholder,
+  createSingleSelectPlaceholder,
+} from "../../../../utils/dynamic-form/dynamic-form";
+import { FORM_MODULES } from "../../../../consts/common/standalone-import.const";
+import { NO_INFO_TEXT } from "../../../../consts/common/common.const";
+import { SelectOutputValueTypeEnum } from "../../../../enums/common";
+import { ApiResponse } from "../../../../models/common/api-response.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";
+
+const ZORRO_MODULES = [NzSelectModule, NzSpinModule, NzInputModule];
+const COMPONENTS = [SuffixComponent];
+
+@Component({
+  selector: "app-single-select",
+  standalone: true,
+  imports: [...FORM_MODULES, ...ZORRO_MODULES, ...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 BaseValueAccessor<
+  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.
+  displayValue: string | number = "";
+
+  loadingSignal = signal(false);
+  isDisabledSignal = signal(false);
+  disabled = computed(() => this.loadingSignal() || this.isDisabledSignal());
+
+  options: Record<string, unknown>[] = [];
+  queryParams: Record<string, unknown> = {};
+
+  constructor() {
+    super();
+
+    effect(() => {
+      if (untracked(() => this.isView())) return;
+
+      const { key, dependsOn, isParent, dependType } = untracked(() =>
+        this.field(),
+      );
+
+      // Không dính dáng gì đến isParent và dependsOn.
+      if (!isParent && dependsOn!.length === 0) {
+        this.getOptions();
+        return;
+      }
+
+      const dependValuesMap = this.fieldService.getDependValuesMap();
+
+      const dependValues = dependsOn?.map((depend) => {
+        const dependFunc = dependValuesMap.get(depend.fieldKey);
+        const value =
+          typeof dependFunc === "function" ? dependFunc() : dependFunc;
+        return [depend.paramKey, value];
+      });
+
+      // console.log(`${key} dependValue`, dependValues);
+
+      const params = Object.fromEntries(dependValues as any);
+
+      this.queryParams = {
+        ...this.queryParams,
+        ...params,
+      };
+
+      // console.log(`${key} queryParams`, this.queryParams);
+
+      // Nếu tất cả các phụ thuộc có value thì mới gọi API.
+      const allDependHasValues = dependValues?.every(
+        ([fieldKey, value]) => value,
+      );
+      // console.log(`${key} allDependHasValues`, allDependHasValues);
+
+      if (allDependHasValues) {
+        // this.isDisabledSignal.set(false);
+        this.control?.enable();
+        this.getOptions();
+      } else {
+        // Ngược lại reset và disabled.
+        this.control?.reset();
+        // this.isDisabledSignal.set(true);
+        this.control?.disable();
+      }
+    });
+  }
+
+  // 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.isView()) {
+      this.displayValue = this.getDisplayValue(
+        this.field().modelValue as string | Record<string, unknown>,
+      );
+      return;
+    }
+
+    if (!this.isAddOrEdit()) return;
+
+    this.fieldService.updateDependValuesMap(this.fieldKey(), value ?? "");
+    // const signal = untracked(() => this.fieldService.getDependValuesMap().get(this.fieldKey()))
+    // console.log("DependValuesMap SET", untracked(() => signal!()));
+
+    // 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.updateDependValuesMap(this.fieldKey(), value);
+      // const signal = untracked(() => this.fieldService.getDependValuesMap().get(this.fieldKey()))
+      // console.log("DependValuesMap UI", untracked(() => signal!()));
+    }
+
+    // Gán data vào đầu ra của form.
+    const newOutputValue = value && this.getValueByOutputAs(value);
+    this.patchFormData(this.fieldKey(), newOutputValue);
+  }
+
+  private createFullApiUrl(): string {
+    const field = untracked(() => this.field());
+    let fullApiUrl = field?.apiConfig?.baseUrl || "";
+    const params = field?.apiConfig?.params || {};
+    this.queryParams = {
+      ...this.queryParams,
+      ...params,
+    };
+    return fullApiUrl;
+  }
+
+  // Lấy danh sách options từ GET api.
+  private getOptions(): void {
+    const field = untracked(() => this.field());
+    const { optionsToPrepend, optionsToAppend, exceptOptions } = field;
+    const fullApiUrl = this.createFullApiUrl();
+
+    if (!fullApiUrl) {
+      this.options = field?.options ?? [];
+      this.options = [
+        ...optionsToPrepend,
+        ...this.options,
+        ...optionsToAppend,
+      ].filter(
+        (options) =>
+          !exceptOptions.some(
+            (opts) => opts[field.bindValue] === options[field.bindValue],
+          ),
+      );
+      return;
+    }
+
+    this.loadingSignal.set(true);
+    this.control?.disable();
+    this.fieldService
+      .getAllOptions(fullApiUrl, this.queryParams)
+      .pipe(this.takeUntilDestroy())
+      .subscribe({
+        next: (res: ApiResponse<Record<string, unknown>[]>) => {
+          this.loadingSignal.set(false);
+          if (!this.field().isDisabled) {
+            this.control?.enable();
+            this.control?.reset();
+          }
+
+          if (res?.code === 0) {
+            this.options = res?.data;
+            this.options = [
+              ...optionsToPrepend,
+              ...this.options,
+              ...optionsToAppend,
+            ].filter(
+              (options) =>
+                !exceptOptions.some(
+                  (opts) => opts[field.bindValue] === options[field.bindValue],
+                ),
+            );
+
+            // Nếu outputAs là dạng sourceObject đồng bộ sau khi load xong list.
+            if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
+              const newOutputValue = this.options.find(
+                (option) => option[field.bindValue] === this.value,
+              ) ?? {
+                [field.bindValue]: this.value,
+              };
+              this.patchFormData(this.fieldKey(), newOutputValue);
+            }
+          }
+        },
+        error: (error: Error) => {
+          this.loadingSignal.set(false);
+          if (!this.field().isDisabled) this.control?.enable();
+        },
+      });
+  }
+
+  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 field = 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 (field.outputAs === SelectOutputValueTypeEnum.Object) {
+        value = {
+          [field.bindValue]: singleValue,
+        };
+      }
+
+      // Nếu outputAs là dạng sourceObject.
+      if (field.outputAs === SelectOutputValueTypeEnum.SourceObject) {
+        value = this.options.find(
+          (option) => option[field.bindValue] === singleValue,
+        ) ?? {
+          [field.bindValue]: singleValue,
+        };
+      }
+
+      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();
+
+    if (
+      typeof option[field.bindLabel] === "function" ||
+      !option[field.bindLabel]
+    ) {
+      let warnMessage =
+        "Giá trị label lấy theo bindLabel hiện đang là dạng object, array hoặc các dạng còn lại của complex data";
+      if (!option[field.bindLabel])
+        warnMessage = "Không tồn tại giá trị label khi lấy theo bindLabel";
+      // console.warn(warnMessage);
+
+      return NO_INFO_TEXT;
+    }
+
+    let optionLabel = option[field.bindLabel] as string;
+
+    if (field.transformLabel) {
+      const tranformLabelValue = field.transformLabel(option);
+      if (tranformLabelValue) optionLabel = tranformLabelValue;
+    }
+
+    return optionLabel;
+  }
+}