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

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

package/{lib/models/index.d.ts → src/lib/models/index.ts}

@@ -1,12 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export * from './dotcms.model';
+
 import { Type } from '@angular/core';
+
 import { DotCMSPageAsset } from './dotcms.model';
+
 /**
  * Represents a dynamic component entity.
  * @typedef {Promise<Type<any>>} DynamicComponentEntity
  * @memberof @dotcms/angular
  */
 export type DynamicComponentEntity = Promise<Type<any>>;
+
 /**
  * Represents the context of a DotCMS page.
  */
@@ -17,12 +22,14 @@ export interface DotCMSPageContext {
      * @memberof DotCMSPageContext
      */
     pageAsset: DotCMSPageAsset;
+
     /**
      * Represents the dynamic components of the page for each Content Type.
      * @type {DotCMSPageComponent}
      * @memberof DotCMSPageContext
      */
     components: DotCMSPageComponent;
+
     /**
      * Indicates whether the page is being viewed inside the editor.
      * @type {boolean}
@@ -30,6 +37,7 @@ export interface DotCMSPageContext {
      */
     isInsideEditor: boolean;
 }
+
 /**
  * Represents a DotCMS page component.
  * Used to store the dynamic components of a DotCMS page.
@@ -37,4 +45,3 @@ export interface DotCMSPageContext {
  * @memberof @dotcms/angular
  */
 export type DotCMSPageComponent = Record<string, DynamicComponentEntity>;
-//# sourceMappingURL=index.d.ts.map

package/{lib/services/dotcms-context/page-context.service.d.ts → src/lib/services/dotcms-context/page-context.service.ts}

@@ -1,49 +1,78 @@
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+import { Injectable } from '@angular/core';
+
+import { map } from 'rxjs/operators';
+
+import { isInsideEditor } from '@dotcms/client';
+
 import { DotCMSPageComponent, DotCMSPageContext } from '../../models';
 import { DotCMSPageAsset } from '../../models/dotcms.model';
-import * as i0 from "@angular/core";
+
 /**
  * @author dotCMS
  * @description This service is responsible for managing the page context.
  * @export
  * @class PageContextService
  */
-export declare class PageContextService {
-    private context$;
+@Injectable({
+    providedIn: 'root'
+})
+export class PageContextService {
+    private context$ = new BehaviorSubject<DotCMSPageContext | null>(null);
+
     /**
      * @description Get the context
      * @readonly
      * @type {DotCMSPageContext}
      * @memberof PageContextService
      */
-    get context(): DotCMSPageContext;
+    get context(): DotCMSPageContext {
+        return this.context$.getValue() as DotCMSPageContext;
+    }
+
     /**
      * @description Get the context as an observable
      * @readonly
      * @memberof PageContextService
      */
-    get contextObs$(): Observable<DotCMSPageContext | null>;
+    get contextObs$() {
+        return this.context$.asObservable();
+    }
+
     /**
      * @description Get the current page asset
      * @readonly
      * @type {(Observable<DotCMSPageAsset | null>)}
      * @memberof PageContextService
      */
-    get currentPage$(): Observable<DotCMSPageAsset | null>;
+    get currentPage$(): Observable<DotCMSPageAsset | null> {
+        return this.contextObs$.pipe(map((context) => context?.pageAsset || null));
+    }
+
     /**
      *
      * @description Set the context
      * @param {DotCMSPageAsset} value
      * @memberof DotcmsContextService
      */
-    setContext(pageAsset: DotCMSPageAsset, components: DotCMSPageComponent): void;
+    setContext(pageAsset: DotCMSPageAsset, components: DotCMSPageComponent) {
+        this.context$.next({
+            pageAsset,
+            components,
+            isInsideEditor: isInsideEditor()
+        });
+    }
+
     /**
      * @description Set the page asset in the context
      * @param {DotCMSPageAsset} pageAsset
      * @memberof PageContextService
      */
-    setPageAsset(pageAsset: DotCMSPageAsset): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PageContextService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<PageContextService>;
+    setPageAsset(pageAsset: DotCMSPageAsset) {
+        this.context$.next({
+            ...this.context,
+            pageAsset
+        });
+    }
 }
-//# sourceMappingURL=page-context.service.d.ts.map

package/src/lib/services/dotcms-context/page-context.spec.ts

@@ -0,0 +1,80 @@
+import { SpectatorService, createServiceFactory } from '@ngneat/spectator';
+
+import { TestBed } from '@angular/core/testing';
+
+import { PageContextService } from './page-context.service';
+
+import { DotCMSPageAsset, DotCMSPageComponent } from '../../models';
+import { PageResponseMock } from '../../utils/testing.utils';
+
+const initialPageAssetMock = {} as DotCMSPageAsset;
+const initialComponentsMock = {} as DotCMSPageComponent;
+
+describe('PageContextService', () => {
+    let spectator: SpectatorService<PageContextService>;
+    let service: PageContextService;
+
+    const createService = createServiceFactory(PageContextService);
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({});
+        spectator = createService();
+        service = spectator.service;
+    });
+
+    it('should set the context', () => {
+        service.setContext(initialPageAssetMock, initialComponentsMock);
+
+        expect(service.context).toEqual({
+            components: initialComponentsMock,
+            pageAsset: initialPageAssetMock,
+            isInsideEditor: false
+        });
+    });
+
+    it('should set the page asset in the context', () => {
+        service.setContext(initialPageAssetMock, initialComponentsMock);
+
+        const newPageAssetMock = PageResponseMock as unknown as DotCMSPageAsset;
+
+        service.setPageAsset(newPageAssetMock);
+
+        expect(service.context).toEqual({
+            components: initialComponentsMock,
+            pageAsset: newPageAssetMock,
+            isInsideEditor: false
+        });
+    });
+
+    it('should return the context', () => {
+        service.setContext(initialPageAssetMock, initialComponentsMock);
+
+        expect(service.context).toEqual({
+            components: initialComponentsMock,
+            pageAsset: initialPageAssetMock,
+            isInsideEditor: false
+        });
+    });
+
+    it('should return the context as an observable', (done) => {
+        service.setContext(initialPageAssetMock, initialComponentsMock);
+
+        service.contextObs$.subscribe((context) => {
+            expect(context).toEqual({
+                components: initialComponentsMock,
+                pageAsset: initialPageAssetMock,
+                isInsideEditor: false
+            });
+            done();
+        });
+    });
+
+    it('should return the page asset as an observable', (done) => {
+        service.setContext(initialPageAssetMock, initialComponentsMock);
+
+        service.currentPage$.subscribe((pageAsset) => {
+            expect(pageAsset).toEqual(initialPageAssetMock);
+            done();
+        });
+    });
+});

