@dignite-ng/expand.cms 0.0.19 → 0.0.20

package/src/lib/components/dynamic-form/matrix/matrix-control.component.ts

@@ -0,0 +1,104 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'df-matrix-control',
+  templateUrl: './matrix-control.component.html',
+  styleUrls: ['./matrix-control.component.scss']
+})
+export class MatrixControlComponent {
+
+  constructor(
+    private fb: FormBuilder,
+  ) {
+
+  }
+
+  /**表单实体 */
+  _entity: FormGroup | undefined
+  @Input()
+  public set entity(v: any) {
+    this._entity = v;
+    this.dataLoaded()
+  }
+
+  /**字段配置列表 */
+  _fields: any = ''
+  @Input()
+  public set fields(v: any) {
+    this._fields = v;
+    this.dataLoaded()
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+    this.dataLoaded()
+  }
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _selected: any
+  @Input()
+  public set selected(v: any) {
+    this._selected = v;
+    if (v) { this.dataLoaded() }
+
+  }
+  /**语言 */
+  _culture: any
+  @Input()
+  public set culture(v: any) {
+    this._culture = v;
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /** 获取父级字段代表的表单组*/
+  extraProperties: FormGroup | undefined
+
+  /**数据加载完成 */
+  async dataLoaded() {
+    if (this._fields && this._entity && this._parentFiledName) {
+      this.extraProperties = this._entity.get(this._parentFiledName) as FormGroup
+      await this.AfterInit()
+      this.submitclick.nativeElement.click();
+      if (this._selected) this.fieldNameControl.patchValue(this._selected);
+    }
+  }
+
+  formConfiguration: any
+  /**获取表格字段代表的控件 */
+  fieldNameControl: FormArray | undefined
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let formConfiguration = this._fields.field.formConfiguration
+      let newArrayGroup = this.fb.array([])
+      this.extraProperties.setControl(this._fields.field.name, newArrayGroup)
+      this.fieldNameControl = this.extraProperties.get(this._fields.field.name) as FormArray
+      if (this._selected) {
+        this._selected.forEach(el => {
+          this.addMatrixControl(formConfiguration.MatrixBlockTypes.find(item => item.name == el.matrixBlockTypeName))
+        });
+      }
+      this.MatrixBlockTypesList = formConfiguration.MatrixBlockTypes
+      resolve(true)
+    })
+  }
+
+  /**矩阵列表 */
+  MatrixBlockTypesList: any[] = []
+
+  /**增加指定矩阵控件项 */
+  addMatrixControl(item) {
+    this.fieldNameControl.push(this.fb.group({
+      extraProperties: new FormGroup({}),
+      matrixBlockTypeName: [item.name],
+      displayName: [item.displayName]
+    }))
+  }
+  /**删除矩阵控件 */
+  deleteMatrixControl(index) {
+    this.fieldNameControl.removeAt(index)
+  }
+}

package/src/lib/components/dynamic-form/table/index.ts

@@ -0,0 +1,3 @@
+export * from './table-config'
+export * from './table-config.component'
+export * from './table-control.component'

package/src/lib/components/dynamic-form/table/table-config.component.html

