LEFT Sidebar - Needs to use SERVER components

[app-generator]

The current version uses the sidebar:

• three local components
  • a simple DIV
  • two GRIDS
• a remote component

Regarding this, the UI needs to pull the components from the backend using bs5 node. Here is the flow:

• Fetch the URL https://components-server.onrender.com/kits/bs5/
• Parse the components node and build on the sidebar a dynamic collapsable menu that mirrors the response from the server:

For instance, the server responds with this:

{
    "name": "BS5",
    "version": "1.0.0",
    "type": "kit",
    "description": "BS5 BASIC",
    "demo": "https://django-pixel-lite.appseed-srv1.com/",
    "content": {
        "layouts": {
            "base.html": "BASE_64"
        },
        "components": {
            "grid": {
                "grid-2rows.html": "BASE_64",
                "grid-3rows.html": "BASE_64",
                "grid-4rows.html": "BASE_64"
            },
            "footers": {
                "footer.html": "BASE_64"
            },
            "general": {
                "div.html": "BASE_64"
            }
        }
    }
}

Based on the information, the generated menu needs to be:

• Grids (collapsible)
  • grid-2rows
  • grid-3rows
  • grid-4rows
• Footers (collapsible)
  • footer
• General (collapsible)
  • div

Like this, the sidebar is populated automatically using these rules:

• Grids are always at the top
• Node Name is the UCfirst helper applied on the JSON node:
  • (JSON) footers -> (Menu Item) Footers

Other aspects:

• During the load, the user is informed that the components are loaded from the server using an overlay in the sidebar with a message.
  • Once the response is done and components are extracted, the sidebar is populated
• The JSON response is saved in the local_storage in the browser to avoid another server call if the user accidentally hit F5.
• The code HTML code for each component comes as a BASE_64 hash in the corresponding field.
• This is needed because we can get from the server all the designs in a single request (JSON Format).

@MohammadMargub please take a look and proceed with the code. TY!

[app-generator]

@MohammadMargub here is a video that explains the concept:

https://youtu.be/ZsqN1r329rg

TY!

[nastassiadanilova]

@app-generator hey! is the task completed already? seems like there is components are fetching from server already https://github.com/app-generator/rocket-builder/blob/main/builder/src/main.ts#L24

[app-generator]

Hello @nastassiadanilova

thank you for the follow-up. Indeed this is done.

Soon, we will add the new features that need to be developed + the related budget in order to respect the product SPECS:

https://docs.google.com/document/d/1YbmZro0b8ucMGE227xSMzcQGNbWgTaiOKfjgEW9RsWE/edit?usp=sharing

[app-generator]

Validated. Closing.