@dignite-ng/expand.cms 0.0.19 → 0.0.20

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

@@ -0,0 +1,106 @@
+<abp-page [title]="'Cms::Entries' | abpLocalization" [toolbar]="true">
+    <abp-page-toolbar-container *ngIf="entryTypeList.length < 1" class="col "></abp-page-toolbar-container>
+    <abp-page-toolbar-container *ngIf="entryTypeList.length > 1" class="col ">
+        <div class="row justify-content-end mx-0 gap-2" *abpPermission="'CmsAdmin.Entry.Create'">
+            <div class="col-auto px-0 pt-0">
+                <div ngbDropdown class="d-inline-block">
+                    <button type="button" class="btn btn-primary btn-sm ms-2" id="dropdownBasic1" ngbDropdownToggle>
+                        <i class="fa fa-plus pe-1" aria-hidden="true"></i>{{'Cms::New' | abpLocalization}}
+                    </button>
+                    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                        <ng-container *ngFor="let item of entryTypeList">
+                            <button ngbDropdownItem [routerLink]="['/cms/admin/entries/create']"
+                                [queryParams]="{cultureName: filters.culture,sectionId:filters.sectionId,entryTypeId:item.id}">{{item.displayName}}</button>
+                        </ng-container>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </abp-page-toolbar-container>
+    <div id="sites-page" class="sites-page">
+        <div class="card">
+            <div class="card-body px-2 py-sm-2 border-bottom">
+                <div class="input-group" [formGroup]="filtersForm">
+                    <select class="form-select col-auto" formControlName="siteId"  (change)="siteIdChange()">
+                        <ng-container *ngFor="let item of siteList">
+                            <option [value]="item.id">{{item.displayName}}</option>
+                        </ng-container>
+                    </select>
+                    <select class="form-select col-auto" formControlName="sectionId"  (change)="sectionIdChange()">
+                        <ng-container *ngFor="let item of SiteOfSectionList">
+                            <option [value]="item.id">{{item.displayName}}</option>
+                        </ng-container>
+                    </select>
+                    <select class="form-select col-auto" formControlName="culture"  (change)="cultureChange()">
+                        <ng-container *ngFor="let item of sectionLanguagesList">
+                            <option [value]="item.cultureName">{{item.displayName}}</option>
+                        </ng-container>
+                    </select>
+                    <input type="text" class="form-control" formControlName="filter"
+                        [placeholder]="'AbpUi::Search' | abpLocalization" />
+                    <button class="btn btn-primary px-3" type="button" id="button-addon2" (click)="resetData()">
+                        <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::EntryType' | abpLocalization" prop="entryTypeId">
+                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                    <ng-container *ngFor="let item of entryTypeList">
+                                        <ng-container *ngIf="item.id === value">{{item.displayName}}</ng-container>
+                                    </ng-container>
+                                </ng-template>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column [name]="'Cms::Title' | abpLocalization" prop="title">
+                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                    {{ value }}
+                                </ng-template>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column [name]="'Cms::Slug' | abpLocalization" prop="slug">
+                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                    {{ value }}
+                                </ng-template>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column [name]="'Cms::Status' | abpLocalization" prop="status">
+                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                    <ng-container *ngFor="let item of _entryStatusOptions">
+                                        <ng-container *ngIf="item.value=== value">{{ 'Cms::Enum:EntryStatus:'+item.key |
+                                            abpLocalization }}</ng-container>
+                                    </ng-container>
+                                </ng-template>
+                            </ngx-datatable-column>
+                            <ngx-datatable-column [name]="'Cms::PublishTime' | abpLocalization" prop="publishTime">
+                                <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                    {{value | date: 'YYYY/MM/dd HH:m:s' }}
+                                </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
+                                                routerLink="/cms/admin/entries/{{row.id}}/edit">{{'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>

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

@@ -0,0 +1,80 @@
+::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);
+    }
+
+    .card-header {
+
+        input {
+            flex: 2 1 auto;
+        }
+
+        .form-select {
+            padding: 0.475rem 3.75rem 0.475rem 1.25rem;
+        }
+    }
+
+    .container-height {
+        height: calc(100vh - 220px);
+    }
+    .morentr{
+        border: 2px  solid transparent;
+    }
+
+    .borderdrag {
+        border: 2px  solid var(--ck-color-selector-column-resizer-hover) !important;
+    }
+    .borderdragtd{
+        background-color: var(--ck-color-selector-column-resizer-hover) !important;
+    }
+
+    .testtr {
+        border-color: transparent;
+        td {
+            padding: 2px;
+        }
+    }
+    .testtr:hover{
+        background-color: transparent;
+    }
+
+
+
+}
+
+.cdk-drag-preview {
+    display: table;
+    box-sizing: border-box;
+    border-radius: 4px;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+        0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+    border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+
+::ng-deep.sites-modal-form {
+    .form-control {
+        padding: 0.4rem 1.25rem;
+    }
+}

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

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

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

@@ -0,0 +1,216 @@
+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, OnInit, inject } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { EntryAdminService, EntryDto, GetEntriesInput } from '../../../proxy/admin/entries';
+import { ColumnMode } from "@swimlane/ngx-datatable";
+import { finalize } from 'rxjs/operators';
+import { SiteAdminService } from '../../../proxy/admin/sites';
+import { SectionAdminService } from '../../../proxy/admin/sections';
+import { entryStatusOptions } from '../../../proxy/entries';
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.theme.shared/extensions';
+import { ECmsComponent } from '../../../enums/ecms-component';
+import { Router } from '@angular/router';
+import { UpdateListService } from '../../../services/update-list.service';
+
+
+@Component({
+  selector: 'cms-entries',
+  templateUrl: './entries.component.html',
+  styleUrls: ['./entries.component.scss'],
+  providers: [
+    ListService,
+    // 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.Entries,
+    },
+  ]
+})
+export class EntriesComponent implements OnInit {
+  
+  constructor(
+    private _EntryAdminService: EntryAdminService,
+    private _SiteAdminService: SiteAdminService,
+    private _SectionAdminService: SectionAdminService,
+    private toaster: ToasterService,
+    private confirmation: ConfirmationService,
+    private configState: ConfigStateService,
+    private router: Router,
+    private _LocalizationService: LocalizationService,
+  ) {
+  }
+
+  private fb=inject(FormBuilder)
+  private _UpdateListService=inject(UpdateListService)
+  public readonly list=inject(ListService)
+
+
+  ngOnInit(): void {
+    this.getPageDate()
+    this._UpdateListService.updateListEvent.subscribe(() => {
+      this.list.get()
+    });
+  }
+
+  /**站点列表 */
+  siteList: any[any] = []
+  /**选择的站点id */
+  siteId: string = ''
+  /**站点下的版块 */
+  SiteOfSectionList: any[any] = []
+
+
+  /**版块下的语言列表 */
+  sectionLanguagesList: any[any] = []
+  /**版块下的条目类型列表 */
+  entryTypeList: any[any] = []
+  /**状态编码 */
+  _entryStatusOptions = entryStatusOptions
+
+  /**获取页面数据 */
+  async getPageDate() {
+    await this.getsiteList()
+    await this.getSiteOfSectionList()
+    await this.getSectionLanguagesList()
+    this.filters=this.filtersForm.value
+    this.hookToQuery()
+  }
+
+  /**切换站点 */
+  async siteIdChange() {
+    await this.getSiteOfSectionList()
+    await this.getSectionLanguagesList()
+    this.resetData()
+  }
+  /**切换板块 */
+  async sectionIdChange() {
+    this.getSectionOfEntryType()
+    await this.getSectionLanguagesList()
+    this.resetData()
+  }
+  /**切换语言 */
+  async cultureChange() {
+    this.resetData()
+  }
+  /**获取站点列表 */
+  getsiteList() {
+    return new Promise((resolve, rejects) => {
+      this._SiteAdminService.getList({}).subscribe(res => {
+        this.siteList = res.items
+        this.filtersForm.get('siteId').patchValue(res.items[0]?.id || '')
+        resolve(res.items)
+      })
+    })
+  }
+
+  /**获取站点下的版块 */
+  getSiteOfSectionList() {
+    return new Promise((resolve, rejects) => {
+      let siteId = this.filtersForm.get('siteId').value
+      this._SectionAdminService.getList({
+        maxResultCount: 1000,
+        siteId: siteId
+      }).subscribe(res => {
+        this.SiteOfSectionList = res.items
+        this.filtersForm.get('sectionId').patchValue(res.items[0]?.id || '')
+        this.getSectionOfEntryType()
+        resolve(res.items)
+      })
+    })
+  }
+
+  /**获取版块下的条目类型 */
+  getSectionOfEntryType() {
+    let sectionId = this.filtersForm.get('sectionId').value
+    this.entryTypeList = this.SiteOfSectionList.find(el => el.id == sectionId)?.entryTypes || []
+  }
+
+  /**获取版块下的语言列表 */
+  getSectionLanguagesList() {
+    return new Promise((resolve, rejects) => {
+      // 板块列表 */
+      let SiteOfSectionList = this.SiteOfSectionList
+      //获取所有语言 */
+      let languages = this.configState.getDeep('localization.languages')
+      //当前选择的板块id
+      let sectionId = this.filtersForm.get('sectionId').value
+      //板块下的语言
+      let sectionOfLanguages = this.SiteOfSectionList.find(el => el.id == sectionId)?.site?.languages || []
+      //获取系统语言 */
+      let systemculture=this.configState.getDeep('localization.currentCulture.name')
+      //获取当前选择的语言
+      let nowculture=this.filtersForm.get('culture').value
+      //当前选择的语言，是否在版块的的语言列表中
+      let isexist=  sectionOfLanguages.find(el=>el.cultureName==nowculture)
+      this.filtersForm.get('culture').patchValue(nowculture?isexist?nowculture:systemculture:systemculture)
+      this.sectionLanguagesList = languages.filter(el => sectionOfLanguages.find(ell => ell.cultureName === el.cultureName))
+      resolve(sectionOfLanguages)
+    })
+  }
+
+
+
+    resetData() {
+      this.filters=this.filtersForm.value
+      this.list.page = 0
+      this.data.items = []
+      this.list.get()
+    }
+
+  /**新增-单个 */
+  createEntriesBtn() {
+    this.router.navigate(['/cms/admin/entries/create'], {
+      queryParams: { cultureName: this.filters.culture, sectionId: this.filters.sectionId, entryTypeId: this.entryTypeList[0].id }
+    })
+  }
+
+  /**列表相关 */
+  ColumnMode = ColumnMode;
+  data: PagedResultDto<EntryDto> = {
+    items: [],
+    totalCount: 0,
+  };
+
+  filters = {} as GetEntriesInput;
+  filtersForm: FormGroup = this.fb.group({
+    siteId: [''],
+    sectionId: [''],
+    culture: [''],
+    filter: [''],
+  })
+
+  hookToQuery() {
+    
+    const getData = (query: ABP.PageQueryParams) => this._EntryAdminService.getList({
+      ...query,
+      ...this.filters,
+    });
+    const setData = (list: PagedResultDto<EntryDto>) => {
+      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._EntryAdminService.delete(row.id).pipe(finalize(() => {
+        })).subscribe(res => {
+          this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+          this.list.get()
+        })
+      }
+
+    });
+  }
+
+
+}

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