@@ -0,0 +1,85 @@
+<form [formGroup]="_Entity">
+    <div formGroupName="formConfiguration">
+        <div class="mb-2">
+            <label class="form-label">{{'DigniteAbpForms::SelectListItem' | abpLocalization}}</label>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th scope="col">{{'Cms::TableColumnDisplayName' | abpLocalization}}</th>
+                        <th scope="col">{{'Cms::TableColumnName' | abpLocalization}}</th>
+                        <th scope="col">{{'Cms::TableColumnForm' | abpLocalization}}</th>
+                        <th scope="col" class="flex-end">
+                            <button class="btn btn-light btn-sm" (click.stop)="addTableColumns()">
+                                <i class="fas fa-plus-circle"></i>
+                            </button>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody formArrayName="TableColumns">
+                    <ng-container *ngFor="let item of TableColumns.controls;let i=index">
+                        <tr [formGroupName]="i">
+                            <td><input type="text" class="form-control" formControlName="displayName"  (blur)="disPlayNameInputBlur($event,item)" ></td>
+                            <td><input type="text" class="form-control" formControlName="name"></td>
+                            <td>
+                                <select class="form-select" formControlName="formControlName"
+                                    (change)="selectTableControl($event,i,item)">
+                                    <option value="">SelectFrom</option>
+                                    <ng-container *ngFor="let item_f of _fieldControlGroup;let i_f =index">
+                                        <option [value]="item_f.name">{{item_f.displayName}}</option>
+                                    </ng-container>
+                                </select>
+                            </td>
+                            <td scope="row">
+                                <div class="flex-start">
+                                    <button class="btn btn-light btn-sm " (click.stop)="EditSitesBtn(item,i)">
+                                        <i class="fas fa-edit"></i>
+                                    </button>
+                                    <button class="btn btn-light btn-sm ms-1" (click.stop)="deleteTableColumns(i)">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button class="btn btn-light btn-sm ms-1" *ngIf="i!==0"
+                                        (click.stop)="TableArrowUpOrDown('up',i)">
+                                        <i class="fas fa-arrow-up"></i>
+                                    </button>
+                                    <button class="btn btn-light btn-sm ms-1" *ngIf="i!==TableColumns.controls.length-1"
+                                        (click.stop)="TableArrowUpOrDown('down',i)">
+                                        <i class="fas fa-arrow-down"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-container>
+                </tbody>
+            </table>
+        </div>
+        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;"
+            #submitclick></button>
+    </div>
+</form>
+
+
+<abp-modal [(visible)]="tableSelectOpen" [busy]="modalBusy" (visibleChange)="tableSelectVisibleChange($event)" [options]="{ size: CurrentSelectionTableControlName=='Matrix'?'xl':'' ,scrollable:false }">
+    <ng-template #abpHeader>
+        <h3>{{_tableSelected?('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)}}</h3>
+    </ng-template>
+    <ng-template #abpBody>
+        <ng-template #loaderRef>
+            <div class="text-center"><i class="fa fa-pulse fa-spinner" aria-hidden="true"></i></div>
+        </ng-template>
+        <ng-container *ngIf="tableSelectForm; else loaderRef">
+            <form class="sites-modal-form" #myForm="ngForm" [formGroup]="tableSelectForm"
+                (ngSubmit)="createOrEditSave()">
+                <button type="submit" #tableSelectModalSubmit style="display: none"></button>
+                <ng-container *ngIf="CurrentSelectionTableControlName&&tableSelectForm">
+                    <df-dynamic [type]="CurrentSelectionTableControlName" [entity]="tableSelectForm"
+                    [selected]="_tableSelected" [formGroup]="tableSelectForm"></df-dynamic>
+                </ng-container>
+            </form>
+        </ng-container>
+    </ng-template>
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check"
+            (click)="tableSelectModalSubmit.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

package/src/lib/components/dynamic-form/table/table-config.component.scss

@@ -0,0 +1,10 @@
+.flex-end{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.flex-start{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}

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

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

package/src/lib/components/dynamic-form/table/table-config.component.ts

@@ -0,0 +1,170 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { TableConfig, TableFormControl } from './table-config';
+import { CmsApiService, FieldAbstractsService } from '../../../services';
+
+@Component({
+  selector: 'df-table-config',
+  templateUrl: './table-config.component.html',
+  styleUrls: ['./table-config.component.scss']
+})
+export class TableConfigComponent {
+  constructor(
+    private fb: FormBuilder,
+    private _CmsApiService: CmsApiService,
+    private _FieldAbstractsService: FieldAbstractsService,
+  ) { }
+  /**表单实体 */
+  _Entity: FormGroup | undefined
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+    this.dataLoaded()
+  }
+  /**选择的表单信息 */
+  _selected: any
+  @Input()
+  public set selected(v: any) {
+    if (v) {
+      this._selected = v
+      this.dataLoaded()
+    }
+  }
+  /**表单控件组 */
+  _fieldControlGroup: any[]
+
+  /**表单控件类型 */
+  _type: any
+  @Input()
+  public set type(v: any) {
+    this._type = v
+    this.dataLoaded()
+  }
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup
+  }
+  get TableColumns() {
+    return this.formConfiguration.controls['TableColumns'] as FormArray
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  async dataLoaded() {
+    if (this._Entity && this._type) {
+      await this.AfterInit()
+      this.submitclick.nativeElement.click();
+
+    }
+  }
+  /**增加选项 */
+  addTableColumns() {
+    this.TableColumns.push(this.fb.group({
+      ...new TableFormControl(),
+      formConfiguration: [{}]
+    }))
+  }
+  /**删除某个选项 */
+  deleteTableColumns(index) {
+    this.TableColumns.removeAt(index)
+  }
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      this._Entity.setControl('formConfiguration', this.fb.group(new TableConfig()))
+      this._fieldControlGroup = this._FieldAbstractsService.getExcludeAssignControl(this._type)
+      if (this._selected && this._selected.formControlName == this._type) {
+        this._selected.formConfiguration['TableColumns'].forEach(el => {
+          this.addTableColumns()
+        });
+        this.formConfiguration.patchValue(this._selected.formConfiguration)
+      } else {
+        this.addTableColumns()
+      }
+      resolve(true)
+    })
+  }
+  itemForm: any
+  /**选择表格的表单控件 */
+  selectTableControl(event, i, item) {
+    this.CurrentSelectionTableControlName = event.target.value
+    this.tableSelectOpen = true
+    this.tableSelectForm = this.fb.group(new TableFormControl())
+    this.TableColumnsIndex = i
+    this.itemForm = item
+  }
+
+  CurrentSelectionTableControlName: any
+
+  /**正在创建或编辑的表格项下标 */
+  TableColumnsIndex: any
+  /**创建站点模态框状态 */
+  tableSelectOpen: boolean = false
+
+  /**用于确定模态的繁忙状态是否为真 */
+  modalBusy: boolean = false
+  /**创建站点表单 */
+  tableSelectForm: FormGroup | undefined;
+
+  /**表格已选择数据 */
+  _tableSelected: any
+
+
+  /**表单控件模板-动态赋值表单控件 */
+  @ViewChild('tableSelectModalSubmit', { static: false }) tableSelectModalSubmit: ElementRef;
+
+
+  /**创建站点模态框状态改变 */
+  tableSelectVisibleChange(event) {
+    if (!event) {
+      this._tableSelected = undefined
+      this.tableSelectForm = undefined
+      this.CurrentSelectionTableControlName = undefined
+      this.TableColumnsIndex = undefined
+      return
+    }
+  }
+  /**表单保存提交 */
+  createOrEditSave() {
+    const formGroup = this.TableColumns.at(this.TableColumnsIndex) as FormGroup;
+    let formConfigurationgroup = formGroup.get('formConfiguration') as FormGroup
+
+    formConfigurationgroup.setValue({
+      ...this.tableSelectForm.value['formConfiguration'],
+    });
+    this.tableSelectOpen = false
+  }
+
+  /**编辑站点按钮 */
+  EditSitesBtn(rows, i) {
+
+    this.CurrentSelectionTableControlName = rows.get('formControlName').value
+    this.tableSelectForm = this.fb.group(new TableFormControl())
+    this.tableSelectForm.patchValue({
+      ...rows.value
+    })
+    this.tableSelectForm.get('formConfiguration').patchValue({
+      ...rows.value['formConfiguration']
+    })
+    this._tableSelected = rows.value
+    this.TableColumnsIndex = i
+    this.tableSelectOpen = true
+  }
+
+
+  /**调整表格位置 */
+  TableArrowUpOrDown(type, index) {
+    let controlAt = this.TableColumns.at(index)
+    this.TableColumns.removeAt(index)
+    let lastindex = type == 'up' ? index - 1 : index + 1
+    this.TableColumns.insert(lastindex, controlAt)
+  }
+
+
+  /**字段标签input失去标点生成字段名字 */
+  disPlayNameInputBlur(event, item) {
+    let value = event.target.value
+    let pinyin = this._CmsApiService.chineseToPinyin(value)
+    let nameInput = item.get('name')
+    if (nameInput.value) return
+    nameInput.patchValue(pinyin)
+  }
+}

