@dignite-ng/expand.cms 0.0.30 → 0.0.33

package/src/lib/components/admin/sites/sites.component.ts

@@ -0,0 +1,250 @@
+import { ABP, ConfigStateService, LIST_QUERY_DEBOUNCE_TIME, ListService, LocalizationService, PagedResultDto } from '@abp/ng.core';
+import { ToasterService, ConfirmationService, Confirmation } from '@abp/ng.theme.shared';
+import { Component, ViewChild, OnInit,  ElementRef } from '@angular/core';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
+// import { GetSitesInput, SiteDto, SiteAdminService } from '../../../proxy/admin/sites';
+import { ColumnMode } from "@swimlane/ngx-datatable";
+import { finalize } from 'rxjs/operators';
+import { CreateOrUpdateSitesInputBase } from './create-or-update-sites-input-base';
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.theme.shared/extensions';
+import { ECmsComponent } from '../../../enums';
+import { CmsApiService } from '../../../services/cms-api.service';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'cms-sites',
+  templateUrl: './sites.component.html',
+  styleUrls: ['./sites.component.scss'],
+  providers: [
+      ListService,
+      { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.Sites,
+    },
+  ]
+})
+export class SitesComponent  {
+  // constructor(
+  //   public readonly list: ListService,
+  //   // private _SiteAdminService: SiteAdminService,
+  //   private toaster: ToasterService,
+  //   private confirmation: ConfirmationService,
+  //   private fb: FormBuilder,
+  //   private configState: ConfigStateService,
+  //   private _LocalizationService: LocalizationService,
+  //   private _CmsApiService: CmsApiService,
+  // ) {}
+  // /**创建站点模态框状态 */
+  // createSitesOpen: boolean = false
+  // /**用于确定模态的繁忙状态是否为真 */
+  // modalBusy: boolean = false
+  // /**创建站点表单 */
+  // createOrEditForm: FormGroup | undefined;
+  // get languagesInput() {
+  //   return this.createOrEditForm.get('languages').value
+  // }
+  // /**语言列表 */
+  // languages: any[]
+  // /**站点给定的表单值 */
+  // selected: any
+  // /**表单控件模板-动态赋值表单控件 */
+  // @ViewChild('createModalSubmit', { static: false }) createModalSubmit: ElementRef;
+  // ColumnMode = ColumnMode;
+  // data: PagedResultDto<SiteDto> = {
+  //   items: [],
+  //   totalCount: 0,
+  // };
+  // filters = {} as GetSitesInput;
+  // ngOnInit(): void {
+  //   this.hookToQuery()
+  // }
+  // hookToQuery() {
+  //   const getData = (query: ABP.PageQueryParams) => this._SiteAdminService.getList({
+  //     ...query,
+  //     ...this.filters,
+  //   });
+  //   const setData = (list: PagedResultDto<SiteDto>) => (this.data = list);
+  //   this.list.hookToQuery(getData).subscribe(setData);
+  // }
+  // /**删除字段 */
+  // deletefield(row: any) {
+  //   this.confirmation.warn(
+  //     row.displayName,
+  //     this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`),
+  //   ).subscribe((status: Confirmation.Status) => {
+  //     if (status == 'confirm') {
+  //       this._SiteAdminService.delete(row.id).pipe(finalize(() => {
+  //       })).subscribe(res => {
+  //         this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+  //         this.list.get()
+  //       })
+  //     }
+  //   });
+  // }
+  // /**创建站点模态框状态改变 */
+  // createGroupVisibleChange(event) {
+  //   if (!event) {
+  //     this.selected = ''
+  //     return
+  //   }
+  // }
+  // /**选择语言改变 */
+  // languagesChange(event) {
+  //   let checked = event.target.checked
+  //   let value = event.target.value
+  //   this.languages.forEach(el => {
+  //     el.ischecked = el.cultureName === value ? checked : el.ischecked;
+  //   })
+  //   this.setFromLangguages()
+  // }
+  // /**设置默认语言 */
+  // setDefault(items) {
+  //   this.languages.forEach(el => {
+  //     el.isDefault = el.cultureName === items.cultureName;
+  //   })
+  //   this.setFromLangguages()
+  // }
+  // /**设置表单中的语言 */
+  // setFromLangguages() {
+  //   let languagesSelect = this.languages.filter(el => el.ischecked == true)
+  //   this.createOrEditForm.patchValue({
+  //     languages: languagesSelect
+  //   })
+  //   if (languagesSelect.length == 0) {
+  //     this.languages.forEach(el => {
+  //       el.isDefault = false
+  //     })
+  //   }
+  // }
+  // /**表单保存提交 */
+  // createOrEditSave() {
+  //   if (!this.createOrEditForm.valid) return
+  //   if (this.selected) {
+  //     return this.EditSave()
+  //   }
+  //   this.createSave()
+  // }
+  // /**创建站点保存 */
+  // createSave() {
+  //   let input = this.createOrEditForm.value
+  //   this.modalBusy = true
+  //   if (!this.createOrEditForm.valid) return
+  //   this._SiteAdminService.create(input).pipe(finalize(() => {
+  //     this.modalBusy = false
+  //     this.createSitesOpen = false
+  //   })).subscribe(res => {
+  //     this.toaster.success(this._LocalizationService.instant(`CmsKit::SavedSuccessfully`));
+  //     this.list.get()
+  //   })
+  // }
+  // /**编辑站点保存 */
+  // EditSave() {
+  //   let input = this.createOrEditForm.value
+  //   this.modalBusy = true
+  //   this._SiteAdminService.update(this.selected.id, input).pipe(finalize(() => {
+  //     this.modalBusy = false
+  //     this.createSitesOpen = false
+  //   })).subscribe(res => {
+  //     this.toaster.success(this._LocalizationService.instant(`CmsKit::SavedSuccessfully`));
+  //     this.list.get()
+  //   })
+  // }
+  // /**创建站点按钮 */
+  // createSitesBtn() {
+  //   this.createSitesOpen = true
+  //   this.createOrEditForm = this.fb.group(new CreateOrUpdateSitesInputBase())
+  //   this.setAsyncValidatorsFn()
+  //   this.languages = this.configState.getDeep('localization.languages')
+  //   this.languages.forEach((el, index) => {
+  //     el.isDefault = index === 0
+  //     el.ischecked = index === 0
+  //   })
+  //   this.setFromLangguages()
+  // }
+  // /**编辑站点按钮 */
+  // EditSitesBtn(rows) {
+  //   this.createSitesOpen = true
+  //   this.languages = this.configState.getDeep('localization.languages')
+  //   this._SiteAdminService.get(rows.id).subscribe(res => {
+  //     this.selected = rows
+  //     this.createOrEditForm = this.fb.group(new CreateOrUpdateSitesInputBase())
+  //     this.createOrEditForm.patchValue(rows)
+  //     this.setAsyncValidatorsFn()
+  //     // 更新语言和默认状态  
+  //     this.updateLanguages(res.languages);
+  //     // 设置表单语言  
+  //     this.setFromLangguages()
+  //   })
+  // }
+  // /**设置字段控件异步验证 */
+  // setAsyncValidatorsFn() {
+  //   this.createOrEditForm.setControl('name', new FormControl(this.nameInput.value || '', {
+  //     validators: Validators.required,
+  //     asyncValidators: this.nameRepetitionAsyncValidator(),
+  //     updateOn: 'blur'
+  //   }))
+  // }
+  // /**更新语言和默认状态 */
+  // updateLanguages(siteLanguages) {
+  //   this.languages.forEach(language => {
+  //     const siteLanguage = siteLanguages.find(sl => sl.cultureName === language.cultureName);
+  //     if (siteLanguage) {
+  //       language.ischecked = true;
+  //       language.isDefault = siteLanguage.isDefault;
+  //     }
+  //   });
+  // }
+  // get nameInput() {
+  //   return this.createOrEditForm.get('name')
+  // }
+  // get hostInput() {
+  //   return this.createOrEditForm.get('host')
+  // }
+  // /**字段标签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)
+  // }
+  // /**name定义自定义异步验证 */
+  // nameRepetitionAsyncValidator() {
+  //   return (ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
+  //     return new Promise(resolve => {
+  //       let subslug = this.createOrEditForm?.get('name').value
+  //       if (subslug == this.selected?.name) {
+  //         resolve(null);
+  //         return
+  //       }
+  //       this._SiteAdminService.nameExists(subslug).subscribe(res => {
+  //         if (res) {
+  //           resolve({ repetition: this._LocalizationService.instant(`Cms::SiteName{0}AlreadyExist`, ctrl.value) });
+  //         } else {
+  //           resolve(null);
+  //         }
+  //       })
+  //     });
+  //   };
+  // }
+  // /**host定义自定义异步验证 */
+  // hostRepetitionAsyncValidator() {
+  //   return (ctrl: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
+  //     return new Promise(resolve => {
+  //       let subslug = this.createOrEditForm?.get('host').value
+  //       if (subslug == this.selected?.host || subslug == 'https://') {
+  //         resolve(null);
+  //         return
+  //       }
+  //       this._SiteAdminService.hostExists(subslug).subscribe(res => {
+  //         if (res) {
+  //           resolve({ repetition: this._LocalizationService.instant(`Cms::SiteHost{0}AlreadyExist`, ctrl.value) });
+  //         } else {
+  //           resolve(null);
+  //         }
+  //       })
+  //     });
+  //   };
+  // }
+}

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

