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

link diffs to validation modal and show and prettify

Browse Source
This commit is contained in:
AnisHADJARAB 2024-12-17 08:28:39 +00:00 committed by Sosthene
parent d64efbd6a0
commit 2124388cc5
46 changed files with 6581 additions and 6658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1569
src/4nk.css
View File

File diff suppressed because it is too large Load Diff

63
src/components/header/header.ts
View File

@ -42,12 +42,11 @@ export async function initHeader() {
// Charger le profile-header // Charger le profile-header
const profileContainer = document.getElementById('profile-header-container'); const profileContainer = document.getElementById('profile-header-container');
if (profileContainer) { if (profileContainer) {
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html') const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html').then((res) => res.text());
.then(res => res.text()); profileContainer.innerHTML = profileHeaderHtml;
profileContainer.innerHTML = profileHeaderHtml;
// Initialiser les données du profil
// Initialiser les données du profil loadUserProfile();
loadUserProfile();
} }
} }
if (currentRoute === 'home') { if (currentRoute === 'home') {
@ -77,7 +76,7 @@ async function setNotification(notifications: any[]): Promise<void> {
if (notifications?.length) { if (notifications?.length) {
badge.innerText = notifications.length.toString(); badge.innerText = notifications.length.toString();
const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement; const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement;
notificationBoard.querySelectorAll('.notification-element')?.forEach(elem => elem.remove()) notificationBoard.querySelectorAll('.notification-element')?.forEach((elem) => elem.remove());
noNotifications.style.display = 'none'; noNotifications.style.display = 'none';
for (const notif of notifications) { for (const notif of notifications) {
const notifElement = document.createElement('div'); const notifElement = document.createElement('div');
@ -90,9 +89,9 @@ async function setNotification(notifications: any[]): Promise<void> {
// this.addSubscription(notifElement, 'click', 'goToProcessPage') // this.addSubscription(notifElement, 'click', 'goToProcessPage')
notificationBoard.appendChild(notifElement); notificationBoard.appendChild(notifElement);
notifElement.addEventListener('click', async () => { notifElement.addEventListener('click', async () => {
const modalService = await ModalService.getInstance() const modalService = await ModalService.getInstance();
modalService.injectValidationModal(notif) modalService.injectValidationModal(notif);
}) });
} }
} else { } else {
noNotifications.style.display = 'block'; noNotifications.style.display = 'block';
@ -125,29 +124,29 @@ async function loadUserProfile() {
} }
async function importJSON() { async function importJSON() {
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'file'; input.type = 'file';
input.accept = '.json'; input.accept = '.json';
input.onchange = async (e) => { input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = async (e) => { reader.onload = async (e) => {
try { try {
const content = JSON.parse(e.target?.result as string); const content = JSON.parse(e.target?.result as string);
const service = await Services.getInstance(); const service = await Services.getInstance();
await service.importJSON(content); await service.importJSON(content);
alert('Import réussi'); alert('Import réussi');
} catch (error) { } catch (error) {
alert('Erreur lors de l\'import: ' + error); alert("Erreur lors de l'import: " + error);
} }
}; };
reader.readAsText(file); reader.readAsText(file);
} }
}; };
input.click(); input.click();
} }
(window as any).importJSON = importJSON; (window as any).importJSON = importJSON;

24
src/components/profile-header/profile-header.html
View File

@ -1,12 +1,12 @@
<div class="avatar-section"> <div class="avatar-section">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image"> <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" />
<div class="banner-content"> <div class="banner-content">
<div class="avatar-container"> <div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" onclick="window.openAvatarPopup()"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" onclick="window.openAvatarPopup()" />
</div> </div>
<div class="user-info"> <div class="user-info">
<span class="user-name">John</span> <span class="user-name">John</span>
<span class="user-lastname">Doe</span> <span class="user-lastname">Doe</span>
</div> </div>
</div> </div>
</div> </div>

147
src/components/qrcode-scanner/qrcode-scanner-component.ts
View File

@ -1,74 +1,73 @@
import QrScanner from 'qr-scanner'; import QrScanner from 'qr-scanner';
import Services from '../../services/service'; import Services from '../../services/service';
import { prepareAndSendPairingTx } from '~/utils/sp-address.utils'; import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
export default class QrScannerComponent extends HTMLElement { export default class QrScannerComponent extends HTMLElement {
videoElement: any; videoElement: any;
wrapper: any wrapper: any;
qrScanner: any qrScanner: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.wrapper = document.createElement('div'); this.wrapper = document.createElement('div');
this.wrapper.style.position = 'relative'; this.wrapper.style.position = 'relative';
this.wrapper.style.width = '150px'; this.wrapper.style.width = '150px';
this.wrapper.style.height = '150px'; this.wrapper.style.height = '150px';
this.videoElement = document.createElement('video'); this.videoElement = document.createElement('video');
this.videoElement.style.width = '100%'; this.videoElement.style.width = '100%';
document.body?.append(this.wrapper); document.body?.append(this.wrapper);
this.wrapper.prepend(this.videoElement); this.wrapper.prepend(this.videoElement);
} }
connectedCallback() { connectedCallback() {
this.initializeScanner(); this.initializeScanner();
} }
async initializeScanner() { async initializeScanner() {
if (!this.videoElement) { if (!this.videoElement) {
console.error('Video element not found!'); console.error('Video element not found!');
return; return;
} }
console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement) console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{ this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
highlightScanRegion: true, highlightScanRegion: true,
highlightCodeOutline: true, highlightCodeOutline: true,
}); });
try { try {
await QrScanner.hasCamera(); await QrScanner.hasCamera();
this.qrScanner.start(); this.qrScanner.start();
this.videoElement.style = 'height: 200px; width: 200px' this.videoElement.style = 'height: 200px; width: 200px';
this.shadowRoot?.appendChild(this.wrapper) this.shadowRoot?.appendChild(this.wrapper);
} catch (e) {
} catch (e) { console.error('No camera found or error starting the QR scanner', e);
console.error('No camera found or error starting the QR scanner', e); }
} }
}
async onQrCodeScanned(result: any) {
async onQrCodeScanned(result: any) { console.log(`QR Code detected:`, result);
console.log(`QR Code detected:`, result); const data = result.data;
const data = result.data; const scannedUrl = new URL(data);
const scannedUrl = new URL(data);
// Extract the 'sp_address' parameter
// Extract the 'sp_address' parameter const spAddress = scannedUrl.searchParams.get('sp_address');
const spAddress = scannedUrl.searchParams.get('sp_address'); if (spAddress) {
if(spAddress) { // Call the sendPairingTx function with the extracted sp_address
// Call the sendPairingTx function with the extracted sp_address try {
try { await prepareAndSendPairingTx(spAddress);
await prepareAndSendPairingTx(spAddress) } catch (e) {
} catch (e) { console.error('Failed to pair:', e);
console.error('Failed to pair:', e); }
} }
} this.qrScanner.stop(); // if you want to stop scanning after one code is detected
this.qrScanner.stop(); // if you want to stop scanning after one code is detected }
}
disconnectedCallback() {
disconnectedCallback() { if (this.qrScanner) {
if (this.qrScanner) { this.qrScanner.destroy();
this.qrScanner.destroy(); }
} }
} }
}
customElements.define('qr-scanner', QrScannerComponent);
customElements.define('qr-scanner', QrScannerComponent);

140
src/components/validation-modal/validation-modal.css
View File

@ -1,70 +1,70 @@
.validation-modal { .validation-modal {
display: block; /* Show the modal for demo purposes */ display: block; /* Show the modal for demo purposes */
position: fixed; position: fixed;
z-index: 1; z-index: 1;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgb(0,0,0); background-color: rgb(0, 0, 0);
background-color: rgba(0,0,0,0.4); background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px; padding-top: 60px;
} }
.modal-content { .modal-content {
background-color: #fefefe; background-color: #fefefe;
margin: 5% auto; margin: 5% auto;
padding: 20px; padding: 20px;
border: 1px solid #888; border: 1px solid #888;
width: 80%; width: 80%;
height: fit-content; height: fit-content;
} }
.modal-title { .modal-title {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px; margin-bottom: 20px;
} }
.validation-box { .validation-box {
margin-bottom: 15px; margin-bottom: 15px;
width: 100%; width: 100%;
} }
.expansion-panel-header { .expansion-panel-header {
background-color: #e0e0e0; background-color: #e0e0e0;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
} }
.expansion-panel-body { .expansion-panel-body {
display: none; display: none;
background-color: #fafafa; background-color: #fafafa;
padding: 10px; padding: 10px;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
} }
.expansion-panel-body pre { .expansion-panel-body pre {
background-color: #f6f8fa; background-color: #f6f8fa;
padding: 10px; padding: 10px;
border-left: 4px solid #d1d5da; border-left: 4px solid #d1d5da;
overflow-x: auto; overflow-x: auto;
} }
.diff { .diff {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 10px; margin-bottom: 10px;
} }
.diff-side { .diff-side {
width: 48%; width: 48%;
padding: 10px; padding: 10px;
} }
.diff-old { .diff-old {
background-color: #fee; background-color: #fee;
border: 1px solid #f00; border: 1px solid #f00;
} }
.diff-new { .diff-new {
background-color: #e6ffe6; background-color: #e6ffe6;
border: 1px solid #0f0; border: 1px solid #0f0;
} }
.radio-buttons { .radio-buttons {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10px; margin-bottom: 10px;
} }

64
src/components/validation-modal/validation-modal.html
View File

@ -1,59 +1,11 @@
<div id="validation-modal" class="validation-modal"> <div id="validation-modal" class="validation-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-title">Validate</div> <div class="modal-title">Validate Process {{processId}}</div>
<div class="validation-box"> <div class="validation-box">
<div class="expansion-panel">
<div class="expansion-panel-header">Validation 1</div>
<div class="expansion-panel-body">
<div class="radio-buttons">
<label>
<input type="radio" name="validation1" value="old">
Keep Old
</label>
<label>
<input type="radio" name="validation1" value="new">
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-old line</pre>
</div>
<div class="diff-side diff-new">
<pre>+new line</pre>
</div>
</div>
</div>
</div>
<div class="expansion-panel">
<div class="expansion-panel-header">Validation 2</div>
<div class="expansion-panel-body">
<div class="radio-buttons">
<label>
<input type="radio" name="validation2" value="old">
Keep Old
</label>
<label>
<input type="radio" name="validation2" value="new">
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-foo\n-bar</pre>
</div>
<div class="diff-side diff-new">
<pre>+baz</pre>
</div>
</div>
</div>
</div>
</div>
<div class="modal-action">
<button onclick="validate()">Validate</button>
</div>
</div> </div>
<div class="modal-action">
<button onclick="validate()">Validate</button>
</div>
</div>
</div> </div>

65
src/components/validation-modal/validation-modal.ts
View File

@ -1,17 +1,56 @@
import ModalService from "~/services/modal.service"; import ModalService from '~/services/modal.service';
document.querySelectorAll('.expansion-panel-header').forEach(header => {
header.addEventListener('click', function(event) {
const target = event.target as HTMLElement
const body = target.nextElementSibling as HTMLElement;
if(body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block';
});
});
async function validate() { async function validate() {
console.log('==> VALIDATE') console.log('==> VALIDATE');
const modalservice = await ModalService.getInstance() const modalservice = await ModalService.getInstance();
modalservice.closeValidationModal() modalservice.closeValidationModal();
} }
(window as any).validate = validate export async function initValidationModal(processDiffs: any) {
console.log("🚀 ~ initValidationModal ~ processDiffs:", processDiffs)
for(const diff of processDiffs.diffs) {
let diffs = ''
for(const value of diff) {
diffs+= `
<div class="radio-buttons">
<label>
<input type="radio" name="validation1" value="old" />
Keep Old
</label>
<label>
<input type="radio" name="validation1" value="new" />
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-${value.previous_value}</pre>
</div>
<div class="diff-side diff-new">
<pre>+${value.new_value}</pre>
</div>
</div>
`
}
const state = `
<div class="expansion-panel">
<div class="expansion-panel-header">State ${diff[0].new_state_merkle_root}</div>
<div class="expansion-panel-body">
${diffs}
</div>
</div>
`
const box = document.querySelector('.validation-box')
if(box) box.innerHTML += state
}
document.querySelectorAll('.expansion-panel-header').forEach((header) => {
header.addEventListener('click', function (event) {
const target = event.target as HTMLElement;
const body = target.nextElementSibling as HTMLElement;
if (body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block';
});
});
}
(window as any).validate = validate;

20
src/decs.d.ts vendored
View File

@ -1,10 +1,10 @@
declare class AccountComponent extends HTMLElement { declare class AccountComponent extends HTMLElement {
_callback: any; _callback: any;
constructor(); constructor();
connectedCallback(): void; connectedCallback(): void;
fetchData(): Promise<void>; fetchData(): Promise<void>;
set callback(fn: any); set callback(fn: any);
get callback(): any; get callback(): any;
render(): void; render(): void;
} }
export { AccountComponent }; export { AccountComponent };

44
src/interface/groupInterface.ts
View File

@ -1,22 +1,22 @@
import { DocumentSignature } from "~/models/signature.models"; import { DocumentSignature } from '~/models/signature.models';
export interface Group { export interface Group {
id: number; id: number;
name: string; name: string;
description: string; description: string;
roles: Array<{ roles: Array<{
name: string; name: string;
members: Array<{ id: string | number; name: string }>; members: Array<{ id: string | number; name: string }>;
documents?: Array<any>; documents?: Array<any>;
}>; }>;
commonDocuments: Array<{ commonDocuments: Array<{
id: number; id: number;
name: string; name: string;
visibility: string; visibility: string;
description: string; description: string;
createdAt?: string | null; createdAt?: string | null;
deadline?: string | null; deadline?: string | null;
signatures?: DocumentSignature[]; signatures?: DocumentSignature[];
status?: string; status?: string;
}>; }>;
} }

14
src/interface/memberInterface.ts
View File

@ -1,7 +1,7 @@
export interface Member { export interface Member {
id: string | number; id: string | number;
name: string; name: string;
email?: string; email?: string;
avatar?: string; avatar?: string;
processRoles?: Array<{ processId: number | string; role: string }>; processRoles?: Array<{ processId: number | string; role: string }>;
} }

68
src/main.ts
View File

@ -1,38 +1,30 @@
import { SignatureComponent } from './pages/signature/signature-component'; import { SignatureComponent } from './pages/signature/signature-component';
import { SignatureElement } from './pages/signature/signature'; import { SignatureElement } from './pages/signature/signature';
import { ChatComponent } from './pages/chat/chat-component'; import { ChatComponent } from './pages/chat/chat-component';
import { ChatElement } from './pages/chat/chat'; import { ChatElement } from './pages/chat/chat';
import { AccountComponent } from './pages/account/account-component'; import { AccountComponent } from './pages/account/account-component';
import { AccountElement } from './pages/account/account'; import { AccountElement } from './pages/account/account';
export { export { SignatureComponent, SignatureElement, ChatComponent, ChatElement, AccountComponent, AccountElement };
SignatureComponent,
SignatureElement, declare global {
ChatComponent, interface HTMLElementTagNameMap {
ChatElement, 'signature-component': SignatureComponent;
AccountComponent, 'signature-element': SignatureElement;
AccountElement 'chat-component': ChatComponent;
}; 'chat-element': ChatElement;
'account-component': AccountComponent;
'account-element': AccountElement;
declare global { }
interface HTMLElementTagNameMap { }
'signature-component': SignatureComponent;
'signature-element': SignatureElement; // Configuration pour le mode indépendant
'chat-component': ChatComponent; if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) {
'chat-element': ChatElement; // Initialiser les composants si nécessaire
'account-component': AccountComponent; customElements.define('signature-component', SignatureComponent);
'account-element': AccountElement; customElements.define('signature-element', SignatureElement);
} customElements.define('chat-component', ChatComponent);
} customElements.define('chat-element', ChatElement);
customElements.define('account-component', AccountComponent);
// Configuration pour le mode indépendant customElements.define('account-element', AccountElement);
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB) { }
// Initialiser les composants si nécessaire
customElements.define('signature-component', SignatureComponent);
customElements.define('signature-element', SignatureElement);
customElements.define('chat-component', ChatComponent);
customElements.define('chat-element', ChatElement);
customElements.define('account-component', AccountComponent);
customElements.define('account-element', AccountElement);
}