package/src/lib/components/dynamic-form/table/table-config.ts

@@ -0,0 +1,45 @@
+import { FormArray, FormControl, FormGroup, Validators } from "@angular/forms";
+
+export class TableConfig {
+
+
+
+    // 选项
+    TableColumns: any = new FormArray([])
+
+    constructor(data?: TableConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+export class TableFormControl {
+    /**列标题 */
+    displayName: any = ['', [Validators.required]];
+    /**空间配置 */
+    formConfiguration: any = new FormGroup({})
+    /**列名 */
+    name: any = ['', [Validators.required]];
+    //控件标识
+    formControlName: any = ['', [Validators.required]];
+
+    /**是否必填 */
+    required: any = [false];
+    /**描述 */
+    description: any = [''];
+
+
+    constructor(data?: TableConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}

package/src/lib/components/dynamic-form/table/table-control.component.html

@@ -0,0 +1,55 @@
+<form [formGroup]="_entity">
+    <div formGroupName="extraProperties">
+        <div class="mb-2">
+            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <ng-container *ngFor="let item of formConfiguration.TableColumns">
+                            <th scope="col">{{ item.displayName }}</th>
+                        </ng-container>
+
+                        <th scope="col" class="flex-end">
+                            <button class="btn btn-light btn-sm" (click.stop)="addTableControlItem()">
+                                <i class="fas fa-plus-circle"></i>
+                            </button>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody [formArrayName]="_fields.field.name">
+                    <ng-container *ngFor="let item of fieldNameControl.controls; let i = index">
+                        <tr>
+                            <ng-container *ngFor="let el of formConfiguration.TableColumns">
+                                <td>
+                                    <ng-container *ngIf="item&&el">
+                                        <df-dynamic [entity]="item" [fields]="{ field: el }"
+                                            [selected]="_selected[i]?.extraProperties[''+el.name+'']"
+                                            [parentFiledName]="'extraProperties'"></df-dynamic>
+                                    </ng-container>
+                                </td>
+                            </ng-container>
+                            <td scope="row" class="">
+                                <div class="flex-end mb-2">
+                                    <button class="btn btn-light btn-sm ms-1" (click.stop)="minusTableControlItem(i)">
+                                        <i class="fas fa-minus"></i>
+                                    </button>
+                                    <button class="btn btn-light btn-sm ms-1" (click.stop)="TableArrowUpOrDown('up',i)"
+                                        *ngIf="i!==0">
+                                        <i class="fas fa-arrow-up"></i>
+                                    </button>
+                                    <button class="btn btn-light btn-sm ms-1"
+                                        (click.stop)="TableArrowUpOrDown('down',i)"
+                                        *ngIf="i!==fieldNameControl.controls.length-1">
+                                        <i class="fas fa-arrow-down"></i>
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    </ng-container>
+                </tbody>
+            </table>
+            <div class="form-text" *ngIf="_fields.field.description">{{_fields.field.description}}</div>
+        </div>
+    </div>
+    <button type="submit" style="display: none" #submitclick></button>
+</form>

package/src/lib/components/dynamic-form/table/table-control.component.scss

@@ -0,0 +1,10 @@
+.flex-end{
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+.flex-start{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}

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

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

package/src/lib/components/dynamic-form/table/table-control.component.ts

@@ -0,0 +1,107 @@
+import { Component, ElementRef, Input, ViewChild, ViewContainerRef, inject } from '@angular/core';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'df-table-control',
+  templateUrl: './table-control.component.html',
+  styleUrls: ['./table-control.component.scss']
+})
+export class TableControlComponent {
+
+  constructor(
+    // private fb: FormBuilder,
+  ) {
+  }
+  private fb=inject(FormBuilder)
+
+  /**表单实体 */
+  _entity: FormGroup | undefined
+  @Input()
+  public set entity(v: any) {
+    this._entity = v;
+    this.dataLoaded()
+  }
+
+  /**字段配置列表 */
+  _fields: any = ''
+  @Input()
+  public set fields(v: any) {
+    this._fields = v;
+    this.dataLoaded()
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+    this.dataLoaded()
+  }
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _selected: any
+  @Input()
+  public set selected(v: any) {
+    this._selected = v ;
+    if (v) { this.dataLoaded() }
+
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /** 获取父级字段代表的表单组*/
+  extraProperties: FormGroup | undefined
+  
+  /**数据加载完成 */
+  async dataLoaded() {
+    if (this._fields && this._entity && this._parentFiledName) {
+      this.extraProperties = this._entity.get(this._parentFiledName) as FormGroup
+      await this.AfterInit()
+      this.submitclick.nativeElement.click();
+    }
+  }
+
+  formConfiguration: any
+  /**获取表格字段代表的控件 */
+  fieldNameControl: FormArray | undefined
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let ValidatorsArray = []
+      if (this._fields.required) {
+        ValidatorsArray.push(Validators.required)
+      }
+      let formConfiguration = this._fields.field.formConfiguration
+      this.formConfiguration = formConfiguration
+      let newArrayGroup = this.fb.array([])
+      this.extraProperties.setControl(this._fields.field.name, newArrayGroup)
+      this.fieldNameControl = this.extraProperties.get(this._fields.field.name) as FormArray
+      if (this._selected) {
+        this._selected.forEach(el => {
+          this.addTableControlItem()
+        });
+        this.fieldNameControl.patchValue(this._selected)
+      } else {
+        this.addTableControlItem()
+      }
+      resolve(true)
+    })
+  }
+  /**增加表格项 */
+  addTableControlItem(){
+    this.fieldNameControl.push(this.fb.group({
+      'extraProperties':this.fb.group({})
+    }))
+  }
+  /**删除表格项 */
+  minusTableControlItem(index){
+    this.fieldNameControl.removeAt(index)
+  }
+   /**调整表格位置 */
+   TableArrowUpOrDown(type, index) {
+    let controlAt = this.fieldNameControl.at(index)
+    this.fieldNameControl.removeAt(index)
+    let lastindex = type == 'up' ? index - 1 : index + 1
+    this.fieldNameControl.insert(lastindex, controlAt)
+    this._selected=this.fieldNameControl.value
+  }
+
+}

package/src/lib/components/index.ts

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

package/src/lib/constants/index.ts

@@ -0,0 +1 @@
+export * from './styles'

package/src/lib/constants/styles.ts

@@ -0,0 +1,31 @@
+export default `
+// /* 垂直滚动条样式 */
+// /* 宽度 */
+// ::-webkit-scrollbar {
+//     width: 8px;
+//     height: 8px;
+// }
+// /* 背景色 */
+// ::-webkit-scrollbar-track {
+//     background-color: #f5f5f5;
+// }
+// /* 滑块颜色 */
+// ::-webkit-scrollbar-thumb {
+//     background-color: #c1c1c1;
+    
+//     border-radius: 50px;
+// }
+
+.lpx-content-container .lpx-content {
+    min-height: calc(100vh - 34px);
+    padding: 1.25em 2em 1.25em;
+}
+
+h1,h2,h3,h4,h5,h6{
+    color: inherit;
+}
+.lpx-settings .lpx-context-menu {
+    overflow: auto; 
+}
+
+`;