@dotcms/angular 0.0.1-alpha.37 → 0.0.1-alpha.39

package/src/lib/layout/contentlet/contentlet.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentletComponent } from './contentlet.component';
+
+describe('ContentletComponent', () => {
+    let component: ContentletComponent;
+    let fixture: ComponentFixture<ContentletComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [ContentletComponent]
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(ContentletComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});

package/src/lib/layout/contentlet/contentlet.component.ts

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges } from '@angular/core';
+
+import { DotCMSContentlet } from '../../models';
+
+/**
+ * This component is responsible to display a contentlet.
+ *
+ * @export
+ * @class ContentletComponent
+ * @implements {OnChanges}
+ */
+@Component({
+    selector: 'dotcms-contentlet-wrapper',
+    standalone: true,
+    template: '<ng-content></ng-content>',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ContentletComponent implements OnChanges {
+    /**
+     * The contentlet object containing content data.
+     *
+     * @type {DotCMSContentlet}
+     * @memberof ContentletComponent
+     */
+    @Input({ required: true }) contentlet!: DotCMSContentlet;
+    /**
+     * The container data (as string) where the contentlet is located.
+     *
+     * @type {string}
+     * @memberof ContentletComponent
+     */
+    @Input() container!: string;
+
+    /**
+     * The identifier of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-identifier') identifier: string | null = null;
+    /**
+     * The base type of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-basetype') baseType: string | null = null;
+    /**
+     * The title of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-title') title: string | null = null;
+    /**
+     * The inode of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-inode') inode: string | null = null;
+    /**
+     * The type of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-type') dotType: string | null = null;
+    /**
+     * The container of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-container') dotContainer: string | null = null;
+    /**
+     * The number of pages where the contentlet appears
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-on-number-of-pages') numberOfPages: string | null = null;
+    /**
+     * The content of contentlet component.
+     *
+     * @type {(string | null)}
+     * @memberof ContentletComponent
+     */
+    @HostBinding('attr.data-dot-object') dotContent: string | null = null;
+
+    ngOnChanges() {
+        this.identifier = this.contentlet.identifier;
+        this.baseType = this.contentlet.baseType;
+        this.title = this.contentlet.title;
+        this.inode = this.contentlet.inode;
+        this.dotType = this.contentlet.contentType;
+        this.dotContainer = this.container;
+        this.numberOfPages = this.contentlet['onNumberOfPages'];
+        this.dotContent = 'contentlet';
+    }
+}

package/src/lib/layout/dotcms-layout/dotcms-layout.component.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/src/lib/layout/dotcms-layout/dotcms-layout.component.spec.ts

@@ -0,0 +1,195 @@
+import { expect } from '@jest/globals';
+import { Spectator, createRoutingFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { of } from 'rxjs';
+
+import { Component, Input } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import * as dotcmsClient from '@dotcms/client';
+
+import { PageResponseMock, PageResponseOneRowMock } from './../../utils/testing.utils';
+import { DotcmsLayoutComponent } from './dotcms-layout.component';
+
+import { DotCMSContentlet, DotCMSPageAsset } from '../../models';
+import { PageContextService } from '../../services/dotcms-context/page-context.service';
+import { RowComponent } from '../row/row.component';
+
+interface Callback {
+    [key: string]: (data: unknown) => void;
+}
+
+interface DotCmsClientMock extends dotcmsClient.DotCmsClient {
+    editor: {
+        on: (type: string, callbackFn: (data: unknown) => void) => void;
+        off: jest.Mock;
+        callbacks: Callback;
+    };
+}
+
+@Component({
+    selector: 'dotcms-mock-component',
+    standalone: true,
+    template: 'Hello world'
+})
+class DotcmsSDKMockComponent {
+    @Input() contentlet!: DotCMSContentlet;
+}
+
+jest.mock('@dotcms/client', () => ({
+    ...jest.requireActual('@dotcms/client'),
+    isInsideEditor: jest.fn().mockReturnValue(true),
+    initEditor: jest.fn(),
+    updateNavigation: jest.fn(),
+    postMessageToEditor: jest.fn(),
+    DotCmsClient: {
+        instance: {
+            editor: {
+                on: function (type: string, callbackFn: (data: unknown) => void): void {
+                    this.callbacks[type] = callbackFn;
+                },
+                off: jest.fn(),
+                callbacks: {} as Callback
+            }
+        }
+    },
+    CUSTOMER_ACTIONS: {
+        GET_PAGE_DATA: 'get-page-data'
+    }
+}));
+
+const { DotCmsClient } = dotcmsClient as jest.Mocked<typeof dotcmsClient>;
+
+describe('DotcmsLayoutComponent', () => {
+    let spectator: Spectator<DotcmsLayoutComponent>;
+    let pageContextService: PageContextService;
+
+    const createComponent = createRoutingFactory({
+        component: DotcmsLayoutComponent,
+        imports: [MockComponent(RowComponent)],
+        providers: [
+            PageContextService,
+            { provide: ActivatedRoute, useValue: { url: of([]) } },
+            { provide: Router, useValue: {} }
+        ]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent({
+            props: {
+                pageAsset: PageResponseMock as unknown as DotCMSPageAsset,
+                components: {
+                    Banner: Promise.resolve(DotcmsSDKMockComponent)
+                }
+            },
+            detectChanges: false
+        });
+
+        pageContextService = spectator.inject(PageContextService, true);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('should render rows', () => {
+        spectator.detectChanges();
+        expect(spectator.queryAll(RowComponent).length).toBe(3);
+    });
+
+    it('should save pageContext', () => {
+        const setContextSpy = jest.spyOn(pageContextService, 'setContext');
+        spectator.detectChanges();
+        expect(setContextSpy).toHaveBeenCalled();
+    });
+
+    describe('inside editor', () => {
+        it('should call initEditor and updateNavigation from @dotcms/client', () => {
+            const initEditorSpy = jest.spyOn(dotcmsClient, 'initEditor');
+            const updateNavigationSpy = jest.spyOn(dotcmsClient, 'updateNavigation');
+
+            spectator.detectChanges();
+            expect(initEditorSpy).toHaveBeenCalled();
+            expect(updateNavigationSpy).toHaveBeenCalled();
+        });
+
+        describe('onReload', () => {
+            const client = DotCmsClient.instance;
+            let editorOnSpy: jest.SpyInstance;
+
+            beforeEach(() => {
+                editorOnSpy = jest.spyOn(client.editor, 'on');
+                spectator.setInput('onReload', () => {
+                    /* do nothing */
+                });
+                spectator.detectChanges();
+            });
+
+            it('should subscribe to the `CHANGE` event', () => {
+                expect(editorOnSpy).toHaveBeenCalled();
+            });
+
+            it('should remove listener on unmount', () => {
+                spectator.component.ngOnDestroy();
+                spectator.detectChanges();
+
+                expect(client.editor.off).toHaveBeenCalledWith('changes');
+            });
+        });
+
+        describe('client is ready', () => {
+            const query = { query: 'query { ... }' };
+
+            beforeEach(() => {
+                spectator.setInput('editor', query);
+                spectator.detectChanges();
+            });
+
+            it('should post message to editor', () => {
+                spectator.detectChanges();
+                expect(dotcmsClient.postMessageToEditor).toHaveBeenCalledWith({
+                    action: dotcmsClient.CUSTOMER_ACTIONS.CLIENT_READY,
+                    payload: query
+                });
+            });
+        });
+
+        describe('onChange', () => {
+            const client = DotCmsClient.instance;
+            beforeEach(() => spectator.detectChanges());
+
+            it('should update the page asset when changes are made in the editor', () => {
+                const editorOnSpy = jest.spyOn(client.editor, 'on');
+                expect(editorOnSpy).toHaveBeenCalledWith('changes', expect.any(Function));
+            });
+        });
+    });
+
+    describe('template', () => {
+        beforeEach(() => spectator.detectChanges());
+
+        it('should render rows', () => {
+            expect(spectator.queryAll(RowComponent).length).toBe(3);
+        });
+
+        it('should pass the correct row to RowComponent', () => {
+            const rowComponents = spectator.queryAll(RowComponent);
+            const rows = PageResponseMock.layout.body.rows;
+            expect(rowComponents.length).toBe(rows.length);
+
+            rowComponents.forEach((component, index) => {
+                expect(component.row).toEqual(rows[index]);
+            });
+        });
+
+        it('should update the page asset when changes are made in the editor', () => {
+            const { editor } = DotCmsClient.instance as DotCmsClientMock;
+            editor.callbacks['changes'](PageResponseOneRowMock);
+            spectator.detectChanges();
+            const rowComponents = spectator.queryAll(RowComponent);
+            const rows = PageResponseMock.layout.body.rows;
+            expect(rowComponents.length).toBe(1);
+            expect(rowComponents[0].row).toEqual(rows[0]);
+        });
+    });
+});

package/src/lib/layout/dotcms-layout/dotcms-layout.component.ts

@@ -0,0 +1,150 @@
+import { AsyncPipe } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    DestroyRef,
+    Input,
+    OnInit,
+    inject
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ActivatedRoute } from '@angular/router';
+
+import {
+    CUSTOMER_ACTIONS,
+    DotCmsClient,
+    EditorConfig,
+    initEditor,
+    isInsideEditor,
+    postMessageToEditor,
+    updateNavigation
+} from '@dotcms/client';
+
+import { DotCMSPageComponent } from '../../models';
+import { DotCMSPageAsset } from '../../models/dotcms.model';
+import { PageContextService } from '../../services/dotcms-context/page-context.service';
+import { RowComponent } from '../row/row.component';
+
+/**
+ * `DotcmsLayoutComponent` is a class that represents the layout for a DotCMS page.
+ *  It includes a `pageAsset` property that represents the DotCMS page asset and a `components` property that represents the dynamic components for the page.
+ *
+ * @export
+ * @class DotcmsLayoutComponent
+ */
+@Component({
+    selector: 'dotcms-layout',
+    standalone: true,
+    imports: [RowComponent, AsyncPipe],
+    template: `
+        @if (pageAsset$ | async; as page) {
+            @for (row of this.page?.layout?.body?.rows; track $index) {
+                <dotcms-row [row]="row" />
+            }
+        }
+    `,
+    styleUrl: './dotcms-layout.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotcmsLayoutComponent implements OnInit {
+    private _pageAsset!: DotCMSPageAsset;
+
+    /**
+     * Represents the DotCMS page asset.
+     *
+     * @type {DotCMSPageAsset}
+     * @memberof DotcmsLayoutComponent
+     */
+    @Input({ required: true })
+    set pageAsset(value: DotCMSPageAsset) {
+        this._pageAsset = value;
+        if (!value.layout) {
+            console.warn(
+                'Warning: pageAsset does not have a `layout` property. Might be using an advaced template or your dotCMS instance not have a enterprise license.'
+            );
+        }
+    }
+
+    /**
+     * Returns the DotCMS page asset.
+     *
+     * @readonly
+     * @type {DotCMSPageAsset}
+     * @memberof DotcmsLayoutComponent
+     */
+    get pageAsset(): DotCMSPageAsset {
+        return this._pageAsset;
+    }
+
+    /**
+     * The `components` property is a record of dynamic components for each Contentlet on the page.
+     *
+     * @type {DotCMSPageComponent}
+     * @memberof DotcmsLayoutComponent
+     * @required
+     */
+    @Input({ required: true }) components!: DotCMSPageComponent;
+
+    /**
+     * The `onReload` property is a function that reloads the page after changes are made.
+     *
+     * @memberof DotcmsLayoutComponent
+     * @deprecated In future implementation we will be listening for the changes from the editor to update the page state so reload will not be needed.
+     */
+    @Input() onReload!: () => void;
+
+    /**
+     *
+     * @type {DotCMSFetchConfig}
+     * @memberof DotCMSPageEditorConfig
+     * @description The configuration custom params for data fetching on Edit Mode.
+     * @example <caption>Example with Custom GraphQL query</caption>
+     * <dotcms-layout [editor]="{ query: 'query { ... }' }"/>
+     *
+     * @example <caption>Example usage with Custom Page API parameters</caption>
+     * <dotcms-layout [editor]="{ params: { depth: '2' } }"/>;
+     */
+    @Input() editor!: EditorConfig;
+
+    private readonly route = inject(ActivatedRoute);
+    private readonly pageContextService = inject(PageContextService);
+    private readonly destroyRef$ = inject(DestroyRef);
+    private client!: DotCmsClient;
+    protected readonly pageAsset$ = this.pageContextService.currentPage$;
+
+    ngOnInit() {
+        this.pageContextService.setContext(this.pageAsset, this.components);
+
+        if (!isInsideEditor()) {
+            return;
+        }
+
+        this.client = DotCmsClient.instance;
+        this.route.url.pipe(takeUntilDestroyed(this.destroyRef$)).subscribe((urlSegments) => {
+            const pathname = '/' + urlSegments.join('/');
+
+            initEditor({ pathname });
+            updateNavigation(pathname || '/');
+        });
+
+        this.client.editor.on('changes', (data) => {
+            if (this.onReload) {
+                this.onReload();
+
+                return;
+            }
+
+            this.pageContextService.setPageAsset(data as DotCMSPageAsset);
+        });
+
+        postMessageToEditor({ action: CUSTOMER_ACTIONS.CLIENT_READY, payload: this.editor });
+    }
+
+    ngOnDestroy() {
+        if (!isInsideEditor()) {
+            return;
+        }
+
+        this.client.editor.off('changes');
+    }
+}

package/src/lib/layout/row/row.component.css

@@ -0,0 +1,6 @@
+:host {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: 1rem;
+    row-gap: 1rem;
+}

package/src/lib/layout/row/row.component.spec.ts

@@ -0,0 +1,28 @@
+import { Spectator, createComponentFactory } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+
+import { RowComponent } from './row.component';
+
+import { DotPageAssetLayoutRow } from '../../models';
+import { PageResponseMock } from '../../utils/testing.utils';
+import { ColumnComponent } from '../column/column.component';
+
+describe('RowComponent', () => {
+    let spectator: Spectator<RowComponent>;
+    const createComponent = createComponentFactory({
+        component: RowComponent,
+        imports: [MockComponent(ColumnComponent)]
+    });
+
+    beforeEach(() => {
+        spectator = createComponent({
+            props: {
+                row: PageResponseMock.layout.body.rows[1] as DotPageAssetLayoutRow
+            }
+        });
+    });
+
+    it('should render two columns', () => {
+        expect(spectator.queryAll(ColumnComponent)?.length).toBe(4);
+    });
+});

package/src/lib/layout/row/row.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+import { DotPageAssetLayoutRow } from '../../models';
+import { ColumnComponent } from '../column/column.component';
+
+/**
+ * This component is responsible to display a row with columns.
+ *
+ * @export
+ * @class RowComponent
+ */
+@Component({
+    selector: 'dotcms-row',
+    standalone: true,
+    imports: [ColumnComponent],
+    template: `
+        @for (column of row.columns; track $index) {
+            <dotcms-column [column]="column" />
+        }
+    `,
+    styleUrl: './row.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class RowComponent {
+    /**
+     * The row object containing the columns.
+     *
+     * @type {DotPageAssetLayoutRow}
+     * @memberof RowComponent
+     */
+    @Input({ required: true }) row!: DotPageAssetLayoutRow;
+}

package/{lib/models/dotcms.model.d.ts → src/lib/models/dotcms.model.ts}

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 export interface DotCMSPageAsset {
     canCreateTemplate: boolean;
     containers: DotCMSPageAssetContainer;
@@ -20,6 +22,7 @@ export interface DotCMSPageAsset {
         forward: boolean;
     };
 }
+
 export interface DotPageAssetLayoutRow {
     identifier: number;
     value?: string;
@@ -27,6 +30,7 @@ export interface DotPageAssetLayoutRow {
     columns: DotPageAssetLayoutColumn[];
     styleClass?: string;
 }
+
 export interface DotPageAssetLayoutColumn {
     preview: boolean;
     containers: DotCMSContainer[];
@@ -36,6 +40,7 @@ export interface DotPageAssetLayoutColumn {
     left: number;
     styleClass?: string;
 }
+
 export interface DotCMSPageAssetContainer {
     [key: string]: {
         container: DotCMSContainer;
@@ -45,6 +50,7 @@ export interface DotCMSPageAssetContainer {
         };
     };
 }
+
 export interface DotCMSContainer {
     identifier: string;
     uuid: string;
@@ -87,6 +93,7 @@ export interface DotCMSContainer {
     contentlets: DotCMSContentlet[];
     parentPermissionable: DotCMSSiteParentPermissionable;
 }
+
 export interface DotCMSContentlet {
     archived: boolean;
     baseType: string;
@@ -124,8 +131,9 @@ export interface DotCMSContentlet {
     contentTypeIcon?: string;
     variant?: string;
     __icon__?: string;
-    [key: string]: any;
+    [key: string]: any; // This is a catch-all for any other custom properties that might be on the contentlet.
 }
+
 export interface DotcmsNavigationItem {
     code?: any;
     folder: string;
@@ -139,6 +147,7 @@ export interface DotcmsNavigationItem {
     target: string;
     order: number;
 }
+
 interface DotCMSTemplate {
     iDate: number;
     type: string;
@@ -173,6 +182,7 @@ interface DotCMSTemplate {
     new: boolean;
     canEdit: boolean;
 }
+
 interface DotCMSPage {
     template: string;
     modDate: number;
@@ -218,6 +228,7 @@ interface DotCMSPage {
     liveInode: string;
     shortyLive: string;
 }
+
 interface DotCMSViewAs {
     language: {
         id: number;
@@ -228,6 +239,7 @@ interface DotCMSViewAs {
     };
     mode: string;
 }
+
 interface DotCMSLayout {
     pageWidth: string;
     width: string;
@@ -238,6 +250,7 @@ interface DotCMSLayout {
     body: DotPageAssetLayoutBody;
     sidebar: DotPageAssetLayoutSidebar;
 }
+
 interface DotCMSContainerStructure {
     id: string;
     structureId: string;
@@ -246,6 +259,7 @@ interface DotCMSContainerStructure {
     code: string;
     contentTypeVar: string;
 }
+
 interface DotPageAssetLayoutSidebar {
     preview: boolean;
     containers: DotCMSContainer[];
@@ -253,9 +267,11 @@ interface DotPageAssetLayoutSidebar {
     widthPercent: number;
     width: string;
 }
+
 interface DotPageAssetLayoutBody {
     rows: DotPageAssetLayoutRow[];
 }
+
 interface DotCMSSite {
     lowIndexPriority: boolean;
     name: string;
@@ -306,12 +322,14 @@ interface DotCMSSite {
     sortOrder: number;
     contentType: DotCMSSiteContentType;
 }
+
 interface DotCMSSiteContentType {
     owner?: any;
     parentPermissionable: DotCMSSiteParentPermissionable;
     permissionId: string;
     permissionType: string;
 }
+
 export interface DotCMSSiteParentPermissionable {
     Inode: string;
     Identifier: string;
@@ -326,6 +344,7 @@ export interface DotCMSSiteParentPermissionable {
     childrenPermissionable?: any;
     variantId?: string;
 }
+
 interface DotCMSSiteStructure {
     iDate: number;
     type: string;
@@ -371,6 +390,7 @@ interface DotCMSSiteStructure {
     versionId: string;
     versionType: string;
 }
+
 interface DotCMSSiteField {
     iDate: number;
     type: string;
@@ -412,5 +432,3 @@ interface DotCMSSiteField {
     versionId: string;
     versionType: string;
 }
-export {};
-//# sourceMappingURL=dotcms.model.d.ts.map