@dignite-ng/expand.dynamic-form 3.0.0-rc.4 → 3.0.0-rc.6

package/src/lib/components/form/switch/switch-config.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { SwitchConfig } from './switch-config';
+@Component({
+  selector: 'df-switch-config',
+  templateUrl: './switch-config.component.html',
+  styleUrls: ['./switch-config.component.scss'],
+})
+export class SwitchConfigComponent {
+  constructor(private fb: FormBuilder) {}
+  /**表单控件类型 */
+  _type: any;
+  @Input()
+  public set type(v: any) {
+    this._type = v;
+    this.dataLoaded();
+  }
+  /**表单实体 */
+  _Entity: FormGroup | undefined;
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+    this.dataLoaded();
+  }
+  /**选择的表单信息 */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    this._selected = v;
+
+    this.dataLoaded();
+  }
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup;
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  private cdr = inject(ChangeDetectorRef);
+  async dataLoaded() {
+    if (this._Entity && this._type) {
+      await this.AfterInit();
+      this.cdr.detectChanges(); // 手动触发变更检测
+      this.submitclick?.nativeElement?.click();
+    }
+  }
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      this._Entity.setControl('formConfiguration', this.fb.group(new SwitchConfig()));
+      if (this._selected && this._selected.formControlName == this._type) {
+        this.formConfiguration.patchValue({
+          ...this._selected.formConfiguration,
+        });
+      }
+      resolve(true);
+    });
+  }
+}

package/src/lib/components/form/switch/switch-config.ts

@@ -0,0 +1,17 @@
+import { FormControl, Validators } from "@angular/forms";
+
+export class SwitchConfig {
+
+
+    /**默认值 */
+    'Switch.Default': any = [false, []];
+    constructor(data?: SwitchConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}

package/src/lib/components/form/switch/switch-control.component.html

@@ -0,0 +1,13 @@
+<form [formGroup]="_entity">
+    <div formGroupName="extraProperties">
+        <div class="mb-3">
+            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
+            <div class="form-check form-switch">
+                <input class="form-check-input" type="checkbox" role="switch" formControlName="{{_fields.field.name}}">
+            </div>
+            <small class="form-text text-muted d-block" *ngIf="_fields.field.description">{{_fields.field.description}}</small>
+        </div>
+
+    </div>
+    <button type="submit" style="display: none;" #submitclick></button>
+</form>

package/src/lib/components/form/switch/switch-control.component.spec.ts

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

package/src/lib/components/form/switch/switch-control.component.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'df-switch-control',
+  templateUrl: './switch-control.component.html',
+  styleUrls: ['./switch-control.component.scss'],
+})
+export class SwitchControlComponent {
+  constructor(private fb: FormBuilder) {}
+
+  /**表单实体 */
+  _entity: FormGroup | undefined;
+  @Input()
+  public set entity(v: any) {
+    this._entity = v;
+    this.dataLoaded();
+  }
+
+  /**字段配置列表 */
+  _fields: any = '';
+  @Input()
+  public set fields(v: any) {
+    this._fields = v;
+    this.dataLoaded();
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any;
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+    this.dataLoaded();
+  }
+  /** */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    // ?v:false;
+    this._selected = v;
+    this.dataLoaded();
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  get extraProperties() {
+    return this._entity.get('extraProperties') as FormGroup;
+  }
+  private cdr = inject(ChangeDetectorRef);
+  /**数据加载完成 */
+  async dataLoaded() {
+    if (this._fields && this._entity) {
+      await this.AfterInit();
+      this.cdr.detectChanges(); // 手动触发变更检测
+      this.submitclick?.nativeElement?.click();
+    }
+  }
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let ValidatorsArray = [];
+      if (this._fields.required) {
+        ValidatorsArray.push(Validators.required);
+      }
+      let newControl = this.fb.control(
+        this._selected
+          ? this._selected
+          : this._selected === false
+          ? this._selected
+          : this._fields.field.formConfiguration['Switch.Default'],
+        ValidatorsArray
+      );
+      this.extraProperties.setControl(this._fields.field.name, newControl);
+      resolve(true);
+    });
+  }
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+    this.extraProperties.removeControl(this._fields.field.name);
+  }
+}