600
src/mocks/mock-account/constAccountMock.ts
View File

@ -1,328 +1,272 @@
export const ALLOWED_ROLES = ['User', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup']; export const ALLOWED_ROLES = ['User', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
export const STORAGE_KEYS = { export const STORAGE_KEYS = {
pairing: 'pairingRows', pairing: 'pairingRows',
wallet: 'walletRows', wallet: 'walletRows',
process: 'processRows', process: 'processRows',
data: 'dataRows' data: 'dataRows',
}; };
// Initialiser le stockage des lignes par défaut dans le localStorage // Initialiser le stockage des lignes par défaut dans le localStorage
export const defaultRows = [ export const defaultRows = [
{ {
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz", column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz',
column2: "🎊😑🎄😩", column2: '🎊😑🎄😩',
column3: "Laptop" column3: 'Laptop',
}, },
{ {
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx", column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx',
column2: "🎏🎕😧🌥", column2: '🎏🎕😧🌥',
column3: "Phone" } column3: 'Phone',
]; },
];
export const mockNotifications: { [key: string]: Notification[] } = {};
export const mockNotifications: { [key: string]: Notification[] } = {};
export const notificationMessages = [
"CPU usage high", export const notificationMessages = ['CPU usage high', 'Memory threshold reached', 'New update available', 'Backup completed', 'Security check required', 'Performance optimization needed', 'System alert', 'Network connectivity issue', 'Storage space low', 'Process checkpoint reached'];
"Memory threshold reached",
"New update available", export const mockDataRows = [
"Backup completed", {
"Security check required", column1: 'User Project',
"Performance optimization needed", column2: 'private',
"System alert", column3: 'User',
"Network connectivity issue", column4: '6 months',
"Storage space low", column5: 'NDA signed',
"Process checkpoint reached" column6: 'Contract #123',
]; processName: 'User Process',
zone: 'A',
export const mockDataRows = [ },
{ {
column1: "User Project", column1: 'Process Project',
column2: "private", column2: 'private',
column3: "User", column3: 'Process',
column4: "6 months", column4: '1 year',
column5: "NDA signed", column5: 'Terms accepted',
column6: "Contract #123", column6: 'Contract #456',
processName: "User Process", processName: 'Process Management',
zone: "A" zone: 'B',
}, },
{ {
column1: "Process Project", column1: 'Member Project',
column2: "private", column2: 'private',
column3: "Process", column3: 'Member',
column4: "1 year", column4: '3 months',
column5: "Terms accepted", column5: 'GDPR compliant',
column6: "Contract #456", column6: 'Contract #789',
processName: "Process Management", processName: 'Member Process',
zone: "B" zone: 'C',
}, },
{ {
column1: "Member Project", column1: 'Peer Project',
column2: "private", column2: 'public',
column3: "Member", column3: 'Peer',
column4: "3 months", column4: '2 years',
column5: "GDPR compliant", column5: 'IP rights',
column6: "Contract #789", column6: 'Contract #101',
processName: "Member Process", processName: 'Peer Process',
zone: "C" zone: 'D',
}, },
{ {
column1: "Peer Project", column1: 'Payment Project',
column2: "public", column2: 'confidential',
column3: "Peer", column3: 'Payment',
column4: "2 years", column4: '1 year',
column5: "IP rights", column5: 'NDA signed',
column6: "Contract #101", column6: 'Contract #102',
processName: "Peer Process", processName: 'Payment Process',
zone: "D" zone: 'E',
}, },
{ {
column1: "Payment Project", column1: 'Deposit Project',
column2: "confidential", column2: 'private',
column3: "Payment", column3: 'Deposit',
column4: "1 year", column4: '6 months',
column5: "NDA signed", column5: 'Terms accepted',
column6: "Contract #102", column6: 'Contract #103',
processName: "Payment Process", processName: 'Deposit Process',
zone: "E" zone: 'F',
}, },
{ {
column1: "Deposit Project", column1: 'Artefact Project',
column2: "private", column2: 'public',
column3: "Deposit", column3: 'Artefact',
column4: "6 months", column4: '1 year',
column5: "Terms accepted", column5: 'GDPR compliant',
column6: "Contract #103", column6: 'Contract #104',
processName: "Deposit Process", processName: 'Artefact Process',
zone: "F" zone: 'G',
}, },
{ {
column1: "Artefact Project", column1: 'Resolve Project',
column2: "public", column2: 'private',
column3: "Artefact", column3: 'Resolve',
column4: "1 year", column4: '2 years',
column5: "GDPR compliant", column5: 'IP rights',
column6: "Contract #104", column6: 'Contract #105',
processName: "Artefact Process", processName: 'Resolve Process',
zone: "G" zone: 'H',
}, },
{ {
column1: "Resolve Project", column1: 'Backup Project',
column2: "private", column2: 'public',
column3: "Resolve", column3: 'Backup',
column4: "2 years", column4: '1 year',
column5: "IP rights", column5: 'NDA signed',
column6: "Contract #105", column6: 'Contract #106',
processName: "Resolve Process", processName: 'Backup Process',
zone: "H" zone: 'I',
}, },
{ ];
column1: "Backup Project",
column2: "public", export const mockProcessRows = [
column3: "Backup", {
column4: "1 year", process: 'User Project',
column5: "NDA signed", role: 'User',
column6: "Contract #106", notification: {
processName: "Backup Process", messages: [
zone: "I" { id: 1, read: false, date: '2024-03-10', message: 'New user joined the project' },
} { id: 2, read: false, date: '2024-03-09', message: 'Project milestone reached' },
]; { id: 3, read: false, date: '2024-03-08', message: 'Security update required' },
{ id: 4, read: true, date: '2024-03-07', message: 'Weekly report available' },
export const mockProcessRows = [ { id: 5, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
{ ],
process: "User Project", },
role: "User", },
notification: { {
messages: [ process: 'Member Project',
{ id: 1, read: false, date: "2024-03-10", message: "New user joined the project" }, role: 'Member',
{ id: 2, read: false, date: "2024-03-09", message: "Project milestone reached" }, notification: {
{ id: 3, read: false, date: "2024-03-08", message: "Security update required" }, messages: [
{ id: 4, read: true, date: "2024-03-07", message: "Weekly report available" }, { id: 6, read: true, date: '2024-03-10', message: 'Member access granted' },
{ id: 5, read: true, date: "2024-03-06", message: "Team meeting scheduled" } { id: 7, read: true, date: '2024-03-09', message: 'Documentation updated' },
] { id: 8, read: true, date: '2024-03-08', message: 'Project status: on track' },
} ],
}, },
{ },
process: "Member Project", {
role: "Member", process: 'Peer Project',
notification: { role: 'Peer',
messages: [ notification: {
{ id: 6, read: true, date: "2024-03-10", message: "Member access granted" }, unread: 2,
{ id: 7, read: true, date: "2024-03-09", message: "Documentation updated" }, total: 4,
{ id: 8, read: true, date: "2024-03-08", message: "Project status: on track" } messages: [
] { id: 9, read: false, date: '2024-03-10', message: 'New peer project added' },
} { id: 10, read: false, date: '2024-03-09', message: 'Project milestone reached' },
}, { id: 11, read: false, date: '2024-03-08', message: 'Security update required' },
{ { id: 12, read: true, date: '2024-03-07', message: 'Weekly report available' },
process: "Peer Project", { id: 13, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
role: "Peer", ],
notification: { },
unread: 2, },
total: 4, {
messages: [ process: 'Deposit Project',
{ id: 9, read: false, date: "2024-03-10", message: "New peer project added" }, role: 'Deposit',
{ id: 10, read: false, date: "2024-03-09", message: "Project milestone reached" }, notification: {
{ id: 11, read: false, date: "2024-03-08", message: "Security update required" }, unread: 1,
{ id: 12, read: true, date: "2024-03-07", message: "Weekly report available" }, total: 10,
{ id: 13, read: true, date: "2024-03-06", message: "Team meeting scheduled" } messages: [
] { id: 14, read: false, date: '2024-03-10', message: 'Deposit milestone reached' },
} { id: 15, read: false, date: '2024-03-09', message: 'Security update required' },
}, { id: 16, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ { id: 17, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
process: "Deposit Project", { id: 18, read: true, date: '2024-03-06', message: 'Project status: on track' },
role: "Deposit", ],
notification: { },
unread: 1, },
total: 10, {
messages: [ process: 'Artefact Project',
{ id: 14, read: false, date: "2024-03-10", message: "Deposit milestone reached" }, role: 'Artefact',
{ id: 15, read: false, date: "2024-03-09", message: "Security update required" }, notification: {
{ id: 16, read: false, date: "2024-03-08", message: "Weekly report available" }, unread: 0,
{ id: 17, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, total: 3,
{ id: 18, read: true, date: "2024-03-06", message: "Project status: on track" } messages: [
] { id: 19, read: false, date: '2024-03-10', message: 'New artefact added' },
} { id: 20, read: false, date: '2024-03-09', message: 'Security update required' },
}, { id: 21, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ { id: 22, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
process: "Artefact Project", { id: 23, read: true, date: '2024-03-06', message: 'Project status: on track' },
role: "Artefact", ],
notification: { },
unread: 0, },
total: 3, {
messages: [ process: 'Resolve Project',
{ id: 19, read: false, date: "2024-03-10", message: "New artefact added" }, role: 'Resolve',
{ id: 20, read: false, date: "2024-03-09", message: "Security update required" }, notification: {
{ id: 21, read: false, date: "2024-03-08", message: "Weekly report available" }, unread: 5,
{ id: 22, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, total: 12,
{ id: 23, read: true, date: "2024-03-06", message: "Project status: on track" } messages: [
] { id: 24, read: false, date: '2024-03-10', message: 'New issue reported' },
} { id: 25, read: false, date: '2024-03-09', message: 'Security update required' },
}, { id: 26, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ { id: 27, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
process: "Resolve Project", { id: 28, read: true, date: '2024-03-06', message: 'Project status: on track' },
role: "Resolve", ],
notification: { },
unread: 5, },
total: 12, ];
messages: [
{ id: 24, read: false, date: "2024-03-10", message: "New issue reported" }, export const mockContracts = {
{ id: 25, read: false, date: "2024-03-09", message: "Security update required" }, 'Contract #123': {
{ id: 26, read: false, date: "2024-03-08", message: "Weekly report available" }, title: 'User Project Agreement',
{ id: 27, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, date: '2024-01-15',
{ id: 28, read: true, date: "2024-03-06", message: "Project status: on track" } parties: ['Company XYZ', 'User Team'],
] terms: ['Data Protection', 'User Privacy', 'Access Rights', 'Service Level Agreement'],
} content: 'This agreement establishes the terms and conditions for user project management.',
} },
]; 'Contract #456': {
title: 'Process Management Contract',
date: '2024-02-01',
export const mockContracts = { parties: ['Company XYZ', 'Process Team'],
'Contract #123': { terms: ['Process Workflow', 'Quality Standards', 'Performance Metrics', 'Monitoring Procedures'],
title: "User Project Agreement", content: 'This contract defines the process management standards and procedures.',
date: "2024-01-15", },
parties: ["Company XYZ", "User Team"], 'Contract #789': {
terms: [ title: 'Member Access Agreement',
"Data Protection", date: '2024-03-15',
"User Privacy", parties: ['Company XYZ', 'Member Team'],
"Access Rights", terms: ['Member Rights', 'Access Levels', 'Security Protocol', 'Confidentiality Agreement'],
"Service Level Agreement" content: 'This agreement outlines the terms for member access and privileges.',
], },
content: "This agreement establishes the terms and conditions for user project management." 'Contract #101': {
}, title: 'Peer Collaboration Agreement',
'Contract #456': { date: '2024-04-01',
title: "Process Management Contract", parties: ['Company XYZ', 'Peer Network'],
date: "2024-02-01", terms: ['Collaboration Rules', 'Resource Sharing', 'Dispute Resolution', 'Network Protocol'],
parties: ["Company XYZ", "Process Team"], content: 'This contract establishes peer collaboration and networking guidelines.',
terms: [ },
"Process Workflow", 'Contract #102': {
"Quality Standards", title: 'Payment Processing Agreement',
"Performance Metrics", date: '2024-05-01',
"Monitoring Procedures" parties: ['Company XYZ', 'Payment Team'],
], terms: ['Transaction Protocol', 'Security Measures', 'Fee Structure', 'Service Availability'],
content: "This contract defines the process management standards and procedures." content: 'This agreement defines payment processing terms and conditions.',
}, },
'Contract #789': { 'Contract #103': {
title: "Member Access Agreement", title: 'Deposit Management Contract',
date: "2024-03-15", date: '2024-06-01',
parties: ["Company XYZ", "Member Team"], parties: ['Company XYZ', 'Deposit Team'],
terms: [ terms: ['Deposit Rules', 'Storage Protocol', 'Access Control', 'Security Standards'],
"Member Rights", content: 'This contract outlines deposit management procedures and security measures.',
"Access Levels", },
"Security Protocol", 'Contract #104': {
"Confidentiality Agreement" title: 'Artefact Handling Agreement',
], date: '2024-07-01',
content: "This agreement outlines the terms for member access and privileges." parties: ['Company XYZ', 'Artefact Team'],
}, terms: ['Handling Procedures', 'Storage Guidelines', 'Access Protocol', 'Preservation Standards'],
'Contract #101': { content: 'This agreement establishes artefact handling and preservation guidelines.',
title: "Peer Collaboration Agreement", },
date: "2024-04-01", 'Contract #105': {
parties: ["Company XYZ", "Peer Network"], title: 'Resolution Protocol Agreement',
terms: [ date: '2024-08-01',
"Collaboration Rules", parties: ['Company XYZ', 'Resolution Team'],
"Resource Sharing", terms: ['Resolution Process', 'Time Constraints', 'Escalation Protocol', 'Documentation Requirements'],
"Dispute Resolution", content: 'This contract defines the resolution process and protocol standards.',
"Network Protocol" },
], 'Contract #106': {
content: "This contract establishes peer collaboration and networking guidelines." title: 'Backup Service Agreement',
}, date: '2024-09-01',
'Contract #102': { parties: ['Company XYZ', 'Backup Team'],
title: "Payment Processing Agreement", terms: ['Backup Schedule', 'Data Protection', 'Recovery Protocol', 'Service Reliability'],
date: "2024-05-01", content: 'This agreement outlines backup service terms and recovery procedures.',
parties: ["Company XYZ", "Payment Team"], },
terms: [ };
"Transaction Protocol",
"Security Measures",
"Fee Structure",
"Service Availability"
],
content: "This agreement defines payment processing terms and conditions."
},
'Contract #103': {
title: "Deposit Management Contract",
date: "2024-06-01",
parties: ["Company XYZ", "Deposit Team"],
terms: [
"Deposit Rules",
"Storage Protocol",
"Access Control",
"Security Standards"
],
content: "This contract outlines deposit management procedures and security measures."
},
'Contract #104': {
title: "Artefact Handling Agreement",
date: "2024-07-01",
parties: ["Company XYZ", "Artefact Team"],
terms: [
"Handling Procedures",
"Storage Guidelines",
"Access Protocol",
"Preservation Standards"
],
content: "This agreement establishes artefact handling and preservation guidelines."
},
'Contract #105': {
title: "Resolution Protocol Agreement",
date: "2024-08-01",
parties: ["Company XYZ", "Resolution Team"],
terms: [
"Resolution Process",
"Time Constraints",
"Escalation Protocol",
"Documentation Requirements"
],
content: "This contract defines the resolution process and protocol standards."
},
'Contract #106': {
title: "Backup Service Agreement",
date: "2024-09-01",
parties: ["Company XYZ", "Backup Team"],
terms: [
"Backup Schedule",
"Data Protection",
"Recovery Protocol",
"Service Reliability"
],
content: "This agreement outlines backup service terms and recovery procedures."
}
};

90
src/mocks/mock-account/interfacesAccountMock.ts
View File

@ -1,45 +1,45 @@
export interface Row { export interface Row {
column1: string; column1: string;
column2: string; column2: string;
column3: string; column3: string;
} }
// Types supplémentaires nécessaires // Types supplémentaires nécessaires
export interface Contract { export interface Contract {
title: string; title: string;
date: string; date: string;
parties: string[]; parties: string[];
terms: string[]; terms: string[];
content: string; content: string;
} }
export interface WalletRow { export interface WalletRow {
column1: string; // Label column1: string; // Label
column2: string; // Wallet column2: string; // Wallet
column3: string; // Type column3: string; // Type
} }
export interface DataRow { export interface DataRow {
column1: string; // Name column1: string; // Name
column2: string; // Visibility column2: string; // Visibility
column3: string; // Role column3: string; // Role
column4: string; // Duration column4: string; // Duration
column5: string; // Legal column5: string; // Legal
column6: string; // Contract column6: string; // Contract
processName: string; processName: string;
zone: string; zone: string;
} }
export interface Notification { export interface Notification {
message: string; message: string;
timestamp: string; timestamp: string;
isRead: boolean; isRead: boolean;
} }
// Déplacer l'interface en dehors de la classe, au début du fichier // Déplacer l'interface en dehors de la classe, au début du fichier
export interface NotificationMessage { export interface NotificationMessage {
id: number; id: number;
read: boolean; read: boolean;
date: string; date: string;
message: string; message: string;
} }

92
src/mocks/mock-chat/groupsMock.js
View File

@ -1,40 +1,52 @@
export const groupsMock = [ export const groupsMock = [
{ {
id: 1, id: 1,
name: "Group 🚀 ", name: 'Group 🚀 ',
roles: [ roles: [
{ {
id: 1, id: 1,
name: "Role 1", name: 'Role 1',
members: [{ id: 1, name: "Member 1" }, { id: 2, name: "Member 2" }] members: [
}, { id: 1, name: 'Member 1' },
{ { id: 2, name: 'Member 2' },
id: 2, ],
name: "Role 2", },
members: [{ id: 3, name: "Member 3" }, { id: 4, name: "Member 4" }] {
} id: 2,
] name: 'Role 2',
}, members: [
{ { id: 3, name: 'Member 3' },
id: 2, { id: 4, name: 'Member 4' },
name: "Group ₿", ],
roles: [ },
{ ],
id: 3, },
name: "Role 1", {
members: [{ id: 5, name: "Member 5" }, { id: 6, name: "Member 6" }] id: 2,
} name: 'Group ₿',
] roles: [
}, {
{ id: 3,
id: 3, name: 'Role 1',
name: "Group 🪙", members: [
roles: [ { id: 5, name: 'Member 5' },
{ { id: 6, name: 'Member 6' },
id: 4, ],
name: "Role 1", },
members: [{ id: 7, name: "Member 7" }, { id: 8, name: "Member 8" }] ],
} },
] {
} id: 3,
]; name: 'Group 🪙',
roles: [
{
id: 4,
name: 'Role 1',
members: [
{ id: 7, name: 'Member 7' },
{ id: 8, name: 'Member 8' },
],
},
],
},
];

129
src/mocks/mock-chat/messagesMock.js
View File

@ -1,65 +1,64 @@
export const messagesMock = [ export const messagesMock = [
{ {
memberId: 1, // Conversations avec Mmber 1 memberId: 1, // Conversations avec Mmber 1
messages: [ messages: [
{ id: 1, sender: "Member 1", text: "Salut !", time: "10:30 AM" }, { id: 1, sender: 'Member 1', text: 'Salut !', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Bonjour ! Comment ça va ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Bonjour ! Comment ça va ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 AM" } { id: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
] ],
}, },
{ {
memberId: 2, // Conversations avec Member 2 memberId: 2, // Conversations avec Member 2
messages: [ messages: [
{ id: 1, sender: "Member 2", text: "Salut, on se voit ce soir ?", time: "10:30 AM" }, { id: 1, sender: 'Member 2', text: 'Salut, on se voit ce soir ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Oui, à quelle heure ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Oui, à quelle heure ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 3, // Conversations avec Member 3 memberId: 3, // Conversations avec Member 3
messages: [ messages: [
{ id: 1, sender: "Member 3", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 3', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 4, // Conversations avec Member 4 memberId: 4, // Conversations avec Member 4
messages: [ messages: [
{ id: 1, sender: "Member 4", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 4', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 5, // Conversations avec Member 5 memberId: 5, // Conversations avec Member 5
messages: [ messages: [
{ id: 1, sender: "Member 5", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 5', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 6, // Conversations avec Member 6 memberId: 6, // Conversations avec Member 6
messages: [ messages: [
{ id: 1, sender: "Member 6", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 6', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 7, // Conversations avec Member 7 memberId: 7, // Conversations avec Member 7
messages: [ messages: [
{ id: 1, sender: "Member 7", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 7', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 8, // Conversations avec Member 8 memberId: 8, // Conversations avec Member 8
messages: [ messages: [
{ id: 1, sender: "Member 8", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 8', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
} },
];
];

931
src/mocks/mock-signature/groupsMock.js
View File

@ -1,460 +1,471 @@
// Définir les rôles autorisés // Définir les rôles autorisés
const VALID_ROLES = [ const VALID_ROLES = ['User', 'Process', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
"User",
"Process", const VISIBILITY_LEVELS = {
"Member", PUBLIC: 'public',
"Peer", CONFIDENTIAL: 'confidential',
"Payment", PRIVATE: 'private',
"Deposit", };
"Artefact",
"Resolve", const DOCUMENT_STATUS = {
"Backup" DRAFT: 'draft',
]; PENDING: 'pending',
IN_REVIEW: 'in_review',
const VISIBILITY_LEVELS = { APPROVED: 'approved',
PUBLIC: "public", REJECTED: 'rejected',
CONFIDENTIAL: "confidential", EXPIRED: 'expired',
PRIVATE: "private", };
};
// Fonction pour créer un rôle
const DOCUMENT_STATUS = { function createRole(name, members) {
DRAFT: "draft", if (!VALID_ROLES.includes(name)) {
PENDING: "pending", throw new Error(`Role "${name}" is not valid.`);
IN_REVIEW: "in_review", }
APPROVED: "approved", return { name, members };
REJECTED: "rejected", }
EXPIRED: "expired"
}; export const groupsMock = [
{
// Fonction pour créer un rôle id: 1,
function createRole(name, members) { name: 'Processus 1',
if (!VALID_ROLES.includes(name)) { description: 'Description du processus 1',
throw new Error(`Role "${name}" is not valid.`); commonDocuments: [
} {
return { name, members }; id: 101,
} name: 'Règlement intérieur',
description: 'Document vierge pour le règlement intérieur',
export const groupsMock = [ visibility: VISIBILITY_LEVELS.PUBLIC,
{ status: DOCUMENT_STATUS.DRAFT,
id: 1, createdAt: null,
name: "Processus 1", deadline: null,
description: "Description du processus 1", signatures: [],
commonDocuments: [ },
{ {
id: 101, id: 102,
name: "Règlement intérieur", name: 'Charte de confidentialité',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 102, id: 103,
name: "Charte de confidentialité", name: 'Procédures générales',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour les procédures générales',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 103, id: 104,
name: "Procédures générales", name: 'Urgency A',
description: "Document vierge pour les procédures générales", description: "Document vierge pour le plan d'urgence A",
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 104, id: 105,
name: "Urgency A", name: 'Urgency B',
description: "Document vierge pour le plan d'urgence A", description: "Document vierge pour le plan d'urgence B",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 105, id: 106,
name: "Urgency B", name: 'Urgency C',
description: "Document vierge pour le plan d'urgence B", description: "Document vierge pour le plan d'urgence C",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 106, id: 107,
name: "Urgency C", name: 'Document à signer',
description: "Document vierge pour le plan d'urgence C", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ ],
id: 107, roles: [
name: "Document à signer", {
description: "Document vierge pour le règlement intérieur", name: 'User',
visibility: VISIBILITY_LEVELS.PUBLIC, members: [
status: DOCUMENT_STATUS.DRAFT, { id: 1, name: 'Alice' },
createdAt: null, { id: 2, name: 'Bob' },
deadline: null, ],
signatures: [] documents: [
}, {
], id: 1,
roles: [ name: 'Document User A',
{ description: 'Description du document User A.',
name: "User", visibility: 'public',
members: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }], createdAt: '2024-01-01',
documents: [ deadline: '2024-02-01',
{ signatures: [
id: 1, {
name: "Document User A", member: { id: 1, name: 'Alice' },
description: "Description du document User A.", signed: true,
visibility: "public", signedAt: '2024-01-15',
createdAt: "2024-01-01", },
deadline: "2024-02-01", {
signatures: [ member: { id: 2, name: 'Bob' },
{ signed: false,
member: { id: 1, name: "Alice" }, },
signed: true, ],
signedAt: "2024-01-15" },
}, {
{ id: 2,
member: { id: 2, name: "Bob" }, name: 'Document User B',
signed: false description: 'Document vierge pour le rôle User',
} visibility: 'confidential',
] createdAt: null,
}, deadline: null,
{ signatures: [],
id: 2, },
name: "Document User B", {
description: "Document vierge pour le rôle User", id: 7,
visibility: "confidential", name: 'Document User C',
createdAt: null, description: 'Document vierge pour validation utilisateur',
deadline: null, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
signatures: [] status: DOCUMENT_STATUS.DRAFT,
}, createdAt: null,
{ deadline: null,
id: 7, signatures: [],
name: "Document User C", },
description: "Document vierge pour validation utilisateur", {
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, id: 8,
status: DOCUMENT_STATUS.DRAFT, name: 'Document User D',
createdAt: null, description: 'Document vierge pour approbation utilisateur',
deadline: null, visibility: VISIBILITY_LEVELS.PUBLIC,
signatures: [] status: DOCUMENT_STATUS.DRAFT,
}, createdAt: null,
{ deadline: null,
id: 8, signatures: [],
name: "Document User D", },
description: "Document vierge pour approbation utilisateur", ],
visibility: VISIBILITY_LEVELS.PUBLIC, },
status: DOCUMENT_STATUS.DRAFT, {
createdAt: null, name: 'Process',
deadline: null, members: [
signatures: [] { id: 3, name: 'Charlie' },
} { id: 4, name: 'David' },
] ],
}, documents: [
{ {
name: "Process", id: 3,
members: [{ id: 3, name: "Charlie" }, { id: 4, name: "David" }], name: 'Document Process A',
documents: [ description: 'Description du document Process A.',
{ visibility: 'confidential',
id: 3, createdAt: '2024-01-10',
name: "Document Process A", deadline: '2024-03-01',
description: "Description du document Process A.", signatures: [
visibility: "confidential", {
createdAt: "2024-01-10", member: { id: 3, name: 'Charlie' },
deadline: "2024-03-01", signed: true,
signatures: [ signedAt: '2024-01-12',
{ },
member: { id: 3, name: "Charlie" }, ],
signed: true, },
signedAt: "2024-01-12" {
} id: 9,
] name: 'Document Process B',
}, description: 'Document vierge pour processus interne',
{ visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
id: 9, status: DOCUMENT_STATUS.DRAFT,
name: "Document Process B", createdAt: null,
description: "Document vierge pour processus interne", deadline: null,
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, signatures: [],
status: DOCUMENT_STATUS.DRAFT, },
createdAt: null, {
deadline: null, id: 10,
signatures: [] name: 'Document Process C',
}, description: 'Document vierge pour validation processus',
{ visibility: VISIBILITY_LEVELS.PRIVATE,
id: 10, status: DOCUMENT_STATUS.DRAFT,
name: "Document Process C", createdAt: null,
description: "Document vierge pour validation processus", deadline: null,
visibility: VISIBILITY_LEVELS.PRIVATE, signatures: [],
status: DOCUMENT_STATUS.DRAFT, },
createdAt: null, {
deadline: null, id: 11,
signatures: [] name: 'Document Process D',
}, description: 'Document vierge pour validation processus',
{ visibility: VISIBILITY_LEVELS.PUBLIC,
id: 11, status: DOCUMENT_STATUS.PENDING,
name: "Document Process D", createdAt: '2024-01-15',
description: "Document vierge pour validation processus", deadline: '2024-02-01',
visibility: VISIBILITY_LEVELS.PUBLIC, signatures: [
status: DOCUMENT_STATUS.PENDING, {
createdAt: "2024-01-15", member: { id: 3, name: 'Charlie' },
deadline: "2024-02-01", signed: true,
signatures: [ signedAt: '2024-01-15',
{ },
member: { id: 3, name: "Charlie" }, {
signed: true, member: { id: 4, name: 'David' },
signedAt: "2024-01-15" signed: false,
}, },
{ ],
member: { id: 4, name: "David" }, },
signed: false {
} id: 12,
] name: 'Document Process E',
}, description: 'Document vierge pour validation processus',
{ visibility: VISIBILITY_LEVELS.PUBLIC,
id: 12, status: DOCUMENT_STATUS.PENDING,
name: "Document Process E", createdAt: '2024-01-15',
description: "Document vierge pour validation processus", deadline: '2024-02-01',
visibility: VISIBILITY_LEVELS.PUBLIC, signatures: [
status: DOCUMENT_STATUS.PENDING, {
createdAt: "2024-01-15", member: { id: 3, name: 'Charlie' },
deadline: "2024-02-01", signed: true,
signatures: [ signedAt: '2024-01-15',
{ },
member: { id: 3, name: "Charlie" }, {
signed: true, member: { id: 4, name: 'David' },
signedAt: "2024-01-15" signed: false,
}, },
{ ],
member: { id: 4, name: "David" }, },
signed: false ],
} },
] {
} name: 'Backup',
] members: [
}, { id: 15, name: 'Oscar' },
{ { id: 16, name: 'Patricia' },
name: "Backup", ],
members: [{ id: 15, name: "Oscar" }, { id: 16, name: "Patricia" }], documents: [
documents: [ {
{ id: 11,
id: 11, name: 'Document Backup A',
name: "Document Backup A", description: 'Document vierge pour sauvegarde',
description: "Document vierge pour sauvegarde", visibility: VISIBILITY_LEVELS.PRIVATE,
visibility: VISIBILITY_LEVELS.PRIVATE, status: DOCUMENT_STATUS.DRAFT,
status: DOCUMENT_STATUS.DRAFT, createdAt: null,
createdAt: null, deadline: null,
deadline: null, signatures: [],
signatures: [] },
} ],
] },
} ],
] },
}, {
{ id: 2,
id: 2, name: 'Processus 2',
name: "Processus 2", description: 'Description du processus 2',
description: "Description du processus 2", commonDocuments: [
commonDocuments: [ {
{ id: 201,
id: 201, name: 'Règlement intérieur',
name: "Règlement intérieur", description: 'Document vierge pour le règlement intérieur',
description: "Document vierge pour le règlement intérieur", visibility: VISIBILITY_LEVELS.PUBLIC,
visibility: VISIBILITY_LEVELS.PUBLIC, status: DOCUMENT_STATUS.DRAFT,
status: DOCUMENT_STATUS.DRAFT, createdAt: null,
createdAt: null, deadline: null,
deadline: null, signatures: [],
signatures: [] },
}, {
{ id: 202,
id: 202, name: 'Charte de confidentialité',
name: "Charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, status: DOCUMENT_STATUS.DRAFT,
status: DOCUMENT_STATUS.DRAFT, createdAt: null,
createdAt: null, deadline: null,
deadline: null, signatures: [],
signatures: [] },
}, {
{ id: 203,
id: 203, name: 'Charte de confidentialité',
name: "Charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", visibility: VISIBILITY_LEVELS.PRIVATE,
visibility: VISIBILITY_LEVELS.PRIVATE, status: DOCUMENT_STATUS.DRAFT,
status: DOCUMENT_STATUS.DRAFT, createdAt: null,
createdAt: null, deadline: null,
deadline: null, signatures: [],
signatures: [] },
}, {
{ id: 204,
id: 204, name: 'Charte de confidentialité',
name: "Charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", visibility: VISIBILITY_LEVELS.PRIVATE,
visibility: VISIBILITY_LEVELS.PRIVATE, status: DOCUMENT_STATUS.DRAFT,
status: DOCUMENT_STATUS.DRAFT, createdAt: null,
createdAt: null, deadline: null,
deadline: null, signatures: [],
signatures: [] },
}, {
{ id: 205,
id: 205, name: 'Charte de confidentialité',
name: "Charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", visibility: VISIBILITY_LEVELS.PRIVATE,
visibility: VISIBILITY_LEVELS.PRIVATE, status: DOCUMENT_STATUS.DRAFT,
status: DOCUMENT_STATUS.DRAFT, createdAt: null,
createdAt: null, deadline: null,
deadline: null, signatures: [],
signatures: [] },
} ],
], roles: [
roles: [ {
{ name: 'Artefact',
name: "Artefact", members: [
members: [{ id: 17, name: "Quinn" }, { id: 18, name: "Rachel" }], { id: 17, name: 'Quinn' },
documents: [ { id: 18, name: 'Rachel' },
{ ],
id: 12, documents: [
name: "Document Artefact A", {
description: "Document vierge pour artefact", id: 12,
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, name: 'Document Artefact A',
status: DOCUMENT_STATUS.DRAFT, description: 'Document vierge pour artefact',
createdAt: null, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
deadline: null, status: DOCUMENT_STATUS.DRAFT,
signatures: [] createdAt: null,
}, deadline: null,
{ signatures: [],
id: 13, },
name: "Document Artefact B", {
description: "Document vierge pour validation artefact", id: 13,
visibility: VISIBILITY_LEVELS.PRIVATE, name: 'Document Artefact B',
status: DOCUMENT_STATUS.DRAFT, description: 'Document vierge pour validation artefact',
createdAt: null, visibility: VISIBILITY_LEVELS.PRIVATE,
deadline: null, status: DOCUMENT_STATUS.DRAFT,
signatures: [] createdAt: null,
} deadline: null,
] signatures: [],
}, },
{ ],
name: "Resolve", },
members: [{ id: 19, name: "Sam" }, { id: 20, name: "Tom" }], {
documents: [ name: 'Resolve',
{ members: [
id: 14, { id: 19, name: 'Sam' },
name: "Document Resolve A", { id: 20, name: 'Tom' },
description: "Document vierge pour résolution", ],
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, documents: [
status: DOCUMENT_STATUS.DRAFT, {
createdAt: null, id: 14,
deadline: null, name: 'Document Resolve A',
signatures: [] description: 'Document vierge pour résolution',
} visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
] status: DOCUMENT_STATUS.DRAFT,
} createdAt: null,
] deadline: null,
}, signatures: [],
{ },
id: 3, ],
name: "Processus 3", },
description: "Description du processus 3", ],
commonDocuments: [ },
{ {
id: 301, id: 3,
name: "Règlement intérieur", name: 'Processus 3',
description: "Document vierge pour le règlement intérieur", description: 'Description du processus 3',
visibility: VISIBILITY_LEVELS.PUBLIC, commonDocuments: [
status: DOCUMENT_STATUS.DRAFT, {
createdAt: null, id: 301,
deadline: null, name: 'Règlement intérieur',
signatures: [] description: 'Document vierge pour le règlement intérieur',
}, visibility: VISIBILITY_LEVELS.PUBLIC,
{ status: DOCUMENT_STATUS.DRAFT,
id: 302, createdAt: null,
name: "Charte de confidentialité", deadline: null,
description: "Document vierge pour la charte de confidentialité", signatures: [],
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, },
status: DOCUMENT_STATUS.DRAFT, {
createdAt: null, id: 302,
deadline: null, name: 'Charte de confidentialité',
signatures: [] description: 'Document vierge pour la charte de confidentialité',
}, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
{ status: DOCUMENT_STATUS.DRAFT,
id: 303, createdAt: null,
name: "Procédures générales", deadline: null,
description: "Document vierge pour les procédures générales", signatures: [],
visibility: VISIBILITY_LEVELS.PUBLIC, },
status: DOCUMENT_STATUS.DRAFT, {
createdAt: null, id: 303,
deadline: null, name: 'Procédures générales',
signatures: [] description: 'Document vierge pour les procédures générales',
} visibility: VISIBILITY_LEVELS.PUBLIC,
], status: DOCUMENT_STATUS.DRAFT,
roles: [ createdAt: null,
{ deadline: null,
name: "Deposit", signatures: [],
members: [{ id: 21, name: "Uma" }, { id: 22, name: "Victor" }], },
documents: [ ],
{ roles: [
id: 15, {
name: "Document Deposit A", name: 'Deposit',
description: "Document vierge pour dépôt", members: [
visibility: VISIBILITY_LEVELS.PRIVATE, { id: 21, name: 'Uma' },
status: DOCUMENT_STATUS.DRAFT, { id: 22, name: 'Victor' },
createdAt: null, ],
deadline: null, documents: [
signatures: [] {
}, id: 15,
{ name: 'Document Deposit A',
id: 16, description: 'Document vierge pour dépôt',
name: "Document Deposit B", visibility: VISIBILITY_LEVELS.PRIVATE,
description: "Document vierge pour validation dépôt", status: DOCUMENT_STATUS.DRAFT,
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, createdAt: null,
status: DOCUMENT_STATUS.DRAFT, deadline: null,
createdAt: null, signatures: [],
deadline: null, },
signatures: [] {
} id: 16,
] name: 'Document Deposit B',
}, description: 'Document vierge pour validation dépôt',
{ visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
name: "Payment", status: DOCUMENT_STATUS.DRAFT,
members: [{ id: 23, name: "Walter" }, { id: 24, name: "Xena" }], createdAt: null,
documents: [ deadline: null,
{ signatures: [],
id: 17, },
name: "Document Payment B", ],
description: "Document vierge pour paiement", },
visibility: VISIBILITY_LEVELS.PRIVATE, {
status: DOCUMENT_STATUS.DRAFT, name: 'Payment',
createdAt: null, members: [
deadline: null, { id: 23, name: 'Walter' },
signatures: [] { id: 24, name: 'Xena' },
}, ],
{ documents: [
id: 18, {
name: "Document Payment C", id: 17,
description: "Document vierge pour validation paiement", name: 'Document Payment B',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, description: 'Document vierge pour paiement',
status: DOCUMENT_STATUS.DRAFT, visibility: VISIBILITY_LEVELS.PRIVATE,
createdAt: null, status: DOCUMENT_STATUS.DRAFT,
deadline: null, createdAt: null,
signatures: [] deadline: null,
} signatures: [],
] },
} {
] id: 18,
} name: 'Document Payment C',
]; description: 'Document vierge pour validation paiement',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT,
createdAt: null,
deadline: null,
signatures: [],
},
],
},
],
},
];

210
src/mocks/mock-signature/membersMocks.js
View File

@ -1,105 +1,105 @@
export const membersMock = [ export const membersMock = [
// Processus 1 // Processus 1
{ {
id: 1, id: 1,
name: "Alice", name: 'Alice',
avatar: "A", avatar: 'A',
email: "alice@company.com", email: 'alice@company.com',
processRoles: [{ processId: 1, role: "User" }] processRoles: [{ processId: 1, role: 'User' }],
}, },
{ {
id: 2, id: 2,
name: "Bob", name: 'Bob',
avatar: "B", avatar: 'B',
email: "bob@company.com", email: 'bob@company.com',
processRoles: [{ processId: 1, role: "User" }] processRoles: [{ processId: 1, role: 'User' }],
}, },
{ {
id: 3, id: 3,
name: "Charlie", name: 'Charlie',
avatar: "C", avatar: 'C',
email: "charlie@company.com", email: 'charlie@company.com',
processRoles: [{ processId: 1, role: "Process" }] processRoles: [{ processId: 1, role: 'Process' }],
}, },
{ {
id: 4, id: 4,
name: "David", name: 'David',
avatar: "D", avatar: 'D',
email: "david@company.com", email: 'david@company.com',
processRoles: [{ processId: 1, role: "Process" }] processRoles: [{ processId: 1, role: 'Process' }],
}, },
{ {
id: 15, id: 15,
name: "Oscar", name: 'Oscar',
avatar: "O", avatar: 'O',
email: "oscar@company.com", email: 'oscar@company.com',
processRoles: [{ processId: 1, role: "Backup" }] processRoles: [{ processId: 1, role: 'Backup' }],
}, },
{ {
id: 16, id: 16,
name: "Patricia", name: 'Patricia',
avatar: "P", avatar: 'P',
email: "patricia@company.com", email: 'patricia@company.com',
processRoles: [{ processId: 1, role: "Backup" }] processRoles: [{ processId: 1, role: 'Backup' }],
}, },
// Processus 2 // Processus 2
{ {
id: 17, id: 17,
name: "Quinn", name: 'Quinn',
avatar: "Q", avatar: 'Q',
email: "quinn@company.com", email: 'quinn@company.com',
processRoles: [{ processId: 2, role: "Artefact" }] processRoles: [{ processId: 2, role: 'Artefact' }],
}, },
{ {
id: 18, id: 18,
name: "Rachel", name: 'Rachel',
avatar: "R", avatar: 'R',
email: "rachel@company.com", email: 'rachel@company.com',
processRoles: [{ processId: 2, role: "Artefact" }] processRoles: [{ processId: 2, role: 'Artefact' }],
}, },
{ {
id: 19, id: 19,
name: "Sam", name: 'Sam',
avatar: "S", avatar: 'S',
email: "sam@company.com", email: 'sam@company.com',
processRoles: [{ processId: 2, role: "Resolve" }] processRoles: [{ processId: 2, role: 'Resolve' }],
}, },
{ {
id: 20, id: 20,
name: "Tom", name: 'Tom',
avatar: "T", avatar: 'T',
email: "tom@company.com", email: 'tom@company.com',
processRoles: [{ processId: 2, role: "Resolve" }] processRoles: [{ processId: 2, role: 'Resolve' }],
}, },
// Processus 3 // Processus 3
{ {
id: 21, id: 21,
name: "Uma", name: 'Uma',
avatar: "U", avatar: 'U',
email: "uma@company.com", email: 'uma@company.com',
processRoles: [{ processId: 3, role: "Deposit" }] processRoles: [{ processId: 3, role: 'Deposit' }],
}, },
{ {
id: 22, id: 22,
name: "Victor", name: 'Victor',
avatar: "V", avatar: 'V',
email: "victor@company.com", email: 'victor@company.com',
processRoles: [{ processId: 3, role: "Deposit" }] processRoles: [{ processId: 3, role: 'Deposit' }],
}, },
{ {
id: 23, id: 23,
name: "Walter", name: 'Walter',
avatar: "W", avatar: 'W',
email: "walter@company.com", email: 'walter@company.com',
processRoles: [{ processId: 3, role: "Payment" }] processRoles: [{ processId: 3, role: 'Payment' }],
}, },
{ {
id: 24, id: 24,
name: "Xena", name: 'Xena',
avatar: "X", avatar: 'X',
email: "xena@company.com", email: 'xena@company.com',
processRoles: [{ processId: 3, role: "Payment" }] processRoles: [{ processId: 3, role: 'Payment' }],
} },
]; ];

129
src/mocks/mock-signature/messagesMock.ts
View File

@ -1,65 +1,64 @@
export const messagesMock = [ export const messagesMock = [
{ {
memberId: 1, // Conversations avec Mmber 1 memberId: 1, // Conversations avec Mmber 1
messages: [ messages: [
{ id: 1, sender: "Mmeber 1", text: "Salut !", time: "10:30 AM" }, { id: 1, sender: 'Mmeber 1', text: 'Salut !', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Bonjour ! Comment ça va ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Bonjour ! Comment ça va ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 AM" } { id: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
] ],
}, },
{ {
memberId: 2, // Conversations avec Member 2 memberId: 2, // Conversations avec Member 2
messages: [ messages: [
{ id: 1, sender: "Member 2", text: "Salut, on se voit ce soir ?", time: "10:30 AM" }, { id: 1, sender: 'Member 2', text: 'Salut, on se voit ce soir ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Oui, à quelle heure ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Oui, à quelle heure ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 3, // Conversations avec Member 3 memberId: 3, // Conversations avec Member 3
messages: [ messages: [
{ id: 1, sender: "Member 3", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 3', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 4, // Conversations avec Member 4 memberId: 4, // Conversations avec Member 4
messages: [ messages: [
{ id: 1, sender: "Member 4", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 4', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 5, // Conversations avec Member 5 memberId: 5, // Conversations avec Member 5
messages: [ messages: [
{ id: 1, sender: "Member 5", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 5', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 6, // Conversations avec Member 6 memberId: 6, // Conversations avec Member 6
messages: [ messages: [
{ id: 1, sender: "Member 6", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 6', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 7, // Conversations avec Member 7 memberId: 7, // Conversations avec Member 7
messages: [ messages: [
{ id: 1, sender: "Member 7", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 7', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 8, // Conversations avec Member 8 memberId: 8, // Conversations avec Member 8
messages: [ messages: [
{ id: 1, sender: "Member 8", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 8', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
} },
];
];

16
src/models/notification.model.ts
View File

@ -19,12 +19,12 @@ export interface IMessage {
} }
export interface UserDiff { export interface UserDiff {
new_state_merkle_root: string, // TODO add a merkle proof that the new_value belongs to that state new_state_merkle_root: string; // TODO add a merkle proof that the new_value belongs to that state
field: string, field: string;
previous_value: string, previous_value: string;
new_value: string, new_value: string;
notify_user: boolean, notify_user: boolean;
need_validation: boolean, need_validation: boolean;
// validated: bool, // validated: bool,
proof: any, // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such proof: any; // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such
} }

118
src/models/signature.models.ts
View File

@ -1,59 +1,59 @@
export interface Group { export interface Group {
id: number; id: number;
name: string; name: string;
description?: string; description?: string;
roles: { roles: {
id?: number; id?: number;
name: string; name: string;
members: { id: string | number; name: string; }[]; members: { id: string | number; name: string }[];
documents?: { documents?: {
id: number; id: number;
name: string; name: string;
description?: string; description?: string;
visibility: string; visibility: string;
createdAt: string | null; createdAt: string | null;
deadline: string | null; deadline: string | null;
signatures: DocumentSignature[]; signatures: DocumentSignature[];
status?: string; status?: string;
files?: Array<{ name: string; url: string }>; files?: Array<{ name: string; url: string }>;
}[]; }[];
}[]; }[];
} }
export interface Message { export interface Message {
id: number; id: number;
sender: string; sender: string;
text?: string; text?: string;
time: string; time: string;
type: 'text' | 'file'; type: 'text' | 'file';
fileName?: string; fileName?: string;
fileData?: string; fileData?: string;
} }
export interface MemberMessages { export interface MemberMessages {
memberId: string; memberId: string;
messages: Message[]; messages: Message[];
} }
export interface DocumentSignature { export interface DocumentSignature {
signed: boolean; signed: boolean;
member: { member: {
name: string; name: string;
}; };
signedAt?: string; signedAt?: string;
} }
export interface RequestParams { export interface RequestParams {
processId: number; processId: number;
processName: string; processName: string;
roleId: number; roleId: number;
roleName: string; roleName: string;
documentId: number; documentId: number;
documentName: string; documentName: string;
} }
export interface Notification { export interface Notification {
memberId: string; memberId: string;
text: string; text: string;
time: string; time: string;
} }

125
src/pages/account/account-component.ts
View File

@ -1,63 +1,62 @@
import { AccountElement } from './account'; import { AccountElement } from './account';
import accountCss from '../../../public/style/account.css?raw' import accountCss from '../../../public/style/account.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class AccountComponent extends HTMLElement { class AccountComponent extends HTMLElement {
_callback: any _callback: any;
accountElement: AccountElement | null = null; accountElement: AccountElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.accountElement = this.shadowRoot?.querySelector('account-element') || null; this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs') console.log('CALLBACKs');
this.render(); this.render();
this.fetchData(); this.fetchData();
if (!customElements.get('account-element')) { if (!customElements.get('account-element')) {
customElements.define('account-element', AccountElement); customElements.define('account-element', AccountElement);
} }
} }
async fetchData() { async fetchData() {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance() const service = await Services.getInstance();
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
} }
} }
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) { if (this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = accountCss; style.textContent = accountCss;
const accountElement = document.createElement('account-element'); const accountElement = document.createElement('account-element');
this.shadowRoot.appendChild(style); this.shadowRoot.appendChild(style);
this.shadowRoot.appendChild(accountElement); this.shadowRoot.appendChild(accountElement);
}
} }
} }
}
export { AccountComponent };
export { AccountComponent } customElements.define('account-component', AccountComponent);
customElements.define('account-component', AccountComponent);

190
src/pages/account/account.html
View File

@ -1,91 +1,99 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Account</title> <title>Account</title>
<link rel="stylesheet" href="../../public/style/account.css"> <link rel="stylesheet" href="../../public/style/account.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head> </head>
<body> <body>
<!-- Header Container --> <!-- Header Container -->
<div id="header-container"></div> <div id="header-container"></div>
<!-- Profile Popup --> <!-- Profile Popup -->
<div id="avatar-popup" class="popup"> <div id="avatar-popup" class="popup">
<div class="popup-content"> <div class="popup-content">
<span class="close-popup">&times;</span> <span class="close-popup">&times;</span>
<h2>Profile</h2> <h2>Profile</h2>
<!-- Banner Preview Section --> <!-- Banner Preview Section -->
<div class="banner-preview"> <div class="banner-preview">
<div class="banner-image-container"> <div class="banner-image-container">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img"> <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img" />
<div class="banner-content"> <div class="banner-content">
<div class="avatar-container"> <div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
</div> </div>
<div class="user-info"> <div class="user-info">
<span class="editable" id="popup-name"></span> <span class="editable" id="popup-name"></span>
<span class="editable" id="popup-lastname"></span> <span class="editable" id="popup-lastname"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="banner-controls"> <div class="banner-controls">
<label for="banner-upload" class="banner-upload-label button-style"> <label for="banner-upload" class="banner-upload-label button-style">
Change Banner Image Change Banner Image
<input type="file" id="banner-upload" accept="image/*" style="display: none;"> <input type="file" id="banner-upload" accept="image/*" style="display: none" />
</label> </label>
</div> </div>
</div> </div>
<!-- Avatar Upload Section --> <!-- Avatar Upload Section -->
<div class="popup-avatar"> <div class="popup-avatar">
<label for="avatar-upload" class="avatar-upload-label"> <label for="avatar-upload" class="avatar-upload-label">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
<div class="avatar-overlay"> <div class="avatar-overlay">
<span>Change Avatar</span> <span>Change Avatar</span>
</div> </div>
</label> </label>
<input type="file" id="avatar-upload" accept="image/*" style="display: none;"> <input type="file" id="avatar-upload" accept="image/*" style="display: none" />
</div> </div>
<!-- User Info Section --> <!-- User Info Section -->
<div class="popup-info"> <div class="popup-info">
<p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p> <p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p>
<p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p> <p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>
<p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p> <p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p>
</div> </div>
<!-- Buttons Container --> <!-- Buttons Container -->
<div class="popup-buttons"> <div class="popup-buttons">
<button class="delete-account-btn" onclick="confirmDeleteAccount()">Delete Account</button> <button class="delete-account-btn" onclick="confirmDeleteAccount()">Delete Account</button>
</div> </div>
</div> </div>
</div> </div>
<!-- Main Content --> <!-- Main Content -->
<div class="container"> <div class="container">
<!-- Parameter List --> <!-- Parameter List -->
<div class="parameter-list"> <div class="parameter-list">
<ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul> <ul class="parameter-list-ul" onclick="window.showPairing()">
<ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul> Pairing 🔗
<ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul> </ul>
<ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul> <ul class="parameter-list-ul" onclick="window.showWallet()">
</div> Wallet 👛
</ul>
<!-- Parameter Area --> <ul class="parameter-list-ul" onclick="window.showProcess()">
<div class="parameter-area"> Process ⚙️
<div class="content-container"> </ul>
<div id="pairing-content"></div> <ul class="parameter-list-ul" onclick="window.showData()">
<div id="wallet-content"></div> Data 💾
<div id="process-content"></div> </ul>
<div id="data-content"></div> </div>
</div>
</div> <!-- Parameter Area -->
</div> <div class="parameter-area">
<div class="content-container">
<!-- Scripts --> <div id="pairing-content"></div>
<script type="module" src="./account.ts?ts"></script> <div id="wallet-content"></div>
</body> <div id="process-content"></div>
</html> <div id="data-content"></div>
</div>
</div>
</div>
<!-- Scripts -->
<script type="module" src="./account.ts?ts"></script>
</body>
</html>

2528
src/pages/account/account.ts
View File

File diff suppressed because it is too large Load Diff

118
src/pages/chat/chat-component.ts
View File

@ -1,59 +1,59 @@
import { ChatElement } from './chat'; import { ChatElement } from './chat';
import chatCss from '../../../public/style/chat.css?raw' import chatCss from '../../../public/style/chat.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class ChatComponent extends HTMLElement { class ChatComponent extends HTMLElement {
_callback: any _callback: any;
chatElement: ChatElement | null = null; chatElement: ChatElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.chatElement = this.shadowRoot?.querySelector('chat-element') || null; this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs') console.log('CALLBACKs');
this.render(); this.render();
this.fetchData(); this.fetchData();
if (!customElements.get('chat-element')) { if (!customElements.get('chat-element')) {
customElements.define('chat-element', ChatElement); customElements.define('chat-element', ChatElement);
} }
} }
async fetchData() { async fetchData() {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance() const service = await Services.getInstance();
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
} }
} }
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) { if (this.shadowRoot) {
// Créer l'élément chat-element // Créer l'élément chat-element
const chatElement = document.createElement('chat-element'); const chatElement = document.createElement('chat-element');
this.shadowRoot.innerHTML = `<style>${chatCss}</style>`; this.shadowRoot.innerHTML = `<style>${chatCss}</style>`;
this.shadowRoot.appendChild(chatElement); this.shadowRoot.appendChild(chatElement);
} }
} }
} }
export { ChatComponent } export { ChatComponent };
customElements.define('chat-component', ChatComponent); customElements.define('chat-component', ChatComponent);

101
src/pages/chat/chat.html
View File

@ -1,53 +1,48 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Messagerie</title>
<title>Messagerie</title> <link rel="stylesheet" href="../../public/style/chat.css" />
<link rel="stylesheet" href="../../public/style/chat.css"> </head>
</head>
<body>
<body> <!-- Main content-->
<div class="container">
<!-- Main content--> <!-- List of groups -->
<div class="container"> <div class="group-list">
<!-- List of groups --> <ul id="group-list">
<div class="group-list"> <!-- Groups will be added here dynamically -->
<ul id="group-list"> </ul>
<!-- Groups will be added here dynamically --> </div>
</ul>
</div> <!-- Chat area -->
<div class="chat-area">
<!-- Chat area --> <div class="chat-header" id="chat-header">
<div class="chat-area"> <!-- Chat title -->
<div class="chat-header" id="chat-header"> </div>
<!-- Chat title --> <div class="messages" id="messages">
</div> <!-- Messages -->
<div class="messages" id="messages"> </div>
<!-- Messages -->
</div> <!-- Input area -->
<div class="input-area">
<!-- Input area --> <label for="file-input" class="attachment-icon">
<div class="input-area"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<label for="file-input" class="attachment-icon"> <path
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"
<path />
d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z" /> </svg>
</svg> </label>
</label> <input type="file" id="file-input" style="display: none" />
<input type="file" id="file-input" style="display: none;" />
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button>
</div>
<button id="send-button">Send</button> </div>
</div> </div>
</div> <script type="module" src="./chat.ts?ts"></script>
</body>
</div> </html>
<script type="module" src="./chat.ts?ts"></script>
</body>
</html>

1063
src/pages/chat/chat.ts
View File

File diff suppressed because it is too large Load Diff

97
src/pages/home/home-component.ts
View File

@ -1,48 +1,49 @@
import loginHtml from './home.html?raw' import loginHtml from './home.html?raw';
import loginScript from './home.ts?raw' import loginScript from './home.ts?raw';
import loginCss from '../../4nk.css?raw' import loginCss from '../../4nk.css?raw';
import { initHomePage } from './home'; import { initHomePage } from './home';
export class LoginComponent extends HTMLElement { export class LoginComponent extends HTMLElement {
_callback: any; _callback: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK LOGIN PAGE') console.log('CALLBACK LOGIN PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
initHomePage(); initHomePage();
}, 500); }, 500);
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
} }
} }
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
<style> this.shadowRoot.innerHTML = `
${loginCss} <style>
</style>${loginHtml} ${loginCss}
<script type="module"> </style>${loginHtml}
${loginScript} <script type="module">
</scipt> ${loginScript}
</scipt>
`;
} `;
} }
}
if (!customElements.get('login-4nk-component')) {
customElements.define('login-4nk-component', LoginComponent); if (!customElements.get('login-4nk-component')) {
} customElements.define('login-4nk-component', LoginComponent);
}

2
src/pages/home/home.html
View File

@ -35,4 +35,4 @@
<div id="emoji-display-2"></div> <div id="emoji-display-2"></div>
<button id="okButton" style="display: none">OK</button> <button id="okButton" style="display: none">OK</button>
</div> </div>
</div> </div>

12
src/pages/home/home.ts
View File

@ -4,10 +4,10 @@ import { addSubscription } from '../../utils/subscription.utils';
import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils'; import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/html.utils'; import { getCorrectDOM } from '../../utils/html.utils';
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component'; import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
export {QrScannerComponent} export { QrScannerComponent };
export async function initHomePage(): Promise<void> { export async function initHomePage(): Promise<void> {
console.log('INIT-HOME'); console.log('INIT-HOME');
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
container.querySelectorAll('.tab').forEach((tab) => { container.querySelectorAll('.tab').forEach((tab) => {
addSubscription(tab, 'click', () => { addSubscription(tab, 'click', () => {
container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active')); container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
@ -34,17 +34,15 @@ export async function openModal(myAddress: string, receiverAddress: string) {
// service.setNotification() // service.setNotification()
function scanDevice() { function scanDevice() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const scannerImg = container.querySelector('#scanner') as HTMLElement; const scannerImg = container.querySelector('#scanner') as HTMLElement;
if (scannerImg) scannerImg.style.display = 'none'; if (scannerImg) scannerImg.style.display = 'none';
const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement; const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
if (scannerQrCode) scannerQrCode.style.display = 'block'; if (scannerQrCode) scannerQrCode.style.display = 'block';
const scanButton = container?.querySelector('#scan-btn') as HTMLElement; const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
if (scanButton) scanButton.style.display = 'none'; if (scanButton) scanButton.style.display = 'none';
const reader = container?.querySelector('#qr-reader') const reader = container?.querySelector('#qr-reader');
if(reader) reader.innerHTML = '<qr-scanner></qr-scanner>' if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
} }
(window as any).scanDevice = scanDevice; (window as any).scanDevice = scanDevice;

101
src/pages/process-element/process-component.ts
View File

@ -1,50 +1,51 @@
import processHtml from './process-element.html?raw' import processHtml from './process-element.html?raw';
import processScript from './process-element.ts?raw' import processScript from './process-element.ts?raw';
import processCss from '../../4nk.css?raw' import processCss from '../../4nk.css?raw';
import { initProcessElement } from './process-element'; import { initProcessElement } from './process-element';
export class ProcessListComponent extends HTMLElement { export class ProcessListComponent extends HTMLElement {
_callback: any; _callback: any;
id: string = ''; id: string = '';
zone: string = ''; zone: string = '';
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE') console.log('CALLBACK PROCESS LIST PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
initProcessElement(this.id, this.zone); initProcessElement(this.id, this.zone);
}, 500); }, 500);
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
} }
} }
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
<style> this.shadowRoot.innerHTML = `
${processCss} <style>
</style>${processHtml} ${processCss}
<script type="module"> </style>${processHtml}
${processScript} <script type="module">
</scipt> ${processScript}
`; </scipt>
} `;
} }
}
if (!customElements.get('process-4nk-component')) {
customElements.define('process-4nk-component', ProcessListComponent); if (!customElements.get('process-4nk-component')) {
} customElements.define('process-4nk-component', ProcessListComponent);
}

97
src/pages/process/process-list-component.ts
View File

@ -1,48 +1,49 @@
import processHtml from './process.html?raw' import processHtml from './process.html?raw';
import processScript from './process.ts?raw' import processScript from './process.ts?raw';
import processCss from '../../4nk.css?raw' import processCss from '../../4nk.css?raw';
import { init } from './process'; import { init } from './process';
export class ProcessListComponent extends HTMLElement { export class ProcessListComponent extends HTMLElement {
_callback: any; _callback: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE') console.log('CALLBACK PROCESS LIST PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
init(); init();
}, 500); }, 500);
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
} }
} }
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
<style> this.shadowRoot.innerHTML = `
${processCss} <style>
</style>${processHtml} ${processCss}
<script type="module"> </style>${processHtml}
${processScript} <script type="module">
</scipt> ${processScript}
</scipt>
`;
} `;
} }
}
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);
}

16
src/pages/process/process.ts
View File

@ -4,7 +4,7 @@ import { getCorrectDOM } from '~/utils/html.utils';
// Initialize function, create initial tokens with itens that are already selected by the user // Initialize function, create initial tokens with itens that are already selected by the user
export async function init() { export async function init() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const element = container.querySelector('select') as HTMLSelectElement; const element = container.querySelector('select') as HTMLSelectElement;
// Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
@ -118,7 +118,7 @@ function openOptions(e: Event) {
// Function that create a token inside of a wrapper with the given value // Function that create a token inside of a wrapper with the given value
function createToken(wrapper: HTMLElement, value: any) { function createToken(wrapper: HTMLElement, value: any) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const search = wrapper.querySelector('.search-container'); const search = wrapper.querySelector('.search-container');
const inputInderline = container.querySelector('.selected-processes'); const inputInderline = container.querySelector('.selected-processes');
// Create token wrapper // Create token wrapper
@ -299,7 +299,7 @@ function removeToken(e: Event) {
// Remove token attribute // Remove token attribute
(target.parentNode as any)?.remove(); (target.parentNode as any)?.remove();
dropdown?.classList.remove('active'); dropdown?.classList.remove('active');
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const process = container.querySelector('#' + target.dataset.option); const process = container.querySelector('#' + target.dataset.option);
process?.remove(); process?.remove();
@ -355,7 +355,7 @@ addSubscription(document, 'click', () => {
}); });
async function showSelectedProcess(elem: MouseEvent) { async function showSelectedProcess(elem: MouseEvent) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
if (elem) { if (elem) {
const cardContent = container.querySelector('.process-card-content'); const cardContent = container.querySelector('.process-card-content');
@ -387,7 +387,7 @@ async function showSelectedProcess(elem: MouseEvent) {
} }
function select(event: Event) { function select(event: Event) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
const oldSelectedProcess = container.querySelector('.selected-process-zone'); const oldSelectedProcess = container.querySelector('.selected-process-zone');
oldSelectedProcess?.classList.remove('selected-process-zone'); oldSelectedProcess?.classList.remove('selected-process-zone');
@ -399,7 +399,7 @@ function select(event: Event) {
} }
function goToProcessPage() { function goToProcessPage() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = container.querySelector('.selected-process-zone'); const target = container.querySelector('.selected-process-zone');
console.log('🚀 ~ goToProcessPage ~ event:', target); console.log('🚀 ~ goToProcessPage ~ event:', target);
@ -426,8 +426,8 @@ async function getProcesses(): Promise<any[]> {
const res = Object.entries(processes).map(([key, value]) => ({ const res = Object.entries(processes).map(([key, value]) => ({
key, key,
value value,
})) }));
return res; return res;
} }

118
src/pages/signature/signature-component.ts
View File

@ -1,59 +1,59 @@
import { SignatureElement } from './signature'; import { SignatureElement } from './signature';
import signatureCss from '../../../public/style/signature.css?raw' import signatureCss from '../../../public/style/signature.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class SignatureComponent extends HTMLElement { class SignatureComponent extends HTMLElement {
_callback: any _callback: any;
signatureElement: SignatureElement | null = null; signatureElement: SignatureElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null; this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs') console.log('CALLBACKs');
this.render(); this.render();
this.fetchData(); this.fetchData();
if (!customElements.get('signature-element')) { if (!customElements.get('signature-element')) {
customElements.define('signature-element', SignatureElement); customElements.define('signature-element', SignatureElement);
} }
} }
async fetchData() { async fetchData() {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance() const service = await Services.getInstance();
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
set callback(fn) { set callback(fn) {
if (typeof fn === 'function') { if (typeof fn === 'function') {
this._callback = fn; this._callback = fn;
} else { } else {
console.error('Callback is not a function'); console.error('Callback is not a function');
} }
} }
get callback() { get callback() {
return this._callback; return this._callback;
} }
render() { render() {
if(this.shadowRoot) { if (this.shadowRoot) {
// Créer l'élément signature-element // Créer l'élément signature-element
const signatureElement = document.createElement('signature-element'); const signatureElement = document.createElement('signature-element');
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`; this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
this.shadowRoot.appendChild(signatureElement); this.shadowRoot.appendChild(signatureElement);
} }
} }
} }
export { SignatureComponent } export { SignatureComponent };
customElements.define('signature-component', SignatureComponent); customElements.define('signature-component', SignatureComponent);

99
src/pages/signature/signature.html
View File

@ -1,53 +1,46 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Signatures</title>
<title>Signatures</title> <link rel="stylesheet" href="../../../public/style/signature.css" />
<link rel="stylesheet" href="../../../public/style/signature.css"> </head>
</head>
<body>
<body> <!-- Main content-->
<div class="container">
<!-- Main content--> <!-- List of groups -->
<div class="container"> <div class="group-list">
<ul id="group-list"></ul>
<!-- List of groups --> </div>
<div class="group-list">
<ul id="group-list"> <!-- Chat area -->
</ul> <div class="chat-area">
</div> <div class="chat-header" id="chat-header">
<!-- Chat title -->
<!-- Chat area --> </div>
<div class="chat-area"> <div class="messages" id="messages">
<div class="chat-header" id="chat-header"> <!-- Messages -->
<!-- Chat title --> </div>
</div>
<div class="messages" id="messages"> <!-- Input area -->
<!-- Messages --> <div class="input-area">
</div> <label for="file-input" class="attachment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<!-- Input area --> <path
<div class="input-area"> d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"
<label for="file-input" class="attachment-icon"> />
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> </svg>
<path </label>
d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z" /> <input type="file" id="file-input" style="display: none" />
</svg>
</label> <textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<input type="file" id="file-input" style="display: none;" />
<button id="send-button">Send</button>
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea> </div>
</div>
</div>
<button id="send-button">Send</button> <script type="module" src="./signature.ts?ts"></script>
</div> </body>
</div> </html>
</div>
<script type="module" src="./signature.ts?ts"></script>
</body>
</html>

3427
src/pages/signature/signature.ts
View File

File diff suppressed because it is too large Load Diff

131
src/router.ts
View File

@ -6,7 +6,7 @@ import { cleanSubscriptions } from './utils/subscription.utils';
import { LoginComponent } from './pages/home/home-component'; import { LoginComponent } from './pages/home/home-component';
import { prepareAndSendPairingTx } from './utils/sp-address.utils'; import { prepareAndSendPairingTx } from './utils/sp-address.utils';
import ModalService from './services/modal.service'; import ModalService from './services/modal.service';
export {Services}; export { Services };
const routes: { [key: string]: string } = { const routes: { [key: string]: string } = {
home: '/src/pages/home/home.html', home: '/src/pages/home/home.html',
process: '/src/pages/process/process.html', process: '/src/pages/process/process.html',
@ -20,7 +20,7 @@ export let currentRoute = '';
export async function navigate(path: string) { export async function navigate(path: string) {
cleanSubscriptions(); cleanSubscriptions();
cleanPage() cleanPage();
path = path.replace(/^\//, ''); path = path.replace(/^\//, '');
if (path.includes('/')) { if (path.includes('/')) {
const parsedPath = path.split('/')[0]; const parsedPath = path.split('/')[0];
@ -42,81 +42,80 @@ async function handleLocation(path: string) {
const content = document.getElementById('containerId'); const content = document.getElementById('containerId');
if (content) { if (content) {
if (path === 'home') {
if(path === 'home' ) { const login = LoginComponent;
const login = LoginComponent
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
const accountComponent = document.createElement('login-4nk-component'); const accountComponent = document.createElement('login-4nk-component');
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;') accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;');
if(container) container.appendChild(accountComponent) if (container) container.appendChild(accountComponent);
} else if(path !== 'process') { } else if (path !== 'process') {
const html = await fetch(routeHtml).then((data) => data.text()); const html = await fetch(routeHtml).then((data) => data.text());
content.innerHTML = html; content.innerHTML = html;
} }
await new Promise(requestAnimationFrame); await new Promise(requestAnimationFrame);
injectHeader(); injectHeader();
// const modalService = await ModalService.getInstance() // const modalService = await ModalService.getInstance()
// modalService.injectValidationModal() // modalService.injectValidationModal()
switch (path) { switch (path) {
case 'process': case 'process':
// const { init } = await import('./pages/process/process'); // const { init } = await import('./pages/process/process');
const { ProcessListComponent } = await import('./pages/process/process-list-component'); const { ProcessListComponent } = await import('./pages/process/process-list-component');
const container2 = document.querySelector('#containerId'); const container2 = document.querySelector('#containerId');
const accountComponent = document.createElement('process-list-4nk-component'); const accountComponent = document.createElement('process-list-4nk-component');
if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent);
}
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;')
if(container2) container2.appendChild(accountComponent)
break;
case 'process-element': if (!customElements.get('process-list-4nk-component')) {
if (parsedPath && parsedPath.length) { customElements.define('process-list-4nk-component', ProcessListComponent);
const { initProcessElement } = await import('./pages/process-element/process-element');
const parseProcess = parsedPath[1].split('_');
initProcessElement(parseProcess[0], parseProcess[1]);
}
break;
case 'account':
const { AccountComponent } = await import('./pages/account/account-component');
const accountContainer = document.querySelector('.parameter-list');
if (accountContainer) {
if (!customElements.get('account-component')) {
customElements.define('account-component', AccountComponent);
} }
const accountComponent = document.createElement('account-component'); accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
accountContainer.appendChild(accountComponent); if (container2) container2.appendChild(accountComponent);
} break;
break;
case 'chat': case 'process-element':
const { ChatComponent } = await import('./pages/chat/chat-component'); if (parsedPath && parsedPath.length) {
const chatContainer = document.querySelector('.group-list'); const { initProcessElement } = await import('./pages/process-element/process-element');
if (chatContainer) { const parseProcess = parsedPath[1].split('_');
if (!customElements.get('chat-component')) { initProcessElement(parseProcess[0], parseProcess[1]);
customElements.define('chat-component', ChatComponent);
} }
const chatComponent = document.createElement('chat-component'); break;
chatContainer.appendChild(chatComponent);
}
break;
case 'signature': case 'account':
const { SignatureComponent } = await import('./pages/signature/signature-component'); const { AccountComponent } = await import('./pages/account/account-component');
const container = document.querySelector('.group-list'); const accountContainer = document.querySelector('.parameter-list');
if (container) { if (accountContainer) {
if (!customElements.get('signature-component')) { if (!customElements.get('account-component')) {
customElements.define('signature-component', SignatureComponent); customElements.define('account-component', AccountComponent);
}
const accountComponent = document.createElement('account-component');
accountContainer.appendChild(accountComponent);
} }
const signatureComponent = document.createElement('signature-component'); break;
container.appendChild(signatureComponent);
} case 'chat':
break; const { ChatComponent } = await import('./pages/chat/chat-component');
const chatContainer = document.querySelector('.group-list');
if (chatContainer) {
if (!customElements.get('chat-component')) {
customElements.define('chat-component', ChatComponent);
}
const chatComponent = document.createElement('chat-component');
chatContainer.appendChild(chatComponent);
}
break;
case 'signature':
const { SignatureComponent } = await import('./pages/signature/signature-component');
const container = document.querySelector('.group-list');
if (container) {
if (!customElements.get('signature-component')) {
customElements.define('signature-component', SignatureComponent);
}
const signatureComponent = document.createElement('signature-component');
container.appendChild(signatureComponent);
}
break;
} }
} }
} }
@ -157,7 +156,7 @@ export async function init(): Promise<void> {
setTimeout(async () => { setTimeout(async () => {
try { try {
// check if we have a shared secret with that address // check if we have a shared secret with that address
await prepareAndSendPairingTx(pairingAddress) await prepareAndSendPairingTx(pairingAddress);
} catch (e) { } catch (e) {
console.error('Failed to pair:', e); console.error('Failed to pair:', e);
} }
@ -174,7 +173,7 @@ export async function init(): Promise<void> {
async function cleanPage() { async function cleanPage() {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
if(container) container.innerHTML = '' if (container) container.innerHTML = '';
} }
async function injectHeader() { async function injectHeader() {

28
src/service-workers/cache.worker.js
View File

@ -1,20 +1,8 @@
const addResourcesToCache = async (resources) => { const addResourcesToCache = async (resources) => {
const cache = await caches.open("v1"); const cache = await caches.open('v1');
await cache.addAll(resources); await cache.addAll(resources);
}; };
self.addEventListener("install", (event) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(addResourcesToCache(['/', '/index.html', '/style.css', '/app.js', '/image-list.js', '/star-wars-logo.jpg', '/gallery/bountyHunters.jpg', '/gallery/myLittleVader.jpg', '/gallery/snowTroopers.jpg']));
addResourcesToCache([ });
"/",
"/index.html",
"/style.css",
"/app.js",
"/image-list.js",
"/star-wars-logo.jpg",
"/gallery/bountyHunters.jpg",
"/gallery/myLittleVader.jpg",
"/gallery/snowTroopers.jpg",
]),
);
});

50
src/service-workers/database.worker.js
View File

@ -9,21 +9,21 @@ self.addEventListener('activate', (event) => {
// Event listener for messages from clients // Event listener for messages from clients
self.addEventListener('message', async (event) => { self.addEventListener('message', async (event) => {
const data = event.data; const data = event.data;
if(data.type === 'START') { if (data.type === 'START') {
const fetchNotifications = async () => { const fetchNotifications = async () => {
const itemsWithFlag = await getAllItemsWithFlag(); const itemsWithFlag = await getAllItemsWithFlag();
// Process items with the specific flag // Process items with the specific flag
itemsWithFlag?.forEach(item => { itemsWithFlag?.forEach((item) => {
console.log(item); // Do something with each flagged item console.log(item); // Do something with each flagged item
}); });
event.ports[0].postMessage({ event.ports[0].postMessage({
type: "NOTIFICATIONS", type: 'NOTIFICATIONS',
data: itemsWithFlag data: itemsWithFlag,
}); });
} };
fetchNotifications() fetchNotifications();
setInterval(fetchNotifications, 2 * 60 * 1000); setInterval(fetchNotifications, 2 * 60 * 1000);
} }
@ -67,7 +67,7 @@ async function openDatabase() {
async function getAllItemsWithFlag() { async function getAllItemsWithFlag() {
const db = await openDatabase(); const db = await openDatabase();
// Function to get all processes because it is asynchronous // Function to get all processes because it is asynchronous
const getAllProcesses = () => { const getAllProcesses = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -75,7 +75,7 @@ async function getAllItemsWithFlag() {
const store = tx.objectStore('processes'); const store = tx.objectStore('processes');
const request = store.openCursor(); const request = store.openCursor();
const processes = []; const processes = [];
request.onsuccess = (event) => { request.onsuccess = (event) => {
const cursor = event.target.result; const cursor = event.target.result;
if (cursor) { if (cursor) {
@ -85,13 +85,13 @@ async function getAllItemsWithFlag() {
resolve(processes); resolve(processes);
} }
}; };
request.onerror = (event) => { request.onerror = (event) => {
reject(event.target.error); reject(event.target.error);
}; };
}); });
}; };
const allProcesses = await getAllProcesses(); const allProcesses = await getAllProcesses();
const tx = db.transaction('diffs', 'readonly'); const tx = db.transaction('diffs', 'readonly');
const store = tx.objectStore('diffs'); const store = tx.objectStore('diffs');
@ -100,13 +100,13 @@ async function getAllItemsWithFlag() {
const request = store.getAll(); const request = store.getAll();
request.onsuccess = (event) => { request.onsuccess = (event) => {
const allItems = event.target.result; const allItems = event.target.result;
const itemsWithFlag = allItems.filter(item => !item.need_validation); const itemsWithFlag = allItems.filter((item) => item.need_validation);
const processMap = {}; const processMap = {};
for (const diff of itemsWithFlag) { for (const diff of itemsWithFlag) {
const currentProcess = allProcesses.find(item => { const currentProcess = allProcesses.find((item) => {
return item.states.some(state => state.merkle_root === diff.new_state_merkle_root); return item.states.some((state) => state.merkle_root === diff.new_state_merkle_root);
}); });
if (currentProcess) { if (currentProcess) {
@ -116,18 +116,25 @@ async function getAllItemsWithFlag() {
processMap[processKey] = { processMap[processKey] = {
process: currentProcess.states, process: currentProcess.states,
processId: currentProcess.key, processId: currentProcess.key,
diffs: [] diffs: [],
}; };
} }
processMap[processKey].diffs.push(diff); processMap[processKey].diffs.push(diff);
} }
} }
const results = Object.values(processMap).map(entry => { const results = Object.values(processMap).map((entry) => {
const diffs = []
for(const state of entry.process) {
const filteredDiff = entry.diffs.filter(diff => diff.new_state_merkle_root === state.merkle_root);
if(filteredDiff && filteredDiff.length) {
diffs.push(filteredDiff)
}
}
return { return {
process: entry.process, process: entry.process,
processId: entry.processId, processId: entry.processId,
diffs: entry.diffs diffs: diffs,
}; };
}); });
@ -139,4 +146,3 @@ async function getAllItemsWithFlag() {
}; };
}); });
} }

21
src/services/database.service.ts
View File

@ -1,4 +1,4 @@
import Services from "./service"; import Services from './service';
class Database { class Database {
private static instance: Database; private static instance: Database;
@ -31,9 +31,9 @@ class Database {
}, },
AnkDiff: { AnkDiff: {
name: 'diffs', name: 'diffs',
options: { key: 'new_state_merkle_root'}, options: { key: 'new_state_merkle_root' },
indices: [] indices: [],
} },
}; };
// Private constructor to prevent direct instantiation from outside // Private constructor to prevent direct instantiation from outside
@ -144,11 +144,11 @@ class Database {
} }
private handleAddObjectResponse = async (event: MessageEvent) => { private handleAddObjectResponse = async (event: MessageEvent) => {
const data = event.data const data = event.data;
console.log('Received response from service worker (ADD_OBJECT):', data); console.log('Received response from service worker (ADD_OBJECT):', data);
if(data.type === 'NOTIFICATIONS') { if (data.type === 'NOTIFICATIONS') {
const service = await Services.getInstance() const service = await Services.getInstance();
service.setNotifications(data.data) service.setNotifications(data.data);
} }
}; };
@ -201,7 +201,7 @@ class Database {
getRequest.onsuccess = () => resolve(getRequest.result); getRequest.onsuccess = () => resolve(getRequest.result);
getRequest.onerror = () => reject(getRequest.error); getRequest.onerror = () => reject(getRequest.error);
}); });
return result return result;
} }
public async dumpStore(storeName: string): Promise<Record<string, any>> { public async dumpStore(storeName: string): Promise<Record<string, any>> {
@ -227,9 +227,8 @@ class Database {
// Combine keys and values into an object // Combine keys and values into an object
const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]])); const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
return result; return result;
} catch (error) { } catch (error) {
console.error("Error fetching data from IndexedDB:", error); console.error('Error fetching data from IndexedDB:', error);
throw error; throw error;
} }
} }

30
src/services/modal.service.ts
View File

@ -2,9 +2,11 @@ import modalHtml from '../components/login-modal/login-modal.html?raw';
import modalScript from '../components/login-modal/login-modal.js?raw'; import modalScript from '../components/login-modal/login-modal.js?raw';
import validationModalStyle from '../components/validation-modal/validation-modal.css?raw'; import validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
import Services from './service'; import Services from './service';
import { navigate } from '../router'; import { init, navigate } from '../router';
import { addressToEmoji } from '../utils/sp-address.utils'; import { addressToEmoji } from '../utils/sp-address.utils';
import { RoleDefinition } from 'pkg/sdk_client'; import { RoleDefinition } from 'pkg/sdk_client';
import { initValidationModal } from '~/components/validation-modal/validation-modal';
import { interpolate } from '~/utils/html.utils';
export default class ModalService { export default class ModalService {
private static instance: ModalService; private static instance: ModalService;
@ -51,33 +53,35 @@ export default class ModalService {
document.head.appendChild(script); document.head.appendChild(script);
} }
} }
async injectValidationModal(processDiff: any) { async injectValidationModal(processDiff: any) {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
if (container) { if (container) {
let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text()); let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
html = interpolate(html, {processId: processDiff.processId})
container.innerHTML += html; container.innerHTML += html;
// Dynamically load the header JS // Dynamically load the header JS
const script = document.createElement('script'); const script = document.createElement('script');
script.id = 'validation-modal-script' script.id = 'validation-modal-script';
script.src = '/src/components/validation-modal/validation-modal.ts'; script.src = '/src/components/validation-modal/validation-modal.ts';
script.type = 'module'; script.type = 'module';
document.head.appendChild(script); document.head.appendChild(script);
const css = document.createElement('style'); const css = document.createElement('style');
css.id = 'validation-modal-css' css.id = 'validation-modal-css';
css.innerText = validationModalStyle; css.innerText = validationModalStyle;
document.head.appendChild(css); document.head.appendChild(css);
initValidationModal(processDiff)
} }
} }
async closeValidationModal() { async closeValidationModal() {
const script = document.querySelector('#validation-modal-script') const script = document.querySelector('#validation-modal-script');
const css = document.querySelector('#validation-modal-css') const css = document.querySelector('#validation-modal-css');
const component = document.querySelector('#validation-modal') const component = document.querySelector('#validation-modal');
script?.remove() script?.remove();
css?.remove() css?.remove();
component?.remove() component?.remove();
} }
// this is kind of too specific for pairing though // this is kind of too specific for pairing though
@ -88,7 +92,7 @@ export default class ModalService {
const owner = roleDefinition['owner']; const owner = roleDefinition['owner'];
members = owner.members; members = owner.members;
} else { } else {
throw new Error('No \"owner\" role'); throw new Error('No "owner" role');
} }
// pairing specifics // pairing specifics
@ -145,7 +149,7 @@ export default class ModalService {
const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment); const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment);
await service.handleApiReturn(createPrdUpdateReturn); await service.handleApiReturn(createPrdUpdateReturn);
} catch (e) { } catch (e) {
throw e throw e;
} }
} else { } else {
throw new Error('No currentPcdCommitment'); throw new Error('No currentPcdCommitment');
@ -156,7 +160,7 @@ export default class ModalService {
const approveChangeReturn = service.approveChange(this.currentPcdCommitment!); const approveChangeReturn = service.approveChange(this.currentPcdCommitment!);
await service.handleApiReturn(approveChangeReturn); await service.handleApiReturn(approveChangeReturn);
} catch (e) { } catch (e) {
throw e throw e;
} }
try { try {

32
src/services/service.ts
View File

@ -11,13 +11,15 @@ import { storeData, retrieveData } from './storage.service';
export const U32_MAX = 4294967295; export const U32_MAX = 4294967295;
const storageUrl = `http://localhost:8080`; const storageUrl = `http://localhost:8080`;
const RELAY_ADDRESS = 'sprt1qqdg4x69xdyhxpz4weuel0985qyswa0x9ycl4q6xc0fngf78jtj27gqj5vff4fvlt3fydx4g7vv0mh7vqv8jncgusp6n2zv860nufdzkyy59pqrdr';
const wsurl = `https://demo.4nkweb.com/ws/`;
export default class Services { export default class Services {
private static initializing: Promise<Services> | null = null; private static initializing: Promise<Services> | null = null;
private static instance: Services; private static instance: Services;
private currentProcess: string | null = null; private currentProcess: string | null = null;
private pendingUpdates: any | null = null; private pendingUpdates: any | null = null;
private currentUpdateMerkleRoot: string | null = null; private currentUpdateMerkleRoot: string | null = null;
private localAddress: string | null = null; private localAddress: string | null = null;
private pairedAddresses: string[] = []; private pairedAddresses: string[] = [];
private sdkClient: any; private sdkClient: any;
@ -95,7 +97,7 @@ export default class Services {
throw new Error('Trying to connect to empty members list'); throw new Error('Trying to connect to empty members list');
} }
const members_str = members.map(member => JSON.stringify(member)); const members_str = members.map((member) => JSON.stringify(member));
const waitForAmount = async (): Promise<BigInt> => { const waitForAmount = async (): Promise<BigInt> => {
let attempts = 3; let attempts = 3;
@ -186,7 +188,7 @@ export default class Services {
try { try {
return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot); return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot);
} catch (e) { } catch (e) {
throw e throw e;
} }
} }
@ -282,7 +284,7 @@ export default class Services {
object: secret, object: secret,
key: null, key: null,
}); });
} }
const entries = Object.entries(confirmedSecrets).map(([key, value]) => ({ key, value })); const entries = Object.entries(confirmedSecrets).map(([key, value]) => ({ key, value }));
for (const entry of entries) { for (const entry of entries) {
try { try {
@ -344,7 +346,7 @@ export default class Services {
try { try {
await this.openConfirmationModal(); await this.openConfirmationModal();
} catch (e) { } catch (e) {
throw new Error(`Error while evaluating pending updates for process ${this.currentProcess}: ${e}`) throw new Error(`Error while evaluating pending updates for process ${this.currentProcess}: ${e}`);
} }
} }
@ -365,7 +367,7 @@ export default class Services {
continue; continue;
} }
const actualProposal: Record<string, RoleDefinition> = JSON.parse(value.new_value); const actualProposal: Record<string, RoleDefinition> = JSON.parse(value.new_value);
const merkleRoot: string = value.new_state_merkle_root; const merkleRoot: string = value.new_state_merkle_root;
try { try {
await this.routingInstance.openPairingConfirmationModal(actualProposal, this.currentProcess!, merkleRoot); await this.routingInstance.openPairingConfirmationModal(actualProposal, this.currentProcess!, merkleRoot);
} catch (e) { } catch (e) {
@ -479,7 +481,7 @@ export default class Services {
key: commitedIn, key: commitedIn,
}); });
} catch (e) { } catch (e) {
throw new Error(`Failed to save process: ${e}`) throw new Error(`Failed to save process: ${e}`);
} }
// We check how many copies in storage nodes // We check how many copies in storage nodes
@ -502,7 +504,7 @@ export default class Services {
public async saveDiffs(diffs: UserDiff[]) { public async saveDiffs(diffs: UserDiff[]) {
const db = await Database.getInstance(); const db = await Database.getInstance();
try { try {
for(const diff of diffs) { for (const diff of diffs) {
await db.addObject({ await db.addObject({
storeName: 'diffs', storeName: 'diffs',
object: diff, object: diff,
@ -510,7 +512,7 @@ export default class Services {
}); });
} }
} catch (e) { } catch (e) {
throw new Error(`Failed to save process: ${e}`) throw new Error(`Failed to save process: ${e}`);
} }
} }
@ -540,7 +542,6 @@ export default class Services {
} catch (e) { } catch (e) {
throw e; throw e;
} }
} }
public async restoreSecrets() { public async restoreSecrets() {
@ -549,14 +550,13 @@ export default class Services {
const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets'); const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets');
const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets'); const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets');
const secretsStore = { const secretsStore = {
'shared_secrets': sharedSecrets, shared_secrets: sharedSecrets,
'unconfirmed_secrets': Object.values(unconfirmedSecrets), unconfirmed_secrets: Object.values(unconfirmedSecrets),
}; };
this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore)); this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore));
} catch (e) { } catch (e) {
throw e; throw e;
} }
} }
getNotifications(): any[] | null { getNotifications(): any[] | null {
@ -583,13 +583,13 @@ export default class Services {
// path: '/notif3', // path: '/notif3',
// }, // },
// ]; // ];
return this.notifications return this.notifications;
} }
setNotifications(notifications: any[]) { setNotifications(notifications: any[]) {
this.notifications = notifications this.notifications = notifications;
} }
async importJSON(content: any): Promise<void> { async importJSON(content: any): Promise<void> {
return Promise.resolve(); return Promise.resolve();
} }

8
src/utils/document.utils.ts
View File

@ -1,4 +1,4 @@
export function getCorrectDOM(componentTag: string): Node { export function getCorrectDOM(componentTag: string): Node {
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
return dom return dom;
} }

6
src/utils/html.utils.ts
View File

@ -3,6 +3,6 @@ export function interpolate(template: string, data: { [key: string]: string }) {
} }
export function getCorrectDOM(componentTag: string): Node { export function getCorrectDOM(componentTag: string): Node {
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
return dom return dom;
} }

