This commit is contained in:
Pascal 2025-01-06 18:29:33 +01:00
parent b9e11c4263
commit 7455b07fbc
2 changed files with 79 additions and 13 deletions

View File

@ -108,6 +108,11 @@ class ChatElement extends HTMLElement {
});
this.initMessageEvents();
this.initFileUpload();
document.addEventListener('newMessagingProcess', ((event: CustomEvent) => {
console.log('🎯 Received newMessagingProcess event:', event.detail);
this.addNewMessagingProcess(event.detail.processId, event.detail.processName);
}) as EventListener);
}
private initMessageEvents() {
@ -557,6 +562,56 @@ class ChatElement extends HTMLElement {
this.loadMemberChat(this.selectedMemberId);
}
}
private addNewMessagingProcess(processId: string, processName: string) {
console.log('🎯 Adding new messaging process:', { processId, processName });
const groupList = this.shadowRoot?.querySelector('#group-list');
if (!groupList) {
console.error('Group list not found in shadow DOM');
return;
}
// Vérifier si le processus existe déjà
const existingProcess = groupList.querySelector(`[data-process-id="${processId}"]`);
if (existingProcess) {
console.log('Process already exists:', processId);
return;
}
// Créer le nouveau groupe
const li = document.createElement('li');
li.className = 'group-list-item';
li.setAttribute('data-process-id', processId);
// Créer le conteneur flex
const container = document.createElement('div');
container.className = 'group-item-container';
// Span pour le nom du processus
const nameSpan = document.createElement('span');
nameSpan.textContent = processName;
nameSpan.className = 'process-name';
// Assembler les éléments
container.appendChild(nameSpan);
li.appendChild(container);
// Créer la liste des rôles
const roleList = document.createElement('ul');
roleList.className = 'role-list';
roleList.style.display = 'none';
// Ajouter un rôle par défaut pour le messaging
const roleItem = document.createElement('li');
roleItem.className = 'role-item';
roleItem.textContent = 'Messaging';
roleList.appendChild(roleItem);
li.appendChild(roleList);
groupList.appendChild(li);
console.log('🎯 New messaging process added successfully');
}
}
customElements.define('chat-element', ChatElement);

View File

@ -171,24 +171,26 @@ function clearAutocompleteList(select: HTMLSelectElement) {
// Populate the autocomplete list following a given query from the user
function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
const { autocomplete_options } = getOptions(select);
console.log('🚀 ~ populateAutocompleteList ~ autocomplete_options:', autocomplete_options);
let options_to_show;
if (dropdown) {
let messagingCounter = 1;
const messagingOptions = autocomplete_options.filter(option => option === 'messaging');
const messagingOptions = select.querySelectorAll('option[value="messaging"]');
options_to_show = autocomplete_options.map(option => {
if (option === 'messaging') {
const allMessagingOptions = select.querySelectorAll('option[value="messaging"]');
const currentMessagingOption = allMessagingOptions[messagingCounter - 1];
const processId = currentMessagingOption?.getAttribute('data-process-id');
const optionText = `messaging ${messagingCounter}`;
// Récupérer l'élément option correspondant au compteur actuel
const currentOption = messagingOptions[messagingCounter - 1];
const processId = currentOption?.getAttribute('data-process-id');
console.log(`Mapping messaging ${messagingCounter} with processId:`, processId);
// Stocker le processId avec son index spécifique
select.setAttribute(`data-messaging-id-${messagingCounter}`, processId || '');
const optionText = `messaging ${messagingCounter}`;
messagingCounter++;
// Stocker le processId dans un attribut data sur le select
select.setAttribute(`data-messaging-id-${messagingCounter - 1}`, processId || '');
return optionText;
}
return option;
@ -246,18 +248,27 @@ function selectOption(e: any) {
const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
console.log('🎯 Navigating to chat with process:', {
value: e.target.dataset.value,
processId: processId
console.log('🚀 Dispatching newMessagingProcess event:', {
processId,
processName: `Messaging Process ${processId}`
});
// Dispatch l'événement avant la navigation
document.dispatchEvent(new CustomEvent('newMessagingProcess', {
detail: {
processId: processId,
processName: `Messaging Process ${processId}`
}
}));
const event = new CustomEvent('navigate', {
// Navigation vers le chat
const navigateEvent = new CustomEvent('navigate', {
detail: {
page: 'chat',
processId: processId || ''
}
});
document.dispatchEvent(event);
document.dispatchEvent(navigateEvent);
return;
}
option.setAttribute('selected', '');