package/src/lib/components/form/text-edit/index.ts

@@ -0,0 +1,3 @@
+export * from './text-edit-config.component'
+export * from './text-edit-config'
+export * from './text-edit.component'

package/src/lib/components/form/text-edit/text-edit-config.component.html

@@ -0,0 +1,32 @@
+<form [formGroup]="_Entity">
+    <div formGroupName="formConfiguration">
+        <div class="mb-3">
+            <label class="form-label">{{'DigniteAbpForms::Placeholder' | abpLocalization}}</label>
+            <input type="text" class="form-control" formControlName="TextEdit.Placeholder">
+        </div>
+        <div class="mb-3">
+            <label class="form-label">{{'DigniteAbpForms::TextEditMode' | abpLocalization}}</label>
+            <div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" [value]="_TextEditMode.SingleLine" formControlName="TextEdit.Mode"
+                        id="flexRadioDefault1">
+                    <label class="form-check-label" for="flexRadioDefault1">
+                        {{'DigniteAbpForms::SingleLine' | abpLocalization}}
+                    </label>
+                </div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="radio" [value]="_TextEditMode.MultipleLine" formControlName="TextEdit.Mode"
+                        id="flexRadioDefault2">
+                    <label class="form-check-label" for="flexRadioDefault2">
+                        {{'DigniteAbpForms::MultipleLine' | abpLocalization}}
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="mb-3">
+            <label class="form-label">{{'DigniteAbpForms::CharLimit' | abpLocalization}}</label>
+            <input type="number" class="form-control" formControlName="TextEdit.CharLimit">
+        </div>
+        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;" #submitclick></button>
+    </div>
+</form>

package/src/lib/components/form/text-edit/text-edit-config.component.spec.ts

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

package/src/lib/components/form/text-edit/text-edit-config.component.ts

@@ -0,0 +1,59 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { TextEditConfig } from './text-edit-config';
+import { TextEditMode } from '../../../enums/text-edit-mode';
+
+@Component({
+  selector: 'df-text-edit-config',
+  templateUrl: './text-edit-config.component.html',
+  styleUrls: ['./text-edit-config.component.scss'],
+})
+export class TextEditConfigComponent {
+  constructor(private fb: FormBuilder) {}
+  _TextEditMode = TextEditMode;
+  /**表单控件类型 */
+  _type: any;
+  @Input()
+  public set type(v: any) {
+    this._type = v;
+    this.dataLoaded();
+  }
+  /**表单实体 */
+  _Entity: FormGroup | undefined;
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+    this.dataLoaded();
+  }
+  /**选择的表单信息 */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    this._selected = v;
+    this.dataLoaded();
+  }
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup;
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+  private cdr = inject(ChangeDetectorRef);
+  async dataLoaded() {
+    if (this._Entity && this._type) {
+      await this.AfterInit();
+      this.cdr.detectChanges(); // 手动触发变更检测
+      this.submitclick?.nativeElement?.click();
+    }
+  }
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      this._Entity.setControl('formConfiguration', this.fb.group(new TextEditConfig()));
+      if (this._selected && this._selected.formControlName == this._type) {
+        this.formConfiguration.patchValue({
+          ...this._selected.formConfiguration,
+        });
+      }
+      resolve(true);
+    });
+  }
+}

package/src/lib/components/form/text-edit/text-edit-config.ts

@@ -0,0 +1,24 @@
+import { FormControl, Validators } from "@angular/forms";
+
+export class TextEditConfig {
+
+
+   /**占位符 */
+    'TextEdit.Placeholder': any = ['', []];
+    //字段类型，单行文本，多行文本
+    'TextEdit.Mode': any = [0, []];
+    // 字数限制
+    'TextEdit.CharLimit': any = ['265', []];
+
+    constructor(data?: TextEditConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+
+    }
+}

package/src/lib/components/form/text-edit/text-edit.component.html