package/src/lib/utils/index.ts

@@ -0,0 +1,92 @@
+import { DotCMSContainer, DotCMSPageAssetContainer } from '../models/dotcms.model';
+
+//Changed the type, to avoid SQ issue.
+//This should be put inside a lib
+/**
+ * Represents a mapping of numbers to corresponding CSS class names for column end values.
+ * @typedef {Record<number, string | null>} EndClassMap
+ */
+const endClassMap: Record<number, string | null> = {
+    1: 'col-end-1',
+    2: 'col-end-2',
+    3: 'col-end-3',
+    4: 'col-end-4',
+    5: 'col-end-5',
+    6: 'col-end-6',
+    7: 'col-end-7',
+    8: 'col-end-8',
+    9: 'col-end-9',
+    10: 'col-end-10',
+    11: 'col-end-11',
+    12: 'col-end-12',
+    13: 'col-end-13'
+};
+
+//Changed the type, to avoid SQ issue.
+//This should be put inside a lib
+/**
+ * Represents a mapping of numbers to CSS class names for starting columns.
+ * @typedef {Record<number, string | null>} StartClassMap
+ */
+const startClassMap: Record<number, string | null> = {
+    1: 'col-start-1',
+    2: 'col-start-2',
+    3: 'col-start-3',
+    4: 'col-start-4',
+    5: 'col-start-5',
+    6: 'col-start-6',
+    7: 'col-start-7',
+    8: 'col-start-8',
+    9: 'col-start-9',
+    10: 'col-start-10',
+    11: 'col-start-11',
+    12: 'col-start-12'
+};
+
+/**
+ * Retrieves the data for a set of containers.
+ *
+ * @param containers - The DotCMSPageAssetContainer object containing the containers.
+ * @param containerRef - The DotCMSContainer object representing the container reference.
+ * @returns An object containing the container data, accept types, contentlets, and variant ID.
+ */
+export const getContainersData = (
+    containers: DotCMSPageAssetContainer,
+    containerRef: DotCMSContainer
+) => {
+    const { identifier, uuid } = containerRef;
+
+    const { containerStructures, container } = containers[identifier];
+
+    const { variantId } = container?.parentPermissionable || {};
+
+    const acceptTypes: string = containerStructures
+        .map((structure) => structure.contentTypeVar)
+        .join(',');
+
+    const contentlets = containers[identifier].contentlets[`uuid-${uuid}`];
+
+    return {
+        ...containers[identifier].container,
+        acceptTypes,
+        contentlets,
+        variantId
+    };
+};
+
+/**
+ * Returns the position style classes based on the start and end values.
+ * Used to set the grid column start and end values.
+ * @param start - The start value.
+ * @param end - The end value.
+ * @returns An object containing the startClass and endClass.
+ */
+export const getPositionStyleClasses = (start: number, end: number) => {
+    const startClass = startClassMap[start];
+    const endClass = endClassMap[end];
+
+    return {
+        startClass,
+        endClass
+    };
+};