@dignite-ng/expand.cms 0.0.50 → 0.0.52

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

@@ -0,0 +1,302 @@
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
+import {
+  ABP,
+  LIST_QUERY_DEBOUNCE_TIME,
+  ListService,
+  LocalizationService,
+  PagedResultDto,
+} from '@abp/ng.core';
+import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { ECmsComponent } from '../../../enums';
+import { ToasterService, ConfirmationService, Confirmation } from '@abp/ng.theme.shared';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { SectionAdminService, EntryTypeAdminService, GetSectionsInput, SectionDto } from '../../../proxy/admin/sections';
+import { CmsApiService } from '../../../services';
+import { UpdateListService } from '../../../services/update-list.service';
+
+import { ColumnMode } from '@swimlane/ngx-datatable';
+import { SectionType, sectionTypeOptions } from '../../../proxy/sections';
+import { finalize, Observable } from 'rxjs';
+import { CreateOrUpdateSectionsInputBase } from './create-or-update-sections-input-base';
+import { ValidatorsService } from '../../../services/validators.service';
+
+
+@Component({
+  selector: 'cms-sections',
+  templateUrl: './sections.component.html',
+  styleUrls: ['./sections.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.Sections,
+    },
+  ],
+})
+export class SectionsComponent implements OnInit {
+
+  constructor(
+    public readonly list: ListService,
+    private _SectionAdminService: SectionAdminService,
+    private toaster: ToasterService,
+    private confirmation: ConfirmationService,
+    private fb: FormBuilder,
+    public _EntryTypeAdminService: EntryTypeAdminService,
+    public _LocalizationService: LocalizationService,
+    public _CmsApiService: CmsApiService
+  ) {}
+  private _UpdateListService = inject(UpdateListService);
+  siteList: any[] = [];
+  ColumnMode = ColumnMode;
+  data: PagedResultDto<SectionDto> = { items: [], totalCount: 0 };
+  filters = {} as GetSectionsInput;
+  hookToQuery() {
+    const getData = (query: ABP.PageQueryParams) =>
+      this._SectionAdminService.getList({ ...query, ...this.filters });
+    const setData = (list: PagedResultDto<SectionDto>) => (this.data = list);
+    this.list.hookToQuery(getData).subscribe(setData);
+  }
+  async ngOnInit(): Promise<void> {
+    this.hookToQuery();
+    this._UpdateListService.updateListEvent.subscribe(() => {
+      this.list.get();
+    });
+  }
+  siteIdChange() {
+    this.list.page = 0;
+    this.list.get();
+  }
+  visibleOpen: boolean = false;
+  modalBusy: boolean = false;
+  createOrEditForm: FormGroup | undefined;
+  selected: any;
+  _SectionType = SectionType;
+  _sectionTypeOptions = sectionTypeOptions;
+  @ViewChild('createOrEditModalSubmitBtn', { static: false })
+  createOrEditModalSubmitBtn: ElementRef;
+  VisibleChange(event) {
+    if (!event) {
+      this.selected = '';
+      return;
+    }
+  }
+  createSectionBtn() {
+    this.visibleOpen = true;
+    this.createOrEditForm = this.fb.group(new CreateOrUpdateSectionsInputBase());
+    this.setAsyncValidatorsFn();
+  }
+  editSectionBtn(row) {
+    this.visibleOpen = true;
+    this.createOrEditForm = this.fb.group(new CreateOrUpdateSectionsInputBase());
+    this.setAsyncValidatorsFn();
+    this._SectionAdminService.get(row.id).subscribe(res => {
+      this.createOrEditForm.patchValue(res);
+      this.selected = res;
+    });
+  }
+  deleteEntryType(row) {
+    this.confirmation
+      .warn(row.displayName, this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`))
+      .subscribe((status: Confirmation.Status) => {
+        if (status == 'confirm') {
+          this._EntryTypeAdminService
+            .delete(row.id)
+            .pipe(finalize(() => {}))
+            .subscribe(res => {
+              this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+              this.list.get();
+            });
+        }
+      });
+  }
+  createOrEditSave() {
+    if (this.selected) {
+      return this.EditSave();
+    }
+    this.createSave();
+  }
+  private _ValidatorsService = inject(ValidatorsService);
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+
+  createSave() {
+    let input = this.createOrEditForm.value;
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.createOrEditForm);
+    if (this._ValidatorsService.isCheckForm(this.formValidation,'Cms')) return;
+    if (!this.createOrEditForm.valid) return;
+    this.modalBusy = true;
+    this._SectionAdminService
+      .create(input)
+      .pipe(
+        finalize(() => {
+          this.modalBusy = false;
+          this.visibleOpen = false;
+        })
+      )
+      .subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+        this.list.get();
+      });
+  }
+  EditSave() {
+    setTimeout(() => {
+      let input = this.createOrEditForm.value;
+      input.concurrencyStamp = this.selected.concurrencyStamp;
+      this.formValidation = this._ValidatorsService.getFormValidationStatus(this.createOrEditForm);
+      if (this._ValidatorsService.isCheckForm(this.formValidation,'Cms')) return;
+      if (!this.createOrEditForm.valid) return;
+      this.modalBusy = true;
+      this._SectionAdminService
+        .update(this.selected.id, input)
+        .pipe(
+          finalize(() => {
+            this.modalBusy = false;
+            this.visibleOpen = false;
+          })
+        )
+        .subscribe(res => {
+          this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+          this.list.get();
+        });
+    }, 100);
+  }
+  deletefield(row) {
+    this.confirmation
+      .warn(row.displayName, this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`))
+      .subscribe((status: Confirmation.Status) => {
+        if (status == 'confirm') {
+          this._SectionAdminService
+            .delete(row.id)
+            .pipe(finalize(() => {}))
+            .subscribe(res => {
+              this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+              this.list.get();
+            });
+        }
+      });
+  }
+  get displayNameInput() {
+    return this.createOrEditForm.get('displayName');
+  }
+  get nameInput() {
+    return this.createOrEditForm.get('name');
+  }
+  get routeInput() {
+    return this.createOrEditForm.get('route');
+  }
+  get templateInput() {
+    return this.createOrEditForm.get('template');
+  }
+  get typeInput() {
+    return this.createOrEditForm.get('type');
+  }
+  radiochange() {
+    this.routeInput.patchValue(this.routeInput.value);
+  }
+  disPlayNameInputBlur(event) {
+    let value = event.target.value;
+    let pinyin = this._CmsApiService.chineseToPinyin(value);
+    let nameInput = this.nameInput;
+    let routeInput = this.routeInput;
+    let templateInput = this.templateInput;
+    if (nameInput.value) return;
+    nameInput.patchValue(pinyin);
+    if (routeInput.value) return;
+    routeInput.patchValue(pinyin + (this.typeInput.value === 0 ? '' : '/{slug}'));
+    if (templateInput.value) return;
+    templateInput.patchValue(pinyin + '/index');
+  }
+  setAsyncValidatorsFn() {
+    this.createOrEditForm.setControl(
+      'name',
+      new FormControl(this.nameInput.value || '', {
+        validators: Validators.required,
+        asyncValidators: this.nameRepetitionAsyncValidator(),
+      })
+    );
+    this.createOrEditForm.setControl(
+      'route',
+      new FormControl(this.routeInput.value || '', {
+        validators: [Validators.required, this.forbiddenNameValidator()],
+        asyncValidators: [this.routeRepetitionAsyncValidator()],
+      })
+    );
+  }
+  forbiddenNameValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      let inputValue = control.value.toLocaleLowerCase();
+      let forbidden =
+        this.typeInput.value == 0 ? false : inputValue.includes('{slug}') ? false : true;
+      return forbidden
+        ? {
+            repetition: this._LocalizationService.instant(
+              `Cms::RouteVerificationTips`,
+              this._LocalizationService.instant(
+                `Cms::Enum:SectionType:` + SectionType[this.typeInput.value]
+              ),
+              '{slug}'
+            ),
+          }
+        : null;
+    };
+  }
+  nameRepetitionAsyncValidator() {
+    return (
+      ctrl: AbstractControl
+    ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
+      return new Promise(resolve => {
+        let subslug = this.createOrEditForm?.get('name');
+        if (subslug.value == this.selected?.name) {
+          resolve(null);
+          return;
+        }
+        this._SectionAdminService.nameExists({ name: subslug.value }).subscribe(res => {
+          if (res) {
+            resolve({
+              repetition: this._LocalizationService.instant(
+                `Cms::SectionName{0}AlreadyExist`,
+                ctrl.value
+              ),
+            });
+          } else {
+            resolve(null);
+          }
+        });
+      });
+    };
+  }
+  routeRepetitionAsyncValidator() {
+    return (
+      ctrl: AbstractControl
+    ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> => {
+      return new Promise(resolve => {
+        let subslug = this.createOrEditForm?.get('route').value;
+        if (subslug == this.selected?.route) {
+          resolve(null);
+          return;
+        }
+        this._SectionAdminService.routeExists({ route: subslug }).subscribe(res => {
+          if (res) {
+            resolve({
+              repetition: this._LocalizationService.instant(
+                `Cms::SectionRoute{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.scss

@@ -0,0 +1,27 @@
+:ng-deep .ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background-color: transparent !important;
+    border: none !important;
+  }
+  
+  :ng-deep .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    border-color: transparent !important;
+    box-shadow: none !important;
+  }
+  
+  .selectclassliveview {
+    overflow: hidden;
+  }
+  
+  ::ng-deep.ant-select:not(.ant-select-disabled):hover .ant-select-selector {
+    border-color: transparent;
+  }
+  
+  ::ng-deep.ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    border-color: transparent;
+    box-shadow: none;
+  }
+  
+  ::ng-deep.ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    background: transparent;
+    border: 1px solid transparent;
+  }

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,114 @@
+import { AfterContentInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import { EntryConfig } from './entry-config';
+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,111 @@
+/* eslint-disable @angular-eslint/component-selector */
+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)
+  }
+}