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

Refactor loadProcesses, display process name

Browse Source
This commit is contained in:
NicolasCantu 2025-03-03 17:19:09 +01:00
parent 6e57225529
commit d243b58101
1 changed files with 72 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,7 @@ import Database from '../../services/database.service';
import Services from '../../services/service'; import Services from '../../services/service';
const storageUrl = `/storage`; const storageUrl = `/storage`;
const defaultProcessName = 'Unnamed Process';
interface LocalNotification { interface LocalNotification {
memberId: string; memberId: string;
@ -1108,80 +1109,87 @@ class ChatElement extends HTMLElement {
); );
for (const [processId, process] of sortedEntries) { for (const [processId, process] of sortedEntries) {
// Create and configure the main list item.
const li = document.createElement('li'); const li = document.createElement('li');
li.className = 'group-list-item'; 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) { if (!roles) {
console.error('Failed to get roles for process:', process); console.error('Failed to get roles for process:', process);
continue; 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)) { if (myProcesses && myProcesses.includes(processId)) {
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;
cursor: pointer; cursor: pointer;
`; `;
li.onmouseover = () => { li.addEventListener('mouseover', () => {
li.style.backgroundColor = 'var(--accent-color-hover)'; li.style.backgroundColor = 'var(--accent-color-hover)';
}; });
li.onmouseout = () => { li.addEventListener('mouseout', () => {
li.style.backgroundColor = 'var(--accent-color)'; li.style.backgroundColor = 'var(--accent-color)';
}; });
console.log("✅ Processus trouvé dans le set:", processId); console.log("✅ Processus trouvé dans le set:", processId);
} }
li.setAttribute('data-process-id', processId); // Attach a click handler for the process.
//----MANAGE THE CLICK ON PROCESS ---- li.addEventListener('click', async (event) => {
li.onclick = async (event) => {
event.stopPropagation(); event.stopPropagation();
console.log("CLICKED ON PROCESS:", processId); 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'); const signatureHeader = this.shadowRoot?.querySelector('.signature-header h1');
if (signatureHeader) { if (signatureHeader) {
const emoji = await addressToEmoji(processId); if (processName) {
signatureHeader.textContent = `Signature of ${emoji}`; 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); console.log('🎯 Roles de signature:', roles);
await this.loadAllRolesAndMembersInSignature(roles); await this.loadAllRolesAndMembersInSignature(roles);
//----MANAGE THE CLICK ON NEW REQUEST ----
await this.newRequest(processId); 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); li.appendChild(container);
// afficher les roles dans chaque processus // Create a hidden list for roles.
//console.log('🎯 Roles:', roles);
const roleList = document.createElement('ul'); const roleList = document.createElement('ul');
roleList.className = 'role-list'; roleList.className = 'role-list';
(roleList as HTMLElement).style.display = 'none'; roleList.style.display = 'none';
// Traiter chaque rôle // Process each role and create role items.
Object.entries(roles).forEach(([roleName, roleData]: [string, any]) => { Object.entries(roles).forEach(([roleName, roleData]) => {
const roleItem = document.createElement('li'); const roleItem = document.createElement('li');
roleItem.className = 'role-item'; roleItem.className = 'role-item';
const roleContainer = document.createElement('div'); const roleContainer = document.createElement('div');
roleContainer.className = 'role-item-container'; roleContainer.className = 'role-item-container';
@ -1189,41 +1197,46 @@ class ChatElement extends HTMLElement {
roleNameSpan.className = 'role-name'; roleNameSpan.className = 'role-name';
roleNameSpan.textContent = roleName; roleNameSpan.textContent = roleName;
// Filtrer les membres dupliqués ici, avant de les passer à toggleMembers // Filter duplicate members by using the first sp_address as a key.
const uniqueMembers = new Map<string, any>(); const uniqueMembers = new Map();
roleData.members?.forEach((member: any) => { roleData.members?.forEach(member => {
const spAddress = member.sp_addresses?.[0]; const spAddress = member.sp_addresses?.[0];
if (spAddress && !uniqueMembers.has(spAddress)) { if (spAddress && !uniqueMembers.has(spAddress)) {
uniqueMembers.set(spAddress, member); uniqueMembers.set(spAddress, member);
} }
}); });
// Créer un nouveau roleData avec les membres uniques // Create a new roleData object with unique members.
const filteredRoleData = { const filteredRoleData = {
...roleData, ...roleData,
members: Array.from(uniqueMembers.values()) members: Array.from(uniqueMembers.values()),
}; };
// Attach a click handler for the role.
roleContainer.addEventListener('click', async (event) => { roleContainer.addEventListener('click', async (event) => {
console.log("CLICKED ON ROLE:", roleName); event.stopPropagation();
event.stopPropagation(); console.log("CLICKED ON ROLE:", roleName);
await this.toggleMembers(filteredRoleData, roleItem); await this.toggleMembers(filteredRoleData, roleItem);
}); });
roleContainer.appendChild(roleNameSpan); roleContainer.appendChild(roleNameSpan);
roleItem.appendChild(roleContainer); roleItem.appendChild(roleContainer);
roleList.appendChild(roleItem); roleList.appendChild(roleItem);
}); });
li.appendChild(roleList); li.appendChild(roleList);
groupList.appendChild(li);
// Toggle role list display when the container is clicked.
container.addEventListener('click', (event) => { container.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
container.classList.toggle('expanded'); container.classList.toggle('expanded');
roleList.style.display = container.classList.contains('expanded') ? 'block' : 'none'; roleList.style.display = container.classList.contains('expanded') ? 'block' : 'none';
}); });
}
// Append the completed process list item once.
groupList.appendChild(li);
}
} }
private async newRequest(processId: string) { private async newRequest(processId: string) {
@ -1702,7 +1715,6 @@ class ChatElement extends HTMLElement {
await loadPage(); await loadPage();
}); });
await loadPage(); await loadPage();
} }
} }