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

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

@@ -0,0 +1,109 @@
+
+import { EXTENSIONS_IDENTIFIER } from "@abp/ng.components/extensible";
+import { ListService, LIST_QUERY_DEBOUNCE_TIME, LocalizationService, PagedResultDto, ABP } from "@abp/ng.core";
+import { ToasterService, ConfirmationService, Confirmation } from "@abp/ng.theme.shared";
+import { Component, OnInit, inject } from "@angular/core";
+import { Router } from "@angular/router";
+import { ColumnMode } from "@swimlane/ngx-datatable";
+import { finalize } from "rxjs";
+import { ECmsComponent } from "../../../enums";
+import { UpdateListService } from "@dignite-ng/expand.core";
+import { FieldAdminService, FieldDto, GetFieldsInput } from "../../../proxy/dignite/cms/admin/fields";
+
+@Component({
+  selector: 'cms-fields',
+  templateUrl: './fields.component.html',
+  styleUrls: ['./fields.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.Fields,
+    },
+  ]
+})
+export class FieldsComponent implements OnInit {
+
+  constructor(
+    public readonly list: ListService,
+    private _FieldAdminService: FieldAdminService,
+    private toaster: ToasterService,
+    private confirmation: ConfirmationService,
+    private _LocalizationService: LocalizationService,
+    private router: Router,
+  ) {
+    
+  }
+  private _UpdateListService=inject(UpdateListService)
+  /**表格单元格布局类型 */
+  ColumnMode = ColumnMode;
+
+  /**表格数据 */
+  data: PagedResultDto<FieldDto> = {
+    items: [],
+    totalCount: 0,
+  };
+
+  /**过滤器 */
+  filters = {} as GetFieldsInput;
+
+  ngOnInit(): void {
+    this.hookToQuery()
+    this._UpdateListService.updateListEvent.subscribe(() => {
+      this.list.get()
+    });
+  }
+  getData(){
+    this.list.get()
+  }
+
+
+  /**字段分组选择回调 */
+  fieldGroupChange(event) {
+    this.filters.groupId = event
+    this.list.page=0
+    this.list.get()
+  }
+
+
+
+  /**使用abp的list获取表格的字段数据列表 */
+  hookToQuery() {
+    const getData = (query: ABP.PageQueryParams) => this._FieldAdminService.getList({
+      ...query,
+      ...this.filters,
+    });
+    const setData = (list: PagedResultDto<FieldDto>) => (this.data = list);
+    this.list.hookToQuery(getData).subscribe(setData);
+  }
+
+  /**新建字段按钮 */
+  toFieldsCreateBtn() {
+    this.router.navigate(['/cms/admin/fields/create'],
+      {
+        queryParams: {}
+      }
+    )
+  }
+
+  /**删除字段 */
+  deletefield(row: any) {
+    this.confirmation.warn(
+      row.displayName,
+      this._LocalizationService.instant(`AbpUi::ItemWillBeDeletedMessage`),
+    ).subscribe((status: Confirmation.Status) => {
+      if (status == 'confirm') {
+        this._FieldAdminService.delete(row.id).pipe(finalize(() => {
+        })).subscribe(res => {
+          this.toaster.success(this._LocalizationService.instant(`AbpUi::DeletedSuccessfully`));
+          this.list.get()
+        })
+      }
+    });
+  }
+}

package/src/lib/components/admin/fields/index.ts

@@ -0,0 +1,6 @@
+export * from './fields.component'
+export * from './field-group.component'
+export * from './create-field.component'
+export * from './create-or-edit-field.component'
+export * from './edit-field.component'
+export * from './create-or-update-field-input-base'

package/src/lib/components/admin/index.ts

@@ -0,0 +1,3 @@
+export * from './entries'
+export * from './fields'
+export * from './sections'

package/src/lib/components/admin/sections/create-or-edit-sections-modal.component.html

