Compare commits
No commits in common. "6816e1a2d753821ee16ffcc3dab996df61df2808" and "c01fbca5c9ac078f0fe0552c243c18a4126149a2" have entirely different histories.
6816e1a2d7
...
c01fbca5c9
|
|
@ -46,39 +46,21 @@ export default function KennzahlenTable({
|
|||
}: KennzahlenTableProps) {
|
||||
const [editingIndex, setEditingIndex] = useState<string>("");
|
||||
const [editValue, setEditValue] = useState("");
|
||||
const [editingPageIndex, setEditingPageIndex] = useState<string>("");
|
||||
const [editPageValue, setEditPageValue] = useState("");
|
||||
const [hoveredPageIndex, setHoveredPageIndex] = useState<string>("");
|
||||
const navigate = useNavigate();
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (params: { id: string; newValue?: string; newPage?: number }) => {
|
||||
const { id, newValue, newPage } = params;
|
||||
mutationFn: (id: string) => {
|
||||
const key = id.toUpperCase();
|
||||
const updatedData = { ...data };
|
||||
|
||||
if (data[key] && data[key].length > 0) {
|
||||
updatedData[key] = data[key].map((item) => ({
|
||||
updatedData[key] = data[key]?.map((item) => ({
|
||||
...item,
|
||||
...(newValue !== undefined && { entity: newValue }),
|
||||
...(newPage !== undefined && { page: newPage }),
|
||||
}));
|
||||
} else {
|
||||
updatedData[key] = [{
|
||||
label: key,
|
||||
entity: newValue || "",
|
||||
page: newPage || 0,
|
||||
status: "single-source",
|
||||
source: "manual"
|
||||
}];
|
||||
}
|
||||
|
||||
entity: editValue,
|
||||
})) || [{ label: key, entity: editValue }];
|
||||
return fetchPutKPI(Number(pdfId), updatedData);
|
||||
},
|
||||
onMutate: async (params: { id: string; newValue?: string; newPage?: number }) => {
|
||||
const { id, newValue, newPage } = params;
|
||||
onMutate: async (id: string) => {
|
||||
await queryClient.cancelQueries({
|
||||
queryKey: ["pitchBookKPI", pdfId],
|
||||
});
|
||||
|
|
@ -89,23 +71,10 @@ export default function KennzahlenTable({
|
|||
|
||||
queryClient.setQueryData(["pitchBookKPI", pdfId], () => {
|
||||
const updatedData = { ...data };
|
||||
|
||||
if (data[key] && data[key].length > 0) {
|
||||
updatedData[key] = data[key].map((item) => ({
|
||||
updatedData[key] = data[key]?.map((item) => ({
|
||||
...item,
|
||||
...(newValue !== undefined && { entity: newValue }),
|
||||
...(newPage !== undefined && { page: newPage }),
|
||||
}));
|
||||
} else {
|
||||
updatedData[key] = [{
|
||||
label: key,
|
||||
entity: newValue || "",
|
||||
page: newPage || 0,
|
||||
status: "single-source",
|
||||
source: "manual"
|
||||
}];
|
||||
}
|
||||
|
||||
entity: editValue,
|
||||
})) || [{ label: key, entity: editValue }];
|
||||
return updatedData;
|
||||
});
|
||||
|
||||
|
|
@ -130,39 +99,19 @@ export default function KennzahlenTable({
|
|||
setEditValue(value);
|
||||
};
|
||||
|
||||
const startPageEditing = (value: number, index: string) => {
|
||||
setEditingPageIndex(index);
|
||||
setEditPageValue(value.toString());
|
||||
};
|
||||
|
||||
// Bearbeitung beenden und Wert speichern
|
||||
const handleSave = async (index: string) => {
|
||||
mutate({ id: index, newValue: editValue });
|
||||
// await updateKennzahl(rows[index].label, editValue);
|
||||
mutate(index);
|
||||
setEditingIndex("");
|
||||
};
|
||||
|
||||
const handlePageSave = async (index: string) => {
|
||||
const pageNumber = parseInt(editPageValue);
|
||||
if (!isNaN(pageNumber) && pageNumber > 0) {
|
||||
mutate({ id: index, newPage: pageNumber });
|
||||
}
|
||||
setEditingPageIndex("");
|
||||
};
|
||||
|
||||
// Tastatureingaben verarbeiten
|
||||
const handleKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
|
||||
if (e.key === "Enter") {
|
||||
handleSave(index);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingIndex("");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
|
||||
if (e.key === "Enter") {
|
||||
handlePageSave(index);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingPageIndex("");
|
||||
setEditingIndex("null");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -189,9 +138,7 @@ export default function KennzahlenTable({
|
|||
<strong>Wert</strong>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }}>
|
||||
<strong>Seite</strong>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -218,10 +165,6 @@ export default function KennzahlenTable({
|
|||
borderColor = "#f6ed48";
|
||||
}
|
||||
|
||||
const currentPage = row.extractedValues.at(0)?.page ?? 0;
|
||||
const isPageHovered = hoveredPageIndex === row.setting.name;
|
||||
const canEditPage = !hasMultipleValues;
|
||||
|
||||
return (
|
||||
<TableRow key={row.setting.name}>
|
||||
<TableCell>{row.setting.name}</TableCell>
|
||||
|
|
@ -357,58 +300,10 @@ export default function KennzahlenTable({
|
|||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{editingPageIndex === row.setting.name ? (
|
||||
<TextField
|
||||
value={editPageValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) {
|
||||
setEditPageValue(value);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => handlePageKeyPress(e, row.setting.name)}
|
||||
onBlur={() => handlePageSave(row.setting.name)}
|
||||
autoFocus
|
||||
size="small"
|
||||
variant="standard"
|
||||
sx={{
|
||||
width: "60px",
|
||||
"& .MuiInput-input": {
|
||||
textAlign: "center"
|
||||
}
|
||||
}}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
style: { textAlign: 'center' }
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
{currentPage > 0 ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
cursor: canEditPage ? "pointer" : "default",
|
||||
borderRadius: "4px",
|
||||
minHeight: "32px",
|
||||
minWidth: "100px",
|
||||
transition: "all 0.2s ease",
|
||||
}}
|
||||
onMouseEnter={() => canEditPage && setHoveredPageIndex(row.setting.name)}
|
||||
onMouseLeave={() => setHoveredPageIndex("")}
|
||||
onClick={() => {
|
||||
if (canEditPage) {
|
||||
startPageEditing(currentPage, row.setting.name);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{(row.extractedValues.at(0)?.page ?? 0) > 0 ? (
|
||||
<Link
|
||||
component="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClick={() => {
|
||||
const extractedValue = row.extractedValues.at(0);
|
||||
if (extractedValue?.page && extractedValue.page > 0) {
|
||||
onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
|
||||
|
|
@ -416,57 +311,11 @@ export default function KennzahlenTable({
|
|||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
{row.extractedValues.at(0)?.page}
|
||||
</Link>
|
||||
|
||||
{isPageHovered && canEditPage && (
|
||||
<EditIcon
|
||||
fontSize="small"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: "70px",
|
||||
color: "#666",
|
||||
opacity: 0.7,
|
||||
transition: "opacity 0.2s ease",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
) : canEditPage ? (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
position: "relative",
|
||||
cursor: "pointer",
|
||||
minHeight: "32px",
|
||||
minWidth: "100px",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: isPageHovered ? "#f8f9fa" : "transparent",
|
||||
}}
|
||||
onMouseEnter={() => setHoveredPageIndex(row.setting.name)}
|
||||
onMouseLeave={() => setHoveredPageIndex("")}
|
||||
onClick={() => startPageEditing(0, row.setting.name)}
|
||||
>
|
||||
<span style={{ color: "#999" }}>...</span>
|
||||
<EditIcon
|
||||
fontSize="small"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: "70px",
|
||||
color: "#555",
|
||||
cursor: "pointer",
|
||||
opacity: 0.7,
|
||||
transition: "opacity 0.2s ease",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
||||
import EditIcon from "@mui/icons-material/Edit";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
|
|
@ -28,7 +27,6 @@ import {
|
|||
} from "@tanstack/react-query";
|
||||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { useEffect, useState } from "react";
|
||||
import type { KeyboardEvent } from "react";
|
||||
import PDFViewer from "../components/pdfViewer";
|
||||
import { fetchPutKPI } from "../util/api";
|
||||
import { kpiQueryOptions } from "../util/query";
|
||||
|
|
@ -67,23 +65,13 @@ function ExtractedResultsPage() {
|
|||
const [showConfirmDialog, setShowConfirmDialog] = useState(false);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
const [customValue, setCustomValue] = useState("");
|
||||
const [customPage, setCustomPage] = useState("");
|
||||
const [editingCustomPage, setEditingCustomPage] = useState(false);
|
||||
|
||||
const originalValue = kpiValues[0]?.entity || "";
|
||||
const originalPage = kpiValues[0]?.page || 0;
|
||||
const selectedValue =
|
||||
selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || "";
|
||||
const selectedPage =
|
||||
selectedIndex === -1
|
||||
? (parseInt(customPage) > 0 ? parseInt(customPage) : 1)
|
||||
: kpiValues[selectedIndex]?.page || 1;
|
||||
|
||||
useEffect(() => {
|
||||
const valueChanged = selectedValue !== originalValue;
|
||||
const pageChanged = selectedPage !== originalPage;
|
||||
setHasChanges(valueChanged || pageChanged);
|
||||
}, [selectedValue, selectedPage, originalValue, originalPage]);
|
||||
setHasChanges(selectedValue !== originalValue);
|
||||
}, [selectedValue, originalValue]);
|
||||
|
||||
const { mutate: updateKPI } = useMutation({
|
||||
mutationFn: () => {
|
||||
|
|
@ -95,7 +83,7 @@ function ExtractedResultsPage() {
|
|||
baseObject = {
|
||||
label: kpi.toUpperCase(),
|
||||
entity: selectedValue,
|
||||
page: selectedPage,
|
||||
page: 0,
|
||||
status: "single-source",
|
||||
source: "manual",
|
||||
};
|
||||
|
|
@ -104,7 +92,6 @@ function ExtractedResultsPage() {
|
|||
{
|
||||
...baseObject,
|
||||
entity: selectedValue,
|
||||
page: selectedPage,
|
||||
},
|
||||
];
|
||||
return fetchPutKPI(Number(pitchBook), updatedData);
|
||||
|
|
@ -133,7 +120,6 @@ function ExtractedResultsPage() {
|
|||
setSelectedIndex(index);
|
||||
setCurrentPage(kpiValues[index].page);
|
||||
setCustomValue("");
|
||||
setCustomPage("");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -145,21 +131,10 @@ function ExtractedResultsPage() {
|
|||
setSelectedIndex(-1);
|
||||
};
|
||||
|
||||
const handleCustomPageChange = (
|
||||
event: React.ChangeEvent<HTMLInputElement>,
|
||||
) => {
|
||||
const value = event.target.value;
|
||||
// Allow empty string or positive numbers only (no 0)
|
||||
if (value === '' || (/^\d+$/.test(value) && parseInt(value) > 0)) {
|
||||
setCustomPage(value);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRowClick = (index: number) => {
|
||||
setCurrentPage(kpiValues[index].page);
|
||||
setSelectedIndex(index);
|
||||
setCustomValue("");
|
||||
setCustomPage("");
|
||||
};
|
||||
|
||||
const handleBackClick = () => {
|
||||
|
|
@ -191,18 +166,6 @@ function ExtractedResultsPage() {
|
|||
updateKPI();
|
||||
};
|
||||
|
||||
const startCustomPageEditing = () => {
|
||||
setEditingCustomPage(true);
|
||||
};
|
||||
|
||||
const handleCustomPageKeyPress = (e: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
setEditingCustomPage(false);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingCustomPage(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box p={4}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", mb: 3 }}>
|
||||
|
|
@ -355,60 +318,6 @@ function ExtractedResultsPage() {
|
|||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{editingCustomPage ? (
|
||||
<TextField
|
||||
value={customPage}
|
||||
onChange={handleCustomPageChange}
|
||||
onKeyDown={handleCustomPageKeyPress}
|
||||
onBlur={() => setEditingCustomPage(false)}
|
||||
autoFocus
|
||||
size="small"
|
||||
variant="standard"
|
||||
sx={{
|
||||
width: "60px",
|
||||
"& .MuiInput-input": {
|
||||
textAlign: "center"
|
||||
}
|
||||
}}
|
||||
inputProps={{
|
||||
min: 0,
|
||||
style: { textAlign: 'center' }
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 1,
|
||||
cursor: "pointer",
|
||||
minHeight: "24px",
|
||||
minWidth: "100px",
|
||||
margin: "0 auto",
|
||||
}}
|
||||
onClick={(e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
startCustomPageEditing();
|
||||
}}
|
||||
>
|
||||
<span>{customPage || "..."}</span>
|
||||
<EditIcon
|
||||
fontSize="small"
|
||||
sx={{
|
||||
color: "#666",
|
||||
opacity: 0.7,
|
||||
transition: "opacity 0.2s ease",
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
startCustomPageEditing();
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
|
|
|||
Loading…
Reference in New Issue