106
src/utils/messageMock.ts
View File

@ -1,53 +1,53 @@
import { messagesMock as initialMessagesMock } from '../mocks/mock-signature/messagesMock.js'; import { messagesMock as initialMessagesMock } from '../mocks/mock-signature/messagesMock.js';
// Store singleton for messages // Store singleton for messages
class MessageStore { class MessageStore {
private readonly STORAGE_KEY = 'chat_messages'; private readonly STORAGE_KEY = 'chat_messages';
private messages: any[] = []; private messages: any[] = [];
constructor() { constructor() {
this.messages = this.loadFromLocalStorage() || []; this.messages = this.loadFromLocalStorage() || [];
} }
private loadFromLocalStorage() { private loadFromLocalStorage() {
try { try {
const stored = localStorage.getItem(this.STORAGE_KEY); const stored = localStorage.getItem(this.STORAGE_KEY);
return stored ? JSON.parse(stored) : null; return stored ? JSON.parse(stored) : null;
} catch (error) { } catch (error) {
console.error('Error loading messages:', error); console.error('Error loading messages:', error);
return null; return null;
} }
} }
getMessages() { getMessages() {
return this.messages; return this.messages;
} }
setMessages(messages: any[]) { setMessages(messages: any[]) {
this.messages = messages; this.messages = messages;
this.saveToLocalStorage(); this.saveToLocalStorage();
} }
private saveToLocalStorage() { private saveToLocalStorage() {
try { try {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.messages)); localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.messages));
} catch (error) { } catch (error) {
console.error('Error saving messages:', error); console.error('Error saving messages:', error);
} }
} }
addMessage(memberId: string | number, message: any) { addMessage(memberId: string | number, message: any) {
const memberMessages = this.messages.find(m => String(m.memberId) === String(memberId)); const memberMessages = this.messages.find((m) => String(m.memberId) === String(memberId));
if (memberMessages) { if (memberMessages) {
memberMessages.messages.push(message); memberMessages.messages.push(message);
} else { } else {
this.messages.push({ this.messages.push({
memberId: String(memberId), memberId: String(memberId),
messages: [message] messages: [message],
}); });
} }
this.saveToLocalStorage(); this.saveToLocalStorage();
} }
} }
export const messageStore = new MessageStore(); export const messageStore = new MessageStore();

