dotCMS/core#23058 Favorite Page portlet - listing component

core-web/apps/dotcms-ui/src/app/api/services/guards/pages-guard.service.spec.ts

@@ -0,0 +1,43 @@
+import { TestBed } from '@angular/core/testing';
+import { MockDotPropertiesService } from '@dotcms/app/portlets/dot-edit-page/main/dot-edit-page-nav/dot-edit-page-nav.component.spec';
+import { FeaturedFlags } from '@dotcms/app/portlets/shared/models/shared-models';
+import { of } from 'rxjs';
+import { DotPropertiesService } from '../dot-properties/dot-properties.service';
+import { PagesGuardService } from './pages-guard.service';
+
+describe('PagesGuardService', () => {
+    let pagesGuardService: PagesGuardService;
+    let dotPropertiesService: DotPropertiesService;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                PagesGuardService,
+                { provide: DotPropertiesService, useClass: MockDotPropertiesService }
+            ]
+        });
+
+        pagesGuardService = TestBed.inject(PagesGuardService);
+        dotPropertiesService = TestBed.inject(DotPropertiesService);
+    });
+
+    it('should allow access to Pages Portlets', () => {
+        let result: boolean;
+        spyOn(dotPropertiesService, 'getKey').and.returnValue(of('true'));
+        pagesGuardService.canActivate().subscribe((res) => (result = res));
+        expect(dotPropertiesService.getKey).toHaveBeenCalledWith(
+            FeaturedFlags.DOTFAVORITEPAGE_FEATURE_ENABLE
+        );
+        expect(result).toBe(true);
+    });
+
+    it('should deny access to Pages Portlets', () => {
+        let result: boolean;
+        spyOn(dotPropertiesService, 'getKey').and.returnValue(of('false'));
+        pagesGuardService.canActivate().subscribe((res) => (result = res));
+        expect(dotPropertiesService.getKey).toHaveBeenCalledWith(
+            FeaturedFlags.DOTFAVORITEPAGE_FEATURE_ENABLE
+        );
+        expect(result).toBe(false);
+    });
+});

core-web/apps/dotcms-ui/src/app/api/services/guards/pages-guard.service.ts

@@ -0,0 +1,29 @@
+import { map, take } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import { CanActivate } from '@angular/router';
+import { Observable } from 'rxjs';
+import { DotPropertiesService } from '../dot-properties/dot-properties.service';
+import { FeaturedFlags } from '@dotcms/app/portlets/shared/models/shared-models';
+
+/**
+ * Route Guard that based on DOTFAVORITEPAGE_FEATURE_ENABLE flag allows/denies access to Pages portlet.
+ */
+@Injectable()
+export class PagesGuardService implements CanActivate {
+    constructor(private dotConfigurationService: DotPropertiesService) {}
+
+    /**
+     * Guard checks if DOTFAVORITEPAGE_FEATURE_ENABLE flag is true in dotmarketing-config.properties.
+     * @returns Observable<boolean>
+     */
+    canActivate(): Observable<boolean> {
+        return this.dotConfigurationService
+            .getKey(FeaturedFlags.DOTFAVORITEPAGE_FEATURE_ENABLE)
+            .pipe(
+                take(1),
+                map((enabled: string) => {
+                    return enabled === 'true';
+                })
+            );
+    }
+}

core-web/apps/dotcms-ui/src/app/app-routing.module.ts

@@ -15,6 +15,7 @@ import { DotLoginPageResolver } from '@components/login/dot-login-page-resolver.
 import { DotIframePortletLegacyResolver } from '@components/_common/iframe/service/dot-iframe-porlet-legacy-resolver.service';
 import { DotCustomReuseStrategyService } from '@shared/dot-custom-reuse-strategy/dot-custom-reuse-strategy.service';
 import { DotTemplatePageTitleStrategy } from '@shared/services/dot-title-strategy.service';
+import { PagesGuardService } from './api/services/guards/pages-guard.service';
 
 const PORTLETS_ANGULAR = [
     {
@@ -136,6 +137,12 @@ const PORTLETS_IFRAME = [
             }
         ]
     },
