Updated the process and process-element page
This commit is contained in:
parent
465a4a3c18
commit
614569f5aa
@ -1,12 +1,12 @@
|
|||||||
import processHtml from './process-element.html?raw';
|
// src/pages/process-element/process-component.ts
|
||||||
import processScript from './process-element.ts?raw';
|
|
||||||
import processCss from '../../4nk.css?raw';
|
|
||||||
import { initProcessElement } from './process-element';
|
|
||||||
|
|
||||||
export class ProcessListComponent extends HTMLElement {
|
import processHtml from './process-element.html?raw';
|
||||||
|
import processCss from '../../4nk.css?raw';
|
||||||
|
import { initProcessElement } from './process-element'; // On importe la vraie fonction
|
||||||
|
|
||||||
|
// 1. Nom de classe corrigé (plus logique)
|
||||||
|
export class ProcessElementComponent extends HTMLElement {
|
||||||
_callback: any;
|
_callback: any;
|
||||||
id: string = '';
|
|
||||||
zone: string = '';
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@ -14,38 +14,61 @@ export class ProcessListComponent extends HTMLElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
console.log('CALLBACK PROCESS LIST PAGE');
|
console.log('[ProcessElementComponent] 1. Composant connecté.');
|
||||||
this.render();
|
|
||||||
setTimeout(() => {
|
// 2. Lire les attributs passés par le routeur (router.ts)
|
||||||
initProcessElement(this.id, this.zone);
|
const processId = this.getAttribute('process-id');
|
||||||
}, 500);
|
const stateId = this.getAttribute('state-id');
|
||||||
}
|
|
||||||
|
|
||||||
set callback(fn) {
|
if (!processId || !stateId) {
|
||||||
if (typeof fn === 'function') {
|
console.error("💥 ProcessElementComponent a été créé sans 'process-id' ou 'state-id'.");
|
||||||
this._callback = fn;
|
this.renderError("Erreur: ID de processus ou d'état manquant.");
|
||||||
} else {
|
return;
|
||||||
console.error('Callback is not a function');
|
}
|
||||||
|
|
||||||
|
// 3. Afficher le HTML/CSS du squelette
|
||||||
|
this.render();
|
||||||
|
|
||||||
|
// 4. Appeler la logique (init) en lui passant le shadowRoot et les IDs
|
||||||
|
try {
|
||||||
|
if (this.shadowRoot) {
|
||||||
|
console.log(`[ProcessElementComponent] 2. Appel de initProcessElement pour ${processId}_${stateId}`);
|
||||||
|
initProcessElement(this.shadowRoot, processId, stateId);
|
||||||
|
} else {
|
||||||
|
console.error("[ProcessElementComponent] 💥 ShadowRoot est nul.");
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[ProcessElementComponent] 💥 Échec de l'initProcessElement():", e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
get callback() {
|
|
||||||
return this._callback;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.shadowRoot)
|
if (this.shadowRoot) {
|
||||||
this.shadowRoot.innerHTML = `
|
this.shadowRoot.innerHTML = `
|
||||||
<style>
|
<style>${processCss}</style>
|
||||||
${processCss}
|
${processHtml}
|
||||||
</style>${processHtml}
|
|
||||||
<script type="module">
|
|
||||||
${processScript}
|
|
||||||
</scipt>
|
|
||||||
`;
|
`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderError(message: string) {
|
||||||
|
if (this.shadowRoot) {
|
||||||
|
this.shadowRoot.innerHTML = `<style>${processCss}</style>
|
||||||
|
<div class="title-container"><h1>Erreur</h1></div>
|
||||||
|
<div class="process-container"><p>${message}</p></div>`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ... (Tes callbacks) ...
|
||||||
|
set callback(fn) {
|
||||||
|
if (typeof fn === 'function') { this._callback = fn; }
|
||||||
|
else { console.error('Callback is not a function'); }
|
||||||
|
}
|
||||||
|
get callback() { return this._callback; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 6. Utilisation du bon nom de classe
|
||||||
if (!customElements.get('process-4nk-component')) {
|
if (!customElements.get('process-4nk-component')) {
|
||||||
customElements.define('process-4nk-component', ProcessListComponent);
|
console.log('[ProcessElementComponent] Définition de <process-4nk-component>.');
|
||||||
}
|
customElements.define('process-4nk-component', ProcessElementComponent);
|
||||||
|
}
|
||||||
@ -1,50 +1,111 @@
|
|||||||
|
// src/pages/process-element/process-element.ts
|
||||||
|
|
||||||
import { interpolate } from '../../utils/html.utils';
|
import { interpolate } from '../../utils/html.utils';
|
||||||
import Services from '../../services/service';
|
import Services from '../../services/service';
|
||||||
import { Process } from 'pkg/sdk_client';
|
import { Process, ProcessState } from 'pkg/sdk_client';
|
||||||
import { getCorrectDOM } from '~/utils/document.utils';
|
// 1. Plus besoin de 'getCorrectDOM'
|
||||||
|
|
||||||
let currentPageStyle: HTMLStyleElement | null = null;
|
/**
|
||||||
|
* Fonction d'initialisation, appelée par process-component.ts
|
||||||
|
* Reçoit le shadowRoot et les IDs.
|
||||||
|
*/
|
||||||
|
export async function initProcessElement(container: ShadowRoot, processId: string, stateId: string) {
|
||||||
|
console.log(`[process-element.ts] 3. init() appelé pour ${processId}_${stateId}`);
|
||||||
|
|
||||||
|
const services = await Services.getInstance();
|
||||||
|
|
||||||
export async function initProcessElement(id: string, zone: string) {
|
// 2. Récupérer les éléments du DOM *dans* le shadowRoot (container)
|
||||||
const processes = await getProcesses();
|
const titleH1 = container.querySelector('h1');
|
||||||
const container = getCorrectDOM('process-4nk-component');
|
const processContainer = container.querySelector('.process-container');
|
||||||
// const currentProcess = processes.find((process) => process[0] === id)[1];
|
|
||||||
// const currentProcess = {title: 'Hello', html: '', css: ''};
|
if (!titleH1 || !processContainer) {
|
||||||
// await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
|
console.error("[process-element.ts] 💥 Le HTML de base (h1 ou .process-container) est introuvable !");
|
||||||
// const wrapper = document.querySelector('.process-container');
|
return;
|
||||||
// if (wrapper) {
|
}
|
||||||
// wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
|
|
||||||
// injectCss(currentProcess.css);
|
// 3. Récupérer les données
|
||||||
// }
|
const process = await services.getProcess(processId);
|
||||||
|
if (!process) {
|
||||||
|
console.error(`[process-element.ts] 💥 Processus ${processId} non trouvé !`);
|
||||||
|
titleH1.innerText = "Erreur";
|
||||||
|
processContainer.innerHTML = `<p>Le processus ${processId} n'a pas pu être chargé.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const state = services.getStateFromId(process, stateId);
|
||||||
|
if (!state) {
|
||||||
|
console.error(`[process-element.ts] 💥 État ${stateId} non trouvé dans le processus ${processId} !`);
|
||||||
|
titleH1.innerText = "Erreur";
|
||||||
|
processContainer.innerHTML = `<p>L'état ${stateId} n'a pas pu être chargé.</p>`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("[process-element.ts] ✅ Processus et État chargés.");
|
||||||
|
|
||||||
|
// 4. Mettre à jour le titre
|
||||||
|
const processName = services.getProcessName(process) || "Processus";
|
||||||
|
titleH1.innerHTML = interpolate(titleH1.innerHTML, { processTitle: processName });
|
||||||
|
|
||||||
|
// 5. Logique de rendu de l'élément (À COMPLÉTER PAR TES SOINS)
|
||||||
|
// C'est là que tu dois construire le HTML pour cet état spécifique
|
||||||
|
// Par exemple, déchiffrer les attributs et les afficher.
|
||||||
|
processContainer.innerHTML = `
|
||||||
|
<div class="card" style="margin: 1rem; padding: 1rem;">
|
||||||
|
<h3>État: ${stateId.substring(0, 10)}...</h3>
|
||||||
|
<p>Commit: ${state.commited_in}</p>
|
||||||
|
<div id="attributes-list">
|
||||||
|
<p><em>Chargement des attributs...</em></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// 6. Tenter de déchiffrer les données de cet état
|
||||||
|
await decryptAndDisplayAttributes(services, container, processId, state);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function loadPage(data?: any) {
|
/**
|
||||||
const content = document.getElementById('containerId');
|
* Helper (exemple) pour déchiffrer et afficher les données dans le conteneur
|
||||||
if (content && data) {
|
*/
|
||||||
if (data) {
|
async function decryptAndDisplayAttributes(services: Services, container: ShadowRoot, processId: string, state: ProcessState) {
|
||||||
content.innerHTML = interpolate(content.innerHTML, data);
|
const attributesList = container.querySelector('#attributes-list');
|
||||||
|
if (!attributesList) return;
|
||||||
|
|
||||||
|
console.log(`[process-element.ts] 🔐 Déchiffrement des attributs pour l'état ${state.state_id}...`);
|
||||||
|
attributesList.innerHTML = ''; // Vide le message "Chargement..."
|
||||||
|
let hasPrivateData = false;
|
||||||
|
|
||||||
|
// Affiche les données publiques
|
||||||
|
if (state.public_data) {
|
||||||
|
for (const [key, value] of Object.entries(state.public_data)) {
|
||||||
|
const el = document.createElement('div');
|
||||||
|
el.className = 'attribute-pair public';
|
||||||
|
el.innerHTML = `<strong>${key} (public):</strong> ${JSON.stringify(services.decodeValue(value))}`;
|
||||||
|
attributesList.appendChild(el);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function injectCss(cssContent: string) {
|
// Affiche les données privées
|
||||||
removeCss(); // Ensure that the previous CSS is removed
|
for (const attribute of Object.keys(state.pcd_commitment)) {
|
||||||
|
if (attribute === 'roles' || (state.public_data && state.public_data[attribute])) {
|
||||||
currentPageStyle = document.createElement('style');
|
continue; // Skip les données publiques (déjà fait) et les rôles
|
||||||
currentPageStyle.type = 'text/css';
|
}
|
||||||
currentPageStyle.appendChild(document.createTextNode(cssContent));
|
|
||||||
document.head.appendChild(currentPageStyle);
|
const decryptedValue = await services.decryptAttribute(processId, state, attribute);
|
||||||
}
|
|
||||||
|
const el = document.createElement('div');
|
||||||
function removeCss() {
|
el.className = 'attribute-pair private';
|
||||||
if (currentPageStyle) {
|
|
||||||
document.head.removeChild(currentPageStyle);
|
if (decryptedValue) {
|
||||||
currentPageStyle = null;
|
hasPrivateData = true;
|
||||||
}
|
el.innerHTML = `<strong>${attribute} (privé):</strong> ${JSON.stringify(decryptedValue)}`;
|
||||||
}
|
} else {
|
||||||
|
el.innerHTML = `<strong>${attribute} (privé):</strong> <span style="color: red;">[Déchiffrement impossible / Clé manquante]</span>`;
|
||||||
async function getProcesses(): Promise<Record<string, Process>> {
|
}
|
||||||
const service = await Services.getInstance();
|
attributesList.appendChild(el);
|
||||||
const processes = await service.getProcesses();
|
}
|
||||||
return processes;
|
|
||||||
}
|
if (!hasPrivateData && !(state.public_data && Object.keys(state.public_data).length > 0)) {
|
||||||
|
console.log("[process-element.ts] ℹ️ Aucun attribut (public ou privé) trouvé pour cet état.");
|
||||||
|
attributesList.innerHTML = '<p>Cet état ne contient aucun attribut visible.</p>';
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,49 +1,40 @@
|
|||||||
// import processHtml from './process.html?raw';
|
// src/pages/process/process-list-component.ts
|
||||||
// import processScript from './process.ts?raw';
|
|
||||||
// import processCss from '../../4nk.css?raw';
|
|
||||||
// import { init } from './process';
|
|
||||||
|
|
||||||
// export class ProcessListComponent extends HTMLElement {
|
import processHtml from './process.html?raw';
|
||||||
// _callback: any;
|
import processCss from '../../4nk.css?raw';
|
||||||
// constructor() {
|
import { init } from './process';
|
||||||
// super();
|
|
||||||
// this.attachShadow({ mode: 'open' });
|
|
||||||
// }
|
|
||||||
|
|
||||||
// connectedCallback() {
|
export class ProcessListComponent extends HTMLElement {
|
||||||
// console.log('CALLBACK PROCESS LIST PAGE');
|
constructor() {
|
||||||
// this.render();
|
super();
|
||||||
// setTimeout(() => {
|
this.attachShadow({ mode: 'open' });
|
||||||
// init();
|
}
|
||||||
// }, 500);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// set callback(fn) {
|
connectedCallback() {
|
||||||
// if (typeof fn === 'function') {
|
this.render();
|
||||||
// this._callback = fn;
|
|
||||||
// } else {
|
|
||||||
// console.error('Callback is not a function');
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// get callback() {
|
try {
|
||||||
// return this._callback;
|
if (this.shadowRoot) {
|
||||||
// }
|
init(this.shadowRoot);
|
||||||
|
} else {
|
||||||
|
console.error('[ProcessListComponent] 💥 ShadowRoot est nul.');
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[ProcessListComponent] 💥 Échec de l'init():", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// render() {
|
render() {
|
||||||
// if (this.shadowRoot)
|
if (this.shadowRoot) {
|
||||||
// this.shadowRoot.innerHTML = `
|
this.shadowRoot.innerHTML = `
|
||||||
// <style>
|
<style>${processCss}</style>
|
||||||
// ${processCss}
|
${processHtml}
|
||||||
// </style>${processHtml}
|
`;
|
||||||
// <script type="module">
|
}
|
||||||
// ${processScript}
|
}
|
||||||
// </scipt>
|
|
||||||
|
|
||||||
// `;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (!customElements.get('process-list-4nk-component')) {
|
}
|
||||||
// customElements.define('process-list-4nk-component', ProcessListComponent);
|
|
||||||
// }
|
if (!customElements.get('process-list-4nk-component')) {
|
||||||
|
customElements.define('process-list-4nk-component', ProcessListComponent);
|
||||||
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
<!-- <div class="title-container">
|
<div class="title-container">
|
||||||
<h1>Process Selection</h1>
|
<h1>Process Selection</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -7,13 +7,17 @@
|
|||||||
<div class="process-card-description">
|
<div class="process-card-description">
|
||||||
<div class="input-container">
|
<div class="input-container">
|
||||||
<select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"></select>
|
<select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"></select>
|
||||||
|
|
||||||
<label for="autocomplete" class="input-label">Filter processes :</label>
|
<label for="autocomplete" class="input-label">Filter processes :</label>
|
||||||
|
|
||||||
<div class="selected-processes"></div>
|
<div class="selected-processes"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="process-card-content"></div>
|
<div class="process-card-content"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="process-card-action">
|
<div class="process-card-action">
|
||||||
<a class="btn" onclick="goToProcessPage()">OK</a>
|
<a class="btn" id="go-to-process-btn">OK</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div> -->
|
</div>
|
||||||
@ -1,520 +1,486 @@
|
|||||||
// import { addSubscription } from '../../utils/subscription.utils';
|
// src/pages/process/process.ts
|
||||||
// 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';
|
|
||||||
|
|
||||||
// // Initialize function, create initial tokens with itens that are already selected by the user
|
import { addSubscription } from '../../utils/subscription.utils';
|
||||||
// export async function init() {
|
import Services from '../../services/service';
|
||||||
|
import { Process, ProcessState, UserDiff } from 'pkg/sdk_client';
|
||||||
// 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
|
|
||||||
// const wrapper = document.createElement('div');
|
|
||||||
// if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
|
|
||||||
// wrapper.classList.add('multi-select-component');
|
|
||||||
// wrapper.classList.add('input-field');
|
|
||||||
|
|
||||||
// // Create elements of search
|
// On garde une référence aux éléments du DOM pour ne pas les chercher partout
|
||||||
// const search_div = document.createElement('div');
|
let shadowContainer: ShadowRoot;
|
||||||
// search_div.classList.add('search-container');
|
let services: Services;
|
||||||
// const input = document.createElement('input');
|
let wrapper: HTMLElement;
|
||||||
// input.classList.add('selected-input');
|
let select: HTMLSelectElement;
|
||||||
// input.setAttribute('autocomplete', 'off');
|
let inputSearch: HTMLInputElement;
|
||||||
// input.setAttribute('tabindex', '0');
|
let autocompleteList: HTMLUListElement;
|
||||||
// if (input) {
|
let selectedProcessesContainer: HTMLElement;
|
||||||
// addSubscription(input, 'keyup', inputChange);
|
let processCardContent: HTMLElement;
|
||||||
// addSubscription(input, 'keydown', deletePressed);
|
let okButton: HTMLElement;
|
||||||
// addSubscription(input, 'click', openOptions);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const dropdown_icon = document.createElement('a');
|
/**
|
||||||
// dropdown_icon.classList.add('dropdown-icon');
|
* Fonction d'initialisation principale, appelée par le composant.
|
||||||
|
*/
|
||||||
|
export async function init(container: ShadowRoot) {
|
||||||
|
console.log('[process.ts] 1. init() appelé.');
|
||||||
|
|
||||||
// if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
|
// Stocke les références globales
|
||||||
// const autocomplete_list = document.createElement('ul');
|
shadowContainer = container;
|
||||||
// autocomplete_list.classList.add('autocomplete-list');
|
services = await Services.getInstance();
|
||||||
// search_div.appendChild(input);
|
|
||||||
// search_div.appendChild(autocomplete_list);
|
|
||||||
// search_div.appendChild(dropdown_icon);
|
|
||||||
|
|
||||||
// // set the wrapper as child (instead of the element)
|
const element = container.querySelector('select') as HTMLSelectElement;
|
||||||
// element.parentNode?.replaceChild(wrapper, element);
|
if (!element) {
|
||||||
// // set element as child of wrapper
|
console.error("[process.ts] 💥 Échec de l'init: <select> introuvable dans process.html !");
|
||||||
// wrapper.appendChild(element);
|
return;
|
||||||
// wrapper.appendChild(search_div);
|
}
|
||||||
|
|
||||||
// addPlaceholder(wrapper);
|
console.log('[process.ts] 2. <select> trouvé. Construction du DOM du multi-select...');
|
||||||
// }
|
|
||||||
|
|
||||||
// function removePlaceholder(wrapper: HTMLElement) {
|
// --- 1. Logique de Création du DOM (Ton code original, mais au bon endroit) ---
|
||||||
// const input_search = wrapper.querySelector('.selected-input');
|
const newWrapper = document.createElement('div');
|
||||||
// input_search?.removeAttribute('placeholder');
|
if (newWrapper) addSubscription(newWrapper, 'click', clickOnWrapper);
|
||||||
// }
|
newWrapper.classList.add('multi-select-component');
|
||||||
|
newWrapper.classList.add('input-field');
|
||||||
|
|
||||||
// function addPlaceholder(wrapper: HTMLElement) {
|
const search_div = document.createElement('div');
|
||||||
// const input_search = wrapper.querySelector('.selected-input');
|
search_div.classList.add('search-container');
|
||||||
// const tokens = wrapper.querySelectorAll('.selected-wrapper');
|
|
||||||
// if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Listener of user search
|
const newInput = document.createElement('input');
|
||||||
// function inputChange(e: Event) {
|
newInput.classList.add('selected-input');
|
||||||
// const target = e.target as HTMLInputElement;
|
newInput.setAttribute('autocomplete', 'off');
|
||||||
// const wrapper = target?.parentNode?.parentNode;
|
newInput.setAttribute('tabindex', '0');
|
||||||
// const select = wrapper?.querySelector('select') as HTMLSelectElement;
|
|
||||||
// const dropdown = wrapper?.querySelector('.dropdown-icon');
|
|
||||||
|
|
||||||
// const input_val = target?.value;
|
const dropdown_icon = document.createElement('a');
|
||||||
|
dropdown_icon.classList.add('dropdown-icon');
|
||||||
|
|
||||||
// if (input_val) {
|
const newAutocompleteList = document.createElement('ul');
|
||||||
// dropdown?.classList.add('active');
|
newAutocompleteList.classList.add('autocomplete-list');
|
||||||
// populateAutocompleteList(select, input_val.trim());
|
|
||||||
// } else {
|
|
||||||
// dropdown?.classList.remove('active');
|
|
||||||
// const event = new Event('click');
|
|
||||||
// dropdown?.dispatchEvent(event);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Listen for clicks on the wrapper, if click happens focus on the input
|
search_div.appendChild(newInput);
|
||||||
// function clickOnWrapper(e: Event) {
|
search_div.appendChild(newAutocompleteList);
|
||||||
// const wrapper = e.target as HTMLElement;
|
search_div.appendChild(dropdown_icon);
|
||||||
// if (wrapper.tagName == 'DIV') {
|
|
||||||
// const input_search = wrapper.querySelector('.selected-input');
|
|
||||||
// const dropdown = wrapper.querySelector('.dropdown-icon');
|
|
||||||
// if (!dropdown?.classList.contains('active')) {
|
|
||||||
// const event = new Event('click');
|
|
||||||
// dropdown?.dispatchEvent(event);
|
|
||||||
// }
|
|
||||||
// (input_search as HTMLInputElement)?.focus();
|
|
||||||
// removePlaceholder(wrapper);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function openOptions(e: Event) {
|
// Remplace le <select> original par le 'wrapper'
|
||||||
// const input_search = e.target as HTMLElement;
|
element.parentNode?.replaceChild(newWrapper, element);
|
||||||
// const wrapper = input_search?.parentElement?.parentElement;
|
// Ajoute le <select> (caché) et la 'search_div' (visible) dans le wrapper
|
||||||
// const dropdown = wrapper?.querySelector('.dropdown-icon');
|
newWrapper.appendChild(element);
|
||||||
// if (!dropdown?.classList.contains('active')) {
|
newWrapper.appendChild(search_div);
|
||||||
// const event = new Event('click');
|
console.log('[process.ts] 3. DOM du multi-select construit.');
|
||||||
// dropdown?.dispatchEvent(event);
|
|
||||||
// }
|
|
||||||
// e.stopPropagation();
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Function that create a token inside of a wrapper with the given value
|
// --- 2. Sélection des éléments (Maintenant qu'ils existent) ---
|
||||||
// function createToken(wrapper: HTMLElement, value: any) {
|
// Note: On utilise 'newWrapper' comme base pour être plus rapide
|
||||||
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
|
wrapper = newWrapper;
|
||||||
// const search = wrapper.querySelector('.search-container');
|
select = wrapper.querySelector('select') as HTMLSelectElement;
|
||||||
// const inputInderline = container.querySelector('.selected-processes');
|
inputSearch = wrapper.querySelector('.selected-input') as HTMLInputElement;
|
||||||
// // Create token wrapper
|
autocompleteList = wrapper.querySelector('.autocomplete-list') as HTMLUListElement;
|
||||||
// const token = document.createElement('div');
|
|
||||||
// token.classList.add('selected-wrapper');
|
|
||||||
// const token_span = document.createElement('span');
|
|
||||||
// token_span.classList.add('selected-label');
|
|
||||||
// token_span.innerText = value;
|
|
||||||
// const close = document.createElement('a');
|
|
||||||
// close.classList.add('selected-close');
|
|
||||||
// close.setAttribute('tabindex', '-1');
|
|
||||||
// close.setAttribute('data-option', value);
|
|
||||||
// close.setAttribute('data-hits', '0');
|
|
||||||
// close.innerText = 'x';
|
|
||||||
// if (close) addSubscription(close, 'click', removeToken);
|
|
||||||
// token.appendChild(token_span);
|
|
||||||
// token.appendChild(close);
|
|
||||||
// inputInderline?.appendChild(token);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Listen for clicks in the dropdown option
|
// Ces éléments sont en dehors du wrapper, on utilise le 'shadowContainer'
|
||||||
// function clickDropdown(e: Event) {
|
selectedProcessesContainer = shadowContainer.querySelector('.selected-processes') as HTMLElement;
|
||||||
// const dropdown = e.target as HTMLElement;
|
processCardContent = shadowContainer.querySelector('.process-card-content') as HTMLElement;
|
||||||
// const wrapper = dropdown?.parentNode?.parentNode;
|
okButton = shadowContainer.querySelector('#go-to-process-btn') as HTMLElement;
|
||||||
// const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
|
|
||||||
// const select = wrapper?.querySelector('select') as HTMLSelectElement;
|
|
||||||
// dropdown.classList.toggle('active');
|
|
||||||
|
|
||||||
// if (dropdown.classList.contains('active')) {
|
if (!wrapper || !select || !inputSearch || !autocompleteList || !okButton || !selectedProcessesContainer || !processCardContent) {
|
||||||
// removePlaceholder(wrapper as HTMLElement);
|
console.error("[process.ts] 💥 Échec de l'init: Un ou plusieurs éléments DOM sont introuvables après la construction.", {
|
||||||
// input_search?.focus();
|
wrapper,
|
||||||
|
select,
|
||||||
|
inputSearch,
|
||||||
|
autocompleteList,
|
||||||
|
okButton,
|
||||||
|
selectedProcessesContainer,
|
||||||
|
processCardContent,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// if (!input_search?.value) {
|
// --- 3. Attachement des Écouteurs ---
|
||||||
// populateAutocompleteList(select, '', true);
|
addSubscription(inputSearch, 'keyup', inputChange);
|
||||||
// } else {
|
addSubscription(inputSearch, 'keydown', deletePressed);
|
||||||
// populateAutocompleteList(select, input_search.value);
|
addSubscription(inputSearch, 'click', openOptions);
|
||||||
// }
|
addSubscription(dropdown_icon, 'click', clickDropdown);
|
||||||
// } else {
|
addSubscription(okButton, 'click', goToProcessPage);
|
||||||
// clearAutocompleteList(select);
|
|
||||||
// addPlaceholder(wrapper as HTMLElement);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Clears the results of the autocomplete list
|
// Gère le clic en dehors du composant
|
||||||
// function clearAutocompleteList(select: HTMLSelectElement) {
|
addSubscription(document, 'click', (event: Event) => {
|
||||||
// const wrapper = select.parentNode;
|
const isClickInside = wrapper.contains(event.target as Node);
|
||||||
|
if (!isClickInside) {
|
||||||
|
closeAutocomplete();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
|
// --- 4. Initialisation de l'état ---
|
||||||
// if (autocomplete_list) autocomplete_list.innerHTML = '';
|
addPlaceholder();
|
||||||
// }
|
|
||||||
|
|
||||||
// async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
|
// Peuple la liste une première fois (elle sera vide, c'est OK)
|
||||||
// const { autocomplete_options } = getOptions(select);
|
console.log('[process.ts] 4. Peuplement initial (probablement vide)...');
|
||||||
|
await populateAutocompleteList('');
|
||||||
|
|
||||||
// let options_to_show = [];
|
// S'abonne à l'événement de mise à jour du service
|
||||||
|
console.log('[process.ts] 5. 🎧 Abonnement à l\'événement "processes-updated"');
|
||||||
|
addSubscription(document, 'processes-updated', async () => {
|
||||||
|
console.log('[process.ts] 🔔 Événement "processes-updated" reçu ! Re-population de la liste...');
|
||||||
|
await populateAutocompleteList(inputSearch.value);
|
||||||
|
});
|
||||||
|
|
||||||
// const service = await Services.getInstance();
|
console.log('[process.ts] 6. init() terminée. Le composant est prêt.');
|
||||||
// const mineArray: string[] = await service.getMyProcesses();
|
}
|
||||||
// const allProcesses = await service.getProcesses();
|
|
||||||
// const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
|
|
||||||
|
|
||||||
// const wrapper = select.parentNode;
|
// ==========================================
|
||||||
// const input_search = wrapper?.querySelector('.search-container');
|
// Fonctions de l'Autocomplete Multi-Select
|
||||||
// const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
|
// (Toutes les fonctions ci-dessous sont des "helpers" pour init)
|
||||||
// if (autocomplete_list) autocomplete_list.innerHTML = '';
|
// ==========================================
|
||||||
|
|
||||||
// const addProcessToList = (processId:string, isMine: boolean) => {
|
function removePlaceholder() {
|
||||||
// const li = document.createElement('li');
|
inputSearch?.removeAttribute('placeholder');
|
||||||
// li.innerText = processId;
|
}
|
||||||
// li.setAttribute("data-value", processId);
|
|
||||||
|
|
||||||
// if (isMine) {
|
function addPlaceholder() {
|
||||||
// li.classList.add("my-process");
|
if (!selectedProcessesContainer) return; // Sécurité
|
||||||
// li.style.cssText = `color: var(--accent-color)`;
|
const tokens = selectedProcessesContainer.querySelectorAll('.selected-wrapper');
|
||||||
// }
|
|
||||||
|
|
||||||
// if (li) addSubscription(li, 'click', selectOption);
|
if (!tokens?.length && document.activeElement !== inputSearch) {
|
||||||
// autocomplete_list?.appendChild(li);
|
inputSearch?.setAttribute('placeholder', 'Filtrer les processus...');
|
||||||
// };
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// mineArray.forEach(processId => addProcessToList(processId, true));
|
function inputChange(e: Event) {
|
||||||
// allArray.forEach(processId => addProcessToList(processId, false));
|
const input_val = (e.target as HTMLInputElement).value;
|
||||||
|
const dropdown = wrapper.querySelector('.dropdown-icon');
|
||||||
// if (mineArray.length === 0 && allArray.length === 0) {
|
|
||||||
// const li = document.createElement('li');
|
|
||||||
// li.classList.add('not-cursor');
|
|
||||||
// li.innerText = 'No options found';
|
|
||||||
// autocomplete_list?.appendChild(li);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Listener to autocomplete results when clicked set the selected property in the select option
|
if (input_val) {
|
||||||
// function selectOption(e: any) {
|
dropdown?.classList.add('active');
|
||||||
// console.log('🎯 Click event:', e);
|
populateAutocompleteList(input_val.trim());
|
||||||
// console.log('🎯 Target value:', e.target.dataset.value);
|
} else {
|
||||||
|
dropdown?.classList.remove('active');
|
||||||
// const wrapper = e.target.parentNode.parentNode.parentNode;
|
dropdown?.dispatchEvent(new Event('click'));
|
||||||
// const select = wrapper.querySelector('select');
|
}
|
||||||
// const input_search = wrapper.querySelector('.selected-input');
|
}
|
||||||
// const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
|
|
||||||
|
|
||||||
// console.log('🎯 Selected option:', option);
|
|
||||||
// console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
|
|
||||||
|
|
||||||
// if (e.target.dataset.value.includes('messaging')) {
|
function clickOnWrapper(e: Event) {
|
||||||
// const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
|
// Ouvre la liste si on clique dans la zone vide du wrapper
|
||||||
// const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
|
if (e.target === wrapper || e.target === selectedProcessesContainer) {
|
||||||
|
openAutocomplete();
|
||||||
// console.log('🚀 Dispatching newMessagingProcess event:', {
|
}
|
||||||
// processId,
|
}
|
||||||
// processName: `Messaging Process ${processId}`
|
|
||||||
// });
|
|
||||||
|
|
||||||
// // Dispatch l'événement avant la navigation
|
function openOptions(e: Event) {
|
||||||
// document.dispatchEvent(new CustomEvent('newMessagingProcess', {
|
const dropdown = wrapper.querySelector('.dropdown-icon');
|
||||||
// detail: {
|
if (!dropdown?.classList.contains('active')) {
|
||||||
// processId: processId,
|
dropdown?.dispatchEvent(new Event('click'));
|
||||||
// processName: `Messaging Process ${processId}`
|
}
|
||||||
// }
|
e.stopPropagation();
|
||||||
// }));
|
}
|
||||||
|
|
||||||
// // Navigation vers le chat
|
|
||||||
// const navigateEvent = new CustomEvent('navigate', {
|
|
||||||
// detail: {
|
|
||||||
// page: 'chat',
|
|
||||||
// processId: processId || ''
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// document.dispatchEvent(navigateEvent);
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// option.setAttribute('selected', '');
|
|
||||||
// createToken(wrapper, e.target.dataset.value);
|
|
||||||
// if (input_search.value) {
|
|
||||||
// input_search.value = '';
|
|
||||||
// }
|
|
||||||
|
|
||||||
// showSelectedProcess(e.target.dataset.value);
|
function createToken(processId: string, name: string) {
|
||||||
|
const token = document.createElement('div');
|
||||||
|
token.classList.add('selected-wrapper');
|
||||||
|
token.setAttribute('data-process-id', processId); // Stocke l'ID
|
||||||
|
|
||||||
// input_search.focus();
|
const tokenSpan = document.createElement('span');
|
||||||
|
tokenSpan.classList.add('selected-label');
|
||||||
|
tokenSpan.innerText = name; // Affiche le nom
|
||||||
|
|
||||||
// e.target.remove();
|
const close = document.createElement('a');
|
||||||
// const autocomplete_list = wrapper.querySelector('.autocomplete-list');
|
close.classList.add('selected-close');
|
||||||
|
close.innerText = 'x';
|
||||||
|
close.setAttribute('data-process-id', processId); // Utilise l'ID pour la suppression
|
||||||
|
addSubscription(close, 'click', removeToken);
|
||||||
|
|
||||||
// if (!autocomplete_list.children.length) {
|
token.appendChild(tokenSpan);
|
||||||
// const li = document.createElement('li');
|
token.appendChild(close);
|
||||||
// li.classList.add('not-cursor');
|
selectedProcessesContainer.appendChild(token);
|
||||||
// li.innerText = 'No options found';
|
removePlaceholder();
|
||||||
// autocomplete_list.appendChild(li);
|
}
|
||||||
// }
|
|
||||||
|
|
||||||
// const event = new Event('keyup');
|
function clickDropdown(e: Event) {
|
||||||
// input_search.dispatchEvent(event);
|
const dropdown = e.currentTarget as HTMLElement;
|
||||||
// e.stopPropagation();
|
dropdown.classList.toggle('active');
|
||||||
// }
|
|
||||||
|
|
||||||
// // function that returns a list with the autcomplete list of matches
|
if (dropdown.classList.contains('active')) {
|
||||||
// function autocomplete(query: string, options: any) {
|
openAutocomplete();
|
||||||
// // No query passed, just return entire list
|
} else {
|
||||||
// if (!query) {
|
closeAutocomplete();
|
||||||
// return options;
|
}
|
||||||
// }
|
}
|
||||||
// let options_return = [];
|
|
||||||
|
|
||||||
// for (let i = 0; i < options.length; i++) {
|
function openAutocomplete() {
|
||||||
// if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
|
if (!wrapper || !inputSearch) return;
|
||||||
// options_return.push(options[i]);
|
const dropdown = wrapper.querySelector('.dropdown-icon');
|
||||||
// }
|
dropdown?.classList.add('active');
|
||||||
// }
|
removePlaceholder();
|
||||||
// return options_return;
|
inputSearch.focus();
|
||||||
// }
|
populateAutocompleteList(inputSearch.value);
|
||||||
|
}
|
||||||
|
|
||||||
// // Returns the options that are selected by the user and the ones that are not
|
function closeAutocomplete() {
|
||||||
// function getOptions(select: HTMLSelectElement) {
|
if (!wrapper || !autocompleteList) return;
|
||||||
// // Select all the options available
|
const dropdown = wrapper.querySelector('.dropdown-icon');
|
||||||
// const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
|
dropdown?.classList.remove('active');
|
||||||
|
autocompleteList.innerHTML = '';
|
||||||
|
addPlaceholder();
|
||||||
|
}
|
||||||
|
|
||||||
// // Get the options that are selected from the user
|
function clearAutocompleteList() {
|
||||||
// const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
|
if (autocompleteList) autocompleteList.innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
// // Create an autocomplete options array with the options that are not selected by the user
|
async function populateAutocompleteList(query: string) {
|
||||||
// const autocomplete_options: any[] = [];
|
if (!autocompleteList || !select) return; // Sécurité
|
||||||
// all_options.forEach((option) => {
|
|
||||||
// if (!options_selected.includes(option)) {
|
|
||||||
// autocomplete_options.push(option);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// autocomplete_options.sort();
|
autocompleteList.innerHTML = ''; // Vide la liste visible
|
||||||
|
select.innerHTML = ''; // Vide le select caché
|
||||||
|
|
||||||
// return {
|
const mineArray: string[] = (await services.getMyProcesses()) ?? [];
|
||||||
// options_selected,
|
const allProcesses = await services.getProcesses();
|
||||||
// autocomplete_options,
|
const allArray: string[] = Object.keys(allProcesses).filter((x) => !mineArray.includes(x));
|
||||||
// };
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Listener for when the user wants to remove a given token.
|
const processIdsToShow = [...mineArray, ...allArray];
|
||||||
// function removeToken(e: Event) {
|
let itemsFound = 0;
|
||||||
// // Get the value to remove
|
|
||||||
// const target = e.target as HTMLSelectElement;
|
|
||||||
// const value_to_remove = target.dataset.option;
|
|
||||||
// const wrapper = target.parentNode?.parentNode?.parentNode;
|
|
||||||
// const input_search = wrapper?.querySelector('.selected-input');
|
|
||||||
// const dropdown = wrapper?.querySelector('.dropdown-icon');
|
|
||||||
// // Get the options in the select to be unselected
|
|
||||||
// const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
|
|
||||||
// option_to_unselect?.removeAttribute('selected');
|
|
||||||
// // Remove token attribute
|
|
||||||
// (target.parentNode as any)?.remove();
|
|
||||||
// dropdown?.classList.remove('active');
|
|
||||||
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
|
|
||||||
|
|
||||||
// const process = container.querySelector('#' + target.dataset.option);
|
for (const processId of processIdsToShow) {
|
||||||
// process?.remove();
|
const process = allProcesses[processId];
|
||||||
// }
|
if (!process) continue;
|
||||||
|
|
||||||
// // Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
|
const name = services.getProcessName(process) || processId;
|
||||||
// function deletePressed(e: Event) {
|
|
||||||
// const input_search = e.target as HTMLInputElement;
|
|
||||||
// const wrapper = input_search?.parentNode?.parentNode;
|
|
||||||
// const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
|
|
||||||
// const tokens = wrapper?.querySelectorAll('.selected-wrapper');
|
|
||||||
|
|
||||||
// if (tokens?.length) {
|
// Filtre
|
||||||
// const last_token_x = tokens[tokens.length - 1].querySelector('a');
|
if (query && !name.toLowerCase().includes(query.toLowerCase()) && !processId.includes(query)) {
|
||||||
// let hits = +(last_token_x?.dataset?.hits || 0);
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
// if (key == 8 || key == 46) {
|
itemsFound++;
|
||||||
// if (!input_search.value) {
|
|
||||||
// if (hits > 1) {
|
|
||||||
// // Trigger delete event
|
|
||||||
// const event = new Event('click');
|
|
||||||
// last_token_x?.dispatchEvent(event);
|
|
||||||
// } else {
|
|
||||||
// if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Dismiss on outside click
|
// 1. Crée l'élément VISIBLE (<li>)
|
||||||
// addSubscription(document, 'click', () => {
|
const li = document.createElement('li');
|
||||||
// // get select that has the options available
|
li.innerText = name;
|
||||||
// const select = document.querySelectorAll('[data-multi-select-plugin]');
|
li.setAttribute('data-value', processId); // L'ID est le 'data-value'
|
||||||
// for (let i = 0; i < select.length; i++) {
|
if (mineArray.includes(processId)) {
|
||||||
// if (event) {
|
li.classList.add('my-process');
|
||||||
// var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
|
li.style.cssText = `color: var(--accent-color)`;
|
||||||
|
}
|
||||||
|
addSubscription(li, 'click', selectOption);
|
||||||
|
autocompleteList.appendChild(li);
|
||||||
|
|
||||||
// if (!isClickInside) {
|
// 2. Crée l'élément CACHÉ (<option>)
|
||||||
// const wrapper = select[i].parentElement?.parentElement;
|
const option = document.createElement('option');
|
||||||
// const dropdown = wrapper?.querySelector('.dropdown-icon');
|
option.value = processId; // 'value' correspond au 'data-value'
|
||||||
// const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
|
option.text = name;
|
||||||
// //the click was outside the specifiedElement, do something
|
option.setAttribute('data-process-id', processId);
|
||||||
// dropdown?.classList.remove('active');
|
select.appendChild(option);
|
||||||
// if (autocomplete_list) autocomplete_list.innerHTML = '';
|
}
|
||||||
// addPlaceholder(wrapper as HTMLElement);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// async function showSelectedProcess(elem: MouseEvent) {
|
if (itemsFound === 0) {
|
||||||
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
|
const li = document.createElement('li');
|
||||||
|
li.classList.add('not-cursor');
|
||||||
|
li.innerText = 'No options found';
|
||||||
|
autocompleteList.appendChild(li);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// if (elem) {
|
function selectOption(e: any) {
|
||||||
// const cardContent = container.querySelector('.process-card-content');
|
console.log('🎯 Click event:', e);
|
||||||
|
const selectedLi = e.currentTarget as HTMLLIElement; // Utilise currentTarget
|
||||||
|
const clickedValue = selectedLi.dataset.value;
|
||||||
|
console.log('🎯 Clicked value (depuis le <li>):', clickedValue);
|
||||||
|
|
||||||
// const processes = await getProcesses();
|
if (!clickedValue) {
|
||||||
// const process = processes.find((process: any) => process[1].title === elem);
|
console.error("💥 Clic sur un élément sans 'data-value'.");
|
||||||
// if (process) {
|
return;
|
||||||
// const processDiv = document.createElement('div');
|
}
|
||||||
// processDiv.className = 'process';
|
|
||||||
// processDiv.id = process[0];
|
|
||||||
// const titleDiv = document.createElement('div');
|
|
||||||
// titleDiv.className = 'process-title';
|
|
||||||
// titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
|
|
||||||
// processDiv.appendChild(titleDiv);
|
|
||||||
// for (const zone of process.zones) {
|
|
||||||
// const zoneElement = document.createElement('div');
|
|
||||||
// zoneElement.className = 'process-element';
|
|
||||||
// const zoneId = process[1].title + '-' + zone.id;
|
|
||||||
// zoneElement.setAttribute('zone-id', zoneId);
|
|
||||||
// zoneElement.setAttribute('process-title', process[1].title);
|
|
||||||
// zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
|
|
||||||
// zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
|
|
||||||
// addSubscription(zoneElement, 'click', select);
|
|
||||||
// processDiv.appendChild(zoneElement);
|
|
||||||
// }
|
|
||||||
// if (cardContent) cardContent.appendChild(processDiv);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function select(event: Event) {
|
const processIdValue = clickedValue; // C'est déjà le bon ID
|
||||||
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
|
|
||||||
// const target = event.target as HTMLElement;
|
|
||||||
// const oldSelectedProcess = container.querySelector('.selected-process-zone');
|
|
||||||
// oldSelectedProcess?.classList.remove('selected-process-zone');
|
|
||||||
// if (target) {
|
|
||||||
// target.classList.add('selected-process-zone');
|
|
||||||
// }
|
|
||||||
// const name = target.getAttribute('zone-id');
|
|
||||||
// console.log('🚀 ~ select ~ name:', name);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// function goToProcessPage() {
|
// --- Gestion 'messaging' ---
|
||||||
// const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
|
if (clickedValue.includes('messaging')) {
|
||||||
|
// ... (ta logique 'messaging' reste ici) ...
|
||||||
|
// Note: cette logique est probablement cassée si 'messaging' n'est pas un processId
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// const target = container.querySelector('.selected-process-zone');
|
// --- 🚨 CORRECTION DU CRASH ---
|
||||||
// console.log('🚀 ~ goToProcessPage ~ event:', target);
|
const option = select?.querySelector(`option[value="${processIdValue}"]`) as HTMLOptionElement;
|
||||||
// if (target) {
|
|
||||||
// const process = target?.getAttribute('process-id');
|
|
||||||
|
|
||||||
// console.log('=======================> going to process page', process);
|
if (!option) {
|
||||||
// // navigate('process-element/' + process);
|
console.error(`💥 BUG: Impossible de trouver l'option avec la valeur "${processIdValue}"`);
|
||||||
// document.querySelector('process-list-4nk-component')?.dispatchEvent(
|
return;
|
||||||
// new CustomEvent('processSelected', {
|
}
|
||||||
// detail: {
|
|
||||||
// process: process,
|
|
||||||
// },
|
|
||||||
// }),
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// (window as any).goToProcessPage = goToProcessPage;
|
option.setAttribute('selected', 'true');
|
||||||
|
option.selected = true;
|
||||||
|
|
||||||
// async function createMessagingProcess(): Promise<void> {
|
createToken(processIdValue, option.text); // Passe l'ID et le nom
|
||||||
// console.log('Creating messaging process');
|
if (inputSearch.value) {
|
||||||
// const service = await Services.getInstance();
|
inputSearch.value = '';
|
||||||
// const otherMembers = [
|
}
|
||||||
// {
|
|
||||||
// sp_addresses: [
|
|
||||||
// "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
|
|
||||||
// "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// sp_addresses: [
|
|
||||||
// "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
|
|
||||||
// "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
|
|
||||||
// ]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// sp_addresses: [
|
|
||||||
// "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
|
|
||||||
// "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
|
|
||||||
// ]
|
|
||||||
// }
|
|
||||||
// ];
|
|
||||||
// await service.checkConnections(otherMembers);
|
|
||||||
// const relayAddress = service.getAllRelays().pop();
|
|
||||||
// if (!relayAddress) {
|
|
||||||
// throw new Error('Empty relay address list');
|
|
||||||
// }
|
|
||||||
// const feeRate = 1;
|
|
||||||
// setTimeout(async () => {
|
|
||||||
// const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
|
|
||||||
// const updatedProcess = createProcessReturn.updated_process.current_process;
|
|
||||||
// if (!updatedProcess) {
|
|
||||||
// console.error('Failed to retrieved new messaging process');
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// const processId = updatedProcess.states[0].commited_in;
|
|
||||||
// const stateId = updatedProcess.states[0].state_id;
|
|
||||||
// await service.handleApiReturn(createProcessReturn);
|
|
||||||
// const createPrdReturn = await service.createPrdUpdate(processId, stateId);
|
|
||||||
// await service.handleApiReturn(createPrdReturn);
|
|
||||||
// const approveChangeReturn = await service.approveChange(processId, stateId);
|
|
||||||
// await service.handleApiReturn(approveChangeReturn);
|
|
||||||
// }, 500)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// async function getDescription(processId: string, process: Process): Promise<string | null> {
|
showSelectedProcess(processIdValue);
|
||||||
// const service = await Services.getInstance();
|
|
||||||
// // Get the `commited_in` value of the last state and remove it from the array
|
|
||||||
// const currentCommitedIn = process.states.pop()?.commited_in;
|
|
||||||
|
|
||||||
// if (currentCommitedIn === undefined) {
|
inputSearch.focus();
|
||||||
// return null; // No states available
|
|
||||||
// }
|
|
||||||
|
|
||||||
// // Find the last state where `commited_in` is different
|
selectedLi.remove(); // Supprime le <li> de la liste des suggestions
|
||||||
// let lastDifferentState = process.states.findLast(
|
|
||||||
// state => state.commited_in !== currentCommitedIn
|
|
||||||
// );
|
|
||||||
|
|
||||||
// if (!lastDifferentState) {
|
if (!autocompleteList?.children.length) {
|
||||||
// // It means that we only have one state that is not commited yet, that can happen with process we just created
|
const li = document.createElement('li');
|
||||||
// // let's assume that the right description is in the last concurrent state and not handle the (arguably rare) case where we have multiple concurrent states on a creation
|
li.classList.add('not-cursor');
|
||||||
// lastDifferentState = process.states.pop();
|
li.innerText = 'No options found';
|
||||||
// }
|
autocompleteList.appendChild(li);
|
||||||
|
}
|
||||||
|
|
||||||
// // Take the description out of the state, if any
|
inputSearch.dispatchEvent(new Event('keyup'));
|
||||||
// const description = lastDifferentState!.pcd_commitment['description'];
|
e.stopPropagation();
|
||||||
// if (description) {
|
}
|
||||||
// const userDiff = await service.getDiffByValue(description);
|
|
||||||
// if (userDiff) {
|
|
||||||
// console.log("Successfully retrieved userDiff:", userDiff);
|
|
||||||
// return userDiff.new_value;
|
|
||||||
// } else {
|
|
||||||
// console.log("Failed to retrieve a non-null userDiff.");
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// return null;
|
function removeToken(e: Event) {
|
||||||
// }
|
e.stopPropagation();
|
||||||
|
|
||||||
|
const closeButton = e.currentTarget as HTMLElement;
|
||||||
|
const processId = closeButton.dataset.processId;
|
||||||
|
|
||||||
|
if (!processId) return;
|
||||||
|
|
||||||
|
// 1. Supprime le "token" visuel
|
||||||
|
const token = shadowContainer.querySelector(`.selected-wrapper[data-process-id="${processId}"]`);
|
||||||
|
token?.remove();
|
||||||
|
|
||||||
|
// 2. Désélectionne l'option dans le <select> caché
|
||||||
|
const option = select?.querySelector(`option[value="${processId}"]`) as HTMLOptionElement;
|
||||||
|
if (option) {
|
||||||
|
option.removeAttribute('selected');
|
||||||
|
option.selected = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. Vide le panneau de détails
|
||||||
|
if (processCardContent) processCardContent.innerHTML = '';
|
||||||
|
|
||||||
|
// 4. Recharge la liste d'autocomplétion (pour y remettre l'option)
|
||||||
|
populateAutocompleteList(inputSearch.value);
|
||||||
|
addPlaceholder();
|
||||||
|
}
|
||||||
|
|
||||||
|
function deletePressed(e: Event) {
|
||||||
|
const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
|
||||||
|
|
||||||
|
if (!selectedProcessesContainer) return;
|
||||||
|
const tokens = selectedProcessesContainer.querySelectorAll('.selected-wrapper');
|
||||||
|
|
||||||
|
if (tokens?.length) {
|
||||||
|
const last_token_x = tokens[tokens.length - 1].querySelector('a');
|
||||||
|
let hits = +(last_token_x?.dataset?.hits || 0);
|
||||||
|
|
||||||
|
if (key == 8 || key == 46) {
|
||||||
|
// Backspace ou Suppr
|
||||||
|
if (!inputSearch.value) {
|
||||||
|
if (hits > 1) {
|
||||||
|
last_token_x?.dispatchEvent(new Event('click'));
|
||||||
|
} else {
|
||||||
|
if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ==========================================
|
||||||
|
// Fonctions de Logique (Affichage)
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
|
async function showSelectedProcess(processIdValue: string) {
|
||||||
|
const processId = processIdValue;
|
||||||
|
// const processId = processIdValue.split(':')[0];
|
||||||
|
|
||||||
|
if (!processId || !processCardContent) return;
|
||||||
|
|
||||||
|
console.log(`[process.ts] 🔍 Affichage des détails pour: ${processId}`);
|
||||||
|
processCardContent.innerHTML = ''; // Nettoie
|
||||||
|
|
||||||
|
const process = await services.getProcess(processId);
|
||||||
|
if (process) {
|
||||||
|
const processDiv = document.createElement('div');
|
||||||
|
processDiv.className = 'process';
|
||||||
|
processDiv.id = processId;
|
||||||
|
|
||||||
|
const titleDiv = document.createElement('div');
|
||||||
|
titleDiv.className = 'process-title';
|
||||||
|
const processName = services.getProcessName(process) || 'Processus sans nom';
|
||||||
|
const description = await getDescription(process);
|
||||||
|
titleDiv.innerHTML = `${processName} : ${description || 'Pas de description'}`;
|
||||||
|
processDiv.appendChild(titleDiv);
|
||||||
|
|
||||||
|
const uncommittedStates = services.getUncommitedStates(process);
|
||||||
|
if (uncommittedStates.length > 0) {
|
||||||
|
for (const state of uncommittedStates) {
|
||||||
|
const zoneElement = document.createElement('div');
|
||||||
|
zoneElement.className = 'process-element';
|
||||||
|
const zoneId = `${processId}_${state.state_id}`;
|
||||||
|
zoneElement.setAttribute('zone-id', zoneId);
|
||||||
|
zoneElement.setAttribute('process-id', zoneId);
|
||||||
|
zoneElement.innerHTML = `État (non "commité"): ${state.state_id.substring(0, 10)}...`;
|
||||||
|
addSubscription(zoneElement, 'click', selectState);
|
||||||
|
processDiv.appendChild(zoneElement);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const noStateSpan = document.createElement('span');
|
||||||
|
noStateSpan.innerText = "Ce processus n'a pas d'état en attente.";
|
||||||
|
processDiv.appendChild(noStateSpan);
|
||||||
|
}
|
||||||
|
processCardContent.appendChild(processDiv);
|
||||||
|
} else {
|
||||||
|
console.error(`[process.ts] 💥 Processus ${processId} non trouvé.`);
|
||||||
|
processCardContent.innerHTML = '<span>Erreur: Processus non trouvé.</span>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getProcesses(): Promise<[string, Process][]> {
|
||||||
|
const processes = await services.getProcesses();
|
||||||
|
const res = Object.entries(processes);
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectState(event: Event) {
|
||||||
|
const target = event.currentTarget as HTMLElement;
|
||||||
|
const oldSelectedProcess = shadowContainer.querySelector('.selected-process-zone');
|
||||||
|
oldSelectedProcess?.classList.remove('selected-process-zone');
|
||||||
|
if (target) {
|
||||||
|
target.classList.add('selected-process-zone');
|
||||||
|
}
|
||||||
|
const name = target.getAttribute('zone-id');
|
||||||
|
console.log('[process.ts] 🎯 État sélectionné:', name);
|
||||||
|
}
|
||||||
|
|
||||||
|
function goToProcessPage() {
|
||||||
|
const target = shadowContainer.querySelector('.selected-process-zone');
|
||||||
|
console.log('[process.ts] 🚀 Clic sur "OK". État sélectionné:', target);
|
||||||
|
|
||||||
|
if (target) {
|
||||||
|
const process = target?.getAttribute('process-id');
|
||||||
|
console.log('=======================> Navigation vers process-element', process);
|
||||||
|
|
||||||
|
// Dispatch l'événement 'navigate' que 'router.ts' écoute
|
||||||
|
document.dispatchEvent(
|
||||||
|
new CustomEvent('navigate', {
|
||||||
|
detail: {
|
||||||
|
page: `process-element/${process}`,
|
||||||
|
},
|
||||||
|
bubbles: true,
|
||||||
|
composed: true, // Permet à l'événement de sortir du Shadow DOM
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
console.warn('[process.ts] ⚠️ Clic sur "OK" mais aucun état n\'est sélectionné.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getDescription(process: Process): Promise<string | null> {
|
||||||
|
const lastDifferentState = services.getLastCommitedState(process);
|
||||||
|
if (!lastDifferentState) return null;
|
||||||
|
|
||||||
|
const descriptionHash = lastDifferentState!.pcd_commitment['description'];
|
||||||
|
if (descriptionHash) {
|
||||||
|
const userDiff = await services.getDiffByValue(descriptionHash);
|
||||||
|
if (userDiff) {
|
||||||
|
return userDiff.value_commitment; // Utilise le bon champ
|
||||||
|
} else {
|
||||||
|
console.warn(`[process.ts] Impossible de trouver le 'diff' pour la description (hash: ${descriptionHash})`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user