Menu Configuration¶

Requirement OverView¶

The Menu Configuration feature is crucial for setting up the application's menu structure, which is organized into three layers: Main Menu, Sub Menu, and Parent Menu. This configuration process ensures the menu aligns with client requirements in the application.

UI Design¶

https://www.figma.com/design/vHzWdz7wikC42ekOgoL3SD/Configuration1?node-id=360-2499&t=MRUoK0xbNoWHNApO-1

Functional Requirement¶

Requirement 1 : Create a Menu Configuration feature. Upon clicking on Menu Configuration, the system should display the following UI :

• The Menu List tab should be shown first by default, and please create the individual tab for the Main Menu , Sub Menu, Parent Menu and Menu List
  • Main Menu tab show the column list in the following format : | SN | Menu | Category | Sub Category | Modules |
  • Sub Menu tab show the column list in the following format : | SN | Sub Menu | Menu | Category | Sub Category | Modules |
  • Parent Menu tab show the column list in the following format : | SN | Parent Menu | Menu | Sub Menu | Category | Sub Category | Modules |
  • Menu List shows the column list in the following format : | SN | Menu | Main Menu | Sub Menu | Parent Menu | Category | Sub Category | Modules |
    Note: For any clarification, please go through to the UI Design.
• Filter: The filter option is used to refine and narrow down the displayed data, making it easier to find specific information.
  • Filter By: The column list displayed in the "Filter By" section should be as per the selected tab.
  • Filter Data: Data should be displayed according to the selected options in the "Filter By" list.
  • To remove the filter, the user should click on "Clear Filter." After clicking it , all menus should be displayed in the UI.

• Options: There are three options available: Export Menu List, Import Menu List, and Refresh List.
  • Export Menu List: All the menu list will be downloaded in excel format in the user's device after clicking on export menu list.
  • Import Menu List: Clicking on Import Menu List will display the import UI (details are under discussion).
  • Refresh List: Clicking on Refresh List will update and refresh the tab’s data It clears all filters and refreshes the list. If data is not displayed, the Refresh List will reload the entire list.

• Create Menu: When the user clicks on "Create Menu," the system should display a list of options as illustrated in the figure.

• Search: When the user clicks on the search icon, the search panel should be displayed, featuring the "Search by" button. The search results should be filtered according to the selected criteria from the "Search by" list.

• Action Button : There are action options available where the user can view, edit, or delete by clicking on the action button.

Actions:

• View: Clicking the "View" button takes the user to a read-only display of the selected menu, allowing them to view its details. If the user clicks on the Main Menu List and selects "View," it will display the selected Main Menu in the View tab. Similarly, the View and Edit options should display the corresponding menu tab.
• Edit: Clicking the "Edit" button directs the user to an edit UI for the selected menu , allowing them to modify all fields.
• Delete: Clicking the "Delete" button enables the user to remove the selected menu from the list. However, if the Main Menu, Parent Menu, or Sub Menu is mapped, the menu group cannot be deleted until all associated menus in the list are removed.
• Note: All filter, Search and Action functions work the same across all tabs.
  Requirement 2: Create a Main Menu UI . When the user clicks on "Create Menu" and then selects "Add Main Menu,"from the drop down list, the following UI should be displayed.

The details of the UI are as follows :

