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

package/src/lib/editor/utils/{editor.utils.d.ts → editor.utils.ts}

@@ -15,6 +15,7 @@ interface ContentletBound {
     height: number;
     payload: string;
 }
+
 /**
  * Bound information for a container.
  *
@@ -34,6 +35,7 @@ interface ContainerBound {
     payload: string;
     contentlets: ContentletBound[];
 }
+
 /**
  * Calculates the bounding information for each page element within the given containers.
  *
@@ -47,7 +49,26 @@ interface ContainerBound {
  * console.log(bounds);
  * ```
  */
-export declare function getPageElementBound(containers: HTMLDivElement[]): ContainerBound[];
+export function getPageElementBound(containers: HTMLDivElement[]): ContainerBound[] {
+    return containers.map((container) => {
+        const containerRect = container.getBoundingClientRect();
+        const contentlets = Array.from(
+            container.querySelectorAll('[data-dot-object="contentlet"]')
+        ) as HTMLDivElement[];
+
+        return {
+            x: containerRect.x,
+            y: containerRect.y,
+            width: containerRect.width,
+            height: containerRect.height,
+            payload: JSON.stringify({
+                container: getContainerData(container)
+            }),
+            contentlets: getContentletsBound(containerRect, contentlets)
+        };
+    });
+}
+
 /**
  * Calculates the bounding information for each contentlet inside a container.
  *
@@ -63,7 +84,33 @@ export declare function getPageElementBound(containers: HTMLDivElement[]): Conta
  * console.log(bounds); // Element bounds within the container
  * ```
  */
-export declare function getContentletsBound(containerRect: DOMRect, contentlets: HTMLDivElement[]): ContentletBound[];
+export function getContentletsBound(
+    containerRect: DOMRect,
+    contentlets: HTMLDivElement[]
+): ContentletBound[] {
+    return contentlets.map((contentlet) => {
+        const contentletRect = contentlet.getBoundingClientRect();
+
+        return {
+            x: 0,
+            y: contentletRect.y - containerRect.y,
+            width: contentletRect.width,
+            height: contentletRect.height,
+            payload: JSON.stringify({
+                container: contentlet.dataset?.['dotContainer']
+                    ? JSON.parse(contentlet.dataset?.['dotContainer'])
+                    : getClosestContainerData(contentlet),
+                contentlet: {
+                    identifier: contentlet.dataset?.['dotIdentifier'],
+                    title: contentlet.dataset?.['dotTitle'],
+                    inode: contentlet.dataset?.['dotInode'],
+                    contentType: contentlet.dataset?.['dotType']
+                }
+            })
+        };
+    });
+}
+
 /**
  * Get container data from VTLS.
  *
@@ -77,12 +124,15 @@ export declare function getContentletsBound(containerRect: DOMRect, contentlets:
  * console.log(data);
  * ```
  */
-export declare function getContainerData(container: HTMLElement): {
-    acceptTypes: string;
-    identifier: string;
-    maxContentlets: string;
-    uuid: string;
-};
+export function getContainerData(container: HTMLElement) {
+    return {
+        acceptTypes: container.dataset?.['dotAcceptTypes'] || '',
+        identifier: container.dataset?.['dotIdentifier'] || '',
+        maxContentlets: container.dataset?.['maxContentlets'] || '',
+        uuid: container.dataset?.['dotUuid'] || ''
+    };
+}
+
 /**
  * Get the closest container data from the contentlet.
  *
@@ -96,12 +146,22 @@ export declare function getContainerData(container: HTMLElement): {
  * console.log(data);
  * ```
  */
-export declare function getClosestContainerData(element: Element): {
-    acceptTypes: string;
-    identifier: string;
-    maxContentlets: string;
-    uuid: string;
-} | null;
+export function getClosestContainerData(element: Element) {
+    // Find the closest ancestor element with data-dot-object="container" attribute
+    const container = element.closest('[data-dot-object="container"]') as HTMLElement;
+
+    // If a container element is found
+    if (container) {
+        // Return the dataset of the container element
+        return getContainerData(container);
+    } else {
+        // If no container element is found, return null
+        console.warn('No container found for the contentlet');
+
+        return null;
+    }
+}
+
 /**
  * Find the closest contentlet element based on HTMLElement.
  *
@@ -113,7 +173,19 @@ export declare function getClosestContainerData(element: Element): {
  * const contentlet = findDotElement(element);
  * console.log(contentlet);
  */
