@dignite-ng/expand.cms 0.0.50 → 0.0.52

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

@@ -0,0 +1,32 @@
+
+import {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, 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,187 @@
+<form class="row g-3 needs-validation" [formGroup]="newEntity" (keydown.enter)="$event.preventDefault()" [class]="{'was-validated':formValidation}"  (submit)="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" (keydown.enter)="$event.preventDefault()" (submit)="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" (keydown.enter)="$event.preventDefault()" (submit)="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 @@
+::ng-deep .create-or-edit-entry-type-page{.dignite_page{height:calc(100vh - 32px - 53px - 40px);overflow:auto}.form-control,.form-select{padding:.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();
+  });
+});