• Main Menu : The Main Menu name must be unique for each selected value in the module input control and will be validated during the save process. This field is required.
• Category: Select a category from the dropdown or create a new one by clicking the add icon. A popup will appear to enter a new category. Duplicate categories are not allowed, and a validation message will prevent saving if a duplicate is entered.
• Subcategory : Select from the dropdown or add a new one by clicking the add icon. This is an optional field, but duplicate subcategories are not allowed.
• Module : User can select it from the dropdown and the list should be taken from the Module table (database) or user can add the module from the add icon.
• Menu Index :tt is an alphanumeric field with format “01”.Duplicate menu indexes within a module are not allowed, so validation is required.
• Shortcut Key : This key is used to quickly access the main menu. If the user sets "C" as the shortcut, pressing "C" should open the assigned main menu.
• Menu Icon Path: This text field is used to map the icon for the main menu.
  Note to be consider:
  - After saving menus, all , the data should be stored in the TBLMENU table.
  - The created category should be saved in the Category table whereas the created sub category should be saved in the SubCategory table of the database
  - The Module should be saved in the Module table.
  - The data should represent the menu types in the database as follows: Main Menu = MM, Sub Menu = SM, Parent Menu = PM, and Menu = M.
  - The top and bottom panels (Save and Cancel) should remain visible in the viewport while the user scrolls.
  Requirement 3 : Please create Sub Menu UI as the following UI :

When the user clicks the "Create Menu" button and selects "Add Sub Menu," the above UI should be displayed.The details of the UI are as follows :

• Main Menu: When the user clicks the dropdown, the main menu should display in the selection option. ** Selecting a main menu will automatically populate the category, subcategory, module, and menu index. ** Category and module are locked fields, while the subcategory can be changed or added through the add icon.
  • The menu index should auto-fill based on the main menu index (e.g., 01.01) but can be modified. Duplicate Sub Menu Indexes are not allowed.
• Sub Menu: This text field must be unique within each selected module input control and will be validated during the save process.This field is mandatory.
• Shortcut Key : This key is used to quickly access the sub menu. If the user sets "V" as the shortcut, pressing "V" on the keyboard should open the assigned sub menu. The duplication is not allowed.
• Menu Icon Path: This text field is used to map the icon for the sub menu.

Requirement 4 : Please create Parent Menu UI as the following UI :

When the user clicks the "Create Menu" button and selects "Add Parent Menu," the above UI should be displayed.The details of the UI are :

• Main Menu: When the user clicks the dropdown, the main menu should appear in the list.
• Sub Menu : The Sub Menu should be filtered as per Selected Main Menu and when after selecting an Sub Menu,the category, subcategory, module, and menu index.shall fill automatically.
  - Category and module should be locked, while the subcategory can be changed or added through the add icon.
  - The menu index should automatically appear based on the sub menu index (e.g., 01.01.01) but can be modified but the duplication of Parent Menu Index should not be allowed.
• Parent Menu :* It is a text field and must be unique within each module and will be validated during the save process. This field is mandatory..
• Shortcut Key : This key is used to quickly access the parent menu.. The duplication is not allowed.It is an optional field.
• Menu Icon Path: This text field is used to map the icon for the parent menu.

Requirement 5 : Please create a Menu UI . When the user clicks on "Create Menu" and then selects " Add Menu, "

.The details of the UI are :

• Main Menu: When the user clicks the dropdown, the main menu should appear in the list.
• Sub Menu: The Sub Menu should be filtered based on the selected Main Menu. After selecting a Sub Menu, the category, subcategory, module, and menu index should be automatically filled.
  • Category and Module: These fields should be locked.
  • Subcategory: Can be changed or added through the add icon.
  • Menu Index: Should auto-fill based on the Sub Menu index and parent menu. It can be modified, but duplicate Menu Indexes are not allowed.
    • If the parent menu is not selected, the 00 indicates no parent menu selection in the format ( 01.01.00.01). If a parent menu is selected, the menu index should follow the parent menu format, such as 01.01.01.01.

Parent Menu: Users can select a parent menu from a dropdown list based on sub menu and main menu options. This field is optional. If a parent menu is selected, the category, subcategory, and menu index should be updated according to the selected parent menu.

• Shortcut Key : This key is used to quickly access the parent menu.. The duplication is not allowed.It is an optional field.
• Menu Icon Path: This text field is used to map the icon for the parent menu.
  Application Menu ID: Must be unique as per module wise and can be selected from a dropdown or created using the add icon. Duplication is not allowed, and a validation pop-up will appear.