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

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

@@ -1,101 +0,0 @@
-import { Component, ElementRef, Input, ViewChild, ChangeDetectorRef, inject } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { DateEditInterfaces } from '../../../enums/date-edit-interfaces';
-import { DatePipe } from '@angular/common';
-
-@Component({
-  selector: 'df-date-edit-control',
-  templateUrl: './date-edit-control.component.html',
-  styleUrls: ['./date-edit-control.component.scss'],
-})
-export class DateEditControlComponent {
-  constructor(private fb: FormBuilder, private cdr: ChangeDetectorRef) {}
-  private _dataPipe = inject(DatePipe);
-  _DateEditInterfaces = DateEditInterfaces;
-
-  /**字段配置列表 */
-  _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();
-  }
-
-  public get entity(): any {
-    return this._entity;
-  }
-  @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 = [];
-      let formConfiguration = this._fields.field.formConfiguration;
-      if (this._fields.required) {
-        ValidatorsArray.push(Validators.required);
-      }
-      if (formConfiguration['DateEdit.Min']) {
-        ValidatorsArray.push(Validators.min(formConfiguration['DateEdit.Min']));
-      }
-      if (formConfiguration['DateEdit.Max']) {
-        ValidatorsArray.push(Validators.max(formConfiguration['DateEdit.Max']));
-      }
-      let controlName = this._selected;
-      if (this._fields.field.formConfiguration['DateEdit.InputMode'] === DateEditInterfaces.Date) {
-        controlName = this._dataPipe.transform(this._selected, 'yyyy-MM-dd');
-      }
-      if (
-        this._fields.field.formConfiguration['DateEdit.InputMode'] === DateEditInterfaces.DateTime
-      ) {
-        controlName = this._dataPipe.transform(this._selected, 'yyyy-MM-dd HH:mm:ss');
-      }
-      if (this._fields.field.formConfiguration['DateEdit.InputMode'] === DateEditInterfaces.Month) {
-        controlName = this._dataPipe.transform(this._selected, 'yyyy-MM');
-      }
-      let newControl = this.fb.control(controlName, 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/date-edit/index.ts

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

package/src/lib/components/form/form-control-group.ts

@@ -1,64 +0,0 @@
-import { FieldControlGroupInterfaces } from '../../interfaces';
-// import { CkEditorConfigComponent, CkEditorControlComponent } from "./ck-editor";
-import { DateEditConfigComponent } from './date-edit/date-edit-config.component';
-import { DateEditControlComponent } from './date-edit/date-edit-control.component';
-import { NumbericEditConfigComponent } from './numeric-edit/numberic-edit-config.component';
-import { NumbericEditControlComponent } from './numeric-edit/numberic-edit-control.component';
-import { SelectConfigComponent, SelectControlComponent } from './select';
-import { SwitchConfigComponent, SwitchControlComponent } from './switch';
-import { TextEditComponent, TextEditConfigComponent } from './text-edit';
-
-/**
- * 表单控件分组-包含配置，控件，显示的数组
- */
-export const FieldControlGroup: FieldControlGroupInterfaces[] = [
-  {
-    displayName: '文本框',
-    name: 'TextEdit',
-    fieldConfigComponent: TextEditConfigComponent,
-    fieldComponent: TextEditComponent,
-    // fieldViewComponent:TextBoxViewComponent,
-  },
-  {
-    displayName: '开关',
-    name: 'Switch',
-    fieldConfigComponent: SwitchConfigComponent,
-    fieldComponent: SwitchControlComponent,
-    // fieldViewComponent:TextBoxViewComponent,
-  },
-  {
-    displayName: '选择',
-    name: 'Select',
-    fieldConfigComponent: SelectConfigComponent,
-    fieldComponent: SelectControlComponent,
-    // fieldViewComponent:TextBoxViewComponent,
-  },
-  {
-    displayName: '数字',
-    name: 'NumericEdit',
-    fieldConfigComponent: NumbericEditConfigComponent,
-    fieldComponent: NumbericEditControlComponent,
-    // fieldViewComponent:TextBoxViewComponent,
-  },
-  {
-    displayName: '日期',
-    name: 'DateEdit',
-    fieldConfigComponent: DateEditConfigComponent,
-    fieldComponent: DateEditControlComponent,
-    // fieldViewComponent:TextBoxViewComponent,
-  },
-];
-
-
-export function AddFieldControlGroup(array = []) {
-
-  for (const element of array) {
-    let find = FieldControlGroup.find((control) => {
-      return control.name === element.name;
-    });
-    if(!find){
-      FieldControlGroup.push(element);
-    }
-  }
-  return FieldControlGroup;
-}

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

@@ -1,6 +0,0 @@
-export * from './text-edit'
-export * from './switch'
-export * from './numeric-edit'
-export * from './date-edit'
-export * from './form-control-group'
-export * from './select'

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

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

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

@@ -1,31 +0,0 @@
-<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="NumericEditField.Placeholder">
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::Min' | abpLocalization}}</label>
-            <input type="text" class="form-control" formControlName="NumericEditField.Min">
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::Max' | abpLocalization}}</label>
-            <input type="text" class="form-control" formControlName="NumericEditField.Max">
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::NumericDecimals' | abpLocalization}}</label>
-            <input type="text" class="form-control" formControlName="NumericEditField.Decimals">
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::NumericStep' | abpLocalization}}</label>
-            <input type="text" class="form-control" formControlName="NumericEditField.Step">
-            <small class="form-text text-muted d-block">{{'DigniteAbpForms::NumericStepHelp'|abpLocalization}}</small>
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::FormatSpecifier' | abpLocalization}}</label>
-            <input type="text" class="form-control" formControlName="FormatSpecifier">
-            <small class="form-text text-muted d-block">See:<a href="https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/standard-numeric-format-strings"  target="_blank">https://docs.microsoft.com/zh-cn/dotnet/standard/base-types/standard-numeric-format-strings</a></small>
-        </div>
-        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;" #submitclick></button>
-    </div>
-</form>

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

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

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

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

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

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

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

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

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

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

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

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

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