forked from jsnbuchanan/crowd-funder-for-time-pwa
feat: add pagination support for project lists in dialogs
Add server-side pagination to EntityGrid component for projects, enabling infinite scrolling to load all available projects instead of stopping after the initial batch. Changes: - EntityGrid: Add loadMoreCallback prop to trigger server-side loading when scroll reaches end of loaded projects - OnboardMeetingSetupView: Update loadProjects() to support pagination with beforeId parameter and add handleLoadMoreProjects() callback - MeetingProjectDialog: Accept and pass through loadMoreCallback to EntityGrid - GiftedDialog: Add pagination support to loadProjects() and handleLoadMoreProjects() callback - EntitySelectionStep: Accept and pass through loadMoreCallback prop to EntityGrid when showing projects This ensures users can access all projects in MeetingProjectDialog and GiftedDialog by automatically loading more as they scroll, matching the behavior already present in DiscoverView. All project uses of EntityGrid now use pagination by default.
This commit is contained in:
@@ -29,6 +29,11 @@
|
||||
:unit-code="unitCode"
|
||||
:offer-id="offerId"
|
||||
:notify="$notify"
|
||||
:load-more-callback="
|
||||
giverEntityType === 'project' || recipientEntityType === 'project'
|
||||
? handleLoadMoreProjects
|
||||
: undefined
|
||||
"
|
||||
@entity-selected="handleEntitySelected"
|
||||
@cancel="cancel"
|
||||
/>
|
||||
@@ -489,9 +494,17 @@ export default class GiftedDialog extends Vue {
|
||||
this.firstStep = false;
|
||||
}
|
||||
|
||||
async loadProjects() {
|
||||
/**
|
||||
* Load projects from the API
|
||||
* @param beforeId - Optional rowId for pagination (loads projects before this ID)
|
||||
*/
|
||||
async loadProjects(beforeId?: string) {
|
||||
try {
|
||||
const response = await fetch(this.apiServer + "/api/v2/report/plans", {
|
||||
let url = this.apiServer + "/api/v2/report/plans";
|
||||
if (beforeId) {
|
||||
url += `?beforeId=${encodeURIComponent(beforeId)}`;
|
||||
}
|
||||
const response = await fetch(url, {
|
||||
method: "GET",
|
||||
headers: await getHeaders(this.activeDid),
|
||||
});
|
||||
@@ -502,14 +515,56 @@ export default class GiftedDialog extends Vue {
|
||||
|
||||
const results = await response.json();
|
||||
if (results.data) {
|
||||
this.projects = results.data;
|
||||
// Ensure rowId is included in project data
|
||||
const newProjects = results.data.map(
|
||||
(plan: PlanData & { rowId?: string }) => ({
|
||||
...plan,
|
||||
rowId: plan.rowId,
|
||||
}),
|
||||
);
|
||||
|
||||
if (beforeId) {
|
||||
// Pagination: append new projects
|
||||
this.projects.push(...newProjects);
|
||||
} else {
|
||||
// Initial load: replace array
|
||||
this.projects = newProjects;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error("Error loading projects:", error);
|
||||
this.safeNotify.error("Failed to load projects", TIMEOUTS.STANDARD);
|
||||
// Don't clear existing projects if this was a pagination request
|
||||
if (!beforeId) {
|
||||
this.projects = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle loading more projects when EntityGrid reaches the end
|
||||
* Called by EntitySelectionStep via loadMoreCallback
|
||||
* @param entities - Current array of projects
|
||||
*/
|
||||
async handleLoadMoreProjects(
|
||||
entities: Array<{
|
||||
handleId: string;
|
||||
rowId?: string;
|
||||
}>,
|
||||
): Promise<void> {
|
||||
if (entities.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const lastProject = entities[entities.length - 1];
|
||||
if (!lastProject.rowId) {
|
||||
// No rowId means we can't paginate - likely end of data
|
||||
return;
|
||||
}
|
||||
|
||||
await this.loadProjects(lastProject.rowId);
|
||||
}
|
||||
|
||||
selectProject(project: PlanData) {
|
||||
this.giver = {
|
||||
did: project.handleId,
|
||||
|
||||
Reference in New Issue
Block a user