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

package/src/lib/components/admin/fields/create-or-edit-field.component.ts

@@ -0,0 +1,140 @@
+import { Component, ElementRef, Input, ViewChild, ViewContainerRef } from '@angular/core';
+import { FieldAbstractsService } from '../../../services/field-abstracts.service';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  Validators,
+} from '@angular/forms';
+import { CmsApiService } from '../../../services/cms-api.service';
+import { Observable } from 'rxjs';
+import { LocalizationService } from '@abp/ng.core';
+import { FieldAdminService } from '../../../proxy/dignite/cms/admin/fields';
+@Component({
+  selector: 'cms-create-or-edit-field',
+  templateUrl: './create-or-edit-field.component.html',
+  styleUrls: ['./create-or-edit-field.component.scss'],
+})
+export class CreateOrEditFieldComponent {
+  /**表单控件模板-动态表单配置组件 */
+  // @ViewChild('FormDynamicRef', { read: ViewContainerRef, static: true })
+  // FormDynamicRef: ViewContainerRef;
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  constructor(
+    public _FieldAbstractsService: FieldAbstractsService,
+    private _CmsApiService: CmsApiService,
+    private _FieldAdminService: FieldAdminService,
+    private _LocalizationService: LocalizationService
+  ) {
+    if (this._FieldAbstractsService.fieldGroupList.length == 0) {
+      this._FieldAbstractsService.getfieldGroupList();
+    }
+  }
+  /**表单实体 */
+  _Entity: FormGroup | undefined;
+  @Input()
+  public set Entity(v: FormGroup | undefined) {
+    if (v) {
+      this._Entity = v;
+      this.dataLoaded();
+    }
+  }
+  get formControlName() {
+    return this._Entity.get('formControlName');
+  }
+  /**选择的表单信息 */
+  _selected_copy: any;
+  _selected: any;
+  @Input()
+  public set selected(v: any) {
+    if (v) {
+      
+      // let MatrixBlockTypes=v.formConfiguration?.MatrixBlockTypes
+      // if(MatrixBlockTypes){
+      //   v.formConfiguration.MatrixBlockTypes=this.convertKeysToCamelCase(MatrixBlockTypes);
+      // }
+      this._selected = v || '';
+      this._selected_copy = v;
+    }
+  }
+
+
+
+
+  async dataLoaded() {
+    if (this._FieldAbstractsService.fromControlList.length == 0) {
+      await this._FieldAbstractsService.getFromControlList();
+    }
+
+    if (this._Entity) {
+      if (!this.formControlName.value) {
+        this._Entity.patchValue({
+          formControlName: this._FieldAbstractsService.fromControlList[0]?.name,
+        });
+      }
+      this._Entity.setControl(
+        'name',
+        new FormControl(this.nameInput.value || '', {
+          validators: Validators.required,
+          asyncValidators: [this.repetitionAsyncValidator()],
+          updateOn: 'change',
+        })
+      );
+      setTimeout(() => {
+        this.submitclick.nativeElement.click();
+      }, 0);
+    }
+  }
+
+  /**name表单控件 */
+  get nameInput() {
+    return this._Entity.get('name');
+  }
+
+  nameInputBlur(event) {
+    let value = event.target.value;
+    this.nameInput.patchValue(value);
+  }
+
+  /**字段标签input失去标点生成字段名字 */
+  disPlayNameInputBlur(event) {
+    let value = event.target.value;
+    let pinyin = this._CmsApiService.chineseToPinyin(value);
+    let nameInput = this.nameInput;
+    if (nameInput.value) return;
+    nameInput.patchValue(pinyin);
+  }
+  /**定义异步验证方法 */
+  repetitionAsyncValidator() {
+    return (
+      ctrl: AbstractControl
+    ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
+      return new Promise(resolve => {
+        if (ctrl.value == this._selected?.name || !ctrl.value) {
+          resolve(null);
+          return;
+        }
+        this._FieldAdminService.nameExists(ctrl.value).subscribe(res => {
+          if (res) {
+            resolve({
+              repetition: this._LocalizationService.instant(
+                `Cms::FieldName{0}AlreadyExist`,
+                ctrl.value
+              ),
+            });
+          } else {
+            resolve(null);
+          }
+        });
+      });
+    };
+  }
+
+  formControlNameChange(event) {
+    console.log('event',event,this._Entity.value.formControlName,this._Entity)
+  }
+}

