Overview
The goal is to implement a flexible and configurable menu that can be displayed in a specified order based on configuration settings. Currently, the order of menu entries (both top-level and sub-level) is determined by the sequence in which openIMIS modules are loaded on the frontend. This configuration will be integrated into a larger global configuration that is loaded during app initialization. Moreover, the functionality should allow the creation of entirely new menu entries. However, submenus can only be linked to existing ones that are predefined within the application, ensuring consistency with the application’s internal structure.
The aim is to enhance the current implementation of menu entry population by introducing a new property called POSITION for both the MainMenuComponent and individual menu entries (referred to as submenus). Currently, the order of menu entries cannot be modified by non-technical users; only technical users can adjust it by altering the order of modules in the openimis.json file (assembly frontend - openimis-fe_js). The proposed change will enable non-technical implementers to configure the menu order easily and intuitively. Additionally, the functionality will include the possibility to create entirely new menu entries, while submenus can only be linked to existing ones within the application, ensuring seamless integration.
Strategy
Component MainMenuCompoment (Openimis-fe-core_js)
...
getMenuEntries() { <To-impplement> } -The implementation should be added here. The function will be responsible for fetching all menu entries within the system. Ideally, it should retrieve all keys containing.MainMenu except for core.MainMenu and extract the values from those keys. Based on this collection, we should generate a list of available entries within the system.
Summary - what need to do in achieve goal
Define Configuration Structure:
Design the structure of the configuration to store menu priorities at the database level. Ensure this configuration is exposed to the frontend through the backend using GraphQL.
...