Add date to PitchBooksTable and reorder table #83
|
|
@ -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 && (
|
||||
|
|
|
|||
|
|
@ -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}`;
|
||||
};
|
||||
Loading…
Reference in New Issue