signature_ok_message_ko

src/main.ts

@@ -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;

src/pages/signature/signature-component.ts

@@ -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() {

src/pages/signature/signature.html

@@ -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>
 

src/pages/signature/signature.ts

@@ -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) {
+    private closeProcessDetails(groupId: number) {
-            const detailsArea = document.getElementById(`process-details-${groupId}`);
+        const detailsArea = document.getElementById(`process-details-${groupId}`);
-            const chatArea = document.getElementById('chat-area');
+        const chatArea = document.getElementById('chat-area');
         
-            if (detailsArea) {
+        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';
+            const roleItems = roleList.querySelectorAll('.role-item');
-            return;
+            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
+            settingsIcon.id = `settings-${group.id}`;
-            
-            const detailsArea = document.createElement('div');
-            detailsArea.id = `process-details-${group.id}`;
-            detailsArea.className = 'process-details';
-            detailsArea.style.display = 'none';
             
             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>
+                                                    <div class="progress-bar">
-
+                                                        <div class="progress" style="width: ${percentage}%;"></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>
+                                                    <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();
     }
 }
 

src/router.ts

@@ -73,13 +73,17 @@ async function handleLocation(path: string) {
       initChat();
       break;
 
-      case 'signature':
+    case 'signature':
-        const container = document.querySelector('.container');
+      const { SignatureComponent } = await import('./pages/signature/signature-component');
-        if (container) {
+      const container = document.querySelector('.group-list');
-            const signatureComponent = document.createElement('signature-component');
+      if (container) {
-            container.appendChild(signatureComponent);
+        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';