@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

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

package/src/lib/shared/components/fields/select/tree-select/tree-select.component.html

@@ -0,0 +1,38 @@
+<div class="d-flex">
+  @if (modeSignal() === formModeEnum.View) {
+    @if (viewMode() === viewModeEnum.form) {
+      <input nz-input [value]="displayValue" class="modeView" />
+    }
+    @if (viewMode() === viewModeEnum.text) {
+      <span class="modeView break-work">{{ displayValue }}</span>
+    }
+  } @else {
+    <nz-tree-select
+      [nzId]="fieldKey()"
+      nzShowSearch
+      nzAllowClear
+      [nzDisabled]="isDisabled"
+      [nzPlaceHolder]="displayPlaceholder()"
+      [title]="field().tooltip || ''"
+      [nzDropdownMatchSelectWidth]="field().matchSelectWidth"
+      [ngModel]="value"
+      [nzNodes]="options"
+      class="flex-1 min-w-0"
+      (ngModelChange)="handleChangeOptions($event)"
+    >
+    </nz-tree-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/tree-select/tree-select.component.scss

@@ -0,0 +1 @@
+

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

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