@@ -0,0 +1,17 @@
+<form [formGroup]="_entity">
+    <div [formGroupName]="_parentFiledName">
+        <div class="mb-3">
+            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
+            <ng-container *ngIf="_fields.field.formConfiguration['TextEdit.Mode'] ===_TextEditMode.SingleLine">
+                <input type="text" class="form-control" formControlName="{{_fields.field.name}}"
+                    [placeholder]="_fields.field.formConfiguration['TextEdit.Placeholder']" />
+            </ng-container>
+            <ng-container *ngIf="_fields.field.formConfiguration['TextEdit.Mode'] === _TextEditMode.MultipleLine">
+                <textarea class="form-control" formControlName="{{_fields.field.name}}"
+                    [placeholder]="_fields.field.formConfiguration['TextEdit.Placeholder']" rows="3"></textarea>
+            </ng-container>
+            <small class="form-text text-muted d-block" *ngIf="_fields.field.description">{{_fields.field.description}}</small>
+        </div>
+    </div>
+    <button type="submit" style="display: none;" #submitclick></button>
+</form>

package/src/lib/components/form/text-edit/text-edit.component.spec.ts

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

package/src/lib/components/form/text-edit/text-edit.component.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @angular-eslint/no-empty-lifecycle-method */
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { TextEditMode } from '../../../enums/text-edit-mode';
+import { TextEditConfig } from './text-edit-config';
+
+@Component({
+  selector: 'df-text-edit',
+  templateUrl: './text-edit.component.html',
+  styleUrls: ['./text-edit.component.scss']
+})
+export class TextEditComponent {
+
+  constructor(
+    private fb: FormBuilder,
+  ) {
+  }
+
+  _TextEditMode = TextEditMode
+  /**表单实体 */
+  _entity: FormGroup | undefined
+  @Input()
+  public set entity(v: any) {
+    this._entity = v;
+    if (v) this.dataLoaded()
+  }
+
+  /**字段配置列表 */
+  _fields: any = ''
+  @Input()
+  public set fields(v: any) {
+    this._fields = v;
+    if (v) this.dataLoaded()
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+    if (v) this.dataLoaded()
+  }
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _selected: any
+  @Input()
+  public set selected(v: any) {
+    this._selected = v || '';
+    if (v) this.dataLoaded()
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  extraProperties: FormGroup | undefined;
+  private cdr = inject(ChangeDetectorRef);
+  async dataLoaded() {
+    if (this._fields && this._entity && this._parentFiledName) {
+      this.extraProperties = this._entity.get(this._parentFiledName) as FormGroup
+      await this.AfterInit()
+      this.cdr.detectChanges(); // 手动触发变更检测
+      this.submitclick?.nativeElement?.click();
+    }
+  }
+
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let ValidatorsArray = []
+      if (this._fields.required) {
+        ValidatorsArray.push(Validators.required)
+      }
+      this._fields.field.formConfiguration={
+        ...this.fb.group(new TextEditConfig()).value,
+        ...this._fields.field.formConfiguration
+      }
+      if (this._fields.field.formConfiguration['TextEdit.CharLimit']) {
+        ValidatorsArray.push(Validators.maxLength(this._fields.field.formConfiguration['TextEdit.CharLimit']))
+      }
+     
+      let newControl = this.fb.control(this._selected, ValidatorsArray)
+      this.extraProperties.setControl(this._fields.field.name, newControl)
+      resolve(true)
+    })
+  }
+  ngOnDestroy(): void {
+    //Called once, before the instance is destroyed.
+    //Add 'implements OnDestroy' to the class.
+    this.extraProperties.removeControl(this._fields.field.name)
+  }
+
+  isObjEmpty = (obj) => Object.keys(obj).length === 0
+}

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './form'
+export * from './dynamic'

package/src/lib/dynamic-form.module.ts

