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

signature_ok_message_ko

Browse Source
This commit is contained in:
Pascal 2024-12-02 18:48:23 +01:00
parent 17397b7fa2
commit 1767fd60a5
5 changed files with 117 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main.ts
View File

@ -1,13 +1,13 @@
import { SignatureComponent } from './pages/signature/signature-component';
import { SignatureElement } from './pages/signature/signature';
// Exporter les composants pour une utilisation externe
export {
SignatureComponent,
SignatureElement
};
// Déclarer les types pour TypeScript
declare global {
interface HTMLElementTagNameMap {
'signature-component': SignatureComponent;

5
src/pages/signature/signature-component.ts
View File

@ -1,5 +1,4 @@
import { SignatureElement } from './signature';
import signatureHtml from './signature.html?raw'
import signatureCss from '../../../public/style/signature.css?raw'
import Services from '../../services/service.js'
@ -19,6 +18,10 @@ class SignatureComponent extends HTMLElement {
console.log('CALLBACKs')
this.render();
this.fetchData();
if (!customElements.get('signature-element')) {
customElements.define('signature-element', SignatureElement);
}
}
async fetchData() {

2
src/pages/signature/signature.html
View File

@ -12,10 +12,10 @@
<!-- Main content-->
<div class="container">
<!-- List of groups -->
<div class="group-list">
<ul id="group-list">
<!-- Groups will be added here dynamically -->
</ul>
</div>

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

@ -29,8 +29,6 @@ import { showAlert } from '../account/account';
import { Member } from '../../interface/memberInterface';
import { Group } from '../../interface/groupInterface';
import { getCorrectDOM } from '../../utils/document.utils';
import signatureHtml from './signature.html?raw'
import signatureCss from '../../../public/style/signature.css?raw'
let currentUser: Member = membersMock[0];
@ -285,7 +283,6 @@ class SignatureElement extends HTMLElement {
});
}
// Ajouter la méthode ici, au début de la classe
private calculateDuration(startDate: string | null | undefined, endDate: string | null | undefined): number {
const start = new Date(startDate || '');
const end = new Date(endDate || '');
@ -294,7 +291,7 @@ class SignatureElement extends HTMLElement {
}
// Add this helper function
private canUserAccessDocument(document: any, roleId: string, currentUserRole: string): boolean {
private canUserAccessDocument(document: any, roleId: string, currentUserRole: string): boolean {
// Modify the access logic
if (document.visibility === 'public') {
return true; // Can see but not necessarily sign
@ -302,7 +299,7 @@ class SignatureElement extends HTMLElement {
return roleId === currentUserRole;
}
private canUserSignDocument(document: any, role: string, user: Member): boolean {
private canUserSignDocument(document: any, role: string, user: Member): boolean {
console.log('Checking signing rights for:', {
document,
role,
@ -322,13 +319,13 @@ class SignatureElement extends HTMLElement {
// Si l'utilisateur est dans la liste des signatures, il peut signer
return true;
}
}
private closeProcessDetails(groupId: number) {
const detailsArea = document.getElementById(`process-details-${groupId}`);
const chatArea = document.getElementById('chat-area');
if (detailsArea) {
private closeProcessDetails(groupId: number) {
const detailsArea = document.getElementById(`process-details-${groupId}`);
const chatArea = document.getElementById('chat-area');
if (detailsArea) {
detailsArea.style.display = 'none';
}
@ -339,13 +336,13 @@ class SignatureElement extends HTMLElement {
///////////////////// Notification module /////////////////////
// Delete a notification
private removeNotification(index: number) {
private removeNotification(index: number) {
this.notifications?.splice(index, 1); // Ajout de ?.
this.renderNotifications();
this.updateNotificationBadge();
}
// Show notifications
private renderNotifications() {
private renderNotifications() {
if (!this.notificationBoard) return;
// Reset the interface
@ -369,7 +366,7 @@ class SignatureElement extends HTMLElement {
this.notificationBoard?.appendChild(notifElement);
});
}
private updateNotificationBadge() {
private updateNotificationBadge() {
if (!this.notificationBadge) return;
const count = this.notifications.length;
this.notificationBadge.textContent = count > 99 ? '+99' : count.toString();
@ -429,7 +426,6 @@ class SignatureElement extends HTMLElement {
}, 2000);
}
// Déplacer cette méthode avant loadGroupList
private showProcessDetails(group: Group, groupId: number) {
console.log('Showing details for group:', groupId);
@ -729,30 +725,75 @@ class SignatureElement extends HTMLElement {
}
// Toggle the list of Roles
private toggleRoles(group: Group, groupElement: HTMLElement) {
console.log('=== toggleRoles START ===');
console.log('Group:', group.name);
console.log('Group roles:', group.roles); // Afficher tous les rôles disponibles
let roleList = groupElement.querySelector('.role-list');
console.log('Existing roleList:', roleList);
if (roleList) {
(roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
return;
const roleItems = roleList.querySelectorAll('.role-item');
roleItems.forEach(roleItem => {
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
let container = roleItem.querySelector('.role-item-container');
if (!container) {
container = document.createElement('div');
container.className = 'role-item-container';
// Créer un span pour le nom du rôle
const nameSpan = document.createElement('span');
nameSpan.className = 'role-name';
nameSpan.textContent = roleItem.textContent?.trim() || '';
container.appendChild(nameSpan);
roleItem.textContent = '';
roleItem.appendChild(container);
}
// Récupérer le nom du rôle
const roleName = roleItem.textContent?.trim();
console.log('Role name from textContent:', roleName);
// Alternative pour obtenir le nom du rôle
const roleNameAlt = container.querySelector('.role-name')?.textContent;
console.log('Role name from span:', roleNameAlt);
if (!container.querySelector('.folder-icon')) {
const folderButton = document.createElement('span');
folderButton.innerHTML = '📁';
folderButton.className = 'folder-icon';
folderButton.addEventListener('click', (event) => {
event.stopPropagation();
console.log('Clicked role name:', roleName);
console.log('Available roles:', group.roles.map(r => r.name));
const role = group.roles.find(r => r.name === roleName);
if (role) {
console.log('Found role:', role);
this.showRoleDocuments(role, group);
} else {
console.error('Role not found. Name:', roleName);
console.error('Available roles:', group.roles);
}
});
container.appendChild(folderButton);
}
});
(roleList as HTMLElement).style.display =
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
}
roleList = document.createElement('ul');
roleList.className = 'role-list';
group.roles.forEach(role => {
const roleItem = document.createElement('li');
roleItem.onclick = (event) => {
event.stopPropagation();
this.toggleMembers(role, roleItem);
};
roleList.appendChild(roleItem);
});
groupElement.appendChild(roleList);
}
private loadGroupList(): void {
const groupList = this.shadowRoot?.querySelector('#group-list');
const groupList = document.getElementById('group-list');
if (!groupList) return;
groupsMock.forEach(group => {
@ -767,21 +808,18 @@ class SignatureElement extends HTMLElement {
const nameSpan = document.createElement('span');
nameSpan.textContent = group.name;
nameSpan.className = 'process-name';
// Add click event to show roles
nameSpan.addEventListener('click', (event) => {
event.stopPropagation();
this.toggleRoles(group, li);
});
// Add the ⚙️ icon with a unique ID
// Add the ⚙️ icon
const settingsIcon = document.createElement('span');
settingsIcon.textContent = '⚙️';
settingsIcon.className = 'settings-icon';
settingsIcon.id = `settings-${group.id}`; // Unique ID based on the group ID
const detailsArea = document.createElement('div');
detailsArea.id = `process-details-${group.id}`;
detailsArea.className = 'process-details';
detailsArea.style.display = 'none';
settingsIcon.id = `settings-${group.id}`;
settingsIcon.onclick = (event) => {
event.stopPropagation();
@ -792,6 +830,25 @@ class SignatureElement extends HTMLElement {
container.appendChild(nameSpan);
container.appendChild(settingsIcon);
li.appendChild(container);
// Create and append the role list container
const roleList = document.createElement('ul');
roleList.className = 'role-list';
roleList.style.display = 'none';
// Add roles for this process
group.roles.forEach(role => {
const roleItem = document.createElement('li');
roleItem.className = 'role-item';
roleItem.textContent = role.name;
roleItem.onclick = (event) => {
event.stopPropagation();
this.toggleMembers(role, roleItem);
};
roleList.appendChild(roleItem);
});
li.appendChild(roleList);
groupList.appendChild(li);
});
}
@ -994,35 +1051,10 @@ class SignatureElement extends HTMLElement {
</div>
`).join('')}
</div>
</div>
${this.getFileList().length > 0 ? `
<div class="files-section">
<h4>Fichiers joints:</h4>
<div class="files-list">
${this.getFileList().map(file => `
<div class="file-item">
<span class="file-icon"></span>
<span class="file-name">${file.name}</span>
<a href="${file.url}" class="download-link" download="${file.name}">
<span class="download-icon">⬇</span>
</a>
</div>
`).join('')}
</div>
</div>
` : ''}
<div class="confirmation-section">
<p class="warning-text">By signing this document, you confirm that you have read its contents.</p>
<div class="signature-slider-container">
<div class="slider-track">
<div class="slider-handle" id="signatureSlider" draggable="true">
<span class="slider-arrow">➜</span>
</div>
<span class="slider-text">Drag to sign</span>
</div>
<div class="progress-bar">
<div class="progress" style="width: ${percentage}%;"></div>
</div>
<p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
</div>
` : `
<p>Blank document - Waiting for creation</p>
@ -1766,6 +1798,7 @@ class SignatureElement extends HTMLElement {
}
this.updateCurrentUserDisplay();
this.initializeEventListeners();
this.loadGroupList();
}
}

17
src/router.ts
View File

@ -73,13 +73,17 @@ async function handleLocation(path: string) {
initChat();
break;
case 'signature':
const container = document.querySelector('.container');
if (container) {
const signatureComponent = document.createElement('signature-component');
container.appendChild(signatureComponent);
case 'signature':
const { SignatureComponent } = await import('./pages/signature/signature-component');
const container = document.querySelector('.group-list');
if (container) {
if (!customElements.get('signature-component')) {
customElements.define('signature-component', SignatureComponent);
}
break;
const signatureComponent = document.createElement('signature-component');
container.appendChild(signatureComponent);
}
break;
}
}
}
@ -142,7 +146,6 @@ async function injectHeader() {
const headerHtml = await fetch('/src/components/header/header.html').then((res) => res.text());
headerContainer.innerHTML = headerHtml;
// Dynamically load the header JS
const script = document.createElement('script');
script.src = '/src/components/header/header.ts';
script.type = 'module';