From db07abaa8a77df499771ea8067c0e41722f4ae8d Mon Sep 17 00:00:00 2001 From: NicolasCantu Date: Fri, 28 Feb 2025 18:24:51 +0100 Subject: [PATCH] Fixed process highlighting + minor improvements --- src/pages/chat/chat.ts | 120 ++++++++++++++++++----------------------- 1 file changed, 53 insertions(+), 67 deletions(-) diff --git a/src/pages/chat/chat.ts b/src/pages/chat/chat.ts index 71ed8ec..d852717 100755 --- a/src/pages/chat/chat.ts +++ b/src/pages/chat/chat.ts @@ -34,7 +34,7 @@ class ChatElement extends HTMLElement { return ['process-id']; } - private processId: string | null = null; + private selectedChatProcessId: string | null = null; private processRoles: any | null = null; private selectedMember: string | null = null; private notifications: LocalNotification[] = []; @@ -48,7 +48,6 @@ class ChatElement extends HTMLElement { })); private messageState: number = 0; private selectedRole: string | null = null; - private userProcessSet: Set = new Set(); private dmMembersSet: Set = new Set(); private addressMap: Record = {}; private isLoading = false; @@ -127,7 +126,7 @@ class ChatElement extends HTMLElement { const { detail } = event; console.log('New data event received:', JSON.stringify(detail)); - if (detail.processId && detail.processId === this.processId) { + if (detail.processId && detail.processId === this.selectedChatProcessId) { console.log('Detected update to chat'); if (this.selectedMember) { await this.loadMemberChat(this.selectedMember); @@ -150,7 +149,6 @@ class ChatElement extends HTMLElement { } }); - // Initialiser les événements de notification document.addEventListener('click', (event: Event): void => { if (this.notificationBoard && this.notificationBoard.style.display === 'block' && @@ -174,8 +172,8 @@ class ChatElement extends HTMLElement { private initMessageEvents() { const sendButton = this.shadowRoot?.querySelector('#send-button'); if (sendButton) { - sendButton.addEventListener('click', () => { - this.sendMessage(); + sendButton.addEventListener('click', async () => { + await this.sendMessage(); setTimeout(async () => await this.reloadMemberChat(this.selectedMember), 600); messageInput.value = ''; }); @@ -292,7 +290,7 @@ class ChatElement extends HTMLElement { return; } - if (!this.processId) { + if (!this.selectedChatProcessId) { console.error('no process id set'); return; } @@ -325,8 +323,8 @@ class ChatElement extends HTMLElement { } }; - console.log("----this.processId",this.processId ); - const process = await service.getProcess(this.processId); + console.log("----this.selectedChatProcessId",this.selectedChatProcessId ); + const process = await service.getProcess(this.selectedChatProcessId); if (!process) { console.error('Failed to retrieve process from DB'); @@ -354,11 +352,11 @@ class ChatElement extends HTMLElement { console.log(`newStateId: ${newStateId}`); await service.handleApiReturn(apiReturn); - const createPrdReturn = service.createPrdUpdate(this.processId, newStateId); + const createPrdReturn = service.createPrdUpdate(this.selectedChatProcessId, newStateId); await service.handleApiReturn(createPrdReturn); // Now we validate the new state - const approveChangeReturn = service.approveChange(this.processId, newStateId); + const approveChangeReturn = service.approveChange(this.selectedChatProcessId, newStateId); await service.handleApiReturn(approveChangeReturn); await this.lookForMyDms(); @@ -397,11 +395,11 @@ class ChatElement extends HTMLElement { private async lookForChildren(): Promise { // Filter processes for the children of current process const service = await Services.getInstance(); - if (!this.processId) { + if (!this.selectedChatProcessId) { console.error('No process id'); return null; } - const children: string[] = await service.getChildrenOfProcess(this.processId); + const children: string[] = await service.getChildrenOfProcess(this.selectedChatProcessId); const processRoles = this.processRoles; const selectedMember = this.selectedMember; @@ -667,10 +665,8 @@ class ChatElement extends HTMLElement { console.log('Created a dm process', processId); this.processId = processId; const createPrdReturn = await service.createPrdUpdate(processId, stateId); - console.log(createPrdReturn); await service.handleApiReturn(createPrdReturn); const approveChangeReturn = service.approveChange(processId, stateId); - console.log(approveChangeReturn); await service.handleApiReturn(approveChangeReturn); }, 500); } catch (e) { @@ -684,7 +680,7 @@ class ChatElement extends HTMLElement { } } else { console.log('Found DM process', dmProcessId); - this.processId = dmProcessId; + this.selectedChatProcessId = dmProcessId; } /* TODO @@ -824,7 +820,7 @@ class ChatElement extends HTMLElement { chatHeader.textContent = `Chat with member (${emojis})`; }; - let dmProcessId = await this.processId; + let dmProcessId = await this.selectedChatProcessId; // Récupérer les messages depuis les états du processus const allMessages: any[] = []; @@ -1045,6 +1041,8 @@ class ChatElement extends HTMLElement { private async switchTab(tabType: string, tabs: NodeListOf) { + const service = await Services.getInstance(); + // Mettre à jour les classes des onglets tabs.forEach(tab => { tab.classList.toggle('active', tab.getAttribute('data-tab') === tabType); @@ -1064,7 +1062,7 @@ class ChatElement extends HTMLElement { // Charger le contenu approprié switch (tabType) { case 'processes': - const processSet = await this.getProcessesWhereTheCurrentMemberIs(); + const processSet = await service.getMyProcesses(); await this.loadAllProcesses(processSet); break; case 'members': @@ -1077,13 +1075,14 @@ class ChatElement extends HTMLElement { } //load all processes from the service - private async loadAllProcesses(processSet: Set) { + private async loadAllProcesses() { console.log('🎯 Loading all processes'); this.closeSignature(); - const allProcesses = await this.getProcesses(); - - // Afficher les processus dans le container #group-list + const service = await Services.getInstance(); + const allProcesses: Record = await service.getProcesses(); + const myProcesses: string[] = await service.getMyProcesses(); + const groupList = this.shadowRoot?.querySelector('#group-list'); if (!groupList) { console.warn('⚠️ Group list element not found'); @@ -1112,29 +1111,24 @@ class ChatElement extends HTMLElement { }); //trier les processus : ceux de l'utilisateur en premier - allProcesses.sort((a, b) => { - const aInSet = this.userProcessSet.has(a.value.states[0].commited_in); - const bInSet = this.userProcessSet.has(b.value.states[0].commited_in); - return bInSet ? 1 : aInSet ? -1 : 0; - }); + const sortedEntries = Object.entries(allProcesses).sort( + ([keyA], [keyB]) => { + const inSetA = myProcesses.includes(keyA); + const inSetB = myProcesses.includes(keyB); + return inSetB ? 1 : inSetA ? -1 : 0; + } + ); - for (const process of allProcesses) { + for (const [processId, process] of sortedEntries) { const li = document.createElement('li'); li.className = 'group-list-item'; - const oneProcess = process.value.states[0].commited_in; - let roles; - try { - //roles = await service.getRoles(process); - if (!roles) { - roles = await process.value.states[0]?.roles; - } - } catch (e) { - // console.error('Failed to get roles for process:', process); + const roles = await service.getRoles(process); + if (!roles) { + console.error('Failed to get roles for process:', process); continue; } - // Si le processus est dans notre Set, ajouter la classe my-process - if (this.userProcessSet && this.userProcessSet.has(oneProcess)) { + if (myProcesses && myProcesses.includes(processId)) { li.style.cssText = ` background-color: var(--accent-color); transition: background-color 0.3s ease; @@ -1146,18 +1140,18 @@ class ChatElement extends HTMLElement { li.onmouseout = () => { li.style.backgroundColor = 'var(--accent-color)'; }; - console.log("✅ Processus trouvé dans le set:", oneProcess); + console.log("✅ Processus trouvé dans le set:", processId); } - li.setAttribute('data-process-id', oneProcess); + li.setAttribute('data-process-id', processId); //----MANAGE THE CLICK ON PROCESS ---- li.onclick = async (event) => { event.stopPropagation(); - console.log("CLICKED ON PROCESS:", oneProcess); + console.log("CLICKED ON PROCESS:", processId); //viser le h1 de signature-header const signatureHeader = this.shadowRoot?.querySelector('.signature-header h1'); if (signatureHeader) { - const emoji = await addressToEmoji(oneProcess); + const emoji = await addressToEmoji(processId); signatureHeader.textContent = `Signature of ${emoji}`; } this.openSignature(); @@ -1166,7 +1160,7 @@ class ChatElement extends HTMLElement { console.log('🎯 Roles de signature:', roles); await this.loadAllRolesAndMembersInSignature(roles); //----MANAGE THE CLICK ON NEW REQUEST ---- - await this.newRequest(oneProcess); + await this.newRequest(processId); }; groupList.appendChild(li); @@ -1179,7 +1173,7 @@ class ChatElement extends HTMLElement { container.appendChild(nameSpan); - addressToEmoji(oneProcess).then(emojis => { + addressToEmoji(processId).then(emojis => { const emojiSpan = document.createElement('span'); emojiSpan.className = 'process-emoji'; emojiSpan.textContent = emojis; @@ -1464,7 +1458,6 @@ class ChatElement extends HTMLElement { } } - //Load tous les processus où le sp_adress est impliqué et renvoie un tableau d'adresses de processus private async getMyProcessId() { const service = await Services.getInstance(); return service.getPairingProcessId(); @@ -1820,36 +1813,29 @@ class ChatElement extends HTMLElement { } async connectedCallback() { - this.processId = this.getAttribute('process-id'); + const service = await Services.getInstance(); - if (this.processId) { - console.log("🔍 Chargement du chat avec processID"); - await this.loadGroupListFromAProcess(this.processId); - } else { + const loadPage = async () => { console.log("🔍 Chargement des processus par défaut"); - const processSet = await this.getProcessesWhereTheCurrentMemberIs(); - await this.loadAllProcesses(processSet); - } + await this.loadAllProcesses(); - if (this.selectedMember && this.selectedMember.length > 0 && !this.isLoading) { - console.log('🔍 Loading chat for selected member:', this.selectedMember); - await this.loadMemberChat(this.selectedMember); - } else { - console.warn('⚠️ No member selected yet. Waiting for selection...'); + if (this.selectedMember) { + console.log('🔍 Loading chat for selected member:', this.selectedMember); + await this.loadMemberChat(this.selectedMember); + } else { + console.warn('⚠️ No member selected yet. Waiting for selection...'); + } } let timeout: NodeJS.Timeout; window.addEventListener('process-updated', async (e: CustomEvent) => { const processId = e.detail.processId; - if (processId === this.processId) { - clearTimeout(timeout); - timeout = setTimeout(async () => { - if (!this.isLoading) { - await this.reloadMemberChat(this.selectedMember); - } - }, 3000); - } + console.log('Notified of an update for process', processId); + await loadPage(); }); + + + await loadPage(); } }