68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import type { Page, PageRequest } from '@/api/pagination'
|
|
import AppButton from '@/components/common/AppButton.vue'
|
|
|
|
const props = defineProps<{ page?: Page<unknown> }>()
|
|
const emit = defineEmits<{
|
|
update: [pageRequest: PageRequest]
|
|
}>()
|
|
|
|
function updatePage(newPage: number) {
|
|
if (!props.page) return
|
|
emit('update', {
|
|
page: newPage,
|
|
size: props.page.pageRequest.size,
|
|
sorts: props.page.pageRequest.sorts,
|
|
})
|
|
}
|
|
|
|
function incrementPage(step: number) {
|
|
if (!props.page) return
|
|
emit('update', {
|
|
page: props.page.pageRequest.page + step,
|
|
size: props.page.pageRequest.size,
|
|
sorts: props.page.pageRequest.sorts,
|
|
})
|
|
}
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div v-if="page && page.totalElements > 0">
|
|
<AppButton
|
|
size="sm"
|
|
icon="backward-step"
|
|
:disabled="!page || page.isFirst"
|
|
@click="updatePage(1)"
|
|
/>
|
|
|
|
<AppButton
|
|
size="sm"
|
|
icon="chevron-left"
|
|
:disabled="!page || page.isFirst"
|
|
@click="incrementPage(-1)"
|
|
/>
|
|
|
|
<span
|
|
style="min-width: 100px; text-align: center; display: inline-block"
|
|
class="font-size-xsmall"
|
|
>
|
|
Page <span class="font-bold">{{ page?.pageRequest.page }}</span> of {{ page?.totalPages }}
|
|
</span>
|
|
|
|
<AppButton
|
|
size="sm"
|
|
icon="chevron-right"
|
|
:disabled="!page || page.isLast"
|
|
@click="incrementPage(1)"
|
|
/>
|
|
|
|
<AppButton
|
|
size="sm"
|
|
icon="forward-step"
|
|
:disabled="!page || page.isLast"
|
|
@click="updatePage(page?.totalPages ?? 0)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|