danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add pagination to /tasks UI route (#3)

Browse source 
* 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
1 changed files with 17 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
ui/app/pages/tasks.vue
View file

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