+    {
+        canActivate: [PagesGuardService],
+        path: 'pages',
+        loadChildren: () =>
+            import('@portlets/dot-pages/dot-pages.module').then((m) => m.DotPagesModule)
+    },
     {
         canActivateChild: [ContentletGuardService],
         path: 'add',

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/components/dot-favorite-page/store/dot-favorite-page.store.spec.ts

@@ -12,6 +12,7 @@ import { CurrentUserDataMock } from '@dotcms/app/portlets/dot-starter/dot-starte
 import { DotCurrentUser } from '@dotcms/app/shared/models/dot-current-user/dot-current-user';
 import { DotPageRender } from '@dotcms/app/shared/models/dot-page/dot-rendered-page.model';
 import { DotRole } from '@dotcms/app/shared/models/dot-role/dot-role.model';
+import { MockDotHttpErrorManagerService } from '@dotcms/app/test/dot-http-error-manager.service.mock';
 import { MockDotMessageService } from '@dotcms/app/test/dot-message-service.mock';
 import { mockDotRenderedPage } from '@dotcms/app/test/dot-page-render.mock';
 import { mockUser } from '@dotcms/app/test/login-service.mock';
@@ -33,13 +34,6 @@ class MockDotCurrentUserService {
     }
 }
 
-@Injectable()
-class MockDotHttpErrorManagerService {
-    public handle(): Observable<unknown> {
-        return null;
-    }
-}
-
 @Injectable()
 class MockDotTempFileUploadService {
     public upload(): Observable<unknown> {

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/components/dot-edit-page-toolbar/dot-edit-page-toolbar.component.ts

@@ -14,6 +14,7 @@ import { DotPageMode } from '@models/dot-page/dot-page-mode.enum';
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotPropertiesService } from '@dotcms/app/api/services/dot-properties/dot-properties.service';
 import { take } from 'rxjs/operators';
+import { FeaturedFlags } from '@dotcms/app/portlets/shared/models/shared-models';
 @Component({
     selector: 'dot-edit-page-toolbar',
     templateUrl: './dot-edit-page-toolbar.component.html',
@@ -44,7 +45,7 @@ export class DotEditPageToolbarComponent implements OnInit, OnChanges, OnDestroy
     ngOnInit() {
         // TODO: Remove next line when total functionality of Favorite page is done for release
         this.dotConfigurationService
-            .getKey('DOTFAVORITEPAGE_FEATURE_ENABLE')
+            .getKey(FeaturedFlags.DOTFAVORITEPAGE_FEATURE_ENABLE)
             .pipe(take(1))
             .subscribe((enabled: string) => {
                 this.showFavoritePageStar = enabled === 'true';

core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/main/dot-edit-page-nav/dot-edit-page-nav.component.spec.ts

@@ -46,7 +46,7 @@ class MockDotLicenseService {
 }
 
 @Injectable()
-class MockDotPropertiesService {
+export class MockDotPropertiesService {
     getKey(): Observable<true> {
         return observableOf(true);
     }

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card-empty/dot-pages-card-empty.component.html

@@ -0,0 +1,12 @@
+<div class="dot-pages-card-empty custom-skeleton p-p-4">
+    <div class="dot-pages-card-empty__header" data-testId="favoriteCardEmptyHeader"></div>
+
+    <div class="p-d-flex p-mb-3 dot-pages-card-empty__body">
+        <dot-icon name="star" size="24"></dot-icon>
+
+        <div class="dot-pages-card-empty__content">
+            <p-skeleton width="100%" styleClass="p-mb-2" borderRadius="16px"></p-skeleton>
+            <p-skeleton width="100%" styleClass="p-mb-2" borderRadius="16px"></p-skeleton>
+        </div>
+    </div>
+</div>

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card-empty/dot-pages-card-empty.component.scss

@@ -0,0 +1,34 @@
+@use "variables" as *;
+
+.dot-pages-card-empty {
+    border: 1px solid $gray-lighter;
+    border-radius: 4px;
+}
+
+.dot-pages-card-empty__header {
+    display: flex;
+    width: 100%;
+    height: 170px;
+    border-bottom: 1px solid $gray-lighter;
+}
+
+.dot-pages-card-empty__body {
+    display: flex;
+    margin: $spacing-3 $spacing-4 $spacing-3 $spacing-3;
+
+    ::ng-deep dot-icon {
+        margin-right: $spacing-1;
+        i {
+            color: $gray-lighter;
+        }
+    }
+}
+
+.dot-pages-card-empty__content {
+    width: 100%;
+
+    ::ng-deep p-skeleton:first-child {
+        display: block;
+        margin-bottom: $spacing-1;
+    }
+}

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card-empty/dot-pages-card-empty.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DotIconModule } from '@dotcms/ui';
+import { DotPipesModule } from '@pipes/dot-pipes.module';
+import { DotPagesCardEmptyComponent } from './dot-pages-card-empty.component';
+import { CommonModule } from '@angular/common';
+import { SkeletonModule } from 'primeng/skeleton';
+
+describe('DotPagesCardEmptyComponent', () => {
+    let fixture: ComponentFixture<DotPagesCardEmptyComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, DotIconModule, DotPipesModule, SkeletonModule],
+            declarations: [DotPagesCardEmptyComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DotPagesCardEmptyComponent);
+        fixture.detectChanges();
+    });
+
+    describe('Init', () => {
+        it('should have header and body with star icon and skeleton', () => {
+            expect(
+                fixture.debugElement.query(By.css('[data-testid="favoriteCardEmptyHeader"]'))
+            ).toBeTruthy();
+            expect(fixture.debugElement.query(By.css('dot-icon')).attributes.name).toBe('star');
+            expect(fixture.debugElement.queryAll(By.css('p-skeleton')).length).toBe(2);
+        });
+    });
+});

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card-empty/dot-pages-card-empty.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'dot-pages-card-empty',
+    templateUrl: './dot-pages-card-empty.component.html',
+    styleUrls: ['./dot-pages-card-empty.component.scss']
+})
+export class DotPagesCardEmptyComponent {}

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card-empty/dot-pages-card-empty.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SkeletonModule } from 'primeng/skeleton';
+import { DotPagesCardEmptyComponent } from './dot-pages-card-empty.component';
+import { DotIconModule } from '@dotcms/ui';
+
+@NgModule({
+    imports: [CommonModule, SkeletonModule, DotIconModule],
+    declarations: [DotPagesCardEmptyComponent],
+    exports: [DotPagesCardEmptyComponent]
+})
+export class DotPagesCardEmptyModule {}

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card/dot-pages-card.component.html

@@ -0,0 +1,32 @@
+<p-card>
+    <ng-template pTemplate="header">
+        <div
+            class="dot-pages-favorite-card-content__image"
+            [ngStyle]="{ 'background-image': 'url(' + imageUri + ')' }"
+            data-testId="favoriteCardImageContainer"
+        >
+            <img [alt]="title" [src]="imageUri" />
+        </div>
+    </ng-template>
+
+    <dot-icon-button
+        [icon]="ownerPage ? 'grade' : 'star_outline'"
+        [ngClass]="{
+            'dot-favorite-page-highlight': ownerPage
+        }"
+        [pTooltip]="'favoritePage.listing.star.icon.tooltip' | dm"
+        size="18"
+        data-testId="favoriteCardIconButton"
+        tooltipPosition="bottom"
+    ></dot-icon-button>
+
+    <div class="dot-pages-favorite-card-content__container">
+        <div class="dot-pages-favorite-card-content__title">{{ title }}</div>
+        <div
+            class="dot-pages-favorite-card-content__subtitle"
+            [pTooltip]="url"
+            [innerHTML]="url"
+            tooltipPosition="bottom"
+        ></div>
+    </div>
+</p-card>

core-web/apps/dotcms-ui/src/app/portlets/dot-pages/dot-pages-card/dot-pages-card.component.scss

@@ -0,0 +1,44 @@
+@use "variables" as *;
+
+::ng-deep {
+    .p-card .p-card-header {
+        padding: 0;
+    }
+
+    .p-card-content {
+        display: flex;
+    }
+
+    .dot-favorite-page-highlight ::ng-deep i {
+        color: $brand-primary;
+    }
+
+    .dot-pages-favorite-card-content__image {
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+        padding-bottom: 75.25%;
+        display: block;
+
+        img {
+            height: 0;
+            position: absolute;
+            width: 0;
+        }
+    }
+
+    .dot-pages-favorite-card-content__container {
+        margin-left: $spacing-1;
+        min-width: 0;
+    }
+
+    .dot-pages-favorite-card-content__title {
+        font-weight: bold;
+    }
+
+    .dot-pages-favorite-card-content__subtitle {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}