@dignite-ng/expand.cms 0.0.19 → 0.0.20

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

@@ -0,0 +1,293 @@
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
+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, ViewContainerRef, ElementRef } from '@angular/core';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, NgForm, 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: [
+      // [Required]
+      ListService,
+      // [Optional]
+      // Provide this token if you want a different debounce time.
+      // Default is 300. Cannot be 0. Any value below 100 is not recommended.
+      { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.Sites,
+    },
+  ]
+})
+export class SitesComponent implements OnInit {
+  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.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, Validators } 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,20 @@
+
+::ng-deep .entry-control-page {
+  .form-select {
+    padding: 0;
+  }
+  nz-select {
+    width: 100%;
+    .ant-select-selector {
+      background: transparent  !important;
+      border: none  !important;
+      padding: 0.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,110 @@
+import { Component, ElementRef, Input, ViewChild, ViewContainerRef, 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';
+import { ActivatedRoute, Router } from '@angular/router';
+
+
+@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'