@ldquocc/dynamic-form 0.0.9 → 0.0.11

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

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

@@ -1 +0,0 @@
-

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

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

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

@@ -1,401 +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 { 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

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

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

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

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

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

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

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