Feat: Agregar persistencia de subcategorías seleccionadas por tab
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m8s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m8s
Implementa la funcionalidad para que las subcategorías seleccionadas persistan: - Entre cambios de tabs (cada tab mantiene sus propias subcategorías) - Entre refrescos de página (guardado en localStorage) Cambios técnicos: - Modificado useCatacion.ts para guardar subcategorías por tab en lugar de array global - Agregada función actualizarSubcategorias() que persiste en localStorage - subcategoriasActivas ahora es computed basado en la tab activa - Removida limpieza de subcategorías al cambiar de tab en sesion.vue - Actualizado toggleSubcategoria para usar la nueva función de persistencia
This commit is contained in:
@@ -16,14 +16,62 @@ export type SubcategoriaDescriptivaAfectiva = 'descriptiva' | 'afectiva' | 'frag
|
|||||||
// Tipo unión de todas las subcategorías
|
// Tipo unión de todas las subcategorías
|
||||||
export type Subcategoria = SubcategoriaOrganoleptica | SubcategoriaDescriptivaAfectiva | null
|
export type Subcategoria = SubcategoriaOrganoleptica | SubcategoriaDescriptivaAfectiva | null
|
||||||
|
|
||||||
|
// Tipo para las subcategorías por tab
|
||||||
|
export type SubcategoriasPorTab = {
|
||||||
|
'organoleptica': Subcategoria[]
|
||||||
|
'descriptiva-afectiva': Subcategoria[]
|
||||||
|
'defectos': Subcategoria[]
|
||||||
|
'impresion-global': Subcategoria[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clave para localStorage
|
||||||
|
const STORAGE_KEY_SUBCATEGORIAS = 'riocata-subcategorias-activas'
|
||||||
|
|
||||||
export const useCatacion = () => {
|
export const useCatacion = () => {
|
||||||
const { sesionActiva, cargando, error, guardar, actualizar, eliminar } = useIndexedDB()
|
const { sesionActiva, cargando, error, guardar, actualizar, eliminar } = useIndexedDB()
|
||||||
|
|
||||||
|
// Cargar subcategorías desde localStorage
|
||||||
|
const cargarSubcategoriasDesdeStorage = (): SubcategoriasPorTab => {
|
||||||
|
if (process.client) {
|
||||||
|
try {
|
||||||
|
const stored = localStorage.getItem(STORAGE_KEY_SUBCATEGORIAS)
|
||||||
|
if (stored) {
|
||||||
|
return JSON.parse(stored)
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Error al cargar subcategorías desde localStorage:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
'organoleptica': [],
|
||||||
|
'descriptiva-afectiva': [],
|
||||||
|
'defectos': [],
|
||||||
|
'impresion-global': [],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Estado de la UI
|
// Estado de la UI
|
||||||
const tabActiva = useState<TabCatacion>('tab-activa', () => 'organoleptica')
|
const tabActiva = useState<TabCatacion>('tab-activa', () => 'organoleptica')
|
||||||
const subcategoriasActivas = useState<Subcategoria[]>('subcategorias-activas', () => [])
|
const subcategoriasPorTab = useState<SubcategoriasPorTab>('subcategorias-por-tab', cargarSubcategoriasDesdeStorage)
|
||||||
const accordionAbierto = useState<string[]>('accordion-abierto', () => [])
|
const accordionAbierto = useState<string[]>('accordion-abierto', () => [])
|
||||||
|
|
||||||
|
// Computed para obtener las subcategorías de la tab actual
|
||||||
|
const subcategoriasActivas = computed(() => subcategoriasPorTab.value[tabActiva.value])
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Actualiza las subcategorías de la tab actual y las guarda en localStorage
|
||||||
|
*/
|
||||||
|
const actualizarSubcategorias = (subcategorias: Subcategoria[]) => {
|
||||||
|
subcategoriasPorTab.value[tabActiva.value] = subcategorias
|
||||||
|
if (process.client) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(STORAGE_KEY_SUBCATEGORIAS, JSON.stringify(subcategoriasPorTab.value))
|
||||||
|
} catch (err) {
|
||||||
|
console.warn('Error al guardar subcategorías en localStorage:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Crea una nueva sesión de catación
|
* Crea una nueva sesión de catación
|
||||||
*/
|
*/
|
||||||
@@ -305,6 +353,7 @@ export const useCatacion = () => {
|
|||||||
tabActiva,
|
tabActiva,
|
||||||
subcategoriasActivas,
|
subcategoriasActivas,
|
||||||
accordionAbierto,
|
accordionAbierto,
|
||||||
|
actualizarSubcategorias,
|
||||||
|
|
||||||
// Estadísticas
|
// Estadísticas
|
||||||
estadisticasSesion,
|
estadisticasSesion,
|
||||||
|
|||||||
@@ -144,7 +144,7 @@
|
|||||||
<button
|
<button
|
||||||
v-if="subcategoriasActivas.length > 0"
|
v-if="subcategoriasActivas.length > 0"
|
||||||
class="subcategoria-chip subcategoria-chip-clear"
|
class="subcategoria-chip subcategoria-chip-clear"
|
||||||
@click="subcategoriasActivas = []"
|
@click="actualizarSubcategorias([])"
|
||||||
>
|
>
|
||||||
<UIcon name="i-lucide-x" class="w-3 h-3 inline mr-1" />
|
<UIcon name="i-lucide-x" class="w-3 h-3 inline mr-1" />
|
||||||
Limpiar Todo
|
Limpiar Todo
|
||||||
@@ -218,6 +218,7 @@ const {
|
|||||||
tabActiva,
|
tabActiva,
|
||||||
subcategoriasActivas,
|
subcategoriasActivas,
|
||||||
accordionAbierto,
|
accordionAbierto,
|
||||||
|
actualizarSubcategorias,
|
||||||
exportarSesion,
|
exportarSesion,
|
||||||
eliminarSesionActual,
|
eliminarSesionActual,
|
||||||
} = useCatacion()
|
} = useCatacion()
|
||||||
@@ -338,7 +339,6 @@ onMounted(async () => {
|
|||||||
// Cambiar tab
|
// Cambiar tab
|
||||||
const cambiarTab = (tab: TabCatacion) => {
|
const cambiarTab = (tab: TabCatacion) => {
|
||||||
tabActiva.value = tab
|
tabActiva.value = tab
|
||||||
subcategoriasActivas.value = [] // Limpiar subcategorías al cambiar de tab
|
|
||||||
mostrarMenu.value = false
|
mostrarMenu.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -346,14 +346,19 @@ const cambiarTab = (tab: TabCatacion) => {
|
|||||||
const toggleSubcategoria = (subcategoria: Subcategoria) => {
|
const toggleSubcategoria = (subcategoria: Subcategoria) => {
|
||||||
if (!subcategoria) return
|
if (!subcategoria) return
|
||||||
|
|
||||||
const index = subcategoriasActivas.value.indexOf(subcategoria)
|
const actuales = [...subcategoriasActivas.value]
|
||||||
|
const index = actuales.indexOf(subcategoria)
|
||||||
|
|
||||||
if (index > -1) {
|
if (index > -1) {
|
||||||
// Ya está seleccionada, removerla
|
// Ya está seleccionada, removerla
|
||||||
subcategoriasActivas.value = subcategoriasActivas.value.filter(s => s !== subcategoria)
|
actuales.splice(index, 1)
|
||||||
} else {
|
} else {
|
||||||
// No está seleccionada, agregarla
|
// No está seleccionada, agregarla
|
||||||
subcategoriasActivas.value = [...subcategoriasActivas.value, subcategoria]
|
actuales.push(subcategoria)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Guardar en localStorage y actualizar estado
|
||||||
|
actualizarSubcategorias(actuales)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Formatear fecha
|
// Formatear fecha
|
||||||
|
|||||||
Reference in New Issue
Block a user