@dignite-ng/expand.cms 0.0.51 → 0.0.52

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

@@ -0,0 +1,424 @@
+import { EXTENSIONS_IDENTIFIER } from "@abp/ng.components/extensible";
+import { LocalizationService } from "@abp/ng.core";
+import { ToasterService } from "@abp/ng.theme.shared";
+import { Component, ElementRef, inject, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, FormGroup, FormArray } from "@angular/forms";
+import { ActivatedRoute } from "@angular/router";
+import { FieldGroupAdminService, FieldAdminService } from "../../../../proxy/admin/fields";
+import { EntryTypeAdminService } from "../../../../proxy/admin/sections";
+import { CmsApiService } from "../../../../services";
+import { UpdateListService } from "../../../../services/update-list.service";
+import { CreateOrEditEntryTypeInputBase, fieldTabsBase, fieldsBase } from "./create-or-edit.-entry-type-input-base";
+import { Location } from '@angular/common';
+import { ECmsComponent } from "../../../../enums";
+import { ValidatorsService } from "../../../../services/validators.service";
+@Component({
+  selector: 'cms-create-or-edit',
+  templateUrl: './create-or-edit.component.html',
+  styleUrls: ['./create-or-edit.component.scss'],
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: ECmsComponent.SectionsCreateOrEdit,
+    },
+  ],
+})
+export class CreateOrEditComponent implements OnInit {
+  constructor(
+    private toaster: ToasterService,
+    public _location: Location,
+    private route: ActivatedRoute,
+    public _FieldGroupAdminService: FieldGroupAdminService,
+    public _FieldAdminService: FieldAdminService,
+    public _EntryTypeAdminService: EntryTypeAdminService,
+    public _LocalizationService: LocalizationService,
+    public _CmsApiService: CmsApiService
+  ) {}
+  private fb = inject(FormBuilder);
+  private _UpdateListService = inject(UpdateListService);
+  /**表单实体 */
+  newEntity: FormGroup | undefined = this.fb.group(new CreateOrEditEntryTypeInputBase());
+  /**版块id */
+  sectionId: string = '';
+  /**条目类型id */
+  entryTypesId: string = '';
+  /**条目类型详情 */
+  entryTypesSelect: any;
+
+  get fieldTabs() {
+    return this.newEntity.get('fieldTabs') as FormArray;
+  }
+
+  /**获取提交按钮替身，用于真实触发表单提交 */
+  @ViewChild('submitclick', { static: true }) submitclick: ElementRef;
+
+  /**触发提交按钮 */
+  submitclickBtn() {
+    this.submitclick.nativeElement.click();
+  }
+  ngOnInit() {
+    let sectionId = this.route.snapshot.params.sectionsId;
+    this.entryTypesId = this.route.snapshot.params.entryTypesId || '';
+    if (sectionId) {
+      this.sectionId = sectionId;
+      this.addControlToFieldTabs();
+      this.getFieldGroup();
+    }
+  }
+
+  /**给fieldTabs添加新控件 */
+  addControlToFieldTabs(nameValue = '') {
+    const newFormGroup = this.fb.group(
+      new fieldTabsBase({
+        name:
+          this.fieldTabs.length === 0
+            ? this._LocalizationService.instant(`Cms::FieldTab`)
+            : nameValue,
+      })
+    );
+    this.fieldTabs.push(newFormGroup);
+    this.resultSource.push(newFormGroup.value);
+    this.navActive = this.resultSource.length - 1;
+  }
+
+  /**获取字段分组 */
+  getFieldGroup() {
+    this._FieldGroupAdminService.getList({}).subscribe(async res => {
+      let fieldList: any = await this.getFieldList();
+      let fieldGroupList = res.items;
+      fieldGroupList.unshift({
+        id: null,
+        name: 'UngroupedFields',
+      });
+      fieldGroupList.forEach((el: any, index) => {
+        el.fields = fieldList.filter(els => els.groupId === el.id);
+      });
+      this.fieldGroupList = fieldGroupList;
+      this.fieldList = this.deepClone(fieldList);
+      let entryTypesId = this.entryTypesId;
+      if (entryTypesId) {
+        this.entryTypesId = entryTypesId;
+        this.getEntryTypes();
+      }
+    });
+  }
+  /**获取条目类型详情 */
+  getEntryTypes() {
+    let fieldList: any = this.deepClone(this.fieldList);
+    this._EntryTypeAdminService.get(this.entryTypesId).subscribe(res => {
+      res.fieldTabs.forEach(el => {
+        el.fields.forEach((eld: any) => {
+          eld.id = eld.fieldId;
+          eld.groupId = fieldList.find(elfd => elfd.id == eld.fieldId).groupId;
+          this.formRightGroup.push(eld);
+          let fieldindex = fieldList.findIndex(elfl => elfl.id == eld.fieldId);
+          fieldList.splice(fieldindex, 1);
+        });
+      });
+      this.fieldGroupList.forEach((el: any, index) => {
+        el.fields = fieldList.filter(els => els.groupId === el.id);
+      });
+      this.newEntity.patchValue(res);
+      this.entryTypesSelect = res;
+      this.resultSource = res.fieldTabs;
+    });
+  }
+  /**
+   * 深拷贝--方法
+   * $api.deepClone()  */
+  deepClone(obj: any) {
+    if (typeof obj !== 'object' || obj === null) return obj;
+    const result = Array.isArray(obj) ? [] : {};
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        if (typeof obj[key] === 'object' && obj[key] !== null) {
+          if (obj[key] instanceof Date) {
+            result[key] = new Date(obj[key].getTime());
+          } else if (obj[key] instanceof RegExp) {
+            result[key] = new RegExp(obj[key]);
+          } else {
+            result[key] = this.deepClone(obj[key]);
+          }
+        } else {
+          result[key] = obj[key];
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   *
+   * @param nameValue 获取所有字段
+   */
+  getFieldList() {
+    return new Promise((resolve, rejects) => {
+      this._FieldAdminService
+        .getList({
+          maxResultCount: 1000,
+        })
+        .subscribe((res: any) => {
+          res.items.forEach(el => {
+            el.required = false;
+            el.showOnList = false;
+          });
+          resolve(res.items);
+        });
+    });
+  }
+
+  /**
+   * 拖拽 功能*/
+  /**数据源 */
+  /**数据源-字段分组数据-包含字段数据 fields */
+  fieldGroupList: any[] = [];
+  /**数据源-所有字段列表 */
+  fieldList: any[] = [];
+  /**数据源拖拽的分组下标 */
+  DataSourceGroupIndex: number;
+  /**数据源拖拽的字段下标 */
+  DataSourceFieldIndex: number;
+  /**目标源 结果*/
+  resultSource: any[] = [];
+
+  /**从数据源拖拽的元素 */
+  fromDataSourceDragEl: any;
+  /**从目标源拖拽的元素 */
+  fromResultSourceDragEl: any;
+
+  /**来自数据源的集合，用于从目标源拖回数据源时的判断，与取值 */
+  formRightGroup: any[] = [];
+  /**从数据源开始拖拽 */
+  fromDataSourceDragStart(element, fieldIndex, groupIndex) {
+    this.fromDataSourceDragEl = element;
+    this.DataSourceFieldIndex = fieldIndex;
+    this.DataSourceGroupIndex = groupIndex;
+    this.fromResultSourceDragEl = undefined;
+  }
+  /**从目标源开始拖拽 */
+  fromResultSourceDragStart(element) {
+    this.fromResultSourceDragEl = element;
+    this.fromDataSourceDragEl = undefined;
+    this.DataSourceFieldIndex = undefined;
+    this.DataSourceGroupIndex = undefined;
+  }
+  /**拖拽到数据源时触发 */
+  dragToDataSourceDropped() {
+    //从数据源拖拽到数据源-排序
+    if (this.fromDataSourceDragEl) {
+    }
+    let _fromResultSourceDragEl = this.fromResultSourceDragEl;
+    let formRightGroup = this.deepClone(this.formRightGroup);
+    let fieldList = this.deepClone(this.fieldList);
+
+    if (_fromResultSourceDragEl) {
+      //移动
+      //从目标源拖拽到数据源
+      // 拖拽目标源的下标
+      let dragResultSourceIndex = this.resultSource[this.navActive].fields.findIndex(
+        el => el.id == _fromResultSourceDragEl.id
+      );
+      //删除目标源中的数据
+      this.resultSource[this.navActive].fields.splice(dragResultSourceIndex, 1);
+      formRightGroup.splice(
+        formRightGroup.findIndex(el => el.id == _fromResultSourceDragEl.id),
+        1
+      );
+      this.fieldGroupList.forEach(el => {
+        if (el.id == _fromResultSourceDragEl.groupId) {
+          const elFieldsAll = fieldList.filter(els => els.groupId === el.id);
+          el.fields = elFieldsAll.filter(
+            item => !formRightGroup.some(itemB => item.id === itemB.id)
+          );
+        }
+      });
+      this.formRightGroup = formRightGroup;
+    }
+
+    this.setfieldTabsFrom();
+  }
+  /**拖拽到目标源时触发
+   *
+   */
+  dragToResultSourceDropped(fieldTabstem: any, fieldTabsIndex) {
+    const _fromDataSourceDragEl = this.fromDataSourceDragEl;
+    //从数据源拖拽到目标源
+    if (_fromDataSourceDragEl) {
+      this.fieldGroupList[this.DataSourceGroupIndex].fields.splice(this.DataSourceFieldIndex, 1);
+      this.resultSource[fieldTabsIndex].fields.push(_fromDataSourceDragEl);
+      this.formRightGroup.push(_fromDataSourceDragEl);
+    }
+
+    this.setfieldTabsFrom();
+  }
+  /** 从目标源拖拽到目标源*/
+  dragToResultSourceItemDropped(fieldsIndex) {
+    const _fromResultSourceDragEl = this.fromResultSourceDragEl;
+    if (_fromResultSourceDragEl) {
+      // 拖拽目标源的下标
+      let dragResultSourceIndex = this.resultSource[this.navActive].fields.findIndex(
+        el => el.id == _fromResultSourceDragEl.id
+      );
+      //删除目标源中的数据
+      this.resultSource[this.navActive].fields.splice(dragResultSourceIndex, 1);
+      this.resultSource[this.navActive].fields.splice(fieldsIndex, 0, _fromResultSourceDragEl);
+    }
+    this.setfieldTabsFrom();
+  }
+  /**设置formA表单 */
+  setfieldTabsFrom() {
+    let setArray = [];
+    this.resultSource.forEach(el => {
+      let fieldsArray = [];
+      el.fields.forEach(item => {
+        fieldsArray.push({
+          fieldId: item.id || item.fieldId,
+          displayName: item.displayName,
+          required: item?.required,
+          showOnList: item?.showOnList,
+        });
+      });
+      setArray.push({
+        name: el.name,
+        fields: fieldsArray,
+      });
+    });
+    this.newEntity.patchValue({
+      fieldTabs: setArray,
+    });
+  }
+  private _ValidatorsService = inject(ValidatorsService);
+  /**表单验证状态
+   * {
+   *  title:true,
+   * }
+   */
+  formValidation: any = '';
+
+  /**保存表单 */
+  save() {
+    let input = this.newEntity.value;
+
+    this.formValidation = this._ValidatorsService.getFormValidationStatus(this.newEntity);
+    if (this._ValidatorsService.isCheckForm(this.formValidation,'Cms')) return;
+    
+    if (this.entryTypesSelect) {
+      this._EntryTypeAdminService.update(this.entryTypesSelect.id, input).subscribe(res => {
+        this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+        this._location.back();
+        this._UpdateListService.updateList();
+      });
+      return;
+    }
+    input.sectionId = this.sectionId;
+    this._EntryTypeAdminService.create(input).subscribe(res => {
+      this.toaster.success(this._LocalizationService.instant(`AbpUi::SuccessfullyDeleted`));
+      this._location.back();
+      this._UpdateListService.updateList();
+    });
+  }
+  /**编辑Tabs表单 */
+  editFieldTabsFrom: FormGroup | undefined;
+  /**模态框状态 */
+  visibleTabsOpen: boolean = false;
+  /**是否是忙碌状态 */
+  modalBusy: boolean = false;
+  /**正在编辑的tabs */
+  editFieldTabsSelect: any;
+  /**正在选中的nav */
+  navActive: any = 0;
+
+  /**表单控件模板-动态赋值表单控件 */
+  @ViewChild('editFieldTabsModalSubmitBtn', { static: false })
+  editFieldTabsModalSubmitBtn: ElementRef;
+
+  /**模态框状态改变回调 */
+  VisibleTabsChange(event) {
+    if (!event) {
+      this.editFieldTabsSelect = '';
+      return;
+    }
+  }
+  /**新建增加FieldTabs */
+  addFieldTabs() {
+    this.editFieldTabsFrom = this.fb.group(new fieldTabsBase());
+    this.visibleTabsOpen = true;
+  }
+  /**正在编辑的tab下标 */
+  newEditFieldTabsIndex: number;
+  /**编辑FieldTabs */
+  editFieldTabs(item, i) {
+    this.editFieldTabsFrom = this.fb.group(
+      new fieldTabsBase({
+        name: item.name,
+      })
+    );
+    this.editFieldTabsSelect = item;
+    this.visibleTabsOpen = true;
+    this.newEditFieldTabsIndex = i;
+  }
+
+  /**保存编辑tabs表单 */
+  editFieldTabsSave() {
+    //编辑
+    if (this.editFieldTabsSelect) {
+      this.resultSource[this.newEditFieldTabsIndex].name = this.editFieldTabsFrom.value.name;
+      this.navActive = this.newEditFieldTabsIndex;
+    } else {
+      //新建
+      this.addControlToFieldTabs(this.editFieldTabsFrom.value.name);
+    }
+    this.visibleTabsOpen = false;
+    this.setfieldTabsFrom();
+  }
+  /**删除某个tabs表单 */
+  deleteFieldTabs(index) {
+    this.fieldTabs.removeAt(index);
+    this.resultSource.splice(index, 1);
+  }
+
+  /**编辑字段模态框状态 */
+  visibleEditFieldOpen: boolean = false;
+  /**编辑字段模态框表单 */
+  editFieldFrom: FormGroup | undefined;
+  /**表单控件模板-动态赋值表单控件-编辑字段 */
+  @ViewChild('editFieldModalSubmitBtn', { static: false }) editFieldModalSubmitBtn: ElementRef;
+  /**正在编辑的字段下标 */
+  EditFieldIndex: number;
+  /**编辑字段模态框状态状态改变回调 */
+  VisibleEditFieldChange(event) {
+    if (!event) {
+      this.EditFieldIndex = undefined;
+      return;
+    }
+  }
+  /**打开编辑字段模态框 */
+  EditFieldModalOpen(items, elIndex) {
+    this.visibleEditFieldOpen = true;
+    this.EditFieldIndex = elIndex;
+    this.editFieldFrom = this.fb.group(
+      new fieldsBase(this.fieldTabs.value[this.navActive].fields[elIndex])
+    );
+  }
+  /**保存编辑字段 */
+  editFieldSave() {
+    let input = this.editFieldFrom.value;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].displayName = input.displayName;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].required = input.required;
+    this.resultSource[this.navActive].fields[this.EditFieldIndex].showOnList = input.showOnList;
+    this.visibleEditFieldOpen = false;
+    this.setfieldTabsFrom();
+  }
+
+  /**name表单控件 */
+  get nameInput() {
+    return this.newEntity.get('name');
+  }
+  /**字段标签input失去标点生成字段名字 */
+  disPlayNameInputBlur(event) {
+    let value = event.target.value;
+    let pinyin = this._CmsApiService.chineseToPinyin(value);
+    let nameInput = this.nameInput;
+    if (nameInput.value) return;
+    nameInput.patchValue(pinyin);
+  }
+}

