Fixed page highlighting in multiple kpis details page.
parent
685edc9ad2
commit
82f02c0772
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -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}>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue