#24173 Create dialog for 'Create Page' button - feedback

dotCMS · Mar 3, 2023 · f4d3394 · f4d3394
1 parent 0f20efc
commit f4d3394
Show file tree

Hide file tree

Showing 10 changed files with 88 additions and 64 deletions.
diff --git a/...rtlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.html b/...rtlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.html
@@ -10,10 +10,10 @@
     />
 </div>
 
-<div class="dot-pages-create-page-dialog__page-types-container" *ngIf="vm$ | async as vm">
+<div class="dot-pages-create-page-dialog__page-types-container">
     <div
         class="dot-pages-create-page-dialog__page-item"
-        *ngFor="let item of vm.pageTypes; let i = index"
+        *ngFor="let item of pageTypes; let i = index"
         (click)="goToCreatePage(item.variable)"
     >
         <dot-icon [name]="item.icon" size="18"></dot-icon>

diff --git a/...ets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.spec.ts b/...ets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.spec.ts
@@ -2,7 +2,7 @@ import { of } from 'rxjs';
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { DebugElement } from '@angular/core';
-import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 
@@ -102,6 +102,12 @@ describe('DotPagesCreatePageDialogComponent', () => {
                         }
                     }
                 },
+                {
+                    provide: DynamicDialogConfig,
+                    useValue: {
+                        data: [{ ...mockContentType }]
+                    }
+                },
                 { provide: DotPageStore, useClass: storeMock },
                 {
                     provide: ActivatedRoute,
@@ -148,8 +154,9 @@ describe('DotPagesCreatePageDialogComponent', () => {
         ).toBe('18');
     });
 