@@ -0,0 +1,81 @@
+<abp-modal [(visible)]="ModalOpen" [busy]="ModalBusy" (visibleChange)="ModalVisibleChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{selected?('AbpUi::Edit' | abpLocalization):('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>
+        <ng-container *ngIf="ModalForm; else loaderRef">
+            <form class="sites-modal-form" [formGroup]="ModalForm" (keydown.enter)="$event.preventDefault()"
+                [class]="{'was-validated':formValidation}" (submit)="save()">
+                <button type="submit" #ModalFormSubmit style="display: none"></button>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::EntryType' | abpLocalization}}</label>
+                    <div>
+                        <ng-container *ngFor="let item of _sectionTypeOptions;let i =index">
+                            <div class="form-check form-check-inline">
+                                <input class="form-check-input" type="radio" [value]="item.value"
+                                    (change)="radiochange()" formControlName="type" id="flexRadioDefault{{i}}">
+                                <label class="form-check-label" for="flexRadioDefault{{i}}">
+                                    {{ 'Cms::Enum:SectionType:'+item.key | abpLocalization }}
+                                </label>
+                            </div>
+                        </ng-container>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::DisplayName' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="displayName"
+                        (blur)="disPlayNameInputBlur($event)" placeholder="" />
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="name" placeholder="" />
+                    <div class="text-danger invalid-feedback" *ngIf="nameInput.errors?.repetition">
+                        {{nameInput.errors?.repetition}}
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::Route' | abpLocalization}} </label>
+                    <input type="text" class="form-control" formControlName="route" placeholder="" />
+                    <div class="text-danger invalid-feedback" *ngIf="routeInput.errors?.repetition">
+                        {{routeInput.errors?.repetition}}
+                    </div>
+                    <small class="form-text text-muted d-block">
+                        {{'Cms::RouteTips' | abpLocalization}}<br>
+                        &nbsp;&nbsp;blog<br>
+                        &nbsp;&nbsp;{{'blog/{slug}'}}<br>
+                        &nbsp;&nbsp;{{'blog/{publishTime:yyyy}/{publishTime:MM}/{slug}'}}
+                    </small>
+                </div>
+                <div class="mb-3">
+                    <label class="form-label">{{'Cms::Template' | abpLocalization}} </label>
+                    <input type="text" class="form-control" formControlName="template" placeholder="" />
+                    <small class="form-text text-muted d-block">
+                        {{"Cms::TemplateTips" | abpLocalization}}
+                    </small>
+                </div>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="isDefault"
+                            id="isDefault" />
+                        <label class="form-check-label" for="isDefault"> {{'Cms::Default' | abpLocalization}} </label>
+                    </div>
+                </div>
+                <div class="mb-3">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="isActive"
+                            id="isActive" />
+                        <label class="form-check-label" for="isActive"> {{'Cms::IsActive' | abpLocalization}}</label>
+                    </div>
+                </div>
+            </form>
+        </ng-container>
+    </ng-template>
+    <ng-template #abpFooter>
+        <button type="button" class="btn btn-secondary" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>
+        <abp-button iconClass="fa fa-check" type="button" [loading]="ModalBusy" [disabled]="ModalBusy"
+            (click)="ModalFormSubmit?.nativeElement?.click()">{{'AbpUi::Save'|abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

package/src/lib/components/admin/sections/create-or-edit-sections-modal.component.spec.ts

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

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

@@ -0,0 +1,239 @@
+import { LocalizationService } from '@abp/ng.core';
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core';
+import {
+  AbstractControl,
+  FormControl,
+  FormGroup,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { ValidatorsService, UpdateListService } from '@dignite-ng/expand.core';
+import { finalize, Observable } from 'rxjs';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { CmsApiService } from '../../../services';
+import { SectionAdminService } from '../../../proxy/dignite/cms/admin/sections';
+import { SectionType, sectionTypeOptions } from '../../../proxy/dignite/cms/sections';
+
+@Component({
+  selector: 'cms-create-or-edit-sections-modal',
+  templateUrl: './create-or-edit-sections-modal.component.html',
+  styleUrl: './create-or-edit-sections-modal.component.scss',
+})
+export class CreateOrEditSectionsModalComponent {
+  private _LocalizationService = inject(LocalizationService);
+  private toaster = inject(ToasterService);
+  private _ValidatorsService = inject(ValidatorsService);
+  private _UpdateListService = inject(UpdateListService);
+  private _SectionAdminService = inject(SectionAdminService);
+  private _CmsApiService = inject(CmsApiService);
+  _SectionType = SectionType;
+  _sectionTypeOptions = sectionTypeOptions;
+  /**表单验证状态 */
+  formValidation: any = '';
+ 
+  /**模态框-状态-是否打开 */
+  ModalOpen: boolean = false;
+  @Input()
+  public set visible(v: boolean) {
+    this.ModalOpen = v;
+  }
+
+  /**模态框-繁忙状态-用于确定模态的繁忙状态是否为真 */
+  ModalBusy: boolean = false;
+  /**初始值 */
+  selected: any = '';
+  /**模态框-表单 */
+  ModalForm: FormGroup | undefined;
+  @Input()
+  public set formEntity(v: FormGroup | undefined) {
+    this.ModalForm = v;
+    if (v) {
+      this.selected = v?.value;
+      this.setAsyncValidatorsFn();
+    }
+  }
+  get idInput() {
+    return this.ModalForm?.get('id') as FormControl;
+  }
+  get displayNameInput() {
+    return this.ModalForm.get('displayName') as FormControl;
+  }
+  get nameInput() {
+    return this.ModalForm.get('name') as FormControl;
+  }
+  get routeInput() {
+    return this.ModalForm.get('route') as FormControl;
+  }
+  get templateInput() {
+    return this.ModalForm.get('template') as FormControl;
+  }
+  get typeInput() {
+    return this.ModalForm.get('type') as FormControl;
+  }
+  radiochange() {
+    this.routeInput.patchValue(this.routeInput.value);
+  }
+
+  /**模态框-表单--控件模板-动态赋值表单控件 */
+  @ViewChild('ModalFormSubmit', { static: false }) ModalFormSubmit: ElementRef;
+  @Output() visibleChange = new EventEmitter();
+  /**模态框-状态改变回调 */
+  ModalVisibleChange(event) {
+    this.ModalOpen = event;
+    this.visibleChange.emit(event);
+    if (!event) {
+      return;
+    }
+  }
+  /**保存 */
+  save() {
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.ModalForm);
+    if (this._ValidatorsService.isCheckForm(this.formValidation, 'Cms')) return;
+
+    if (this.ModalBusy) return;
+    this.ModalBusy = true;
+    if (!this.ModalForm.valid) return;
+    let input = this.ModalForm.value;
+    if (this.idInput.value) {
+      this._SectionAdminService
+        .update(this.idInput.value, input)
+        .pipe(
+          finalize(() => {
+            this.reset();
+          })
+        )
+        .subscribe(res => {
+          this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+          this.visibleChange.emit(false);
+          this.formValidation='';
+        });
+        return;
+    }
+    this._SectionAdminService
+      .create(input)
+      .pipe(
+        finalize(() => {
+          this.reset();
+        })
+      )
+      .subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`AbpUi::SavedSuccessfully`));
+        this.visibleChange.emit(false);
+        this.formValidation='';
+      });
+  }
+  reset(){
+    this.ModalBusy = false;
+    this._UpdateListService.updateList();
+  }
+
+    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.ModalForm?.setControl(
+      'name',
+      new FormControl(this.nameInput.value || '', {
+        validators: Validators.required,
+        asyncValidators: this.nameRepetitionAsyncValidator(),
+      })
+    );
+    this.ModalForm?.setControl(
+      'route',
+      new FormControl(this.routeInput.value || '', {
+        validators: [Validators.required, this.forbiddenNameValidator()],
+        asyncValidators: [this.routeRepetitionAsyncValidator()],
+        updateOn: 'change',
+      })
+    );
+  }
+  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.ModalForm?.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.ModalForm?.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/admin/sections/create-or-update-sections-input-base.ts

