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

Neutralize process page

Browse Source
This commit is contained in:
NicolasCantu 2025-03-28 12:51:12 +01:00
parent 3f42cb27a7
commit 51c906866e
5 changed files with 521 additions and 514 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/account/account.ts
View File

@ -866,22 +866,29 @@ private updateProcessTableContent(processes: any[]): void {
return; return;
} }
tbody.innerHTML = processes.map(process => ` const service = await Services.getInstance();
<tr>
<td>${process.name || 'N/A'}</td> /*tbody.innerHTML = processes.map((process: Process) => {
<td>${process.role || 'N/A'}</td> const processName = process.states[0]?.public_data?.memberPublicName || 'N/A';
<td> const processId = process.states[0]?.state_id || 'N/A';
<div class="notification-container" onclick="window.showProcessNotifications('${process.id}')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16"> return `
<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/> <tr>
</svg> <td>${processName}</td>
<span class="notification-count" data-process="${process.id}"> <td>${service.getRoles(process) || 'N/A'}</td>
${process.notifications?.unread || 0}/${process.notifications?.total || 0} <td>
</span> <div class="notification-container" onclick="window.showProcessNotifications('${processId}')">
</div> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
</td> <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"/>
</tr> </svg>
`).join(''); <span class="notification-count" data-process="${processId}">
0/0
</span>
</div>
</td>
</tr>
`;
}).join('');*/
} }

84
src/pages/process/process-list-component.ts
View File

@ -1,49 +1,49 @@
import processHtml from './process.html?raw'; // import processHtml from './process.html?raw';
import processScript from './process.ts?raw'; // import processScript from './process.ts?raw';
import processCss from '../../4nk.css?raw'; // import processCss from '../../4nk.css?raw';
import { init } from './process'; // import { init } from './process';
export class ProcessListComponent extends HTMLElement { // export class ProcessListComponent extends HTMLElement {
_callback: any; // _callback: any;
constructor() { // constructor() {
super(); // super();
this.attachShadow({ mode: 'open' }); // this.attachShadow({ mode: 'open' });
} // }
connectedCallback() { // connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE'); // console.log('CALLBACK PROCESS LIST PAGE');
this.render(); // this.render();
setTimeout(() => { // setTimeout(() => {
init(); // init();
}, 500); // }, 500);
} // }
set callback(fn) { // set callback(fn) {
if (typeof fn === 'function') { // if (typeof fn === 'function') {
this._callback = fn; // this._callback = fn;
} else { // } else {
console.error('Callback is not a function'); // console.error('Callback is not a function');
} // }
} // }
get callback() { // get callback() {
return this._callback; // return this._callback;
} // }
render() { // render() {
if (this.shadowRoot) // if (this.shadowRoot)
this.shadowRoot.innerHTML = ` // this.shadowRoot.innerHTML = `
<style> // <style>
${processCss} // ${processCss}
</style>${processHtml} // </style>${processHtml}
<script type="module"> // <script type="module">
${processScript} // ${processScript}
</scipt> // </scipt>
`; // `;
} // }
} // }
if (!customElements.get('process-list-4nk-component')) { // if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent); // customElements.define('process-list-4nk-component', ProcessListComponent);
} // }

4
src/pages/process/process.html
View File

@ -1,4 +1,4 @@
<div class="title-container"> <!-- <div class="title-container">
<h1>Process Selection</h1> <h1>Process Selection</h1>
</div> </div>
@ -16,4 +16,4 @@
<a class="btn" onclick="goToProcessPage()">OK</a> <a class="btn" onclick="goToProcessPage()">OK</a>
</div> </div>
</div> </div>
</div> </div> -->

900
src/pages/process/process.ts
View File

