This commit introduces a new configuration module for UI appearance settings.
You can now customize various aspects of the application's look and feel.
Key features:
- Customizable color palette: primary, secondary, warning, and background colors.
- Font customization: font family and font size.
- Theme selection: light and dark themes.
- Animation control: toggle animations on/off.
Changes include:
- Extended `ui/src/stores/useUi.js` to manage appearance state, including actions for updates and integration with local storage for persistence.
- Created `ui/src/views/SettingsView.vue` with UI controls for all customizable settings.
- Implemented dynamic application of settings in `ui/src/App.vue` by updating CSS variables and classes on the root element.
- Enhanced `SettingsView.vue` with modern styling (TailwindCSS) and subtle animations, ensuring it's theme-aware and respects animation preferences.
- Added comprehensive unit tests for the `useUi` store and component tests for `SettingsView.vue` using Vitest and Vue Test Utils.
The settings page allows for real-time previews of changes, and all preferences are saved locally to persist across sessions.
Here's what I did:
- Added `container_name` for `api` and `ui` services in `docker-compose.yml`.
- Created `ui/src/apiClient.js` to configure the API base URL using the API container name (`http://planilla-api:4000/api`).
- Added `axios` as a dependency to the UI project.
- Ensured UI store files correctly import the new `apiClient.js`.
This will allow your UI to reliably connect to the API service using Docker's internal DNS resolution via container names.
This commit introduces the following features:
1. **Empleado UI Components:**
* `EmpleadoForm.vue`: A form for creating and editing employee data.
* `cardEmpleado.vue`: A component to display a summary of employee information in a card format.
* `tablaEmpleados.vue`: A component to display a list of employees in a table format.
* `EmpleadosIndex.vue`: A view that displays both the card and table components, allowing you to switch between views and create new employees.
2. **Chat Interface Integration:**
* Modified `agent/handlers.js` to parse specific chat commands:
* "Quiero crear un nuevo @empleado": Responds with the `EmpleadoForm`.
* "Ver @empleado<CEDULA>": Responds with the `cardEmpleado` for the specified employee.
* "Mostrame los primeros X @empleados": Responds with `tablaEmpleados` displaying the requested number of employees.
* I send formatted messages (e.g., `CHAT_UI_COMPONENT::EmpleadoForm`) that the chat UI can interpret to render the Vue components.
3. **Tests:**
* Added unit tests for the new Vue components (`EmpleadoForm.vue`, `cardEmpleado.vue`, `tablaEmpleados.vue`) using Vitest.
* Added integration tests for the chat command handling in `agent/handlers.js` using Jest.
* (Note: Test execution was inconclusive, but all necessary files and configurations are included).
These changes fulfill the issue requirements by creating the necessary UI for the empleado module and enabling the summoning of these UI elements through the chat interface.
