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

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

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