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

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

@@ -0,0 +1,57 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { NumbericEditConfig } from './numberic-edit-config';
+
+@Component({
+  selector: 'df-numberic-edit-config',
+  templateUrl: './numberic-edit-config.component.html',
+  styleUrls: ['./numberic-edit-config.component.scss'],
+})
+export class NumbericEditConfigComponent {
+  constructor(private fb: FormBuilder) {}
+  /**表单控件类型 */
+  _type: any;
+  @Input()
+  public set type(v: any) {
+    this._type = v;
+    //  this.dataLoaded()
+  }
+
+  /**选择的表单信息 */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    this._selected = v ? v : v == false ? v : '';
+  }
+  /**表单实体 */
+  _Entity: FormGroup | undefined;
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+    this.dataLoaded();
+  }
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup;
+  }
+  @ViewChild('submitclick', { static: false }) 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 NumbericEditConfig()));
+      if (this._selected && this._selected.formControlName == this._type) {
+        this.formConfiguration.patchValue({
+          ...this._selected.formConfiguration,
+        });
+      }
+      resolve(true);
+    });
+  }
+}

package/src/lib/components/form/numeric-edit/numberic-edit-config.ts

@@ -0,0 +1,28 @@
+import { FormControl, Validators } from "@angular/forms";
+
+export class NumbericEditConfig {
+    /**占位符 */
+    'NumericEditField.Placeholder': any = ['', []];
+    /**最小值 */
+    'NumericEditField.Min': any = ['', [Validators.required]];
+    //最大值
+    'NumericEditField.Max': any = ['', [Validators.required]];
+    // 小数位数
+    'NumericEditField.Decimals': any = [2, []];
+    //步长
+    'NumericEditField.Step': any = ['', []];
+    //格式说明符
+    'FormatSpecifier': any = ['', []];
+
+    constructor(data?: NumbericEditConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+
+    }
+}

package/src/lib/components/form/numeric-edit/numberic-edit-control.component.html

@@ -0,0 +1,13 @@
+<form [formGroup]="_entity">
+    <div [formGroupName]="_parentFiledName">
+        <div class="mb-3">
+            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
+            <input type="number" class="form-control" formControlName="{{_fields.field.name}}"
+                [placeholder]="_fields.field.formConfiguration['NumericEditField.Placeholder']||''"
+                [step]="_fields.field.formConfiguration['NumericEditField.Step']" (input)="inputchange($event)" />
+            <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/numeric-edit/numberic-edit-control.component.spec.ts

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

package/src/lib/components/form/numeric-edit/numberic-edit-control.component.ts

@@ -0,0 +1,119 @@
+import { Component, ElementRef, Input, ViewChild, ChangeDetectionStrategy ,ChangeDetectorRef } from '@angular/core';
+import { FormBuilder, FormGroup, ValidatorFn, Validators } from '@angular/forms';
+import { AbstractControl, ValidationErrors } from '@angular/forms';  
+  
+export function maxDecimalPlacesValidator(maxDecimalPlaces: number): ValidatorFn {  
+  return (control: AbstractControl): ValidationErrors | null => {  
+    const value = control.value;  
+    if (typeof value === 'number' && isNaN(value) === false) {  
+      const decimalPart = value.toString().split('.')[1];  
+      if (decimalPart && decimalPart.length > maxDecimalPlaces) {  
+        return { 'maxDecimalPlaces': { actual: decimalPart.length, max: maxDecimalPlaces } };  
+      }  
+    }  
+    return null;  
+  };  
+}
+@Component({
+  selector: 'df-numberic-edit-control',
+  templateUrl: './numberic-edit-control.component.html',
+  styleUrls: ['./numberic-edit-control.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NumbericEditControlComponent {
+
+  constructor(
+    private fb: FormBuilder,
+    private cdr: ChangeDetectorRef 
+  ) {
+
+  }
+
+
+  public get entity(): any {
+    return this._entity
+  }
+
+
+  /**字段配置列表 */
+  _fields: any = ''
+  @Input()
+  public set fields(v: any) {
+    this._fields = v;
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+  }
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _selected: any
+  @Input()
+  public set selected(v: any) {
+    this._selected = v ;
+    // 
+  }
+
+    /**表单实体 */
+    _entity: FormGroup | undefined
+    @Input()
+    public set entity(v: any) {
+      this._entity = v;
+      this.dataLoaded()
+    }
+  
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+
+  get extraProperties() {
+    return this._entity?.get('extraProperties') as FormGroup
+  }
+  get fieldInput() { return this.extraProperties.get(this._fields.field.name); }
+  /**数据加载完成 */
+  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:any[] = []
+      let formConfiguration=this._fields.field.formConfiguration
+      if (this._fields.required) {
+        ValidatorsArray.push(Validators.required)
+      }
+      if (formConfiguration['NumericEditField.Min']) {
+        ValidatorsArray.push(Validators.min(formConfiguration['NumericEditField.Min']))
+      }
+      if (formConfiguration['NumericEditField.Max']) {
+        ValidatorsArray.push(Validators.max(formConfiguration['NumericEditField.Max']))
+      }
+      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)
+  }
+
+  /**数字框输入 */
+  inputchange(event){
+    let val=event.target.value;
+
+    const decimalPart = val.toString().split('.')[1]||'';
+    let formConfiguration=this._fields.field.formConfiguration;
+    let Decimals=formConfiguration['NumericEditField.Decimals'];
+    if(decimalPart.length>Decimals){
+      this.fieldInput?.patchValue(val.slice(0,val.length-(decimalPart.length-2)));
+    }
+  }
+}

