Vertragsdokumente-Modal: Vorschau-Link pro Dokument
Neben jeder Dokument-Zeile sitzt jetzt ein "Vorschau"-Link mit ExternalLink-Icon, der die PDF in einem neuen Tab öffnet (via viewUrl mit Token-Auth, inline-disposition). Klick darauf schaltet bewusst NICHT die Checkbox um – die Auswahl bleibt, nur das Dokument geht in einem zweiten Tab auf. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,12 @@
|
||||
import { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { FileText, Loader2 } from 'lucide-react';
|
||||
import { FileText, Loader2, ExternalLink } from 'lucide-react';
|
||||
import toast from 'react-hot-toast';
|
||||
import Modal from '../ui/Modal';
|
||||
import Button from '../ui/Button';
|
||||
import { contractApi, EmailAttachment } from '../../services/api';
|
||||
import { serverFileToAttachment, totalAttachmentBytes } from './composeAttachmentHelpers';
|
||||
import { viewUrl } from '../../utils/fileUrl';
|
||||
|
||||
interface Props {
|
||||
isOpen: boolean;
|
||||
@@ -127,29 +128,42 @@ export default function AttachContractDocumentsModal({
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{docs.map((doc) => (
|
||||
<label
|
||||
<div
|
||||
key={doc.id}
|
||||
className="flex items-start gap-2 p-2 rounded hover:bg-gray-50 cursor-pointer"
|
||||
className="flex items-start gap-2 p-2 rounded hover:bg-gray-50"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(doc.id)}
|
||||
onChange={() => toggle(doc.id)}
|
||||
disabled={busy}
|
||||
className="mt-0.5 rounded"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<FileText className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
<span className="truncate">{doc.originalName}</span>
|
||||
</div>
|
||||
{doc.notes && (
|
||||
<div className="text-xs text-gray-500 mt-0.5 ml-6 truncate">
|
||||
{doc.notes}
|
||||
<label className="flex items-start gap-2 flex-1 min-w-0 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.has(doc.id)}
|
||||
onChange={() => toggle(doc.id)}
|
||||
disabled={busy}
|
||||
className="mt-0.5 rounded"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<FileText className="w-4 h-4 text-gray-400 flex-shrink-0" />
|
||||
<span className="truncate">{doc.originalName}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
{doc.notes && (
|
||||
<div className="text-xs text-gray-500 mt-0.5 ml-6 truncate">
|
||||
{doc.notes}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
<a
|
||||
href={viewUrl(doc.documentPath)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="flex-shrink-0 inline-flex items-center gap-1 px-2 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded transition-colors"
|
||||
title="Dokument in neuem Tab öffnen"
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
<span>Vorschau</span>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user