@dignite-ng/expand.cms 0.0.19 → 0.0.20

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

@@ -0,0 +1,334 @@
+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, ElementRef, OnInit, ViewChild, inject, } from '@angular/core';
+import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators, } from '@angular/forms';
+import { EntryTypeAdminService, GetSectionsInput, SectionAdminService, SectionDto } from '../../../proxy/admin/sections';
+import { SiteAdminService } from '../../../proxy/admin/sites';
+import { ColumnMode } from "@swimlane/ngx-datatable";
+import { finalize } from 'rxjs/operators';
+import { CreateOrUpdateSectionsInputBase } from './create-or-update-sections-input-base';
+import { SectionType, sectionTypeOptions } from '../../../proxy/sections';
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.theme.shared/extensions';
+import { ECmsComponent } from '../../../enums';
+import { CmsApiService } from '../../../services/cms-api.service';
+import { Observable } from 'rxjs';
+import { Router } from '@angular/router';
+import { UpdateListService } from '../../../services/update-list.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 _SiteAdminService: SiteAdminService,
+    private toaster: ToasterService,
+    private confirmation: ConfirmationService,
+    private fb: FormBuilder,
+    private configState: ConfigStateService,
+    public _EntryTypeAdminService: EntryTypeAdminService,
+    public _LocalizationService: LocalizationService,
+    public _CmsApiService: CmsApiService,
+    private router: Router,
+  ) {
+
+  }
+  private _UpdateListService=inject(UpdateListService)
+
+  /**跳转编辑 */
+  jumpSectionsEdit(row, item) {
+    this.router.navigate([`/cms/admin/sections/${row.id}/entry-types/${item.id}/edit`], {
+    })
+  }
+  /**跳转新建 */
+  jumpSectionsCreate(row) {
+    this.router.navigate([`/cms/admin/sections/${row.id}/entry-types/create`], {
+    })
+  }
+
+
+  /**版块列表 */
+  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> {
+    await this.getSiteList()
+    this.hookToQuery()
+    this._UpdateListService.updateListEvent.subscribe(() => {
+      this.list.get()
+    });
+  }
+
+  /**站点切换 */
+  siteIdChange() {
+    this.list.page = 0
+    this.list.get()
+  }
+
+  /**获取版块列表 */
+  getSiteList() {
+    return new Promise((resolve, rejects) => {
+      this._SiteAdminService.getList({}).subscribe(res => {
+        this.siteList = res.items
+        this.filters.siteId = res.items[0]?.id || ''
+        resolve(true)
+        rejects(false)
+
+      })
+    })
+
+  }
+
+  /**创建版块模态框状态 */
+  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()
+  }
+
+  /** */
+  createSave() {
+    let input = this.createOrEditForm.value
+    input.siteId = this.filters.siteId
+    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(`CmsKit::SavedSuccessfully`));
+      this.list.get()
+    })
+  }
+  /**创建版块保存 */
+  EditSave() {
+    let input = this.createOrEditForm.value
+    input.siteId = this.filters.siteId
+    input.concurrencyStamp = this.selected.concurrencyStamp
+    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(`CmsKit::SavedSuccessfully`));
+      this.list.get()
+    })
+  }
+  /**删除版块 */
+  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()
+        })
+      }
+    });
+  }
+
+
+
+  /**name表单控件 */
+  get displayNameInput() {
+    return this.createOrEditForm.get('displayName')
+  }
+  /**name表单控件 */
+  get nameInput() {
+    return this.createOrEditForm.get('name')
+  }
+  /**route表单控件 */
+  get routeInput() {
+    return this.createOrEditForm.get('route')
+  }
+  /**route表单控件 */
+  get templateInput() {
+    return this.createOrEditForm.get('template')
+  }
+  /**route表单控件 */
+  get typeInput() {
+    return this.createOrEditForm.get('type')
+  }
+
+  radiochange() {
+    this.routeInput.patchValue(this.routeInput.value)
+  }
+
+
+  /**字段标签input失去标点生成字段名字 */
+  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({
+          siteId: this.filters.siteId,
+          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({
+          siteId: this.filters.siteId,
+          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/sites/create-or-update-sites-input-base.ts

@@ -0,0 +1,31 @@
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+
+export class CreateOrUpdateSitesInputBase {
+
+    /**字段名称 Display name of this field */
+    displayName: any = ['', [Validators.required]];
+
+    /**字段唯一名称 Unique Name*/
+    name: any = ['', [Validators.required]];
+
+    /**主机地址 */
+    host: any = ['https://', [Validators.required]];
+
+    /**是否激活 */
+    isActive: any = [true, []];
+    // 语言
+    languages:any = [[], [Validators.required]]
+
+
+    constructor(data?: CreateOrUpdateSitesInputBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+    }
+}
+

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

@@ -0,0 +1,2 @@
+export * from './sites.component'
+export * from './create-or-update-sites-input-base'

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

@@ -0,0 +1,154 @@
+<abp-page [title]="'Cms::Sites' | abpLocalization" [toolbar]="true">
+    <div class="sites-page">
+        <div class="card">
+            <div class="card-body px-2 py-sm-2 border-bottom">
+                <div class="input-group">
+                    <input type="text" class="form-control" [(ngModel)]="filters.filter"
+                        [placeholder]="'AbpUi::Search' | abpLocalization" />
+                    <button class="btn btn-primary px-3" type="button" id="button-addon2" (click)="list.get()">
+                        <i class="fa fa-search"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="card mb-0">
+            <div class="card-body p-0">
+                <div class="table-responsive table-fixed-header">
+                    <ngx-datatable class="material container-height" [rows]="data.items" [list]="list"
+                        [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" rowHeight="auto"
+                        [scrollbarV]="true" [virtualization]="false" [externalPaging]="true" [count]="data.totalCount">
+                        <ngx-datatable-column [name]="'Cms::DisplayName' | abpLocalization" prop="displayName">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                {{ value }}
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [name]="'Cms::Name' | abpLocalization" prop="name">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                {{ value }}
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [name]="'Cms::IsActive' | abpLocalization" prop="isActive">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                <i class="fas fa-check text-success" *ngIf="value"></i>
+                                <i class="fas fa-times text-danger" *ngIf="!value"></i>
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [name]="'Cms::Host' | abpLocalization" prop="host">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                {{ value }}
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [name]="'Cms::CreationTime' | abpLocalization" prop="creationTime">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                {{ value | date : 'yyyy-MM-dd hh-mm-ss' }}
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [sortable]="false">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                <div ngbDropdown container="body">
+                                    <button type="button" class="btn btn-outline-primary btn-sm" ngbDropdownToggle>
+                                        {{'AbpUi::Actions' | abpLocalization}}
+                                    </button>
+                                    <div ngbDropdownMenu>
+                                        <button ngbDropdownItem
+                                            (click)="EditSitesBtn(row)">{{'AbpUi::Edit' | abpLocalization}}</button>
+                                        <button ngbDropdownItem
+                                            (click)="deletefield(row)">{{'AbpUi::Delete' | abpLocalization}}</button>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </ngx-datatable-column>
+                    </ngx-datatable>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+
+
+
+</abp-page>
+
+
+<!-- <dignite-page [title]="'Cms::Sites' | abpLocalization" [back]="false" [class]="'sites-page'">
+    <ng-template #pageHeader>
+        <button type="button" class="btn btn-primary btn-sm ms-2" (click.stop)="createSitesBtn()">
+            <i class="fa fa-plus pe-1" aria-hidden="true"></i>{{'Cms::New' | abpLocalization}}
+        </button>
+    </ng-template>
+    <ng-template #pageBody>
+        
+    </ng-template>
+</dignite-page> -->
+
+<abp-modal [(visible)]="createSitesOpen" [busy]="modalBusy" (visibleChange)="createGroupVisibleChange($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="createOrEditForm; else loaderRef">
+            <form class="sites-modal-form" #myForm="ngForm" [formGroup]="createOrEditForm"
+                (ngSubmit)="createOrEditSave()">
+                <button type="submit" #createModalSubmit style="display: none"></button>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::DisplayName' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="displayName"
+                        (blur)="disPlayNameInputBlur($event)" />
+                </div>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="name" />
+                    <div class="text-danger invalid-feedback" *ngIf="nameInput.errors?.repetition">
+                        {{nameInput.errors?.repetition}}
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::Host' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="host" />
+                    <div class="text-danger invalid-feedback" *ngIf="hostInput.errors?.repetition">
+                        {{hostInput.errors?.repetition}}
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="isActive"
+                            id="flexRadioDefault1" />
+                        <label class="form-check-label" for="flexRadioDefault1"> {{'Cms::IsActive' | abpLocalization}}
+                        </label>
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::Languages' | abpLocalization}}</label>
+                    <ul class="list-group list-group-flush">
+                        <ng-container *ngFor="let item of languages; let i = index">
+                            <li class="list-group-item d-flex justify-content-between align-items-center">
+                                <div>
+                                    <input class="form-check-input me-1" type="checkbox" [value]="item.cultureName"
+                                        id="firstRadio{{ i }}" [checked]="item.ischecked"
+                                        (change)="languagesChange($event);!item.ischecked" />
+                                    <label class="form-check-label" for="firstRadio{{ i }}">{{ item.displayName
+                                        }}</label>
+                                </div>
+                                <ng-container *ngIf="item.ischecked">
+                                    <div class="text-primary" *ngIf="item.isDefault">{{'Cms::Default' | abpLocalization}}
+                                    </div>
+                                    <div (click.stop)="setDefault(item)" *ngIf="!item.isDefault">
+                                        {{'Cms::SetDefault' | abpLocalization}}</div>
+                                </ng-container>
+                            </li>
+                        </ng-container>
+                    </ul>
+                </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"
+            (click)="createModalSubmit.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

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

@@ -0,0 +1,19 @@
+::ng-deep.sites-page {
+    .dignite_page{
+        background: transparent;
+    }
+    .list-group-flush > .list-group-item:first-child{
+        border-top-width:var(--bs-list-group-border-width);
+    }
+    
+    .container-height{
+        height: calc(100vh - 220px);
+    }
+   
+   
+}
+::ng-deep.sites-modal-form{
+    .form-control{
+        padding: 0.4rem 1.25rem;
+    }
+}

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

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