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

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

@ -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,77 +1109,84 @@ 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;
`;
li.onmouseover = () => {
li.addEventListener('mouseover', () => {
li.style.backgroundColor = 'var(--accent-color-hover)';
};
li.onmouseout = () => {
});
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);
});
// 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.textContent = `Process : `;
nameSpan.className = 'process-name';
nameSpan.textContent = displayName;
container.appendChild(nameSpan);
addressToEmoji(processId).then(emojis => {
const emojiSpan = document.createElement('span');
emojiSpan.className = 'process-emoji';
emojiSpan.textContent = emojis;
container.appendChild(emojiSpan);
});
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';
@ -1189,24 +1197,25 @@ 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<string, any>();
roleData.members?.forEach((member: any) => {
// 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();
console.log("CLICKED ON ROLE:", roleName);
await this.toggleMembers(filteredRoleData, roleItem);
});
@ -1216,14 +1225,18 @@ class ChatElement extends HTMLElement {
});
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();
}
}