@@ -0,0 +1,23 @@
+
+import {Validators } from "@angular/forms";
+
+export class CreateOrUpdateSectionsInputBase {
+    id: string | Validators[] = [''];
+    /**版块类型 */
+    type: any = [0, [Validators.required]];
+    /**字段名称 Display name of this field */
+    displayName: any = ['', [Validators.required]];
+    /**字段唯一名称 Unique Name*/
+    name: any = ['', [Validators.required]];
+    /**条目路由 */
+    route: any = ['', [Validators.required]];
+    /**页面模板 */
+    template: any = ['', [Validators.required]];
+    /**是否默认 */
+    isDefault: any = [false, []];
+    /**是否激活 */
+    isActive: any = [true, []];
+    concurrencyStamp: string | Validators[] = [''];
+
+    constructor() {}
+}

package/src/lib/components/admin/sections/entry-types/create-or-edit.-entry-type-input-base.ts

@@ -0,0 +1,52 @@
+import { FormArray, Validators } from "@angular/forms";
+
+export class CreateOrEditEntryTypeInputBase {
+    /**显示名称 Display name of this field */
+    displayName: any = ['', [Validators.required]];
+
+    /**名称 Unique Name*/
+    name: any = ['', [Validators.required]];
+    /**条目路由 */
+    fieldTabs: any = new FormArray([])
+    
+    constructor(data?: CreateOrEditEntryTypeInputBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+export class fieldTabsBase {
+    /**名称 Unique Name*/
+    name: any = ['', [Validators.required]];
+    fields?: any = [[], []]
+    constructor(data?: fieldTabsBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+    }
+}
+export class fieldsBase {
+    /**字段id Unique Name*/
+    fieldId: any = ['', [Validators.required]];
+    /**显示名称 Unique Name*/
+    displayName: any = ['', [Validators.required]];
+    /**必填 Unique Name*/
+    required: any = [false, []];
+    /**是否在列表中显示 Unique Name*/
+    showInList: any = [false, []];
+    /**是否启用搜索 */
+    enableSearch: any = [false, []];
+
+    constructor() {
+    }
+}
+
+