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.
This commit is contained in:
google-labs-jules[bot]
@@ -48,10 +48,16 @@ describe('useUi Store', () => {
|
||||
expect(store.accentColorTareas).toBe('#4CAF50')
|
||||
expect(store.accentColorPlanillas).toBe('#FF9800')
|
||||
expect(store.accentColorAsistencias).toBe('#E91E63')
|
||||
expect(localStorageMock.getItem).toHaveBeenCalledWith(APPEARANCE_STORAGE_KEY)
|
||||
})
|
||||
|
||||
it('loads settings from localStorage including new accent colors if present', () => {
|
||||
expect(store.accentColorConfiguracion).toBe('#607D8B')
|
||||
// Check new default view defaults
|
||||
expect(store.defaultViewEmpleados).toBe('table')
|
||||
expect(store.defaultViewTareas).toBe('table')
|
||||
expect(store.defaultViewPlanillas).toBe('table')
|
||||
expect(store.defaultViewAsistencias).toBe('table')
|
||||
expect(store.defaultViewConfiguracion).toBe('table')
|
||||
// Check other new defaults
|
||||
expect(store.tableBgColorEmpleados).toBe('#FFFFFF')
|
||||
expect(store.desktopNavbarPersistent).toBe(false)
|
||||
expect(localStorageMock.getItem).toHaveBeenCalledWith(APPEARANCE_STORAGE_KEY)
|
||||
})
|
||||
|
||||
@@ -65,7 +71,18 @@ describe('useUi Store', () => {
|
||||
accentColorTareas: '#00FF00',
|
||||
accentColorPlanillas: '#FFFF00',
|
||||
accentColorAsistencias: '#FF00FF',
|
||||
// other settings...
|
||||
accentColorConfiguracion: '#112233',
|
||||
tableBgColorEmpleados: '#EEEEEE',
|
||||
tableBgColorTareas: '#DDDDDD',
|
||||
tableBgColorPlanillas: '#CCCCCC',
|
||||
tableBgColorAsistencias: '#BBBBBB',
|
||||
tableBgColorConfiguracion: '#AAAAAA',
|
||||
desktopNavbarPersistent: true,
|
||||
defaultViewEmpleados: 'card',
|
||||
defaultViewTareas: 'card',
|
||||
defaultViewPlanillas: 'card',
|
||||
defaultViewAsistencias: 'card',
|
||||
defaultViewConfiguracion: 'card',
|
||||
}
|
||||
localStorageMock.getItem.mockReturnValueOnce(JSON.stringify(storedSettings))
|
||||
|
||||
@@ -80,9 +97,21 @@ describe('useUi Store', () => {
|
||||
expect(store.accentColorTareas).toBe('#00FF00')
|
||||
expect(store.accentColorPlanillas).toBe('#FFFF00')
|
||||
expect(store.accentColorAsistencias).toBe('#FF00FF')
|
||||
expect(store.accentColorConfiguracion).toBe('#112233')
|
||||
expect(store.tableBgColorEmpleados).toBe('#EEEEEE')
|
||||
expect(store.tableBgColorTareas).toBe('#DDDDDD')
|
||||
expect(store.tableBgColorPlanillas).toBe('#CCCCCC')
|
||||
expect(store.tableBgColorAsistencias).toBe('#BBBBBB')
|
||||
expect(store.tableBgColorConfiguracion).toBe('#AAAAAA')
|
||||
expect(store.desktopNavbarPersistent).toBe(true)
|
||||
expect(store.defaultViewEmpleados).toBe('card')
|
||||
expect(store.defaultViewTareas).toBe('card')
|
||||
expect(store.defaultViewPlanillas).toBe('card')
|
||||
expect(store.defaultViewAsistencias).toBe('card')
|
||||
expect(store.defaultViewConfiguracion).toBe('card')
|
||||
})
|
||||
|
||||
it('loads older settings from localStorage and uses defaults for new accent colors if not present', () => {
|
||||
it('loads older settings from localStorage and uses defaults for new settings if not present', () => {
|
||||
const olderStoredSettings = {
|
||||
primaryColor: '#ABCDEF',
|
||||
theme: 'dark',
|
||||
@@ -96,10 +125,20 @@ describe('useUi Store', () => {
|
||||
expect(store.theme).toBe('dark')
|
||||
expect(store.fontSize).toBe(18)
|
||||
// New accent colors should fall back to defaults
|
||||
expect(store.accentColorEmpleados).toBe('#2196F3')
|
||||
expect(store.accentColorTareas).toBe('#4CAF50')
|
||||
expect(store.accentColorPlanillas).toBe('#FF9800')
|
||||
expect(store.accentColorAsistencias).toBe('#E91E63')
|
||||
expect(store.accentColorEmpleados).toBe('#2196F3') // Default
|
||||
expect(store.accentColorTareas).toBe('#4CAF50') // Default
|
||||
expect(store.accentColorPlanillas).toBe('#FF9800') // Default
|
||||
expect(store.accentColorAsistencias).toBe('#E91E63') // Default
|
||||
expect(store.accentColorConfiguracion).toBe('#607D8B') // Default
|
||||
// New default view keys should fall back to 'table'
|
||||
expect(store.defaultViewEmpleados).toBe('table')
|
||||
expect(store.defaultViewTareas).toBe('table')
|
||||
expect(store.defaultViewPlanillas).toBe('table')
|
||||
expect(store.defaultViewAsistencias).toBe('table')
|
||||
expect(store.defaultViewConfiguracion).toBe('table')
|
||||
// Other new keys
|
||||
expect(store.tableBgColorEmpleados).toBe('#FFFFFF') // Default
|
||||
expect(store.desktopNavbarPersistent).toBe(false) // Default
|
||||
})
|
||||
|
||||
it('falls back to default settings if localStorage data is invalid JSON', () => {
|
||||
@@ -129,11 +168,14 @@ describe('useUi Store', () => {
|
||||
const appearanceSettingKeysInTest = [
|
||||
'primaryColor', 'secondaryColor', 'warningColor', 'fontFamily',
|
||||
'fontSize', 'animationsEnabled', 'backgroundColor', 'theme',
|
||||
'accentColorEmpleados', 'accentColorTareas', 'accentColorPlanillas', 'accentColorAsistencias',
|
||||
const appearanceSettingKeys = [
|
||||
'primaryColor', 'secondaryColor', 'warningColor', 'fontFamily',
|
||||
'fontSize', 'animationsEnabled', 'backgroundColor', 'theme',
|
||||
]
|
||||
'accentColorEmpleados', 'accentColorTareas', 'accentColorPlanillas',
|
||||
'accentColorAsistencias', 'accentColorConfiguracion',
|
||||
'tableBgColorEmpleados', 'tableBgColorTareas', 'tableBgColorPlanillas',
|
||||
'tableBgColorAsistencias', 'tableBgColorConfiguracion',
|
||||
'desktopNavbarPersistent',
|
||||
'defaultViewEmpleados', 'defaultViewTareas', 'defaultViewPlanillas',
|
||||
'defaultViewAsistencias', 'defaultViewConfiguracion',
|
||||
];
|
||||
|
||||
it('setPrimaryColor updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
@@ -215,7 +257,9 @@ describe('useUi Store', () => {
|
||||
expect(Object.keys(savedData).length).toBe(appearanceSettingKeysInTest.length);
|
||||
expect(savedData.sidebarOpen).toBeUndefined() // Ensure non-appearance data is not saved
|
||||
appearanceSettingKeysInTest.forEach(key => {
|
||||
expect(savedData.hasOwnProperty(key)).toBe(true)
|
||||
//This assertion needs to be robust if some keys are not initialized (e.g. undefined)
|
||||
//However, our store initializes all appearance keys
|
||||
expect(savedData.hasOwnProperty(key)).toBe(true);
|
||||
})
|
||||
})
|
||||
|
||||
@@ -259,11 +303,100 @@ describe('useUi Store', () => {
|
||||
expect.stringContaining('"accentColorAsistencias":"#FF7788"')
|
||||
)
|
||||
})
|
||||
expect(Object.keys(savedData).length).toBe(appearanceSettingKeys.length);
|
||||
expect(savedData.sidebarOpen).toBeUndefined() // Ensure non-appearance data is not saved
|
||||
appearanceSettingKeys.forEach(key => {
|
||||
expect(savedData.hasOwnProperty(key)).toBe(true)
|
||||
})
|
||||
|
||||
it('setAccentColorConfiguracion updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setAccentColorConfiguracion('#99AABB')
|
||||
expect(store.accentColorConfiguracion).toBe('#99AABB')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"accentColorConfiguracion":"#99AABB"')
|
||||
)
|
||||
})
|
||||
|
||||
// Tests for table background color actions
|
||||
it('setTableBgColorEmpleados updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setTableBgColorEmpleados('#EEECCC')
|
||||
expect(store.tableBgColorEmpleados).toBe('#EEECCC')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"tableBgColorEmpleados":"#EEECCC"')
|
||||
)
|
||||
})
|
||||
// Similar tests for Tareas, Planillas, Asistencias, Configuracion table bg colors...
|
||||
|
||||
it('setDesktopNavbarPersistent updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setDesktopNavbarPersistent(true)
|
||||
expect(store.desktopNavbarPersistent).toBe(true)
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"desktopNavbarPersistent":true')
|
||||
)
|
||||
store.setDesktopNavbarPersistent(false)
|
||||
expect(store.desktopNavbarPersistent).toBe(false)
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"desktopNavbarPersistent":false')
|
||||
)
|
||||
})
|
||||
|
||||
// Tests for new default view actions
|
||||
it('setDefaultViewEmpleados updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setDefaultViewEmpleados('card')
|
||||
expect(store.defaultViewEmpleados).toBe('card')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"defaultViewEmpleados":"card"')
|
||||
)
|
||||
store.setDefaultViewEmpleados('table')
|
||||
expect(store.defaultViewEmpleados).toBe('table')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"defaultViewEmpleados":"table"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setDefaultViewTareas updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setDefaultViewTareas('card')
|
||||
expect(store.defaultViewTareas).toBe('card')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"defaultViewTareas":"card"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setDefaultViewPlanillas updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setDefaultViewPlanillas('card')
|
||||
expect(store.defaultViewPlanillas).toBe('card')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"defaultViewPlanillas":"card"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setDefaultViewAsistencias updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setDefaultViewAsistencias('card')
|
||||
expect(store.defaultViewAsistencias).toBe('card')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"defaultViewAsistencias":"card"')
|
||||
)
|
||||
})
|
||||
|
||||
it('setDefaultViewConfiguracion updates state and saves to localStorage', () => {
|
||||
const store = useUi()
|
||||
store.setDefaultViewConfiguracion('card')
|
||||
expect(store.defaultViewConfiguracion).toBe('card')
|
||||
expect(localStorageMock.setItem).toHaveBeenCalledWith(
|
||||
APPEARANCE_STORAGE_KEY,
|
||||
expect.stringContaining('"defaultViewConfiguracion":"card"')
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user