417 lines
10 KiB
TypeScript
417 lines
10 KiB
TypeScript
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
|
import {
|
|
Box,
|
|
Button,
|
|
Dialog,
|
|
DialogActions,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogTitle,
|
|
IconButton,
|
|
Link,
|
|
Paper,
|
|
Radio,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
TextField,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import {
|
|
useMutation,
|
|
useQueryClient,
|
|
useSuspenseQuery,
|
|
} from "@tanstack/react-query";
|
|
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { useEffect, useState } from "react";
|
|
import PDFViewer from "../components/pdfViewer";
|
|
import { fetchPutKPI } from "../util/api";
|
|
import { kpiQueryOptions } from "../util/query";
|
|
import { redirect } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/extractedResult_/$pitchBook/$kpi")({
|
|
component: ExtractedResultsPage,
|
|
validateSearch: (search: Record<string, unknown>) => {
|
|
return {
|
|
from: typeof search.from === "string" ? search.from : undefined,
|
|
};
|
|
},
|
|
loader: async ({ context: { queryClient }, params: { pitchBook } }) => {
|
|
try {
|
|
return await queryClient.ensureQueryData(kpiQueryOptions(pitchBook));
|
|
} catch (err) {
|
|
throw redirect({
|
|
to: "/"
|
|
});
|
|
}
|
|
},
|
|
});
|
|
|
|
function ExtractedResultsPage() {
|
|
const params = Route.useParams() as { pitchBook: string; kpi: string };
|
|
const { pitchBook, kpi } = params;
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
const { from } = Route.useSearch();
|
|
|
|
const { data: kpiData } = useSuspenseQuery(kpiQueryOptions(pitchBook));
|
|
|
|
const kpiValues = kpiData[kpi.toUpperCase()] || [];
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
const [currentPage, setCurrentPage] = useState(kpiValues[0]?.page || 1);
|
|
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
|
const [hasChanges, setHasChanges] = useState(false);
|
|
const [customValue, setCustomValue] = useState("");
|
|
const originalValue = kpiValues[0]?.entity || "";
|
|
const selectedValue =
|
|
selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
|
|
|
|
useEffect(() => {
|
|
setHasChanges(selectedValue !== originalValue);
|
|
}, [selectedValue, originalValue]);
|
|
|
|
const { mutate: updateKPI } = useMutation({
|
|
mutationFn: () => {
|
|
const updatedData = { ...kpiData };
|
|
let baseObject;
|
|
if (selectedIndex >= 0) {
|
|
baseObject = kpiValues[selectedIndex];
|
|
} else {
|
|
baseObject = {
|
|
label: kpi.toUpperCase(),
|
|
entity: selectedValue,
|
|
page: 0,
|
|
status: "single-source",
|
|
source: "manual",
|
|
};
|
|
}
|
|
updatedData[kpi.toUpperCase()] = [
|
|
{
|
|
...baseObject,
|
|
entity: selectedValue,
|
|
},
|
|
];
|
|
return fetchPutKPI(Number(pitchBook), updatedData);
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({
|
|
queryKey: ["pitchBookKPI", pitchBook],
|
|
});
|
|
navigate({
|
|
to: "/extractedResult/$pitchBook",
|
|
params: { pitchBook },
|
|
search: from ? { from } : undefined
|
|
});
|
|
},
|
|
onError: (error) => {
|
|
console.error("Error updating KPI:", error);
|
|
},
|
|
});
|
|
|
|
const handleRadioChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = event.target.value;
|
|
if (value === "custom") {
|
|
setSelectedIndex(-1);
|
|
} else {
|
|
const index = Number.parseInt(value);
|
|
setSelectedIndex(index);
|
|
setCurrentPage(kpiValues[index].page);
|
|
setCustomValue("");
|
|
}
|
|
};
|
|
|
|
const handleCustomValueChange = (
|
|
event: React.ChangeEvent<HTMLInputElement>,
|
|
) => {
|
|
const value = event.target.value;
|
|
setCustomValue(value);
|
|
setSelectedIndex(-1);
|
|
};
|
|
|
|
const handleRowClick = (index: number) => {
|
|
setCurrentPage(kpiValues[index].page);
|
|
setSelectedIndex(index);
|
|
setCustomValue("");
|
|
};
|
|
|
|
const handleBackClick = () => {
|
|
if (hasChanges) {
|
|
setShowConfirmDialog(true);
|
|
} else {
|
|
navigate({
|
|
to: "/extractedResult/$pitchBook",
|
|
params: { pitchBook },
|
|
search: from ? { from } : undefined
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleConfirmDiscard = () => {
|
|
setShowConfirmDialog(false);
|
|
navigate({
|
|
to: "/extractedResult/$pitchBook",
|
|
params: { pitchBook },
|
|
search: from ? { from } : undefined
|
|
});
|
|
};
|
|
|
|
const handleCancelDiscard = () => {
|
|
setShowConfirmDialog(false);
|
|
};
|
|
|
|
const handleAcceptReview = () => {
|
|
updateKPI();
|
|
};
|
|
|
|
return (
|
|
<Box p={4}>
|
|
<Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
|
|
<IconButton onClick={handleBackClick} sx={{ mr: 2 }}>
|
|
<ArrowBackIcon fontSize="large" sx={{ color: "#383838" }} />
|
|
</IconButton>
|
|
<Typography variant="h5" fontWeight="bold">
|
|
Überprüfung der Kennzahl: {kpi}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box
|
|
display="flex"
|
|
gap={4}
|
|
sx={{
|
|
width: "100vw",
|
|
maxWidth: "100%",
|
|
height: "85vh",
|
|
mt: 4,
|
|
}}
|
|
>
|
|
<Paper
|
|
elevation={2}
|
|
sx={{
|
|
width: "45%",
|
|
maxHeight: "100%",
|
|
height: "fit-content",
|
|
borderRadius: 2,
|
|
backgroundColor: "#eeeeee",
|
|
padding: 2,
|
|
overflow: "auto",
|
|
}}
|
|
>
|
|
<TableContainer component={Paper}>
|
|
<Table>
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableCell>
|
|
<strong>Gefundene Werte</strong>
|
|
</TableCell>
|
|
<TableCell align="center">
|
|
<strong>Seite</strong>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{kpiValues.map((item, index) => (
|
|
<TableRow
|
|
key={`${item.entity}_${item.page}_${index}`}
|
|
sx={{
|
|
"&:hover": { backgroundColor: "#f9f9f9" },
|
|
cursor: "pointer",
|
|
}}
|
|
onClick={() => handleRowClick(index)}
|
|
>
|
|
<TableCell>
|
|
<Box
|
|
sx={{
|
|
borderRadius: 1,
|
|
padding: "4px 8px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
borderColor: "#ccc",
|
|
},
|
|
}}
|
|
>
|
|
<Radio
|
|
value={index.toString()}
|
|
checked={selectedIndex === index}
|
|
onChange={handleRadioChange}
|
|
sx={{
|
|
color: "#383838",
|
|
"&.Mui-checked": { color: "#383838" },
|
|
padding: "4px",
|
|
marginRight: 1,
|
|
"&:focus": {
|
|
outline: "none",
|
|
},
|
|
}}
|
|
/>
|
|
<span>{item.entity}</span>
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell align="center">
|
|
<Link
|
|
component="button"
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
setCurrentPage(item.page);
|
|
}}
|
|
sx={{ cursor: "pointer" }}
|
|
>
|
|
{item.page}
|
|
</Link>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
|
|
<TableRow>
|
|
<TableCell>
|
|
<Box
|
|
sx={{
|
|
padding: "4px 8px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
cursor: "pointer",
|
|
"&:hover": {
|
|
borderColor: "#ccc",
|
|
},
|
|
}}
|
|
onClick={() => {
|
|
setSelectedIndex(-1);
|
|
}}
|
|
>
|
|
<Radio
|
|
value="custom"
|
|
checked={selectedIndex === -1 && customValue !== ""}
|
|
onChange={handleRadioChange}
|
|
sx={{
|
|
color: "#383838",
|
|
"&.Mui-checked": { color: "#383838" },
|
|
padding: "4px",
|
|
marginRight: 1,
|
|
"&:focus": {
|
|
outline: "none",
|
|
},
|
|
}}
|
|
/>
|
|
<TextField
|
|
placeholder="Einen abweichenden Wert eingeben..."
|
|
value={customValue}
|
|
onChange={handleCustomValueChange}
|
|
variant="standard"
|
|
fullWidth
|
|
InputProps={{
|
|
disableUnderline: true,
|
|
}}
|
|
sx={{
|
|
"& .MuiInput-input": {
|
|
padding: 0,
|
|
},
|
|
}}
|
|
onClick={(e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
}}
|
|
/>
|
|
</Box>
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
</Paper>
|
|
<Box
|
|
display="flex"
|
|
flexDirection="column"
|
|
justifyContent="space-between"
|
|
gap={3}
|
|
sx={{ width: "55%", height: "95%" }}
|
|
>
|
|
<Paper
|
|
elevation={2}
|
|
sx={{
|
|
width: "100%",
|
|
height: "fit-content",
|
|
maxHeight: "100%",
|
|
borderRadius: 2,
|
|
backgroundColor: "#eeeeee",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
overflow: "auto",
|
|
padding: 2,
|
|
}}
|
|
>
|
|
<PDFViewer
|
|
pitchBookId={pitchBook}
|
|
currentPage={currentPage}
|
|
onPageChange={setCurrentPage}
|
|
highlight={Object.values(kpiValues)
|
|
.flat()
|
|
.map((k) => ({ page: k.page, text: k.entity }))}
|
|
focusHighlight={{
|
|
page: kpiValues.at(selectedIndex)?.page || -1,
|
|
text: kpiValues.at(selectedIndex)?.entity || "",
|
|
}}
|
|
/>
|
|
</Paper>
|
|
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleAcceptReview}
|
|
disabled={!selectedValue}
|
|
sx={{
|
|
backgroundColor: "#383838",
|
|
"&:hover": { backgroundColor: "#2e2e2e" },
|
|
"&.Mui-disabled": { backgroundColor: "#ccc" },
|
|
}}
|
|
>
|
|
Überprüfung Annehmen
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
|
|
<Dialog
|
|
open={showConfirmDialog}
|
|
onClose={handleCancelDiscard}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
>
|
|
<DialogTitle sx={{ fontSize: "1.25rem", fontWeight: "bold" }}>
|
|
Achtung
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText sx={{ fontSize: "1rem" }}>
|
|
Alle vorgenommenen Änderungen werden verworfen.
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions sx={{ p: 3, gap: 2 }}>
|
|
<Button
|
|
onClick={handleCancelDiscard}
|
|
variant="outlined"
|
|
sx={{
|
|
color: "#666",
|
|
borderColor: "#ddd",
|
|
"&:hover": { backgroundColor: "#f5f5f5" },
|
|
}}
|
|
>
|
|
Abbrechen
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmDiscard}
|
|
variant="contained"
|
|
sx={{
|
|
backgroundColor: "#383838",
|
|
"&:hover": { backgroundColor: "#2e2e2e" },
|
|
}}
|
|
>
|
|
Bestätigen
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Box>
|
|
);
|
|
} |