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

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

@@ -1,40 +0,0 @@
-<form [formGroup]="_Entity">
-    <div formGroupName="formConfiguration">
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::DateEditMode' | abpLocalization}}</label>
-            <div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" [value]="_DateEditInterfaces.Date"
-                        formControlName="DateEdit.InputMode" id="flexRadioDefault1" (change)="timeTypeChange()">
-                    <label class="form-check-label" for="flexRadioDefault1">
-                        {{'DigniteAbpForms::Date' | abpLocalization}}
-                    </label>
-                </div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" [value]="_DateEditInterfaces.DateTime"
-                        formControlName="DateEdit.InputMode" id="flexRadioDefault2" (change)="timeTypeChange()">
-                    <label class="form-check-label" for="flexRadioDefault2">
-                        {{'DigniteAbpForms::DateTime' | abpLocalization}}
-                    </label>
-                </div>
-                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="radio" [value]="_DateEditInterfaces.Month"
-                        formControlName="DateEdit.InputMode" id="flexRadioDefault3" (change)="timeTypeChange()">
-                    <label class="form-check-label" for="flexRadioDefault3">
-                        {{'DigniteAbpForms::Month' | abpLocalization}}
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::Min' | abpLocalization}}</label>
-            <input [type]="dateTimeType" class="form-control" step="1" formControlName="DateEdit.Min">
-        </div>
-        <div class="mb-3">
-            <label class="form-label">{{'DigniteAbpForms::Max' | abpLocalization}}</label>
-            <input [type]="dateTimeType" class="form-control" step="1" formControlName="DateEdit.Max">
-        </div>
-        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;"
-            #submitclick></button>
-    </div>
-</form>

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

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

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

@@ -1,87 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
-import { DateEditConfig } from './date-edit-config';
-import { DateEditInterfaces } from '../../../enums/date-edit-interfaces';
-import { DatePipe } from '@angular/common';
-
-@Component({
-  selector: 'df-date-edit-config',
-  templateUrl: './date-edit-config.component.html',
-  styleUrls: ['./date-edit-config.component.scss'],
-})
-export class DateEditConfigComponent {
-  constructor(private fb: FormBuilder) {}
-  private _dataPipe = inject(DatePipe);
-  _DateEditInterfaces = DateEditInterfaces;
-  /**表单控件类型 */
-  _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();
-  }
-
-  dateTimeType: any = 'date';
-  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 DateEditConfig()));
-      if (this._selected && this._selected.formControlName == this._type) {
-        this.formConfiguration.patchValue({
-          ...this._selected.formConfiguration,
-        });
-        this.timeTypeChange()
-      }
-      resolve(true);
-    });
-  }
-  /**切换时间类型 */
-  timeTypeChange() {
-    let type = this.formConfiguration.value['DateEdit.InputMode'];
-    let Min = this.formConfiguration.value['DateEdit.Min'];
-    let Max = this.formConfiguration.value['DateEdit.Max'];
-    if (type == DateEditInterfaces.Date) {
-      this.dateTimeType = 'date';
-      Min = this._dataPipe.transform(Min, 'yyyy-MM-dd');
-      Max = this._dataPipe.transform(Max, 'yyyy-MM-dd');
-    } else if (type == DateEditInterfaces.DateTime) {
-      this.dateTimeType = 'datetime-local';
-      Min = this._dataPipe.transform(Min, 'yyyy-MM-dd HH:mm:ss');
-      Max = this._dataPipe.transform(Max, 'yyyy-MM-dd HH:mm:ss');
-    } else if (type == DateEditInterfaces.Month) {
-      this.dateTimeType = 'month';
-      Min = this._dataPipe.transform(Min, 'yyyy-MM');
-      Max = this._dataPipe.transform(Max, 'yyyy-MM');
-    }
-    this.formConfiguration.patchValue({
-      'DateEdit.Min': Min,
-      'DateEdit.Max': Max,
-    });
-  }
-}

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

@@ -1,14 +0,0 @@
-import { FormControl, Validators } from "@angular/forms";
-import { DateEditInterfaces } from "../../../enums/date-edit-interfaces";
-
-export class DateEditConfig {
-    /**日期格式 */
-    'DateEdit.InputMode': any = [DateEditInterfaces.Date, []];
-    /**最小值 */
-    'DateEdit.Min': any = ['', []];
-    /**最大值 */
-    'DateEdit.Max': any = ['', []];
-
-    constructor() {
-    }
-}

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

@@ -1,26 +0,0 @@
-<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['DateEdit.InputMode'] === _DateEditInterfaces.Date">
-                <input type="date" class="form-control" step="1" formControlName="{{_fields.field.name}}"
-                    [min]="_fields.field.formConfiguration['DateEdit.Min']"
-                    [max]="_fields.field.formConfiguration['DateEdit.Max']" />
-            </ng-container>
-            <ng-container
-                *ngIf="_fields.field.formConfiguration['DateEdit.InputMode'] === _DateEditInterfaces.DateTime">
-                <input type="datetime-local" class="form-control" step="1" formControlName="{{_fields.field.name}}"
-                    [min]="_fields.field.formConfiguration['DateEdit.Min']"
-                    [max]="_fields.field.formConfiguration['DateEdit.Max']" />
-            </ng-container>
-            <ng-container *ngIf="_fields.field.formConfiguration['DateEdit.InputMode'] === _DateEditInterfaces.Month">
-                <input type="month" class="form-control" step="1" formControlName="{{_fields.field.name}}"
-                    [min]="_fields.field.formConfiguration['DateEdit.Min']"
-                    [max]="_fields.field.formConfiguration['DateEdit.Max']" />
-            </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/date-edit/date-edit-control.component.spec.ts

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

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