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

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

@@ -0,0 +1,216 @@
+import { ConfigStateService, LocalizationService } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { Component, ElementRef, inject, Input, ViewChild } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { Router } from '@angular/router';
+import { DatePipe, Location } from '@angular/common';
+import { CmsApiService } from '../../../services';
+import { SectionAdminService } from '../../../proxy/dignite/cms/admin/sections';
+import { EntryAdminService } from '../../../proxy/dignite/cms/admin/entries';
+
+@Component({
+  selector: 'cms-create-or-edit-entries',
+  templateUrl: './create-or-edit-entries.component.html',
+  styleUrls: ['./create-or-edit-entries.component.scss'],
+})
+export class CreateOrEditEntriesComponent {
+  private toaster = inject(ToasterService);
+  public _location = inject(Location);
+  private configState = inject(ConfigStateService);
+  private _SectionAdminService = inject(SectionAdminService);
+  private _EntryAdminService = inject(EntryAdminService);
+  private datePipe = inject(DatePipe);
+  private _LocalizationService = inject(LocalizationService);
+  private router = inject(Router);
+  private _CmsApiService = inject(CmsApiService);
+
+  /**语言列表 */
+  languagesList: any[] = [];
+  /**条目列表-选择上级条目 */
+  entryList: any[] = [];
+  /**条目信息 */
+  entryInfo: any = '';
+  /**版本信息 */
+  sectionInfo: any = '';
+  /**需要展示的b板块下条目类型 */
+  showEntryType: any = '';
+  /**版本条目id */
+  entryVersionId: any = '';
+  /**版本列表 */
+  AllVersionsList: any[] = [];
+
+  @Input() isEdit: boolean = false;
+
+  @Input() sectionId: string = '';
+  @Input() entryTypeId: string = '';
+  @Input() public set select(v: any) {
+    this.entryVersionId = v.id;
+    this.entryInfo = v;
+  }
+
+  formEntity: FormGroup | undefined;
+  @Input() set entity(value: FormGroup | undefined) {
+    this.formEntity = value;
+    if (value) {
+      let languages = this.configState.getDeep('localization.languages');
+      this.languagesList = languages;
+      this.loadData();
+    }
+  }
+  /**是否加载完成 */
+  isLoad: boolean = false;
+
+  /**语言控件 */
+  get cultureInput(): FormControl {
+    return this.formEntity?.get('culture') as FormControl;
+  }
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /**加载数据 */
+  async loadData() {
+    if (this.sectionId) {
+      await this.getSectionInfo();
+      await this.getEntryList();
+    }
+    this.cultureInput.disable();
+    let repetition = await this.cultureAsyncValidator();
+    if (repetition) this.cultureInput.setErrors(repetition);
+    if (this.entryInfo) {
+      await this.getAllVersionsList();
+      this.formEntity.patchValue({
+        entryTypeId: this.entryInfo.entryTypeId,
+        publishTime: this.datePipe.transform(this.entryInfo.publishTime, 'yyyy-MM-dd HH:mm:ss'),
+        title: this.entryInfo.title,
+        slug: this.entryInfo.slug,
+        parentId: this.entryInfo.parentId,
+        versionNotes: this.entryInfo.versionNotes,
+        initialVersionId: this.entryInfo.id,
+      });
+    } else {
+      this.formEntity.patchValue({
+        entryTypeId: this.entryTypeId,
+        publishTime: this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss'),
+      });
+    }
+    this.isLoad = true;
+    setTimeout(() => {
+      this.submitclick?.nativeElement.click();
+    }, 0);
+  }
+
+  /**定义自定义异步验证 */
+  cultureAsyncValidator() {
+    return new Promise(resolve => {
+      let culture = this.cultureInput.value;
+      if (culture == this.entryInfo?.culture || this.sectionInfo.type !== 0) return resolve(null);
+      this._EntryAdminService
+        .cultureExistWithSingleSection({
+          culture: culture,
+          sectionId: this.sectionId,
+          entryTypeId: this.entryTypeId,
+        })
+        .subscribe(res => {
+          if (res) {
+            resolve({
+              repetition: this._LocalizationService.instant(
+                `Cms::EntriesAlreadyExistEntryType`,
+                '',
+                this.languagesList.find(el => el.cultureName == culture).displayName
+              ),
+            });
+          } else {
+            resolve(null);
+          }
+        });
+    });
+  }
+
+  /**获取板块信息 */
+  getSectionInfo() {
+    return new Promise((resolve, reject) => {
+      this._SectionAdminService.get(this.sectionId).subscribe(res => {
+        this.showEntryType = res.entryTypes.find(el => el.id == this.entryTypeId);
+        this.sectionInfo = res;
+        resolve(res);
+      });
+    });
+  }
+  /**获取板块下所有条目 */
+  getEntryList() {
+    return new Promise((resolve, rejects) => {
+      this._EntryAdminService
+        .getList({
+          sectionId: this.sectionId,
+          maxResultCount: 1000,
+          culture: this.cultureInput.value,
+        })
+        .subscribe((res: any) => {
+          let entryList = res.items.filter(el => el.id !== this.entryInfo?.id);
+          let parentList = entryList.filter(el => !el.parentId);
+          parentList.forEach(el => {
+            let layer: number = 0;
+            el.layer = new Array(layer);
+            el.children = this.groupByParentId(entryList, el.id, layer + 1);
+          });
+          this.entryList = parentList;
+          resolve(res);
+        });
+    });
+  }
+  /**对数组按照父子关系进行分组 */
+  groupByParentId(arr, id = '', layer) {
+    let result = [];
+    result = arr.filter(el => el.parentId == id);
+    result.forEach(el => {
+      el.layer = new Array(layer);
+      el.children = this.groupByParentId(arr, el.id, layer + 1);
+    });
+    return result;
+  }
+  /**标题转化别名 */
+  setTitleToSlugBlur(event) {
+    let val = event.target.value;
+    let slug = this.formEntity.get('slug');
+    let pinyinstr = '';
+    if (slug.value) return;
+    pinyinstr = this._CmsApiService.chineseToPinyin(val);
+    this.formEntity.patchValue({
+      slug: pinyinstr || val,
+    });
+  }
+
+  /**获取条目版本列表 */
+  getAllVersionsList() {
+    return new Promise((resolve, rejects) => {
+      this._EntryAdminService.getAllVersions(this.entryInfo.id).subscribe(res => {
+        this.AllVersionsList = res.items;
+        resolve(res);
+      });
+    });
+  }
+
+  /**激活 */
+  ActivatedVersion(VersionId) {
+    this._EntryAdminService.activate(VersionId).subscribe(res => {
+      this.AllVersionsList.forEach(el => {
+        el.isActivatedVersion = el.id === VersionId;
+      });
+      return;
+    });
+  }
+  /**编辑版本 */
+  toEditUrl(id) {
+    this.router.navigateByUrl('', { skipLocationChange: true }).then(() => {
+      this.router.navigate([`/cms/admin/entries/${id}/edit`]);
+    });
+  }
+  /**删除版本 */
+  delectVersion(vid) {
+    this._EntryAdminService.delete(vid).subscribe(res => {
+      this.toaster.success(this._LocalizationService.instant(`AbpUi::DeletedSuccessfully`));
+      this.getAllVersionsList();
+    });
+  }
+}

