@ldquocc/dynamic-form 0.0.8 → 0.0.9

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

@@ -0,0 +1,401 @@
+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 { TreeSelectField } from "../../../../models/fields/select/tree-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 { NzTreeSelectModule } from "ng-zorro-antd/tree-select";
+import { NzSpinModule } from "ng-zorro-antd/spin";
+import { NzInputModule } from "ng-zorro-antd/input";
+
+const ZORRO_MODULES = [NzTreeSelectModule, NzSpinModule, NzInputModule];
+const COMPONENTS = [SuffixComponent];
+
+interface FlatItem {
+  code: string;
+  name: string;
+  [key: string]: any;
+}
+
+interface TreeNode {
+  key: any;
+  title: string;
+  children?: TreeNode[];
+  selectable?: boolean;
+  isLeaf?: boolean;
+  [key: string]: any;
+}
+
+@Component({
+  selector: "app-tree-select",
+  standalone: true,
+  imports: [...FORM_MODULES, ...ZORRO_MODULES, ...COMPONENTS],
+  templateUrl: "./tree-select.component.html",
+  styleUrls: ["./tree-select.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TreeSelectComponent),
+      multi: true,
+    },
+  ],
+})
+export class TreeSelectComponent extends BaseValueAccessor<
+  string | Record<string, unknown>
+> {
+  @Input() isCustomInputText!: boolean;
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof TreeSelectField) ||
+      (base.type !== FieldTypeEnum.TreeSelect &&
+        base.controlType !== ControlTypeEnum.Select)
+    ) {
+      throw new Error("Expected TreeSelectField");
+    }
+    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: any[] = [];
+  queryParams: Record<string, unknown> = {};
+
+  constructor() {
+    super();
+
+    // 1. Effect chung Add + Edit
+    effect(() => {
+      if (this.isAddOrEdit()) {
+        const field = untracked(() => this.field());
+        const { placeholder } = field;
+
+        if (!placeholder) field.placeholder = createSelectPlaceholder(field);
+      }
+    });
+
+    // Trigger reset từ bên ngoài form.
+    effect(() => {
+      const reset = this.dFormService.resetTrigger();
+      if (reset?.formId === this.formId) {
+        this.reset();
+      }
+    });
+
+    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;
+  }
+
+  private buildTree(items: FlatItem[], groupBy?: string): any[] {
+    if (!groupBy) return items;
+    const map = new Map<string, TreeNode>();
+    const roots: TreeNode[] = [];
+
+    // Step 1: Transform & store in map
+    for (const item of items) {
+      map.set(item.code, {
+        key: this.transformOptionValue(item),
+        title: this.getOptionLabel(item),
+        parentCode: item[groupBy],
+        isLeaf: true,
+      });
+    }
+
+    // Step 2: Build parent-child relation
+    for (const node of map.values()) {
+      if (node["parentCode"]) {
+        const parent = map.get(node["parentCode"]);
+        if (parent) {
+          if (!parent.children) parent.children = [];
+          parent.children.push(node);
+          parent.isLeaf = false;
+        } else {
+          roots.push(node);
+        }
+      } else {
+        roots.push(node);
+      }
+    }
+
+    return roots;
+  }
+
+  // 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) {
+      const options = [
+        ...optionsToPrepend,
+        ...field.options,
+        ...optionsToAppend,
+      ].filter(
+        (options) =>
+          !exceptOptions.some(
+            (opts) => opts[field.bindValue] === options[field.bindValue],
+          ),
+      ) as any;
+      this.options = this.buildTree(options, field.groupBy);
+      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();
+
+          if (res?.code === 0) {
+            const options = [
+              ...optionsToPrepend,
+              ...(res?.data ?? []),
+              ...optionsToAppend,
+            ].filter(
+              (options) =>
+                !exceptOptions.some(
+                  (opts) => opts[field.bindValue] === options[field.bindValue],
+                ),
+            ) as any;
+            this.options = this.buildTree(options, field.groupBy);
+
+            // 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.key === 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/textarea/textarea.component.html

@@ -0,0 +1,29 @@
+@if (modeSignal() === formModeEnum.View) {
+  @if (viewMode() === viewModeEnum.form) {
+    @if (viewDisplayValue(); as displayValue) {
+      <p
+        [innerHTML]="displayValue"
+        class="disabled-textarea break-work mb0"
+      ></p>
+    } @else {
+      <input nz-input [value]="displayNoValueText" class="modeView" />
+    }
+  }
+  @if (viewMode() === viewModeEnum.text) {
+    @if (viewDisplayValue(); as displayValue) {
+      <p [innerHTML]="displayValue" class="mode-view mb-0 break-work mb0"></p>
+    } @else {
+      <span class="modeView">{{ displayNoValueText }}</span>
+    }
+  }
+} @else {
+  <textarea
+    nz-input
+    [nzAutosize]="{ minRows: 1, maxRows: 8 }"
+    [value]="value"
+    [disabled]="isDisabled"
+    [placeholder]="displayPlaceholder()"
+    (input)="handleChangeTextarea($event)"
+  >
+  </textarea>
+}

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

@@ -0,0 +1,17 @@
+// @use "../../../styles/common-form" as *;
+
+.disabled-textarea {
+  padding: 4px 8px;
+  // // background-color: #f5f5f5;
+  border: 1px solid #cbd5e1;
+  // border-radius: 4px;
+  color: #575757 !important;
+  cursor: not-allowed;
+  pointer-events: none;
+  // font-size: 12px;
+}
+.mode-view {
+  pointer-events: none;
+  color: #575757;
+  font-size: 12px;
+}

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

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

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

@@ -0,0 +1,76 @@
+import { Component, computed, effect, forwardRef } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { BaseValueAccessor } from "../../../base/base-value-accessor";
+import { TextareaField } from "../../../models/fields/textarea/textarea-field.model";
+import { createInputPlaceholder } from "../../../utils/dynamic-form/dynamic-form";
+import { NO_INFO_TEXT } from "../../../consts/common/common.const";
+import { FieldTypeEnum } from "../../../enums/fields";
+import { NzInputModule } from "ng-zorro-antd/input";
+
+const ZORRO_MODULES = [NzInputModule];
+
+@Component({
+  selector: "app-textarea",
+  standalone: true,
+  imports: [...ZORRO_MODULES],
+  templateUrl: "./textarea.component.html",
+  styleUrls: ["./textarea.component.scss"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => TextareaComponent),
+      multi: true,
+    },
+  ],
+})
+export class TextareaComponent extends BaseValueAccessor<string> {
+  readonly field = computed(() => {
+    const base = this.fieldInput();
+    if (
+      !(base instanceof TextareaField) ||
+      base.type !== FieldTypeEnum.Textarea
+    ) {
+      throw new Error("Expected TextareaField");
+    }
+    return base;
+  });
+
+  displayNoValueText = NO_INFO_TEXT;
+
+  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();
+    return val ? val : 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 createInputPlaceholder(this.field());
+  }
+
+  handleChangeTextarea(event: Event): void {
+    const textareaValue = (event.target as HTMLInputElement).value;
+    this.propagateValue(textareaValue);
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(
+      this.fieldKey(),
+      textareaValue &&
+        textareaValue.replace(/\n+/g, "br_enter").replace(/br_enter+/g, "\n"),
+    );
+  }
+
+  protected override writeValueToView(value: string): void {
+    if (!this.isAddOrEdit()) return;
+
+    // Gán data vào đầu ra của form.
+    this.patchFormData(this.fieldKey(), value);
+  }
+}

