88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { ref, watch } from 'vue'
|
|
import { defineStore } from 'pinia'
|
|
|
|
export type PaginationType = 'infinite_scroll' | 'numbered'
|
|
|
|
export const PAGE_SIZE_OPTIONS = [10, 20, 30, 40, 50] as const
|
|
export type PageSizeOption = typeof PAGE_SIZE_OPTIONS[number]
|
|
|
|
const STORAGE_KEY = 'lgcc:settings:v1'
|
|
|
|
interface SettingsData {
|
|
pageSize: PageSizeOption
|
|
paginationType: PaginationType
|
|
showParagraphNumbers: boolean
|
|
}
|
|
|
|
const DEFAULTS: SettingsData = {
|
|
pageSize: 10,
|
|
paginationType: 'infinite_scroll',
|
|
showParagraphNumbers: true
|
|
}
|
|
|
|
function readStorage(): SettingsData {
|
|
if (typeof window === 'undefined') return { ...DEFAULTS }
|
|
try {
|
|
const raw = window.localStorage.getItem(STORAGE_KEY)
|
|
if (!raw) return { ...DEFAULTS }
|
|
const parsed = JSON.parse(raw) as Partial<SettingsData>
|
|
return {
|
|
pageSize: (PAGE_SIZE_OPTIONS as readonly number[]).includes(parsed.pageSize as number)
|
|
? (parsed.pageSize as PageSizeOption)
|
|
: DEFAULTS.pageSize,
|
|
paginationType:
|
|
parsed.paginationType === 'numbered' || parsed.paginationType === 'infinite_scroll'
|
|
? parsed.paginationType
|
|
: DEFAULTS.paginationType,
|
|
showParagraphNumbers: typeof parsed.showParagraphNumbers === 'boolean'
|
|
? parsed.showParagraphNumbers
|
|
: DEFAULTS.showParagraphNumbers
|
|
}
|
|
} catch {
|
|
return { ...DEFAULTS }
|
|
}
|
|
}
|
|
|
|
function writeStorage(data: SettingsData) {
|
|
if (typeof window === 'undefined') return
|
|
try {
|
|
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(data))
|
|
} catch (e) {
|
|
console.warn('No se pudieron guardar los ajustes', e)
|
|
}
|
|
}
|
|
|
|
export const useSettingsStore = defineStore('settings', () => {
|
|
const pageSize = ref<PageSizeOption>(DEFAULTS.pageSize)
|
|
const paginationType = ref<PaginationType>(DEFAULTS.paginationType)
|
|
const showParagraphNumbers = ref<boolean>(DEFAULTS.showParagraphNumbers)
|
|
const ready = ref(false)
|
|
let hydrated = false
|
|
|
|
function hydrate() {
|
|
if (typeof window === 'undefined') return
|
|
if (hydrated) return
|
|
const data = readStorage()
|
|
pageSize.value = data.pageSize
|
|
paginationType.value = data.paginationType
|
|
showParagraphNumbers.value = data.showParagraphNumbers
|
|
ready.value = true
|
|
hydrated = true
|
|
}
|
|
|
|
if (typeof window !== 'undefined') {
|
|
watch([pageSize, paginationType, showParagraphNumbers], () => {
|
|
if (!hydrated) return
|
|
writeStorage({ pageSize: pageSize.value, paginationType: paginationType.value, showParagraphNumbers: showParagraphNumbers.value })
|
|
})
|
|
}
|
|
|
|
return {
|
|
pageSize,
|
|
paginationType,
|
|
showParagraphNumbers,
|
|
ready,
|
|
hydrate
|
|
}
|
|
})
|