@ldquocc/dynamic-form 0.0.9 → 0.0.11

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

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

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

@@ -1,340 +0,0 @@
-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>
-> {
-  optionsSignal() {
-    throw new Error("Method not implemented.");
-  }
-  @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;
-  }
-}