@dignite-ng/expand.cms 2.0.0-rc.1 → 2.0.0-rc.10

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

@@ -0,0 +1,111 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild, inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { EntryAdminService } from '../../../proxy/dignite/cms/admin/entries/entry-admin.service';
+import { EntryStatus } from '../../../proxy/dignite/cms/entries';
+// import { EntryAdminService } from '../../../proxy/admin/entries';
+// import { EntryStatus } from '../../../proxy/entries/entry-status.enum';
+
+@Component({
+  selector: 'cms-entry-control',
+  templateUrl: './entry-control.component.html',
+  styleUrls: ['./entry-control.component.scss'],
+})
+export class EntryControlComponent {
+  constructor() {}
+  private fb = inject(FormBuilder);
+  private _EntryAdminService = inject(EntryAdminService);
+
+  /**表单实体 */
+  _entity: FormGroup | undefined;
+  @Input()
+  public set entity(v: any) {
+    this._entity = v;
+
+    if (v) this.dataLoaded();
+  }
+
+  /**字段配置列表 */
+  _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 || [];
+  }
+  /**语言 */
+  _culture: any;
+  @Input()
+  public set culture(v: any) {
+    if (v) {
+      this._culture = v;
+      // this.dataLoaded()
+    }
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  extraProperties: FormGroup | undefined;
+
+  /** */
+  listOfOption: any[] = [];
+  private cdr = inject(ChangeDetectorRef);
+  async dataLoaded() {
+    if (this._fields && this._entity && this._parentFiledName && this._culture) {
+      await this.AfterInit();
+      await this.getEntryAssignList();
+      this.cdr.detectChanges(); // 手动触发变更检测
+      this.submitclick?.nativeElement?.click();
+    }
+  }
+
+
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let ValidatorsArray:any[] = [];
+      if (this._fields.required) {
+        ValidatorsArray.push(Validators.required);
+      }
+      
+      let newControl = this.fb.control(this._selected, ValidatorsArray);
+      let extraProperties = this._entity?.get(this._parentFiledName) as FormGroup;
+      extraProperties.setControl(this._fields.field.name, newControl);
+      resolve(true);
+    });
+  }
+
+  /**获取对应的条目 */
+  getEntryAssignList(filter = '') {
+    return new Promise((resolve, rejects) => {
+      this._EntryAdminService
+        .getList({
+          culture: this._culture,
+          sectionId: this._fields.field.formConfiguration['Entry.SectionId'],
+          skipCount: 0,
+          maxResultCount: 30,
+          status: EntryStatus.Published,
+          filter: filter,
+        })
+        .subscribe((res:any) => {
+          this.listOfOption = res.items;
+          resolve(true);
+        });
+    });
+  }
+
+  /** */
+  async SelectChange(event) {
+    await this.getEntryAssignList(event);
+  }
+}

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

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

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

@@ -0,0 +1,27 @@
+import { EntryConfigComponent, EntryControlComponent } from "./entry";
+import { MatrixConfigComponent } from "./matrix/matrix-config.component";
+import { MatrixControlComponent } from "./matrix/matrix-control.component";
+import { TableConfigComponent, TableControlComponent } from "./table";
+/**
+ * 表单控件分组-包含配置，控件，显示的数组
+ */
+export const cmsFieldControlGroup: any[] = [
+    {
+        displayName: '表格',
+        name: 'Table',
+        fieldConfigComponent: TableConfigComponent,
+        fieldComponent: TableControlComponent,
+    },
+    {
+        displayName: '矩阵',
+        name: 'Matrix',
+        fieldConfigComponent: MatrixConfigComponent,
+        fieldComponent: MatrixControlComponent,
+    },
+    {
+        displayName: '条目',
+        name: 'Entry',
+        fieldConfigComponent: EntryConfigComponent,
+        fieldComponent: EntryControlComponent,
+    },
+];

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

@@ -0,0 +1,4 @@
+export * from './form-control-group'
+export * from './entry'
+export * from './matrix'
+export * from './table'

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

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

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

