XFEL DAMNIT-web Pagination widget rewrite

use-paginations.vue

// https://github.com/European-XFEL/DAMNIT-web/blob/fd5658ab64654a27830b5868cb0d743607ae230d/frontend/src/features/table/use-pagination.ts

export function usePagination(proposal, pageSize = 10) {
    const store = useAppStore()
    const pages = new Pages(store)
    const visibleRegion = reactive({
        x: 0,
        y: 0,
        width: 0,
        height: 0
    })

    const loadPages = () => {
        if (visibleRegion.width === 0 || visibleRegion.height === 0) {
            return;
        }
        const pageSize = toValue(pageSize);
        const firstPage = Math.max(0, Math.floor((visibleRegion.y - pageSize / 2) / pageSize))
        const lastPage = Math.floor((visibleRegion.y + visibleRegion.height + pageSize / 2) / pageSize)
        range(firstPage + 1, lastPage + 2).forEach((page) => {
            if (! pages.value.isLoaded(page)) {
                pages.loadPage(page, toValue(proposal), pageSize)
            }
        })
    });

    watchEffect(loadPages);

    return {
        onVisibleRegionChanged: (rect) => {
            visibleRegion.x = rect.x
            visibleRegion.y = rect.y
            visibleRegion.width = rect.width
            visibleRegion.height = rect.height
        },
    };
}