Template builder research for model sync

[fmontes]

Parent Issue

#24535

Task

The GridStack library have a way to handle the model and dotCMS API to save the template have a similar but different way to do it.

We need to do some research to see what is the best way to get model from GridStack, transform it and send it to the API.

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

Acceptance Criteria

No response

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

• https://gridstackjs.com/ (in the repo there are different Angular demos)
• In this service (apps/dotcms-ui/src/app/api/services/dot-edit-layout/dot-edit-layout.service.ts) we do the current transformation
• In this service (apps/dotcms-ui/src/app/api/services/dot-templates/dot-templates.service.ts) we save the state

Assumptions & Initiation Needs

1. After our meeting looks like our best chance if to use ngFor
2. We talked about keeping a separate object in sync with GridStack object
3. We need to use component store

This is a starting point for this

function transformGridstackToDotcms(input) {
    const output = {
        layout: {
            body: {
                rows: []
            }
        }
    };

    input.forEach(row => {
        const newRow = {
            columns: []
        };

        row.subGrid.children.forEach(box => {
            newRow.columns.push({
                leftOffset: box.x + 1,
                width: box.w,
                content: [{ "identifier": "SOME_ID", "uuid": "1" }]
            });
        });

        output.layout.body.rows.push(newRow);
    });

    return output;
}

const input = [
    {
        x: 1, w: 12, h: 1, subGrid: {
            children: [
                { x: 0, y: 0, w: 6 },
                { x: 7, y: 0, w: 5 },
            ]
        },
    }
];

const output = transformGridstackToDotcms(input);
console.log(output);

Quality Assurance Notes & Workarounds

No response

What we need to know?

• Where or how to we include the containers ID and UUID in the model?
• Is ngFor the right path?
• How to do we transform and use dotCMS model from the backend to init a GridStack

[zJaaal]

I took the example you made and implemented a basic parser

template-builder-with-parser.zip

To give you an idea before you see it.

We know that we cannot add nothing but strings in the content of a GridStackWidget. So, my solution basically when I parse from Backend Data to GridStack Object I do this:

1. Generates an ID for the Row
2. Saves that custom content (containers, styleClass, etc) in a store (ID - > Value map)
3. Sets the content to the ID
4. Generates an ID for the Col
5. Saves the custom content (containers, styleClass, etc) in the same store (ID -> value map)
6. Sets the content to the ID

And in the reverse parse I just build the object accessing the store. And also, we can access the same store to retrieve that content.

So if we need to add new containers or change the styleClasses, we do it on that store and the Grid will just handle the position of the Row/Col