modal_sign_working_but_not_ok

public/style/signature.css

@@ -1518,4 +1518,103 @@ input[type="file"] {
 .sign-button:disabled {
     background-color: #cccccc;
     cursor: not-allowed;
+}
+
+.modal-document {
+    background: white;
+    border-radius: 8px;
+    max-width: 800px;
+    width: 90%;
+    max-height: 75vh;
+    overflow-y: auto;
+    position: relative;
+}
+
+.document-details {
+    padding: 20px;
+}
+
+.info-section {
+    margin: 20px 0;
+    background: #f8f9fa;
+    padding: 15px;
+    border-radius: 6px;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.label {
+    font-weight: bold;
+    color: #666;
+}
+
+.description-section {
+    margin: 20px 0;
+}
+
+.signatures-section {
+    margin: 20px 0;
+}
+
+.signature-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+}
+
+.signature-item.signed {
+    background-color: #e8f5e9;
+}
+
+.signature-item.pending {
+    background-color: #fff3e0;
+}
+
+.files-section {
+    margin: 20px 0;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    background: #f8f9fa;
+    margin-bottom: 5px;
+    border-radius: 4px;
+}
+
+.file-icon {
+    margin-right: 10px;
+}
+
+.download-link {
+    margin-left: auto;
+}
+
+.confirmation-section {
+    margin-top: 30px;
+    text-align: center;
+}
+
+.warning-text {
+    color: #f44336;
+    margin-bottom: 15px;
+}
+
+.sign-confirm-btn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.sign-confirm-btn:hover {
+    background-color: #45a049;
 }

src/pages/signature/signature.ts

@@ -14,6 +14,7 @@ declare global {
         submitNewDocument: typeof submitNewDocument;
         submitCommonDocument: typeof submitCommonDocument;
         signDocument: typeof signDocument;
+        confirmSignature: typeof confirmSignature;
     }
 }
 
@@ -586,9 +587,9 @@ function showProcessDetails(group: Group, groupId: number) {
                                                         <div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
                                                             <span class="signer-name">${sig.member.name}</span>
                                                             <span class="signature-status">
-                                                                ${sig.signed ?
+                                                                ${sig.signed ? 
-                                                                    `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'Unknown date'}` : 
+                                                                    `✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` : 
-                                                                    '⌛ Pending'}
+                                                                    '⌛ En attente'}
                                                             </span>
                                                         </div>
                                                     `).join('')}
@@ -657,8 +658,8 @@ function showProcessDetails(group: Group, groupId: number) {
                                                                     <span class="signer-name">${sig.member.name}</span>
                                                                     <span class="signature-status">
                                                                         ${sig.signed ? 
-                                                                            `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'Unknown date'}` : 
+                                                                            `✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` : 
-                                                                            ' Pending'}
+                                                                            '⌛ En attente'}
                                                                     </span>
                                                                 </div>
                                                             `).join('')}