@@ -0,0 +1,74 @@
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { CoreModule } from '@abp/ng.core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+// import { NzTreeModule } from 'ng-zorro-antd/tree';
+import {
+  TextEditConfigComponent,
+  TextEditComponent,
+  SwitchConfigComponent,
+  SwitchControlComponent,
+  NumbericEditConfigComponent,
+  NumbericEditControlComponent,
+  DateEditConfigComponent,
+  DateEditControlComponent,
+  SelectConfigComponent,
+  SelectControlComponent,
+  AddFieldControlGroup,
+  DynamicComponent,
+} from './components';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+
+
+
+@NgModule({
+  declarations: [
+    TextEditConfigComponent,
+    TextEditComponent,
+    SwitchConfigComponent,
+    SwitchControlComponent,
+    NumbericEditConfigComponent,
+    NumbericEditControlComponent,
+    DateEditConfigComponent,
+    DateEditControlComponent,
+    SelectConfigComponent,
+    SelectControlComponent,
+    DynamicComponent,
+
+  ],
+  imports: [
+    FormsModule,
+    CoreModule,
+    ThemeSharedModule,
+    ReactiveFormsModule,
+    NgbDropdownModule,
+      NzSelectModule,
+    // NzTreeModule,
+  ],
+  exports: [
+    TextEditConfigComponent,
+    TextEditComponent,
+    SwitchConfigComponent,
+    SwitchControlComponent,
+    NumbericEditConfigComponent,
+    NumbericEditControlComponent,
+    DateEditConfigComponent,
+    DateEditControlComponent,
+    SelectConfigComponent,
+    SelectControlComponent,
+    DynamicComponent,
+  ],
+  providers: [
+  ],
+})
+export class DynamicFormModule {
+  static forRoot(config?: any): ModuleWithProviders<DynamicFormModule> {
+    return {
+      ngModule: DynamicFormModule,
+      providers: [
+      ]
+    };
+  }
+
+}

package/src/lib/enums/date-edit-interfaces.ts

@@ -0,0 +1,16 @@
+export enum DateEditInterfaces {
+      /// <summary>
+  /// Only date is allowed to be entered.
+  /// </summary>
+  Date = 0,
+
+  /// <summary>
+  /// Both date and time are allowed to be entered.
+  /// </summary>
+  DateTime = 1,
+
+  /// <summary>
+  /// Allowed to select only year and month.
+  /// </summary>
+  Month = 2
+}

package/src/lib/enums/index.ts

@@ -0,0 +1,2 @@
+export * from './text-edit-mode'
+export * from './date-edit-interfaces'

package/src/lib/enums/text-edit-mode.ts

@@ -0,0 +1,7 @@
+export enum TextEditMode {
+      // 简单类型
+      SingleLine,
+      // 复合类型；
+      MultipleLine,
+      
+}

package/{lib/interfaces/form-config-interfaces.d.ts → src/lib/interfaces/form-config-interfaces.ts}

@@ -1,17 +1,22 @@
 import { Type } from "@angular/core";
+
 export interface FieldControlGroupInterfaces {
-    displayName: string;
-    name: string;
+    displayName: string
+    name: string
+    // type: TextEditMode,
     /**
  * 动态表单控件
  */
     fieldComponent?: Type<any>;
+
     /**
      * 表单控件配置组件
      */
     fieldConfigComponent?: Type<any>;
+
     /**
      * 条目列表中显示的组件
      */
     fieldViewComponent?: Type<any>;
 }
+

package/src/lib/interfaces/index.ts

@@ -0,0 +1 @@
+export * from './form-config-interfaces'

package/src/lib/proxy/README.md

@@ -0,0 +1,17 @@
+# Proxy Generation Output
+
+This directory includes the output of the latest proxy generation.
+The files and folders in it will be overwritten when proxy generation is run again.
+Therefore, please do not place your own content in this folder.
+
+In addition, `generate-proxy.json` works like a lock file.
+It includes information used by the proxy generator, so please do not delete or modify it.
+
+Finally, the name of the files and folders should not be changed for two reasons:
+- Proxy generator will keep creating them at those paths and you will have multiple copies of the same content.
+- ABP Suite generates files which include imports from this folder.
+
+> **Important Notice:** If you are building a module and are planning to publish to npm,
+> some of the generated proxies are likely to be exported from public-api.ts file. In such a case,
+> please make sure you export files directly and not from barrel exports. In other words,
+> do not include index.ts exports in your public-api.ts exports.