package/src/lib/components/admin/entries/create-or-update-entry-input-base.ts

@@ -0,0 +1,26 @@
+import { FormGroup, Validators } from "@angular/forms";
+
+export class CreateOrUpdateEntryInputBase {
+
+    /**条目id */
+    entryTypeId: any = ['']
+    /**标题 */
+    title: any = ['', [Validators.required]]
+    /**别名 */
+    slug: any = ['', [Validators.required]]
+    /**语言 */
+    culture: any = ['']
+    /**是否是草稿 */
+    draft: any = ['', []]
+    /**发布时间 */
+    publishTime: any = ['', [Validators.required]]
+    /**上级目录 */
+    parentId: any = [null]
+    /**修订说明 */
+    versionNotes: any = [null]
+    /**版本 */
+    initialVersionId: any = [null]
+    extraProperties: FormGroup | undefined = new FormGroup({})
+    constructor() { }
+}
+

package/src/lib/components/admin/entries/create.component.html

@@ -0,0 +1,16 @@
+<abp-page [title]="'Cms::New'| abpLocalization" [toolbar]="true">
+    <form class="row g-3 needs-validation" [formGroup]="formEntity" (keydown.enter)="$event.preventDefault()"
+        [class]="{'was-validated':formValidation}" (submit)="save()">
+        <button type="submit" style="display: none;" #submitclick></button>
+        <ng-container *ngIf="formEntity">
+            <ng-container *ngIf="entryVersionId; else elseTemplate">
+                <cms-create-or-edit-entries [sectionId]="sectionId" [entryTypeId]="entryTypeId"  [select]="entryInfo"  [entity]="formEntity"></cms-create-or-edit-entries>
+            </ng-container>
+            <ng-template #elseTemplate>
+                <cms-create-or-edit-entries [sectionId]="sectionId" [entryTypeId]="entryTypeId" [entity]="formEntity"></cms-create-or-edit-entries>
+            </ng-template>
+        </ng-container>
+
+    </form>
+
+</abp-page>

