Category Management

⚙️ Technical User Story: Category Management (Main Screen)

As a Product Developer, I need to implement the Category Management screen, which displays the list of all categories and integrates a modular Category Form Block for all Insert and Edit operations, ensuring data consistency and clear UI feedback.

1. Category List Display Requirements (The Main Screen)

The main screen must load and display all categories in a table format.

1.1. Category List Table Specifications

Column Header	Implementation Requirement
ID	Must be a clickable link to trigger the Edit operation.
Name	Standard text display.
Description	Show a maximum of 10 characters, followed by an ellipsis (...). **On mouse hover, show the full description in a tooltip.**
Created By	Standard text display.
Created Date	Standard date display.
Created Time	Standard time display.
Last Updated By	Standard text display.
Last Updated Date Time	Display the full date and time of the last update.
Remove	Must contain a Trash Icon (🗑️) to trigger the delete confirmation popup.

1.2. Action Requirements (Buttons & Links)

• Add Button: Clicking the **Add** button must open the Category Form Block in Insert mode.
• Edit Link (ID Click): Clicking the **ID** link in any row must open the Category Form Block in Edit mode for that specific record.
• Remove Action: Clicking the Trash Icon must open a **Confirmation Popup** that asks the user to confirm the deletion.

2. Category Form Web Block Integration (The Modular Component)

The creation and updating of categories must be delegated to a reusable Web Block (simulated by the modal/popup) to centralize business logic. The developer must handle the save feature within this block.

2.1. Web Block Contract (Inputs and Outputs)

The developer must design the Web Block with the following parameters to ensure communication with the main screen:

• Block Input Parameter: The block must accept a single Input Parameter named CategoryId (Integer).
  • Null or 0 value means the block must operate in Insert Mode (reset the form).
  • Positive ID value means the block must operate in Edit Mode (load and populate the form fields for the specified ID).
• Block Output Parameter: The block must define an **Output Parameter** named SavedCategoryId (Integer).
  • This parameter must only be set with the new or updated Category ID upon a successful save. It must be null if the operation fails or is canceled.

2.2. Block Form and Validation Requirements

The internal form within the Web Block must adhere to the following:

• Category Name: Must be a mandatory text field.
• Description: Must be a text area that is mandatory and requires a minimum length of 50 characters for validation.
• Action Buttons: Must include **Save** and **Cancel** buttons.

2.3. Save and Success Flow (Integration Goal)

The developer must ensure the following flow when the Save button is clicked within the block:

1. The block executes all internal form validation.
2. Upon **successful validation**, the block executes the Insert or Update operation and **sets its Output Parameter** (SavedCategoryId) to the ID of the saved record.
3. The block must close itself.
4. Main Screen Response: The main screen's event handler (triggered by the block closing) must check the value of the Output Parameter. If the value is **not null**, the main screen must **refresh the category list** and display a clear notification message, including the **Updated/Added ID**.