challenge.md

In a separate file, I put the list in my own. Based on https://elixirforum.com/t/need-advise-to-update-nested-list-3-level/55057/

What is this list made for?

I'm actually working on an open source project to build site templates with drag and drop elements. A high percentage of the work is done on the server side and I use the LiveView library in my project.

A short video to show what I've made so far:

explane-without-sound-com.mp4

What are my challenges?

In these steps, users are supposed to customize their site template

The first step

If you look at the list, you have three maps whose parameters are as follows

%{
  children: [],
  class: [],
  id: "UUID",
  index: 2,
  parent: "dragLocation",
  parent_id: "dragLocation",
  type: "layout"
}

Please DO - 1: All three of them are layout type. Move them and change their order. This is the outermost and simplest step.

The parameters you have are as follows:

1. type
2. id
3. parent_id

---

The second step

Now Please delete one of them:

The parameters you have are as follows:

1. type
2. id
3. parent_id

---

The third step

Find a specific layout and change its information. like class

The parameters you have are as follows:

1. type = section
2. id
3. parent_id
4. parent = "layout"

---

The fourth step

Find a specific layout and the section you have its ID, after than change the order. for example place it between the other two sections. each layout has children parameter and inside it you can find sections.

The parameters you have are as follows:

1. type = section
2. id
3. parent_id
4. parent = "layout"

Example:

Layout -> section

%{
  children: [],
  class: ["flex", "flex-col", "justify-between", "items-stretch",
   "min-h-[200px]", "w-full", "border", "border-dashed",
   "border-gray-400", "p-1"],
  id: "c2a02176-abd8-4939-8c70-0c90ee988be4",
  index: 0,
  parent: "layout",
  parent_id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
  type: "section"
},
%{
  children: [
  ],
  class: ["flex", "flex-col", "justify-between", "items-stretch",
   "min-h-[200px]", "w-full", "border", "border-dashed",
   "border-gray-400", "p-1"],
  id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
  index: 1,
  parent: "layout",
  parent_id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
  type: "section"
},
%{
  children: [],
  class: ["flex", "flex-col", "justify-between", "items-stretch",
   "min-h-[200px]", "w-full", "border", "border-dashed",
   "border-gray-400", "p-1"],
  id: "c2a02176-abd8-4939-8c70-0c90ee988be4",
  index: 2,
  parent: "layout",
  parent_id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
  type: "section"
}

---

The fifth step

Now change or add a parameter of a specific section, for example class or add a name to them

Layout -> section

The parameters you have are as follows:

1. type = section
2. id
3. parent_id
4. parent = "layout"

---

The sixth step

Now we need to change the order of children of a section, for example find 88a1a223-5945-4d21-9c24-42fe38d89866 id and change it with d31a13b1-134f-49e4-9c17-6b8d246cc87b, it should ne noted the index parameter should be updated

The parameters you have are as follows:

1. type = text
2. id = UUID
3. parent_id = UUID
4. parent = "section"
5. layout_id = UUID

each section has a children and you can find elements inside of it

Layout -> section -> element (type text)

For example:

%{
  children: [],
  class: ["text-black", "w-full", "p-2", "text-base"],
  id: "88a1a223-5945-4d21-9c24-42fe38d89866",
  index: 0,
  parent: "section",
  parent_id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
  type: "text"
},
%{
  children: [],
  class: ["text-black", "w-full", "p-2", "text-base"],
  id: "d31a13b1-134f-49e4-9c17-6b8d246cc87b",
  index: 1,
  parent: "section",
  parent_id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
  type: "text"
},
%{
  children: [],
  class: ["text-black", "w-full", "p-2", "text-base"],
  id: "e3bc2be1-9986-46d6-a063-53a29194c4c6",
  index: 2,
  parent: "section",
  parent_id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
  type: "text"
}

Other steps, delete a text with specific id, update a parameter of this specific element and etc.

nested_list.ex

[
  %{
    children: [
      %{
        children: [],
        class: ["flex", "flex-col", "justify-between", "items-stretch",
         "min-h-[200px]", "w-full", "border", "border-dashed",
         "border-gray-400", "p-1"],
        id: "c2a02176-abd8-4939-8c70-0c90ee988be4",
        index: 0,
        parent: "layout",
        parent_id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
        type: "section"
      },
      %{
        children: [
          %{
            children: [],
            class: ["text-black", "w-full", "p-2", "text-base"],
            id: "88a1a223-5945-4d21-9c24-42fe38d89866",
            index: 0,
            parent: "section",
            parent_id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
            type: "text"
          },
          %{
            children: [],
            class: ["text-black", "w-full", "p-2", "text-base"],
            id: "d31a13b1-134f-49e4-9c17-6b8d246cc87b",
            index: 1,
            parent: "section",
            parent_id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
            type: "text"
          },
          %{
            children: [],
            class: ["text-black", "w-full", "p-2", "text-base"],
            id: "e3bc2be1-9986-46d6-a063-53a29194c4c6",
            index: 2,
            parent: "section",
            parent_id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
            type: "text"
          }
        ],
        class: ["flex", "flex-col", "justify-between", "items-stretch",
         "min-h-[200px]", "w-full", "border", "border-dashed",
         "border-gray-400", "p-1"],
        id: "928a9aa4-d79c-4671-8fca-e605b0fd13c3",
        index: 1,
        parent: "layout",
        parent_id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
        type: "section"
      },
      %{
        children: [],
        class: ["flex", "flex-col", "justify-between", "items-stretch",
         "min-h-[200px]", "w-full", "border", "border-dashed",
         "border-gray-400", "p-1"],
        id: "c2a02176-abd8-4939-8c70-0c90ee988be4",
        index: 2,
        parent: "layout",
        parent_id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
        type: "section"
      },
    ],
    class: ["flex", "flex-row", "justify-start", "items-center", "w-full",
     "space-x-3", "px-3", "py-10"],
    id: "729cbf88-cf87-4f9b-a565-39c3103ece38",
    index: 0,
    parent: "dragLocation",
    parent_id: "dragLocation",
    type: "layout"
  },
  %{
    children: [],
    class: ["flex", "flex-row", "justify-start", "items-center", "w-full",
     "space-x-3", "px-3", "py-10"],
    id: "8bd7f072-215d-4f82-9895-9786f093838a",
    index: 1,
    parent: "dragLocation",
    parent_id: "dragLocation",
    type: "layout"
  },
  %{
    children: [],
    class: [],
    id: "UUID",
    index: 2,
    parent: "dragLocation",
    parent_id: "dragLocation",
    type: "layout"
  }
]