@dignite-ng/expand.cms 0.0.18 → 0.0.20

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

@@ -0,0 +1,111 @@
+
+import { ABP, LIST_QUERY_DEBOUNCE_TIME, ListService, LocalizationService, PagedResultDto } from '@abp/ng.core';
+import { ToasterService, ConfirmationService, Confirmation } from '@abp/ng.theme.shared';
+import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { FieldAdminService, FieldDto, GetFieldsInput } from '../../../proxy/admin/fields';
+import { ColumnMode } from "@swimlane/ngx-datatable";
+import { finalize } from 'rxjs/operators';
+import { EXTENSIONS_IDENTIFIER } from '@abp/ng.theme.shared/extensions';
+import { ECmsComponent } from '../../../enums';
+import { CmsApiService } from '../../../services';
+import { UpdateListService } from '../../../services/update-list.service';
+
+@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 _CmsApiService: CmsApiService,
+  ) {
+    
+  }
+  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::SuccessfullyDeleted`));
+          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,4 @@
+export * from './entries'
+export * from './fields'
+export * from './sites'
+export * from './sections'

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

@@ -0,0 +1,36 @@
+
+import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+
+export class CreateOrUpdateSectionsInputBase {
+    /**版块类型 */
+    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, []];
+   
+
+
+    constructor(data?: CreateOrUpdateSectionsInputBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+    }
+}

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

@@ -0,0 +1,79 @@
+import { FormArray, FormBuilder, FormControl, FormGroup, 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*/
+    showOnList: any = [false, []];
+
+    constructor(data?: fieldsBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+    }
+}
+
+export class fieldsInputBase {
+    /**字段id */
+    fieldId = ['', [Validators.required]];
+    /**显示名称 Display name of this field */
+    displayName: any = ['', [Validators.required]];
+
+    /**是否必填 Unique Name*/
+    required: any = [false, []];
+    /**在列表中展示 Unique Name*/
+    showOnList: any = [false, []];
+    constructor(data?: fieldsInputBase) {
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
+            }
+        }
+
+    }
+}
+

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

@@ -0,0 +1,191 @@
+<form class="row g-3 needs-validation" [formGroup]="newEntity" (ngSubmit)="save()">
+    <abp-page [title]="entryTypesId ? ('AbpUi::Edit' | abpLocalization):('Cms::New' | abpLocalization)" [toolbar]="true">
+        <div class="create-or-edit-entry-type-page">
+            <div class="card">
+                <button type="submit" style="display: none;" #submitclick></button>
+                <div class="card-body">
+                    <div class="">
+                        <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>
+                        <div formArrayName="fieldTabs">
+                            <div class="mb-2">
+                                <label class="form-label">{{'Cms::FieldLayout' | abpLocalization}}</label>
+                                <div class="container">
+                                    <!--  -->
+                                    <div class="row">
+                                        <div class="col-sm-8">
+                                            <ul ngbNav #nav="ngbNav" [(activeId)]="navActive" class="nav nav-tabs">
+                                                <ng-container *ngFor="let item of resultSource; let i = index">
+                                                    <li [ngbNavItem]="i">
+                                                        <button type="button" ngbDropdown ngbNavLink>
+                                                            {{ item.name }}
+                                                            <span class="ms-1" (click.stop)="$event.stopPropagation()"
+                                                                ngbDropdownToggle></span>
+                                                            <div ngbDropdownMenu style="z-index: 999;">
+                                                                <li ngbDropdownItem type="button"
+                                                                    (click.stop)="editFieldTabs(item,i)">
+                                                                    <i class="fas fa-edit"></i>
+                                                                    {{'AbpUi::Edit' | abpLocalization}}
+                                                                </li>
+                                                                <li ngbDropdownItem
+                                                                    *ngIf="resultSource.length !== 1" type="button"
+                                                                    (click.stop)="deleteFieldTabs(i)">
+                                                                    <i class="fas fa-trash"></i>
+                                                                    {{'AbpUi::Delete' | abpLocalization}}
+                                                                </li>
+                                                            </div>
+                                                        </button>
+                                                        <ng-template ngbNavContent>
+                                                            <div class="p-2" ondragover="event.preventDefault();"
+                                                                (drop)="dragToResultSourceDropped(item,i)" style="height: 100%;">
+                                                                <p class="form-text" *ngIf="item.fields.length === 0">
+                                                                    {{'Cms::DragAndDropFieldTips' | abpLocalization}}
+                                                                </p>
+                                                                <ul class="list-group" style="height: 100%;">
+                                                                    <ng-container
+                                                                        *ngFor="let el of item.fields; let iel = index">
+                                                                        <li draggable="true"
+                                                                            (dragstart)="fromResultSourceDragStart(el)"
+                                                                            (drop)="dragToResultSourceItemDropped(iel)"
+                                                                            class="list-group-item d-flex align-items-center justify-content-between py-1" style="position: unset;">
+                                                                            {{ el.displayName }}
+                                                                            <button class="p-0 btn btn-sm btn-light"
+                                                                                (click.stop)="EditFieldModalOpen(el,iel)"
+                                                                                type="button"><i
+                                                                                    class="fas fa-wrench p-sm-1"
+                                                                                    role="button"></i></button>
+                                                                        </li>
+                                                                    </ng-container>
+                                                                </ul>
+                                                                
+                                                            </div>
+                                                        </ng-template>
+                                                    </li>
+                                                </ng-container>
+                                                <li class="nav-item" role="presentation">
+                                                    <button type="button" class="nav-link"
+                                                        (click.stop)="addFieldTabs()">
+                                                        <i class="fas fa-plus-circle"></i>
+                                                        {{'Cms::NewTab' | abpLocalization}}
+                                                    </button>
+                                                </li>
+                                            </ul>
+                                            <div [ngbNavOutlet]="nav" class="mt-2 bordernNavs p-0"></div>
+                                        </div>
+                                        <div class="col-sm-4">
+                                            <div ngbAccordion #accordion="ngbAccordion"
+                                                ondragover="event.preventDefault();" (drop)="dragToDataSourceDropped()"
+                                                style="min-height: 80px;">
+                                                <ng-container *ngFor="let item of fieldGroupList; let i = index">
+                                                    <div [ngbAccordionItem]="item.name" *ngIf="item.fields.length > 0">
+                                                        <h2 ngbAccordionHeader>
+                                                            <button ngbAccordionButton>{{
+                                                                ('Cms::'+item.name) | abpLocalization }}</button>
+                                                        </h2>
+                                                        <div ngbAccordionCollapse>
+                                                            <div ngbAccordionBody>
+                                                                <ng-template>
+                                                                    <ul class="list-group">
+                                                                        <ng-container
+                                                                            *ngFor="let el of item.fields; let ii = index">
+                                                                            <li draggable="true"
+                                                                                (dragstart)="fromDataSourceDragStart(el,ii,i)"
+                                                                                class="list-group-item">
+                                                                                {{ el.displayName }}
+                                                                            </li>
+                                                                        </ng-container>
+                                                                    </ul>
+                                                                </ng-template>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </ng-container>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+
+                </div>
+            </div>
+
+
+        </div>
+    </abp-page>
+
+</form>
+
+<abp-modal [(visible)]="visibleTabsOpen" [busy]="modalBusy" (visibleChange)="VisibleTabsChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{ editFieldTabsSelect ? ('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="editFieldTabsFrom; else loaderRef">
+            <form class="sites-modal-form" [formGroup]="editFieldTabsFrom" (ngSubmit)="editFieldTabsSave()">
+                <button type="submit" #editFieldTabsModalSubmitBtn style="display: none"></button>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::Name' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="name" placeholder="" />
+                </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" [disabled]="!editFieldTabsFrom.valid"
+            (click)="editFieldTabsModalSubmitBtn.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>
+
+
+<abp-modal [(visible)]="visibleEditFieldOpen" [busy]="modalBusy" (visibleChange)="VisibleEditFieldChange($event)">
+    <ng-template #abpHeader>
+        <h3>{{'AbpUi::Edit' | 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="editFieldFrom; else loaderRef">
+            <form class="sites-modal-form" [formGroup]="editFieldFrom" (ngSubmit)="editFieldSave()">
+                <button type="submit" #editFieldModalSubmitBtn style="display: none"></button>
+                <div class="mb-2">
+                    <label class="form-label">{{'Cms::DisplayName' | abpLocalization}}</label>
+                    <input type="text" class="form-control" formControlName="displayName" placeholder="" />
+                </div>
+                <div class="mb-2">
+                    <div class="form-check form-check-inline">
+                        <input class="form-check-input" type="checkbox" value="true" formControlName="required"
+                            id="required" />
+                        <label class="form-check-label" for="required"> {{'Cms::Required' | 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="showOnList"
+                            id="showOnList" />
+                        <label class="form-check-label" for="showOnList"> {{'Cms::ShowOnList' | 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" [disabled]="!editFieldFrom.valid"
+            (click)="editFieldModalSubmitBtn.nativeElement.click()">{{'AbpUi::Save' | abpLocalization}}</abp-button>
+    </ng-template>
+</abp-modal>

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

@@ -0,0 +1,24 @@
+::ng-deep .create-or-edit-entry-type-page {
+    .dignite_page {
+        height: calc(100vh - 32px - 53px - 40px);
+        overflow: auto;
+    }
+
+    .form-control,
+    .form-select {
+        padding: 0.475rem 1.25rem;
+    }
+    .cursor-move{
+        cursor: move;
+    }
+    .bordernNavs{
+        border: var(--bs-border-width) solid var(--lpx-border-color);
+        padding-left: inherit;
+        padding-right: inherit;
+        height: calc(100% - 60px);
+    }
+    .tab-pane{
+        height: 100%;
+    }
+}
+

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

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