package/src/lib/components/form/select/index.ts

@@ -0,0 +1,2 @@
+export * from './select-config.component'
+export * from './select-control.component'

package/src/lib/components/form/select/select-config.component.html

@@ -0,0 +1,59 @@
+<form [formGroup]="_Entity">
+    <div formGroupName="formConfiguration">
+        <div class="mb-3">
+            <label class="form-label">{{'DigniteAbpForms::SelectListItem' | abpLocalization}}</label>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">{{'DigniteAbpForms::SelectListItemText' | abpLocalization}}</th>
+                        <th scope="col">{{'DigniteAbpForms::SelectListItemValue' | abpLocalization}}</th>
+                        <th scope="col">{{'DigniteAbpForms::Selected' | abpLocalization}}</th>
+                        <th scope="col" style="width: 1%;">
+                            <button class="btn btn-light btn-sm" (click.stop)="addSelectOptions()">
+                                <i class="fas fa-plus-circle"></i>
+                            </button>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody formArrayName="Select.Options">
+                    <ng-container *ngFor="let item of SelectOptions.controls;let i=index">
+                        <tr [formGroupName]="i">
+                            <td><input type="text" class="form-control" formControlName="Text" (change)="textChange($event,i)"></td>
+                            <td><input type="text" class="form-control" formControlName="Value"></td>
+                            <td>
+                                <div class="form-check form-check-inline">
+                                    <input class="form-check-input" type="checkbox"  formControlName="Selected" id="selected">
+                                </div>
+                            </td>
+                            <td scope="row" style="width: 1%;">
+                                <button class="btn btn-light btn-sm" (click.stop)="deleteSelectOptions(i)">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                            </td>
+                        </tr> 
+                    </ng-container>
+                    
+                    
+                </tbody>
+            </table>
+        </div>
+
+
+
+        <div class="mb-3">
+            <label class="form-label">{{'DigniteAbpForms::NullText' | abpLocalization}}</label>
+            <input type="text" class="form-control" formControlName="Select.NullText">
+        </div>
+        <div class="mb-3">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="checkbox" formControlName="Select.Multiple"
+                    id="Multiple">
+                <label class="form-check-label" for="Multiple">
+                    {{'DigniteAbpForms::Multiple' | abpLocalization}}
+                </label>
+            </div>
+        </div>
+        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;"
+            #submitclick></button>
+    </div>
+</form>

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

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

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

@@ -0,0 +1,90 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { SelectConfig } from './select-config';
+import { DfApiService } from '../../../services';
+
+@Component({
+  selector: 'df-select-config',
+
+  templateUrl: './select-config.component.html',
+  styleUrls: ['./select-config.component.scss'],
+})
+export class SelectConfigComponent {
+  constructor(private fb: FormBuilder, private _DfApiService: DfApiService) {}
+  /**表单控件类型 */
+  _type: any;
+  @Input()
+  public set type(v: any) {
+    this._type = v;
+  }
+
+  /**选择的表单信息 */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    this._selected = v;
+  }
+
+  /**表单实体 */
+  _Entity: FormGroup | undefined;
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+    this.dataLoaded();
+  }
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup;
+  }
+  get SelectOptions() {
+    return this.formConfiguration.controls['Select.Options'] as FormArray;
+  }
+  @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();
+    }
+  }
+  /**增加选项 */
+  addSelectOptions() {
+    this.SelectOptions.push(
+      new FormGroup({
+        Text: new FormControl('', Validators.required),
+        Value: new FormControl('', Validators.required),
+        Selected: new FormControl(false),
+      })
+    );
+  }
+  /**删除某个选项 */
+  deleteSelectOptions(index) {
+    this.SelectOptions.removeAt(index);
+  }
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      this._Entity.setControl('formConfiguration', this.fb.group(new SelectConfig()));
+      if (this._selected && this._selected.formControlName == this._type) {
+        this._selected.formConfiguration['Select.Options']?.forEach(el => {
+          this.addSelectOptions();
+        });
+        this.formConfiguration.patchValue({
+          ...this._selected.formConfiguration,
+        });
+      } else {
+        this.addSelectOptions();
+      }
+      resolve(true);
+    });
+  }
+
+  textChange(event, index) {
+    let SelectOptionsItem = this.SelectOptions.at(index);
+    let value = event.target.value;
+    if (SelectOptionsItem.get('Value').value) return;
+    SelectOptionsItem.patchValue({
+      Value: this._DfApiService.chineseToPinyin(value),
+    });
+  }
+}

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

