Add pagination to /tasks UI route (#3)

* Initial plan

* Add pagination (Pager component) to tasks page for navigating all results

Co-authored-by: jbatesy <51190172+jbatesy@users.noreply.github.com>

* Simplify Pager navigate handler per code review feedback

Co-authored-by: jbatesy <51190172+jbatesy@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: jbatesy <51190172+jbatesy@users.noreply.github.com>
This commit is contained in:
Copilot 2026-03-09 15:41:45 +10:30 committed by GitHub
parent b9c5b0b7ad
commit cd1d3e9e94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -534,6 +534,20 @@
</template>
</div>
<div
class="columns is-multiline"
v-if="!toggleForm && !isLoading && pagination.total_pages > 1"
>
<div class="column is-12">
<Pager
:page="pagination.page"
:last_page="pagination.total_pages"
:isLoading="isLoading"
@navigate="(newPage) => reloadContent(false, newPage)"
/>
</div>
</div>
<div
class="columns is-multiline"
v-if="!toggleForm && (isLoading || !filteredTasks || filteredTasks.length < 1)"
@ -639,6 +653,7 @@ const isMobile = useMediaQuery({ maxWidth: 1024 });
const tasksComposable = useTasks();
const {
tasks,
pagination,
isLoading,
addInProgress,
isTaskInProgress,
@ -758,9 +773,9 @@ const filteredTasks = computed(() => {
return tasks.value.filter((task) => deepIncludes(task, q, new WeakSet()));
}) as ComputedRef<Array<Task>>;
const reloadContent = async (fromMounted: boolean = false) => {
const reloadContent = async (fromMounted: boolean = false, page?: number) => {
try {
await tasksComposable.loadTasks();
await tasksComposable.loadTasks(page ?? pagination.value.page);
if (tasks.value.length > 0) {
cleanStaleCache(tasks.value);