4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

button_signature

Browse Source
This commit is contained in:
Pascal 2024-11-26 14:15:12 +01:00
parent a190221e32
commit 8aa1099eb5
2 changed files with 169 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/style/signature.css
View File

@ -1500,3 +1500,22 @@ input[type="file"] {
display: none; display: none;
animation: slideDown 0.3s ease-out; animation: slideDown 0.3s ease-out;
} }
.sign-button {
background-color: #4CAF50;
color: white;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
.sign-button:hover {
background-color: #45a049;
}
.sign-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}

164
src/pages/signature/signature.ts
View File

@ -13,6 +13,7 @@ declare global {
submitDocumentRequest: typeof submitDocumentRequest; submitDocumentRequest: typeof submitDocumentRequest;
submitNewDocument: typeof submitNewDocument; submitNewDocument: typeof submitNewDocument;
submitCommonDocument: typeof submitCommonDocument; submitCommonDocument: typeof submitCommonDocument;
signDocument: typeof signDocument;
} }
} }
@ -28,7 +29,15 @@ import {
} from '../../models/signature.models'; } from '../../models/signature.models';
import { messageStore } from '../../utils/messageMock'; import { messageStore } from '../../utils/messageMock';
import { showAlert } from '../account/account'; import { showAlert } from '../account/account';
let currentUser = membersMock[0];
interface Member {
id: string | number;
name: string;
email?: string;
avatar?: string;
}
let currentUser: Member = membersMock[0];
interface Group { interface Group {
id: number; id: number;
@ -546,19 +555,19 @@ function showProcessDetails(group: Group, groupId: number) {
<div class="details-section"> <div class="details-section">
<h3>Documents Communs</h3> <h3>Documents Communs</h3>
<div class="documents-grid"> <div class="documents-grid">
${displayGroup.commonDocuments.map((document: { ${displayGroup.commonDocuments.map((document: any) => {
signatures?: DocumentSignature[];
name: string;
visibility: string;
createdAt?: string | null;
deadline?: string | null;
id: number;
}) => {
const totalSignatures = document.signatures?.length || 0; const totalSignatures = document.signatures?.length || 0;
const signedCount = document.signatures?.filter((sig: DocumentSignature) => sig.signed).length || 0; const signedCount = document.signatures?.filter((sig: DocumentSignature) => sig.signed).length || 0;
const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0; const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
const isVierge = !document.createdAt || !document.deadline || !document.signatures?.length; const isVierge = !document.createdAt || !document.deadline || !document.signatures?.length;
// Ajouter le bouton de signature pour tous les documents non vierges en mode dev
const signButton = !isVierge ? `
<button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, true)">
Signer le document
</button>
` : '';
return ` return `
<div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}"> <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
<div class="document-header"> <div class="document-header">
@ -600,6 +609,7 @@ function showProcessDetails(group: Group, groupId: number) {
documentName: '${document.name}' documentName: '${document.name}'
})">New request</button> })">New request</button>
`} `}
${signButton}
</div> </div>
</div> </div>
`; `;
@ -614,15 +624,17 @@ function showProcessDetails(group: Group, groupId: number) {
<div class="documents-grid"> <div class="documents-grid">
${(role.documents || []).length > 0 ? ${(role.documents || []).length > 0 ?
(role.documents || []).map(document => { (role.documents || []).map(document => {
const totalSignatures = document.signatures.length;
const signedCount = document.signatures.filter((sig: DocumentSignature) => sig.signed).length;
const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
// Détection d'un document vierge
const isVierge = !document.createdAt || const isVierge = !document.createdAt ||
!document.deadline || !document.deadline ||
document.signatures.length === 0; document.signatures.length === 0;
// Ajouter le bouton de signature pour tous les documents non vierges en mode dev
const signButton = !isVierge ? `
<button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, false)">
Signer le document
</button>
` : '';
return ` return `
<div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}"> <div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
<div class="document-header"> <div class="document-header">
@ -652,11 +664,12 @@ function showProcessDetails(group: Group, groupId: number) {
`).join('')} `).join('')}
</div> </div>
<div class="progress-bar"> <div class="progress-bar">
<div class="progress" style="width: ${percentage}%;"></div> <div class="progress" style="width: ${document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length * 100}%;"></div>
</div> </div>
<p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p> <p>${document.signatures.filter((sig: DocumentSignature) => sig.signed).length} out of ${document.signatures.length} signed (${(document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length * 100).toFixed(0)}%)</p>
</div> </div>
` : ''} ` : ''}
${signButton}
</div> </div>
`; `;
}).join('') }).join('')
@ -1437,3 +1450,122 @@ export function initSignature() {
}); });
} }
} }
// Ajouter cette interface pour la signature
interface SignatureResponse {
success: boolean;
message: string;
documentId: number;
memberId: string | number;
signedAt: string;
}
// Ajouter cette fonction pour signer un document
function signDocument(documentId: number, processId: number, isCommonDocument: boolean = false) {
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 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) {
documentList = role.documents;
break;
}
}
}
}
if (!document) {
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
);
if (!userSignature) {
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
if (isCommonDocument) {
showProcessDetails(group, processId);
} else {
const role = group.roles.find((r: any) => r.documents?.includes(document));
if (role) {
showRoleDocuments(role, group);
}
}
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
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;