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

refactor(process-list): streamline code by removing commented-out lines, optimizing async calls, and enhancing readability in ProcessListPage component

Browse Source
This commit is contained in:
Sadrinho27 2025-12-02 00:11:06 +01:00
parent 662f3820d5
commit 4f86b26890
1 changed files with 16 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/process/ProcessList.ts
View File

@ -1,5 +1,3 @@
// src/pages/process/ProcessList.ts
import processHtml from "./process.html?raw"; import processHtml from "./process.html?raw";
import globalCss from "../../assets/styles/style.css?inline"; import globalCss from "../../assets/styles/style.css?inline";
import Services from "../../services/service"; import Services from "../../services/service";
@ -28,11 +26,9 @@ export class ProcessListPage extends HTMLElement {
render() { render() {
if (this.shadowRoot) { if (this.shadowRoot) {
// Le CSS et le HTML de base sont statiques, donc innerHTML est OK ici.
this.shadowRoot.innerHTML = ` this.shadowRoot.innerHTML = `
<style> <style>
${globalCss} ${globalCss}
/* ... (styles identiques à ton fichier d'origine, je ne les répète pas pour abréger) ... */
:host { display: block; width: 100%; } :host { display: block; width: 100%; }
.process-layout { padding: 2rem; display: flex; justify-content: center; } .process-layout { padding: 2rem; display: flex; justify-content: center; }
.dashboard-container { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 1.5rem; max-height: 85vh; overflow-y: auto; } .dashboard-container { width: 100%; max-width: 800px; display: flex; flex-direction: column; gap: 1.5rem; max-height: 85vh; overflow-y: auto; }
@ -77,18 +73,10 @@ export class ProcessListPage extends HTMLElement {
this.wrapper = root.querySelector("#autocomplete-wrapper") as HTMLElement; this.wrapper = root.querySelector("#autocomplete-wrapper") as HTMLElement;
this.inputInput = root.querySelector("#process-input") as HTMLInputElement; this.inputInput = root.querySelector("#process-input") as HTMLInputElement;
this.autocompleteList = root.querySelector( this.autocompleteList = root.querySelector("#autocomplete-list") as HTMLUListElement;
"#autocomplete-list" this.tagsContainer = root.querySelector("#selected-tags-container") as HTMLElement;
) as HTMLUListElement; this.detailsContainer = root.querySelector("#process-details") as HTMLElement;
this.tagsContainer = root.querySelector( this.okButton = root.querySelector("#go-to-process-btn") as HTMLButtonElement;
"#selected-tags-container"
) as HTMLElement;
this.detailsContainer = root.querySelector(
"#process-details"
) as HTMLElement;
this.okButton = root.querySelector(
"#go-to-process-btn"
) as HTMLButtonElement;
this.inputInput.addEventListener("keyup", () => this.handleInput()); this.inputInput.addEventListener("keyup", () => this.handleInput());
this.inputInput.addEventListener("click", () => this.openDropdown()); this.inputInput.addEventListener("click", () => this.openDropdown());
@ -112,7 +100,7 @@ export class ProcessListPage extends HTMLElement {
// --- Logique Autocomplete Sécurisée --- // --- Logique Autocomplete Sécurisée ---
async populateList(query: string) { async populateList(query: string) {
this.autocompleteList.innerHTML = ""; // Vide la liste proprement this.autocompleteList.innerHTML = "";
const mineArray = (await this.services.getMyProcesses()) ?? []; const mineArray = (await this.services.getMyProcesses()) ?? [];
const allProcesses = await this.services.getProcesses(); const allProcesses = await this.services.getProcesses();
@ -127,7 +115,7 @@ export class ProcessListPage extends HTMLElement {
const process = allProcesses[pid]; const process = allProcesses[pid];
if (!process) continue; if (!process) continue;
const name = this.services.getProcessName(process) || pid; const name = (await this.services.getProcessName(process)) || pid;
if ( if (
query && query &&
@ -149,7 +137,7 @@ export class ProcessListPage extends HTMLElement {
const small = document.createElement("small"); const small = document.createElement("small");
small.style.opacity = "0.6"; small.style.opacity = "0.6";
small.style.marginLeft = "8px"; small.style.marginLeft = "8px";
small.textContent = "(Mien)"; // Texte statique sûr small.textContent = "(Mien)";
li.appendChild(small); li.appendChild(small);
} }
@ -228,18 +216,19 @@ export class ProcessListPage extends HTMLElement {
// --- Détails du processus Sécurisés --- // --- Détails du processus Sécurisés ---
async showProcessDetails(pid: string) { async showProcessDetails(pid: string) {
this.detailsContainer.textContent = "Chargement..."; // Safe loader this.detailsContainer.textContent = "Chargement...";
const process = await this.services.getProcess(pid); const process = await this.services.getProcess(pid);
if (!process) return; if (!process) return;
this.detailsContainer.innerHTML = ""; this.detailsContainer.innerHTML = "";
const name = this.services.getProcessName(process) || "Sans nom"; const name = (await this.services.getProcessName(process)) || "Sans nom";
// Description // Description
let description = "Pas de description"; let description = "Pas de description";
const lastState = this.services.getLastCommitedState(process); const lastState = await this.services.getLastCommitedState(process);
if (lastState?.pcd_commitment["description"]) { if (lastState?.pcd_commitment["description"]) {
const diff = await this.services.getDiffByValue( const diff = await this.services.getDiffByValue(
lastState.pcd_commitment["description"] lastState.pcd_commitment["description"]
@ -253,14 +242,14 @@ export class ProcessListPage extends HTMLElement {
// Titre // Titre
const titleDiv = document.createElement("div"); const titleDiv = document.createElement("div");
titleDiv.className = "process-title-display"; titleDiv.className = "process-title-display";
titleDiv.textContent = name; // Safe titleDiv.textContent = name;
containerDiv.appendChild(titleDiv); containerDiv.appendChild(titleDiv);
// Description // Description
const descDiv = document.createElement("div"); const descDiv = document.createElement("div");
descDiv.style.fontSize = "0.9rem"; descDiv.style.fontSize = "0.9rem";
descDiv.style.marginBottom = "10px"; descDiv.style.marginBottom = "10px";
descDiv.textContent = description; // Safe descDiv.textContent = description;
containerDiv.appendChild(descDiv); containerDiv.appendChild(descDiv);
// ID // ID
@ -268,7 +257,7 @@ export class ProcessListPage extends HTMLElement {
idDiv.style.fontSize = "0.8rem"; idDiv.style.fontSize = "0.8rem";
idDiv.style.opacity = "0.7"; idDiv.style.opacity = "0.7";
idDiv.style.marginBottom = "10px"; idDiv.style.marginBottom = "10px";
idDiv.textContent = `ID: ${pid}`; // Safe idDiv.textContent = `ID: ${pid}`;
containerDiv.appendChild(idDiv); containerDiv.appendChild(idDiv);
// Label "États en attente" // Label "États en attente"
@ -278,13 +267,12 @@ export class ProcessListPage extends HTMLElement {
labelDiv.textContent = "États en attente :"; labelDiv.textContent = "États en attente :";
containerDiv.appendChild(labelDiv); containerDiv.appendChild(labelDiv);
const uncommitted = this.services.getUncommitedStates(process); const uncommitted = await this.services.getUncommitedStates(process);
if (uncommitted.length > 0) { if (uncommitted.length > 0) {
uncommitted.forEach((state) => { uncommitted.forEach((state) => {
const el = document.createElement("div"); const el = document.createElement("div");
el.className = "state-element"; el.className = "state-element";
// textContent ici aussi, même si state_id est technique
el.textContent = `État: ${state.state_id.substring(0, 16)}...`; el.textContent = `État: ${state.state_id.substring(0, 16)}...`;
el.addEventListener("click", () => { el.addEventListener("click", () => {
@ -319,4 +307,4 @@ export class ProcessListPage extends HTMLElement {
} }
} }
customElements.define("process-list-page", ProcessListPage); customElements.define("process-list-page", ProcessListPage);