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';
|
||||
import processScript from './process-element.ts?raw';
|
||||
import processCss from '../../4nk.css?raw';
|
||||
import { initProcessElement } from './process-element';
|
||||
// src/pages/process-element/process-component.ts
|
||||
|
||||
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;
|
||||
id: string = '';
|
||||
zone: string = '';
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@ -14,38 +14,61 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK PROCESS LIST PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
initProcessElement(this.id, this.zone);
|
||||
}, 500);
|
||||
}
|
||||
console.log('[ProcessElementComponent] 1. Composant connecté.');
|
||||
|
||||
set callback(fn) {
|
||||
if (typeof fn === 'function') {
|
||||
this._callback = fn;
|
||||
} else {
|
||||
console.error('Callback is not a function');
|
||||
// 2. Lire les attributs passés par le routeur (router.ts)
|
||||
const processId = this.getAttribute('process-id');
|
||||
const stateId = this.getAttribute('state-id');
|
||||
|
||||
if (!processId || !stateId) {
|
||||
console.error("💥 ProcessElementComponent a été créé sans 'process-id' ou 'state-id'.");
|
||||
this.renderError("Erreur: ID de processus ou d'état manquant.");
|
||||
return;
|
||||
}
|
||||
|
||||
// 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() {
|
||||
if (this.shadowRoot)
|
||||
if (this.shadowRoot) {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${processCss}
|
||||
</style>${processHtml}
|
||||
<script type="module">
|
||||
${processScript}
|
||||
</scipt>
|
||||
<style>${processCss}</style>
|
||||
${processHtml}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
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')) {
|
||||
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 Services from '../../services/service';
|
||||
import { Process } from 'pkg/sdk_client';
|
||||
import { getCorrectDOM } from '~/utils/document.utils';
|
||||
import { Process, ProcessState } from 'pkg/sdk_client';
|
||||
// 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}`);
|
||||
|
||||
export async function initProcessElement(id: string, zone: string) {
|
||||
const processes = await getProcesses();
|
||||
const container = getCorrectDOM('process-4nk-component');
|
||||
// const currentProcess = processes.find((process) => process[0] === id)[1];
|
||||
// const currentProcess = {title: 'Hello', html: '', css: ''};
|
||||
// await loadPage({ processTitle: currentProcess.title, inputValue: 'Hello World !' });
|
||||
// const wrapper = document.querySelector('.process-container');
|
||||
// if (wrapper) {
|
||||
// wrapper.innerHTML = interpolate(currentProcess.html, { processTitle: currentProcess.title, inputValue: 'Hello World !' });
|
||||
// injectCss(currentProcess.css);
|
||||
// }
|
||||
const services = await Services.getInstance();
|
||||
|
||||
// 2. Récupérer les éléments du DOM *dans* le shadowRoot (container)
|
||||
const titleH1 = container.querySelector('h1');
|
||||
const processContainer = container.querySelector('.process-container');
|
||||
|
||||
if (!titleH1 || !processContainer) {
|
||||
console.error("[process-element.ts] 💥 Le HTML de base (h1 ou .process-container) est introuvable !");
|
||||
return;
|
||||
}
|
||||
|
||||
// 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');
|
||||
if (content && data) {
|
||||
if (data) {
|
||||
content.innerHTML = interpolate(content.innerHTML, data);
|
||||
/**
|
||||
* Helper (exemple) pour déchiffrer et afficher les données dans le conteneur
|
||||
*/
|
||||
async function decryptAndDisplayAttributes(services: Services, container: ShadowRoot, processId: string, state: ProcessState) {
|
||||
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) {
|
||||
removeCss(); // Ensure that the previous CSS is removed
|
||||
// Affiche les données privées
|
||||
for (const attribute of Object.keys(state.pcd_commitment)) {
|
||||
if (attribute === 'roles' || (state.public_data && state.public_data[attribute])) {
|
||||
continue; // Skip les données publiques (déjà fait) et les rôles
|
||||
}
|
||||
|
||||
currentPageStyle = document.createElement('style');
|
||||
currentPageStyle.type = 'text/css';
|
||||
currentPageStyle.appendChild(document.createTextNode(cssContent));
|
||||
document.head.appendChild(currentPageStyle);
|
||||
}
|
||||
const decryptedValue = await services.decryptAttribute(processId, state, attribute);
|
||||
|
||||
function removeCss() {
|
||||
if (currentPageStyle) {
|
||||
document.head.removeChild(currentPageStyle);
|
||||
currentPageStyle = null;
|
||||
}
|
||||
}
|
||||
const el = document.createElement('div');
|
||||
el.className = 'attribute-pair private';
|
||||
|
||||
async function getProcesses(): Promise<Record<string, Process>> {
|
||||
const service = await Services.getInstance();
|
||||
const processes = await service.getProcesses();
|
||||
return processes;
|
||||
if (decryptedValue) {
|
||||
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>`;
|
||||
}
|
||||
attributesList.appendChild(el);
|
||||
}
|
||||
|
||||
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';
|
||||
// import processScript from './process.ts?raw';
|
||||
// import processCss from '../../4nk.css?raw';
|
||||
// import { init } from './process';
|
||||
// src/pages/process/process-list-component.ts
|
||||
|
||||
// export class ProcessListComponent extends HTMLElement {
|
||||
// _callback: any;
|
||||
// constructor() {
|
||||
// super();
|
||||
// this.attachShadow({ mode: 'open' });
|
||||
// }
|
||||
import processHtml from './process.html?raw';
|
||||
import processCss from '../../4nk.css?raw';
|
||||
import { init } from './process';
|
||||
|
||||
// connectedCallback() {
|
||||
// console.log('CALLBACK PROCESS LIST PAGE');
|
||||
// this.render();
|
||||
// setTimeout(() => {
|
||||
// init();
|
||||
// }, 500);
|
||||
// }
|
||||
export class ProcessListComponent extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
}
|
||||
|
||||
// set callback(fn) {
|
||||
// if (typeof fn === 'function') {
|
||||
// this._callback = fn;
|
||||
// } else {
|
||||
// console.error('Callback is not a function');
|
||||
// }
|
||||
// }
|
||||
connectedCallback() {
|
||||
this.render();
|
||||
|
||||
// get callback() {
|
||||
// return this._callback;
|
||||
// }
|
||||
try {
|
||||
if (this.shadowRoot) {
|
||||
init(this.shadowRoot);
|
||||
} else {
|
||||
console.error('[ProcessListComponent] 💥 ShadowRoot est nul.');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("[ProcessListComponent] 💥 Échec de l'init():", e);
|
||||
}
|
||||
}
|
||||
|
||||
// render() {
|
||||
// if (this.shadowRoot)
|
||||
// this.shadowRoot.innerHTML = `
|
||||
// <style>
|
||||
// ${processCss}
|
||||
// </style>${processHtml}
|
||||
// <script type="module">
|
||||
// ${processScript}
|
||||
// </scipt>
|
||||
render() {
|
||||
if (this.shadowRoot) {
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>${processCss}</style>
|
||||
${processHtml}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// `;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// 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>
|
||||
</div>
|
||||
|
||||
@ -7,13 +7,17 @@
|
||||
<div class="process-card-description">
|
||||
<div class="input-container">
|
||||
<select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"></select>
|
||||
|
||||
<label for="autocomplete" class="input-label">Filter processes :</label>
|
||||
|
||||
<div class="selected-processes"></div>
|
||||
</div>
|
||||
|
||||
<div class="process-card-content"></div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user