package/src/lib/shared/components/fields/upload/avatar-upload/avatar-upload.component.html

@@ -0,0 +1,30 @@
+<nz-upload
+  [nzDisabled]="disabledSignal() || isView()"
+  [nzShowUploadList]="false"
+  [nzMultiple]="false"
+  [nzBeforeUpload]="beforeUpload"
+  [nzCustomRequest]="customRequest"
+>
+  <ng-container *ngTemplateOutlet="renderAvatarTpl"></ng-container>
+</nz-upload>
+
+<!-- Template custom hiển thị avatar -->
+<ng-template #renderAvatarTpl>
+  <div
+    class="avatar-wrapper"
+    [ngStyle]="{ width: size + 'px', height: size + 'px' }"
+  >
+    @if (uploading()) {
+      <span
+        nz-icon
+        nzType="loading"
+        nzTheme="outline"
+        class="upload-icon"
+      ></span>
+    } @else if (!avatarUrl() && isAddOrEdit()) {
+      <span nz-icon nzType="plus" nzTheme="outline" class="upload-icon"></span>
+    } @else if (avatarUrl()) {
+      <img [src]="avatarUrl()" alt="" class="avatar-img" />
+    }
+  </div>
+</ng-template>

package/src/lib/shared/components/fields/upload/avatar-upload/avatar-upload.component.scss

@@ -0,0 +1,22 @@
+// Add or edit.
+.avatar-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  background-color: #fafafa;
+  cursor: pointer;
+  overflow: hidden;
+
+  .upload-icon {
+    font-size: 24px;
+    color: #999;
+  }
+
+  .avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

package/src/lib/shared/components/fields/upload/avatar-upload/avatar-upload.component.spec.ts

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