@ldquocc/dynamic-form 0.0.8 → 0.0.9

package/src/lib/shared/components/dynamic-field/dynamic-field.component.html

@@ -0,0 +1,218 @@
+<div [formGroup]="formGroup()">
+  <nz-form-item>
+    <nz-form-label
+      [nzXXl]="field().labelGrid.xxl ?? null"
+      [nzXl]="field().labelGrid.xl ?? null"
+      [nzLg]="field().labelGrid.lg ?? null"
+      [nzMd]="field().labelGrid.md ?? null"
+      [nzSm]="field().labelGrid.sm ?? null"
+      [nzXs]="field().labelGrid.xs ?? null"
+      [nzLabelAlign]="field().labelAlign"
+    >
+      @if (field().required) {
+        <span class="required">*</span>
+      }
+      <span class="form-label">
+        {{ field().label }}
+        @if (field().sublabel) {
+          <span class="sub-label mb-sm">{{ field().sublabel }}</span>
+        }
+      </span>
+    </nz-form-label>
+
+    <nz-form-control
+      [nzXXl]="field().controlGrid.xxl ?? null"
+      [nzXl]="field().controlGrid.xl ?? null"
+      [nzLg]="field().controlGrid.lg ?? null"
+      [nzMd]="field().controlGrid.md ?? null"
+      [nzSm]="field().controlGrid.sm ?? null"
+      [nzXs]="field().controlGrid.xs ?? null"
+      [nzErrorTip]="getErrorMessage()"
+    >
+      <div nz-flex [nzAlign]="'flex-start'" [nzGap]="8" class="w-100">
+        <div class="flex-1 min-w-0">
+          @switch (field().type) {
+            <!-- Input text -->
+            @case (fieldTypeEnum.InputText) {
+              <app-input-text
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-input-text>
+            }
+
+            <!-- Input password -->
+            @case (fieldTypeEnum.InputPassword) {
+              @if (mode() === formModeEnum.Add) {
+                <app-input-password
+                  [formControlName]="field().key"
+                  [fieldInput]="field()"
+                  [modeSignal]="mode()"
+                  [control]="control()"
+                  [formId]="formId()"
+                ></app-input-password>
+              }
+            }
+
+            <!-- Input formatted -->
+            @case (fieldTypeEnum.InputFormatted) {
+              <app-input-formatted
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-input-formatted>
+            }
+
+            <!-- Textarea -->
+            @case (fieldTypeEnum.Textarea) {
+              <app-textarea
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-textarea>
+            }
+
+            <!-- Single select -->
+            @case (fieldTypeEnum.SingleSelect) {
+              <app-single-select
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-single-select>
+            }
+
+            <!-- Multi select -->
+            @case (fieldTypeEnum.MultiSelect) {
+              <app-multi-select
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-multi-select>
+            }
+
+            @case (fieldTypeEnum.TreeSelect) {
+              <app-tree-select
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-tree-select>
+            }
+
+            <!-- Date Picker -->
+            @case (fieldTypeEnum.DatePicker) {
+              <app-date-picker
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-date-picker>
+            }
+
+            <!-- Date Range -->
+            @case (fieldTypeEnum.DateRange) {
+              <app-date-range
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-date-range>
+            }
+
+            <!-- Single File Upload -->
+            @case (fieldTypeEnum.SingleFileUpload) {
+              <app-single-file-upload
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-single-file-upload>
+            }
+
+            <!-- Multi File Upload -->
+            @case (fieldTypeEnum.MultiFileUpload) {
+              <app-multi-file-upload
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-multi-file-upload>
+            }
+
+            <!-- Multi File Upload -->
+            @case (fieldTypeEnum.MultiImageUpload) {
+              <app-multi-image-upload
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-multi-image-upload>
+            }
+
+            <!-- Avatar -->
+            @case (fieldTypeEnum.AvatarUpload) {
+              <app-avatar-upload
+                [formControlName]="field().key"
+                [fieldInput]="field()"
+                [modeSignal]="mode()"
+                [control]="control()"
+                [formId]="formId()"
+              ></app-avatar-upload>
+            }
+
+            <!-- Radio -->
+            @case (fieldTypeEnum.Radio) {
+              <span>Radio</span>
+            }
+
+            <!-- Checkbox -->
+            @case (fieldTypeEnum.Checkbox) {
+              <span>Checkbox</span>
+            }
+
+            <!-- Radio -->
+            @case (fieldTypeEnum.Radio) {
+              <span>Radio</span>
+            }
+
+            <!-- Switch -->
+            @case (fieldTypeEnum.Switch) {
+              <span>Switch</span>
+            }
+
+            <!-- Autocomplete -->
+            @case (fieldTypeEnum.Autocomplete) {
+              <span>Autocomplete</span>
+            }
+          }
+        </div>
+
+        <!-- Tách phần cấu hình ra Component riêng -->
+        @if (mode() !== formModeEnum.View) {
+          <div class="field-user-config-ctn">
+            <app-field-user-config
+              [field]="field()"
+              [control]="control()"
+            ></app-field-user-config>
+          </div>
+        }
+      </div>
+    </nz-form-control>
+  </nz-form-item>
+</div>