-export declare function findDotElement(element: HTMLElement | null): HTMLElement | null;
+export function findDotElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+
+    if (
+        element?.dataset?.['dotObject'] === 'contentlet' ||
+        (element?.dataset?.['dotObject'] === 'container' && element.children.length === 0)
+    ) {
+        return element;
+    }
+
+    return findDotElement(element?.['parentElement']);
+}
+
 /**
  * Find the closest VTL file element based on HTMLElement.
  *
@@ -125,7 +197,16 @@ export declare function findDotElement(element: HTMLElement | null): HTMLElement
  * const vtlFile = findDotVTLElement(element);
  * console.log(vtlFile);
  */
-export declare function findDotVTLElement(element: HTMLElement | null): HTMLElement | null;
+export function findDotVTLElement(element: HTMLElement | null): HTMLElement | null {
+    if (!element) return null;
+
+    if (element.dataset && element.dataset?.['dotObject'] === 'vtl-file') {
+        return element;
+    } else {
+        return findDotElement(element?.['parentElement']);
+    }
+}
+
 /**
  * Find VTL data within a target element.
  *
@@ -139,10 +220,23 @@ export declare function findDotVTLElement(element: HTMLElement | null): HTMLElem
  * console.log(vtlData);
  * ```
  */
-export declare function findVTLData(target: HTMLElement): {
-    inode: string | undefined;
-    name: string | undefined;
-}[] | null;
+export function findVTLData(target: HTMLElement) {
+    const vltElements = target.querySelectorAll(
+        '[data-dot-object="vtl-file"]'
+    ) as NodeListOf<HTMLElement>;
+
+    if (!vltElements.length) {
+        return null;
+    }
+
+    return Array.from(vltElements).map((vltElement) => {
+        return {
+            inode: vltElement.dataset?.['dotInode'],
+            name: vltElement.dataset?.['dotUrl']
+        };
+    });
+}
+
 /**
  * Check if the scroll position is at the bottom of the page.
  *
@@ -155,5 +249,10 @@ export declare function findVTLData(target: HTMLElement): {
  * }
  * ```
  */
-export declare function scrollIsInBottom(): boolean;
-export {};
+export function scrollIsInBottom() {
+    const documentHeight = document.documentElement.scrollHeight;
+    const viewportHeight = window.innerHeight;
+    const scrollY = window.scrollY;
+
+    return scrollY + viewportHeight >= documentHeight;
+}

package/src/lib/query-builder/lucene-syntax/{Equals.d.ts → Equals.ts}

@@ -1,6 +1,17 @@
 import { Field } from './Field';
 import { NotOperand } from './NotOperand';
 import { Operand } from './Operand';
+
+import {
+    OPERAND,
+    buildExcludeField,
+    buildField,
+    buildNotOperand,
+    buildOperand,
+    buildRawEquals,
+    sanitizeQuery
+} from '../utils';
+
 /**
  * 'Equal' Is a Typescript class that provides the ability to use terms in the lucene query string.
  * A term is a value used to search for a specific value in a document. It can be a word or a phrase.
@@ -10,10 +21,13 @@ import { Operand } from './Operand';
  * @export
  * @class Equal
  */
