Add Process tab
This commit is contained in:
parent
c4db22f626
commit
89e9b3e4e0
@ -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<void> {
|
||||
}
|
||||
|
||||
private async showProcess(): Promise<void> {
|
||||
currentMode = 'process';
|
||||
this.hideAllContent();
|
||||
|
||||
const processContent = this.shadowRoot?.getElementById('process-content');
|
||||
if (processContent) {
|
||||
processContent.style.display = 'block';
|
||||
processContent.innerHTML = `
|
||||
<div class="parameter-header" id="parameter-header">Process</div>
|
||||
<div class="table-container">
|
||||
<table class="parameter-table" id="process-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Process Name</th>
|
||||
<th>Role</th>
|
||||
<th>Notifications</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="3">Loading processes...</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<tr>
|
||||
<td colspan="3" class="error-message">
|
||||
Error loading processes. Please try again later.
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
}
|
||||
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<void> {
|
||||
const tbody = this.shadowRoot?.querySelector('#process-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
if (!processes || processes.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="3">No processes found</td>
|
||||
</tr>
|
||||
`;
|
||||
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 `
|
||||
<tr>
|
||||
<td>${processName}</td>
|
||||
<td>${service.getRoles(process) || 'N/A'}</td>
|
||||
<td>
|
||||
<div class="notification-container" onclick="window.showProcessNotifications('${processId}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16">
|
||||
<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"/>
|
||||
</svg>
|
||||
<span class="notification-count" data-process="${processId}">
|
||||
0/0
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
private showProcessNotifications(processName: string): void {
|
||||
const process = mockProcessRows.find(p => p.process === processName);
|
||||
if (!process) return;
|
||||
|
||||
66
src/pages/account/process.ts
Normal file
66
src/pages/account/process.ts
Normal file
@ -0,0 +1,66 @@
|
||||
export function createProcessTab(container: HTMLElement, processes: { name: string, publicData: Record<string, any> }[]): 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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user