@@ -0,0 +1,36 @@
+<div class="mb-2">
+    <label class="form-label">{{'Cms::Sites' | abpLocalization}}</label>
+    <select class="form-select col-auto"  [(ngModel)]="siteId" (change)="siteIdChange()">
+        <ng-container *ngFor="let item of siteList">
+            <option [value]="item.id">{{item.displayName}}</option>
+        </ng-container>
+    </select>
+</div>
+<form [formGroup]="_Entity">
+    <div formGroupName="formConfiguration">
+        
+        <div class="mb-2">
+            <label class="form-label">{{'Cms::Sections' | abpLocalization}}</label>
+            <select class="form-select col-auto" formControlName="Entry.SectionId">
+                <ng-container *ngFor="let item of SiteOfSectionList">
+                    <option [value]="item.id">{{item.displayName}}</option>
+                </ng-container>
+            </select>
+        </div>
+
+        <div class="mb-2">
+            <div class="form-check form-check-inline">
+                <input class="form-check-input" type="checkbox" formControlName="Entry.Multiple" id="Multiple">
+                <label class="form-check-label" for="Multiple">
+                    {{'Cms::Multiple' | abpLocalization}}
+                </label>
+            </div>
+        </div>
+        <div class="mb-2">
+            <label class="form-label">{{'Cms::Placeholder' | abpLocalization}}</label>
+            <input type="text" class="form-control" formControlName="Entry.Placeholder">
+        </div>
+        <button type="submit" (abpInit)="submitclick?.nativeElement?.click()" style="display: none;"
+            #submitclick></button>
+    </div>
+</form>

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

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

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