-export declare class Equals {
-    #private;
-    private query;
-    constructor(query: string);
+export class Equals {
+    #query = '';
+
+    constructor(private query: string) {
+        this.#query = this.query;
+    }
+
     /**
      * This method appends to the query a term that should be excluded in the search.
      *
@@ -27,7 +41,10 @@ export declare class Equals {
      * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof Equal
      */
-    excludeField(field: string): Field;
+    excludeField(field: string): Field {
+        return buildExcludeField(this.#query, field);
+    }
+
     /**
      * This method appends to the query a field that should be included in the search.
      *
@@ -40,7 +57,10 @@ export declare class Equals {
      * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof Equal
      */
-    field(field: string): Field;
+    field(field: string): Field {
+        return buildField(this.#query, field);
+    }
+
     /**
      * This method appends to the query an operand to use logic operators in the query.
      *
@@ -54,7 +74,10 @@ export declare class Equals {
      * @return {*}  {Operand} - An instance of a Lucene Operand. An operand is a logical operator used to combine terms or phrases in a query.
      * @memberof Equal
      */
-    or(): Operand;
+    or(): Operand {
+        return buildOperand(this.#query, OPERAND.OR);
+    }
+
     /**
      * This method appends to the query an operand to use logic operators in the query.
      *
@@ -67,7 +90,10 @@ export declare class Equals {
      * @return {*}  {Operand} - An instance of a Lucene Operand. An operand is a logical operator used to combine terms or phrases in a query.
      * @memberof Equal
      */
-    and(): Operand;
+    and(): Operand {
+        return buildOperand(this.#query, OPERAND.AND);
+    }
+
     /**
      * This method appends to the query an operand to use logic operators in the query.
      *
@@ -80,7 +106,10 @@ export declare class Equals {
      * @return {*}  {NotOperand} - An instance of a Lucene Not Operand. A not operand is a logical operator used to exclude terms or phrases in a query.
      * @memberof Equal
      */
-    not(): NotOperand;
+    not(): NotOperand {
+        return buildNotOperand(this.#query);
+    }
+
     /**
      * This method allows to pass a raw query string to the query builder.
      * This raw query should end in a Lucene Equal.
@@ -97,7 +126,10 @@ export declare class Equals {
      * @return {*}  {Equal} - An instance of a Lucene Equal. A term is a value used to search for a specific value in a document.
      * @memberof QueryBuilder
      */
-    raw(query: string): Equals;
+    raw(query: string): Equals {
+        return buildRawEquals(this.#query, query);
+    }
+
     /**
      * This method returns the final query string.
      *
@@ -110,5 +142,7 @@ export declare class Equals {
      * @return {*}  {string} - The final query string.
      * @memberof Equal
      */
-    build(): string;
+    build(): string {
+        return sanitizeQuery(this.#query);
+    }
 }

package/src/lib/query-builder/lucene-syntax/{Field.d.ts → Field.ts}

@@ -1,4 +1,7 @@
 import { Equals } from './Equals';
+
+import { buildEquals } from '../utils';
+
 /**
  * The `Field` class is used to build a query with a specific field.
  * A Lucene Field is a key used to search for a specific value in a document.
@@ -6,15 +9,18 @@ import { Equals } from './Equals';
  * @export
  * @class Field
  */
-export declare class Field {
-    #private;
-    private query;
+export class Field {
+    #query = '';
+
     /**
      * Creates an instance of the `Field` class.
      *
      * @param {string} query - The initial query string.
      */
-    constructor(query: string);
+    constructor(private query: string) {
+        this.#query = this.query;
+    }
+
     /**
      * Appends a term to the query that should be included in the search.
      *
@@ -28,5 +34,7 @@ export declare class Field {
      * @return {Equals} - An instance of `Equals`.
      * @memberof Field
      */
-    equals(term: string): Equals;
+    equals(term: string): Equals {
+        return buildEquals(this.#query, term);
+    }
 }

package/src/lib/query-builder/lucene-syntax/{NotOperand.d.ts → NotOperand.ts}

@@ -1,14 +1,20 @@
 import { Equals } from './Equals';
+
+import { buildEquals } from '../utils';
+
 /**
  * 'NotOperand' Is a Typescript class that provides the ability to use the NOT operand in the lucene query string.
  *
  * @export
  * @class NotOperand
  */
-export declare class NotOperand {
-    #private;
-    private query;
-    constructor(query: string);
+export class NotOperand {
+    #query = '';
+
+    constructor(private query: string) {
+        this.#query = this.query;
+    }
+
     /**
      * This method appends to the query a term that should be included in the search.
      *
@@ -22,5 +28,7 @@ export declare class NotOperand {
      * @return {*}  {Equals} - An instance of Equals.
      * @memberof NotOperand
      */
-    equals(term: string): Equals;
+    equals(term: string): Equals {
+        return buildEquals(this.#query, term);
+    }
 }

package/src/lib/query-builder/lucene-syntax/{Operand.d.ts → Operand.ts}

@@ -1,5 +1,8 @@
 import { Equals } from './Equals';
 import { Field } from './Field';
+
+import { buildExcludeField, buildField, buildEquals } from '../utils';
+
 /**
  * 'Operand' Is a Typescript class that provides the ability to use operands in the lucene query string.}
  * An operand is a logical operator used to join two or more conditions in a query.
@@ -7,10 +10,13 @@ import { Field } from './Field';
  * @export
  * @class Operand
  */
-export declare class Operand {
-    #private;
-    private query;
-    constructor(query: string);
+export class Operand {
+    #query = '';
+
+    constructor(private query: string) {
+        this.#query = this.query;
+    }
+
     /**
      * This method appends to the query a term that should be excluded in the search.
      *
@@ -20,7 +26,10 @@ export declare class Operand {
      * @return {*}  {Field} - An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof Operand
      */
-    excludeField(field: string): Field;
+    excludeField(field: string): Field {
+        return buildExcludeField(this.#query, field);
+    }
+
     /**
      * This method appends to the query a field that should be included in the search.
      *
@@ -30,7 +39,10 @@ export declare class Operand {
      * @return {*}  {Field} -  An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof Operand
      */
-    field(field: string): Field;
+    field(field: string): Field {
+        return buildField(this.#query, field);
+    }
+
     /**
      * This method appends to the query a term that should be included in the search.
      *
@@ -40,5 +52,7 @@ export declare class Operand {
      * @return {*}  {Equals} - An instance of Equals.
      * @memberof Operand
      */
-    equals(term: string): Equals;
+    equals(term: string): Equals {
+        return buildEquals(this.#query, term);
+    }
 }

package/src/lib/query-builder/sdk-query-builder.spec.ts

@@ -0,0 +1,159 @@
+import { QueryBuilder } from './sdk-query-builder';
+
+describe('QueryBuilder', () => {
+    let queryBuilder: QueryBuilder;
+
+    beforeEach(() => {
+        queryBuilder = new QueryBuilder();
+    });
+
+    it('should return a query with a simple term', () => {
+        const queryForBlogs = queryBuilder.field('contentType').equals('Blog').build();
+
+        expect(queryForBlogs).toBe('+contentType:Blog');
+    });
+
+    it('should return a query with multiple fields with a simple term ', () => {
+        const queryForBlogsInSuperCoolSite = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .field('conhost')
+            .equals('my-super-cool-site')
+            .build();
+
+        expect(queryForBlogsInSuperCoolSite).toBe('+contentType:Blog +conhost:my-super-cool-site');
+    });
+
+    it("should return a query with an 'OR' operand", () => {
+        const queryForBlogsOrArticles = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .or()
+            .equals('Article')
+            .build();
+
+        expect(queryForBlogsOrArticles).toBe('+contentType:Blog OR Article');
+    });
+
+    it("should return a query with an 'AND' operand", () => {
+        const queryForBlogsAndArticles = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .and()
+            .equals('Article')
+            .build();
+
+        expect(queryForBlogsAndArticles).toBe('+contentType:Blog AND Article');
+    });
+
+    it("should return a query with a 'NOT' operand", () => {
+        const queryForSkiingTripsNotInSwissAlps = queryBuilder
+            .field('summary')
+            .equals('Skiing trip')
+            .not()
+            .equals('Swiss Alps')
+            .build();
+
+        expect(queryForSkiingTripsNotInSwissAlps).toBe('+summary:"Skiing trip" NOT "Swiss Alps"');
+    });
+
+    it('should return a query with an exclusion field', () => {
+        const queryForFootballBlogsWithoutMessi = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .field('title')
+            .equals('Football')
+            .excludeField('summary')
+            .equals('Lionel Messi')
+            .build();
+
+        expect(queryForFootballBlogsWithoutMessi).toBe(
+            '+contentType:Blog +title:Football -summary:"Lionel Messi"'
+        );
+    });
+
+    it('should build a raw query from the query builder', () => {
+        const queryForBlogs = queryBuilder
+            .raw('+summary:Snowboard')
+            .not()
+            .equals('Swiss Alps')
+            .field('contentType')
+            .equals('Blog')
+            .build();
+
+        expect(queryForBlogs).toBe('+summary:Snowboard NOT "Swiss Alps" +contentType:Blog');
+    });
+
+    it('should return a query with a raw query appended', () => {
+        const queryForBlogs = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .raw('+summary:Snowboard')
+            .not()
+            .equals('Swiss Alps')
+            .build();
+
+        expect(queryForBlogs).toBe('+contentType:Blog +summary:Snowboard NOT "Swiss Alps"');
+    });
+
+    it('should return a query with a raw query created with a queryBuilder appended and a term', () => {
+        const anotherQueryBuilder = new QueryBuilder();
+
+        const snowboardInCanada = anotherQueryBuilder
+            .field('summary')
+            .equals('Snowboard')
+            .field('country')
+            .equals('Canada')
+            .build();
+
+        const queryForBlogs = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .raw(snowboardInCanada)
+            .build();
+
+        expect(queryForBlogs).toBe('+contentType:Blog +summary:Snowboard +country:Canada');
+    });
+
+    it('should return a query with all possible combinations', () => {
+        const blogOrActivity = queryBuilder
+            .field('contentType')
+            .equals('Blog')
+            .or()
+            .equals('Activity');
+
+        const customIdSiteOrCoolSite = blogOrActivity
+            .field('conhost')
+            .equals('48190c8c-42c4-46af-8d1a-0cd5db894797')
+            .or()
+            .equals('cool-site');
+
+        const englishAndSpanish = customIdSiteOrCoolSite
+            .field('languageId')
+            .equals('1')
+            .and()
+            .equals('2');
+
+        const notDeleted = englishAndSpanish.field('deleted').equals('false');
+
+        const currentlyWorking = notDeleted.field('working').equals('true');
+
+        const defaultVariant = currentlyWorking.field('variant').equals('default');
+
+        const snowboardOutsideSwissAlps = defaultVariant
+            .field('title')
+            .equals('Snowboard')
+            .excludeField('summary')
+            .equals('Swiss Alps');
+
+        const writtenByJohnDoe = snowboardOutsideSwissAlps.field('authors').equals('John Doe');
+
+        const withoutJaneDoeHelp = writtenByJohnDoe.not().equals('Jane Doe');
+
+        const query = withoutJaneDoeHelp.build();
+
+        expect(query).toBe(
+            '+contentType:Blog OR Activity +conhost:48190c8c-42c4-46af-8d1a-0cd5db894797 OR cool-site +languageId:1 AND 2 +deleted:false +working:true +variant:default +title:Snowboard -summary:"Swiss Alps" +authors:"John Doe" NOT "Jane Doe"'
+        );
+    });
+});

package/src/lib/query-builder/{sdk-query-builder.d.ts → sdk-query-builder.ts}

@@ -1,4 +1,6 @@
 import { Equals, Field } from './lucene-syntax/index';
+import { buildExcludeField, buildField, buildRawEquals } from './utils';
+
 /**
  * 'QueryBuilder' Is a Typescript class that provides the ability to build a query string using the Lucene syntax in a more readable way.
  * @example
@@ -27,8 +29,9 @@ import { Equals, Field } from './lucene-syntax/index';
  * @export
  * @class QueryBuilder
  */
-export declare class QueryBuilder {
-    #private;
+export class QueryBuilder {
+    #query = '';
+
     /**
      * This method appends to the query a field that should be included in the search.
      *
@@ -42,7 +45,10 @@ export declare class QueryBuilder {
      * @return {*}  {Field} -  An instance of a Lucene Field. A field is a key used to search for a specific value in a document.
      * @memberof QueryBuilder
      */
-    field(field: string): Field;
+    field(field: string): Field {
+        return buildField(this.#query, field);
+    }
+
     /**
      * This method appends to the query a field that should be excluded from the search.
      *
@@ -56,7 +62,10 @@ export declare class QueryBuilder {
      * @return {*}  {Field} -  An instance of a Lucene Exclude Field. An exclude field is a key used to exclude for a specific value in a document.
      * @memberof QueryBuilder
      */
-    excludeField(field: string): Field;
+    excludeField(field: string): Field {
+        return buildExcludeField(this.#query, field);
+    }
+
     /**
      * This method allows to pass a raw query string to the query builder.
      * This raw query should end in Equals.
@@ -72,5 +81,7 @@ export declare class QueryBuilder {
      * @return {*}  {Equals} - An instance of Equals. A term is a value used to search for a specific value in a document.
      * @memberof QueryBuilder
      */
-    raw(query: string): Equals;
+    raw(query: string): Equals {
+        return buildRawEquals(this.#query, query);
+    }
 }