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

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),
-    });
-  }
-}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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