package/src/lib/shared/components/dynamic-field/dynamic-field.component.scss

@@ -0,0 +1,28 @@
+.required {
+  color: red;
+  font-weight: bold;
+  margin-right: 4px;
+}
+
+.form-label {
+  white-space: normal !important;
+  word-break: break-word;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+.sub-label {
+  white-space: normal !important;
+  word-break: break-word;
+  font-size: 11px;
+  font-style: italic;
+}
+:host ::ng-deep {
+  .ant-form-item {
+    align-items: center;
+  }
+
+  .ant-form-item-label > label {
+    display: inline-block !important;
+  }
+}

package/src/lib/shared/components/dynamic-field/dynamic-field.component.spec.ts

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

package/src/lib/shared/components/dynamic-field/dynamic-field.component.ts

@@ -0,0 +1,67 @@
+import { Component, inject, input } from "@angular/core";
+import { BaseField } from "../../models/fields/field.model";
+import {
+  AbstractControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from "@angular/forms";
+import { FormMode } from "../../models/form";
+import { FORM_MODULES } from "../../consts/common";
+import { FIELD_COMPONENTS } from "../component";
+import { NzFormModule } from "ng-zorro-antd/form";
+import { FieldTypeEnum } from "../../enums/fields";
+import { FormModeEnum } from "../../enums/form";
+import { ValidationService } from "../../services/validation.service";
+import { NzGridModule } from "ng-zorro-antd/grid";
+import { FieldUserConfigComponent } from "../field-user-config/field-user-config.component";
+import { CommonModule } from "@angular/common";
+import { NzDropDownModule } from "ng-zorro-antd/dropdown";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzSwitchModule } from "ng-zorro-antd/switch";
+import { NzFlexModule } from "ng-zorro-antd/flex";
+
+const modules = [CommonModule, FormsModule, ReactiveFormsModule];
+const zorroModules = [
+  NzFormModule,
+  NzGridModule,
+  NzDropDownModule,
+  NzIconModule,
+  NzSwitchModule,
+  NzFlexModule,
+];
+const components = [...FIELD_COMPONENTS, FieldUserConfigComponent];
+
+@Component({
+  selector: "app-dynamic-field",
+  standalone: true,
+  imports: [...modules, ...zorroModules, ...components],
+  templateUrl: "./dynamic-field.component.html",
+  styleUrls: ["./dynamic-field.component.scss"],
+})
+export class DynamicFieldComponent {
+  readonly field = input.required<BaseField<any>>();
+  readonly fields = input.required<BaseField<any>[]>();
+  readonly mode = input.required<FormMode>();
+  readonly control = input.required<AbstractControl>();
+  readonly formGroup = input.required<FormGroup>();
+  readonly formId = input.required<string>();
+
+  fieldTypeEnum = FieldTypeEnum;
+  formModeEnum = FormModeEnum;
+
+  private validationService = inject(ValidationService);
+
+  /**
+   * Lấy thông báo lỗi đầu tiên của trường đang thao tác dựa trên control và field.
+   */
+  protected getErrorMessage(): string {
+    return (
+      this.validationService.getFirstError(
+        this.control(),
+        this.field(),
+        this.fields(),
+      ) ?? ""
+    );
+  }
+}

package/src/lib/shared/components/field-user-config/field-user-config.component.html

@@ -0,0 +1,38 @@
+<!-- Cấu hình (Dropdown & Menu) chỉ hiện khi có bất kỳ config nào -->
+@if (field().userConfigs) {
+  <!-- Trigger Nút Cấu hình -->
+  <a
+    nz-dropdown
+    [nzDropdownMenu]="configMenu"
+    nzTrigger="click"
+    [nzClickHide]="false"
+    [title]="'Cấu hình'"
+    nzPlacement="bottomRight"
+  >
+    <span
+      nz-icon
+      nzType="setting"
+      nzTheme="outline"
+      class="config-trigger-icon"
+    ></span>
+  </a>
+
+  <!-- Menu Cấu hình -->
+  <nz-dropdown-menu #configMenu="nzDropdownMenu">
+    <ul nz-menu>
+      @if (field().userConfigs?.allowOverrideRequired) {
+        <li nz-menu-item nzDisableItemHover class="config-menu-item">
+          <div class="config-item-content">
+            <span class="config-item-label">Bắt buộc nhập</span>
+            <nz-switch
+              nzSize="small"
+              [ngModel]="field().required"
+              [ngModelOptions]="{ standalone: true }"
+              (ngModelChange)="onToggleUserRequired($event)"
+            ></nz-switch>
+          </div>
+        </li>
+      }
+    </ul>
+  </nz-dropdown-menu>
+}

package/src/lib/shared/components/field-user-config/field-user-config.component.scss

@@ -0,0 +1,29 @@
+.config-trigger-icon {
+  color: #bfbfbf;
+  cursor: pointer;
+  font-size: 16px;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  display: inline-block;
+
+  &:hover {
+    color: #1890ff; /* Màu xanh Ant Design */
+    transform: rotate(90deg) scale(1.1);
+  }
+}
+
+.config-menu-item {
+  padding: 8px 12px;
+  cursor: default;
+}
+
+.config-item-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  min-width: 130px;
+}
+
+.config-item-label {
+  font-size: 13px;
+}

