diff --git a/front/src/components/ui/Pagination.vue b/front/src/components/ui/Pagination.vue index 3b007228b..d37b09091 100644 --- a/front/src/components/ui/Pagination.vue +++ b/front/src/components/ui/Pagination.vue @@ -20,10 +20,11 @@ const page = defineModel('page', { validator: (value: number) => value > 0 }) -const goTo = ref(1) +const goTo = ref('' as const) const range = (start: number, end: number) => Array.from({ length: end - start + 1 }, (_, i) => i + start) +/* Why? What? */ const renderPages = computed(() => { const start = range(2, 5) const end = range(pages - 4, pages - 1) @@ -47,12 +48,25 @@ const { width } = useElementSize(pagination) const isSmall = isMobileView(width) const setPage = () => { - if (goTo.value == null) return - page.value = Math.min(pages, Math.max(1, goTo.value)) + if (goTo.value === '') return + page.value = pageFromInput(goTo.value) } -watch(page, (newPage) => { - goTo.value = newPage +watch(goTo, (potentiallyWrongValue) => + goTo.value = + typeof potentiallyWrongValue === 'string' ? '' + : pageFromInput(potentiallyWrongValue) + ) + +const pageFromInput = (input: string | number): number => + input === 'NaN' ? pageFromInput('') + : typeof input === 'string' ? pageFromInput(parseInt(input)) + : Number.isNaN(input) ? 1 + : Math.min(Math.max(1, input), pages) + +/* When user changes page, the "GoTo" input should be emptied */ +watch(page, (_) => { + goTo.value = '' }) @@ -108,18 +122,16 @@ watch(page, (newPage) => { - - +
{{ t('vui.go-to') }}