package/src/lib/components/admin/entries/create.component.spec.ts

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

package/src/lib/components/admin/entries/create.component.ts

@@ -0,0 +1,130 @@
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
+import { LocalizationService } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { DatePipe, Location } from '@angular/common';
+import { Component, OnInit, inject, ViewChild, ElementRef } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+// import { EntryAdminService } from '../../../proxy/admin/entries';
+import { ECmsComponent } from '../../../enums';
+import { CreateOrUpdateEntryInputBase } from './create-or-update-entry-input-base';
+import { ValidatorsService, UpdateListService } from '@dignite-ng/expand.core';
+import { finalize } from 'rxjs';
+import { EntryAdminService } from '../../../proxy/dignite/cms/admin/entries';
+
+@Component({
+  selector: 'cms-create',
+  templateUrl: './create.component.html',
+  styleUrls: ['./create.component.scss'],
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.Entries_Create,
+    },
+  ],
+})
+export class CreateComponent implements OnInit {
+  private fb = inject(FormBuilder);
+  private _updateListService = inject(UpdateListService);
+  private toaster = inject(ToasterService);
+  public _location = inject(Location);
+  private route = inject(ActivatedRoute);
+  private _EntryAdminService = inject(EntryAdminService);
+  private _LocalizationService = inject(LocalizationService);
+  private _ValidatorsService = inject(ValidatorsService);
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+  /**表单实体 */
+  formEntity: FormGroup | undefined;
+  /**语言 */
+  cultureName: string = '';
+  /**条目类型id */
+  entryTypeId: string = '';
+  /**版块id */
+  sectionId: string = '';
+  /**条目版本id */
+  entryVersionId: string = '';
+  /**条目信息 */
+  entryInfo: any = '';
+
+  /**是否草稿控件*/
+  get draftInput() {
+    return this.formEntity?.get('draft') as FormControl;
+  }
+  /**语言控件 */
+  get cultureInput(): FormControl {
+    return this.formEntity?.get('culture') as FormControl;
+  }
+
+  async ngOnInit(): Promise<void> {
+    let queryParams = this.route.snapshot.queryParams;
+
+    this.cultureName = queryParams.cultureName;
+    this.entryTypeId = queryParams.entryTypeId;
+    this.sectionId = queryParams.sectionId;
+    this.entryVersionId = queryParams.entryVersionId;
+    this.formEntity = this.fb.group(new CreateOrUpdateEntryInputBase());
+    if (this.entryVersionId) await this.getEntryInfo();
+    this.cultureInput.patchValue(this.cultureName);
+  }
+
+  /**获取条目信息 */
+  getEntryInfo() {
+    return new Promise((resolve, rejects) => {
+      this._EntryAdminService.get(this.entryVersionId).subscribe(res => {
+        this.cultureName = res.culture;
+        this.entryTypeId = res.entryTypeId;
+        this.sectionId = res.sectionId;
+        this.entryInfo = res;
+        resolve(res);
+      });
+    });
+  }
+  /**提交 */
+  save() {
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.formEntity);
+    
+    if (this._ValidatorsService.isCheckForm(this.formValidation, 'Cms')){
+      this.isSubmit = false;
+      return this.cultureInput.disable();
+    }
+    let input = this.formEntity?.value;
+    input.culture = this.cultureName;
+    input.publishTime = new Date(
+      new Date(input.publishTime).getTime() + 8 * 60 * 60 * 1000
+    ).toISOString();
+    if (!this.formEntity.valid) return;
+    this._EntryAdminService
+      .create(input)
+      .pipe(finalize(() => {
+        this.isSubmit = false;
+      }))
+      .subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+        this._location.back();
+        this._updateListService.updateList();
+      });
+  }
+  isSubmit: boolean = false;
+  /**点击提交 */
+  clickSubmit(type) {
+    if (this.isSubmit) return;
+    this.isSubmit = true;
+    this.draftInput.patchValue(type);
+    this.cultureInput.enable();
+    this.submitclick?.nativeElement?.click();
+  }
+
+  /**返回上一页 */
+  backTo() {
+    this._location.back();
+  }
+}

package/src/lib/components/admin/entries/edit.component.html