package/src/lib/shared/components/field-user-config/field-user-config.component.ts

@@ -0,0 +1,33 @@
+import { Component, input } from "@angular/core";
+import { BaseField } from "../../models/fields/field.model";
+import { AbstractControl, Validators } from "@angular/forms";
+import { NzDropDownModule } from "ng-zorro-antd/dropdown";
+import { NzIconModule } from "ng-zorro-antd/icon";
+import { NzSwitchModule } from "ng-zorro-antd/switch";
+import { FormsModule } from "@angular/forms";
+
+@Component({
+  selector: "app-field-user-config",
+  standalone: true,
+  imports: [NzDropDownModule, NzIconModule, NzSwitchModule, FormsModule],
+  templateUrl: "./field-user-config.component.html",
+  styleUrls: ["./field-user-config.component.scss"],
+})
+export class FieldUserConfigComponent {
+  readonly field = input.required<BaseField<any>>();
+  readonly control = input.required<AbstractControl>();
+
+  onToggleUserRequired(isRequired: boolean): void {
+    this.field().required = isRequired;
+    const ctrl = this.control();
+
+    if (isRequired) {
+      ctrl.addValidators(Validators.required);
+    } else {
+      ctrl.removeValidators(Validators.required);
+    }
+
+    // Cập nhật lại trạng thái validation ngay lập tức
+    ctrl.updateValueAndValidity();
+  }
+}