@@ -0,0 +1,148 @@
+<form [formGroup]="_Entity">
+    <div formGroupName="formConfiguration">
+        <div class="mb-3">
+            <label class="form-label">{{'Cms::::FormControl:Matrix' | abpLocalization}}</label>
+            <div class="row">
+                <div class="col-md-3">
+                    <div class="list-group">
+                        <li class="list-group-item d-flex align-items-center justify-content-between"
+                            aria-current="true">
+                            {{'Cms::MatrixBlockType' | abpLocalization}}
+                            <button class="btn btn-light btn-sm p-0" (click.stop)="addMatrixBlockType()">
+                                <i class="fas fa-plus-circle p-1"></i>
+                            </button>
+                        </li>
+                        <ng-container *ngFor="let item of MatrixBlockTypes.controls;let i =index">
+                            <button type="button" (click.stop)="selectMatrixBlockChange(i)"
+                                class="list-group-item d-flex align-items-center justify-content-between list-group-item-action "
+                                [class.active]="i===selectMatrixBlockIndex">
+                                <div>
+                                    <div>{{item.value.displayName}}</div>
+                                    <div>{{item.value.name}}</div>
+                                </div>
+                                <div ngbDropdown class="d-inline-block">
+                                    <button type="button" class="btn btn-light btn-sm" id="dropdownBasic1"
+                                        style="z-index: 8;" ngbDropdownToggle></button>
+                                    <div ngbDropdownMenu aria-labelledby="dropdownBasic1" style="z-index: 9;">
+                                        <button ngbDropdownItem
+                                            (click.stop)="EditMatrixBlock(item.value)">{{'AbpUi::Edit' | abpLocalization}}</button>
+                                        <button ngbDropdownItem
+                                            (click.stop)="DeleteMatrixBlock(i)">{{'AbpUi::Delete' | abpLocalization}}</button>
+                                    </div>
+                                </div>
+                            </button>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div class="list-group" *ngIf="MatrixBlockTypes?.controls.length>0">
+                        <li class="list-group-item d-flex align-items-center justify-content-between"
+                            aria-current="true">
+                            {{'Cms::Fields' | abpLocalization}}
+                            <button class="btn btn-light btn-sm p-0" (click.stop)="addMatrixField()">
+                                <i class="fas fa-plus-circle p-1"></i>
+                            </button>
+                        </li>
+                        <ng-container *ngFor="let item of MatrixBlockTypes.controls;let i =index">
+                            <ng-container *ngIf="i === selectMatrixBlockIndex">
+                                <ng-container *ngFor="let el of item.controls['fields'].controls;let fi =index">
+                                    <button type="button" (click.stop)="selectMatrixFieldChange(i,fi)"
+                                        class="list-group-item d-flex align-items-center justify-content-between list-group-item-action "
+                                        [class.active]="fi===selectMatrixFieldIndex">
+                                        <div>
+                                            <div>{{el.value.displayName}}</div>
+                                            <div>{{el.value.name}}</div>
+                                        </div>
+                                        <button type="button"
+                                            (click.stop)="deleteMatrixField(item.controls['fields'],fi)"
+                                            class="btn btn-sm btn-li">{{'AbpUi::Delete' | abpLocalization}}</button>
+                                    </button>
+                                </ng-container>
+                            </ng-container>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="col-md-6" formArrayName="MatrixBlockTypes">
+                    <ng-container *ngFor="let item of MatrixBlockTypes.controls;let i =index">
+                        <div [formGroupName]="i" [hidden]="i !== selectMatrixBlockIndex">
+                            <div formArrayName="fields">
+                                <ng-container *ngFor="let itemf of item.controls['fields'].controls;let fi =index">
+                                    <div [formGroupName]="fi" [hidden]="fi !== selectMatrixFieldIndex">
+                                        <div class="mb-3">
+                                            <label class="form-label"
+                                                for="displayName">{{'Cms::DisplayName' | abpLocalization}}</label>
+                                            <input type="text" class="form-control" formControlName="displayName"
+                                                (blur)="MatrixFieldDisplayNameInputBlur($event)">
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label"
+                                                for="name">{{'DigniteAbpForms::FieldName' | abpLocalization}}</label>
+                                            <input type="text" class="form-control" formControlName="name">
+                                            <small class="form-text text-muted d-block">
+                                                {{'DigniteAbpForms::FieldNameHelpText' | abpLocalization}}</small>
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label"
+                                                for="description">{{'Cms::Description' | abpLocalization}}</label>
+                                            <input type="text" class="form-control" formControlName="description">
+                                        </div>
+                                        <div class="mb-3">
+                                            <label class="form-label"
+                                                for="formControlName">{{'Cms::FieldType' | abpLocalization}}</label>
+                                            <select class="form-select" formControlName="formControlName" (change)="setConfigComponent()">
+                                                <ng-container *ngFor="let itemC of _FieldControlGroup;let i =index">
+                                                    <option [value]="itemC.name">{{itemC.displayName}}</option>
+                                                </ng-container>
+                                            </select>
+                                        </div>
+                                        <ng-container *ngIf="itemf.value.formControlName&&itemf">
+                                            <df-dynamic [type]="itemf.value.formControlName" 
+                                                [selected]="_selected?_selected.formConfiguration?.MatrixBlockTypes[i]?.fields[fi]:''" [entity]="itemf"></df-dynamic>
+                                                
+                                        </ng-container>
+                                    </div>
+                                </ng-container>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+
+            </div>
+        </div>
+        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;"
+            #submitclick></button>
+    </div>
+</form>
+
+
+
+<abp-modal [(visible)]="matrixModalOpen" [busy]="modalBusy" (visibleChange)="matrixModalVisibleChange($event)" >
+    <ng-template #abpHeader>
+        <h3>{{isMatrixEdit?('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="matrixModalForm; else loaderRef">
+            <form class="sites-modal-form" #myForm="ngForm" [formGroup]="matrixModalForm"
+                (keydown.enter)="$event.preventDefault()" (submit)="createOrEditSave()">
+                <button type="submit" #matrixModalModalSubmit style="display: none"></button>
+                <div class="mb-3">
+                    <label class="form-label" for="displayName">{{'Cms::DisplayName' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="displayName"
+                        (blur)="displayNameInputBlur($event)">
+                </div>
+                <div class="mb-3">
+                    <label class="form-label" for="name">{{'Cms::Name' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="name">
+                </div>
+            </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)="matrixModalModalSubmit.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

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

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

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

@@ -0,0 +1,244 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { ChangeDetectorRef, Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { MatrixConfig, MatrixItemConfig } from './matrix-config';
+import { CmsApiService, FieldAbstractsService } from '../../../services';
+
+@Component({
+  selector: 'df-matrix-config',
+  templateUrl: './matrix-config.component.html',
+  styleUrls: ['./matrix-config.component.scss'],
+})
+export class MatrixConfigComponent {
+  constructor(
+    private fb: FormBuilder,
+    private _CmsApiService: CmsApiService,
+    private _FieldAbstractsService: FieldAbstractsService
+  ) {}
+
+  /**表单控件组 */
+  _FieldControlGroup: any[];
+  /**表单控件类型 */
+  _type: any;
+  @Input()
+  public set type(v: any) {
+    this._type = v;
+  }
+
+  /**选择的表单信息 */
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    if (v) {
+      for (const key in v.formConfiguration) {
+        if(Array.isArray(v.formConfiguration[key])){
+          v.formConfiguration[key]=this._CmsApiService.convertKeysToCamelCase(v.formConfiguration[key])
+        }
+      }
+      this._selected = v;
+    }
+  }
+  /**表单实体 */
+  _Entity: FormGroup | undefined;
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+    this.dataLoaded();
+  }
+
+  @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(async (resolve, rejects) => {
+      this._FieldControlGroup = this._FieldAbstractsService.getExcludeAssignControl(this._type);
+      this._Entity.setControl('formConfiguration', this.fb.group(new MatrixConfig()));
+      await this.setSelectValue();
+      this.formConfiguration.patchValue(this._selected.formConfiguration);
+      resolve(true);
+    });
+  }
+
+  
+
+  setSelectValue() {
+    return new Promise((resolve, rejects) => {
+      if (this._selected && this._selected.formControlName == this._type) {
+        this._selected.formConfiguration['MatrixBlockTypes'].forEach((el, index) => {
+          this.addMatrixBlockTypeItem(el);
+          el.fields.forEach((elf, indexf) => {
+            this.addMatrixFieldItem(elf, index);
+          });
+        });
+        resolve(true);
+      }
+    });
+  }
+
+  /**获取表单配置 */
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup;
+  }
+
+  /**获取表单配置下的矩阵块表单数组 */
+  get MatrixBlockTypes() {
+    return this.formConfiguration.controls['MatrixBlockTypes'] as FormArray;
+  }
+
+  /**模态框-状态 */
+  matrixModalOpen: boolean = false;
+  /**模态框-是否正在编辑 */
+  isMatrixModalEdit: any = false;
+
+  /**模态框-用于确定模态的繁忙状态是否为真 */
+  modalBusy: boolean = false;
+
+  /**模态框-表单 */
+  matrixModalForm: FormGroup | undefined;
+
+  /**表单控件模板-用于在form外提交submit */
+  @ViewChild('matrixModalModalSubmit', { static: false }) matrixModalModalSubmit: ElementRef;
+
+  /**矩阵块-选择的下标 */
+  selectMatrixBlockIndex: any = 0;
+
+  /**矩阵块-选择的矩阵下字段的下标 */
+  selectMatrixFieldIndex: any = 0;
+
+  /**模态框-状态改变 */
+  matrixModalVisibleChange(event) {
+    if (!event) {
+      this.isMatrixModalEdit = false;
+      this.matrixModalForm = undefined;
+      return;
+    }
+  }
+
+  /**矩阵块--新增-打开模态框 */
+  addMatrixBlockType() {
+    this.matrixModalForm = this.fb.group(new MatrixItemConfig());
+    this.matrixModalOpen = true;
+  }
+
+  /**模态框--矩阵表单保存提交 */
+  createOrEditSave() {
+    let input = this.matrixModalForm.value;
+    if (!this.matrixModalForm.valid) return;
+    if (this.isMatrixModalEdit) {
+      let MatrixBlockTypesItem = this.MatrixBlockTypes.at(this.selectMatrixBlockIndex) as FormGroup;
+      MatrixBlockTypesItem.patchValue({
+        ...input,
+      });
+    } else {
+      this.addMatrixBlockTypeItem(input);
+    }
+    this.matrixModalOpen = false;
+  }
+  /**新增矩阵块-向数组表单中增加项 */
+  addMatrixBlockTypeItem(input) {
+    this.MatrixBlockTypes.push(
+      new FormGroup({
+        displayName: new FormControl(input.displayName, Validators.required),
+        name: new FormControl(input.name, Validators.required),
+        fields: new FormArray([]),
+      })
+    );
+  }
+  /**编辑矩阵块 */
+  EditMatrixBlock(input) {
+    this.matrixModalForm = this.fb.group(new MatrixItemConfig());
+    this.matrixModalForm.patchValue({
+      ...input,
+    });
+    this.matrixModalOpen = true;
+    this.isMatrixModalEdit = true;
+  }
+
+  /**删除矩阵块 */
+  DeleteMatrixBlock(index) {
+    this.MatrixBlockTypes.removeAt(index);
+  }
+
+  /**矩阵块-选择 */
+  selectMatrixBlockChange(index) {
+    this.selectMatrixBlockIndex = index;
+  }
+
+  /**矩阵字段-新增 */
+  addMatrixField() {
+    this.addMatrixFieldItem('', this.selectMatrixBlockIndex);
+    let MatrixBlockTypesItemForm = this.MatrixBlockTypes.at(
+      this.selectMatrixBlockIndex
+    ) as FormGroup;
+    let MatrixFieldItemForm = MatrixBlockTypesItemForm.get('fields') as FormArray;
+    this.selectMatrixFieldChange(0, MatrixFieldItemForm.length - 1);
+  }
+  /**矩阵字段-新增矩阵字段项 */
+  addMatrixFieldItem(input: any = '', selectMatrixBlockIndex) {
+    /**矩阵下标的矩阵项Form */
+    let MatrixBlockTypesItemForm = this.MatrixBlockTypes.at(selectMatrixBlockIndex) as FormGroup;
+    let MatrixFieldItemForm = MatrixBlockTypesItemForm.get('fields') as FormArray;
+    MatrixFieldItemForm.push(
+      this.fb.group({
+        /**字段名称 Display name of this field */
+        displayName: [input.displayName, [Validators.required]],
+        /**字段唯一名称 Unique Name*/
+        name: [input.name, [Validators.required]],
+        /**描述 说明 */
+        description: [input.description, []],
+        /**FieldType字段类型 表单控件名称 */
+        formControlName: [input.formControlName || 'TextEdit', [Validators.required]],
+        //动态表单配置
+        formConfiguration: new FormGroup({}),
+      })
+    );
+    //
+  }
+
+  /**删除矩阵字段项 */
+  deleteMatrixField(MatrixFieldForm, index) {
+    MatrixFieldForm.removeAt(index);
+    this.selectMatrixFieldIndex = 0;
+  }
+
+  /**矩阵字段-选择 */
+  selectMatrixFieldChange(MatrixBlockIndex, MatrixFieldIndex) {
+    this.selectMatrixFieldIndex = MatrixFieldIndex;
+  }
+
+  get nameInput() {
+    return this.matrixModalForm?.get('name');
+  }
+  get FieldnameInput() {
+    let MatrixBlockTypesItemForm = this.MatrixBlockTypes.at(
+      this.selectMatrixBlockIndex
+    ) as FormGroup;
+    let MatrixFieldItemForm = MatrixBlockTypesItemForm.get('fields') as FormArray;
+    return MatrixFieldItemForm.at(this.selectMatrixFieldIndex).get('name');
+  }
+
+  /**矩阵displayNameInput字段失去焦点 */
+  displayNameInputBlur(event) {
+    let value = event.target.value;
+    let pinyin = this._CmsApiService.chineseToPinyin(value);
+    let nameInput = this.nameInput;
+    if (nameInput.value) return;
+    nameInput.patchValue(pinyin);
+  }
+  /**矩阵displayNameInput字段失去焦点 */
+  MatrixFieldDisplayNameInputBlur(event) {
+    let value = event.target.value;
+    let pinyin = this._CmsApiService.chineseToPinyin(value);
+    let FieldnameInput = this.FieldnameInput;
+    if (FieldnameInput.value) return;
+    FieldnameInput.patchValue(pinyin);
+  }
+}

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

@@ -0,0 +1,63 @@
+import { FormArray, FormControl, FormGroup, Validators } from "@angular/forms";
+
+export class MatrixConfig {
+    // 矩阵类型
+    'MatrixBlockTypes': any = new FormArray([])
+
+    constructor(data?: MatrixConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+export class MatrixItemConfig {
+  
+    displayName: any = ['', [Validators.required]];
+    /**字段名字 */
+    name: any = ['', [Validators.required]];
+
+    constructor(data?: MatrixConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+
+    }
+}
+
+
+
+export class matrixFieldInputBase {
+
+
+    /**字段名称 Display name of this field */
+    displayName: any = ['', [Validators.required]];
+    /**字段唯一名称 Unique Name*/
+    name: any = ['', [Validators.required]];
+    /**描述 说明 */
+    description: any = ['', []];
+    /**FieldType字段类型 表单控件名称 */
+    formControlName: any = ['TextEdit', [Validators.required]];
+   /**动态表单配置 */
+    formConfiguration: FormGroup | undefined = new FormGroup({})
+
+
+    constructor(data?: matrixFieldInputBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+    }
+}