Merge pull request 'Add date to PitchBooksTable and reorder table' (#83) from #81-reorder-table into main

Reviewed-on: #83

project/frontend/src/components/PitchBooksTable.tsx

@@ -21,6 +21,7 @@ import { useCallback, useEffect, useState } from "react";
 import { socket } from "../socket";
 import { fetchPitchBooksById } from "../util/api";
 import { pitchBooksQueryOptions } from "../util/query";
+import { formatDate } from "../util/date"
 
 interface PitchBook {
 	id: number;
@@ -46,6 +47,7 @@ export function PitchBooksTable() {
 			id: number;
 			progress: number;
 			filename?: string;
+			created_at?: string;
 			buffer: number;
 			intervalId?: number;
 		}[]
@@ -76,7 +78,6 @@ export function PitchBooksTable() {
 					const intervalId = prev.find(
 						(item) => item.id === progress.id,
 					)?.intervalId;
-					console.log(intervalId, prev);
 					intervalId && clearInterval(intervalId);
 
 					return [...prev.filter((item) => item.id !== progress.id)];
@@ -102,6 +103,7 @@ export function PitchBooksTable() {
 										filename: oldItem?.filename,
 										buffer: oldItem ? oldItem.buffer + 0.5 : 0,
 										intervalId: oldItem.intervalId,
+										created_at: oldItem?.created_at,
 									},
 								];
 							});
@@ -117,6 +119,7 @@ export function PitchBooksTable() {
 										filename: res.filename,
 										buffer: 0,
 										intervalId,
+										created_at: res.created_at,
 									},
 								]);
 							})
@@ -130,6 +133,7 @@ export function PitchBooksTable() {
 							id: progress.id,
 							progress: progress.progress,
 							filename: oldItem?.filename,
+							created_at: oldItem?.created_at,
 							buffer: 0,
 							intervalId,
 						},
@@ -211,6 +215,7 @@ export function PitchBooksTable() {
 						<TableCell sx={{ width: "60px" }} />
 						<TableCell sx={{ fontWeight: "bold" }}>Fondsname</TableCell>
 						<TableCell sx={{ fontWeight: "bold" }}>Fondsmanager</TableCell>
+						<TableCell sx={{ fontWeight: "bold" }}>Hochgeladen am</TableCell>
 						<TableCell sx={{ fontWeight: "bold" }}>Dateiname</TableCell>
 						<TableCell sx={{ fontWeight: "bold", width: "120px" }}>
 							Status
@@ -218,6 +223,71 @@ export function PitchBooksTable() {
 					</TableRow>
 				</TableHead>
 				<TableBody>
+				{loadingPitchBooks
+					.sort((a, b) => a.id - b.id)
+					.map((pitchBook) => (
+						<TableRow key={pitchBook.id}>
+							<TableCell>
+								<Box
+									sx={{
+										width: 40,
+										height: 50,
+										backgroundColor: "#f0f0f0",
+										borderRadius: 1,
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "center",
+										border: "1px solid #e0e0e0",
+									}}
+								>
+									<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
+								</Box>
+							</TableCell>
+							<TableCell colSpan={2}>
+								<LinearProgress
+									variant="buffer"
+									value={pitchBook.progress}
+									valueBuffer={
+										pitchBook.buffer
+											? pitchBook.progress + pitchBook.buffer
+											: pitchBook.progress
+									}
+								/>
+							</TableCell>
+							<TableCell>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+									fontSize="0.875rem"
+								>
+									{pitchBook.created_at && formatDate(pitchBook.created_at)}
+								</Typography>
+							</TableCell>
+							<TableCell>
+								<Typography
+									variant="body2"
+									color="text.secondary"
+									fontSize="0.875rem"
+								>
+									{pitchBook.filename}
+								</Typography>
+							</TableCell>
+							<TableCell>
+								<Chip
+									icon={<HourglassEmptyIcon />}
+									label="In Bearbeitung"
+									size="small"
+									sx={{
+										backgroundColor: "#fff3e0",
+										color: "#e65100",
+										"& .MuiChip-icon": {
+											color: "#e65100",
+										},
+									}}
+								/>
+							</TableCell>
+						</TableRow>
+					))}
 					{pitchBooks
 						.filter(
 							(pitchbook: PitchBook) =>
@@ -225,8 +295,8 @@ export function PitchBooksTable() {
 						)
 						.sort(
 							(a: PitchBook, b: PitchBook) =>
-								new Date(a.created_at).getTime() -
+								new Date(b.created_at).getTime() -
-								new Date(b.created_at).getTime(),
+								new Date(a.created_at).getTime(),
 						)
 						.map((pitchBook: PitchBook) => {
 							const status = getStatus(pitchBook);
@@ -276,6 +346,7 @@ export function PitchBooksTable() {
 										</Typography>
 									</TableCell>
 									<TableCell>{manager}</TableCell>
+                  <TableCell>{formatDate(pitchBook.created_at)}</TableCell>
 									<TableCell>
 										<Typography
 											variant="body2"
@@ -317,63 +388,6 @@ export function PitchBooksTable() {
 								</TableRow>
 							);
 						})}
-					{loadingPitchBooks
-						.sort((a, b) => a.id - b.id)
-						.map((pitchBook) => (
-							<TableRow key={pitchBook.id}>
-								<TableCell>
-									<Box
-										sx={{
-											width: 40,
-											height: 50,
-											backgroundColor: "#f0f0f0",
-											borderRadius: 1,
-											display: "flex",
-											alignItems: "center",
-											justifyContent: "center",
-											border: "1px solid #e0e0e0",
-										}}
-									>
-										<PictureAsPdfIcon fontSize="small" sx={{ color: "#666" }} />
-									</Box>
-								</TableCell>
-								<TableCell colSpan={2}>
-									<LinearProgress
-										variant="buffer"
-										value={pitchBook.progress}
-										valueBuffer={
-											pitchBook.buffer
-												? pitchBook.progress + pitchBook.buffer
-												: pitchBook.progress
-										}
-									/>
-								</TableCell>
-								<TableCell>
-									{" "}
-									<Typography
-										variant="body2"
-										color="text.secondary"
-										fontSize="0.875rem"
-									>
-										{pitchBook.filename}
-									</Typography>
-								</TableCell>
-								<TableCell>
-									<Chip
-										icon={<HourglassEmptyIcon />}
-										label="In Bearbeitung"
-										size="small"
-										sx={{
-											backgroundColor: "#fff3e0",
-											color: "#e65100",
-											"& .MuiChip-icon": {
-												color: "#e65100",
-											},
-										}}
-									/>
-								</TableCell>
-							</TableRow>
-						))}
 				</TableBody>
 			</Table>
 			{pitchBooks.length === 0 && (

project/frontend/src/util/date.ts

@@ -0,0 +1,11 @@
+export const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are zero-based
+  const day = String(date.getDate()).padStart(2, '0');
+  const year = date.getFullYear();
+
+  return `${hours}:${minutes} ${day}.${month}.${year}`;
+};