mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
47de5373b1
* fix: add page size selector to CardsWithPagination Add an optional pageSizeOptions prop to CardsWithPagination that renders a "Cards per page" dropdown selector, consistent with the existing TablePaginationSize pattern used in DataTable. - New PaginationSize component (standalone, no TanStack Table dependency) - CardsWithPagination: manage pageSize as state, reset to page 1 on change - Project databases page: increase default from 6 to 20, add selector [10, 20, 50] - Projects list page: increase default from 9 to 12, add selector [12, 24, 48] - Fully backward compatible: without pageSizeOptions, behavior is unchanged Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: address CodeRabbit review feedback - Validate pageSize in handlePageSizeChange (reject 0/negative/NaN) - Guard empty pageSizeOptions array from rendering empty selector - Restore className on PaginationNavigation for backward compatibility - Add aria-label to SelectTrigger for accessibility on small screens Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(pagination-size): fallback to pageSizeOptions[0] when pageSize not in options Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix(pagination-size): fix pageSize is not defined (placeholder ref) --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
81 lines
2.8 KiB
TypeScript
81 lines
2.8 KiB
TypeScript
import {PageParams} from "@/types/next";
|
|
import {CardsWithPagination} from "@/components/wrappers/common/cards-with-pagination";
|
|
import {Page, PageActions, PageContent, PageHeader, PageTitle} from "@/features/layout/page";
|
|
import {ProjectCard} from "@/components/wrappers/dashboard/projects/project-card/project-card";
|
|
import {db} from "@/db";
|
|
import {notFound} from "next/navigation";
|
|
import {getActiveMember, getOrganization} from "@/lib/auth/auth";
|
|
import {EmptyStatePlaceholder} from "@/components/wrappers/common/empty-state-placeholder";
|
|
import {Metadata} from "next";
|
|
import {ProjectDialog} from "@/features/projects/components/project.dialog";
|
|
import {DatabaseWith} from "@/db/schema/07_database";
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Projects",
|
|
};
|
|
|
|
export default async function RoutePage(props: PageParams<{}>) {
|
|
|
|
const organization = await getOrganization({});
|
|
const activeMember = await getActiveMember()
|
|
|
|
if (!organization) {
|
|
notFound();
|
|
}
|
|
|
|
const projects = await db.query.project.findMany({
|
|
where: (project, {
|
|
eq,
|
|
and,
|
|
not
|
|
}) => and(eq(project.organizationId, organization.id), not(eq(project.isArchived, true))),
|
|
with: {
|
|
databases: true,
|
|
},
|
|
});
|
|
const isMember = activeMember?.role === "member";
|
|
|
|
const availableDatabases = (
|
|
await db.query.database.findMany({
|
|
where: (db, {isNull}) => isNull(db.projectId),
|
|
with: {
|
|
agent: true,
|
|
project: true,
|
|
backups: true,
|
|
restorations: true,
|
|
},
|
|
orderBy: (db, {desc}) => [desc(db.createdAt)],
|
|
})
|
|
).filter((db) => db.project == null) as DatabaseWith[];
|
|
|
|
|
|
return (
|
|
<Page>
|
|
<PageHeader>
|
|
<PageTitle>Projects</PageTitle>
|
|
{(projects.length > 0 && !isMember) && (
|
|
<PageActions>
|
|
<ProjectDialog databases={availableDatabases} organization={organization}/>
|
|
</PageActions>
|
|
)}
|
|
</PageHeader>
|
|
|
|
<PageContent>
|
|
{projects.length > 0 ? (
|
|
<CardsWithPagination
|
|
organizationSlug={organization.slug}
|
|
data={projects}
|
|
cardItem={ProjectCard}
|
|
cardsPerPage={12}
|
|
numberOfColumns={3}
|
|
pageSizeOptions={[12, 24, 48]}
|
|
/>
|
|
) : isMember ? (
|
|
<EmptyStatePlaceholder text="No project available"/>
|
|
) : (
|
|
<ProjectDialog databases={availableDatabases} organization={organization} isEmpty={true}/>
|
|
)}
|
|
</PageContent>
|
|
</Page>
|
|
);
|
|
} |