@@ -0,0 +1,4 @@
+export * from './entries.component'
+export * from './create.component'
+export * from './edit.component'
+export * from './create-or-edit-entries.component'

package/src/lib/components/admin/fields/create-field.component.html

@@ -0,0 +1,12 @@
+<form class="row g-3 needs-validation" [formGroup]="newEntity" (ngSubmit)="save()">
+    <abp-page [title]="'Cms::CreateField' | abpLocalization" [toolbar]="true">
+        <div class="create-field-page">
+            <button type="submit" style="display: none;" #submitclick></button>
+            <div class="card">
+                <div class="card-body">
+                    <cms-create-or-edit-field [Entity]="newEntity"></cms-create-or-edit-field>
+                </div>
+            </div>
+        </div>
+    </abp-page>
+</form>

package/src/lib/components/admin/fields/create-field.component.scss

@@ -0,0 +1,10 @@
+::ng-deep .create-field-page {
+    .dignite_page {
+        height: calc(100vh - 32px - 53px - 40px);
+        overflow: auto;
+    }
+    .form-control,
+    .form-select {
+        padding: 0.475rem 1.25rem;
+    }
+}

package/src/lib/components/admin/fields/create-field.component.spec.ts

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

package/src/lib/components/admin/fields/create-field.component.ts