@@ -0,0 +1,9 @@
+<abp-page [title]="'Cms::Edit'| abpLocalization" [toolbar]="true">
+    <form class="row g-3 needs-validation" [formGroup]="formEntity" (keydown.enter)="$event.preventDefault()"
+        [class]="{'was-validated':formValidation}" (submit)="save()">
+        <button type="submit" style="display: none;" #submitclick></button>
+        <ng-container *ngIf="formEntity&&entryInfo">
+                <cms-create-or-edit-entries  [sectionId]="sectionId" [entryTypeId]="entryTypeId" [isEdit]="true" [select]="entryInfo"  [entity]="formEntity"></cms-create-or-edit-entries>
+        </ng-container>
+    </form>
+</abp-page>

package/src/lib/components/admin/entries/edit.component.spec.ts

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

package/src/lib/components/admin/entries/edit.component.ts

@@ -0,0 +1,134 @@
+/* eslint-disable @angular-eslint/use-lifecycle-interface */
+
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
+import { LocalizationService } from '@abp/ng.core';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { DatePipe, Location } from '@angular/common';
+import { Component, OnInit, inject, ViewChild, ElementRef } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+// import { EntryAdminService } from '../../../proxy/admin/entries';
+import { ECmsComponent } from '../../../enums';
+import { UpdateListService } from '@dignite-ng/expand.core';
+import { CreateOrUpdateEntryInputBase } from './create-or-update-entry-input-base';
+import { ValidatorsService } from '@dignite-ng/expand.core';
+import { finalize } from 'rxjs';
+import { EntryAdminService } from '../../../proxy/dignite/cms/admin/entries';
+
+@Component({
+  selector: 'cms-edit',
+  templateUrl: './edit.component.html',
+  styleUrls: ['./edit.component.scss'],
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.Entries_Edit,
+    },
+  ],
+})
+export class EditComponent implements OnInit {
+  private fb = inject(FormBuilder);
+  private _updateListService = inject(UpdateListService);
+  private toaster = inject(ToasterService);
+  public _location = inject(Location);
+  private route = inject(ActivatedRoute);
+  private _EntryAdminService = inject(EntryAdminService);
+  private _LocalizationService = inject(LocalizationService);
+  private _ValidatorsService = inject(ValidatorsService);
+  private datePipe = inject(DatePipe);
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+  /**表单实体 */
+  formEntity: FormGroup | undefined;
+  /**语言 */
+  cultureName: string = '';
+  /**条目类型id */
+  entryTypeId: string = '';
+  /**版块id */
+  sectionId: string = '';
+  /**条目版本id */
+  entryVersionId: string = '';
+  /**条目id */
+  entrieId: string = '';
+  /**条目信息 */
+  entryInfo: any = '';
+
+  /**是否草稿控件*/
+  get draftInput() {
+    return this.formEntity?.get('draft') as FormControl;
+  }
+  /**语言控件 */
+  get cultureInput(): FormControl {
+    return this.formEntity?.get('culture') as FormControl;
+  }
+
+  async ngOnInit(): Promise<void> {
+    let params = this.route.snapshot.params;
+    this.entrieId = params.entrieId;
+    this.formEntity = this.fb.group(new CreateOrUpdateEntryInputBase());
+    await this.getEntryInfo();
+    this.cultureInput.patchValue(this.cultureName);
+
+  }
+  /**获取条目信息 */
+  getEntryInfo() {
+    return new Promise((resolve, rejects) => {
+      this._EntryAdminService.get(this.entrieId).subscribe(res => {
+        this.cultureName = res.culture;
+        this.entryTypeId = res.entryTypeId;
+        this.sectionId = res.sectionId;
+        this.entryInfo = res;
+        resolve(res);
+      });
+    });
+  }
+
+  /**提交 */
+  save() {
+    let input = this.formEntity?.value;
+    input.culture = this.cultureName;
+    input.publishTime = new Date(
+      new Date(input.publishTime).getTime() + 8 * 60 * 60 * 1000
+    ).toISOString();
+    input.concurrencyStamp = this.entryInfo.concurrencyStamp;
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.formEntity);
+    if (this._ValidatorsService.isCheckForm(this.formValidation, 'Cms')){
+      this.isSubmit = false;
+      return this.cultureInput.disable();
+    }
+    
+    if (!this.formEntity.valid) return;
+    this._EntryAdminService
+      .update(this.entryInfo.id, input)
+      .pipe(finalize(() => {
+        this.isSubmit = false;
+      }))
+      .subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+        this.backTo();
+        this._updateListService.updateList();
+      });
+  }
+  isSubmit: boolean = false;
+  /**点击提交 */
+  clickSubmit(type) {
+    if (this.isSubmit) return;
+    this.isSubmit = true;
+    this.draftInput.patchValue(type);
+    this.cultureInput.enable();
+    this.submitclick?.nativeElement?.click();
+  }
+
+  /**返回上一页 */
+  backTo() {
+    this._location.back();
+  }
+}