This commit updates the module index pages to re-introduce local view toggle buttons, allowing you to temporarily switch between table and card visualizations for the current session. This change is based on your feedback to retain this flexibility alongside the new global default view settings.
Key changes:
- **Module Index Views (e.g., `EmpleadosIndex.vue`):**
- Re-added icon-based toggle buttons for 'Table' and 'Card' views.
- Styled these buttons using Tailwind CSS for a subtle and modern appearance. The active view's button is highlighted using the module's accent color.
- Clicking these buttons updates a local `currentView` ref, which determines the displayed component (table or card).
- This local selection overrides the global default view for the current session only and does not modify the saved default setting in the `useUi` store.
- **Testing:**
- Updated component tests for each module's index view (`AsistenciasIndex.spec.js`, `EmpleadosIndex.spec.js`, etc.).
- Tests now verify:
- Correct rendering and initial styling of the new toggle buttons based on the global default.
- Local view switching functionality upon button clicks.
- Correct update of button styling to reflect the active local view.
- Confirmation that local view changes do not affect the global default view settings in the `useUi` store.
This enhancement ensures that you can set a global default view for each module via settings, while still having the option to quickly toggle the view for your immediate needs without changing your saved preferences.
This commit introduces a new customization option in the appearance settings, allowing you to choose your default index view (card or table) for each module (Empleados, Tareas, Planillas, Asistencias).
Key changes:
- **Store Updates (`useUi.js`):**
- Added new state properties (e.g., `defaultViewEmpleados`) to store the preferred view for each module.
- Added corresponding actions (e.g., `setDefaultViewEmpleados`) to update these settings.
- Settings are persisted to local storage.
- **Settings UI (`SettingsView.vue`):**
- Added dropdown selectors in the module-specific sections of the appearance settings page for you to choose 'Table' or 'Card' as your default view.
- These selectors are bound to the new store properties.
- **Module Index Views (e.g., `EmpleadosIndex.vue`):**
- Modified to read the default view setting from the `useUi` store.
- Conditionally render either the table component or the card component based on this setting.
- Removed manual view toggle buttons, as the default is now managed via settings.
- **Testing:**
- I added unit tests for the new store actions and state.
- I added component tests for `SettingsView.vue` to verify the new UI elements and their interaction with the store.
- I added component tests for each module's index view to ensure they render the correct view (table or card) based on the global setting and display data or "no data" messages appropriately.
This feature provides you with more control over your preferred data display format within each module, enhancing the user experience.
