Template builder: how do we replace the content of the added rows or box

[fmontes]

Parent Issue

#24535

Task

Right now in the prototype when we drop a new row or box the content of the source gets included, we can't have that.

In our design when we drop the row it needs:

1. Create a new row
2. Add a box with no containers (we might want to add the Default container as default, @wezell?)

When we drop a box it needs:

1. Add a box with no containers (we might want to add the Default container as default, @wezell?)

Right now in our POC:

Kapture.2023-03-31.at.21.32.39.mp4

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

Acceptance Criteria

• Figure it out how to when drop a row it renders an Angular row component
• Figure it out how to when drop a column it renders an Angular row component

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

No response

Assumptions & Initiation Needs

1. Maybe with the drop event from GridStack?
2. Maybe modifying the model and using Angular change detection will be enough
3. This might be related with this Template builder research for model sync #24537

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[zJaaal]

I found a way to add custom content on Rows with this piece of code:

grid.on("dropped", (_event: Event, prevNode: GridStackNode, newNode: GridStackNode) => {

 // In angular we trigger a change detection and render whatever we want by just traversing the new model of the Grid 


  // Remove the widget created by the lib
  grid.removeWidget(newNode.el as GridItemHTMLElement);

  // Add the widget where is supposed to be added
  grid.addWidget({
    h: newNode.h,
    w: newNode.w,
    x: newNode.x,
    y: newNode.y,
    content: dragEl, // Here we can set the ID for the parser I proposed
    subGrid: { children: [], ...subOptions },
  });
});

This code just works for Rows because the columns are another Grid so this event is just being triggered by the Rows grid.

I tested a bunch of things and couldn't find a way to add custom content for Columns or listen to the added or dropped of the subGrids, because we just need GridStack for the positioning of the content, we can use Angular to override the content and add whatever we want via *ngFor, but that's the thing we don't know when it is added or dropped

[zJaaal]

Found a way to listen to changes in subGrids:

grid.on("added change removed", (_event: Event, nodes?: GridStackNode[]) => {
  // This works to listen to subgrids
  grid
    .makeSubGrid(nodes[0].el, subOptions) // This method returns a reference to the created grid
    .on("change removed added", (_event: Event, nodes?: GridStackNode[]) => {
      console.log("changed");
    });
});

But there's a problem with this. This makes the whole row a subGrid, it still works, but all the content of the Row now is the content of the first Column. So now, we need to find a way to set a subGrid inside a Row without setting the Row itself to a subGrid.

Also with this approach we might load the children by hand. Instead of doing grid.load(children), we need to do something by hand to add the listeners to the subGrids

[fmontes]

Done here: #24820