-    it('should load pages types data when init', () => {
-        expect(store.getPageTypes).toHaveBeenCalledWith('');
+    it('should set pages types data when init', () => {
+        expect(fixture.componentInstance.pageTypes).toEqual([{ ...mockContentType }]);
+        expect(fixture.componentInstance.pageTypesBackup).toEqual([{ ...mockContentType }]);
     });
 
     it('should redirect url when click on page', () => {
@@ -159,13 +166,12 @@ describe('DotPagesCreatePageDialogComponent', () => {
         expect(dialogRef.close).toHaveBeenCalled();
     });
 
-    it('should call App filter on search', fakeAsync(() => {
+    it('should call App filter on search', () => {
         const input = de.query(
             By.css(`[data-testId="dot-pages-create-page-dialog__keyword-input"]`)
         );
         input.nativeElement.value = 'test';
         input.nativeElement.dispatchEvent(new Event('keyup'));
-        tick(550);
-        expect(store.getPageTypes).toHaveBeenCalledWith('test');
-    }));
+        expect(fixture.componentInstance.pageTypes).toEqual([]);
+    });
 });
diff --git a/...portlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.ts b/...portlets/dot-pages/dot-pages-create-page-dialog/dot-pages-create-page-dialog.component.ts
@@ -1,19 +1,12 @@
-import { fromEvent, Observable, Subject } from 'rxjs';
+import { fromEvent, Subject } from 'rxjs';
 
 import { CommonModule } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    OnDestroy,
-    OnInit,
-    ViewChild
-} from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 
-import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { InputTextModule } from 'primeng/inputtext';
 
-import { debounceTime, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 
 import { DotAutofocusModule } from '@directives/dot-autofocus/dot-autofocus.module';
 import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
@@ -24,10 +17,9 @@ import {
     DotPageTypesService,
     DotWorkflowsActionsService
 } from '@dotcms/data-access';
+import { DotCMSContentType } from '@dotcms/dotcms-models';
 import { DotIconModule } from '@dotcms/ui';
 
-import { DotPagesState, DotPageStore } from '../dot-pages-store/dot-pages.store';
-
 @Component({
     selector: 'dot-pages-create-page-dialog',
     standalone: true,
@@ -45,22 +37,23 @@ import { DotPagesState, DotPageStore } from '../dot-pages-store/dot-pages.store'
         DotWorkflowsActionsService
     ],
     templateUrl: './dot-pages-create-page-dialog.component.html',
-    styleUrls: ['./dot-pages-create-page-dialog.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    styleUrls: ['./dot-pages-create-page-dialog.component.scss']
 })
 export class DotPagesCreatePageDialogComponent implements OnInit, OnDestroy {
     @ViewChild('searchInput', { static: true }) searchInput: ElementRef;
 
-    vm$: Observable<DotPagesState> = this.store.vm$;
+    pageTypes: DotCMSContentType[];
+    pageTypesBackup: DotCMSContentType[];
 
     private destroy$: Subject<boolean> = new Subject<boolean>();
 
     constructor(
-        private store: DotPageStore,
         private dotRouterService: DotRouterService,
-        private ref: DynamicDialogRef
+        private ref: DynamicDialogRef,
+        public config: DynamicDialogConfig
     ) {
-        this.store.getPageTypes('');
+        this.pageTypes = this.config.data;
+        this.pageTypesBackup = [...this.pageTypes];
     }
 
     /**
@@ -76,9 +69,17 @@ export class DotPagesCreatePageDialogComponent implements OnInit, OnDestroy {
 
     ngOnInit(): void {
         fromEvent(this.searchInput.nativeElement, 'keyup')
-            .pipe(debounceTime(400), takeUntil(this.destroy$))
+            .pipe(takeUntil(this.destroy$))
             .subscribe(({ target }: Event) => {
-                this.store.getPageTypes(target['value']);
+                if (target['value'].length) {
+                    this.pageTypes = this.pageTypesBackup.filter((pageType: DotCMSContentType) =>
+                        pageType.name
+                            .toLocaleLowerCase()
+                            .includes(target['value'].toLocaleLowerCase())
+                    );
+                } else {
+                    this.pageTypes = [...this.pageTypesBackup];
+                }
             });
     }
 

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.spec.ts
@@ -250,12 +250,12 @@ describe('DotPageStore', () => {
         spyOn(dotPageTypesService, 'getPages').and.returnValue(
             of(expectedInputArray as unknown as DotCMSContentType[])
         );
-        dotPageStore.getPageTypes('test');
+        dotPageStore.getPageTypes();
 
         dotPageStore.state$.subscribe((data) => {
             expect(data.pageTypes).toEqual(expectedInputArray);
         });
-        expect(dotPageTypesService.getPages).toHaveBeenCalledWith('test');
+        expect(dotPageTypesService.getPages).toHaveBeenCalledTimes(1);
     });
 
     it('should set all Pages value in store', () => {

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-store/dot-pages.store.ts
@@ -105,6 +105,8 @@ export class DotPageStore extends ComponentStore<DotPagesState> {
         }
     );
 
+    readonly pageTypes$ = this.select(({ pageTypes }) => pageTypes);
+
     readonly setFavoritePages = this.updater<DotCMSContentlet[]>(
         (state: DotPagesState, favoritePages: DotCMSContentlet[]) => {
             return {
@@ -226,10 +228,10 @@ export class DotPageStore extends ComponentStore<DotPagesState> {
         );
     });
 
-    readonly getPageTypes = this.effect((keyword$: Observable<string>) => {
-        return keyword$.pipe(
-            switchMap((keyword: string) => {
-                return this.dotPageTypesService.getPages(keyword).pipe(
+    readonly getPageTypes = this.effect<void>((trigger$) =>
+        trigger$.pipe(
+            switchMap(() => {
+                return this.dotPageTypesService.getPages().pipe(
                     take(1),
                     tapResponse(
                         (pageTypes: DotCMSContentType[]) => {
@@ -243,8 +245,8 @@ export class DotPageStore extends ComponentStore<DotPagesState> {
                     )
                 );
             })
-        );
-    });
+        )
+    );
 
     readonly getPages = this.effect(
         (params$: Observable<{ offset: number; sortField?: string; sortOrder?: number }>) => {
@@ -326,20 +328,22 @@ export class DotPageStore extends ComponentStore<DotPagesState> {
         this.state$,
         this.languageOptions$,
         this.languageLabels$,
+        this.pageTypes$,
         (
-            { favoritePages, isEnterprise, environments, languages, loggedUser, pages, pageTypes },
+            { favoritePages, isEnterprise, environments, languages, loggedUser, pages },
             languageOptions,
-            languageLabels
+            languageLabels,
+            pageTypes
         ) => ({
             favoritePages,
             isEnterprise,
             environments,
             languages,
             loggedUser,
             pages,
-            pageTypes,
             languageOptions,
-            languageLabels
+            languageLabels,
+            pageTypes
         })
     );
 

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.spec.ts
@@ -16,9 +16,12 @@ import { DotMessageDisplayService } from '@components/dot-message-display/servic
 import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
 import { DotEventsService } from '@dotcms/data-access';
 import { CoreWebService, CoreWebServiceMock, mockSites, SiteService } from '@dotcms/dotcms-js';
-import { dotcmsContentletMock, MockDotRouterService } from '@dotcms/utils-testing';
+import {
+    dotcmsContentletMock,
+    dotcmsContentTypeBasicMock,
+    MockDotRouterService
+} from '@dotcms/utils-testing';
 
-import { DotPagesCreatePageDialogComponent } from './dot-pages-create-page-dialog/dot-pages-create-page-dialog.component';
 import { DotPageStore } from './dot-pages-store/dot-pages.store';
 import { DotActionsMenuEventParams, DotPagesComponent } from './dot-pages.component';
 
@@ -80,9 +83,13 @@ const storeMock = {
     get languageLabels$() {
         return of({});
     },
+    get pageTypes$() {
+        return of([{ ...dotcmsContentTypeBasicMock }]);
+    },
     clearMenuActions: jasmine.createSpy(),
     getFavoritePages: jasmine.createSpy(),
     getPages: jasmine.createSpy(),
+    getPageTypes: jasmine.createSpy(),
     showActionsMenu: jasmine.createSpy(),
     setInitialStateData: jasmine.createSpy(),
     limitFavoritePages: jasmine.createSpy(),
@@ -104,7 +111,8 @@ const storeMock = {
             actionMenuDomId: '',
             items: [],
             addToBundleCTId: 'test1'
-        }
+        },
+        pageTypes: []
     })
 };
 @Injectable()
@@ -173,7 +181,7 @@ describe('DotPagesComponent', () => {
         fixture.detectChanges();
         spyOn(component.menu, 'hide');
         spyOn(dotMessageDisplayService, 'push');
-        spyOn(dialogService, 'open');
+        spyOn(dialogService, 'open').and.callThrough();
     });
 
     it('should init store', () => {
@@ -223,11 +231,7 @@ describe('DotPagesComponent', () => {
     it('should call createPage method from DotPagesListingPanel', () => {
         const elem = de.query(By.css('dot-pages-listing-panel'));
         elem.triggerEventHandler('createPage');
-
-        expect(dialogService.open).toHaveBeenCalledWith(DotPagesCreatePageDialogComponent, {
-            header: 'create.page',
-            width: '800px'
-        });
+        expect(store.getPageTypes).toHaveBeenCalledTimes(1);
     });
 
     it('should call goToUrl method from DotPagesListingPanel', () => {

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.ts
@@ -13,7 +13,7 @@ import { DotMessageDisplayService } from '@components/dot-message-display/servic
 import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
 import { DotEventsService, DotMessageService } from '@dotcms/data-access';
 import { SiteService } from '@dotcms/dotcms-js';
-import { DotCMSContentlet } from '@dotcms/dotcms-models';
+import { DotCMSContentlet, DotCMSContentType } from '@dotcms/dotcms-models';
 
 import { DotPagesCreatePageDialogComponent } from './dot-pages-create-page-dialog/dot-pages-create-page-dialog.component';
 import { DotPagesState, DotPageStore } from './dot-pages-store/dot-pages.store';
@@ -27,9 +27,10 @@ export interface DotActionsMenuEventParams {
 }
 
 @Component({
+    providers: [DotPageStore],
     selector: 'dot-pages',
-    templateUrl: './dot-pages.component.html',
-    styleUrls: ['./dot-pages.component.scss']
+    styleUrls: ['./dot-pages.component.scss'],
+    templateUrl: './dot-pages.component.html'
 })
 export class DotPagesComponent implements OnInit, OnDestroy {
     @ViewChild('menu') menu: Menu;
@@ -100,10 +101,7 @@ export class DotPagesComponent implements OnInit, OnDestroy {
      * @memberof DotPagesComponent
      */
     showCreatePageDialog(): void {
-        this.dialogService.open(DotPagesCreatePageDialogComponent, {
-            header: this.dotMessageService.get('create.page'),
-            width: '800px'
-        });
+        this.store.getPageTypes();
     }
 
     ngOnInit(): void {
@@ -136,6 +134,19 @@ export class DotPagesComponent implements OnInit, OnDestroy {
         this.dotSiteService.switchSite$.pipe(takeUntil(this.destroy$), skip(1)).subscribe(() => {
             this.store.getPages({ offset: 0 });
         });
+
+        this.store.pageTypes$
+            .pipe(
+                takeUntil(this.destroy$),
+                filter((val) => !!val)
+            )
+            .subscribe((pageTypes: DotCMSContentType[]) => {
+                this.dialogService.open(DotPagesCreatePageDialogComponent, {
+                    header: this.dotMessageService.get('create.page'),
+                    width: '58rem',
+                    data: pageTypes
+                });
+            });
     }
 
     ngOnDestroy(): void {

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.module.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.module.ts
@@ -22,7 +22,6 @@ import { DotPagesCreatePageDialogComponent } from './dot-pages-create-page-dialo
 import { DotPagesFavoritePanelModule } from './dot-pages-favorite-panel/dot-pages-favorite-panel.module';
 import { DotPagesListingPanelModule } from './dot-pages-listing-panel/dot-pages-listing-panel.module';
 import { DotPagesRoutingModule } from './dot-pages-routing.module';
-import { DotPageStore } from './dot-pages-store/dot-pages.store';
 import { DotPagesComponent } from './dot-pages.component';
 
 @NgModule({
@@ -47,8 +46,7 @@ import { DotPagesComponent } from './dot-pages.component';
         DotWorkflowActionsFireService,
         DotWorkflowEventHandlerService,
         DotRouterService,
-        SiteService,
-        DotPageStore
+        SiteService
     ]
 })
 export class DotPagesModule {}
diff --git a/core-web/libs/data-access/src/lib/dot-es-content/dot-es-content.service.spec.ts b/core-web/libs/data-access/src/lib/dot-es-content/dot-es-content.service.spec.ts
@@ -48,11 +48,12 @@ describe('DotESContentService', () => {
         dotESContentService
             .get({
                 itemsPerPage: 5,
+                filter: 'test',
                 lang: '2',
                 offset: '10',
                 sortField: 'name',
                 sortOrder: ESOrderDirection.ASC,
-                query: '+contentType: blog +title: test'
+                query: '+contentType: blog'
             })
             .subscribe((res) => {
                 expect(res).toEqual(responseData);

diff --git a/core-web/libs/data-access/src/lib/dot-page-types/dot-page-types.service.ts b/core-web/libs/data-access/src/lib/dot-page-types/dot-page-types.service.ts
@@ -12,8 +12,7 @@ export class DotPageTypesService {
     constructor(private coreWebService: CoreWebService) {}
 
     /**
-     * Get the value of specific key
-     * from the dotmarketing-config.properties
+     * Returns Content Type data of type page and urlMap
      *
      * @param string keyword
      * @returns {Observable<DotCMSContentType[]>}