From d243b58101589efe23df478eac38580e09110623 Mon Sep 17 00:00:00 2001 From: NicolasCantu Date: Mon, 3 Mar 2025 17:19:09 +0100 Subject: [PATCH] Refactor loadProcesses, display process name --- src/pages/chat/chat.ts | 132 ++++++++++++++++++++++------------------- 1 file changed, 72 insertions(+), 60 deletions(-) diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts index 2d4f612..80c528c 100755 --- a/src/pages/chat/chat.ts +++ b/src/pages/chat/chat.ts @@ -13,6 +13,7 @@ import Database from '../../services/database.service'; import Services from '../../services/service'; const storageUrl = `/storage`; +const defaultProcessName = 'Unnamed Process'; interface LocalNotification { memberId: string; @@ -1108,80 +1109,87 @@ class ChatElement extends HTMLElement { ); for (const [processId, process] of sortedEntries) { + // Create and configure the main list item. const li = document.createElement('li'); li.className = 'group-list-item'; - const roles = await service.getRoles(process); + li.setAttribute('data-process-id', processId); + + // Retrieve roles for the current process. + const roles = service.getRoles(process); if (!roles) { console.error('Failed to get roles for process:', process); continue; } + const processName = service.getProcessName(process); + const emoji = await addressToEmoji(processId); + + let displayName; + if (processName) { + displayName = `${processName} (${emoji})`; + } else { + displayName = `${defaultProcessName} (${emoji})`; + } + + // If the process is part of myProcesses, apply special styling. if (myProcesses && myProcesses.includes(processId)) { li.style.cssText = ` - background-color: var(--accent-color); - transition: background-color 0.3s ease; - cursor: pointer; + background-color: var(--accent-color); + transition: background-color 0.3s ease; + cursor: pointer; `; - li.onmouseover = () => { - li.style.backgroundColor = 'var(--accent-color-hover)'; - }; - li.onmouseout = () => { - li.style.backgroundColor = 'var(--accent-color)'; - }; + li.addEventListener('mouseover', () => { + li.style.backgroundColor = 'var(--accent-color-hover)'; + }); + li.addEventListener('mouseout', () => { + li.style.backgroundColor = 'var(--accent-color)'; + }); console.log("✅ Processus trouvé dans le set:", processId); } - li.setAttribute('data-process-id', processId); - //----MANAGE THE CLICK ON PROCESS ---- - li.onclick = async (event) => { + // Attach a click handler for the process. + li.addEventListener('click', async (event) => { event.stopPropagation(); console.log("CLICKED ON PROCESS:", processId); - //viser le h1 de signature-header + + // Update the signature header with the corresponding emoji. const signatureHeader = this.shadowRoot?.querySelector('.signature-header h1'); if (signatureHeader) { - const emoji = await addressToEmoji(processId); - signatureHeader.textContent = `Signature of ${emoji}`; + if (processName) { + signatureHeader.textContent = `Signature of ${displayName}`; + } else { + signatureHeader.textContent = `Signature of ${displayName}`; + } } - this.openSignature(); - //afficher les roles dans chaque processus + this.openSignature(); console.log('🎯 Roles de signature:', roles); await this.loadAllRolesAndMembersInSignature(roles); - //----MANAGE THE CLICK ON NEW REQUEST ---- await this.newRequest(processId); - }; - groupList.appendChild(li); - - const container = document.createElement('div'); - container.className = 'group-item-container'; - - const nameSpan = document.createElement('span'); - nameSpan.textContent = `Process : `; - nameSpan.className = 'process-name'; - - container.appendChild(nameSpan); - - addressToEmoji(processId).then(emojis => { - const emojiSpan = document.createElement('span'); - emojiSpan.className = 'process-emoji'; - emojiSpan.textContent = emojis; - container.appendChild(emojiSpan); }); + // Create the container for the process name and emoji. + const container = document.createElement('div'); + container.className = 'group-item-container'; + + // Create and set the process name element. + const nameSpan = document.createElement('span'); + nameSpan.className = 'process-name'; + nameSpan.textContent = displayName; + container.appendChild(nameSpan); + li.appendChild(container); - // afficher les roles dans chaque processus - - //console.log('🎯 Roles:', roles); + // Create a hidden list for roles. const roleList = document.createElement('ul'); roleList.className = 'role-list'; - (roleList as HTMLElement).style.display = 'none'; + roleList.style.display = 'none'; - // Traiter chaque rôle - Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => { + // Process each role and create role items. + Object.entries(roles).forEach(([roleName, roleData]) => { const roleItem = document.createElement('li'); roleItem.className = 'role-item'; - + const roleContainer = document.createElement('div'); roleContainer.className = 'role-item-container'; @@ -1189,41 +1197,46 @@ class ChatElement extends HTMLElement { roleNameSpan.className = 'role-name'; roleNameSpan.textContent = roleName; - // Filtrer les membres dupliqués ici, avant de les passer à toggleMembers - const uniqueMembers = new Map(); - roleData.members?.forEach((member: any) => { - const spAddress = member.sp_addresses?.[0]; - if (spAddress && !uniqueMembers.has(spAddress)) { - uniqueMembers.set(spAddress, member); - } + // Filter duplicate members by using the first sp_address as a key. + const uniqueMembers = new Map(); + roleData.members?.forEach(member => { + const spAddress = member.sp_addresses?.[0]; + if (spAddress && !uniqueMembers.has(spAddress)) { + uniqueMembers.set(spAddress, member); + } }); - - // Créer un nouveau roleData avec les membres uniques + + // Create a new roleData object with unique members. const filteredRoleData = { ...roleData, - members: Array.from(uniqueMembers.values()) + members: Array.from(uniqueMembers.values()), }; + // Attach a click handler for the role. roleContainer.addEventListener('click', async (event) => { - console.log("CLICKED ON ROLE:", roleName); - event.stopPropagation(); - await this.toggleMembers(filteredRoleData, roleItem); + event.stopPropagation(); + console.log("CLICKED ON ROLE:", roleName); + await this.toggleMembers(filteredRoleData, roleItem); }); - + roleContainer.appendChild(roleNameSpan); roleItem.appendChild(roleContainer); roleList.appendChild(roleItem); }); li.appendChild(roleList); - groupList.appendChild(li); + // Toggle role list display when the container is clicked. container.addEventListener('click', (event) => { event.stopPropagation(); container.classList.toggle('expanded'); roleList.style.display = container.classList.contains('expanded') ? 'block' : 'none'; }); - } + + // Append the completed process list item once. + groupList.appendChild(li); + } + } private async newRequest(processId: string) { @@ -1702,7 +1715,6 @@ class ChatElement extends HTMLElement { await loadPage(); }); - await loadPage(); } }