Fix Document Count Display Issue and Loading Progress Bar Size in Pag…

…ination (#212)
yorkie-team · Jun 25, 2024 · 89dc5d5 · 89dc5d5
1 parent 3d58f83
commit 89dc5d5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/backend/src/workspace-documents/types/find-workspace-documents-response.type.ts b/backend/src/workspace-documents/types/find-workspace-documents-response.type.ts
@@ -10,4 +10,7 @@ export class FindWorkspaceDocumentsResponse {
 
 	@ApiProperty({ type: String, description: "The ID of last document" })
 	cursor: string | null;
+
+	@ApiProperty({ type: Number, description: "The number of total documents" })
+	totalLength: number;
 }
diff --git a/backend/src/workspace-documents/workspace-documents.service.ts b/backend/src/workspace-documents/workspace-documents.service.ts
@@ -61,6 +61,12 @@ export class WorkspaceDocumentsService {
 			additionalOptions.cursor = { id: cursor };
 		}
 
+		const totalLength = await this.prismaService.document.count({
+			where: {
+				workspaceId,
+			},
+		});
+
 		const documentList = await this.prismaService.document.findMany({
 			take: pageSize + 1,
 			where: {
@@ -90,6 +96,7 @@ export class WorkspaceDocumentsService {
 		return {
 			documents: mergedDocumentList,
 			cursor: documentList.length > pageSize ? documentList[pageSize].id : null,
+			totalLength,
 		};
 	}
 

diff --git a/frontend/src/components/layouts/WorkspaceLayout.tsx b/frontend/src/components/layouts/WorkspaceLayout.tsx
@@ -12,7 +12,9 @@ const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
 	open?: boolean;
 }>(({ theme, open }) => ({
 	flexGrow: 1,
-	padding: theme.spacing(3),
+	paddingLeft: theme.spacing(3),
+	paddingRight: theme.spacing(3),
+	paddingTop: theme.spacing(3),
 	transition: theme.transitions.create("margin", {
 		easing: theme.transitions.easing.sharp,
 		duration: theme.transitions.duration.leavingScreen,

diff --git a/frontend/src/hooks/api/types/workspaceDocument.d.ts b/frontend/src/hooks/api/types/workspaceDocument.d.ts
@@ -2,6 +2,7 @@ import { Document } from "./document";
 
 export class GetWorkspaceDocumentListResponse {
 	cursor: string | null;
+	totalLength: number;
 	documents: Array<Document>;
 }
 

diff --git a/frontend/src/pages/workspace/Index.tsx b/frontend/src/pages/workspace/Index.tsx
@@ -47,7 +47,7 @@ function WorkspaceIndex() {
 				<Typography variant="h5" fontWeight="bold">
 					{workspace?.title}{" "}
 					<Typography component="span" variant="inherit" color="primary">
-						{documentPageList?.pages[0].documents.length}
+						{documentPageList?.pages[0].totalLength}
 					</Typography>
 				</Typography>
 				<Button
@@ -60,7 +60,7 @@ function WorkspaceIndex() {
 			</Stack>
 			<Stack
 				style={{
-					maxHeight: "calc(100vh - 160px)",
+					maxHeight: "calc(100vh - 144px)",
 					overflow: "auto",
 				}}
 			>
@@ -69,8 +69,8 @@ function WorkspaceIndex() {
 					loadMore={() => fetchNextPage()}
 					hasMore={hasNextPage}
 					loader={
-						<Stack className="loader" key={0}>
-							<CircularProgress size="sm" />
+						<Stack className="loader" key={0} alignItems="center">
+							<CircularProgress size={20} />
 						</Stack>
 					}
 					useWindow={false}