PSE2_FF
/
pse2_ff
0
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Merge branch 'main' into #81-reorder-table

pull/83/head
Zainab MohamedBasheer 2025-06-22 16:04:41 +02:00
parent c593fc0e47 609ec5284a
commit af2161eea7
1 changed files with 85 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx
View File

@ -27,8 +27,7 @@ import {
useSuspenseQuery, useSuspenseQuery,
} from "@tanstack/react-query"; } from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router"; import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react"; import { useEffect, useState, type KeyboardEvent } from "react";
import type { KeyboardEvent } from "react";
import PDFViewer from "../components/pdfViewer"; import PDFViewer from "../components/pdfViewer";
import { fetchPutKPI } from "../util/api"; import { fetchPutKPI } from "../util/api";
import { kpiQueryOptions } from "../util/query"; import { kpiQueryOptions } from "../util/query";
@ -72,12 +71,36 @@ function ExtractedResultsPage() {
const originalValue = kpiValues[0]?.entity || ""; const originalValue = kpiValues[0]?.entity || "";
const originalPage = kpiValues[0]?.page || 0; const originalPage = kpiValues[0]?.page || 0;
const selectedValue =
selectedIndex === -1 ? customValue : kpiValues[selectedIndex]?.entity || ""; // Funktion, um gleiche Werte zusammenzufassen und die Seiten zu sammeln
function groupKpiValues(values: Array<{ entity: string; page: number; [key: string]: any }>): Array<{ entity: string; pages: number[]; [key: string]: any }> {
const map = new Map<string, { entity: string; pages: number[]; [key: string]: any }>();
values.forEach((item: { entity: string; page: number; [key: string]: any }) => {
const key = item.entity.toLowerCase();
if (!map.has(key)) {
map.set(key, { ...item, pages: [item.page] });
} else {
const existingEntry = map.get(key)!;
if (!existingEntry.pages.includes(item.page)) {
existingEntry.pages.push(item.page);
}
}
});
return Array.from(map.values());
}
const groupedKpiValues: Array<{ entity: string; pages: number[]; [key: string]: any }> = groupKpiValues(kpiValues);
const selectedValue: string =
selectedIndex === -1 ? customValue : groupedKpiValues[selectedIndex]?.entity || "";
const selectedPage = const selectedPage =
selectedIndex === -1 selectedIndex === -1
? (parseInt(customPage) > 0 ? parseInt(customPage) : 1) ? (parseInt(customPage) > 0 ? parseInt(customPage) : 1)
: kpiValues[selectedIndex]?.page || 1; : groupedKpiValues[selectedIndex]?.pages[0] || 1;
// Um zu prüfen, ob der Wert nur aus Leerzeichen besteht
const isSelectedValueEmpty = selectedIndex === -1 ? customValue.trim() === "" : !selectedValue;
useEffect(() => { useEffect(() => {
const valueChanged = selectedValue !== originalValue; const valueChanged = selectedValue !== originalValue;
@ -90,7 +113,15 @@ function ExtractedResultsPage() {
const updatedData = { ...kpiData }; const updatedData = { ...kpiData };
let baseObject; let baseObject;
if (selectedIndex >= 0) { if (selectedIndex >= 0) {
baseObject = kpiValues[selectedIndex]; // Das Originalobjekt mit allen Feldern für diesen Wert suchen
const original = kpiValues.find(v => v.entity.toLowerCase() === groupedKpiValues[selectedIndex].entity.toLowerCase()) as { status?: string; source?: string } | undefined;
baseObject = {
label: kpi.toUpperCase(),
entity: groupedKpiValues[selectedIndex].entity,
page: groupedKpiValues[selectedIndex].pages[0],
status: original?.status || "single-source",
source: original?.source || "auto",
};
} else { } else {
baseObject = { baseObject = {
label: kpi.toUpperCase(), label: kpi.toUpperCase(),
@ -131,7 +162,7 @@ function ExtractedResultsPage() {
} else { } else {
const index = Number.parseInt(value); const index = Number.parseInt(value);
setSelectedIndex(index); setSelectedIndex(index);
setCurrentPage(kpiValues[index].page); setCurrentPage(groupedKpiValues[index].pages[0]);
setCustomValue(""); setCustomValue("");
setCustomPage(""); setCustomPage("");
} }
@ -156,7 +187,7 @@ function ExtractedResultsPage() {
}; };
const handleRowClick = (index: number) => { const handleRowClick = (index: number) => {
setCurrentPage(kpiValues[index].page); setCurrentPage(groupedKpiValues[index].pages[0]);
setSelectedIndex(index); setSelectedIndex(index);
setCustomValue(""); setCustomValue("");
setCustomPage(""); setCustomPage("");
@ -195,10 +226,8 @@ function ExtractedResultsPage() {
setEditingCustomPage(true); setEditingCustomPage(true);
}; };
const handleCustomPageKeyPress = (e: KeyboardEvent<HTMLDivElement>) => { const handleCustomPageKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") { if (e.key === "Enter" || e.key === "Escape") {
setEditingCustomPage(false);
} else if (e.key === "Escape") {
setEditingCustomPage(false); setEditingCustomPage(false);
} }
}; };
@ -244,14 +273,14 @@ function ExtractedResultsPage() {
<strong>Gefundene Werte</strong> <strong>Gefundene Werte</strong>
</TableCell> </TableCell>
<TableCell align="center" width="15%"> <TableCell align="center" width="15%">
<strong>Seite</strong> <strong>Seiten</strong>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableHead> </TableHead>
<TableBody> <TableBody>
{kpiValues.map((item, index) => ( {groupedKpiValues.map((item, index) => (
<TableRow <TableRow
key={`${item.entity}_${item.page}_${index}`} key={`${item.entity}_${item.pages.join('_')}_${index}`}
sx={{ sx={{
"&:hover": { backgroundColor: "#f9f9f9" }, "&:hover": { backgroundColor: "#f9f9f9" },
cursor: "pointer", cursor: "pointer",
@ -290,16 +319,19 @@ function ExtractedResultsPage() {
</Box> </Box>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
<Link {item.pages.map((page: number, i: number) => (
component="button" <Link
onClick={(e: React.MouseEvent) => { key={page}
e.stopPropagation(); component="button"
setCurrentPage(item.page); onClick={(e: React.MouseEvent) => {
}} e.stopPropagation();
sx={{ cursor: "pointer" }} setCurrentPage(page);
> }}
{item.page} sx={{ cursor: "pointer", ml: i > 0 ? 1 : 0 }}
</Link> >
{page}
</Link>
))}
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
@ -335,24 +367,28 @@ function ExtractedResultsPage() {
}, },
}} }}
/> />
<TextField <Box sx={{ width: '100%' }}>
placeholder="Einen abweichenden Wert eingeben..." <TextField
value={customValue} placeholder="Einen abweichenden Wert eingeben..."
onChange={handleCustomValueChange} value={customValue}
variant="standard" onChange={handleCustomValueChange}
fullWidth variant="standard"
InputProps={{ fullWidth
disableUnderline: true, InputProps={{
}} disableUnderline: true,
sx={{ }}
"& .MuiInput-input": { sx={{
padding: 0, "& .MuiInput-input": {
}, padding: 0,
}} },
onClick={(e: React.MouseEvent) => { }}
e.stopPropagation(); onClick={(e: React.MouseEvent) => {
}} e.stopPropagation();
/> }}
error={selectedIndex === -1 && customValue !== "" && customValue.trim() === ""}
helperText={selectedIndex === -1 && customValue !== "" && customValue.trim() === "" ? "Der Wert, der angegeben wurde, ist leer." : ""}
/>
</Box>
</Box> </Box>
</TableCell> </TableCell>
<TableCell align="center"> <TableCell align="center">
@ -440,12 +476,12 @@ function ExtractedResultsPage() {
pitchBookId={pitchBook} pitchBookId={pitchBook}
currentPage={currentPage} currentPage={currentPage}
onPageChange={setCurrentPage} onPageChange={setCurrentPage}
highlight={Object.values(kpiValues) highlight={groupedKpiValues
.flat() .map((k) => k.pages.map((page: number) => ({ page, text: k.entity })))
.map((k) => ({ page: k.page, text: k.entity }))} .reduce((acc, val) => acc.concat(val), [])}
focusHighlight={{ focusHighlight={{
page: kpiValues.at(selectedIndex)?.page || -1, page: groupedKpiValues.at(selectedIndex)?.pages[0] || -1,
text: kpiValues.at(selectedIndex)?.entity || "", text: groupedKpiValues.at(selectedIndex)?.entity || "",
}} }}
/> />
</Paper> </Paper>
@ -453,7 +489,7 @@ function ExtractedResultsPage() {
<Button <Button
variant="contained" variant="contained"
onClick={handleAcceptReview} onClick={handleAcceptReview}
disabled={!selectedValue} disabled={isSelectedValueEmpty}
sx={{ sx={{
backgroundColor: "#383838", backgroundColor: "#383838",
"&:hover": { backgroundColor: "#2e2e2e" }, "&:hover": { backgroundColor: "#2e2e2e" },