This commit introduces module-specific accent colors and further integrates
the primary and secondary theme colors throughout the application's UI components.
Key features:
- Four new customizable accent colors, one for each main module:
- Empleados
- Tareas
- Planillas
- Asistencias
- These accent colors are configurable in the Settings view and persist in local storage.
- Broader application of global primary and secondary colors to common UI elements like navigation bars.
- Module-specific components now use their designated accent color for key visual elements (e.g., primary buttons, titles, icons, borders), providing better visual differentiation between modules.
Changes include:
- Extended `ui/src/stores/useUi.js` to manage state for the four new module accent colors, including actions and local storage persistence.
- Added a "Module Accent Colors" section with color pickers to `ui/src/views/SettingsView.vue`.
- Updated `ui/src/App.vue` to expose these module accent colors as CSS variables (e.g., `--accent-color-empleados`).
- Systematically updated styles in general UI components (`ui/src/components/ui/`) and all module-specific components (`ui/src/components/{module}/` and `ui/src/views/{module}/`) to utilize the new global and module-specific theme colors.
- Updated unit tests for `useUi.js` and component tests for `SettingsView.vue` to cover the new accent color functionality. A bug related to color input event handling in `SettingsView.vue` was identified and fixed during this process.
This enhancement provides a more visually distinct and customizable experience across different sections of the application.
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.
