added Snackbar and copy logic

pull/66/head
s8613 2025-06-13 16:21:41 +02:00
parent 211bb9a9d1
commit 1846b24de8
1 changed files with 93 additions and 4 deletions

View File

@ -1,5 +1,5 @@
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
import { Box, Button, Paper, Typography } from "@mui/material";
import { Box, Button, Paper, Typography, Snackbar, Alert } from "@mui/material";
import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useState } from "react";
@ -7,6 +7,17 @@ import KennzahlenTable from "../components/KennzahlenTable";
import PDFViewer from "../components/pdfViewer";
import { kpiQueryOptions } from "../util/query";
// SETTINGS von KennzahlenTable component (mock)
const SETTINGS = [
{ name: "Rendite", position: 1, active: true, mandatory: true },
{ name: "Ausschüttungsrendite", position: 2, active: true, mandatory: true },
{ name: "Laufzeit", position: 3, active: true, mandatory: true },
{ name: "Länderallokation", position: 4, active: true, mandatory: true },
{ name: "Managmentgebühren", position: 5, active: true, mandatory: true },
{ name: "Risikoprofil", position: 6, active: false, mandatory: true },
{ name: "Irgendwas", position: 7, active: true, mandatory: true },
];
export const Route = createFileRoute("/extractedResult/$pitchBook")({
component: ExtractedResultsPage,
loader: ({ context: { queryClient }, params: { pitchBook } }) =>
@ -18,6 +29,8 @@ function ExtractedResultsPage() {
const navigate = useNavigate();
const status: "green" | "yellow" | "red" = "red";
const [currentPage, setCurrentPage] = useState(1);
const [copied, setCopied] = useState(false);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const statusColor = {
red: "#f43131",
@ -27,6 +40,57 @@ function ExtractedResultsPage() {
const { data: kpi } = useSuspenseQuery(kpiQueryOptions(pitchBook));
const prepareClipboardData = () => {
const activeSettings = SETTINGS
.filter(setting => setting.active)
.sort((a, b) => a.position - b.position);
const values = activeSettings.map(setting => {
const settingData = kpi[setting.name.toUpperCase()];
if (!settingData || settingData.length === 0) {
return "";
}
return settingData[0]?.entity || "";
});
return values.join('\t');
};
const handleCopyToClipboard = async () => {
try {
const textToCopy = prepareClipboardData();
// Use the modern Clipboard API if available
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(textToCopy);
} else {
// Fallback for older browsers or non-secure contexts
const textArea = document.createElement("textarea");
textArea.value = textToCopy;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
document.execCommand('copy');
textArea.remove();
}
// Show success feedback
setCopied(true);
setSnackbarOpen(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error('Failed to copy text: ', err);
// You could show an error snackbar here if needed
}
};
const handleCloseSnackbar = () => {
setSnackbarOpen(false);
};
return (
<Box p={4}>
<Box display="flex" alignItems="center" gap={3}>
@ -93,9 +157,19 @@ function ExtractedResultsPage() {
<PDFViewer pitchBookId={pitchBook} currentPage={currentPage} />
</Paper>
<Box mt={2} display="flex" justifyContent="flex-end" gap={2}>
<Button variant="contained" sx={{ backgroundColor: "#383838" }}>
<Button
variant="contained"
sx={{
backgroundColor: copied ? "#4caf50" : "#383838",
'&:hover': {
backgroundColor: copied ? "#45a049" : "#555555",
},
transition: "all 0.3s ease",
}}
onClick={handleCopyToClipboard}
>
<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
Kennzahlenzeile kopieren
{copied ? "Kopiert!" : "Kennzahlenzeile kopieren"}
</Button>
<Button
variant="contained"
@ -107,6 +181,21 @@ function ExtractedResultsPage() {
</Box>
</Box>
</Box>
<Snackbar
open={snackbarOpen}
autoHideDuration={3000}
onClose={handleCloseSnackbar}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<Alert
onClose={handleCloseSnackbar}
severity="success"
sx={{ width: '100%' }}
>
Kennzahlen erfolgreich in die Zwischenablage kopiert!
</Alert>
</Snackbar>
</Box>
);
}
}