@@ -819,8 +820,8 @@ function showRoleDocuments(role: {
                                                             <span class="signer-name">${sig.member.name}</span>
                                                             <span class="signature-status">
                                                                 ${sig.signed ? 
-                                                                    `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'Unknown date'}` : 
+                                                                    `✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` : 
-                                                                    '⌛ Pending'}
+                                                                    '⌛ En attente'}
                                                             </span>
                                                         </div>
                                                     `).join('')}
@@ -1462,6 +1463,122 @@ interface SignatureResponse {
 
 // Ajouter cette fonction pour signer un document
 function signDocument(documentId: number, processId: number, isCommonDocument: boolean = false) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        console.error('Cette fonction ne peut être exécutée que dans un navigateur');
+        return;
+    }
+
+    try {
+        const groups = JSON.parse(localStorage.getItem('groups') || JSON.stringify(groupsMock));
+        const group = groups.find((g: Group) => g.id === processId);
+        
+        if (!group) {
+            throw new Error('Processus non trouvé');
+        }
+
+        let targetDoc;
+        if (isCommonDocument) {
+            targetDoc = group.commonDocuments.find((d: any) => d.id === documentId);
+        } else {
+            for (const role of group.roles) {
+                if (role.documents) {
+                    targetDoc = role.documents.find((d: any) => d.id === documentId);
+                    if (targetDoc) break;
+                }
+            }
+        }
+
+        if (!targetDoc) {
+            throw new Error('Document non trouvé');
+        }
+
+        // Créer et insérer la modal directement dans le body
+        const modalHtml = `
+            <div class="modal-overlay" id="signatureModal">
+                <div class="modal-document">
+                    <div class="modal-content-document">
+                        <div class="details-header">
+                            <h2>Signature du document</h2>
+                            <button class="close-btn" onclick="closeModal(this)">×</button>
+                        </div>
+                        
+                        <div class="document-details">
+                            <h3>${targetDoc.name}</h3>
+                            
+                            <div class="info-section">
+                                <div class="info-row">
+                                    <span class="label">Créé le:</span>
+                                    <span class="value">${new Date(targetDoc.createdAt).toLocaleDateString()}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="label">Date limite:</span>
+                                    <span class="value">${new Date(targetDoc.deadline).toLocaleDateString()}</span>
+                                </div>
+                                <div class="info-row">
+                                    <span class="label">Visibilité:</span>
+                                    <span class="value">${targetDoc.visibility}</span>
+                                </div>
+                            </div>
+
+                            <div class="description-section">
+                                <h4>Description:</h4>
+                                <p>${targetDoc.description || 'Aucune description disponible'}</p>
+                            </div>
+
+                            <div class="signatures-section">
+                                <h4>État des signatures:</h4>
+                                <div class="signatures-list">
+                                    ${targetDoc.signatures.map((sig: DocumentSignature) => `
+                                        <div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
+                                            <span class="signer-name">${sig.member.name}</span>
+                                            <span class="signature-status">
+                                                ${sig.signed ? 
+                                                    `✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` : 
+                                                    '⌛ En attente'}
+                                            </span>
+                                        </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+
+                            ${targetDoc.files ? `
+                                <div class="files-section">
+                                    <h4>Fichiers joints:</h4>
+                                    <div class="files-list">
+                                        ${targetDoc.files.map((file: any) => `
+                                            <div class="file-item">
+                                                <span class="file-icon"></span>
+                                                <span class="file-name">${file.name}</span>
+                                                <a href="${file.url}" class="download-link" download>
+                                                    <span class="download-icon">⬇️</span>
+                                                </a>
+                                            </div>
+                                        `).join('') || 'Aucun fichier joint'}
+                                    </div>
+                                </div>
+                            ` : ''}
+
+                            <div class="confirmation-section">
+                                <p class="warning-text">En signant ce document, vous confirmez avoir pris connaissance de son contenu.</p>
+                                <button class="sign-confirm-btn" onclick="confirmSignature(${documentId}, ${processId}, ${isCommonDocument})">
+                                    Signer le document
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>`;
+
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+    } catch (error) {
+        console.error('Erreur lors de l\'affichage de la modal:', error);
+        showAlert(error instanceof Error ? error.message : 'Erreur lors de l\'affichage de la modal');
+    }
+}
+
+// Nouvelle fonction pour confirmer la signature
+function confirmSignature(documentId: number, processId: number, isCommonDocument: boolean) {
     try {
         const groups = JSON.parse(localStorage.getItem('groups') || JSON.stringify(groupsMock));
         const group = groups.find((g: Group) => g.id === processId);
@@ -1471,20 +1588,13 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
         }
 
         let document;
-        let documentList;
-        
         if (isCommonDocument) {
-            documentList = group.commonDocuments;
             document = group.commonDocuments.find((d: any) => d.id === documentId);
         } else {
-            // Chercher dans les documents des rôles
             for (const role of group.roles) {
                 if (role.documents) {
                     document = role.documents.find((d: any) => d.id === documentId);
-                    if (document) {
+                    if (document) break;
-                        documentList = role.documents;
-                        break;
-                    }
                 }
             }
         }
@@ -1493,7 +1603,6 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
             throw new Error('Document non trouvé');
         }
 
-        // Trouver la signature correspondant à l'utilisateur courant
         const userSignature = document.signatures.find((sig: DocumentSignature) => 
             sig.member.name === currentUser.name
         );
@@ -1502,18 +1611,13 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
             throw new Error('Signature non trouvée pour cet utilisateur');
         }
 
-        if (userSignature.signed) {
-            throw new Error('Document déjà signé par cet utilisateur');
-        }
-
-        // Mettre à jour la signature
         userSignature.signed = true;
         userSignature.signedAt = new Date().toISOString();
 
-        // Sauvegarder les modifications
         localStorage.setItem('groups', JSON.stringify(groups));
 
-        // Rafraîchir l'affichage
+        closeModal(document.querySelector('.close-btn'));
+        
         if (isCommonDocument) {
             showProcessDetails(group, processId);
         } else {
@@ -1524,48 +1628,18 @@ function signDocument(documentId: number, processId: number, isCommonDocument: b
         }
 
         showAlert('Document signé avec succès!');
-        return {
-            success: true,
-            message: 'Document signé avec succès',
-            documentId,
-            memberId: currentUser.id,
-            signedAt: userSignature.signedAt
-        };
 
     } catch (error) {
         console.error('Erreur lors de la signature:', error);
         showAlert(error instanceof Error ? error.message : 'Erreur lors de la signature');
-        return {
-            success: false,
-            message: error instanceof Error ? error.message : 'Erreur lors de la signature',
-            documentId,
-            memberId: currentUser.id,
-            signedAt: ''
-        };
     }
 }
 
-// Modifier la fonction qui génère les cartes de documents pour ajouter le bouton de signature
+window.confirmSignature = confirmSignature;
-function generateDocumentCard(document: any, isCommonDocument: boolean = false) {
-    // ... code existant de la carte ...
-    
-    // Ajouter le bouton de signature si l'utilisateur n'a pas encore signé
-    const userSignature = document.signatures?.find((sig: DocumentSignature) => 
-        sig.member?.name === currentUser?.name
-    );
-    
-    const signatureButton = !userSignature?.signed ? `
-        <button class="sign-button" onclick="signDocument('${document.id}', '${document.processId}', ${isCommonDocument})">
-            Signer le document
-        </button>
-    ` : '';
-    return `
-        <div class="document-card ${document.visibility}">
-            // ... reste du code de la carte ...
-            ${signatureButton}
-        </div>
-    `;
-}
-
-// Ajouter la fonction au scope global
 window.signDocument = signDocument;
+
+// S'assurer que la fonction est disponible globalement
+if (typeof window !== 'undefined') {
+    (window as any).signDocument = signDocument;
+    (window as any).confirmSignature = confirmSignature;
+}