Updated KennzahlenTabel
s8613
parent
c01fbca5c9
commit
c144db3f13
|
|
@ -38,29 +38,47 @@ interface KennzahlenTableProps {
|
|||
}
|
||||
|
||||
export default function KennzahlenTable({
|
||||
onPageClick,
|
||||
data,
|
||||
pdfId,
|
||||
settings,
|
||||
from
|
||||
}: KennzahlenTableProps) {
|
||||
onPageClick,
|
||||
data,
|
||||
pdfId,
|
||||
settings,
|
||||
from
|
||||
}: 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: (id: string) => {
|
||||
mutationFn: (params: { id: string; newValue?: string; newPage?: number }) => {
|
||||
const { id, newValue, newPage } = params;
|
||||
const key = id.toUpperCase();
|
||||
const updatedData = { ...data };
|
||||
updatedData[key] = data[key]?.map((item) => ({
|
||||
...item,
|
||||
entity: editValue,
|
||||
})) || [{ label: key, entity: editValue }];
|
||||
|
||||
if (data[key] && data[key].length > 0) {
|
||||
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"
|
||||
}];
|
||||
}
|
||||
|
||||
return fetchPutKPI(Number(pdfId), updatedData);
|
||||
},
|
||||
onMutate: async (id: string) => {
|
||||
onMutate: async (params: { id: string; newValue?: string; newPage?: number }) => {
|
||||
const { id, newValue, newPage } = params;
|
||||
await queryClient.cancelQueries({
|
||||
queryKey: ["pitchBookKPI", pdfId],
|
||||
});
|
||||
|
|
@ -71,10 +89,23 @@ export default function KennzahlenTable({
|
|||
|
||||
queryClient.setQueryData(["pitchBookKPI", pdfId], () => {
|
||||
const updatedData = { ...data };
|
||||
updatedData[key] = data[key]?.map((item) => ({
|
||||
...item,
|
||||
entity: editValue,
|
||||
})) || [{ label: key, entity: editValue }];
|
||||
|
||||
if (data[key] && data[key].length > 0) {
|
||||
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"
|
||||
}];
|
||||
}
|
||||
|
||||
return updatedData;
|
||||
});
|
||||
|
||||
|
|
@ -99,19 +130,39 @@ 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) => {
|
||||
// await updateKennzahl(rows[index].label, editValue);
|
||||
mutate(index);
|
||||
mutate({ id: index, newValue: editValue });
|
||||
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("null");
|
||||
setEditingIndex("");
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageKeyPress = (e: KeyboardEvent<HTMLDivElement>, index: string) => {
|
||||
if (e.key === "Enter") {
|
||||
handlePageSave(index);
|
||||
} else if (e.key === "Escape") {
|
||||
setEditingPageIndex("");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -138,7 +189,9 @@ export default function KennzahlenTable({
|
|||
<strong>Wert</strong>
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
<strong>Seite</strong>
|
||||
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 1 }}>
|
||||
<strong>Seite</strong>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
|
@ -165,6 +218,10 @@ 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>
|
||||
|
|
@ -300,21 +357,115 @@ export default function KennzahlenTable({
|
|||
)}
|
||||
</TableCell>
|
||||
<TableCell align="center">
|
||||
{(row.extractedValues.at(0)?.page ?? 0) > 0 ? (
|
||||
<Link
|
||||
component="button"
|
||||
onClick={() => {
|
||||
const extractedValue = row.extractedValues.at(0);
|
||||
if (extractedValue?.page && extractedValue.page > 0) {
|
||||
onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
|
||||
{editingPageIndex === row.setting.name ? (
|
||||
<TextField
|
||||
value={editPageValue}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value;
|
||||
if (value === '' || /^\d+$/.test(value) && parseInt(value) > 0) {
|
||||
setEditPageValue(value);
|
||||
}
|
||||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{row.extractedValues.at(0)?.page}
|
||||
</Link>
|
||||
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);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
component="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const extractedValue = row.extractedValues.at(0);
|
||||
if (extractedValue?.page && extractedValue.page > 0) {
|
||||
onPageClick?.(Number(extractedValue.page), extractedValue.entity || "");
|
||||
}
|
||||
}}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
{currentPage}
|
||||
</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>
|
||||
|
|
@ -324,4 +475,4 @@ export default function KennzahlenTable({
|
|||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue