feat: Add default index view setting for modules

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.

ui/src/views/tareas/__tests__/TareasIndex.spec.js

@@ -0,0 +1,128 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { useUi } from '@/stores/useUi'
+import { useTareasStore } from '@/stores/useTareas'
+import TareasIndex from '../TareasIndex.vue'
+import TablaTareas from '@/components/tareas/tablaTareas.vue'
+import CardTarea from '@/components/tareas/cardTarea.vue'
+
+// Mock child components
+vi.mock('@/components/tareas/tablaTareas.vue', () => ({
+  default: {
+    name: 'TablaTareas',
+    props: ['tareas'], // Match actual props
+    emits: ['edit'],
+    template: '<div data-testid="tabla-tareas"></div>',
+  },
+}))
+
+vi.mock('@/components/tareas/cardTarea.vue', () => ({
+  default: {
+    name: 'CardTarea',
+    props: ['tarea'], // Match actual props
+    emits: ['edit'],
+    template: '<div data-testid="card-tarea"></div>',
+  },
+}))
+
+// Mock stores
+const mockSetDefaultViewTareas = vi.fn();
+const mockFetchTareas = vi.fn();
+
+vi.mock('@/stores/useUi', () => ({
+  useUi: vi.fn(() => ({
+    defaultViewTareas: 'table', // Default mock value
+    setDefaultViewTareas: mockSetDefaultViewTareas,
+  })),
+}))
+
+vi.mock('@/stores/useTareas', () => ({
+  useTareasStore: vi.fn(() => ({
+    tareas: [],
+    fetchTareas: mockFetchTareas,
+  })),
+}))
+
+describe('TareasIndex.vue', () => {
+  let uiStoreMock
+  let tareasStoreMock
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    mockFetchTareas.mockClear().mockResolvedValue([])
+    mockSetDefaultViewTareas.mockClear()
+
+    uiStoreMock = useUi()
+    tareasStoreMock = useTareasStore()
+  })
+
+  const mountComponent = () => {
+    return mount(TareasIndex, {
+      global: {},
+    })
+  }
+
+  it('fetches tareas on mount', async () => {
+    mountComponent()
+    await mockFetchTareas(); // Ensure the promise from fetch resolves
+    expect(mockFetchTareas).toHaveBeenCalledTimes(1)
+  })
+
+  describe('View Rendering based on useUi store', () => {
+    it('renders TablaTareas when defaultViewTareas is "table"', async () => {
+      uiStoreMock.defaultViewTareas = 'table'
+      tareasStoreMock.tareas = [{ id: 1, titulo: 'Test Task', completada: false }]
+
+      const wrapper = mountComponent()
+      await mockFetchTareas();
+      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.findComponent({ name: 'TablaTareas' }).exists()).toBe(true)
+      expect(wrapper.findComponent({ name: 'TablaTareas' }).props('tareas')).toEqual(tareasStoreMock.tareas)
+      expect(wrapper.findComponent({ name: 'CardTarea' }).exists()).toBe(false)
+    })
+
+    it('renders CardTarea when defaultViewTareas is "card"', async () => {
+      uiStoreMock.defaultViewTareas = 'card'
+      tareasStoreMock.tareas = [{ id: 1, T1: 'T1' }, { id: 2, T2: 'T2' }]
+
+      const wrapper = mountComponent()
+      await mockFetchTareas();
+      await wrapper.vm.$nextTick()
+      await wrapper.vm.$nextTick()
+
+      const cardWrappers = wrapper.findAllComponents({ name: 'CardTarea' })
+      expect(cardWrappers.length).toBe(tareasStoreMock.tareas.length)
+      expect(cardWrappers[0].props('tarea')).toEqual(tareasStoreMock.tareas[0])
+      expect(wrapper.findComponent({ name: 'TablaTareas' }).exists()).toBe(false)
+    })
+
+    it('renders no data message for table view when no tareas exist', async () => {
+        uiStoreMock.defaultViewTareas = 'table';
+        tareasStoreMock.tareas = [];
+
+        const wrapper = mountComponent();
+        await mockFetchTareas();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.findComponent({ name: 'TablaTareas' }).exists()).toBe(true);
+        expect(wrapper.text()).toContain('No hay tareas para mostrar');
+    });
+
+    it('renders no data message for card view when no tareas exist', async () => {
+        uiStoreMock.defaultViewTareas = 'card';
+        tareasStoreMock.tareas = [];
+
+        const wrapper = mountComponent();
+        await mockFetchTareas();
+        await wrapper.vm.$nextTick();
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper.findAllComponents({ name: 'CardTarea' }).length).toBe(0);
+        expect(wrapper.text()).toContain('No hay tareas para mostrar');
+    });
+  })
+})