@@ -0,0 +1,68 @@
+import { Component, ElementRef, ViewChild, inject } from '@angular/core';
+import { CreateOrUpdateFieldInputBase } from './create-or-update-field-input-base';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ToasterService } from '@abp/ng.theme.shared';
+import { FieldAdminService } from '../../../proxy/admin/fields';
+import { Location } from '@angular/common';
+import { LocalizationService } from '@abp/ng.core';
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.theme.shared/extensions';
+import { ECmsComponent } from '../../../enums';
+import { CmsApiService } from '../../../services';
+import { Router } from '@angular/router';
+import { UpdateListService } from '../../../services/update-list.service';
+
+@Component({
+  selector: 'cms-create-field',
+  templateUrl: './create-field.component.html',
+  styleUrls: ['./create-field.component.scss'],
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.FieldsCreate,
+    },
+  ]
+})
+export class CreateFieldComponent {
+  
+  constructor(
+    private fb: FormBuilder,
+    public _FieldAdminService: FieldAdminService,
+    private toaster: ToasterService,
+    public _location: Location,
+    public _LocalizationService: LocalizationService,
+    public _CmsApiService: CmsApiService,
+    private router: Router,
+   
+  ) { }
+  private _UpdateListService=inject(UpdateListService)
+ 
+  /**表单实体 */
+  newEntity: FormGroup | undefined 
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  ngOnInit(): void {
+    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
+    //Add 'implements OnInit' to the class.
+    this.newEntity= this.fb.group(new CreateOrUpdateFieldInputBase())
+  }
+
+  /**触发提交按钮 */
+  submitclickBtn(){
+    this.submitclick.nativeElement.click()
+  }
+  /**保存表单 */
+  save() {
+    let input = this.newEntity.value
+    if (!this.newEntity.valid) return
+    this._FieldAdminService.create(input).subscribe(res => {
+      this.toaster.success(this._LocalizationService.instant(`CmsKit::SavedSuccessfully`));
+      this.router.navigateByUrl('', { skipLocationChange: true }).then(() => {
+        this.router.navigate([`/cms/admin/fields`]);
+        this._UpdateListService.updateList();
+      });
+    })
+  }
+
+}