@@ -0,0 +1,115 @@
+import { AfterContentInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import { EntryConfig } from './entry-config';
+// import { SiteAdminService } from '../../../proxy/admin/sites';
+import { SectionAdminService } from '../../../proxy/admin/sections';
+@Component({
+  selector: 'cms-entry-config',
+  templateUrl: './entry-config.component.html',
+  styleUrls: ['./entry-config.component.scss']
+})
+export class EntryConfigComponent implements AfterContentInit{
+  constructor(
+    private fb: FormBuilder,
+    // private _SiteAdminService: SiteAdminService,
+    private _SectionAdminService: SectionAdminService,
+  ) {
+  }
+  /**表单控件类型 */
+  _type: any
+  @Input()
+  public set type(v: any) {
+    if (v == this._type) return
+
+    this._type = v
+  }
+  /**表单实体 */
+  _Entity: FormGroup | undefined
+  @Input()
+  public set Entity(v: FormGroup) {
+    this._Entity = v;
+  }
+  /**选择的表单信息 */
+  _selected: any
+  @Input()
+  public set selected(v: any) {
+    this._selected = v
+  }
+  /**语言 */
+  _culture: any
+  @Input()
+  public set culture(v: any) {
+    this._culture = v
+  }
+  get formConfiguration() {
+    return this._Entity.get('formConfiguration') as FormGroup
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /**站点列表 */
+  siteList: any[any] = []
+
+  /**选择的站点id */
+  // siteId: string = ''
+  siteId: any = new FormControl('')
+  /**站点下的版块 */
+  SiteOfSectionList: any[any] = []
+
+  ngAfterContentInit(): void {
+    //Called after ngOnInit when the component's or directive's content has been initialized.
+    //Add 'implements AfterContentInit' to the class.
+    this.dataLoaded(2)
+  }
+
+  async dataLoaded(val) {
+    if (this._Entity && this._type) {
+      await this.AfterInit()
+      this.submitclick.nativeElement.click();
+    }
+  }
+
+  AfterInit() {
+    return new Promise(async (resolve, rejects) => {
+      this._Entity.setControl('formConfiguration', this.fb.group(new EntryConfig()))
+      // await this.getsiteList()
+      await this.getSiteOfSectionList()
+      if (this._selected) {
+        this.formConfiguration.patchValue({
+          ...this._selected.formConfiguration
+        })
+      }
+      resolve(true)
+    })
+  }
+
+  /**获取站点列表 */
+  // getsiteList() {
+  //   return new Promise((resolve, rejects) => {
+  //     this._SiteAdminService.getList({}).subscribe(res => {
+  //       this.siteList = res.items
+  //       this.siteId = res.items[0]?.id || ''
+  //       resolve(res.items)
+  //     })
+  //   })
+  // }
+  /**获取站点下的版块 */
+  getSiteOfSectionList() {
+    return new Promise((resolve, rejects) => {
+      this._SectionAdminService.getList({
+        maxResultCount: 1000,
+        // siteId: this.siteId
+      }).subscribe(res => {
+        this.SiteOfSectionList = res.items
+        this.formConfiguration.patchValue({
+          'Entry.SectionId': res.items[0]?.id || ''
+        })
+        resolve(res.items)
+      })
+    })
+  }
+
+  /**切换站点 */
+  async siteIdChange() {
+    await this.getSiteOfSectionList()
+  }
+}

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

@@ -0,0 +1,24 @@
+import { FormControl, Validators } from "@angular/forms";
+
+export class EntryConfig {
+
+
+    /**多选 */
+    'Entry.Multiple': any = [false, []];
+    /**占位符 */
+    'Entry.Placeholder': any = ['', []];
+    /**版块id */
+    'Entry.SectionId': any = ['', []];
+
+    constructor(data?: EntryConfig) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+
+    }
+}

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

@@ -0,0 +1,26 @@
+<form [formGroup]="_entity">
+    <div [formGroupName]="_parentFiledName" class="entry-control-page">
+        <div class="mb-2">
+            <label class="form-label" *ngIf="_fields.displayName">{{ _fields.displayName }}</label>
+            <ng-container *ngIf="_fields.field.formConfiguration['Entry.Multiple']; else elseTemplate">
+                <div class="form-select">
+                    <nz-select [nzMaxTagCount]="5" (nzOnSearch)="SelectChange($event)" nzShowSearch  nzMode="multiple"  [nzPlaceHolder]="_fields.field.formConfiguration['Entry.Placeholder']"
+                    formControlName="{{_fields.field.name}}">
+                        <nz-option *ngFor="let item of listOfOption" [nzLabel]="item.title" [nzValue]="item.id"></nz-option>
+                    </nz-select>
+                </div>
+            </ng-container>
+            <ng-template #elseTemplate>
+                <div class="form-select">
+                    <nz-select nzShowSearch (nzOnSearch)="SelectChange($event)" [nzMaxMultipleCount]="1"  nzMode="multiple" [nzPlaceHolder]="_fields.field.formConfiguration['Entry.Placeholder']"
+                    formControlName="{{_fields.field.name}}">
+                        <nz-option *ngFor="let item of listOfOption" [nzLabel]="item.title" [nzValue]="item.id"></nz-option>
+                    </nz-select>
+                </div>
+            </ng-template>
+
+            <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/entry/entry-control.component.scss

@@ -0,0 +1 @@
+::ng-deep .entry-control-page{.form-select{padding:0}nz-select{width:100%;.ant-select-selector{background:transparent!important;border:none!important;padding:.275rem 1.25rem!important;box-shadow:none!important;height:auto!important}.anticon-search,.anticon-down{display:none}}}

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

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

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

@@ -0,0 +1,109 @@
+import { Component, ElementRef, Input, ViewChild,  inject } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+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;
+    if (v) this.dataLoaded()
+  }
+
+  /**父级字段名称，用于为表单设置控件赋值 */
+  _parentFiledName: any
+  @Input()
+  public set parentFiledName(v: any) {
+    this._parentFiledName = v;
+    if (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) {
+    if (v) {
+      this._culture = v ;
+      this.dataLoaded()
+    }
+  }
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  extraProperties: FormGroup | undefined
+
+  /** */
+  listOfOption: any[] = [];
+  async dataLoaded() {
+    if (this._fields && this._entity && this._parentFiledName&&this._culture) {
+      await this.AfterInit()
+      await this.getEntryAssignList()
+      this.submitclick.nativeElement.click();
+    }
+  }
+
+  AfterInit() {
+    return new Promise((resolve, rejects) => {
+      let ValidatorsArray = []
+      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 => {
+        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 FieldControlGroup: 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'