#23060 Click on a Favorite page in Listing portlet should open it in …

…Edit Page mode * #23058 Favorite Page portlet - listing component * #23058 Favorite Page portlet - listing component - tests * Update on auto-generated documentation for dotcms-webcomponents * fix on dot-template-selector.component.spec.ts test failing * #23058 Favorite Page portlet - listing component - Added missing doc * #23058 Favorite Page portlet - listing component - Added Empty State * #23058 Favorite Page portlet - listing component - Feedback * #23058 Favorite Page portlet - listing component - Feedback 2 * #23060 Click on a Favorite page in Listing portlet should open it in Edit Page mode
dotCMS · Dec 5, 2022 · c84ce2f · c84ce2f
1 parent fdea611
commit c84ce2f
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 9 deletions.
diff --git a/...p/portlets/dot-edit-page/components/dot-favorite-page/dot-favorite-page.component.spec.ts b/...p/portlets/dot-edit-page/components/dot-favorite-page/dot-favorite-page.component.spec.ts
@@ -255,7 +255,7 @@ describe('DotFavoritePageComponent', () => {
                     currentUserRoleId: '1',
                     thumbnail: null,
                     title: 'A title',
-                    url: '/an/url/test?&language_id=1',
+                    url: '/an/url/test?&language_id=1&device_inode=',
                     order: 1,
                     permissions: null
                 });
@@ -283,7 +283,7 @@ describe('DotFavoritePageComponent', () => {
                     currentUserRoleId: '1',
                     thumbnail: 'test',
                     title: 'A title',
-                    url: '/an/url/test?&language_id=1',
+                    url: '/an/url/test?&language_id=1&device_inode=',
                     order: 1,
                     permissions: null
                 });
@@ -297,7 +297,7 @@ describe('DotFavoritePageComponent', () => {
                     currentUserRoleId: '1',
                     thumbnail: 'test',
                     title: 'A title',
-                    url: '/an/url/test?&language_id=1',
+                    url: '/an/url/test?&language_id=1&device_inode=',
                     order: 1,
                     permissions: null
                 });

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.html b/core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages.component.html
@@ -38,6 +38,7 @@
                 [title]="item.title"
                 [url]="item.url"
                 [ownerPage]="item.owner === vm.loggedUserId"
+                (click)="goToUrl(item.url)"
             ></dot-pages-card>
         </ng-template>
 

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
@@ -18,6 +18,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
 import { PanelModule } from 'primeng/panel';
 import { DotPagesCardEmptyModule } from './dot-pages-card-empty/dot-pages-card-empty.module';