@@ -0,0 +1,24 @@
+import { FormArray, FormControl, Validators } from "@angular/forms";
+
+export class SelectConfig {
+
+
+    /**空值文本 */
+    'Select.NullText': any = ['', []];
+    //多选
+    'Select.Multiple': any = [false, []];
+    // 选项
+    'Select.Options': any = new FormArray([])
+
+    constructor(data?: SelectConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+
+    }
+}

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

@@ -0,0 +1,32 @@
+<form [formGroup]="_entity">
+    <div formGroupName="extraProperties" class="selectcontrol">
+        <div class="mb-3">
+            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
+            <ng-container *ngIf="formConfiguration['Select.Multiple']; else elseTemplate">
+                <!-- <select class="form-select" multiple formControlName="{{_fields.field.name}}">
+                    <ng-container *ngFor="let item of _fields.field.formConfiguration['Select.Options'];let i =index">
+                        <option [value]="item.Value">{{item.Text}}</option>
+                    </ng-container>
+                </select> -->
+                <nz-select class="form-select form-select-multiple" [nzMaxTagCount]="1"
+                    nzShowSearch nzMode="multiple"
+                    formControlName="{{_fields.field.name}}">
+                    <nz-option *ngFor="let item of _fields.field.formConfiguration['Select.Options']"
+                        [nzLabel]="item.Text" [nzValue]="item.Value"></nz-option>
+                </nz-select>
+            </ng-container>
+            <ng-template #elseTemplate>
+                <select class="form-select" [multiple]="false" formControlName="{{_fields.field.name}}">
+                    <option [value]="">{{formConfiguration['Select.NullText']}}</option>
+                    <ng-container *ngFor="let item of _fields.field.formConfiguration['Select.Options'];let i =index">
+                        <option [value]="item.Value">{{item.Text}}</option>
+                    </ng-container>
+                </select>
+            </ng-template>
+            <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/select/select-control.component.scss

@@ -0,0 +1,32 @@
+::ng-deep .selectcontrol {
+ 
+
+    nz-select {
+        width: 100%;
+
+        .ant-select-selector {
+            background: transparent !important;
+            border: none !important;
+            padding: .275rem 1.25rem !important;
+            box-shadow: none !important;
+            height: auto !important
+        }
+
+        .anticon-search,
+        .anticon-down {
+            display: none
+        }
+    }
+    .ant-select-multiple .ant-select-selection-item{
+        max-width: 40% !important;
+    }
+}
+
+::ng-deep .was-validated .form-select-multiple {
+    border-color: #4fbf67;
+    padding-right: calc(1.5em + 1.35rem);
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%234fbf67' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right calc(0.375em + 0.3375rem) center;
+    background-size: calc(0.75em + 0.675rem) calc(0.75em + 0.675rem);
+}

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

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

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

@@ -0,0 +1,86 @@
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'df-select-control',
+  templateUrl: './select-control.component.html',
+  styleUrls: ['./select-control.component.scss'],
+})
+export class SelectControlComponent {
+  constructor(private fb: FormBuilder) {}
+
+  /**字段配置列表 */
+  _fields: any = '';
+  @Input()
+  public set fields(v: any) {
+    this._fields = v;
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any;
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+  }
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    this._selected = v;
+  }
+
+  /**表单实体 */
+  _entity: FormGroup | undefined;
+  @Input()
+  public set entity(v: any) {
+    this._entity = 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();
+    }
+  }
+ 
+  formConfiguration: any = '';
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let ValidatorsArray:any[] = [];
+      if (this._fields.required) {
+        ValidatorsArray.push(Validators.required);
+      }
+      this.formConfiguration = this._fields.field.formConfiguration;
+      if (!this._selected) {
+        const isMultiple = this.formConfiguration['Select.Multiple'];
+
+        let selectValue:any = isMultiple ? [] : '';
+        this.formConfiguration['Select.Options'].forEach(el => {
+          if (el.Selected) {
+            selectValue = isMultiple
+              ? [...selectValue, el.value || el.Value]
+              : [el.value || el.Value];
+          }
+        });
+
+        this._selected = selectValue;
+      }
+      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);
+  }
+}

package/src/lib/components/form/switch/index.ts

@@ -0,0 +1,2 @@
+export * from './switch-config.component'
+export * from './switch-control.component'

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

@@ -0,0 +1,17 @@
+<form [formGroup]="_Entity">
+    <div formGroupName="formConfiguration">
+        <div class="mb-3">
+            <div>
+                <div class="form-check form-check-inline">
+                    <input class="form-check-input" type="checkbox" formControlName="Switch.Default"
+                        id="flexRadioDefault1">
+                    <label class="form-check-label" for="flexRadioDefault1">
+                        {{'DigniteAbpForms::DefaultValue' | abpLocalization}}
+                    </label>
+                </div>
+                
+            </div>
+        </div>
+        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;" #submitclick></button>
+    </div>
+</form>

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

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