package/src/lib/components/admin/fields/create-or-update-field-input-base.ts

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

package/src/lib/components/admin/fields/edit-field.component.html

@@ -0,0 +1,14 @@
+<form class="row g-3 needs-validation" [formGroup]="newEntity" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}" (submit)="save()">
+    <abp-page [title]="'Cms::EditField' | abpLocalization" [toolbar]="true">
+        <div class="create-field-page">
+            <button type="submit" style="display: none;" #submitclick></button>
+            <div class="card">
+                <div class="card-body">
+                    <ng-container *ngIf="newEntity&&fieldDetails">
+                        <cms-create-or-edit-field  [selected]="fieldDetails"  [Entity]="newEntity"></cms-create-or-edit-field>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+    </abp-page>
+</form>

package/src/lib/components/admin/fields/edit-field.component.spec.ts

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

package/src/lib/components/admin/fields/edit-field.component.ts

@@ -0,0 +1,112 @@
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
+import { LocalizationService } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewChild, ElementRef, inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { FieldAbstractsService, CmsApiService } from '../../../services';
+import { ECmsComponent } from '../../../enums';
+import { UpdateListService } from '@dignite-ng/expand.core';
+import { CreateOrUpdateFieldInputBase } from './create-or-update-field-input-base';
+import { ValidatorsService } from '@dignite-ng/expand.core';
+import { finalize } from 'rxjs';
+import { FieldAdminService } from '../../../proxy/dignite/cms/admin/fields';
+
+@Component({
+  selector: 'cms-edit-field',
+  templateUrl: './edit-field.component.html',
+  styleUrls: ['./edit-field.component.scss'],
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.FieldsEdit,
+    },
+  ],
+})
+export class EditFieldComponent implements OnInit {
+  constructor(
+    private fb: FormBuilder,
+    public _FieldAbstractsService: FieldAbstractsService,
+    public _FieldAdminService: FieldAdminService,
+    private route: ActivatedRoute,
+    private toaster: ToasterService,
+    public _location: Location,
+    public _LocalizationService: LocalizationService,
+    public _CmsApiService: CmsApiService
+  ) {}
+  private _UpdateListService = inject(UpdateListService);
+  private _ValidatorsService = inject(ValidatorsService);
+  /**表单实体 */
+  newEntity: FormGroup | undefined;
+
+  /**字段id */
+  fieldId: string = '';
+
+  /**字段详情 */
+  fieldDetails: any;
+
+  isSubmit: boolean = false;
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  async ngOnInit(): Promise<void> {
+    const _fieldId = this.route.snapshot.params.id;
+    if (_fieldId) {
+      this.fieldId = _fieldId;
+      this.newEntity = this.fb.group(new CreateOrUpdateFieldInputBase());
+      await Promise.all([this._FieldAbstractsService.getFromControlList(), this.getFieldEdit()]);
+      this.newEntity.patchValue({
+        ...this.fieldDetails,
+        formConfiguration: this.fieldDetails.formConfiguration,
+      });
+    }
+  }
+
+  /**获取字段详情 */
+  getFieldEdit() {
+    return new Promise((resolve, reject) => {
+      this._FieldAdminService.get(this.fieldId).subscribe(res => {
+        res.groupId = res.groupId ? res.groupId : '';
+        this.fieldDetails = res;
+        resolve(res);
+      });
+    });
+  }
+  
+
+  /**触发提交按钮 */
+  submitclickBtn() {
+    this.submitclick.nativeElement.click();
+  }
+
+  /**保存表单 */
+  save() {
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.newEntity);
+    if (this._ValidatorsService.isCheckForm(this.formValidation, 'Cms')) return;
+    if (this.isSubmit) return;
+    this.isSubmit = true;
+    let input = this.newEntity.value;
+
+    if (!this.newEntity.valid) return;
+    this._FieldAdminService
+      .update(this.fieldId, input)
+      .pipe(
+        finalize(() => {
+          this.isSubmit = false;
+        })
+      )
+      .subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+        this._location.back();
+        this._UpdateListService.updateList();
+      });
+  }
+}

package/src/lib/components/admin/fields/field-group.component.html

