enhancement: App Builder needs updation

[PritamBag]

Problem Statement:

We currently want to make whole apps using app builder which is why we are making multiple builders to build them ( for eg: Model, Form, Page ..etc). This enhancement aims to develop and improve app builder to provide all these features and functionalities etc.

---

Task List

• API Endpoint for Each Prop
  Develop API endpoints for each component property to enhance configurability.

• Issue #57
  Implement a navigator to display the entire UI structure, making layout editing and navigation easier. We need to build functionality for selecting and adding properties for each component.

• Code View
  Begin development of a code view to allow users to view and edit the underlying code.

• Canvas Viewer Component
  Update the default canvas viewer component to render from pageJson, with layouts dynamically sourced from the layout manager.

• UI Design of Page Builder
  Complete the UI design for the Page Builder to ensure a user-friendly experience.

• Add Layout Toolbox
  Create a layout toolbox that allows users to select various layout options, with placeholders displayed under each layout name after selection.

• Add Component Toolbox
  Implement a component toolbox for adding and configuring components, including categorization and search functionality.

• Add Prop Toolbox
  Build a prop toolbox allowing users to modify each component’s properties. Include search functionality, component-based suggestions, and default values.

• Add Event Toolbox
  Develop an event toolbox to manage interactions and events for components. Include suggestions, as there are approximately 45 default events.

• Add Styles
  Provide options to apply predefined or custom styles.

• Style Selector Enhancements
  Add search and suggestion features to the style selector in the prop toolbox for improved usability.

• Integration with app builder

• **HISTORY Undo redo **
  The undo/redo feature allows users to revert to previous states of their data and actions. It keeps track of changes made in the system, enabling users to step back to earlier versions or reapply changes. This is useful for correcting mistakes or experimenting with different data configurations without the fear of losing progress.--done by @priyanshu2k3
  redo crash when array is empty

  Integrate the page builder with the app builder, including features for setting module names, page names, history tracking, review requests, and save functionality.

---

Completed Tasks

• UI Design of Page Builder
  The initial design of the Page Builder UI is complete, focusing on usability.
• Add Layout Toolbox
  The Layout Toolbox is functional, allowing layout selection.
• Add Component Toolbox
  The Component Toolbox enables users to add various components.
• Add Prop Toolbox
  Users can now adjust component properties via the Prop Toolbox.
• Add Event Toolbox
  Event management for components is available through the Event Toolbox.
• Add Styles
  Basic styling options are in place.
• Icon Functionality for Toggle Toolbox
  Functional icons are implemented for each toolbox, allowing users to control toolboxes through icons.
• Expand/Collapse Toolbox
  Expand and collapse functionality is operational for each toolbox, enabling users to toggle toolbox content visibility.
• Each Component Has ID
  Used UUID for each component to ensure unique IDs.
• Issue #57
  The navigator is functional using pageJson, drag-and-drop capabilities are completed, and components can be cloned
  within their parent containers.
• ** JSON change detector Store only delta **
  Delta Storage: Captures the differences between two JSON states.
  Efficient Tracking: Minimizes the amount of data stored while maintaining a full history of changes.--done by @priyanshu2k3

---

Dependencies and Issues

• RightDrawerLayout Not Working
  The RightDrawerLayout component is incomplete.
• Issue #57
  Dispatches from the navigator are causing pageJson in the reducer to become null. This issue is under investigation by @anantakumarghosh.
• Core Issue #399
  Prop types require improvement, as many have invalid types.
• Style Selector Enhancements
  The style selector is mostly functional with add, remove, and reset options. Additional needs:
  • A search box to locate specific styles.
  • Suggestions relevant to the selected component.
• Layout Selection
  After layout selection, placeholders should appear within the layout, sourced from the layout manager.
• pageJson Saved in Database
  pageJson requires a database location for saving. This task is assigned to @PritamIT2023.
• Core Issue #392
  This is a style-related issue, assigned to @PritamIT2023.

---

Work in Progress

• Collapse, Expand, and Three-Dot Menu
  These functionalities are partially implemented, with work ongoing to make them fully operational.

• Current Progress for the App Builder

1. We have been defining the data structure for all the data of the given files
2. Using factory designs pattern in the code
3. Making multiple builders such as (Model, Form, Page).
4. Moved the code to Typescript for using Object Oriented Programming principles
5. Converted the code using Object oriented Programming Principles

[anantakumarghosh]

Unintentionally closed.

[anantakumarghosh]

there are lots of events, props selector looking messy.