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

package/src/lib/models/index.ts

@@ -0,0 +1,47 @@
+/* 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.
+ */
+export interface DotCMSPageContext {
+    /**
+     * Represents the DotCMS page asset.
+     * @type {DotCMSPageAsset}
+     * @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}
+     * @memberof DotCMSPageContext
+     */
+    isInsideEditor: boolean;
+}
+
+/**
+ * Represents a DotCMS page component.
+ * Used to store the dynamic components of a DotCMS page.
+ * @typedef {Record<string, DynamicComponentEntity>} DotCMSPageComponent
+ * @memberof @dotcms/angular
+ */
+export type DotCMSPageComponent = Record<string, DynamicComponentEntity>;

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
+    };
+};