6ae698de76
- Ajout du composant FilePreview avec iframe et viewer PDF intégré - Correction du mapping des données API (document_id -> id) - Ajout de previewUrl avec URL.createObjectURL pour l'aperçu - Interface modale avec navigation et zoom - Support des fichiers PDF avec affichage réel du contenu - Correction de l'affichage de la taille des fichiers - Ajout des dépendances react-pdf-js pour l'aperçu PDF - Scripts de démarrage et fichiers de test - Documentation complète de la fonctionnalité d'aperçu
289 lines
8.6 KiB
HTML
289 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test Aperçu 4NK_IA_front</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
.status {
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
|
|
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
|
|
.info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
background: #fafafa;
|
|
}
|
|
.file-test {
|
|
display: inline-block;
|
|
margin: 10px;
|
|
padding: 15px;
|
|
background: white;
|
|
border: 2px dashed #007bff;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
.file-test:hover {
|
|
background: #e3f2fd;
|
|
border-color: #0056b3;
|
|
}
|
|
.instructions {
|
|
background: #e3f2fd;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin: 20px 0;
|
|
}
|
|
.step {
|
|
margin: 10px 0;
|
|
padding: 10px;
|
|
background: white;
|
|
border-left: 4px solid #007bff;
|
|
border-radius: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🧪 Test de la fonctionnalité d'aperçu - 4NK_IA_front</h1>
|
|
|
|
<div class="status info">
|
|
<h3>📋 Instructions de test :</h3>
|
|
<div class="step">
|
|
<strong>Étape 1 :</strong> Ouvrez l'application frontend :
|
|
<a href="http://localhost:5173" target="_blank" style="color: #007bff; text-decoration: none;">
|
|
<strong>http://localhost:5173</strong>
|
|
</a>
|
|
</div>
|
|
<div class="step">
|
|
<strong>Étape 2 :</strong> Allez dans l'onglet "Upload" (premier onglet)
|
|
</div>
|
|
<div class="step">
|
|
<strong>Étape 3 :</strong> Testez l'upload avec les fichiers de test ci-dessous
|
|
</div>
|
|
<div class="step">
|
|
<strong>Étape 4 :</strong> Cliquez sur "Aperçu" pour voir le contenu du document
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>📁 Fichiers de test disponibles</h2>
|
|
<p>Cliquez sur un fichier pour le télécharger et le tester :</p>
|
|
|
|
<div class="file-test" onclick="downloadFile('sample.txt')">
|
|
<h4>📄 sample.txt</h4>
|
|
<p>Document texte avec acte de vente</p>
|
|
<small>Format: .txt</small>
|
|
</div>
|
|
|
|
<div class="file-test" onclick="downloadFile('sample.md')">
|
|
<h4>📝 sample.md</h4>
|
|
<p>Document Markdown avec acte de vente</p>
|
|
<small>Format: .md</small>
|
|
</div>
|
|
|
|
<div class="file-test" onclick="createTestPDF()">
|
|
<h4>📋 Test PDF</h4>
|
|
<p>Créer un PDF de test</p>
|
|
<small>Format: .pdf</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>🎯 Types de fichiers supportés</h2>
|
|
<ul>
|
|
<li><strong>PDF</strong> (.pdf) - Aperçu avec contenu simulé</li>
|
|
<li><strong>Images</strong> (.png, .jpg, .jpeg, .tiff) - Aperçu d'image</li>
|
|
<li><strong>Texte</strong> (.txt) - Contenu textuel affiché</li>
|
|
<li><strong>Markdown</strong> (.md) - Contenu Markdown formaté</li>
|
|
<li><strong>Word</strong> (.docx) - Aperçu de document Word</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>✨ Fonctionnalités d'aperçu</h2>
|
|
<ul>
|
|
<li><strong>Affichage du contenu</strong> - Aperçu du contenu du document</li>
|
|
<li><strong>Informations du fichier</strong> - Type, taille, statut</li>
|
|
<li><strong>Bouton de téléchargement</strong> - Télécharger le document</li>
|
|
<li><strong>Interface responsive</strong> - Adaptation mobile/desktop</li>
|
|
<li><strong>Gestion d'erreurs</strong> - Messages d'erreur appropriés</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="status success">
|
|
<h3>✅ Améliorations apportées</h3>
|
|
<ul>
|
|
<li>Support des formats TXT, MD, DOCX en plus de PDF et images</li>
|
|
<li>Composant FilePreview dédié pour l'aperçu</li>
|
|
<li>Interface utilisateur améliorée avec grille responsive</li>
|
|
<li>Bouton "Aperçu" pour chaque document uploadé</li>
|
|
<li>Affichage du contenu simulé selon le type de fichier</li>
|
|
<li>Gestion des états de chargement et d'erreur</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="status info">
|
|
<h3>🔧 Dépannage</h3>
|
|
<p>Si l'aperçu ne fonctionne pas :</p>
|
|
<ul>
|
|
<li>Vérifiez que l'application est accessible sur http://localhost:5173</li>
|
|
<li>Assurez-vous que le document est uploadé avec succès (statut "completed")</li>
|
|
<li>Cliquez sur le bouton "Aperçu" (icône 👁️)</li>
|
|
<li>Vérifiez la console du navigateur pour d'éventuelles erreurs</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function downloadFile(filename) {
|
|
const content = getFileContent(filename);
|
|
const blob = new Blob([content], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = filename;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
|
|
function getFileContent(filename) {
|
|
if (filename === 'sample.txt') {
|
|
return `ACTE DE VENTE IMMOBILIÈRE
|
|
|
|
Entre les soussignés :
|
|
- Vendeur : Jean Dupont, né le 15/05/1980, demeurant 123 Rue de la Paix, 75001 Paris
|
|
- Acheteur : Marie Martin, née le 22/03/1985, demeurant 456 Avenue des Champs, 75008 Paris
|
|
|
|
Objet : Vente d'un appartement situé 123 Rue de la Paix, 75001 Paris
|
|
Surface : 75 m²
|
|
Prix : 250 000 euros
|
|
|
|
Clauses particulières :
|
|
- Clause de garantie des vices cachés
|
|
- Clause de condition suspensive d'obtention du prêt
|
|
- Clause de garantie d'éviction
|
|
|
|
Fait à Paris, le 15 janvier 2024
|
|
|
|
Signatures :
|
|
Jean Dupont : [Signature]
|
|
Marie Martin : [Signature]`;
|
|
} else if (filename === 'sample.md') {
|
|
return `# Acte de Vente Immobilière
|
|
|
|
## Informations générales
|
|
- **Type** : Acte de vente
|
|
- **Date** : 15 janvier 2024
|
|
- **Lieu** : Paris
|
|
|
|
## Parties contractantes
|
|
- **Vendeur** : Jean Dupont
|
|
- **Acheteur** : Marie Martin
|
|
|
|
## Objet de la vente
|
|
- **Bien** : Appartement
|
|
- **Adresse** : 123 Rue de la Paix, 75001 Paris
|
|
- **Surface** : 75 m²
|
|
- **Prix** : 250 000 €
|
|
|
|
## Clauses particulières
|
|
1. Clause de garantie des vices cachés
|
|
2. Clause de condition suspensive
|
|
3. Clause de garantie d'éviction
|
|
|
|
## Signatures
|
|
- Jean Dupont : [Signature]
|
|
- Marie Martin : [Signature]`;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
function createTestPDF() {
|
|
// Créer un PDF simple pour le test
|
|
const content = `%PDF-1.4
|
|
1 0 obj
|
|
<<
|
|
/Type /Catalog
|
|
/Pages 2 0 R
|
|
>>
|
|
endobj
|
|
|
|
2 0 obj
|
|
<<
|
|
/Type /Pages
|
|
/Kids [3 0 R]
|
|
/Count 1
|
|
>>
|
|
endobj
|
|
|
|
3 0 obj
|
|
<<
|
|
/Type /Page
|
|
/Parent 2 0 R
|
|
/MediaBox [0 0 612 792]
|
|
/Contents 4 0 R
|
|
>>
|
|
endobj
|
|
|
|
4 0 obj
|
|
<<
|
|
/Length 44
|
|
>>
|
|
stream
|
|
BT
|
|
/F1 12 Tf
|
|
72 720 Td
|
|
(Test PDF Document) Tj
|
|
ET
|
|
endstream
|
|
endobj
|
|
|
|
xref
|
|
0 5
|
|
0000000000 65535 f
|
|
0000000009 00000 n
|
|
0000000058 00000 n
|
|
0000000115 00000 n
|
|
0000000204 00000 n
|
|
trailer
|
|
<<
|
|
/Size 5
|
|
/Root 1 0 R
|
|
>>
|
|
startxref
|
|
297
|
|
%%EOF`;
|
|
|
|
const blob = new Blob([content], { type: 'application/pdf' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'test-document.pdf';
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|