Merge pull request '#2-Kennzahlen-kopieren' (#66) from #2-Kennzahlen-kopieren into main

Reviewed-on: #66

project/frontend/src/routes/extractedResult.$pitchBook.tsx

@@ -1,6 +1,6 @@
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
+import { Box, Button, Paper, Typography, Snackbar, Alert, IconButton } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import { Box, Button, Paper, Typography, IconButton } from "@mui/material";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useCallback, useState, useMemo } from "react";
@@ -35,6 +35,8 @@ function ExtractedResultsPage() {
 	const navigate = useNavigate();
 	const { from } = Route.useSearch();
 	const [currentPage, setCurrentPage] = useState(1);
+	const [copied, setCopied] = useState(false);
+	const [snackbarOpen, setSnackbarOpen] = useState(false);
 	const [focusHighlight, setFocusHighlight] = useState({
 		page: 5,
 		text: "Langjährige",
@@ -77,6 +79,63 @@ function ExtractedResultsPage() {
 		green: "#3fd942",
 	}[status];
 
+	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 "";
+			}
+			let value = settingData[0]?.entity || "";
+			value = value
+				.replace(/[\r\n]/g, ' ')
+				.replace(/\s+/g, ' ')
+				.trim();
+			value = value.replace(/\t/g, ' ');
+			return value;
+		});
+		return values.join('\t');
+	};
+
+	const handleCopyToClipboard = async () => {
+		try {
+			const textToCopy = prepareClipboardData();
+
+			if (navigator.clipboard && window.isSecureContext) {
+				await navigator.clipboard.write([
+					new ClipboardItem({
+						'text/plain': new Blob([textToCopy], { type: 'text/plain' })
+					})
+				]);
+			} else {
+				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();
+			}
+
+			setCopied(true);
+			setSnackbarOpen(true);
+			setTimeout(() => setCopied(false), 2000);
+
+		} catch (err) {
+			console.error('Fallback to copy failed');
+		}
+	};
+
+	const handleCloseSnackbar = () => {
+		setSnackbarOpen(false);
+	};
+
 	return (
 		<Box p={4}>
 			<Box display="flex" alignItems="center" gap={3}>
@@ -176,9 +235,10 @@ function ExtractedResultsPage() {
 						gap={2}
 						sx={{ flexShrink: 0 }}
 					>
-						<Button variant="contained" sx={{ backgroundColor: "#383838" }}>
+						<Button variant="contained" sx={{ backgroundColor: "#383838" }}
+								onClick={handleCopyToClipboard}>
 							<ContentPasteIcon sx={{ fontSize: 18, mr: 1 }} />
-							Kennzahlenzeile kopieren
+							{copied ? "Kopiert!" : "Kennzahlenzeile kopieren"}
 						</Button>
 						<Button
 							variant="contained"
@@ -190,6 +250,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>
 	);
-}
+}