package/src/lib/components/admin/fields/create-or-edit-field.component.html

@@ -0,0 +1,39 @@
+<form [formGroup]="_Entity">
+    <div class="mb-2">
+        <label class="form-label" for="groupId">{{'Cms::FieldGroup' | abpLocalization}}</label>
+        <select class="form-select" formControlName="groupId">
+            <option value="">{{'Cms::OptionalGrouping' | abpLocalization}}</option>
+            <ng-container *ngFor="let item of _FieldAbstractsService.fieldGroupList">
+                <option [value]="item.id">{{item.name}}</option>
+            </ng-container>
+        </select>
+    </div>
+    <div class="mb-2">
+        <label class="form-label" for="displayName">{{'DigniteAbpForms::FieldDisplayName' | abpLocalization}}</label>
+        <input type="text" class="form-control" formControlName="displayName" (blur)="disPlayNameInputBlur($event)">
+    </div>
+    <div class="mb-2">
+        <label class="form-label" for="name">{{'DigniteAbpForms::FieldName' | abpLocalization}}</label>
+        <input type="text" class="form-control" formControlName="name" (input)="nameInputBlur($event)">
+        <div class="text-danger invalid-feedback" *ngIf="nameInput.errors?.repetition">
+            {{nameInput.errors?.repetition}}
+        </div>
+        <div class="form-text">{{'DigniteAbpForms::FieldNameHelpText' | abpLocalization}}</div>
+    </div>
+    <div class="mb-2">
+        <label class="form-label" for="description">{{'Cms::Description' | abpLocalization}}</label>
+        <input type="text" class="form-control" formControlName="description">
+    </div>
+    <div class="mb-2">
+        <label class="form-label" for="formControlName">{{'Cms::FieldType' | abpLocalization}}</label>
+        <select class="form-select" formControlName="formControlName" (change)="formControlNameChange()">
+            <ng-container *ngFor="let item of _FieldAbstractsService.fromControlList;let i =index">
+                <option [value]="item.name">{{item.displayName}}</option>
+            </ng-container>
+        </select>
+    </div>
+    <ng-container *ngIf="_Entity.value.formControlName&&_Entity"> 
+        <df-dynamic [type]="_Entity.value.formControlName" [entity]="_Entity" [selected]="_selected"></df-dynamic>
+    </ng-container>
+
+</form>

package/src/lib/components/admin/fields/create-or-edit-field.component.spec.ts

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