@@ -0,0 +1,69 @@
+<div class="card-header px-2 py-sm-2 d-flex justify-content-between align-items-center">
+    <h6 class="h6 mb-0">{{'Cms::FieldGroup' | abpLocalization}}</h6>
+    <button type="button" class="btn btn-link btn-sm ms-2"><i class="fas fa-plus-circle" aria-hidden="true"
+            (click)="createGroupBtn()"></i></button>
+</div>
+<div class="card-body p-0">
+    <div class="container-height overflow-auto">
+        <ul class="list-group list-group-flush">
+            <li class="list-group-item list-group-item-action active" [class.active]="fieldGroupId===''"
+                (click)="fieldGroupChange('')">{{'Cms::AllFields' | abpLocalization}}</li>
+            <ng-container *ngFor="let item of _FieldAbstractsService.fieldGroupList">
+                <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+                    [class.active]="fieldGroupId===item.id" (click)="fieldGroupChange(item.id)">
+                    <div>{{item.name}}</div>
+                    <div *ngIf="fieldGroupId===item.id">
+                        <i class="fas fa-trash px-1" role="button" (click.stop)="deleteGroupbtn(item)"></i>
+                        <i class="fas fa-edit px-1" role="button" (click.stop)="editGroupBtn(item.name)"></i>
+                    </div>
+                </li>
+            </ng-container>
+        </ul>
+    </div>
+</div>
+
+<abp-modal [(visible)]="createGroupOpen" [busy]="modalBusy" (visibleChange)="createGroupVisibleChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{'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>
+        <form *ngIf="createForm; else loaderRef" [formGroup]="createForm" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}" (submit)="createSave()">
+            <div class="mb-3">
+                <label for="exampleFormControlInput1" class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                <input type="text" class="form-control" id="exampleFormControlInput1" formControlName="name"
+                    placeholder="">
+            </div>
+        </form>
+    </ng-template>
+
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check" [disabled]="createForm?.invalid" (click)="createSave()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>
+
+<abp-modal [(visible)]="editGroupOpen" [busy]="modalBusy" (visibleChange)="editGroupVisibleChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{'AbpUi::Edit' | 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>
+        <form *ngIf="editGroupForm; else loaderRef" [formGroup]="editGroupForm" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}" (submit)="editSave()">
+            <div class="mb-3">
+                <label for="exampleFormControlInput1" class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                <input type="text" class="form-control" id="exampleFormControlInput1" formControlName="name"
+                    placeholder="">
+            </div>
+        </form>
+    </ng-template>
+
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check" [disabled]="editGroupForm?.invalid" (click)="editSave()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

package/src/lib/components/admin/fields/field-group.component.spec.ts

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

package/src/lib/components/admin/fields/field-group.component.ts