192
src/utils/notification.store.ts
View File

@ -1,96 +1,96 @@
interface INotification { interface INotification {
id: number; id: number;
title: string; title: string;
description: string; description: string;
time?: string; time?: string;
memberId?: string; memberId?: string;
} }
class NotificationStore { class NotificationStore {
private static instance: NotificationStore; private static instance: NotificationStore;
private notifications: INotification[] = []; private notifications: INotification[] = [];
private constructor() { private constructor() {
this.loadFromLocalStorage(); this.loadFromLocalStorage();
} }
static getInstance(): NotificationStore { static getInstance(): NotificationStore {
if (!NotificationStore.instance) { if (!NotificationStore.instance) {
NotificationStore.instance = new NotificationStore(); NotificationStore.instance = new NotificationStore();
} }
return NotificationStore.instance; return NotificationStore.instance;
} }
addNotification(notification: INotification) { addNotification(notification: INotification) {
this.notifications.push(notification); this.notifications.push(notification);
this.saveToLocalStorage(); this.saveToLocalStorage();
this.updateUI(); this.updateUI();
} }
removeNotification(index: number) { removeNotification(index: number) {
this.notifications.splice(index, 1); this.notifications.splice(index, 1);
this.saveToLocalStorage(); this.saveToLocalStorage();
this.updateUI(); this.updateUI();
} }
getNotifications(): INotification[] { getNotifications(): INotification[] {
return this.notifications; return this.notifications;
} }
private saveToLocalStorage() { private saveToLocalStorage() {
localStorage.setItem('notifications', JSON.stringify(this.notifications)); localStorage.setItem('notifications', JSON.stringify(this.notifications));
} }
private loadFromLocalStorage() { private loadFromLocalStorage() {
const stored = localStorage.getItem('notifications'); const stored = localStorage.getItem('notifications');
if (stored) { if (stored) {
this.notifications = JSON.parse(stored); this.notifications = JSON.parse(stored);
} }
} }
private updateUI() { private updateUI() {
const badge = document.querySelector('.notification-badge') as HTMLElement; const badge = document.querySelector('.notification-badge') as HTMLElement;
const board = document.querySelector('.notification-board') as HTMLElement; const board = document.querySelector('.notification-board') as HTMLElement;
if (badge) { if (badge) {
badge.textContent = this.notifications.length.toString(); badge.textContent = this.notifications.length.toString();
badge.style.display = this.notifications.length > 0 ? 'block' : 'none'; badge.style.display = this.notifications.length > 0 ? 'block' : 'none';
} }
if (board) { if (board) {
this.renderNotificationBoard(board); this.renderNotificationBoard(board);
} }
} }
private renderNotificationBoard(board: HTMLElement) { private renderNotificationBoard(board: HTMLElement) {
board.innerHTML = ''; board.innerHTML = '';
if (this.notifications.length === 0) { if (this.notifications.length === 0) {
board.innerHTML = '<div class="no-notification">No notifications available</div>'; board.innerHTML = '<div class="no-notification">No notifications available</div>';
return; return;
} }
this.notifications.forEach((notif, index) => { this.notifications.forEach((notif, index) => {
const notifElement = document.createElement('div'); const notifElement = document.createElement('div');
notifElement.className = 'notification-item'; notifElement.className = 'notification-item';
notifElement.innerHTML = ` notifElement.innerHTML = `
<div>${notif.title}</div> <div>${notif.title}</div>
<div>${notif.description}</div> <div>${notif.description}</div>
${notif.time ? `<div>${notif.time}</div>` : ''} ${notif.time ? `<div>${notif.time}</div>` : ''}
`; `;
notifElement.onclick = () => { notifElement.onclick = () => {
if (notif.memberId) { if (notif.memberId) {
window.loadMemberChat(notif.memberId); window.loadMemberChat(notif.memberId);
} }
this.removeNotification(index); this.removeNotification(index);
}; };
board.appendChild(notifElement); board.appendChild(notifElement);
}); });
} }
public refreshNotifications() { public refreshNotifications() {
this.updateUI(); this.updateUI();
} }
} }
export const notificationStore = NotificationStore.getInstance(); export const notificationStore = NotificationStore.getInstance();

