diff --git a/src/pages/account/account.ts b/src/pages/account/account.ts index 4edfcd2..143a468 100755 --- a/src/pages/account/account.ts +++ b/src/pages/account/account.ts @@ -51,6 +51,7 @@ import accountStyle from '../../../public/style/account.css?inline'; import Services from '../../services/service'; import { getProcessCreation } from './process-creation'; import { getDocumentValidation } from './document-validation'; +import { createProcessTab } from './process'; let isAddingRow = false; let currentRow: HTMLTableRowElement | null = null; @@ -849,94 +850,31 @@ private async showDocumentValidation(): Promise { } private async showProcess(): Promise { - currentMode = 'process'; this.hideAllContent(); - - const processContent = this.shadowRoot?.getElementById('process-content'); - if (processContent) { - processContent.style.display = 'block'; - processContent.innerHTML = ` -
Process
-
- - - - - - - - - - - - - -
Process NameRoleNotifications
Loading processes...
-
- `; - - try { - const service = await Services.getInstance(); - const myProcesses = await service.getMyProcesses(); - if (myProcesses) { - this.updateProcessTableContent(myProcesses); + const container = this.shadowRoot?.getElementById('process-content'); + if (container) { + const service = await Services.getInstance(); + const myProcesses = await service.getMyProcesses(); + let myProcessesData = await Promise.all(myProcesses.map(async processId => { + const process = await service.getProcess(processId); + const lastState = service.getLastCommitedState(process); + if (!lastState) { + return null; } - } catch (error) { - console.error('Error loading processes:', error); - const tbody = processContent.querySelector('tbody'); - if (tbody) { - tbody.innerHTML = ` - - - Error loading processes. Please try again later. - - - `; - } - } + const description = await service.decryptAttribute(processId, lastState, 'description'); + const name = description ? description : 'N/A'; + const publicData = await service.getPublicData(process); + console.log(publicData); + return { + name: name, + publicData: publicData + }; + })); + myProcessesData = myProcessesData.filter(process => process !== null); + createProcessTab(container, myProcessesData); } } -private async updateProcessTableContent(processes: Process[] | any): Promise { - const tbody = this.shadowRoot?.querySelector('#process-table tbody'); - if (!tbody) return; - - if (!processes || processes.length === 0) { - tbody.innerHTML = ` - - No processes found - - `; - return; - } - - const service = await Services.getInstance(); - - /*tbody.innerHTML = processes.map((process: Process) => { - const processName = process.states[0]?.public_data?.memberPublicName || 'N/A'; - const processId = process.states[0]?.state_id || 'N/A'; - - return ` - - ${processName} - ${service.getRoles(process) || 'N/A'} - -
- - - - - 0/0 - -
- - - `; - }).join('');*/ -} - - - private showProcessNotifications(processName: string): void { const process = mockProcessRows.find(p => p.process === processName); if (!process) return; diff --git a/src/pages/account/process.ts b/src/pages/account/process.ts new file mode 100644 index 0000000..10eaeb6 --- /dev/null +++ b/src/pages/account/process.ts @@ -0,0 +1,66 @@ +export function createProcessTab(container: HTMLElement, processes: { name: string, publicData: Record }[]): HTMLElement { + container.id = 'process-tab'; + container.style.display = 'block'; + container.style.cssText = 'padding: 1.5rem;'; + + const title = document.createElement('h2'); + title.textContent = 'Processes'; + title.style.cssText = 'font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem;'; + container.appendChild(title); + + processes.forEach(proc => { + const card = document.createElement('div'); + card.style.cssText = 'margin-bottom: 1rem; padding: 1rem; border: 1px solid #ddd; border-radius: 0.5rem; background: #fff;'; + + const nameEl = document.createElement('h3'); + nameEl.textContent = proc.name; + nameEl.style.cssText = 'font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem;'; + card.appendChild(nameEl); + + const dataList = document.createElement('div'); + for (const [key, value] of Object.entries(proc.publicData)) { + const item = document.createElement('div'); + item.style.cssText = 'margin-bottom: 0.5rem;'; + + const label = document.createElement('strong'); + label.textContent = key + ': '; + item.appendChild(label); + + // Let's trim the quotes + const trimmed = value.replace(/^'|'$/g, ''); + let parsed; + try { + parsed = JSON.parse(trimmed); + } catch (_) { + parsed = trimmed; + } + + if (parsed && typeof parsed === 'object') { + const saveBtn = document.createElement('button'); + saveBtn.textContent = '💾 Save as JSON'; + saveBtn.style.cssText = 'margin-left: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid #ccc; border-radius: 0.375rem; background: #f0f0f0; cursor: pointer;'; + saveBtn.onclick = () => { + const blob = new Blob([JSON.stringify(parsed, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `${proc.name}_${key}.json`; + a.click(); + URL.revokeObjectURL(url); + }; + item.appendChild(saveBtn); + } else { + const span = document.createElement('span'); + span.textContent = String(parsed); + item.appendChild(span); + } + + dataList.appendChild(item); + } + + card.appendChild(dataList); + container.appendChild(card); + }); + + return container; +}