package/src/lib/shared/components/fields/components/suffix/suffix.component.html

@@ -0,0 +1,42 @@
+<button
+  nz-button
+  nzType="primary"
+  nzSize="small"
+  [title]="suffixConfig.description"
+  class="h-100 suffix-btn font-size-12"
+  [ngClass]="suffixConfig.class ?? ''"
+  (click)="handleSuffix()"
+>
+  @if (suffixConfig.icon) {
+    <span class="icon">
+      <!-- Nếu là icon Zorro -->
+      @if (suffixConfig.icon.type === 'zorro') {
+        <span
+          nz-icon
+          [nzType]="suffixConfig.icon.value"
+          nzTheme="outline"
+          [ngClass]="suffixConfig.icon.class ?? ''"
+        >
+        </span>
+      }
+
+      <!-- Nếu là Boxicons -->
+      @if (suffixConfig.icon.type === 'mdi') {
+        <span [class]="'mdi ' + suffixConfig.icon.value" [ngClass]="suffixConfig.icon.class ?? ''">
+        </span>
+      }
+    </span>
+  }
+
+  @if (suffixConfig.label) {
+    <span class="label">
+      {{ suffixConfig.label }}
+    </span>
+  }
+
+  @if (!suffixConfig.icon && !suffixConfig.label) {
+    <span class="label">
+      {{ defaultText }}
+    </span>
+  }
+</button>

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

@@ -0,0 +1,3 @@
+.suffix-btn {
+  margin-left: 0.5rem;
+}

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

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

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

@@ -0,0 +1,32 @@
+import { Component, inject, Input } from '@angular/core';
+import { Suffix } from '../../../../models/common/common.model';
+import { CORE_MODULES } from '../../../../consts/common';
+import { SuffixService } from '../../../../services/suffix.service';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+const ZORRO_MODULES = [NzButtonModule, NzIconModule];
+
+@Component({
+  selector: 'app-suffix',
+  standalone: true,
+  imports: [...CORE_MODULES, ...ZORRO_MODULES],
+  templateUrl: './suffix.component.html',
+  styleUrl: './suffix.component.scss',
+})
+export class SuffixComponent {
+  @Input() suffixConfig!: Suffix;
+  @Input() formId = '';
+
+  protected defaultText = '';
+
+  private suffixService = inject(SuffixService);
+
+  ngOnInit(): void {
+    this.defaultText = `Suffix ${this.suffixConfig.key}`;
+  }
+
+  handleSuffix(): void {
+    this.suffixService.onSuffixClick(this.suffixConfig.key, this.formId);
+  }
+}

package/src/lib/shared/components/fields/date/date-picker/date-picker.component.html

@@ -0,0 +1,20 @@
+@if (modeSignal() === formModeEnum.View) {
+  <input
+    nz-input
+    [value]="viewDisplayValue()"
+    [disabled]="true"
+    class="modeView"
+  />
+} @else {
+  <nz-date-picker
+    [id]="fieldKey()"
+    [class]="'w-100'"
+    [nzDisabled]="disabledSignal()"
+    [nzPlaceHolder]="displayPlaceholder()"
+    [nzFormat]="format()"
+    [nzDisabledDate]="disabledDate()"
+    [ngModel]="valueSignal()"
+    (ngModelChange)="handleChangeDate($event)"
+  >
+  </nz-date-picker>
+}

package/src/lib/shared/components/fields/date/date-picker/date-picker.component.scss

@@ -0,0 +1,5 @@
+:host ::ng-deep {
+  .ant-input[disabled] {
+    background-color: #fff;
+  }
+}

package/src/lib/shared/components/fields/date/date-picker/date-picker.component.spec.ts

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