+import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
+import { MockDotRouterService } from '@dotcms/app/test/dot-router-service.mock';
 
 @Component({
     selector: 'dot-pages-card',
@@ -54,7 +56,7 @@ export const pagesInitialTestData = [
         ...dotcmsContentletMock,
         title: 'preview1',
         screenshot: 'test1',
-        url: '/index1',
+        url: '/index1?host_id=A&language_id=1&device_inode=123',
         owner: 'admin'
     },
     {
@@ -70,6 +72,7 @@ describe('DotPagesComponent', () => {
     let fixture: ComponentFixture<DotPagesComponent>;
     let de: DebugElement;
     let store: DotPageStore;
+    let dotRouterService: DotRouterService;
 
     beforeEach(() => {
         TestBed.configureTestingModule({
@@ -86,6 +89,7 @@ describe('DotPagesComponent', () => {
                 TabViewModule
             ],
             providers: [
+                { provide: DotRouterService, useClass: MockDotRouterService },
                 {
                     provide: DotMessageService,
                     useValue: messageServiceMock
@@ -162,6 +166,7 @@ describe('DotPagesComponent', () => {
                 }
             });
             store = TestBed.inject(DotPageStore);
+            dotRouterService = TestBed.inject(DotRouterService);
             fixture = TestBed.createComponent(DotPagesComponent);
             de = fixture.debugElement;
             fixture.detectChanges();
@@ -196,7 +201,7 @@ describe('DotPagesComponent', () => {
             expect(elem[1].componentInstance.ownerPage).toBe(false);
         });
 
-        describe('Load all items', () => {
+        describe('Events', () => {
             it('should call event to load all items', () => {
                 const elem = de.query(By.css('[data-testId="seeAllBtn"]'));
                 elem.triggerEventHandler('click', {
@@ -206,6 +211,22 @@ describe('DotPagesComponent', () => {
                 });
                 expect(store.getFavoritePages).toHaveBeenCalledWith(4);
             });
+
+            it('should call redirect method in DotRouterService', () => {
+                const elem = de.query(By.css('dot-pages-card'));
+                elem.triggerEventHandler('click', {
+                    stopPropagation: () => {
+                        //
+                    }
+                });
+
+                expect(dotRouterService.goToEditPage).toHaveBeenCalledWith({
+                    device_inode: '123',
+                    host_id: 'A',
+                    language_id: '1',
+                    url: '/index1'
+                });
+            });
         });
     });
 

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
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
 import { Observable } from 'rxjs/internal/Observable';
 import { DotPagesState, DotPageStore } from './dot-pages-store/dot-pages.store';
 
@@ -13,7 +14,7 @@ export class DotPagesComponent {
 
     private initialFavoritePagesLimit = 5;
 
-    constructor(private store: DotPageStore) {
+    constructor(private store: DotPageStore, private dotRouterService: DotRouterService) {
         this.store.setInitialStateData(this.initialFavoritePagesLimit);
     }
 
@@ -34,4 +35,22 @@ export class DotPagesComponent {
             this.store.getFavoritePages(favoritePagesToLoad);
         }
     }
+
+    /**
+     * Event to redirect to Edit Page with selected Favorite Page
+     *
+     * @param {string} url
+     * @memberof DotPagesComponent
+     */
+    goToUrl(url: string) {
+        const splittedUrl = url.split('?');
+        const urlParams = { url: splittedUrl[0] };
+        const searchParams = new URLSearchParams(splittedUrl[1]);
+
+        for (const entry of searchParams) {
+            urlParams[entry[0]] = entry[1];
+        }
+
+        this.dotRouterService.goToEditPage(urlParams);
+    }
 }
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
@@ -10,6 +10,7 @@ import { DotIconModule } from '@dotcms/ui';
 import { PanelModule } from 'primeng/panel';
 import { ButtonModule } from 'primeng/button';
 import { DotPagesCardEmptyModule } from './dot-pages-card-empty/dot-pages-card-empty.module';
+import { DotRouterService } from '@dotcms/app/api/services/dot-router/dot-router.service';
 
 @NgModule({
     declarations: [DotPagesComponent],
@@ -24,6 +25,6 @@ import { DotPagesCardEmptyModule } from './dot-pages-card-empty/dot-pages-card-e
         ButtonModule,
         TabViewModule
     ],
-    providers: [DotESContentService]
+    providers: [DotESContentService, DotRouterService]
 })
 export class DotPagesModule {}
diff --git a/core-web/apps/dotcms-ui/src/app/shared/dot-utils.spec.ts b/core-web/apps/dotcms-ui/src/app/shared/dot-utils.spec.ts
@@ -35,6 +35,6 @@ describe('Dot Utils', () => {
 
         const url = dotUtils.generateDotFavoritePageUrl(mockRenderedPageState);
 
-        expect(url).toEqual('/an/url/test?&language_id=1&device_id=abc123');
+        expect(url).toEqual('/an/url/test?&language_id=1&device_inode=123zxc');
     });
 });
diff --git a/core-web/apps/dotcms-ui/src/app/shared/dot-utils.ts b/core-web/apps/dotcms-ui/src/app/shared/dot-utils.ts
@@ -27,6 +27,6 @@ export function generateDotFavoritePageUrl(params: DotPageRenderParameters): str
         `${page?.pageURI}?` +
         (site?.identifier ? `host_id=${site?.identifier}` : '') +
         `&language_id=${viewAs.language.id}` +
-        (viewAs.device?.identifier ? `&device_id=${viewAs.device?.identifier}` : '')
+        (viewAs.device?.inode ? `&device_inode=${viewAs.device?.inode}` : '&device_inode=')
     );
 }