diff --git a/public/style/chat.css b/public/style/chat.css index 9dde67a..f0eb59b 100755 --- a/public/style/chat.css +++ b/public/style/chat.css @@ -455,6 +455,43 @@ body { color: var(--primary-color); } + /* REQUEST MODAL */ + .request-modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background: var(--background-color); + padding: 20px; + border-radius: 8px; + position: relative; + min-width: 300px; +} + +.close-modal { + position: absolute; + top: 10px; + right: 10px; + border: none; + background: none; + font-size: 1.5em; + cursor: pointer; + font-weight: bold; +} + +.close-modal:hover { + color: var(--accent-color); +} + #message-input { width: 100%; height: 50px; diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts index 2bc270e..3463ae1 100755 --- a/src/pages/chat/chat.ts +++ b/src/pages/chat/chat.ts @@ -1035,6 +1035,7 @@ class ChatElement extends HTMLElement { } li.setAttribute('data-process-id', oneProcess); + //----MANAGE THE CLICK ON PROCESS ---- li.onclick = async (event) => { event.stopPropagation(); console.log("CLICKED ON PROCESS:", oneProcess); @@ -1049,6 +1050,8 @@ class ChatElement extends HTMLElement { //afficher les roles dans chaque processus console.log('🎯 Roles de signature:', roles); await this.loadAllRolesAndMembersInSignature(roles); + //----MANAGE THE CLICK ON NEW REQUEST ---- + await this.newRequest(oneProcess); }; groupList.appendChild(li); @@ -1136,46 +1139,112 @@ class ChatElement extends HTMLElement { }); } + private async newRequest(processId: string) { + console.log("CLICKED ON NEW REQUEST:", processId); + const emoji = await addressToEmoji(processId); + const members = await this.getMembersFromProcess(processId); + console.log("Je suis les membres :", members); + const newRequestButton = this.shadowRoot?.querySelector('#request-document-button'); + if (newRequestButton) { + newRequestButton.replaceWith(newRequestButton.cloneNode(true)); + const freshButton = this.shadowRoot?.querySelector('#request-document-button'); + freshButton?.addEventListener('click', () => { + + const modal = document.createElement('div'); + modal.className = 'request-modal'; + modal.innerHTML = ` + + `; + + this.shadowRoot?.appendChild(modal); + + const closeButton = modal.querySelector('.close-modal'); + closeButton?.addEventListener('click', () => { + modal.remove(); + }); + }); + } + } + + + //Send a set of members from a process + private async getMembersFromProcess(processId: string) { + const service = await Services.getInstance(); + const process = await service.getProcess(processId); + console.log("Process récupéré:", process); + + // Récupérer les rôles directement depuis le dernier état + const roles = process.states[0].encrypted_pcd.roles; + console.log("Roles trouvés:", roles); + + if (!roles) return []; + type RoleData = { + members?: { sp_addresses?: string[] }[]; + }; + const uniqueMembers = new Set(); + Object.values(roles as unknown as Record).forEach((roleData: RoleData) => { + roleData.members?.forEach((member) => { + if (member.sp_addresses && member.sp_addresses[0]) { + uniqueMembers.add(member.sp_addresses[0]); + } + }); + }); + return Array.from(uniqueMembers); + } + private async loadAllRolesAndMembersInSignature(roles: any) { console.log('🎯 Roles:', roles); const signatureDescription = this.shadowRoot?.querySelector('.signature-description'); - if (signatureDescription) { - signatureDescription.innerHTML = ''; - Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => { - const roleItem = document.createElement('li'); - roleItem.className = 'role-signature'; + if (signatureDescription) { + signatureDescription.innerHTML = ''; + Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => { + const roleItem = document.createElement('li'); + roleItem.className = 'role-signature'; - const roleContainer = document.createElement('div'); - roleContainer.className = 'role-signature-container'; - - const roleNameSpan = document.createElement('span'); - roleNameSpan.className = 'role-signature-name'; - roleNameSpan.textContent = roleName; - - const uniqueMembers = new Map(); - roleData.members?.forEach((member: any) => { - const spAddress = member.sp_addresses?.[0]; - if (spAddress && !uniqueMembers.has(spAddress)) { - uniqueMembers.set(spAddress, member); - } - }); - - const filteredRoleData = { - ...roleData, - members: Array.from(uniqueMembers.values()) - }; - - roleContainer.addEventListener('click', async (event) => { - console.log("CLICKED ON ROLE:", roleName); - event.stopPropagation(); - await this.toggleMembers(filteredRoleData, roleItem); - }); - - roleContainer.appendChild(roleNameSpan); - roleItem.appendChild(roleContainer); - signatureDescription.appendChild(roleItem); - }); - } + const roleContainer = document.createElement('div'); + roleContainer.className = 'role-signature-container'; + + const roleNameSpan = document.createElement('span'); + roleNameSpan.className = 'role-signature-name'; + roleNameSpan.textContent = roleName; + + const uniqueMembers = new Map(); + roleData.members?.forEach((member: any) => { + const spAddress = member.sp_addresses?.[0]; + if (spAddress && !uniqueMembers.has(spAddress)) { + uniqueMembers.set(spAddress, member); + } + }); + + const filteredRoleData = { + ...roleData, + members: Array.from(uniqueMembers.values()) + }; + + roleContainer.addEventListener('click', async (event) => { + console.log("CLICKED ON ROLE:", roleName); + event.stopPropagation(); + await this.toggleMembers(filteredRoleData, roleItem); + }); + + roleContainer.appendChild(roleNameSpan); + roleItem.appendChild(roleContainer); + signatureDescription.appendChild(roleItem); + }); + } } //fonction qui ferme la signature