8
src/utils/sp-address.utils.ts
View File

@ -100,7 +100,7 @@ export async function displayEmojis(text: string) {
// Verify Other address // Verify Other address
export function initAddressInput() { export function initAddressInput() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const addressInput = container.querySelector('#addressInput') as HTMLInputElement; const addressInput = container.querySelector('#addressInput') as HTMLInputElement;
const emojiDisplay = container.querySelector('#emoji-display-2'); const emojiDisplay = container.querySelector('#emoji-display-2');
const okButton = container.querySelector('#okButton') as HTMLButtonElement; const okButton = container.querySelector('#okButton') as HTMLButtonElement;
@ -148,13 +148,13 @@ export function initAddressInput() {
} }
async function onOkButtonClick() { async function onOkButtonClick() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value; const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value;
try { try {
// Connect to target, if necessary // Connect to target, if necessary
await prepareAndSendPairingTx(secondDeviceAddress); await prepareAndSendPairingTx(secondDeviceAddress);
} catch (e) { } catch (e) {
console.error(`onOkButtonClick error: ${e}`); console.error(`onOkButtonClick error: ${e}`);
} }
} }
@ -184,7 +184,7 @@ export async function prepareAndSendPairingTx(secondDeviceAddress: string) {
export async function generateQRCode(spAddress: string) { export async function generateQRCode(spAddress: string) {
try { try {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const currentUrl = 'https://' + window.location.host; const currentUrl = 'https://' + window.location.host;
const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress); const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress);
const qrCode = container?.querySelector('.qr-code img'); const qrCode = container?.querySelector('.qr-code img');