package/src/lib/components/admin/sections/entry-types/index.ts

@@ -0,0 +1,2 @@
+export * from './create-or-edit.-entry-type-input-base'
+export * from './create-or-edit.component'

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

@@ -0,0 +1,3 @@
+export * from './sections.component'
+export * from './entry-types'
+export * from './create-or-update-sections-input-base'

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

@@ -0,0 +1,188 @@
+<abp-page [title]="'Cms::Sections' | abpLocalization" [toolbar]="true">
+    <div class="sections-page">
+        <div class="card " >
+            <div class="card-body px-2 py-sm-2 border-bottom">
+                <div class="row align-items-end">
+                    <div class="mb-2 col-3">
+                        <label class="form-label">{{'Cms::IsActive' | abpLocalization}}：</label>
+                        <select class="form-select col-auto" [(ngModel)]="filters.isActive" (change)="siteIdChange()">
+                            <option [value]=""></option>
+                            <option [value]="true">是</option>
+                            <option [value]="false">否</option>
+                        </select>
+                    </div>
+                    <div class="mb-2 col-3">
+                        <label class="form-label">{{'AbpUi::Search' | abpLocalization}}：</label>
+                        <input type="text" class="form-control" [(ngModel)]="filters.filter"
+                        [placeholder]="'AbpUi::Search' | abpLocalization" />
+                    </div>
+                    <div class="mb-2 col-4">
+                        <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>
+        <div class="card mb-0">
+            <div class="card-body p-0">
+                <div class="table-responsive table-fixed-header">
+                    <ngx-datatable class="material " [rows]="data.items" [list]="list"
+                        [columnMode]="ColumnMode.force" [headerHeight]="50" [footerHeight]="50" rowHeight="auto"
+                        [virtualization]="false" [externalPaging]="true" [count]="data.totalCount" [scrollbarH]="true">
+                        <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::SectionType' | abpLocalization" prop="type" [width]="80">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                {{('Cms::Enum:SectionType:'+_SectionType[value]) | abpLocalization}}
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [name]="'Cms::IsDefault' | abpLocalization" prop="isDefault" [width]="60">
+                            <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::IsActive' | abpLocalization" prop="isActive" [width]="60">
+                            <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::EntryType' | abpLocalization" prop="SiteId" [width]="100">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                <div ngbDropdown container="body">
+                                    <button type="button" class="btn btn-link" ngbDropdownToggle id="dropdownBasic1">
+                                        {{'Cms::EntryType' | abpLocalization}}
+                                    </button>
+                                    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                                        <ng-container *ngFor="let item of row.entryTypes;let i =index">
+                                            <li ngbDropdownItem
+                                                class="d-flex align-items-center justify-content-between" [routerLink]="'/cms/admin/sections/'+row.id+'/entry-types/'+item.id+'/edit'"
+                                                >{{item.displayName}}
+                                                <button class="btn btn-light btn-sm p-0"
+                                                    (click.stop)="deleteEntryType(item)"><i class="fas fa-trash p-sm-1"
+                                                        style="font-size: 12px;" role="button"></i></button>
+                                            </li>
+                                        </ng-container>
+                                        <li ngbDropdownItem [routerLink]="'/cms/admin/sections/'+row.id+'/entry-types/create'"><i
+                                                class="fas fa-plus-circle me-2"></i>{{'Cms::New' |
+                                            abpLocalization}}</li>
+                                    </div>
+                                </div>
+                            </ng-template>
+                        </ngx-datatable-column>
+                        <ngx-datatable-column [name]="'Cms::CreationTime' | abpLocalization" prop="creationTime" [minWidth]="190">
+                            <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"  [name]="'AbpUi::Actions' | abpLocalization"   [frozenLeft]="true" [width]="110" [maxWidth]="110">
+                            <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
+                                <div ngbDropdown container="body">
+                                    <button type="button" class="btn btn-primary btn-sm" ngbDropdownToggle>
+                                        <i class="me-1 fa fa-cog"></i> {{'AbpUi::Actions' | abpLocalization}}
+                                    </button>
+                                    <div ngbDropdownMenu>
+                                        <button ngbDropdownItem (click)="editSectionBtn(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>
+<abp-modal [(visible)]="visibleOpen" [busy]="modalBusy" (visibleChange)="VisibleChange($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" [formGroup]="createOrEditForm" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}"  (submit)="createOrEditSave()">
+                <button type="submit" #createOrEditModalSubmitBtn style="display: none"></button>
+                <div class="mb-2">
+                    <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-2">
+                    <label class="form-label">{{'Cms::DisplayName' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="displayName"
+                        (blur)="disPlayNameInputBlur($event)" placeholder="" />
+                </div>
+                <div class="mb-2">
+                    <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-2">
+                    <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>
+                    <div class="form-text">
+                        {{'Cms::RouteTips' | abpLocalization}}<br>
+                        &nbsp;&nbsp;blog<br>
+                        &nbsp;&nbsp;{{'blog/{slug}'}}<br>
+                        &nbsp;&nbsp;{{'blog/{publishTime:yyyy}/{publishTime:MM}/{slug}'}}
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::Template' | abpLocalization}} </label>
+                    <input type="text" class="form-control" formControlName="template" placeholder="" />
+                    <div class="form-text">
+                        {{"Cms::TemplateTips" | abpLocalization}}
+                    </div>
+                </div>
+                <div class="mb-2">
+                    <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-2">
+                    <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" (click)="createOrEditModalSubmitBtn.nativeElement.click()">{{'AbpUi::Save' |
+            abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

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

@@ -0,0 +1 @@
+::ng-deep.sections-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:.475rem 3.75rem .475rem 1.25rem}}}::ng-deep.sites-modal-form{.form-control{padding:.4rem 1.25rem}}

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

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