@ -1,520 +1,520 @@
import { addSubscription } from '../../utils/subscription.utils'; // import { addSubscription } from '../../utils/subscription.utils';
import Services from '../../services/service'; // import Services from '../../services/service';
import { getCorrectDOM } from '~/utils/html.utils'; // import { getCorrectDOM } from '~/utils/html.utils';
import { Process } from 'pkg/sdk_client'; // import { Process } from 'pkg/sdk_client';
import chatStyle from '../../../public/style/chat.css?inline'; // import chatStyle from '../../../public/style/chat.css?inline';
import { Database } from '../../services/database.service'; // import { Database } from '../../services/database.service';
// Initialize function, create initial tokens with itens that are already selected by the user // // Initialize function, create initial tokens with itens that are already selected by the user
export async function init() { // export async function init() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement; // const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const element = container.querySelector('select') as HTMLSelectElement; // const element = container.querySelector('select') as HTMLSelectElement;
// Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside // // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
const wrapper = document.createElement('div'); // const wrapper = document.createElement('div');
if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper); // if (wrapper) addSubscription(wrapper, 'click', clickOnWrapper);
wrapper.classList.add('multi-select-component'); // wrapper.classList.add('multi-select-component');
wrapper.classList.add('input-field'); // wrapper.classList.add('input-field');
// Create elements of search // // Create elements of search
const search_div = document.createElement('div'); // const search_div = document.createElement('div');
search_div.classList.add('search-container'); // search_div.classList.add('search-container');
const input = document.createElement('input'); // const input = document.createElement('input');
input.classList.add('selected-input'); // input.classList.add('selected-input');
input.setAttribute('autocomplete', 'off'); // input.setAttribute('autocomplete', 'off');
input.setAttribute('tabindex', '0'); // input.setAttribute('tabindex', '0');
if (input) { // if (input) {
addSubscription(input, 'keyup', inputChange); // addSubscription(input, 'keyup', inputChange);
addSubscription(input, 'keydown', deletePressed); // addSubscription(input, 'keydown', deletePressed);
addSubscription(input, 'click', openOptions); // addSubscription(input, 'click', openOptions);
} // }
const dropdown_icon = document.createElement('a'); // const dropdown_icon = document.createElement('a');
dropdown_icon.classList.add('dropdown-icon'); // dropdown_icon.classList.add('dropdown-icon');
if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown); // if (dropdown_icon) addSubscription(dropdown_icon, 'click', clickDropdown);
const autocomplete_list = document.createElement('ul'); // const autocomplete_list = document.createElement('ul');
autocomplete_list.classList.add('autocomplete-list'); // autocomplete_list.classList.add('autocomplete-list');
search_div.appendChild(input); // search_div.appendChild(input);
search_div.appendChild(autocomplete_list); // search_div.appendChild(autocomplete_list);
search_div.appendChild(dropdown_icon); // search_div.appendChild(dropdown_icon);
// set the wrapper as child (instead of the element) // // set the wrapper as child (instead of the element)
element.parentNode?.replaceChild(wrapper, element); // element.parentNode?.replaceChild(wrapper, element);
// set element as child of wrapper // // set element as child of wrapper
wrapper.appendChild(element); // wrapper.appendChild(element);
wrapper.appendChild(search_div); // wrapper.appendChild(search_div);
addPlaceholder(wrapper); // addPlaceholder(wrapper);
} // }
function removePlaceholder(wrapper: HTMLElement) { // function removePlaceholder(wrapper: HTMLElement) {
const input_search = wrapper.querySelector('.selected-input'); // const input_search = wrapper.querySelector('.selected-input');
input_search?.removeAttribute('placeholder'); // input_search?.removeAttribute('placeholder');
} // }
function addPlaceholder(wrapper: HTMLElement) { // function addPlaceholder(wrapper: HTMLElement) {
const input_search = wrapper.querySelector('.selected-input'); // const input_search = wrapper.querySelector('.selected-input');
const tokens = wrapper.querySelectorAll('.selected-wrapper'); // const tokens = wrapper.querySelectorAll('.selected-wrapper');
if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------'); // if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
} // }
// Listener of user search // // Listener of user search
function inputChange(e: Event) { // function inputChange(e: Event) {
const target = e.target as HTMLInputElement; // const target = e.target as HTMLInputElement;
const wrapper = target?.parentNode?.parentNode; // const wrapper = target?.parentNode?.parentNode;
const select = wrapper?.querySelector('select') as HTMLSelectElement; // const select = wrapper?.querySelector('select') as HTMLSelectElement;
const dropdown = wrapper?.querySelector('.dropdown-icon'); // const dropdown = wrapper?.querySelector('.dropdown-icon');
const input_val = target?.value; // const input_val = target?.value;
if (input_val) { // if (input_val) {
dropdown?.classList.add('active'); // dropdown?.classList.add('active');
populateAutocompleteList(select, input_val.trim()); // populateAutocompleteList(select, input_val.trim());
} else { // } else {
dropdown?.classList.remove('active'); // dropdown?.classList.remove('active');
const event = new Event('click'); // const event = new Event('click');
dropdown?.dispatchEvent(event); // dropdown?.dispatchEvent(event);
} // }
} // }
// Listen for clicks on the wrapper, if click happens focus on the input // // Listen for clicks on the wrapper, if click happens focus on the input
function clickOnWrapper(e: Event) { // function clickOnWrapper(e: Event) {
const wrapper = e.target as HTMLElement; // const wrapper = e.target as HTMLElement;
if (wrapper.tagName == 'DIV') { // if (wrapper.tagName == 'DIV') {
const input_search = wrapper.querySelector('.selected-input'); // const input_search = wrapper.querySelector('.selected-input');
const dropdown = wrapper.querySelector('.dropdown-icon'); // const dropdown = wrapper.querySelector('.dropdown-icon');
if (!dropdown?.classList.contains('active')) { // if (!dropdown?.classList.contains('active')) {
const event = new Event('click'); // const event = new Event('click');
dropdown?.dispatchEvent(event); // dropdown?.dispatchEvent(event);
} // }
(input_search as HTMLInputElement)?.focus(); // (input_search as HTMLInputElement)?.focus();
removePlaceholder(wrapper); // removePlaceholder(wrapper);
} // }
} // }
function openOptions(e: Event) { // function openOptions(e: Event) {
const input_search = e.target as HTMLElement; // const input_search = e.target as HTMLElement;
const wrapper = input_search?.parentElement?.parentElement; // const wrapper = input_search?.parentElement?.parentElement;
const dropdown = wrapper?.querySelector('.dropdown-icon'); // const dropdown = wrapper?.querySelector('.dropdown-icon');
if (!dropdown?.classList.contains('active')) { // if (!dropdown?.classList.contains('active')) {
const event = new Event('click'); // const event = new Event('click');
dropdown?.dispatchEvent(event); // dropdown?.dispatchEvent(event);
} // }
e.stopPropagation(); // e.stopPropagation();
} // }
// Function that create a token inside of a wrapper with the given value // // Function that create a token inside of a wrapper with the given value
function createToken(wrapper: HTMLElement, value: any) { // function createToken(wrapper: HTMLElement, value: any) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement; // const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const search = wrapper.querySelector('.search-container'); // const search = wrapper.querySelector('.search-container');
const inputInderline = container.querySelector('.selected-processes'); // const inputInderline = container.querySelector('.selected-processes');
// Create token wrapper // // Create token wrapper
const token = document.createElement('div'); // const token = document.createElement('div');
token.classList.add('selected-wrapper'); // token.classList.add('selected-wrapper');
const token_span = document.createElement('span'); // const token_span = document.createElement('span');
token_span.classList.add('selected-label'); // token_span.classList.add('selected-label');
token_span.innerText = value; // token_span.innerText = value;
const close = document.createElement('a'); // const close = document.createElement('a');
close.classList.add('selected-close'); // close.classList.add('selected-close');
close.setAttribute('tabindex', '-1'); // close.setAttribute('tabindex', '-1');
close.setAttribute('data-option', value); // close.setAttribute('data-option', value);
close.setAttribute('data-hits', '0'); // close.setAttribute('data-hits', '0');
close.innerText = 'x'; // close.innerText = 'x';
if (close) addSubscription(close, 'click', removeToken); // if (close) addSubscription(close, 'click', removeToken);
token.appendChild(token_span); // token.appendChild(token_span);
token.appendChild(close); // token.appendChild(close);
inputInderline?.appendChild(token); // inputInderline?.appendChild(token);
} // }
// Listen for clicks in the dropdown option // // Listen for clicks in the dropdown option
function clickDropdown(e: Event) { // function clickDropdown(e: Event) {
const dropdown = e.target as HTMLElement; // const dropdown = e.target as HTMLElement;
const wrapper = dropdown?.parentNode?.parentNode; // const wrapper = dropdown?.parentNode?.parentNode;
const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement; // const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
const select = wrapper?.querySelector('select') as HTMLSelectElement; // const select = wrapper?.querySelector('select') as HTMLSelectElement;
dropdown.classList.toggle('active'); // dropdown.classList.toggle('active');
if (dropdown.classList.contains('active')) { // if (dropdown.classList.contains('active')) {
removePlaceholder(wrapper as HTMLElement); // removePlaceholder(wrapper as HTMLElement);
input_search?.focus(); // input_search?.focus();
if (!input_search?.value) { // if (!input_search?.value) {
populateAutocompleteList(select, '', true); // populateAutocompleteList(select, '', true);
} else { // } else {
populateAutocompleteList(select, input_search.value); // populateAutocompleteList(select, input_search.value);
} // }
} else { // } else {
clearAutocompleteList(select); // clearAutocompleteList(select);
addPlaceholder(wrapper as HTMLElement); // addPlaceholder(wrapper as HTMLElement);
} // }
} // }
// Clears the results of the autocomplete list // // Clears the results of the autocomplete list
function clearAutocompleteList(select: HTMLSelectElement) { // function clearAutocompleteList(select: HTMLSelectElement) {
const wrapper = select.parentNode; // const wrapper = select.parentNode;
const autocomplete_list = wrapper?.querySelector('.autocomplete-list'); // const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
if (autocomplete_list) autocomplete_list.innerHTML = ''; // if (autocomplete_list) autocomplete_list.innerHTML = '';
} // }
async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) { // async function populateAutocompleteList(select: HTMLSelectElement, query: string, dropdown = false) {
const { autocomplete_options } = getOptions(select); // const { autocomplete_options } = getOptions(select);
let options_to_show = []; // let options_to_show = [];
const service = await Services.getInstance(); // const service = await Services.getInstance();
const mineArray: string[] = await service.getMyProcesses(); // const mineArray: string[] = await service.getMyProcesses();
const allProcesses = await service.getProcesses(); // const allProcesses = await service.getProcesses();
const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x)); // const allArray: string[] = Object.keys(allProcesses).filter(x => !mineArray.includes(x));
const wrapper = select.parentNode; // const wrapper = select.parentNode;
const input_search = wrapper?.querySelector('.search-container'); // const input_search = wrapper?.querySelector('.search-container');
const autocomplete_list = wrapper?.querySelector('.autocomplete-list'); // const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
if (autocomplete_list) autocomplete_list.innerHTML = ''; // if (autocomplete_list) autocomplete_list.innerHTML = '';
const addProcessToList = (processId:string, isMine: boolean) => { // const addProcessToList = (processId:string, isMine: boolean) => {
const li = document.createElement('li'); // const li = document.createElement('li');
li.innerText = processId; // li.innerText = processId;
li.setAttribute("data-value", processId); // li.setAttribute("data-value", processId);
if (isMine) { // if (isMine) {
li.classList.add("my-process"); // li.classList.add("my-process");
li.style.cssText = `color: var(--accent-color)`; // li.style.cssText = `color: var(--accent-color)`;
} // }
if (li) addSubscription(li, 'click', selectOption); // if (li) addSubscription(li, 'click', selectOption);
autocomplete_list?.appendChild(li); // autocomplete_list?.appendChild(li);
}; // };
mineArray.forEach(processId => addProcessToList(processId, true)); // mineArray.forEach(processId => addProcessToList(processId, true));
allArray.forEach(processId => addProcessToList(processId, false)); // allArray.forEach(processId => addProcessToList(processId, false));
if (mineArray.length === 0 && allArray.length === 0) { // if (mineArray.length === 0 && allArray.length === 0) {
const li = document.createElement('li'); // const li = document.createElement('li');
li.classList.add('not-cursor'); // li.classList.add('not-cursor');
li.innerText = 'No options found'; // li.innerText = 'No options found';
autocomplete_list?.appendChild(li); // autocomplete_list?.appendChild(li);
} // }
} // }
// Listener to autocomplete results when clicked set the selected property in the select option // // Listener to autocomplete results when clicked set the selected property in the select option
function selectOption(e: any) { // function selectOption(e: any) {
console.log('🎯 Click event:', e); // console.log('🎯 Click event:', e);
console.log('🎯 Target value:', e.target.dataset.value); // console.log('🎯 Target value:', e.target.dataset.value);
const wrapper = e.target.parentNode.parentNode.parentNode; // const wrapper = e.target.parentNode.parentNode.parentNode;
const select = wrapper.querySelector('select'); // const select = wrapper.querySelector('select');
const input_search = wrapper.querySelector('.selected-input'); // const input_search = wrapper.querySelector('.selected-input');
const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`); // const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
console.log('🎯 Selected option:', option); // console.log('🎯 Selected option:', option);
console.log('🎯 Process ID:', option?.getAttribute('data-process-id')); // console.log('🎯 Process ID:', option?.getAttribute('data-process-id'));
if (e.target.dataset.value.includes('messaging')) { // if (e.target.dataset.value.includes('messaging')) {
const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]); // const messagingNumber = parseInt(e.target.dataset.value.split(' ')[1]);
const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`); // const processId = select.getAttribute(`data-messaging-id-${messagingNumber}`);
console.log('🚀 Dispatching newMessagingProcess event:', { // console.log('🚀 Dispatching newMessagingProcess event:', {
processId, // processId,
processName: `Messaging Process ${processId}` // processName: `Messaging Process ${processId}`
}); // });
// Dispatch l'événement avant la navigation // // Dispatch l'événement avant la navigation
document.dispatchEvent(new CustomEvent('newMessagingProcess', { // document.dispatchEvent(new CustomEvent('newMessagingProcess', {
detail: { // detail: {
processId: processId, // processId: processId,
processName: `Messaging Process ${processId}` // processName: `Messaging Process ${processId}`
} // }
})); // }));
// Navigation vers le chat // // Navigation vers le chat
const navigateEvent = new CustomEvent('navigate', { // const navigateEvent = new CustomEvent('navigate', {
detail: { // detail: {
page: 'chat', // page: 'chat',
processId: processId || '' // processId: processId || ''
} // }
}); // });
document.dispatchEvent(navigateEvent); // document.dispatchEvent(navigateEvent);
return; // return;
} // }
option.setAttribute('selected', ''); // option.setAttribute('selected', '');
createToken(wrapper, e.target.dataset.value); // createToken(wrapper, e.target.dataset.value);
if (input_search.value) { // if (input_search.value) {
input_search.value = ''; // input_search.value = '';
} // }
showSelectedProcess(e.target.dataset.value); // showSelectedProcess(e.target.dataset.value);
input_search.focus(); // input_search.focus();
e.target.remove(); // e.target.remove();
const autocomplete_list = wrapper.querySelector('.autocomplete-list'); // const autocomplete_list = wrapper.querySelector('.autocomplete-list');
if (!autocomplete_list.children.length) { // if (!autocomplete_list.children.length) {
const li = document.createElement('li'); // const li = document.createElement('li');
li.classList.add('not-cursor'); // li.classList.add('not-cursor');
li.innerText = 'No options found'; // li.innerText = 'No options found';
autocomplete_list.appendChild(li); // autocomplete_list.appendChild(li);
} // }
const event = new Event('keyup'); // const event = new Event('keyup');
input_search.dispatchEvent(event); // input_search.dispatchEvent(event);
e.stopPropagation(); // e.stopPropagation();
} // }
// function that returns a list with the autcomplete list of matches // // function that returns a list with the autcomplete list of matches
function autocomplete(query: string, options: any) { // function autocomplete(query: string, options: any) {
// No query passed, just return entire list // // No query passed, just return entire list
if (!query) { // if (!query) {
return options; // return options;
} // }
let options_return = []; // let options_return = [];
for (let i = 0; i < options.length; i++) { // for (let i = 0; i < options.length; i++) {
if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) { // if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
options_return.push(options[i]); // options_return.push(options[i]);
} // }
} // }
return options_return; // return options_return;
} // }
// Returns the options that are selected by the user and the ones that are not // // Returns the options that are selected by the user and the ones that are not
function getOptions(select: HTMLSelectElement) { // function getOptions(select: HTMLSelectElement) {
// Select all the options available // // Select all the options available
const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value); // const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
// Get the options that are selected from the user // // Get the options that are selected from the user
const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value); // const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
// Create an autocomplete options array with the options that are not selected by the user // // Create an autocomplete options array with the options that are not selected by the user
const autocomplete_options: any[] = []; // const autocomplete_options: any[] = [];
all_options.forEach((option) => { // all_options.forEach((option) => {
if (!options_selected.includes(option)) { // if (!options_selected.includes(option)) {
autocomplete_options.push(option); // autocomplete_options.push(option);
} // }
}); // });
autocomplete_options.sort(); // autocomplete_options.sort();
return { // return {
options_selected, // options_selected,
autocomplete_options, // autocomplete_options,
}; // };
} // }
// Listener for when the user wants to remove a given token. // // Listener for when the user wants to remove a given token.
function removeToken(e: Event) { // function removeToken(e: Event) {
// Get the value to remove // // Get the value to remove
const target = e.target as HTMLSelectElement; // const target = e.target as HTMLSelectElement;
const value_to_remove = target.dataset.option; // const value_to_remove = target.dataset.option;
const wrapper = target.parentNode?.parentNode?.parentNode; // const wrapper = target.parentNode?.parentNode?.parentNode;
const input_search = wrapper?.querySelector('.selected-input'); // const input_search = wrapper?.querySelector('.selected-input');
const dropdown = wrapper?.querySelector('.dropdown-icon'); // const dropdown = wrapper?.querySelector('.dropdown-icon');
// Get the options in the select to be unselected // // Get the options in the select to be unselected
const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`); // const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
option_to_unselect?.removeAttribute('selected'); // option_to_unselect?.removeAttribute('selected');
// Remove token attribute // // Remove token attribute
(target.parentNode as any)?.remove(); // (target.parentNode as any)?.remove();
dropdown?.classList.remove('active'); // dropdown?.classList.remove('active');
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement; // const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const process = container.querySelector('#' + target.dataset.option); // const process = container.querySelector('#' + target.dataset.option);
process?.remove(); // process?.remove();
} // }
// Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist // // Listen for 2 sequence of hits on the delete key, if this happens delete the last token if exist
function deletePressed(e: Event) { // function deletePressed(e: Event) {
const input_search = e.target as HTMLInputElement; // const input_search = e.target as HTMLInputElement;
const wrapper = input_search?.parentNode?.parentNode; // const wrapper = input_search?.parentNode?.parentNode;
const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode; // const key = (e as KeyboardEvent).keyCode || (e as KeyboardEvent).charCode;
const tokens = wrapper?.querySelectorAll('.selected-wrapper'); // const tokens = wrapper?.querySelectorAll('.selected-wrapper');
if (tokens?.length) { // if (tokens?.length) {
const last_token_x = tokens[tokens.length - 1].querySelector('a'); // const last_token_x = tokens[tokens.length - 1].querySelector('a');
let hits = +(last_token_x?.dataset?.hits || 0); // let hits = +(last_token_x?.dataset?.hits || 0);
if (key == 8 || key == 46) { // if (key == 8 || key == 46) {
if (!input_search.value) { // if (!input_search.value) {
if (hits > 1) { // if (hits > 1) {
// Trigger delete event // // Trigger delete event
const event = new Event('click'); // const event = new Event('click');
last_token_x?.dispatchEvent(event); // last_token_x?.dispatchEvent(event);
} else { // } else {
if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2'; // if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
} // }
} // }
} else { // } else {
if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0'; // if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
} // }
} // }
return true; // return true;
} // }
// Dismiss on outside click // // Dismiss on outside click
addSubscription(document, 'click', () => { // addSubscription(document, 'click', () => {
// get select that has the options available // // get select that has the options available
const select = document.querySelectorAll('[data-multi-select-plugin]'); // const select = document.querySelectorAll('[data-multi-select-plugin]');
for (let i = 0; i < select.length; i++) { // for (let i = 0; i < select.length; i++) {
if (event) { // if (event) {
var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node); // var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
if (!isClickInside) { // if (!isClickInside) {
const wrapper = select[i].parentElement?.parentElement; // const wrapper = select[i].parentElement?.parentElement;
const dropdown = wrapper?.querySelector('.dropdown-icon'); // const dropdown = wrapper?.querySelector('.dropdown-icon');
const autocomplete_list = wrapper?.querySelector('.autocomplete-list'); // const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
//the click was outside the specifiedElement, do something // //the click was outside the specifiedElement, do something
dropdown?.classList.remove('active'); // dropdown?.classList.remove('active');
if (autocomplete_list) autocomplete_list.innerHTML = ''; // if (autocomplete_list) autocomplete_list.innerHTML = '';
addPlaceholder(wrapper as HTMLElement); // addPlaceholder(wrapper as HTMLElement);
} // }
} // }
} // }
}); // });
async function showSelectedProcess(elem: MouseEvent) { // async function showSelectedProcess(elem: MouseEvent) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement; // const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
if (elem) { // if (elem) {
const cardContent = container.querySelector('.process-card-content'); // const cardContent = container.querySelector('.process-card-content');
const processes = await getProcesses(); // const processes = await getProcesses();
const process = processes.find((process: any) => process[1].title === elem); // const process = processes.find((process: any) => process[1].title === elem);
if (process) { // if (process) {
const processDiv = document.createElement('div'); // const processDiv = document.createElement('div');
processDiv.className = 'process'; // processDiv.className = 'process';
processDiv.id = process[0]; // processDiv.id = process[0];
const titleDiv = document.createElement('div'); // const titleDiv = document.createElement('div');
titleDiv.className = 'process-title'; // titleDiv.className = 'process-title';
titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`; // titleDiv.innerHTML = `${process[1].title} : ${process[1].description}`;
processDiv.appendChild(titleDiv); // processDiv.appendChild(titleDiv);
for (const zone of process.zones) { // for (const zone of process.zones) {
const zoneElement = document.createElement('div'); // const zoneElement = document.createElement('div');
zoneElement.className = 'process-element'; // zoneElement.className = 'process-element';
const zoneId = process[1].title + '-' + zone.id; // const zoneId = process[1].title + '-' + zone.id;
zoneElement.setAttribute('zone-id', zoneId); // zoneElement.setAttribute('zone-id', zoneId);
zoneElement.setAttribute('process-title', process[1].title); // zoneElement.setAttribute('process-title', process[1].title);
zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`); // zoneElement.setAttribute('process-id', `${process[0]}_${zone.id}`);
zoneElement.innerHTML = `${zone.title}: ${zone.description}`; // zoneElement.innerHTML = `${zone.title}: ${zone.description}`;
addSubscription(zoneElement, 'click', select); // addSubscription(zoneElement, 'click', select);
processDiv.appendChild(zoneElement); // processDiv.appendChild(zoneElement);
} // }
if (cardContent) cardContent.appendChild(processDiv); // if (cardContent) cardContent.appendChild(processDiv);
} // }
} // }
} // }
function select(event: Event) { // function select(event: Event) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement; // const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = event.target as HTMLElement; // const target = event.target as HTMLElement;
const oldSelectedProcess = container.querySelector('.selected-process-zone'); // const oldSelectedProcess = container.querySelector('.selected-process-zone');
oldSelectedProcess?.classList.remove('selected-process-zone'); // oldSelectedProcess?.classList.remove('selected-process-zone');
if (target) { // if (target) {
target.classList.add('selected-process-zone'); // target.classList.add('selected-process-zone');
} // }
const name = target.getAttribute('zone-id'); // const name = target.getAttribute('zone-id');
console.log('🚀 ~ select ~ name:', name); // console.log('🚀 ~ select ~ name:', name);
} // }
function goToProcessPage() { // function goToProcessPage() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement; // const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = container.querySelector('.selected-process-zone'); // const target = container.querySelector('.selected-process-zone');
console.log('🚀 ~ goToProcessPage ~ event:', target); // console.log('🚀 ~ goToProcessPage ~ event:', target);
if (target) { // if (target) {
const process = target?.getAttribute('process-id'); // const process = target?.getAttribute('process-id');
console.log('=======================> going to process page', process); // console.log('=======================> going to process page', process);
// navigate('process-element/' + process); // // navigate('process-element/' + process);
document.querySelector('process-list-4nk-component')?.dispatchEvent( // document.querySelector('process-list-4nk-component')?.dispatchEvent(
new CustomEvent('processSelected', { // new CustomEvent('processSelected', {
detail: { // detail: {
process: process, // process: process,
}, // },
}), // }),
); // );
} // }
} // }
(window as any).goToProcessPage = goToProcessPage; // (window as any).goToProcessPage = goToProcessPage;
async function createMessagingProcess(): Promise<void> { // async function createMessagingProcess(): Promise<void> {
console.log('Creating messaging process'); // console.log('Creating messaging process');
const service = await Services.getInstance(); // const service = await Services.getInstance();
const otherMembers = [ // const otherMembers = [
{ // {
sp_addresses: [ // sp_addresses: [
"tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a", // "tsp1qqd7snxfh44am8f7a3x36znkh4v0dcagcgakfux488ghsg0tny7degq4gd9q4n4us0cyp82643f2p4jgcmtwknadqwl3waf9zrynl6n7lug5tg73a",
"tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc" // "tsp1qqvd8pak9fyz55rxqj90wxazqzwupf2egderc96cn84h3l84z8an9vql85scudrmwvsnltfuy9ungg7pxnhys2ft5wnf2gyr3n4ukvezygswesjuc"
] // ]
}, // },
{ // {
sp_addresses: [ // sp_addresses: [
"tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7", // "tsp1qqgl5vawdey6wnnn2sfydcejsr06uzwsjlfa6p6yr8u4mkqwezsnvyqlazuqmxhxd8crk5eq3wfvdwv4k3tn68mkj2nj72jj39d2ngauu4unfx0q7",
"tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28" // "tsp1qqthmj56gj8vvkjzwhcmswftlrf6ye7ukpks2wra92jkehqzrvx7m2q570q5vv6zj6dnxvussx2h8arvrcfwz9sp5hpdzrfugmmzz90pmnganxk28"
] // ]
}, // },
{ // {
sp_addresses: [ // sp_addresses: [
"tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2", // "tsp1qqwjtxr9jye7d40qxrsmd6h02egdwel6mfnujxzskgxvxphfya4e6qqjq4tsdmfdmtnmccz08ut24q8y58qqh4lwl3w8pvh86shlmavrt0u3smhv2",
"tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5" // "tsp1qqwn7tf8q2jhmfh8757xze53vg2zc6x5u6f26h3wyty9mklvcy0wnvqhhr4zppm5uyyte4y86kljvh8r0tsmkmszqqwa3ecf2lxcs7q07d56p8sz5"
] // ]
} // }
]; // ];
await service.checkConnections(otherMembers); // await service.checkConnections(otherMembers);
const relayAddress = service.getAllRelays().pop(); // const relayAddress = service.getAllRelays().pop();
if (!relayAddress) { // if (!relayAddress) {
throw new Error('Empty relay address list'); // throw new Error('Empty relay address list');
} // }
const feeRate = 1; // const feeRate = 1;
setTimeout(async () => { // setTimeout(async () => {
const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate); // const createProcessReturn = await service.createMessagingProcess(otherMembers, relayAddress.spAddress, feeRate);
const updatedProcess = createProcessReturn.updated_process.current_process; // const updatedProcess = createProcessReturn.updated_process.current_process;
if (!updatedProcess) { // if (!updatedProcess) {
console.error('Failed to retrieved new messaging process'); // console.error('Failed to retrieved new messaging process');
return; // return;
} // }
const processId = updatedProcess.states[0].commited_in; // const processId = updatedProcess.states[0].commited_in;
const stateId = updatedProcess.states[0].state_id; // const stateId = updatedProcess.states[0].state_id;
await service.handleApiReturn(createProcessReturn); // await service.handleApiReturn(createProcessReturn);
const createPrdReturn = await service.createPrdUpdate(processId, stateId); // const createPrdReturn = await service.createPrdUpdate(processId, stateId);
await service.handleApiReturn(createPrdReturn); // await service.handleApiReturn(createPrdReturn);
const approveChangeReturn = await service.approveChange(processId, stateId); // const approveChangeReturn = await service.approveChange(processId, stateId);
await service.handleApiReturn(approveChangeReturn); // await service.handleApiReturn(approveChangeReturn);
}, 500) // }, 500)
} // }
async function getDescription(processId: string, process: Process): Promise<string | null> { // async function getDescription(processId: string, process: Process): Promise<string | null> {
const service = await Services.getInstance(); // const service = await Services.getInstance();
// Get the `commited_in` value of the last state and remove it from the array // // Get the `commited_in` value of the last state and remove it from the array
const currentCommitedIn = process.states.pop()?.commited_in; // const currentCommitedIn = process.states.pop()?.commited_in;
if (currentCommitedIn === undefined) { // if (currentCommitedIn === undefined) {
return null; // No states available // return null; // No states available
} // }
// Find the last state where `commited_in` is different // // Find the last state where `commited_in` is different
let lastDifferentState = process.states.findLast( // let lastDifferentState = process.states.findLast(
state => state.commited_in !== currentCommitedIn // state => state.commited_in !== currentCommitedIn
); // );
if (!lastDifferentState) { // if (!lastDifferentState) {
// It means that we only have one state that is not commited yet, that can happen with process we just created // // It means that we only have one state that is not commited yet, that can happen with process we just created
// 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 // // 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
lastDifferentState = process.states.pop(); // lastDifferentState = process.states.pop();
} // }
// Take the description out of the state, if any // // Take the description out of the state, if any
const description = lastDifferentState!.pcd_commitment['description']; // const description = lastDifferentState!.pcd_commitment['description'];
if (description) { // if (description) {
const userDiff = await service.getDiffByValue(description); // const userDiff = await service.getDiffByValue(description);
if (userDiff) { // if (userDiff) {
console.log("Successfully retrieved userDiff:", userDiff); // console.log("Successfully retrieved userDiff:", userDiff);
return userDiff.new_value; // return userDiff.new_value;
} else { // } else {
console.log("Failed to retrieve a non-null userDiff."); // console.log("Failed to retrieve a non-null userDiff.");
} // }
} // }
return null; // return null;
} // }

8
src/router.ts
View File

@ -62,14 +62,14 @@ async function handleLocation(path: string) {
switch (path) { switch (path) {
case 'process': case 'process':
// const { init } = await import('./pages/process/process'); // const { init } = await import('./pages/process/process');
const { ProcessListComponent } = await import('./pages/process/process-list-component'); //const { ProcessListComponent } = await import('./pages/process/process-list-component');
const container2 = document.querySelector('#containerId'); const container2 = document.querySelector('#containerId');
const accountComponent = document.createElement('process-list-4nk-component'); const accountComponent = document.createElement('process-list-4nk-component');
if (!customElements.get('process-list-4nk-component')) { //if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent); //customElements.define('process-list-4nk-component', ProcessListComponent);
} //}
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;'); accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
if (container2) container2.appendChild(accountComponent); if (container2) container2.appendChild(accountComponent);
break; break;