diff --git a/src/main.ts b/src/main.ts index ec7d339..0768d99 100644 --- a/src/main.ts +++ b/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; diff --git a/src/pages/signature/signature-component.ts b/src/pages/signature/signature-component.ts index 8bed95d..91c6a6a 100644 --- a/src/pages/signature/signature-component.ts +++ b/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() { diff --git a/src/pages/signature/signature.html b/src/pages/signature/signature.html index 4b1f64b..1ea2b78 100755 --- a/src/pages/signature/signature.html +++ b/src/pages/signature/signature.html @@ -12,10 +12,10 @@
+
diff --git a/src/pages/signature/signature.ts b/src/pages/signature/signature.ts index cebe894..d40fe0d 100755 --- a/src/pages/signature/signature.ts +++ b/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) { - 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 {
`).join('')} - - - ${this.getFileList().length > 0 ? ` -
-

Fichiers joints:

-
- ${this.getFileList().map(file => ` -
- - ${file.name} - - ⬇ - -
- `).join('')} -
-
- ` : ''} - -
-

By signing this document, you confirm that you have read its contents.

-
-
-
- ➜ -
- Drag to sign -
+
+
+

${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)

` : `

Blank document - Waiting for creation

@@ -1766,6 +1798,7 @@ class SignatureElement extends HTMLElement { } this.updateCurrentUserDisplay(); this.initializeEventListeners(); + this.loadGroupList(); } } diff --git a/src/router.ts b/src/router.ts index 1734f50..4d7441f 100755 --- a/src/router.ts +++ b/src/router.ts @@ -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';