Fixed page highlighting in multiple kpis details page.

pull/92/head
s8613 2025-06-24 11:40:04 +02:00
parent 685edc9ad2
commit 82f02c0772
2 changed files with 21 additions and 6 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@ -68,6 +68,7 @@ function ExtractedResultsPage() {
const [customValue, setCustomValue] = useState(""); const [customValue, setCustomValue] = useState("");
const [customPage, setCustomPage] = useState(""); const [customPage, setCustomPage] = useState("");
const [editingCustomPage, setEditingCustomPage] = useState(false); const [editingCustomPage, setEditingCustomPage] = useState(false);
const [focusHighlightOverride, setFocusHighlightOverride] = useState<{ page: number; text: string } | null>(null);
const originalValue = kpiValues[0]?.entity || ""; const originalValue = kpiValues[0]?.entity || "";
const originalPage = kpiValues[0]?.page || 0; const originalPage = kpiValues[0]?.page || 0;
@ -102,6 +103,11 @@ function ExtractedResultsPage() {
// Um zu prüfen, ob der Wert nur aus Leerzeichen besteht // Um zu prüfen, ob der Wert nur aus Leerzeichen besteht
const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !selectedValue; const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !selectedValue;
const focusHighlight = focusHighlightOverride || {
page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
text: groupedKpiValues.at(selectedIndex)?.entity || "",
};
useEffect(() => { useEffect(() => {
const valueChanged = selectedValue !== originalValue; const valueChanged = selectedValue !== originalValue;
const pageChanged = selectedPage !== originalPage; const pageChanged = selectedPage !== originalPage;
@ -159,12 +165,14 @@ function ExtractedResultsPage() {
const value = event.target.value; const value = event.target.value;
if (value === "custom") { if (value === "custom") {
setSelectedIndex(-1); setSelectedIndex(-1);
setFocusHighlightOverride(null);
} else { } else {
const index = Number.parseInt(value); const index = Number.parseInt(value);
setSelectedIndex(index); setSelectedIndex(index);
setCurrentPage(groupedKpiValues[index].pages[0]); setCurrentPage(groupedKpiValues[index].pages[0]);
setCustomValue(""); setCustomValue("");
setCustomPage(""); setCustomPage("");
setFocusHighlightOverride(null);
} }
}; };
@ -174,7 +182,7 @@ function ExtractedResultsPage() {
const value = event.target.value; const value = event.target.value;
setCustomValue(value); setCustomValue(value);
setSelectedIndex(-1); setSelectedIndex(-1);
}; setFocusHighlightOverride(null);
const handleCustomPageChange = ( const handleCustomPageChange = (
event: React.ChangeEvent<HTMLInputElement>, event: React.ChangeEvent<HTMLInputElement>,
@ -191,6 +199,15 @@ function ExtractedResultsPage() {
setSelectedIndex(index); setSelectedIndex(index);
setCustomValue(""); setCustomValue("");
setCustomPage(""); setCustomPage("");
setFocusHighlightOverride(null);
};
const handlePageClick = (page: number, entity: string) => {
setCurrentPage(page);
setFocusHighlightOverride({
page: page,
text: entity,
});
}; };
const handleBackClick = () => { const handleBackClick = () => {
@ -325,7 +342,7 @@ function ExtractedResultsPage() {
component="button" component="button"
onClick={(e: React.MouseEvent) => { onClick={(e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
setCurrentPage(page); handlePageClick(page, item.entity);
}} }}
sx={{ cursor: "pointer", ml: i > 0 ? 1 : 0 }} sx={{ cursor: "pointer", ml: i > 0 ? 1 : 0 }}
> >
@ -351,6 +368,7 @@ function ExtractedResultsPage() {
}} }}
onClick={() => { onClick={() => {
setSelectedIndex(-1); setSelectedIndex(-1);
setFocusHighlightOverride(null);
}} }}
> >
<Radio <Radio
@ -479,10 +497,7 @@ function ExtractedResultsPage() {
highlight={groupedKpiValues highlight={groupedKpiValues
.map((k) => k.pages.map((page: number) => ({ page, text: k.entity }))) .map((k) => k.pages.map((page: number) => ({ page, text: k.entity })))
.reduce((acc, val) => acc.concat(val), [])} .reduce((acc, val) => acc.concat(val), [])}
focusHighlight={{ focusHighlight={focusHighlight}
page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
text: groupedKpiValues.at(selectedIndex)?.entity || "",
}}
/> />
</Paper> </Paper>
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}> <Box mt={2} display="flex" justifyContent="flex-end" gap={2}>