Gestion des variable personnalisées front end

Description

The frontend feature will provide an intuitive and user-friendly interface for managing personalized variables within a group's settings. This will be achieved through a new tab named "Custom Variable" in the BsPageGroup component.

Tasks

[ ] Add a new tab in BsPageGroup named "Custom Variable" with the appropriate translations. This will be located in packages/ui/routes/groups/_groupId/index.vue.
[ ] Create a new component bs-group-personalized-variable-tab. This will be located in packages/ui/components/group/bs-group-personalized-variable-tab.
[ ] Display text inputs directly for the "label" and "variable" fields. These inputs will be initialized with the respective values, which can be modified. An "Add" button will be available to add new rows to the table.
[ ] Add a "Delete" button to remove an element. If the deleted element has an id, a backend call is made to delete the element. If it does not have an id, it is deleted without making a backend call because it is not already published.
[ ] Implement validation on the fields in case they are left empty when the submit button is clicked.

Example of Visual Table:

To maintain consistency, we should create a table similar to the existing one, but with text inputs directly displayed for the "label" and "variable" fields.

API Endpoints

GET /api/groups/:groupId/personalized-variables - This endpoint will be used to retrieve all personalized variables associated with the specified group ID. This will be used to populate the table with existing variables.
POST /api/groups/:groupId/personalized-variables - This endpoint will be used to create or update a list of personalized variables in the specified group. The request body should contain the details of the personalized variable array to be created or updated (i.e., label and variable). This will be used when the "Add" button is clicked and when a field is modified.
DELETE /api/groups/:groupId/personalized-variables/:variableId - This endpoint will be used to delete a personalized variable from the specified group. This will be used when the "Delete" button is clicked and the element has an id.

Acceptance Criteria

[ ] Group admins can add new personalized variables by clicking the "Add" button.
[ ] Group admins can modify existing personalized variables by editing the value in the text input.
[ ] Group admins can delete existing personalized variables by clicking the "Delete" button.
[ ] Changes made to variables are correctly saved and persistent.
[ ] Validation errors are properly handled and displayed to the user.