@@ -0,0 +1,151 @@
+import { Component, EventEmitter, inject, OnInit, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
+import { finalize} from 'rxjs/operators';
+import { FieldAbstractsService } from '../../../services/field-abstracts.service';
+import { LocalizationService } from '@abp/ng.core';
+import { ValidatorsService } from '@dignite-ng/expand.core';
+import { FieldGroupAdminService } from '../../../proxy/dignite/cms/admin/fields';
+
+@Component({
+  selector: 'cms-field-group',
+  templateUrl: './field-group.component.html',
+  styleUrls: ['./field-group.component.scss']
+})
+export class FieldGroupComponent implements OnInit {
+  constructor(
+    private fb: FormBuilder,
+    private _FieldGroupAdminService: FieldGroupAdminService,
+    private toaster: ToasterService,
+    private confirmation: ConfirmationService,
+    public _FieldAbstractsService: FieldAbstractsService,
+    public _LocalizationService: LocalizationService,
+  ) { }
+
+
+  /**创建分组表单 */
+  createForm: FormGroup | undefined;
+
+  /** 编辑分组表单*/
+  editGroupForm: FormGroup | undefined;
+
+  /**表单已存在的值 */
+  selected = {} as any;
+
+  /**选择的字段分组id */
+  fieldGroupId: string | undefined = ''
+
+  /**创建分组模态框状态 */
+  createGroupOpen = false
+
+  /**用于确定模态的繁忙状态是否为真 */
+  modalBusy: boolean = false
+
+  /**编辑分组模态框状态 */
+  editGroupOpen: boolean = false
+
+  /**点击分组回调 */
+  @Output() OnGroupClickBack = new EventEmitter();
+
+  ngOnInit(): void {
+    this._FieldAbstractsService.getfieldGroupList()
+  }
+
+  /**创建字段分组 */
+  createGroupBtn() {
+    this.createGroupOpen = true;
+    this.formValidation='';
+    this.createForm = this.fb.group({
+      name: ['', [Validators.required]],
+    })
+  }
+
+  /**创建分组模态框状态改变 */
+  createGroupVisibleChange(event) {
+    if (!event) {
+      return
+    }
+  }
+
+  /**编辑字段分组 */
+  editGroupBtn(itemName: string) {
+    this.editGroupOpen = true;
+    this.formValidation='';
+    this.editGroupForm = this.fb.group({
+      name: [itemName, [Validators.required]],
+    })
+  }
+
+  /**编辑分组模态框状态改变 */
+  editGroupVisibleChange(event) {
+    if (!event) {
+      return
+    }
+  }
+  private _ValidatorsService = inject(ValidatorsService);
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+
+
+  /**创建字段分组保存 */
+  createSave() {
+    let input = this.createForm.value;
+    this.modalBusy = true;
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.createForm);
+    if (this._ValidatorsService.isCheckForm(this.formValidation,'Cms')) return;
+    this._FieldGroupAdminService.create(input).pipe(finalize(() => {
+      this.modalBusy = false;
+      this.createGroupOpen = false;
+      this.formValidation='';
+    })).subscribe(res => {
+      this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+      this._FieldAbstractsService.getfieldGroupList()
+    })
+  }
+
+  /**编辑字段分组保存 */
+  editSave() {
+    let input = this.editGroupForm.value;
+    this.modalBusy = true;
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.createForm);
+    if (this._ValidatorsService.isCheckForm(this.formValidation,'Cms')) return;
+    this._FieldGroupAdminService.update(this.fieldGroupId, input).pipe(finalize(() => {
+      this.modalBusy = false;
+      this.editGroupOpen = false;
+      this.formValidation='';
+    })).subscribe(res => {
+      this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+      this._FieldAbstractsService.getfieldGroupList()
+    })
+  }
+
+  /**删除字段分组1 */
+  deleteGroupbtn(fieldGroupitem: any) {
+    this.confirmation.warn(
+      fieldGroupitem.name,
+      this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`),
+    ).subscribe((status: Confirmation.Status) => {
+      if (status == 'confirm') {
+        this._FieldGroupAdminService.delete(this.fieldGroupId).pipe(finalize(() => {
+        })).subscribe(res => {
+          this.toaster.success(this._LocalizationService.instant(`AbpUi::DeletedSuccessfully`));
+          this.fieldGroupId = ''
+          this._FieldAbstractsService.getfieldGroupList()
+        })
+      }
+    });
+  }
+
+  /**字段分组改变 */
+  fieldGroupChange(event) {
+    this.fieldGroupId = event
+    this.OnGroupClickBack.emit(event)
+  }
+
+}
+
+

package/src/lib/components/admin/fields/fields.component.html

@@ -0,0 +1,25 @@
+<abp-page [title]="'Cms::Fields' | abpLocalization" [toolbar]="true">
+    <div class="fields-page">
+        <div class="row ">
+            <div class="col-3">
+                <div class="card mb-0" style="height: 100%;">
+                    <cms-field-group (OnGroupClickBack)="fieldGroupChange($event)"></cms-field-group>
+                </div>
+            </div>
+            <div class="col-9">
+                <div class="card mb-0">
+                    <div class="card-header px-2 py-sm-2   border-bottom">
+                        <div class="input-group">
+                            <input type="text" class="form-control" [(ngModel)]="filters.filter"
+                                [placeholder]="'AbpUi::Search' | abpLocalization">
+                            <button class="btn btn-primary px-3" type="button" id="button-addon2"
+                                (click)="list.get()"><i class="fa fa-search"></i></button>
+                        </div>
+                    </div>
+                    <abp-extensible-table [data]="data?.items" [recordsTotal]="data?.totalCount" [list]="list"></abp-extensible-table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</abp-page>

package/src/lib/components/admin/fields/fields.component.scss

@@ -0,0 +1 @@
+::ng-deep.fields-page{.dignite_page{background:transparent}.list-group-flush>.list-group-item:first-child{border-top-width:var(--bs-list-group-border-width)}.container-height{height:calc(100vh - 200px)}}

package/src/lib/components/admin/fields/fields.component.spec.ts

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