Update process list udpate

src/pages/process/process.ts

@@ -2,9 +2,15 @@ import { addSubscription } from '../../utils/subscription.utils';
 import Services from '../../services/service';
 import { getCorrectDOM } from '~/utils/html.utils';
 import { Process } from 'pkg/sdk_client';
+import chatStyle from '../../../public/style/chat.css?inline';
+import { Database } from '../../services/database.service';
+
+let myProcesses = new Set();
+let allProcesses = new Set();
 
 // Initialize function, create initial tokens with itens that are already selected by the user
 export async function init() {
+  
   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
   const element = container.querySelector('select') as HTMLSelectElement;
   // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
@@ -43,6 +49,16 @@ export async function init() {
   wrapper.appendChild(search_div);
 
   addPlaceholder(wrapper);
+
+  await loadAllProcesses();
+  
+  const database = await Database.getInstance();
+
+  try {
+    await database.updateMyProcesses({ myProcessesId: Array.from(myProcesses) });
+  } catch (error) {
+    console.error("Error updating my processes:", error);
+  }
 }
 
 function removePlaceholder(wrapper: HTMLElement) {
@@ -155,62 +171,39 @@ function clearAutocompleteList(select: HTMLSelectElement) {
   if (autocomplete_list) autocomplete_list.innerHTML = '';
 }
 
-// Populate the autocomplete list following a given query from the user
+async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
-function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
   const { autocomplete_options } = getOptions(select);
 
-  let options_to_show;
+  let options_to_show = [];
 
-  if (dropdown) {
+  console.log(myProcesses);
-    let messagingCounter = 1;
-    const messagingOptions = select.querySelectorAll('option[value="messaging"]');
 
-    options_to_show = autocomplete_options.map(option => {
+  const mineArray = Array.from(myProcesses);
-      if (option === 'messaging') {
+  const allArray = Array.from(allProcesses).filter(id => !myProcesses.has(id));
-        // 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);
-        
-        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;
-    });
-  } else {
-    options_to_show = autocomplete(query, autocomplete_options);
-  }
 
   const wrapper = select.parentNode;
   const input_search = wrapper?.querySelector('.search-container');
   const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
   if (autocomplete_list) autocomplete_list.innerHTML = '';
-  const result_size = options_to_show.length;
 
-  if (result_size == 1) {
+  const addProcessToList = (processId:string, isMine: boolean) => {
     const li = document.createElement('li');
-    li.innerText = options_to_show[0];
+    li.innerText = processId;
-    li.setAttribute('data-value', options_to_show[0]);
+    li.setAttribute("data-value", processId);
+
+    if (isMine) {
+      li.classList.add("my-process");
+      li.style.cssText = `color: var(--accent-color)`;
+    }
+
     if (li) addSubscription(li, 'click', selectOption);
     autocomplete_list?.appendChild(li);
-    if (query.length == options_to_show[0].length) {
+  };
-      const event = new Event('click');
+
-      li.dispatchEvent(event);
+  mineArray.forEach(processId => addProcessToList(processId, true));
-    }
+  allArray.forEach(processId => addProcessToList(processId, false));
-  } else if (result_size > 1) {
+  
-    for (let i = 0; i < result_size; i++) {
+  if (myProcesses.size === 0 && allProcesses.size === 0) {
-      const li = document.createElement('li');
-      li.innerText = options_to_show[i];
-      li.setAttribute('data-value', options_to_show[i]);
-      if (li) addSubscription(li, 'click', selectOption);
-      autocomplete_list?.appendChild(li);
-    }
-  } else {
     const li = document.createElement('li');
     li.classList.add('not-cursor');
     li.innerText = 'No options found';
@@ -392,6 +385,20 @@ addSubscription(document, 'click', () => {
   }
 });
 
+async function loadAllProcesses() {
+  try {
+    const [allProcessesNew, myProcessesNew] = await Promise.all([
+      getProcesses(),
+      getMyProcesses()
+    ]);
+
+    myProcesses = myProcesses.union(myProcessesNew);
+    allProcesses = allProcesses.union(allProcessesNew);
+  } catch (error) {
+    console.error("Error loading processes:", error);
+  }
+}
+
 async function showSelectedProcess(elem: MouseEvent) {
   const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
 
@@ -539,43 +546,36 @@ async function getDescription(processId: string, process: Process): Promise<stri
   return null;
 }
 
-async function getProcesses(): Promise<any[]> {
+async function getProcesses(): Promise<Set<string>> {
   const service = await Services.getInstance();
   const processes = await service.getProcesses();
+  const processIds = new Set<string>(Object.keys(processes));
 
-  const res = Object.entries(processes).map(([key, value]) => ({
+  return processIds;
-    key,
-    value,
-  }));
-
-  return res;
 }
 
-async function getMyProcesses() {
+async function getMyProcesses(): Promise<Set<string>> {
   const service = await Services.getInstance();
   try {
     const processes = await service.getProcesses();
-    const userProcessSet = new Set();             
+    const userProcessSet = new Set<string>();
 
     for (const [processId, process] of Object.entries(processes)) {
       let roles;
       try {
-        roles = await this.getRoles(process);
+        roles = await service.getRoles(process);
         if (!roles) {
           roles = await process.states[0].encrypted_pcd.roles;
         }
+        console.log("ROLES: ", roles);
 
-        const hasCurrentUser = Object.values(roles).some(role => 
+        const hasCurrentUser = service.rolesContainsUs(roles);
-          service.rolesContainsUs(role)
-        );
 
         if (hasCurrentUser) {
           userProcessSet.add(processId);
         }
-        
       } catch (e) {
         continue;
-        console.error(`Error processing process ${processId}:`, e);
       }
     }