4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed process highlighting + minor improvements

Browse Source
This commit is contained in:
NicolasCantu 2025-02-28 18:24:51 +01:00
parent a1aec7cec3
commit db07abaa8a
1 changed files with 53 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/chat/chat.ts
View File

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