link diffs to validation modal and show and prettify
This commit is contained in:
AnisHADJARAB
Sosthene
parent
d64efbd6a0
commit
2124388cc5
111
src/4nk.css
111
src/4nk.css
@ -1,12 +1,9 @@
|
||||
:host {
|
||||
--primary-color
|
||||
: #3A506B;
|
||||
--primary-color: #3a506b;
|
||||
/* Bleu métallique */
|
||||
--secondary-color
|
||||
: #B0BEC5;
|
||||
--secondary-color: #b0bec5;
|
||||
/* Gris acier */
|
||||
--accent-color
|
||||
: #D68C45;
|
||||
--accent-color: #d68c45;
|
||||
/* Cuivre */
|
||||
font-family: Arial, sans-serif;
|
||||
height: 100vh;
|
||||
@ -30,7 +27,7 @@ body {
|
||||
}
|
||||
|
||||
.message strong {
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@ -80,7 +77,6 @@ body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
background: radial-gradient(circle, white, var(--primary-color));
|
||||
@ -88,12 +84,15 @@ body {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #37474F;
|
||||
color: #37474f;
|
||||
height: 9vh;
|
||||
width: 100vw;
|
||||
left: 0;
|
||||
top: 0;
|
||||
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12);
|
||||
box-shadow:
|
||||
0px 8px 10px -5px rgba(0, 0, 0, 0.2),
|
||||
0px 16px 24px 2px rgba(0, 0, 0, 0.14),
|
||||
0px 6px 30px 5px rgba(0, 0, 0, 0.12);
|
||||
|
||||
.nav-right-icons {
|
||||
display: flex;
|
||||
@ -101,7 +100,8 @@ body {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.notification-bell, .burger-menu {
|
||||
.notification-bell,
|
||||
.burger-menu {
|
||||
z-index: 3;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@ -109,8 +109,8 @@ body {
|
||||
}
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: -.7rem;
|
||||
left: -.8rem;
|
||||
top: -0.7rem;
|
||||
left: -0.8rem;
|
||||
background-color: red;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
@ -135,10 +135,10 @@ body {
|
||||
display: none;
|
||||
|
||||
.notification-element {
|
||||
padding: .8rem 0;
|
||||
padding: 0.8rem 0;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
.notification-element:not(:last-child) {
|
||||
@ -205,7 +205,7 @@ body {
|
||||
}
|
||||
.separator {
|
||||
width: 2px;
|
||||
background-color: #78909C;
|
||||
background-color: #78909c;
|
||||
height: 80%;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
@ -244,7 +244,7 @@ body {
|
||||
z-index: 1;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #E0E4D6;
|
||||
border-bottom-color: #e0e4d6;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@ -255,7 +255,7 @@ body {
|
||||
font-size: 1rem;
|
||||
color: #6200ea;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
.tab.active {
|
||||
@ -288,21 +288,20 @@ body {
|
||||
}
|
||||
|
||||
.emoji-display {
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
|
||||
#emoji-display-2 {
|
||||
margin-top: 30px;
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#okButton {
|
||||
margin-bottom: 2em;
|
||||
cursor: pointer;
|
||||
background-color: #D0D0D7;
|
||||
background-color: #d0d0d7;
|
||||
color: white;
|
||||
border-style: none;
|
||||
border-radius: 5px;
|
||||
@ -312,7 +311,7 @@ body {
|
||||
}
|
||||
|
||||
.pairing-request {
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
@ -320,13 +319,12 @@ body {
|
||||
.sp-address-btn {
|
||||
margin-bottom: 2em;
|
||||
cursor: pointer;
|
||||
background-color: #D0D0D7;
|
||||
background-color: #d0d0d7;
|
||||
color: white;
|
||||
border-style: none;
|
||||
border-radius: 5px;
|
||||
color: #000;
|
||||
padding: 2px;
|
||||
|
||||
}
|
||||
|
||||
.camera-card {
|
||||
@ -352,7 +350,6 @@ body {
|
||||
background-color: #3700b3;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
min-width: 300px;
|
||||
border: 1px solid #e0e0e0;
|
||||
@ -370,7 +367,6 @@ body {
|
||||
justify-content: flex-start;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@ -380,7 +376,7 @@ body {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
left: 2vw;
|
||||
width: 90%;
|
||||
@ -389,12 +385,12 @@ body {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.process-element {
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
&.selected {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -411,7 +407,6 @@ body {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.card-action {
|
||||
width: 100%;
|
||||
}
|
||||
@ -434,7 +429,7 @@ body {
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@ -446,7 +441,6 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* QR READER */
|
||||
#qr-reader div {
|
||||
position: inherit;
|
||||
@ -458,12 +452,11 @@ body {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* INPUT CSS **/
|
||||
.input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #ECEFF1;
|
||||
background-color: #eceff1;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@ -490,7 +483,10 @@ body {
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
pointer-events: none;
|
||||
transition: transform 0.3s, color 0.3s, font-size 0.3s;
|
||||
transition:
|
||||
transform 0.3s,
|
||||
color 0.3s,
|
||||
font-size 0.3s;
|
||||
}
|
||||
|
||||
.input-field:focus + .input-label,
|
||||
@ -507,7 +503,9 @@ body {
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: #6200ea;
|
||||
transition: width 0.3s, left 0.3s;
|
||||
transition:
|
||||
width 0.3s,
|
||||
left 0.3s;
|
||||
}
|
||||
|
||||
.input-field:focus ~ .input-underline {
|
||||
@ -541,9 +539,6 @@ body {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** AUTOCOMPLETE **/
|
||||
|
||||
select[data-multi-select-plugin] {
|
||||
@ -562,8 +557,12 @@ select[data-multi-select-plugin] {
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
||||
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
||||
-o-transition:
|
||||
border-color ease-in-out 0.15s,
|
||||
box-shadow ease-in-out 0.15s;
|
||||
transition:
|
||||
border-color ease-in-out 0.15s,
|
||||
box-shadow ease-in-out 0.15s;
|
||||
}
|
||||
|
||||
.autocomplete-list {
|
||||
@ -571,7 +570,7 @@ select[data-multi-select-plugin] {
|
||||
}
|
||||
|
||||
.multi-select-component:focus-within {
|
||||
box-shadow: inset 0px 0px 0px 2px #78ABFE;
|
||||
box-shadow: inset 0px 0px 0px 2px #78abfe;
|
||||
}
|
||||
|
||||
.multi-select-component .btn-group {
|
||||
@ -650,7 +649,7 @@ select[data-multi-select-plugin] {
|
||||
}
|
||||
|
||||
.dropdown-icon.active {
|
||||
transform: rotateX(180deg)
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.search-container .dropdown-icon {
|
||||
@ -666,7 +665,7 @@ select[data-multi-select-plugin] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
/* SVG background image */
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
||||
background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
|
||||
background-position: center;
|
||||
background-size: 10px;
|
||||
background-repeat: no-repeat;
|
||||
@ -684,8 +683,8 @@ select[data-multi-select-plugin] {
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
|
||||
.search-container ul :focus {
|
||||
@ -710,7 +709,6 @@ select[data-multi-select-plugin] {
|
||||
border-radius: 4px 0px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.search-container ul li:hover.not-cursor {
|
||||
cursor: default;
|
||||
}
|
||||
@ -718,7 +716,6 @@ select[data-multi-select-plugin] {
|
||||
.search-container ul li:hover {
|
||||
color: #333;
|
||||
background-color: #f0f0f0;
|
||||
;
|
||||
border-color: #adadad;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -729,8 +726,6 @@ select[data-multi-select-plugin] {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**************************************** Process page card ******************************************************/
|
||||
.process-card {
|
||||
min-width: 300px;
|
||||
@ -748,12 +743,11 @@ select[data-multi-select-plugin] {
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.process-card-content {
|
||||
text-align: left;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
left: 2vw;
|
||||
width: 90%;
|
||||
@ -762,16 +756,16 @@ select[data-multi-select-plugin] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.process-element {
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
&.selected {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
.selected-process-zone {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
@ -782,7 +776,6 @@ select[data-multi-select-plugin] {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
|
||||
.process-card-action {
|
||||
width: 100%;
|
||||
}
|
||||
@ -42,8 +42,7 @@ export async function initHeader() {
|
||||
// Charger le profile-header
|
||||
const profileContainer = document.getElementById('profile-header-container');
|
||||
if (profileContainer) {
|
||||
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html')
|
||||
.then(res => res.text());
|
||||
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html').then((res) => res.text());
|
||||
profileContainer.innerHTML = profileHeaderHtml;
|
||||
|
||||
// Initialiser les données du profil
|
||||
@ -77,7 +76,7 @@ async function setNotification(notifications: any[]): Promise<void> {
|
||||
if (notifications?.length) {
|
||||
badge.innerText = notifications.length.toString();
|
||||
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';
|
||||
for (const notif of notifications) {
|
||||
const notifElement = document.createElement('div');
|
||||
@ -90,9 +89,9 @@ async function setNotification(notifications: any[]): Promise<void> {
|
||||
// this.addSubscription(notifElement, 'click', 'goToProcessPage')
|
||||
notificationBoard.appendChild(notifElement);
|
||||
notifElement.addEventListener('click', async () => {
|
||||
const modalService = await ModalService.getInstance()
|
||||
modalService.injectValidationModal(notif)
|
||||
})
|
||||
const modalService = await ModalService.getInstance();
|
||||
modalService.injectValidationModal(notif);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
noNotifications.style.display = 'block';
|
||||
@ -140,7 +139,7 @@ input.onchange = async (e) => {
|
||||
await service.importJSON(content);
|
||||
alert('Import réussi');
|
||||
} catch (error) {
|
||||
alert('Erreur lors de l\'import: ' + error);
|
||||
alert("Erreur lors de l'import: " + error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<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="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 class="user-info">
|
||||
<span class="user-name">John</span>
|
||||
|
||||
@ -4,8 +4,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
|
||||
export default class QrScannerComponent extends HTMLElement {
|
||||
videoElement: any;
|
||||
wrapper: any
|
||||
qrScanner: any
|
||||
wrapper: any;
|
||||
qrScanner: any;
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
@ -29,8 +29,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
console.error('Video element not found!');
|
||||
return;
|
||||
}
|
||||
console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement)
|
||||
this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{
|
||||
console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
|
||||
this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
|
||||
highlightScanRegion: true,
|
||||
highlightCodeOutline: true,
|
||||
});
|
||||
@ -38,9 +38,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
try {
|
||||
await QrScanner.hasCamera();
|
||||
this.qrScanner.start();
|
||||
this.videoElement.style = 'height: 200px; width: 200px'
|
||||
this.shadowRoot?.appendChild(this.wrapper)
|
||||
|
||||
this.videoElement.style = 'height: 200px; width: 200px';
|
||||
this.shadowRoot?.appendChild(this.wrapper);
|
||||
} catch (e) {
|
||||
console.error('No camera found or error starting the QR scanner', e);
|
||||
}
|
||||
@ -56,7 +55,7 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
if (spAddress) {
|
||||
// Call the sendPairingTx function with the extracted sp_address
|
||||
try {
|
||||
await prepareAndSendPairingTx(spAddress)
|
||||
await prepareAndSendPairingTx(spAddress);
|
||||
} catch (e) {
|
||||
console.error('Failed to pair:', e);
|
||||
}
|
||||
|
||||
@ -1,55 +1,7 @@
|
||||
|
||||
<div id="validation-modal" class="validation-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-title">Validate</div>
|
||||
<div class="modal-title">Validate Process {{processId}}</div>
|
||||
<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">
|
||||
|
||||
@ -1,17 +1,56 @@
|
||||
import ModalService from "~/services/modal.service";
|
||||
import ModalService from '~/services/modal.service';
|
||||
|
||||
document.querySelectorAll('.expansion-panel-header').forEach(header => {
|
||||
async function validate() {
|
||||
console.log('==> VALIDATE');
|
||||
const modalservice = await ModalService.getInstance();
|
||||
modalservice.closeValidationModal();
|
||||
}
|
||||
|
||||
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 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() {
|
||||
console.log('==> VALIDATE')
|
||||
const modalservice = await ModalService.getInstance()
|
||||
modalservice.closeValidationModal()
|
||||
}
|
||||
|
||||
(window as any).validate = validate
|
||||
(window as any).validate = validate;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { DocumentSignature } from "~/models/signature.models";
|
||||
import { DocumentSignature } from '~/models/signature.models';
|
||||
|
||||
export interface Group {
|
||||
id: number;
|
||||
|
||||
10
src/main.ts
10
src/main.ts
@ -5,15 +5,7 @@ import { ChatElement } from './pages/chat/chat';
|
||||
import { AccountComponent } from './pages/account/account-component';
|
||||
import { AccountElement } from './pages/account/account';
|
||||
|
||||
export {
|
||||
SignatureComponent,
|
||||
SignatureElement,
|
||||
ChatComponent,
|
||||
ChatElement,
|
||||
AccountComponent,
|
||||
AccountElement
|
||||
};
|
||||
|
||||
export { SignatureComponent, SignatureElement, ChatComponent, ChatElement, AccountComponent, AccountElement };
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -4,325 +4,269 @@ export const STORAGE_KEYS = {
|
||||
pairing: 'pairingRows',
|
||||
wallet: 'walletRows',
|
||||
process: 'processRows',
|
||||
data: 'dataRows'
|
||||
data: 'dataRows',
|
||||
};
|
||||
|
||||
// Initialiser le stockage des lignes par défaut dans le localStorage
|
||||
export const defaultRows = [
|
||||
{
|
||||
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz",
|
||||
column2: "🎊😑🎄😩",
|
||||
column3: "Laptop"
|
||||
column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz',
|
||||
column2: '🎊😑🎄😩',
|
||||
column3: 'Laptop',
|
||||
},
|
||||
{
|
||||
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx",
|
||||
column2: "🎏🎕😧🌥",
|
||||
column3: "Phone" }
|
||||
column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx',
|
||||
column2: '🎏🎕😧🌥',
|
||||
column3: 'Phone',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockNotifications: { [key: string]: Notification[] } = {};
|
||||
|
||||
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"
|
||||
];
|
||||
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'];
|
||||
|
||||
export const mockDataRows = [
|
||||
{
|
||||
column1: "User Project",
|
||||
column2: "private",
|
||||
column3: "User",
|
||||
column4: "6 months",
|
||||
column5: "NDA signed",
|
||||
column6: "Contract #123",
|
||||
processName: "User Process",
|
||||
zone: "A"
|
||||
column1: 'User Project',
|
||||
column2: 'private',
|
||||
column3: 'User',
|
||||
column4: '6 months',
|
||||
column5: 'NDA signed',
|
||||
column6: 'Contract #123',
|
||||
processName: 'User Process',
|
||||
zone: 'A',
|
||||
},
|
||||
{
|
||||
column1: "Process Project",
|
||||
column2: "private",
|
||||
column3: "Process",
|
||||
column4: "1 year",
|
||||
column5: "Terms accepted",
|
||||
column6: "Contract #456",
|
||||
processName: "Process Management",
|
||||
zone: "B"
|
||||
column1: 'Process Project',
|
||||
column2: 'private',
|
||||
column3: 'Process',
|
||||
column4: '1 year',
|
||||
column5: 'Terms accepted',
|
||||
column6: 'Contract #456',
|
||||
processName: 'Process Management',
|
||||
zone: 'B',
|
||||
},
|
||||
{
|
||||
column1: "Member Project",
|
||||
column2: "private",
|
||||
column3: "Member",
|
||||
column4: "3 months",
|
||||
column5: "GDPR compliant",
|
||||
column6: "Contract #789",
|
||||
processName: "Member Process",
|
||||
zone: "C"
|
||||
column1: 'Member Project',
|
||||
column2: 'private',
|
||||
column3: 'Member',
|
||||
column4: '3 months',
|
||||
column5: 'GDPR compliant',
|
||||
column6: 'Contract #789',
|
||||
processName: 'Member Process',
|
||||
zone: 'C',
|
||||
},
|
||||
{
|
||||
column1: "Peer Project",
|
||||
column2: "public",
|
||||
column3: "Peer",
|
||||
column4: "2 years",
|
||||
column5: "IP rights",
|
||||
column6: "Contract #101",
|
||||
processName: "Peer Process",
|
||||
zone: "D"
|
||||
column1: 'Peer Project',
|
||||
column2: 'public',
|
||||
column3: 'Peer',
|
||||
column4: '2 years',
|
||||
column5: 'IP rights',
|
||||
column6: 'Contract #101',
|
||||
processName: 'Peer Process',
|
||||
zone: 'D',
|
||||
},
|
||||
{
|
||||
column1: "Payment Project",
|
||||
column2: "confidential",
|
||||
column3: "Payment",
|
||||
column4: "1 year",
|
||||
column5: "NDA signed",
|
||||
column6: "Contract #102",
|
||||
processName: "Payment Process",
|
||||
zone: "E"
|
||||
column1: 'Payment Project',
|
||||
column2: 'confidential',
|
||||
column3: 'Payment',
|
||||
column4: '1 year',
|
||||
column5: 'NDA signed',
|
||||
column6: 'Contract #102',
|
||||
processName: 'Payment Process',
|
||||
zone: 'E',
|
||||
},
|
||||
{
|
||||
column1: "Deposit Project",
|
||||
column2: "private",
|
||||
column3: "Deposit",
|
||||
column4: "6 months",
|
||||
column5: "Terms accepted",
|
||||
column6: "Contract #103",
|
||||
processName: "Deposit Process",
|
||||
zone: "F"
|
||||
column1: 'Deposit Project',
|
||||
column2: 'private',
|
||||
column3: 'Deposit',
|
||||
column4: '6 months',
|
||||
column5: 'Terms accepted',
|
||||
column6: 'Contract #103',
|
||||
processName: 'Deposit Process',
|
||||
zone: 'F',
|
||||
},
|
||||
{
|
||||
column1: "Artefact Project",
|
||||
column2: "public",
|
||||
column3: "Artefact",
|
||||
column4: "1 year",
|
||||
column5: "GDPR compliant",
|
||||
column6: "Contract #104",
|
||||
processName: "Artefact Process",
|
||||
zone: "G"
|
||||
column1: 'Artefact Project',
|
||||
column2: 'public',
|
||||
column3: 'Artefact',
|
||||
column4: '1 year',
|
||||
column5: 'GDPR compliant',
|
||||
column6: 'Contract #104',
|
||||
processName: 'Artefact Process',
|
||||
zone: 'G',
|
||||
},
|
||||
{
|
||||
column1: "Resolve Project",
|
||||
column2: "private",
|
||||
column3: "Resolve",
|
||||
column4: "2 years",
|
||||
column5: "IP rights",
|
||||
column6: "Contract #105",
|
||||
processName: "Resolve Process",
|
||||
zone: "H"
|
||||
column1: 'Resolve Project',
|
||||
column2: 'private',
|
||||
column3: 'Resolve',
|
||||
column4: '2 years',
|
||||
column5: 'IP rights',
|
||||
column6: 'Contract #105',
|
||||
processName: 'Resolve Process',
|
||||
zone: 'H',
|
||||
},
|
||||
{
|
||||
column1: "Backup Project",
|
||||
column2: "public",
|
||||
column3: "Backup",
|
||||
column4: "1 year",
|
||||
column5: "NDA signed",
|
||||
column6: "Contract #106",
|
||||
processName: "Backup Process",
|
||||
zone: "I"
|
||||
}
|
||||
column1: 'Backup Project',
|
||||
column2: 'public',
|
||||
column3: 'Backup',
|
||||
column4: '1 year',
|
||||
column5: 'NDA signed',
|
||||
column6: 'Contract #106',
|
||||
processName: 'Backup Process',
|
||||
zone: 'I',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockProcessRows = [
|
||||
{
|
||||
process: "User Project",
|
||||
role: "User",
|
||||
process: 'User Project',
|
||||
role: 'User',
|
||||
notification: {
|
||||
messages: [
|
||||
{ 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" },
|
||||
{ id: 5, read: true, date: "2024-03-06", message: "Team meeting scheduled" }
|
||||
]
|
||||
}
|
||||
{ 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' },
|
||||
{ id: 5, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Member Project",
|
||||
role: "Member",
|
||||
process: 'Member Project',
|
||||
role: 'Member',
|
||||
notification: {
|
||||
messages: [
|
||||
{ id: 6, read: true, date: "2024-03-10", message: "Member access granted" },
|
||||
{ id: 7, read: true, date: "2024-03-09", message: "Documentation updated" },
|
||||
{ id: 8, read: true, date: "2024-03-08", message: "Project status: on track" }
|
||||
]
|
||||
}
|
||||
{ id: 6, read: true, date: '2024-03-10', message: 'Member access granted' },
|
||||
{ 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: "Peer Project",
|
||||
role: "Peer",
|
||||
process: 'Peer Project',
|
||||
role: 'Peer',
|
||||
notification: {
|
||||
unread: 2,
|
||||
total: 4,
|
||||
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" },
|
||||
{ id: 13, read: true, date: "2024-03-06", message: "Team meeting scheduled" }
|
||||
]
|
||||
}
|
||||
{ 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' },
|
||||
{ id: 13, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Deposit Project",
|
||||
role: "Deposit",
|
||||
process: 'Deposit Project',
|
||||
role: 'Deposit',
|
||||
notification: {
|
||||
unread: 1,
|
||||
total: 10,
|
||||
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" },
|
||||
{ id: 18, read: true, date: "2024-03-06", message: "Project status: on track" }
|
||||
]
|
||||
}
|
||||
{ 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' },
|
||||
{ id: 18, read: true, date: '2024-03-06', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Artefact Project",
|
||||
role: "Artefact",
|
||||
process: 'Artefact Project',
|
||||
role: 'Artefact',
|
||||
notification: {
|
||||
unread: 0,
|
||||
total: 3,
|
||||
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" },
|
||||
{ id: 23, read: true, date: "2024-03-06", message: "Project status: on track" }
|
||||
]
|
||||
}
|
||||
{ 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' },
|
||||
{ id: 23, read: true, date: '2024-03-06', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Resolve Project",
|
||||
role: "Resolve",
|
||||
process: 'Resolve Project',
|
||||
role: 'Resolve',
|
||||
notification: {
|
||||
unread: 5,
|
||||
total: 12,
|
||||
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" },
|
||||
{ id: 28, read: true, date: "2024-03-06", message: "Project status: on track" }
|
||||
]
|
||||
}
|
||||
}
|
||||
{ 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' },
|
||||
{ id: 28, read: true, date: '2024-03-06', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const mockContracts = {
|
||||
'Contract #123': {
|
||||
title: "User Project Agreement",
|
||||
date: "2024-01-15",
|
||||
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."
|
||||
title: 'User Project Agreement',
|
||||
date: '2024-01-15',
|
||||
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",
|
||||
parties: ["Company XYZ", "Process Team"],
|
||||
terms: [
|
||||
"Process Workflow",
|
||||
"Quality Standards",
|
||||
"Performance Metrics",
|
||||
"Monitoring Procedures"
|
||||
],
|
||||
content: "This contract defines the process management standards and procedures."
|
||||
title: 'Process Management Contract',
|
||||
date: '2024-02-01',
|
||||
parties: ['Company XYZ', 'Process Team'],
|
||||
terms: ['Process Workflow', 'Quality Standards', 'Performance Metrics', 'Monitoring Procedures'],
|
||||
content: 'This contract defines the process management standards and procedures.',
|
||||
},
|
||||
'Contract #789': {
|
||||
title: "Member Access Agreement",
|
||||
date: "2024-03-15",
|
||||
parties: ["Company XYZ", "Member Team"],
|
||||
terms: [
|
||||
"Member Rights",
|
||||
"Access Levels",
|
||||
"Security Protocol",
|
||||
"Confidentiality Agreement"
|
||||
],
|
||||
content: "This agreement outlines the terms for member access and privileges."
|
||||
title: 'Member Access Agreement',
|
||||
date: '2024-03-15',
|
||||
parties: ['Company XYZ', 'Member Team'],
|
||||
terms: ['Member Rights', 'Access Levels', 'Security Protocol', 'Confidentiality Agreement'],
|
||||
content: 'This agreement outlines the terms for member access and privileges.',
|
||||
},
|
||||
'Contract #101': {
|
||||
title: "Peer Collaboration Agreement",
|
||||
date: "2024-04-01",
|
||||
parties: ["Company XYZ", "Peer Network"],
|
||||
terms: [
|
||||
"Collaboration Rules",
|
||||
"Resource Sharing",
|
||||
"Dispute Resolution",
|
||||
"Network Protocol"
|
||||
],
|
||||
content: "This contract establishes peer collaboration and networking guidelines."
|
||||
title: 'Peer Collaboration Agreement',
|
||||
date: '2024-04-01',
|
||||
parties: ['Company XYZ', 'Peer Network'],
|
||||
terms: ['Collaboration Rules', 'Resource Sharing', 'Dispute Resolution', 'Network Protocol'],
|
||||
content: 'This contract establishes peer collaboration and networking guidelines.',
|
||||
},
|
||||
'Contract #102': {
|
||||
title: "Payment Processing Agreement",
|
||||
date: "2024-05-01",
|
||||
parties: ["Company XYZ", "Payment Team"],
|
||||
terms: [
|
||||
"Transaction Protocol",
|
||||
"Security Measures",
|
||||
"Fee Structure",
|
||||
"Service Availability"
|
||||
],
|
||||
content: "This agreement defines payment processing terms and conditions."
|
||||
title: 'Payment Processing Agreement',
|
||||
date: '2024-05-01',
|
||||
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."
|
||||
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."
|
||||
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."
|
||||
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."
|
||||
}
|
||||
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.',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,40 +1,52 @@
|
||||
export const groupsMock = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Group 🚀 ",
|
||||
name: 'Group 🚀 ',
|
||||
roles: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Role 1",
|
||||
members: [{ id: 1, name: "Member 1" }, { id: 2, name: "Member 2" }]
|
||||
name: 'Role 1',
|
||||
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" }]
|
||||
}
|
||||
]
|
||||
name: 'Role 2',
|
||||
members: [
|
||||
{ id: 3, name: 'Member 3' },
|
||||
{ id: 4, name: 'Member 4' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Group ₿",
|
||||
name: 'Group ₿',
|
||||
roles: [
|
||||
{
|
||||
id: 3,
|
||||
name: "Role 1",
|
||||
members: [{ id: 5, name: "Member 5" }, { id: 6, name: "Member 6" }]
|
||||
}
|
||||
]
|
||||
name: 'Role 1',
|
||||
members: [
|
||||
{ id: 5, name: 'Member 5' },
|
||||
{ id: 6, name: 'Member 6' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Group 🪙",
|
||||
name: 'Group 🪙',
|
||||
roles: [
|
||||
{
|
||||
id: 4,
|
||||
name: "Role 1",
|
||||
members: [{ id: 7, name: "Member 7" }, { id: 8, name: "Member 8" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
name: 'Role 1',
|
||||
members: [
|
||||
{ id: 7, name: 'Member 7' },
|
||||
{ id: 8, name: 'Member 8' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,64 +2,63 @@ export const messagesMock = [
|
||||
{
|
||||
memberId: 1, // Conversations avec Mmber 1
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 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: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 2, // Conversations avec Member 2
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 3, // Conversations avec Member 3
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 4, // Conversations avec Member 4
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 5, // Conversations avec Member 5
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 6, // Conversations avec Member 6
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 7, // Conversations avec Member 7
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 8, // Conversations avec Member 8
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,29 +1,19 @@
|
||||
// Définir les rôles autorisés
|
||||
const VALID_ROLES = [
|
||||
"User",
|
||||
"Process",
|
||||
"Member",
|
||||
"Peer",
|
||||
"Payment",
|
||||
"Deposit",
|
||||
"Artefact",
|
||||
"Resolve",
|
||||
"Backup"
|
||||
];
|
||||
const VALID_ROLES = ['User', 'Process', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
|
||||
|
||||
const VISIBILITY_LEVELS = {
|
||||
PUBLIC: "public",
|
||||
CONFIDENTIAL: "confidential",
|
||||
PRIVATE: "private",
|
||||
PUBLIC: 'public',
|
||||
CONFIDENTIAL: 'confidential',
|
||||
PRIVATE: 'private',
|
||||
};
|
||||
|
||||
const DOCUMENT_STATUS = {
|
||||
DRAFT: "draft",
|
||||
PENDING: "pending",
|
||||
IN_REVIEW: "in_review",
|
||||
APPROVED: "approved",
|
||||
REJECTED: "rejected",
|
||||
EXPIRED: "expired"
|
||||
DRAFT: 'draft',
|
||||
PENDING: 'pending',
|
||||
IN_REVIEW: 'in_review',
|
||||
APPROVED: 'approved',
|
||||
REJECTED: 'rejected',
|
||||
EXPIRED: 'expired',
|
||||
};
|
||||
|
||||
// Fonction pour créer un rôle
|
||||
@ -37,424 +27,445 @@ function createRole(name, members) {
|
||||
export const groupsMock = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Processus 1",
|
||||
description: "Description du processus 1",
|
||||
name: 'Processus 1',
|
||||
description: 'Description du processus 1',
|
||||
commonDocuments: [
|
||||
{
|
||||
id: 101,
|
||||
name: "Règlement intérieur",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Règlement intérieur',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: "Procédures générales",
|
||||
description: "Document vierge pour les procédures générales",
|
||||
name: 'Procédures générales',
|
||||
description: 'Document vierge pour les procédures générales',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
name: "Urgency A",
|
||||
name: 'Urgency A',
|
||||
description: "Document vierge pour le plan d'urgence A",
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
name: "Urgency B",
|
||||
name: 'Urgency B',
|
||||
description: "Document vierge pour le plan d'urgence B",
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
name: "Urgency C",
|
||||
name: 'Urgency C',
|
||||
description: "Document vierge pour le plan d'urgence C",
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
name: "Document à signer",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Document à signer',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
name: "User",
|
||||
members: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
|
||||
name: 'User',
|
||||
members: [
|
||||
{ id: 1, name: 'Alice' },
|
||||
{ id: 2, name: 'Bob' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Document User A",
|
||||
description: "Description du document User A.",
|
||||
visibility: "public",
|
||||
createdAt: "2024-01-01",
|
||||
deadline: "2024-02-01",
|
||||
name: 'Document User A',
|
||||
description: 'Description du document User A.',
|
||||
visibility: 'public',
|
||||
createdAt: '2024-01-01',
|
||||
deadline: '2024-02-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 1, name: "Alice" },
|
||||
member: { id: 1, name: 'Alice' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-15"
|
||||
signedAt: '2024-01-15',
|
||||
},
|
||||
{
|
||||
member: { id: 2, name: "Bob" },
|
||||
signed: false
|
||||
}
|
||||
]
|
||||
member: { id: 2, name: 'Bob' },
|
||||
signed: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Document User B",
|
||||
description: "Document vierge pour le rôle User",
|
||||
visibility: "confidential",
|
||||
name: 'Document User B',
|
||||
description: 'Document vierge pour le rôle User',
|
||||
visibility: 'confidential',
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Document User C",
|
||||
description: "Document vierge pour validation utilisateur",
|
||||
name: 'Document User C',
|
||||
description: 'Document vierge pour validation utilisateur',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Document User D",
|
||||
description: "Document vierge pour approbation utilisateur",
|
||||
name: 'Document User D',
|
||||
description: 'Document vierge pour approbation utilisateur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
members: [{ id: 3, name: "Charlie" }, { id: 4, name: "David" }],
|
||||
name: 'Process',
|
||||
members: [
|
||||
{ id: 3, name: 'Charlie' },
|
||||
{ id: 4, name: 'David' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 3,
|
||||
name: "Document Process A",
|
||||
description: "Description du document Process A.",
|
||||
visibility: "confidential",
|
||||
createdAt: "2024-01-10",
|
||||
deadline: "2024-03-01",
|
||||
name: 'Document Process A',
|
||||
description: 'Description du document Process A.',
|
||||
visibility: 'confidential',
|
||||
createdAt: '2024-01-10',
|
||||
deadline: '2024-03-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 3, name: "Charlie" },
|
||||
member: { id: 3, name: 'Charlie' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-12"
|
||||
}
|
||||
]
|
||||
signedAt: '2024-01-12',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Document Process B",
|
||||
description: "Document vierge pour processus interne",
|
||||
name: 'Document Process B',
|
||||
description: 'Document vierge pour processus interne',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "Document Process C",
|
||||
description: "Document vierge pour validation processus",
|
||||
name: 'Document Process C',
|
||||
description: 'Document vierge pour validation processus',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "Document Process D",
|
||||
description: "Document vierge pour validation processus",
|
||||
name: 'Document Process D',
|
||||
description: 'Document vierge pour validation processus',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.PENDING,
|
||||
createdAt: "2024-01-15",
|
||||
deadline: "2024-02-01",
|
||||
createdAt: '2024-01-15',
|
||||
deadline: '2024-02-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 3, name: "Charlie" },
|
||||
member: { id: 3, name: 'Charlie' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-15"
|
||||
signedAt: '2024-01-15',
|
||||
},
|
||||
{
|
||||
member: { id: 4, name: "David" },
|
||||
signed: false
|
||||
}
|
||||
]
|
||||
member: { id: 4, name: 'David' },
|
||||
signed: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "Document Process E",
|
||||
description: "Document vierge pour validation processus",
|
||||
name: 'Document Process E',
|
||||
description: 'Document vierge pour validation processus',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.PENDING,
|
||||
createdAt: "2024-01-15",
|
||||
deadline: "2024-02-01",
|
||||
createdAt: '2024-01-15',
|
||||
deadline: '2024-02-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 3, name: "Charlie" },
|
||||
member: { id: 3, name: 'Charlie' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-15"
|
||||
signedAt: '2024-01-15',
|
||||
},
|
||||
{
|
||||
member: { id: 4, name: "David" },
|
||||
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: [
|
||||
{
|
||||
id: 11,
|
||||
name: "Document Backup A",
|
||||
description: "Document vierge pour sauvegarde",
|
||||
name: 'Document Backup A',
|
||||
description: 'Document vierge pour sauvegarde',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Processus 2",
|
||||
description: "Description du processus 2",
|
||||
name: 'Processus 2',
|
||||
description: 'Description du processus 2',
|
||||
commonDocuments: [
|
||||
{
|
||||
id: 201,
|
||||
name: "Règlement intérieur",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Règlement intérieur',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 202,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 203,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 204,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 205,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
name: "Artefact",
|
||||
members: [{ id: 17, name: "Quinn" }, { id: 18, name: "Rachel" }],
|
||||
name: 'Artefact',
|
||||
members: [
|
||||
{ id: 17, name: 'Quinn' },
|
||||
{ id: 18, name: 'Rachel' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 12,
|
||||
name: "Document Artefact A",
|
||||
description: "Document vierge pour artefact",
|
||||
name: 'Document Artefact A',
|
||||
description: 'Document vierge pour artefact',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "Document Artefact B",
|
||||
description: "Document vierge pour validation artefact",
|
||||
name: 'Document Artefact B',
|
||||
description: 'Document vierge pour validation artefact',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Resolve",
|
||||
members: [{ id: 19, name: "Sam" }, { id: 20, name: "Tom" }],
|
||||
name: 'Resolve',
|
||||
members: [
|
||||
{ id: 19, name: 'Sam' },
|
||||
{ id: 20, name: 'Tom' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 14,
|
||||
name: "Document Resolve A",
|
||||
description: "Document vierge pour résolution",
|
||||
name: 'Document Resolve A',
|
||||
description: 'Document vierge pour résolution',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Processus 3",
|
||||
description: "Description du processus 3",
|
||||
name: 'Processus 3',
|
||||
description: 'Description du processus 3',
|
||||
commonDocuments: [
|
||||
{
|
||||
id: 301,
|
||||
name: "Règlement intérieur",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Règlement intérieur',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 302,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 303,
|
||||
name: "Procédures générales",
|
||||
description: "Document vierge pour les procédures générales",
|
||||
name: 'Procédures générales',
|
||||
description: 'Document vierge pour les procédures générales',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
name: "Deposit",
|
||||
members: [{ id: 21, name: "Uma" }, { id: 22, name: "Victor" }],
|
||||
name: 'Deposit',
|
||||
members: [
|
||||
{ id: 21, name: 'Uma' },
|
||||
{ id: 22, name: 'Victor' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 15,
|
||||
name: "Document Deposit A",
|
||||
description: "Document vierge pour dépôt",
|
||||
name: 'Document Deposit A',
|
||||
description: 'Document vierge pour dépôt',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Document Deposit B",
|
||||
description: "Document vierge pour validation dépôt",
|
||||
name: 'Document Deposit B',
|
||||
description: 'Document vierge pour validation dépôt',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Payment",
|
||||
members: [{ id: 23, name: "Walter" }, { id: 24, name: "Xena" }],
|
||||
name: 'Payment',
|
||||
members: [
|
||||
{ id: 23, name: 'Walter' },
|
||||
{ id: 24, name: 'Xena' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 17,
|
||||
name: "Document Payment B",
|
||||
description: "Document vierge pour paiement",
|
||||
name: 'Document Payment B',
|
||||
description: 'Document vierge pour paiement',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "Document Payment C",
|
||||
description: "Document vierge pour validation paiement",
|
||||
name: 'Document Payment C',
|
||||
description: 'Document vierge pour validation paiement',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,104 +2,104 @@ export const membersMock = [
|
||||
// Processus 1
|
||||
{
|
||||
id: 1,
|
||||
name: "Alice",
|
||||
avatar: "A",
|
||||
email: "alice@company.com",
|
||||
processRoles: [{ processId: 1, role: "User" }]
|
||||
name: 'Alice',
|
||||
avatar: 'A',
|
||||
email: 'alice@company.com',
|
||||
processRoles: [{ processId: 1, role: 'User' }],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Bob",
|
||||
avatar: "B",
|
||||
email: "bob@company.com",
|
||||
processRoles: [{ processId: 1, role: "User" }]
|
||||
name: 'Bob',
|
||||
avatar: 'B',
|
||||
email: 'bob@company.com',
|
||||
processRoles: [{ processId: 1, role: 'User' }],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Charlie",
|
||||
avatar: "C",
|
||||
email: "charlie@company.com",
|
||||
processRoles: [{ processId: 1, role: "Process" }]
|
||||
name: 'Charlie',
|
||||
avatar: 'C',
|
||||
email: 'charlie@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Process' }],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "David",
|
||||
avatar: "D",
|
||||
email: "david@company.com",
|
||||
processRoles: [{ processId: 1, role: "Process" }]
|
||||
name: 'David',
|
||||
avatar: 'D',
|
||||
email: 'david@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Process' }],
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Oscar",
|
||||
avatar: "O",
|
||||
email: "oscar@company.com",
|
||||
processRoles: [{ processId: 1, role: "Backup" }]
|
||||
name: 'Oscar',
|
||||
avatar: 'O',
|
||||
email: 'oscar@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Backup' }],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Patricia",
|
||||
avatar: "P",
|
||||
email: "patricia@company.com",
|
||||
processRoles: [{ processId: 1, role: "Backup" }]
|
||||
name: 'Patricia',
|
||||
avatar: 'P',
|
||||
email: 'patricia@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Backup' }],
|
||||
},
|
||||
|
||||
// Processus 2
|
||||
{
|
||||
id: 17,
|
||||
name: "Quinn",
|
||||
avatar: "Q",
|
||||
email: "quinn@company.com",
|
||||
processRoles: [{ processId: 2, role: "Artefact" }]
|
||||
name: 'Quinn',
|
||||
avatar: 'Q',
|
||||
email: 'quinn@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Artefact' }],
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "Rachel",
|
||||
avatar: "R",
|
||||
email: "rachel@company.com",
|
||||
processRoles: [{ processId: 2, role: "Artefact" }]
|
||||
name: 'Rachel',
|
||||
avatar: 'R',
|
||||
email: 'rachel@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Artefact' }],
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
name: "Sam",
|
||||
avatar: "S",
|
||||
email: "sam@company.com",
|
||||
processRoles: [{ processId: 2, role: "Resolve" }]
|
||||
name: 'Sam',
|
||||
avatar: 'S',
|
||||
email: 'sam@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Resolve' }],
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "Tom",
|
||||
avatar: "T",
|
||||
email: "tom@company.com",
|
||||
processRoles: [{ processId: 2, role: "Resolve" }]
|
||||
name: 'Tom',
|
||||
avatar: 'T',
|
||||
email: 'tom@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Resolve' }],
|
||||
},
|
||||
|
||||
// Processus 3
|
||||
{
|
||||
id: 21,
|
||||
name: "Uma",
|
||||
avatar: "U",
|
||||
email: "uma@company.com",
|
||||
processRoles: [{ processId: 3, role: "Deposit" }]
|
||||
name: 'Uma',
|
||||
avatar: 'U',
|
||||
email: 'uma@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Deposit' }],
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: "Victor",
|
||||
avatar: "V",
|
||||
email: "victor@company.com",
|
||||
processRoles: [{ processId: 3, role: "Deposit" }]
|
||||
name: 'Victor',
|
||||
avatar: 'V',
|
||||
email: 'victor@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Deposit' }],
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
name: "Walter",
|
||||
avatar: "W",
|
||||
email: "walter@company.com",
|
||||
processRoles: [{ processId: 3, role: "Payment" }]
|
||||
name: 'Walter',
|
||||
avatar: 'W',
|
||||
email: 'walter@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Payment' }],
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
name: "Xena",
|
||||
avatar: "X",
|
||||
email: "xena@company.com",
|
||||
processRoles: [{ processId: 3, role: "Payment" }]
|
||||
}
|
||||
name: 'Xena',
|
||||
avatar: 'X',
|
||||
email: 'xena@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Payment' }],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,64 +2,63 @@ export const messagesMock = [
|
||||
{
|
||||
memberId: 1, // Conversations avec Mmber 1
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 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: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 2, // Conversations avec Member 2
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 3, // Conversations avec Member 3
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 4, // Conversations avec Member 4
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 5, // Conversations avec Member 5
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 6, // Conversations avec Member 6
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 7, // Conversations avec Member 7
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 8, // Conversations avec Member 8
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -19,12 +19,12 @@ export interface IMessage {
|
||||
}
|
||||
|
||||
export interface UserDiff {
|
||||
new_state_merkle_root: string, // TODO add a merkle proof that the new_value belongs to that state
|
||||
field: string,
|
||||
previous_value: string,
|
||||
new_value: string,
|
||||
notify_user: boolean,
|
||||
need_validation: boolean,
|
||||
new_state_merkle_root: string; // TODO add a merkle proof that the new_value belongs to that state
|
||||
field: string;
|
||||
previous_value: string;
|
||||
new_value: string;
|
||||
notify_user: boolean;
|
||||
need_validation: boolean;
|
||||
// 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
|
||||
}
|
||||
@ -5,7 +5,7 @@ export interface Group {
|
||||
roles: {
|
||||
id?: number;
|
||||
name: string;
|
||||
members: { id: string | number; name: string; }[];
|
||||
members: { id: string | number; name: string }[];
|
||||
documents?: {
|
||||
id: number;
|
||||
name: string;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { AccountElement } from './account';
|
||||
import accountCss from '../../../public/style/account.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
import accountCss from '../../../public/style/account.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
|
||||
class AccountComponent extends HTMLElement {
|
||||
_callback: any
|
||||
_callback: any;
|
||||
accountElement: AccountElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT')
|
||||
console.log('INIT');
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs')
|
||||
console.log('CALLBACKs');
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class AccountComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance()
|
||||
const service = await Services.getInstance();
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -54,10 +54,9 @@ class AccountComponent extends HTMLElement {
|
||||
|
||||
this.shadowRoot.appendChild(style);
|
||||
this.shadowRoot.appendChild(accountElement);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { AccountComponent }
|
||||
export { AccountComponent };
|
||||
customElements.define('account-component', AccountComponent);
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Account</title>
|
||||
<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="../../public/style/account.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Container -->
|
||||
@ -20,10 +20,10 @@
|
||||
<!-- Banner Preview Section -->
|
||||
<div class="banner-preview">
|
||||
<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="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 class="user-info">
|
||||
<span class="editable" id="popup-name"></span>
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="banner-controls">
|
||||
<label for="banner-upload" class="banner-upload-label button-style">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,12 +42,12 @@
|
||||
<!-- Avatar Upload Section -->
|
||||
<div class="popup-avatar">
|
||||
<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">
|
||||
<span>Change Avatar</span>
|
||||
</div>
|
||||
</label>
|
||||
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
|
||||
<input type="file" id="avatar-upload" accept="image/*" style="display: none" />
|
||||
</div>
|
||||
|
||||
<!-- User Info Section -->
|
||||
@ -68,10 +68,18 @@
|
||||
<div class="container">
|
||||
<!-- Parameter List -->
|
||||
<div class="parameter-list">
|
||||
<ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showPairing()">
|
||||
Pairing 🔗
|
||||
</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showWallet()">
|
||||
Wallet 👛
|
||||
</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showProcess()">
|
||||
Process ⚙️
|
||||
</ul>
|
||||
<ul class="parameter-list-ul" onclick="window.showData()">
|
||||
Data 💾
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Parameter Area -->
|
||||
|
||||
@ -71,15 +71,11 @@ export function showAlert(message: string): void {
|
||||
class AccountElement extends HTMLElement {
|
||||
private dom: Node;
|
||||
|
||||
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.dom = getCorrectDOM('account-element');
|
||||
|
||||
|
||||
window.showPairing = () => this.showPairing();
|
||||
window.showWallet = () => this.showWallet();
|
||||
window.showProcess = () => this.showProcess();
|
||||
@ -177,7 +173,6 @@ private loadSavedBanner(): void {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private closeNotificationPopup(event: Event): void {
|
||||
const target = event.target as HTMLElement;
|
||||
const isOverlay = target.classList.contains('notification-popup-overlay');
|
||||
@ -189,10 +184,10 @@ private closeNotificationPopup(event: Event): void {
|
||||
}
|
||||
|
||||
private markAsRead(processName: string, messageId: number, element: HTMLElement): void {
|
||||
const process = mockProcessRows.find(p => p.process === processName);
|
||||
const process = mockProcessRows.find((p) => p.process === processName);
|
||||
if (!process) return;
|
||||
|
||||
const message = process.notification.messages.find(m => m.id === messageId);
|
||||
const message = process.notification.messages.find((m) => m.id === messageId);
|
||||
if (!message || message.read) return;
|
||||
|
||||
message.read = true;
|
||||
@ -222,7 +217,7 @@ private markAsRead(processName: string, messageId: number, element: HTMLElement)
|
||||
// Fonctions de gestion des données et de l'interface
|
||||
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
|
||||
const total = messages.length;
|
||||
const unread = messages.filter(msg => !msg.read).length;
|
||||
const unread = messages.filter((msg) => !msg.read).length;
|
||||
return { unread, total };
|
||||
}
|
||||
|
||||
@ -236,7 +231,7 @@ private exportRecovery(): void {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
confirmButtonColor: '#C89666',
|
||||
cancelButtonColor: '#6c757d'
|
||||
cancelButtonColor: '#6c757d',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const recoveryWords = this.generateRecoveryWords();
|
||||
@ -246,12 +241,16 @@ private exportRecovery(): void {
|
||||
title: 'Your Recovery Words',
|
||||
html: `
|
||||
<div class="recovery-words-container">
|
||||
${recoveryWords.map((word, index) => `
|
||||
${recoveryWords
|
||||
.map(
|
||||
(word, index) => `
|
||||
<div class="recovery-word">
|
||||
<span class="word-number">${index + 1}.</span>
|
||||
<span class="word">${word}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="recovery-warning">
|
||||
Please write these words down carefully. They will be needed to recover your account.
|
||||
@ -261,7 +260,7 @@ private exportRecovery(): void {
|
||||
confirmButtonText: 'I confirm the export',
|
||||
confirmButtonColor: '#C89666',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false
|
||||
allowEscapeKey: false,
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Stocker l'état du bouton dans le localStorage
|
||||
@ -280,10 +279,7 @@ private exportRecovery(): void {
|
||||
}
|
||||
|
||||
private generateRecoveryWords(): string[] {
|
||||
const wordsList = [
|
||||
'apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum',
|
||||
'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'
|
||||
];
|
||||
const wordsList = ['apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum', 'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'];
|
||||
const recoveryWords: string[] = [];
|
||||
while (recoveryWords.length < 4) {
|
||||
const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
|
||||
@ -397,7 +393,9 @@ private updateTableContent(rows: Row[]): void {
|
||||
const tbody = document.querySelector('#pairing-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
|
||||
@ -408,19 +406,19 @@ private updateTableContent(rows: Row[]): void {
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
|
||||
|
||||
private confirmRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
const inputs = currentRow.getElementsByTagName('input');
|
||||
const values: string[] = Array.from(inputs).map(input => input.value.trim());
|
||||
const values: string[] = Array.from(inputs).map((input) => input.value.trim());
|
||||
|
||||
// Vérification des champs vides
|
||||
if (values.some(value => value === '')) {
|
||||
if (values.some((value) => value === '')) {
|
||||
showAlert('Please fill in all fields');
|
||||
return;
|
||||
}
|
||||
@ -434,7 +432,7 @@ private confirmRow(): void {
|
||||
const newRow: Row = {
|
||||
column1: values[0],
|
||||
column2: values[1],
|
||||
column3: values[2]
|
||||
column3: values[2],
|
||||
};
|
||||
|
||||
const storageKey = STORAGE_KEYS[currentMode];
|
||||
@ -570,7 +568,6 @@ private handleAvatarUpload(event: Event): void {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private showProcess(): void {
|
||||
//console.log("showProcess called");
|
||||
currentMode = 'process';
|
||||
@ -608,7 +605,9 @@ private updateProcessTableContent(rows: any[]): void {
|
||||
const tbody = document.querySelector('#process-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.process}</td>
|
||||
<td>${row.role}</td>
|
||||
@ -621,19 +620,21 @@ private updateProcessTableContent(rows: any[]): void {
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
|
||||
|
||||
private showProcessNotifications(processName: string): void {
|
||||
const process = mockProcessRows.find(p => p.process === processName);
|
||||
const process = mockProcessRows.find((p) => p.process === processName);
|
||||
if (!process) return;
|
||||
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'notifications-modal';
|
||||
|
||||
let notificationsList = process.notification.messages.map(msg => `
|
||||
let notificationsList = process.notification.messages
|
||||
.map(
|
||||
(msg) => `
|
||||
<div class="notification-item ${msg.read ? 'read' : 'unread'}"
|
||||
onclick="window.markAsRead('${processName}', ${msg.id}, this)">
|
||||
<div class="notification-status">
|
||||
@ -644,7 +645,9 @@ private showProcessNotifications(processName: string): void {
|
||||
<small>${msg.date}</small>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
|
||||
if (process.notification.messages.length === 0) {
|
||||
notificationsList = '<p>No notifications</p>';
|
||||
@ -676,13 +679,11 @@ private showProcessNotifications(processName: string): void {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
private handleLogout(): void {
|
||||
localStorage.clear();
|
||||
window.location.href = '../login/login.html';
|
||||
}
|
||||
|
||||
|
||||
// Fonctions de gestion des contrats
|
||||
private showContractPopup(contractId: string) {
|
||||
// Empêcher la navigation par défaut
|
||||
@ -706,7 +707,7 @@ private showContractPopup(contractId: string) {
|
||||
<p><strong>Parties:</strong> ${contract.parties.join(', ')}</p>
|
||||
<p><strong>Terms:</strong></p>
|
||||
<ul>
|
||||
${contract.terms.map(term => `<li>${term}</li>`).join('')}
|
||||
${contract.terms.map((term) => `<li>${term}</li>`).join('')}
|
||||
</ul>
|
||||
<p><strong>Content:</strong> ${contract.content}</p>
|
||||
</div>
|
||||
@ -728,11 +729,10 @@ private showContractPopup(contractId: string) {
|
||||
|
||||
// Ajouter à l'objet window
|
||||
|
||||
|
||||
// Fonction utilitaire pour cacher tous les contenus
|
||||
private hideAllContent(): void {
|
||||
const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
|
||||
contents.forEach(id => {
|
||||
contents.forEach((id) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.style.display = 'none';
|
||||
@ -742,7 +742,6 @@ private hideAllContent(): void {
|
||||
|
||||
// Fonctions d'affichage des sections
|
||||
private showPairing(): void {
|
||||
|
||||
isAddingRow = false;
|
||||
currentRow = null;
|
||||
|
||||
@ -756,7 +755,6 @@ private showPairing(): void {
|
||||
headerElement.textContent = 'Pairing';
|
||||
}
|
||||
|
||||
|
||||
// Afficher le contenu de pairing
|
||||
const pairingContent = document.getElementById('pairing-content');
|
||||
|
||||
@ -825,18 +823,21 @@ private showWallet(): void {
|
||||
this.updateWalletTableContent(rows);
|
||||
}
|
||||
|
||||
|
||||
private updateWalletTableContent(rows: WalletRow[]): void {
|
||||
const tbody = document.querySelector('#wallet-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td>${row.column2}</td>
|
||||
<td class="device-name" onclick="editDeviceName(this)">${row.column3}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
private showData(): void {
|
||||
@ -885,7 +886,7 @@ private addWalletRow(): void {
|
||||
currentRow = table.insertRow();
|
||||
const placeholders = ['Label', 'Wallet', 'Type'];
|
||||
|
||||
placeholders.forEach(placeholder => {
|
||||
placeholders.forEach((placeholder) => {
|
||||
const cell = currentRow!.insertCell();
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
@ -912,13 +913,13 @@ private confirmWalletRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
const inputs = Array.from(currentRow.getElementsByTagName('input'));
|
||||
const allFieldsFilled = inputs.every(input => input.value.trim() !== '');
|
||||
const allFieldsFilled = inputs.every((input) => input.value.trim() !== '');
|
||||
|
||||
if (allFieldsFilled) {
|
||||
const newRow: WalletRow = {
|
||||
column1: inputs[0].value.trim(),
|
||||
column2: inputs[1].value.trim(),
|
||||
column3: inputs[2].value.trim()
|
||||
column3: inputs[2].value.trim(),
|
||||
};
|
||||
|
||||
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
|
||||
@ -947,15 +948,15 @@ private cancelWalletRow(): void {
|
||||
buttonContainer.innerHTML = `
|
||||
<button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button>
|
||||
`;
|
||||
|
||||
|
||||
}
|
||||
|
||||
private updateDataTableContent(rows: DataRow[]): void {
|
||||
const tbody = document.querySelector('#data-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td>${row.column2}</td>
|
||||
@ -966,7 +967,9 @@ private updateDataTableContent(rows: DataRow[]): void {
|
||||
<a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Fonctions de gestion de l'avatar et de la bannière
|
||||
@ -1183,7 +1186,6 @@ private loadUserInfo(): void {
|
||||
this.loadSavedBanner();
|
||||
}
|
||||
|
||||
|
||||
private updateNavbarName(name: string): void {
|
||||
const nameElement = document.querySelector('.nav-wrapper .user-name');
|
||||
if (nameElement) {
|
||||
@ -1198,15 +1200,13 @@ private loadUserInfo(): void {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
private initializeEventListeners() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.showPairing();
|
||||
});
|
||||
|
||||
const editableFields = document.querySelectorAll<HTMLElement>('.editable');
|
||||
editableFields.forEach(field => {
|
||||
editableFields.forEach((field) => {
|
||||
field.addEventListener('click', () => {
|
||||
if (!field.classList.contains('editing')) {
|
||||
const currentValue = field.textContent || '';
|
||||
@ -1234,7 +1234,6 @@ private loadUserInfo(): void {
|
||||
this.loadSavedBanner();
|
||||
this.loadUserInfo();
|
||||
|
||||
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
const savedBanner = localStorage.getItem('userBanner');
|
||||
const savedName = localStorage.getItem('userName');
|
||||
@ -1261,6 +1260,3 @@ private loadUserInfo(): void {
|
||||
|
||||
customElements.define('account-element', AccountElement);
|
||||
export { AccountElement };
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { ChatElement } from './chat';
|
||||
import chatCss from '../../../public/style/chat.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
import chatCss from '../../../public/style/chat.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
|
||||
class ChatComponent extends HTMLElement {
|
||||
_callback: any
|
||||
_callback: any;
|
||||
chatElement: ChatElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT')
|
||||
console.log('INIT');
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs')
|
||||
console.log('CALLBACKs');
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class ChatComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance()
|
||||
const service = await Services.getInstance();
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -55,5 +55,5 @@ class ChatComponent extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
export { ChatComponent }
|
||||
export { ChatComponent };
|
||||
customElements.define('chat-component', ChatComponent);
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Messagerie</title>
|
||||
<link rel="stylesheet" href="../../public/style/chat.css">
|
||||
<link rel="stylesheet" href="../../public/style/chat.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Main content-->
|
||||
<div class="container">
|
||||
<!-- List of groups -->
|
||||
@ -33,21 +31,18 @@
|
||||
<label for="file-input" class="attachment-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
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>
|
||||
</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>
|
||||
|
||||
|
||||
<button id="send-button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="module" src="./chat.ts?ts"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -9,16 +9,12 @@ declare global {
|
||||
import { groupsMock } from '../../mocks/mock-signature/groupsMock';
|
||||
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
|
||||
import { membersMock } from '../../mocks/mock-signature/membersMocks';
|
||||
import {
|
||||
Message,
|
||||
DocumentSignature,
|
||||
} from '../../models/signature.models';
|
||||
import { Message, DocumentSignature } from '../../models/signature.models';
|
||||
import { messageStore } from '../../utils/messageMock';
|
||||
import { Member } from '../../interface/memberInterface';
|
||||
import { Group } from '../../interface/groupInterface';
|
||||
import { getCorrectDOM } from '../../utils/document.utils';
|
||||
|
||||
|
||||
let currentUser: Member = membersMock[0];
|
||||
|
||||
interface LocalNotification {
|
||||
@ -44,13 +40,12 @@ class ChatElement extends HTMLElement {
|
||||
private notificationBoard = document.getElementById('notification-board');
|
||||
private notificationBell = document.getElementById('notification-bell');
|
||||
private selectedSignatories: DocumentSignature[] = [];
|
||||
private allMembers = membersMock.map(member => ({
|
||||
private allMembers = membersMock.map((member) => ({
|
||||
id: member.id,
|
||||
name: member.name,
|
||||
roleName: 'Default Role'
|
||||
roleName: 'Default Role',
|
||||
}));
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
@ -62,9 +57,7 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
// Initialiser les événements de notification
|
||||
document.addEventListener('click', (event: Event): void => {
|
||||
if (this.notificationBoard && this.notificationBoard.style.display === 'block' &&
|
||||
!this.notificationBoard.contains(event.target as Node) &&
|
||||
this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
|
||||
if (this.notificationBoard && this.notificationBoard.style.display === 'block' && !this.notificationBoard.contains(event.target as Node) && this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
|
||||
this.notificationBoard.style.display = 'none';
|
||||
}
|
||||
});
|
||||
@ -142,14 +135,13 @@ class ChatElement extends HTMLElement {
|
||||
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
|
||||
// Add notification
|
||||
private addNotification(memberId: string, message: Message) {
|
||||
// Creating a new notification
|
||||
const notification = {
|
||||
memberId,
|
||||
text: `New message from Member ${memberId}: ${message.text}`,
|
||||
time: message.time
|
||||
time: message.time,
|
||||
};
|
||||
|
||||
// Added notification to list and interface
|
||||
@ -170,10 +162,10 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
const newMessage: Message = {
|
||||
id: Date.now(),
|
||||
sender: "4NK",
|
||||
sender: '4NK',
|
||||
text: messageText,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'text' as const
|
||||
type: 'text' as const,
|
||||
};
|
||||
// Add and display the message immediately
|
||||
messageStore.addMessage(this.selectedMemberId, newMessage);
|
||||
@ -200,22 +192,21 @@ class ChatElement extends HTMLElement {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
|
||||
// Load the list of members
|
||||
private loadMemberChat(memberId: string | number) {
|
||||
this.selectedMemberId = String(memberId);
|
||||
const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId));
|
||||
const memberMessages = this.messagesMock.find((m) => String(m.memberId) === String(memberId));
|
||||
|
||||
// Find the process and the role of the member
|
||||
let memberInfo = { processName: '', roleName: '', memberName: '' };
|
||||
groupsMock.forEach(process => {
|
||||
process.roles.forEach(role => {
|
||||
const member = role.members.find(m => String(m.id) === String(memberId));
|
||||
groupsMock.forEach((process) => {
|
||||
process.roles.forEach((role) => {
|
||||
const member = role.members.find((m) => String(m.id) === String(memberId));
|
||||
if (member) {
|
||||
memberInfo = {
|
||||
processName: process.name,
|
||||
roleName: role.name,
|
||||
memberName: member.name
|
||||
memberName: member.name,
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -241,7 +232,7 @@ class ChatElement extends HTMLElement {
|
||||
messageContent.classList.add('user');
|
||||
} else {
|
||||
messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
|
||||
if (message.sender === "4NK") {
|
||||
if (message.sender === '4NK') {
|
||||
messageContent.classList.add('user');
|
||||
}
|
||||
}
|
||||
@ -251,11 +242,10 @@ class ChatElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
this.scrollToBottom(messagesContainer);
|
||||
}
|
||||
|
||||
private toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) {
|
||||
private toggleMembers(role: { members: { id: string | number; name: string }[] }, roleElement: HTMLElement) {
|
||||
let memberList = roleElement.querySelector('.member-list');
|
||||
if (memberList) {
|
||||
(memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
@ -265,7 +255,7 @@ class ChatElement extends HTMLElement {
|
||||
memberList = document.createElement('ul');
|
||||
memberList.className = 'member-list';
|
||||
|
||||
role.members.forEach(member => {
|
||||
role.members.forEach((member) => {
|
||||
const memberItem = document.createElement('li');
|
||||
memberItem.textContent = member.name;
|
||||
|
||||
@ -280,7 +270,6 @@ class ChatElement extends HTMLElement {
|
||||
roleElement.appendChild(memberList);
|
||||
}
|
||||
|
||||
|
||||
// Toggle the list of Roles
|
||||
private toggleRoles(group: Group, groupElement: HTMLElement) {
|
||||
console.log('=== toggleRoles START ===');
|
||||
@ -292,7 +281,7 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
if (roleList) {
|
||||
const roleItems = roleList.querySelectorAll('.role-item');
|
||||
roleItems.forEach(roleItem => {
|
||||
roleItems.forEach((roleItem) => {
|
||||
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
|
||||
|
||||
let container = roleItem.querySelector('.role-item-container');
|
||||
@ -325,9 +314,12 @@ class ChatElement extends HTMLElement {
|
||||
folderButton.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
console.log('Clicked role name:', roleName);
|
||||
console.log('Available roles:', group.roles.map(r => r.name));
|
||||
console.log(
|
||||
'Available roles:',
|
||||
group.roles.map((r) => r.name),
|
||||
);
|
||||
|
||||
const role = group.roles.find(r => r.name === roleName);
|
||||
const role = group.roles.find((r) => r.name === roleName);
|
||||
if (role) {
|
||||
console.log('Found role:', role);
|
||||
} else {
|
||||
@ -340,17 +332,15 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
});
|
||||
|
||||
(roleList as HTMLElement).style.display =
|
||||
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
(roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private loadGroupList(): void {
|
||||
const groupList = document.getElementById('group-list');
|
||||
if (!groupList) return;
|
||||
|
||||
groupsMock.forEach(group => {
|
||||
groupsMock.forEach((group) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'group-list-item';
|
||||
|
||||
@ -379,7 +369,7 @@ class ChatElement extends HTMLElement {
|
||||
roleList.style.display = 'none';
|
||||
|
||||
// Add roles for this process
|
||||
group.roles.forEach(role => {
|
||||
group.roles.forEach((role) => {
|
||||
const roleItem = document.createElement('li');
|
||||
roleItem.className = 'role-item';
|
||||
roleItem.textContent = role.name;
|
||||
@ -395,14 +385,15 @@ class ChatElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Function to manage the list of users
|
||||
private toggleUserList() {
|
||||
const userList = getCorrectDOM('userList');
|
||||
if (!userList) return;
|
||||
|
||||
if (!(userList as HTMLElement).classList.contains('show')) {
|
||||
(userList as HTMLElement).innerHTML = membersMock.map(member => `
|
||||
(userList as HTMLElement).innerHTML = membersMock
|
||||
.map(
|
||||
(member) => `
|
||||
<div class="user-list-item" onclick="switchUser('${member.id}')">
|
||||
<span class="user-avatar">${member.avatar}</span>
|
||||
<div>
|
||||
@ -410,13 +401,15 @@ class ChatElement extends HTMLElement {
|
||||
<span class="user-email">${member.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
(userList as HTMLElement).classList.toggle('show');
|
||||
}
|
||||
|
||||
private switchUser(userId: string | number) {
|
||||
const user = membersMock.find(member => member.id === userId);
|
||||
const user = membersMock.find((member) => member.id === userId);
|
||||
if (!user) return;
|
||||
currentUser = user;
|
||||
this.updateCurrentUserDisplay();
|
||||
@ -441,9 +434,9 @@ class ChatElement extends HTMLElement {
|
||||
return {
|
||||
id: Date.now(),
|
||||
sender: senderName,
|
||||
text: "OK...",
|
||||
text: 'OK...',
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'text' as const
|
||||
type: 'text' as const,
|
||||
};
|
||||
}
|
||||
|
||||
@ -459,11 +452,11 @@ class ChatElement extends HTMLElement {
|
||||
if (this.selectedMemberId) {
|
||||
messageStore.addMessage(this.selectedMemberId, {
|
||||
id: Date.now(),
|
||||
sender: "4NK",
|
||||
sender: '4NK',
|
||||
fileName: fileName,
|
||||
fileData: fileData,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'file'
|
||||
type: 'file',
|
||||
});
|
||||
console.log('Message added to store');
|
||||
|
||||
@ -475,8 +468,7 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
|
||||
private initializeEventListeners() {
|
||||
document.addEventListener('DOMContentLoaded', (): void => {
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', (): void => {});
|
||||
|
||||
// Gestionnaire d'événements pour le chat
|
||||
const sendBtn = this.shadowRoot?.querySelector('#send-button');
|
||||
@ -533,4 +525,3 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
customElements.define('chat-element', ChatElement);
|
||||
export { ChatElement };
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import loginHtml from './home.html?raw'
|
||||
import loginScript from './home.ts?raw'
|
||||
import loginCss from '../../4nk.css?raw'
|
||||
import loginHtml from './home.html?raw';
|
||||
import loginScript from './home.ts?raw';
|
||||
import loginCss from '../../4nk.css?raw';
|
||||
import { initHomePage } from './home';
|
||||
|
||||
export class LoginComponent extends HTMLElement {
|
||||
@ -11,7 +11,7 @@ export class LoginComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK LOGIN PAGE')
|
||||
console.log('CALLBACK LOGIN PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
initHomePage();
|
||||
@ -31,7 +31,8 @@ export class LoginComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) this.shadowRoot.innerHTML = `
|
||||
if (this.shadowRoot)
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${loginCss}
|
||||
</style>${loginHtml}
|
||||
|
||||
@ -4,10 +4,10 @@ import { addSubscription } from '../../utils/subscription.utils';
|
||||
import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';
|
||||
import { getCorrectDOM } from '../../utils/html.utils';
|
||||
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
|
||||
export {QrScannerComponent}
|
||||
export { QrScannerComponent };
|
||||
export async function initHomePage(): Promise<void> {
|
||||
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) => {
|
||||
addSubscription(tab, 'click', () => {
|
||||
container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
|
||||
@ -34,17 +34,15 @@ export async function openModal(myAddress: string, receiverAddress: string) {
|
||||
// service.setNotification()
|
||||
|
||||
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;
|
||||
if (scannerImg) scannerImg.style.display = 'none';
|
||||
const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
|
||||
if (scannerQrCode) scannerQrCode.style.display = 'block';
|
||||
const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
|
||||
if (scanButton) scanButton.style.display = 'none';
|
||||
const reader = container?.querySelector('#qr-reader')
|
||||
if(reader) reader.innerHTML = '<qr-scanner></qr-scanner>'
|
||||
const reader = container?.querySelector('#qr-reader');
|
||||
if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
|
||||
}
|
||||
|
||||
(window as any).scanDevice = scanDevice;
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import processHtml from './process-element.html?raw'
|
||||
import processScript from './process-element.ts?raw'
|
||||
import processCss from '../../4nk.css?raw'
|
||||
import processHtml from './process-element.html?raw';
|
||||
import processScript from './process-element.ts?raw';
|
||||
import processCss from '../../4nk.css?raw';
|
||||
import { initProcessElement } from './process-element';
|
||||
|
||||
export class ProcessListComponent extends HTMLElement {
|
||||
@ -14,7 +14,7 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK PROCESS LIST PAGE')
|
||||
console.log('CALLBACK PROCESS LIST PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
initProcessElement(this.id, this.zone);
|
||||
@ -34,7 +34,8 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) this.shadowRoot.innerHTML = `
|
||||
if (this.shadowRoot)
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${processCss}
|
||||
</style>${processHtml}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import processHtml from './process.html?raw'
|
||||
import processScript from './process.ts?raw'
|
||||
import processCss from '../../4nk.css?raw'
|
||||
import processHtml from './process.html?raw';
|
||||
import processScript from './process.ts?raw';
|
||||
import processCss from '../../4nk.css?raw';
|
||||
import { init } from './process';
|
||||
|
||||
export class ProcessListComponent extends HTMLElement {
|
||||
@ -11,7 +11,7 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK PROCESS LIST PAGE')
|
||||
console.log('CALLBACK PROCESS LIST PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
init();
|
||||
@ -31,7 +31,8 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) this.shadowRoot.innerHTML = `
|
||||
if (this.shadowRoot)
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${processCss}
|
||||
</style>${processHtml}
|
||||
|
||||
@ -4,7 +4,7 @@ import { getCorrectDOM } from '~/utils/html.utils';
|
||||
|
||||
// Initialize function, create initial tokens with itens that are already selected by the user
|
||||
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;
|
||||
// Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
|
||||
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 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 inputInderline = container.querySelector('.selected-processes');
|
||||
// Create token wrapper
|
||||
@ -299,7 +299,7 @@ function removeToken(e: Event) {
|
||||
// Remove token attribute
|
||||
(target.parentNode as any)?.remove();
|
||||
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);
|
||||
process?.remove();
|
||||
@ -355,7 +355,7 @@ addSubscription(document, 'click', () => {
|
||||
});
|
||||
|
||||
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) {
|
||||
const cardContent = container.querySelector('.process-card-content');
|
||||
@ -387,7 +387,7 @@ async function showSelectedProcess(elem: MouseEvent) {
|
||||
}
|
||||
|
||||
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 oldSelectedProcess = container.querySelector('.selected-process-zone');
|
||||
oldSelectedProcess?.classList.remove('selected-process-zone');
|
||||
@ -399,7 +399,7 @@ function select(event: Event) {
|
||||
}
|
||||
|
||||
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');
|
||||
console.log('🚀 ~ goToProcessPage ~ event:', target);
|
||||
@ -426,8 +426,8 @@ async function getProcesses(): Promise<any[]> {
|
||||
|
||||
const res = Object.entries(processes).map(([key, value]) => ({
|
||||
key,
|
||||
value
|
||||
}))
|
||||
value,
|
||||
}));
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { SignatureElement } from './signature';
|
||||
import signatureCss from '../../../public/style/signature.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
import signatureCss from '../../../public/style/signature.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
|
||||
class SignatureComponent extends HTMLElement {
|
||||
_callback: any
|
||||
_callback: any;
|
||||
signatureElement: SignatureElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT')
|
||||
console.log('INIT');
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs')
|
||||
console.log('CALLBACKs');
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class SignatureComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance()
|
||||
const service = await Services.getInstance();
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -55,5 +55,5 @@ class SignatureComponent extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
export { SignatureComponent }
|
||||
export { SignatureComponent };
|
||||
customElements.define('signature-component', SignatureComponent);
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Signatures</title>
|
||||
<link rel="stylesheet" href="../../../public/style/signature.css">
|
||||
<link rel="stylesheet" href="../../../public/style/signature.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Main content-->
|
||||
<div class="container">
|
||||
|
||||
<!-- List of groups -->
|
||||
<div class="group-list">
|
||||
<ul id="group-list">
|
||||
</ul>
|
||||
<ul id="group-list"></ul>
|
||||
</div>
|
||||
|
||||
<!-- Chat area -->
|
||||
@ -33,21 +29,18 @@
|
||||
<label for="file-input" class="attachment-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<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" />
|
||||
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>
|
||||
</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>
|
||||
|
||||
|
||||
<button id="send-button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="module" src="./signature.ts?ts"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -20,17 +20,13 @@ declare global {
|
||||
import { groupsMock } from '../../mocks/mock-signature/groupsMock';
|
||||
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
|
||||
import { membersMock } from '../../mocks/mock-signature/membersMocks';
|
||||
import {
|
||||
Message,
|
||||
DocumentSignature,
|
||||
RequestParams} from '../../models/signature.models';
|
||||
import { Message, DocumentSignature, RequestParams } from '../../models/signature.models';
|
||||
import { messageStore } from '../../utils/messageMock';
|
||||
import { showAlert } from '../account/account';
|
||||
import { Member } from '../../interface/memberInterface';
|
||||
import { Group } from '../../interface/groupInterface';
|
||||
import { getCorrectDOM } from '../../utils/document.utils';
|
||||
|
||||
|
||||
let currentUser: Member = membersMock[0];
|
||||
|
||||
interface LocalNotification {
|
||||
@ -39,7 +35,6 @@ interface LocalNotification {
|
||||
time: string;
|
||||
}
|
||||
|
||||
|
||||
class SignatureElement extends HTMLElement {
|
||||
private selectedMemberId: string | null = null;
|
||||
private messagesMock: any[] = [];
|
||||
@ -49,10 +44,10 @@ class SignatureElement extends HTMLElement {
|
||||
private notificationBoard = document.getElementById('notification-board');
|
||||
private notificationBell = document.getElementById('notification-bell');
|
||||
private selectedSignatories: DocumentSignature[] = [];
|
||||
private allMembers = membersMock.map(member => ({
|
||||
private allMembers = membersMock.map((member) => ({
|
||||
id: member.id,
|
||||
name: member.name,
|
||||
roleName: 'Default Role'
|
||||
roleName: 'Default Role',
|
||||
}));
|
||||
|
||||
private signDocument(documentId: number, processId: number, isCommonDocument: boolean = false): void {
|
||||
@ -85,14 +80,10 @@ class SignatureElement extends HTMLElement {
|
||||
throw new Error('Document not found');
|
||||
}
|
||||
|
||||
const canSign = isCommonDocument ?
|
||||
targetDoc.signatures?.some((sig: DocumentSignature) =>
|
||||
sig.member?.name === currentUser?.name && !sig.signed
|
||||
) :
|
||||
this.canUserSignDocument(targetDoc, currentUser?.name, currentUser);
|
||||
const canSign = isCommonDocument ? targetDoc.signatures?.some((sig: DocumentSignature) => sig.member?.name === currentUser?.name && !sig.signed) : this.canUserSignDocument(targetDoc, currentUser?.name, currentUser);
|
||||
|
||||
if (!canSign) {
|
||||
showAlert("You do not have the necessary rights to sign this document.");
|
||||
showAlert('You do not have the necessary rights to sign this document.');
|
||||
return;
|
||||
}
|
||||
|
||||
@ -132,24 +123,30 @@ class SignatureElement extends HTMLElement {
|
||||
<div class="signatures-section">
|
||||
<h4>Signatures status:</h4>
|
||||
<div class="signatures-list">
|
||||
${targetDoc.signatures.map((sig: DocumentSignature) => `
|
||||
${targetDoc.signatures
|
||||
.map(
|
||||
(sig: DocumentSignature) => `
|
||||
<div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
|
||||
<span class="signer-name">${sig.member.name}</span>
|
||||
<span class="signature-status">
|
||||
${sig.signed ?
|
||||
`✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` :
|
||||
'⌛ Pending'}
|
||||
${sig.signed ? `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` : '⌛ Pending'}
|
||||
</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${this.getFileList().length > 0 ? `
|
||||
${
|
||||
this.getFileList().length > 0
|
||||
? `
|
||||
<div class="files-section">
|
||||
<h4>Files attached:</h4>
|
||||
<div class="files-list">
|
||||
${this.getFileList().map(file => `
|
||||
${this.getFileList()
|
||||
.map(
|
||||
(file) => `
|
||||
<div class="file-item">
|
||||
<span class="file-icon"></span>
|
||||
<span class="file-name">${file.name}</span>
|
||||
@ -157,10 +154,14 @@ class SignatureElement extends HTMLElement {
|
||||
<span class="download-icon">⬇</span>
|
||||
</a>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
|
||||
<div class="confirmation-section">
|
||||
<p class="warning-text">By signing this document, you confirm that you have read its contents.</p>
|
||||
@ -211,10 +212,8 @@ class SignatureElement extends HTMLElement {
|
||||
const rect = sliderTrack.getBoundingClientRect();
|
||||
const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
|
||||
|
||||
|
||||
|
||||
// Calculate the position relative to the track
|
||||
let newLeft = x - rect.left - (slider.offsetWidth / 2);
|
||||
let newLeft = x - rect.left - slider.offsetWidth / 2;
|
||||
|
||||
// Limit the movement
|
||||
const maxLeft = sliderTrack.offsetWidth - slider.offsetWidth;
|
||||
@ -239,7 +238,6 @@ class SignatureElement extends HTMLElement {
|
||||
slider.style.left = '0px';
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error displaying modal:', error);
|
||||
showAlert(error instanceof Error ? error.message : 'Error displaying modal');
|
||||
@ -268,9 +266,7 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
// Initialiser les événements de notification
|
||||
document.addEventListener('click', (event: Event): void => {
|
||||
if (this.notificationBoard && this.notificationBoard.style.display === 'block' &&
|
||||
!this.notificationBoard.contains(event.target as Node) &&
|
||||
this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
|
||||
if (this.notificationBoard && this.notificationBoard.style.display === 'block' && !this.notificationBoard.contains(event.target as Node) && this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
|
||||
this.notificationBoard.style.display = 'none';
|
||||
}
|
||||
});
|
||||
@ -309,7 +305,6 @@ class SignatureElement extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private calculateDuration(startDate: string | null | undefined, endDate: string | null | undefined): number {
|
||||
const start = new Date(startDate || '');
|
||||
const end = new Date(endDate || '');
|
||||
@ -331,13 +326,11 @@ class SignatureElement extends HTMLElement {
|
||||
document,
|
||||
role,
|
||||
user,
|
||||
userRoles: user.processRoles
|
||||
userRoles: user.processRoles,
|
||||
});
|
||||
|
||||
// Vérifier si l'utilisateur est dans la liste des signatures
|
||||
const isSignatory = document.signatures?.some((sig: DocumentSignature) =>
|
||||
sig.member && 'id' in sig.member && sig.member.id === user.id && !sig.signed
|
||||
);
|
||||
const isSignatory = document.signatures?.some((sig: DocumentSignature) => sig.member && 'id' in sig.member && sig.member.id === user.id && !sig.signed);
|
||||
|
||||
if (!isSignatory) {
|
||||
console.log('User is not in signatures list or has already signed');
|
||||
@ -400,14 +393,13 @@ class SignatureElement extends HTMLElement {
|
||||
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
|
||||
// Add notification
|
||||
private addNotification(memberId: string, message: Message) {
|
||||
// Creating a new notification
|
||||
const notification = {
|
||||
memberId,
|
||||
text: `New message from Member ${memberId}: ${message.text}`,
|
||||
time: message.time
|
||||
time: message.time,
|
||||
};
|
||||
|
||||
// Added notification to list and interface
|
||||
@ -427,10 +419,10 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
const newMessage: Message = {
|
||||
id: Date.now(),
|
||||
sender: "4NK",
|
||||
sender: '4NK',
|
||||
text: messageText,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'text' as const
|
||||
type: 'text' as const,
|
||||
};
|
||||
// Add and display the message immediately
|
||||
messageStore.addMessage(this.selectedMemberId, newMessage);
|
||||
@ -452,13 +444,12 @@ class SignatureElement extends HTMLElement {
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
|
||||
private showProcessDetails(group: Group, groupId: number) {
|
||||
console.log('Showing details for group:', groupId);
|
||||
|
||||
// Close all existing process views
|
||||
const allDetailsAreas = document.querySelectorAll('.process-details');
|
||||
allDetailsAreas.forEach(area => {
|
||||
allDetailsAreas.forEach((area) => {
|
||||
(area as HTMLElement).style.display = 'none';
|
||||
});
|
||||
|
||||
@ -499,22 +490,27 @@ class SignatureElement extends HTMLElement {
|
||||
<div class="details-section">
|
||||
<h3>Documents Communs</h3>
|
||||
<div class="documents-grid">
|
||||
${displayGroup.commonDocuments.map((document: any) => {
|
||||
${displayGroup.commonDocuments
|
||||
.map((document: any) => {
|
||||
const totalSignatures = document.signatures?.length || 0;
|
||||
const signedCount = document.signatures?.filter((sig: DocumentSignature) => sig.signed).length || 0;
|
||||
const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
|
||||
const isVierge = !document.createdAt || !document.deadline || !document.signatures?.length;
|
||||
const canSign = document.signatures?.some((sig: DocumentSignature) =>
|
||||
sig.member && 'id' in sig.member && sig.member.id === currentUser.id && !sig.signed
|
||||
);
|
||||
const canSign = document.signatures?.some((sig: DocumentSignature) => sig.member && 'id' in sig.member && sig.member.id === currentUser.id && !sig.signed);
|
||||
|
||||
const signButton = !isVierge ? `
|
||||
${totalSignatures > 0 && signedCount < totalSignatures && canSign ? `
|
||||
const signButton = !isVierge
|
||||
? `
|
||||
${
|
||||
totalSignatures > 0 && signedCount < totalSignatures && canSign
|
||||
? `
|
||||
<button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, true)">
|
||||
Sign the document
|
||||
</button>
|
||||
` : ''}
|
||||
` : '';
|
||||
`
|
||||
: ''
|
||||
}
|
||||
`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
|
||||
@ -523,30 +519,35 @@ class SignatureElement extends HTMLElement {
|
||||
<span class="document-visibility">${document.visibility}</span>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
${!isVierge ? `
|
||||
${
|
||||
!isVierge
|
||||
? `
|
||||
<p class="document-date">Created on: ${document.createdAt ? new Date(document.createdAt).toLocaleDateString() : 'N/A'}</p>
|
||||
<p class="document-deadline">Deadline: ${document.deadline ? new Date(document.deadline).toLocaleDateString() : 'N/A'}</p>
|
||||
<p class="document-duration">Duration: ${this.calculateDuration(document.createdAt || '', document.deadline || '')} days</p>
|
||||
<div class="document-signatures">
|
||||
<h5>Signatures:</h5>
|
||||
<div class="signatures-list">
|
||||
${document.signatures?.map((sig: DocumentSignature) => `
|
||||
${document.signatures
|
||||
?.map(
|
||||
(sig: DocumentSignature) => `
|
||||
<div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
|
||||
<span class="signer-name">${sig.member.name}</span>
|
||||
<span class="signature-status">
|
||||
${sig.signed ?
|
||||
`✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` :
|
||||
'⌛ Pending'}
|
||||
${sig.signed ? `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` : '⌛ Pending'}
|
||||
</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: ${percentage}%;"></div>
|
||||
</div>
|
||||
<p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
|
||||
</div>
|
||||
` : `
|
||||
`
|
||||
: `
|
||||
<p>Document vierge - Waiting for creation</p>
|
||||
<button class="new-request-btn" onclick="newRequest({
|
||||
processId: ${displayGroup.id},
|
||||
@ -556,42 +557,46 @@ class SignatureElement extends HTMLElement {
|
||||
documentId: ${document.id},
|
||||
documentName: '${document.name}'
|
||||
})">New request</button>
|
||||
`}
|
||||
`
|
||||
}
|
||||
${signButton}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
})
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-section">
|
||||
<h3>Roles and Documents</h3>
|
||||
${displayGroup.roles.map((role: { name: string; documents?: any[] }) => {
|
||||
${displayGroup.roles
|
||||
.map((role: { name: string; documents?: any[] }) => {
|
||||
// Filter the documents according to the access rights
|
||||
const accessibleDocuments = (role.documents || []).filter(doc =>
|
||||
this.canUserAccessDocument(doc, role.name, currentUser.processRoles?.[0]?.role || '')
|
||||
);
|
||||
const accessibleDocuments = (role.documents || []).filter((doc) => this.canUserAccessDocument(doc, role.name, currentUser.processRoles?.[0]?.role || ''));
|
||||
|
||||
return `
|
||||
<div class="role-section">
|
||||
<h4>${role.name}</h4>
|
||||
<div class="documents-grid">
|
||||
${accessibleDocuments.map(document => {
|
||||
const isVierge = !document.createdAt ||
|
||||
!document.deadline ||
|
||||
document.signatures.length === 0;
|
||||
${accessibleDocuments
|
||||
.map((document) => {
|
||||
const isVierge = !document.createdAt || !document.deadline || document.signatures.length === 0;
|
||||
|
||||
const canSign = this.canUserSignDocument(document, role.name, currentUser);
|
||||
|
||||
const signButton = !isVierge ? `
|
||||
${document.signatures.length > 0 &&
|
||||
document.signatures.filter((sig: DocumentSignature) => sig.signed).length < document.signatures.length &&
|
||||
canSign ? `
|
||||
const signButton = !isVierge
|
||||
? `
|
||||
${
|
||||
document.signatures.length > 0 && document.signatures.filter((sig: DocumentSignature) => sig.signed).length < document.signatures.length && canSign
|
||||
? `
|
||||
<button class="sign-button" onclick="signDocument(${document.id}, ${groupId}, false)">
|
||||
Sign the document
|
||||
</button>
|
||||
` : ''}
|
||||
` : '';
|
||||
`
|
||||
: ''
|
||||
}
|
||||
`
|
||||
: '';
|
||||
|
||||
return `
|
||||
<div class="document-card ${document.visibility} ${isVierge ? 'vierge' : ''}">
|
||||
@ -600,60 +605,79 @@ class SignatureElement extends HTMLElement {
|
||||
<span class="document-visibility">${document.visibility}</span>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
${!isVierge ? `
|
||||
${
|
||||
!isVierge
|
||||
? `
|
||||
<p class="document-date">Created on: ${document.createdAt ? new Date(document.createdAt).toLocaleDateString() : 'N/A'}</p>
|
||||
<p class="document-deadline">Deadline: ${document.deadline ? new Date(document.deadline).toLocaleDateString() : 'N/A'}</p>
|
||||
<p class="document-duration">Duration: ${this.calculateDuration(document.createdAt || '', document.deadline || '')} days</p>
|
||||
` : '<p>Document vierge - En attente de création</p>'}
|
||||
`
|
||||
: '<p>Document vierge - En attente de création</p>'
|
||||
}
|
||||
</div>
|
||||
${!isVierge ? `
|
||||
${
|
||||
!isVierge
|
||||
? `
|
||||
<div class="document-signatures">
|
||||
<h5>Signatures:</h5>
|
||||
<div class="signatures-list">
|
||||
${document.signatures.map((sig: DocumentSignature) => `
|
||||
${document.signatures
|
||||
.map(
|
||||
(sig: DocumentSignature) => `
|
||||
<div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
|
||||
<span class="signer-name">${sig.member.name}</span>
|
||||
<span class="signature-status">
|
||||
${sig.signed ?
|
||||
`✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` :
|
||||
'⌛ En attente'}
|
||||
${sig.signed ? `✓ Signé le ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'date inconnue'}` : '⌛ En attente'}
|
||||
</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: ${document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length * 100}%;"></div>
|
||||
<div class="progress" style="width: ${(document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length) * 100}%;"></div>
|
||||
</div>
|
||||
<p>${document.signatures.filter((sig: DocumentSignature) => sig.signed).length} out of ${document.signatures.length} signed (${(document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length * 100).toFixed(0)}%)</p>
|
||||
<p>${document.signatures.filter((sig: DocumentSignature) => sig.signed).length} out of ${document.signatures.length} signed (${((document.signatures.filter((sig: DocumentSignature) => sig.signed).length / document.signatures.length) * 100).toFixed(0)}%)</p>
|
||||
</div>
|
||||
` : ''}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
${signButton}
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
})
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
})
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="details-section">
|
||||
<h3>Members by Role</h3>
|
||||
<div class="roles-grid">
|
||||
${displayGroup.roles.map((role: { name: string; members: Array<{ id: string | number; name: string }> }) => `
|
||||
${displayGroup.roles
|
||||
.map(
|
||||
(role: { name: string; members: Array<{ id: string | number; name: string }> }) => `
|
||||
<div class="role-block">
|
||||
<h4>${role.name}</h4>
|
||||
<ul class="members-list">
|
||||
${role.members.map(member => `
|
||||
${role.members
|
||||
.map(
|
||||
(member) => `
|
||||
<li onclick="loadMemberChat(${member.id})">${member.name}</li>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</ul>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
const newCloseProcessButton = document.createElement('button');
|
||||
newCloseProcessButton.className = 'close-btn';
|
||||
newCloseProcessButton.textContent = 'x';
|
||||
@ -671,22 +695,21 @@ class SignatureElement extends HTMLElement {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
|
||||
// Load the list of members
|
||||
private loadMemberChat(memberId: string | number) {
|
||||
this.selectedMemberId = String(memberId);
|
||||
const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId));
|
||||
const memberMessages = this.messagesMock.find((m) => String(m.memberId) === String(memberId));
|
||||
|
||||
// Find the process and the role of the member
|
||||
let memberInfo = { processName: '', roleName: '', memberName: '' };
|
||||
groupsMock.forEach(process => {
|
||||
process.roles.forEach(role => {
|
||||
const member = role.members.find(m => String(m.id) === String(memberId));
|
||||
groupsMock.forEach((process) => {
|
||||
process.roles.forEach((role) => {
|
||||
const member = role.members.find((m) => String(m.id) === String(memberId));
|
||||
if (member) {
|
||||
memberInfo = {
|
||||
processName: process.name,
|
||||
roleName: role.name,
|
||||
memberName: member.name
|
||||
memberName: member.name,
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -712,7 +735,7 @@ class SignatureElement extends HTMLElement {
|
||||
messageContent.classList.add('user');
|
||||
} else {
|
||||
messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
|
||||
if (message.sender === "4NK") {
|
||||
if (message.sender === '4NK') {
|
||||
messageContent.classList.add('user');
|
||||
}
|
||||
}
|
||||
@ -722,11 +745,10 @@ class SignatureElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
this.scrollToBottom(messagesContainer);
|
||||
}
|
||||
|
||||
private toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) {
|
||||
private toggleMembers(role: { members: { id: string | number; name: string }[] }, roleElement: HTMLElement) {
|
||||
let memberList = roleElement.querySelector('.member-list');
|
||||
if (memberList) {
|
||||
(memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
@ -736,7 +758,7 @@ class SignatureElement extends HTMLElement {
|
||||
memberList = document.createElement('ul');
|
||||
memberList.className = 'member-list';
|
||||
|
||||
role.members.forEach(member => {
|
||||
role.members.forEach((member) => {
|
||||
const memberItem = document.createElement('li');
|
||||
memberItem.textContent = member.name;
|
||||
|
||||
@ -751,7 +773,6 @@ class SignatureElement extends HTMLElement {
|
||||
roleElement.appendChild(memberList);
|
||||
}
|
||||
|
||||
|
||||
// Toggle the list of Roles
|
||||
private toggleRoles(group: Group, groupElement: HTMLElement) {
|
||||
console.log('=== toggleRoles START ===');
|
||||
@ -763,7 +784,7 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
if (roleList) {
|
||||
const roleItems = roleList.querySelectorAll('.role-item');
|
||||
roleItems.forEach(roleItem => {
|
||||
roleItems.forEach((roleItem) => {
|
||||
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
|
||||
|
||||
let container = roleItem.querySelector('.role-item-container');
|
||||
@ -797,9 +818,12 @@ class SignatureElement extends HTMLElement {
|
||||
folderButton.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
console.log('Clicked role name:', roleName);
|
||||
console.log('Available roles:', group.roles.map(r => r.name));
|
||||
console.log(
|
||||
'Available roles:',
|
||||
group.roles.map((r) => r.name),
|
||||
);
|
||||
|
||||
const role = group.roles.find(r => r.name === roleName);
|
||||
const role = group.roles.find((r) => r.name === roleName);
|
||||
if (role) {
|
||||
console.log('Found role:', role);
|
||||
this.showRoleDocuments(role, group);
|
||||
@ -813,17 +837,15 @@ class SignatureElement extends HTMLElement {
|
||||
}
|
||||
});
|
||||
|
||||
(roleList as HTMLElement).style.display =
|
||||
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
(roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private loadGroupList(): void {
|
||||
const groupList = document.getElementById('group-list');
|
||||
if (!groupList) return;
|
||||
|
||||
groupsMock.forEach(group => {
|
||||
groupsMock.forEach((group) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'group-list-item';
|
||||
|
||||
@ -864,7 +886,7 @@ class SignatureElement extends HTMLElement {
|
||||
roleList.style.display = 'none';
|
||||
|
||||
// Add roles for this process
|
||||
group.roles.forEach(role => {
|
||||
group.roles.forEach((role) => {
|
||||
const roleItem = document.createElement('li');
|
||||
roleItem.className = 'role-item';
|
||||
roleItem.textContent = role.name;
|
||||
@ -880,14 +902,15 @@ class SignatureElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Function to manage the list of users
|
||||
private toggleUserList() {
|
||||
const userList = getCorrectDOM('userList');
|
||||
if (!userList) return;
|
||||
|
||||
if (!(userList as HTMLElement).classList.contains('show')) {
|
||||
(userList as HTMLElement).innerHTML = membersMock.map(member => `
|
||||
(userList as HTMLElement).innerHTML = membersMock
|
||||
.map(
|
||||
(member) => `
|
||||
<div class="user-list-item" onclick="switchUser('${member.id}')">
|
||||
<span class="user-avatar">${member.avatar}</span>
|
||||
<div>
|
||||
@ -895,13 +918,15 @@ class SignatureElement extends HTMLElement {
|
||||
<span class="user-email">${member.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
(userList as HTMLElement).classList.toggle('show');
|
||||
}
|
||||
|
||||
private switchUser(userId: string | number) {
|
||||
const user = membersMock.find(member => member.id === userId);
|
||||
const user = membersMock.find((member) => member.id === userId);
|
||||
if (!user) return;
|
||||
currentUser = user;
|
||||
this.updateCurrentUserDisplay();
|
||||
@ -926,9 +951,9 @@ class SignatureElement extends HTMLElement {
|
||||
return {
|
||||
id: Date.now(),
|
||||
sender: senderName,
|
||||
text: "OK...",
|
||||
text: 'OK...',
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'text' as const
|
||||
type: 'text' as const,
|
||||
};
|
||||
}
|
||||
|
||||
@ -944,11 +969,11 @@ class SignatureElement extends HTMLElement {
|
||||
if (this.selectedMemberId) {
|
||||
messageStore.addMessage(this.selectedMemberId, {
|
||||
id: Date.now(),
|
||||
sender: "4NK",
|
||||
sender: '4NK',
|
||||
fileName: fileName,
|
||||
fileData: fileData,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'file'
|
||||
type: 'file',
|
||||
});
|
||||
console.log('Message added to store');
|
||||
|
||||
@ -973,7 +998,8 @@ class SignatureElement extends HTMLElement {
|
||||
}
|
||||
|
||||
// New function to display the documents of a role
|
||||
private showRoleDocuments(role: {
|
||||
private showRoleDocuments(
|
||||
role: {
|
||||
name: string;
|
||||
documents?: Array<{
|
||||
name: string;
|
||||
@ -987,7 +1013,9 @@ class SignatureElement extends HTMLElement {
|
||||
files?: Array<{ name: string; url: string }>;
|
||||
}>;
|
||||
id?: number;
|
||||
}, group: Group) {
|
||||
},
|
||||
group: Group,
|
||||
) {
|
||||
// Load the data from localStorage
|
||||
const storedGroups = JSON.parse(localStorage.getItem('groups') || '[]');
|
||||
const storedGroup = storedGroups.find((g: Group) => g.id === group.id);
|
||||
@ -999,7 +1027,7 @@ class SignatureElement extends HTMLElement {
|
||||
console.log('Showing documents for role:', displayRole.name, 'in group:', group.name);
|
||||
// Close all existing document views first
|
||||
const allDetailsAreas = document.querySelectorAll('.process-details');
|
||||
allDetailsAreas.forEach(area => {
|
||||
allDetailsAreas.forEach((area) => {
|
||||
area.remove();
|
||||
});
|
||||
|
||||
@ -1014,17 +1042,8 @@ class SignatureElement extends HTMLElement {
|
||||
detailsArea.id = `role-documents-${displayRole.name}`;
|
||||
detailsArea.className = 'process-details';
|
||||
// Filter the accessible documents
|
||||
const accessibleDocuments = (displayRole.documents || []).filter((doc: {
|
||||
name: string;
|
||||
visibility: string;
|
||||
createdAt: string | null | undefined;
|
||||
deadline: string | null | undefined;
|
||||
signatures: DocumentSignature[];
|
||||
id: number;
|
||||
description?: string;
|
||||
status?: string;
|
||||
}) =>
|
||||
this.canUserAccessDocument(doc, displayRole.name, currentUser.processRoles?.[0]?.role || '')
|
||||
const accessibleDocuments = (displayRole.documents || []).filter((doc: { name: string; visibility: string; createdAt: string | null | undefined; deadline: string | null | undefined; signatures: DocumentSignature[]; id: number; description?: string; status?: string }) =>
|
||||
this.canUserAccessDocument(doc, displayRole.name, currentUser.processRoles?.[0]?.role || ''),
|
||||
);
|
||||
|
||||
detailsArea.innerHTML = `
|
||||
@ -1039,22 +1058,12 @@ class SignatureElement extends HTMLElement {
|
||||
<div class="details-section">
|
||||
<h3>Documents</h3>
|
||||
<div class="documents-grid">
|
||||
${accessibleDocuments.map((document: {
|
||||
name: string;
|
||||
visibility: string;
|
||||
createdAt: string | null | undefined;
|
||||
deadline: string | null | undefined;
|
||||
signatures: DocumentSignature[];
|
||||
id: number;
|
||||
description?: string;
|
||||
status?: string;
|
||||
}) => {
|
||||
${accessibleDocuments
|
||||
.map((document: { name: string; visibility: string; createdAt: string | null | undefined; deadline: string | null | undefined; signatures: DocumentSignature[]; id: number; description?: string; status?: string }) => {
|
||||
const totalSignatures = document.signatures.length;
|
||||
const signedCount = document.signatures.filter((sig: DocumentSignature) => sig.signed).length;
|
||||
const percentage = totalSignatures > 0 ? (signedCount / totalSignatures) * 100 : 0;
|
||||
const isVierge = !document.createdAt ||
|
||||
!document.deadline ||
|
||||
document.signatures.length === 0;
|
||||
const isVierge = !document.createdAt || !document.deadline || document.signatures.length === 0;
|
||||
|
||||
const canSign = this.canUserSignDocument(document, role.name, currentUser);
|
||||
|
||||
@ -1065,32 +1074,39 @@ class SignatureElement extends HTMLElement {
|
||||
<span class="document-visibility">${document.visibility}</span>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
${!isVierge ? `
|
||||
${
|
||||
!isVierge
|
||||
? `
|
||||
<p class="document-date">Created on: ${document.createdAt ? new Date(document.createdAt).toLocaleDateString() : 'N/A'}</p>
|
||||
<p class="document-deadline">Deadline: ${document.deadline ? new Date(document.deadline).toLocaleDateString() : 'N/A'}</p>
|
||||
<p class="document-duration">Duration: ${this.calculateDuration(document.createdAt, document.deadline)} days</p>
|
||||
<div class="document-signatures">
|
||||
<h5>Signatures:</h5>
|
||||
<div class="signatures-list">
|
||||
${document.signatures.map((sig: DocumentSignature) => `
|
||||
${document.signatures
|
||||
.map(
|
||||
(sig: DocumentSignature) => `
|
||||
<div class="signature-item ${sig.signed ? 'signed' : 'pending'}">
|
||||
<span class="signer-name">${sig.member.name}</span>
|
||||
<span class="signature-status">
|
||||
${sig.signed ?
|
||||
`✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` :
|
||||
'⌛ Pending'}
|
||||
${sig.signed ? `✓ Signed on ${sig.signedAt ? new Date(sig.signedAt).toLocaleDateString() : 'unknown date'}` : '⌛ Pending'}
|
||||
</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: ${percentage}%;"></div>
|
||||
</div>
|
||||
<p>${signedCount} out of ${totalSignatures} signed (${percentage.toFixed(0)}%)</p>
|
||||
</div>
|
||||
` : `
|
||||
`
|
||||
: `
|
||||
<p>Blank document - Waiting for creation</p>
|
||||
${this.canUserAccessDocument(document, displayRole.name, currentUser.processRoles?.[0]?.role || '') ? `
|
||||
${
|
||||
this.canUserAccessDocument(document, displayRole.name, currentUser.processRoles?.[0]?.role || '')
|
||||
? `
|
||||
<button class="new-request-btn" onclick="newRequest({
|
||||
processId: ${group.id},
|
||||
processName: '${group.name}',
|
||||
@ -1099,12 +1115,16 @@ class SignatureElement extends HTMLElement {
|
||||
documentId: ${document.id},
|
||||
documentName: '${document.name}'
|
||||
})">New request</button>
|
||||
` : ''}
|
||||
`}
|
||||
`
|
||||
: ''
|
||||
}
|
||||
`
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('')}
|
||||
})
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1118,20 +1138,17 @@ class SignatureElement extends HTMLElement {
|
||||
private closeRoleDocuments(roleName: string) {
|
||||
const detailsArea = document.getElementById(`role-documents-${roleName}`);
|
||||
if (detailsArea) {
|
||||
|
||||
detailsArea.remove();
|
||||
}
|
||||
}
|
||||
|
||||
private handleFiles(files: FileList, fileList: HTMLDivElement) {
|
||||
Array.from(files).forEach(file => {
|
||||
Array.from(files).forEach((file) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
const fileContent = e.target?.result;
|
||||
const existingFiles = fileList.querySelectorAll('.file-name');
|
||||
const isDuplicate = Array.from(existingFiles).some(
|
||||
existingFile => existingFile.textContent === file.name
|
||||
);
|
||||
const isDuplicate = Array.from(existingFiles).some((existingFile) => existingFile.textContent === file.name);
|
||||
|
||||
if (!isDuplicate) {
|
||||
const fileItem = document.createElement('div');
|
||||
@ -1170,7 +1187,7 @@ class SignatureElement extends HTMLElement {
|
||||
modal.className = 'modal-overlay';
|
||||
|
||||
// Retrieve the process with a verification
|
||||
const process = groupsMock.find(g => g.id === params.processId);
|
||||
const process = groupsMock.find((g) => g.id === params.processId);
|
||||
if (!process) {
|
||||
console.error('Processus non trouvé:', params.processId);
|
||||
showAlert('Process not found');
|
||||
@ -1182,19 +1199,21 @@ class SignatureElement extends HTMLElement {
|
||||
try {
|
||||
if (params.roleName === 'common') {
|
||||
membersToDisplay = process.roles.reduce((members: any[], role) => {
|
||||
return members.concat(role.members.map(member => ({
|
||||
return members.concat(
|
||||
role.members.map((member) => ({
|
||||
...member,
|
||||
roleName: role.name
|
||||
})));
|
||||
roleName: role.name,
|
||||
})),
|
||||
);
|
||||
}, []);
|
||||
} else {
|
||||
const role = process.roles.find(r => r.name === params.roleName);
|
||||
const role = process.roles.find((r) => r.name === params.roleName);
|
||||
if (!role) {
|
||||
throw new Error(`Role ${params.roleName} not found`);
|
||||
}
|
||||
membersToDisplay = role.members.map(member => ({
|
||||
membersToDisplay = role.members.map((member) => ({
|
||||
...member,
|
||||
roleName: params.roleName
|
||||
roleName: params.roleName,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
@ -1203,8 +1222,6 @@ class SignatureElement extends HTMLElement {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="modal-document">
|
||||
<div class="modal-content-document">
|
||||
@ -1269,12 +1286,16 @@ class SignatureElement extends HTMLElement {
|
||||
<div class="form-group">
|
||||
<label>Required Signatories:</label>
|
||||
<div class="required-signatories">
|
||||
${membersToDisplay.map(member => `
|
||||
${membersToDisplay
|
||||
.map(
|
||||
(member) => `
|
||||
<div class="signatory-item">
|
||||
<span class="member-name">${member.name}</span>
|
||||
<span class="role-info">${member.roleName}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1284,10 +1305,7 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="cancel-btn" onclick="closeModal(this)">Cancel</button>
|
||||
${params.roleName === 'common'
|
||||
? '<button class="confirm-btn" onclick="submitCommonDocument(event)">Request</button>'
|
||||
: '<button class="confirm-btn" onclick="submitNewDocument(event)">Request</button>'
|
||||
}
|
||||
${params.roleName === 'common' ? '<button class="confirm-btn" onclick="submitCommonDocument(event)">Request</button>' : '<button class="confirm-btn" onclick="submitNewDocument(event)">Request</button>'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1349,7 +1367,7 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
// Retrieve the files
|
||||
const fileList = document.getElementById('fileList') as HTMLDivElement;
|
||||
const files = Array.from(fileList?.querySelectorAll('.file-item') || []).map(fileItem => {
|
||||
const files = Array.from(fileList?.querySelectorAll('.file-item') || []).map((fileItem) => {
|
||||
const fileName = fileItem.querySelector('.file-name')?.textContent || '';
|
||||
return {
|
||||
name: fileName,
|
||||
@ -1381,9 +1399,7 @@ class SignatureElement extends HTMLElement {
|
||||
return;
|
||||
}
|
||||
|
||||
const role = group.roles.find((r: any) =>
|
||||
r.documents?.some((d: any) => d.id === documentId)
|
||||
);
|
||||
const role = group.roles.find((r: any) => r.documents?.some((d: any) => d.id === documentId));
|
||||
|
||||
if (!role) {
|
||||
showAlert('Role not found');
|
||||
@ -1398,13 +1414,13 @@ class SignatureElement extends HTMLElement {
|
||||
createdAt: new Date().toISOString(),
|
||||
deadline: deadline,
|
||||
visibility: visibility,
|
||||
status: "pending",
|
||||
status: 'pending',
|
||||
signatures: role.members.map((member: { id: string | number; name: string }) => ({
|
||||
member: member,
|
||||
signed: false,
|
||||
signedAt: null
|
||||
signedAt: null,
|
||||
})),
|
||||
files: files // Ajout des fichiers au document
|
||||
files: files, // Ajout des fichiers au document
|
||||
};
|
||||
|
||||
// Update the document in the role
|
||||
@ -1417,15 +1433,15 @@ class SignatureElement extends HTMLElement {
|
||||
localStorage.setItem('groups', JSON.stringify(groups));
|
||||
|
||||
// Also update groupsMock for consistency
|
||||
const mockGroup = groupsMock.find(g => g.id === processId);
|
||||
const mockGroup = groupsMock.find((g) => g.id === processId);
|
||||
if (mockGroup) {
|
||||
const mockRole = mockGroup?.roles.find(r => r.name === role.name);
|
||||
const mockRole = mockGroup?.roles.find((r) => r.name === role.name);
|
||||
if (mockRole?.documents) {
|
||||
const mockDocIndex = mockRole.documents.findIndex(d => d.id === documentId);
|
||||
const mockDocIndex = mockRole.documents.findIndex((d) => d.id === documentId);
|
||||
if (mockDocIndex !== -1) {
|
||||
mockRole.documents[mockDocIndex] = {
|
||||
...updatedDocument,
|
||||
status: undefined
|
||||
status: undefined,
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -1439,7 +1455,6 @@ class SignatureElement extends HTMLElement {
|
||||
// Reload the documents view with the updated data
|
||||
this.showRoleDocuments(role, group);
|
||||
showAlert('Document updated successfully!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving:', error);
|
||||
showAlert('An error occurred while saving');
|
||||
@ -1482,7 +1497,7 @@ class SignatureElement extends HTMLElement {
|
||||
}, []);
|
||||
|
||||
const fileList = document.getElementById('fileList') as HTMLDivElement;
|
||||
const files = Array.from(fileList?.querySelectorAll('.file-item') || []).map(fileItem => {
|
||||
const files = Array.from(fileList?.querySelectorAll('.file-item') || []).map((fileItem) => {
|
||||
const fileName = fileItem.querySelector('.file-name')?.textContent || '';
|
||||
return {
|
||||
name: fileName,
|
||||
@ -1497,13 +1512,13 @@ class SignatureElement extends HTMLElement {
|
||||
createdAt: new Date().toISOString(),
|
||||
deadline: deadline,
|
||||
visibility: visibility,
|
||||
status: "pending",
|
||||
status: 'pending',
|
||||
signatures: allMembers.map((member: { id: string | number; name: string }) => ({
|
||||
member: member,
|
||||
signed: false,
|
||||
signedAt: null
|
||||
signedAt: null,
|
||||
})),
|
||||
files: files
|
||||
files: files,
|
||||
};
|
||||
|
||||
// Update the common document
|
||||
@ -1520,17 +1535,14 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
this.showProcessDetails(group, group.id);
|
||||
showAlert('Document common updated successfully!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving:', error);
|
||||
showAlert('An error occurred while saving');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private submitRequest() {
|
||||
|
||||
showAlert("Request submitted!");
|
||||
showAlert('Request submitted!');
|
||||
}
|
||||
|
||||
private closeNewRequest() {
|
||||
@ -1547,9 +1559,7 @@ class SignatureElement extends HTMLElement {
|
||||
const visibility = (document.getElementById('visibility') as HTMLSelectElement)?.value || '';
|
||||
const description = (document.getElementById('description') as HTMLTextAreaElement)?.value || '';
|
||||
|
||||
const selectedMembers = Array.from(
|
||||
document.querySelectorAll('input[name="selected-members"]:checked')
|
||||
).map(checkbox => (checkbox as HTMLInputElement).value);
|
||||
const selectedMembers = Array.from(document.querySelectorAll('input[name="selected-members"]:checked')).map((checkbox) => (checkbox as HTMLInputElement).value);
|
||||
|
||||
if (!createdAt || !deadline || selectedMembers.length === 0) {
|
||||
showAlert('Please fill in all required fields and select at least one member.');
|
||||
@ -1562,7 +1572,7 @@ class SignatureElement extends HTMLElement {
|
||||
deadline,
|
||||
visibility,
|
||||
description,
|
||||
selectedMembers
|
||||
selectedMembers,
|
||||
});
|
||||
|
||||
showAlert('Document request submitted successfully!');
|
||||
@ -1600,9 +1610,7 @@ class SignatureElement extends HTMLElement {
|
||||
throw new Error('Document not found');
|
||||
}
|
||||
|
||||
const userSignature = targetDoc.signatures.find((sig: DocumentSignature) =>
|
||||
sig.member.name === currentUser.name
|
||||
);
|
||||
const userSignature = targetDoc.signatures.find((sig: DocumentSignature) => sig.member.name === currentUser.name);
|
||||
|
||||
if (!userSignature) {
|
||||
throw new Error(`The user ${currentUser.name} is not authorized to sign this document. Please log in with an authorized user.`);
|
||||
@ -1628,14 +1636,12 @@ class SignatureElement extends HTMLElement {
|
||||
}
|
||||
|
||||
showAlert('Document signed successfully!');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error signing document:', error);
|
||||
showAlert(error instanceof Error ? error.message : 'Error signing document');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private initializeEventListeners() {
|
||||
document.addEventListener('DOMContentLoaded', (): void => {
|
||||
const newRequestBtn = document.getElementById('newRequestBtn');
|
||||
@ -1647,7 +1653,7 @@ class SignatureElement extends HTMLElement {
|
||||
roleId: 0,
|
||||
roleName: '',
|
||||
documentId: 0,
|
||||
documentName: ''
|
||||
documentName: '',
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -1708,4 +1714,3 @@ class SignatureElement extends HTMLElement {
|
||||
|
||||
customElements.define('signature-element', SignatureElement);
|
||||
export { SignatureElement };
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ export let currentRoute = '';
|
||||
|
||||
export async function navigate(path: string) {
|
||||
cleanSubscriptions();
|
||||
cleanPage()
|
||||
cleanPage();
|
||||
path = path.replace(/^\//, '');
|
||||
if (path.includes('/')) {
|
||||
const parsedPath = path.split('/')[0];
|
||||
@ -42,13 +42,12 @@ async function handleLocation(path: string) {
|
||||
|
||||
const content = document.getElementById('containerId');
|
||||
if (content) {
|
||||
|
||||
if (path === 'home') {
|
||||
const login = LoginComponent
|
||||
const login = LoginComponent;
|
||||
const container = document.querySelector('#containerId');
|
||||
const accountComponent = document.createElement('login-4nk-component');
|
||||
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;')
|
||||
if(container) container.appendChild(accountComponent)
|
||||
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;');
|
||||
if (container) container.appendChild(accountComponent);
|
||||
} else if (path !== 'process') {
|
||||
const html = await fetch(routeHtml).then((data) => data.text());
|
||||
content.innerHTML = html;
|
||||
@ -70,8 +69,8 @@ async function handleLocation(path: string) {
|
||||
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)
|
||||
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
|
||||
if (container2) container2.appendChild(accountComponent);
|
||||
break;
|
||||
|
||||
case 'process-element':
|
||||
@ -157,7 +156,7 @@ export async function init(): Promise<void> {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
// check if we have a shared secret with that address
|
||||
await prepareAndSendPairingTx(pairingAddress)
|
||||
await prepareAndSendPairingTx(pairingAddress);
|
||||
} catch (e) {
|
||||
console.error('Failed to pair:', e);
|
||||
}
|
||||
@ -174,7 +173,7 @@ export async function init(): Promise<void> {
|
||||
|
||||
async function cleanPage() {
|
||||
const container = document.querySelector('#containerId');
|
||||
if(container) container.innerHTML = ''
|
||||
if (container) container.innerHTML = '';
|
||||
}
|
||||
|
||||
async function injectHeader() {
|
||||
|
||||
@ -1,20 +1,8 @@
|
||||
const addResourcesToCache = async (resources) => {
|
||||
const cache = await caches.open("v1");
|
||||
const cache = await caches.open('v1');
|
||||
await cache.addAll(resources);
|
||||
};
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
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",
|
||||
]),
|
||||
);
|
||||
self.addEventListener('install', (event) => {
|
||||
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']));
|
||||
});
|
||||
@ -14,16 +14,16 @@ self.addEventListener('message', async (event) => {
|
||||
const itemsWithFlag = await getAllItemsWithFlag();
|
||||
|
||||
// Process items with the specific flag
|
||||
itemsWithFlag?.forEach(item => {
|
||||
itemsWithFlag?.forEach((item) => {
|
||||
console.log(item); // Do something with each flagged item
|
||||
});
|
||||
|
||||
event.ports[0].postMessage({
|
||||
type: "NOTIFICATIONS",
|
||||
data: itemsWithFlag
|
||||
type: 'NOTIFICATIONS',
|
||||
data: itemsWithFlag,
|
||||
});
|
||||
}
|
||||
fetchNotifications()
|
||||
};
|
||||
fetchNotifications();
|
||||
setInterval(fetchNotifications, 2 * 60 * 1000);
|
||||
}
|
||||
|
||||
@ -100,13 +100,13 @@ async function getAllItemsWithFlag() {
|
||||
const request = store.getAll();
|
||||
request.onsuccess = (event) => {
|
||||
const allItems = event.target.result;
|
||||
const itemsWithFlag = allItems.filter(item => !item.need_validation);
|
||||
const itemsWithFlag = allItems.filter((item) => item.need_validation);
|
||||
|
||||
const processMap = {};
|
||||
|
||||
for (const diff of itemsWithFlag) {
|
||||
const currentProcess = allProcesses.find(item => {
|
||||
return item.states.some(state => state.merkle_root === diff.new_state_merkle_root);
|
||||
const currentProcess = allProcesses.find((item) => {
|
||||
return item.states.some((state) => state.merkle_root === diff.new_state_merkle_root);
|
||||
});
|
||||
|
||||
if (currentProcess) {
|
||||
@ -116,18 +116,25 @@ async function getAllItemsWithFlag() {
|
||||
processMap[processKey] = {
|
||||
process: currentProcess.states,
|
||||
processId: currentProcess.key,
|
||||
diffs: []
|
||||
diffs: [],
|
||||
};
|
||||
}
|
||||
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 {
|
||||
process: entry.process,
|
||||
processId: entry.processId,
|
||||
diffs: entry.diffs
|
||||
diffs: diffs,
|
||||
};
|
||||
});
|
||||
|
||||
@ -139,4 +146,3 @@ async function getAllItemsWithFlag() {
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Services from "./service";
|
||||
import Services from './service';
|
||||
|
||||
class Database {
|
||||
private static instance: Database;
|
||||
@ -32,8 +32,8 @@ class Database {
|
||||
AnkDiff: {
|
||||
name: 'diffs',
|
||||
options: { key: 'new_state_merkle_root' },
|
||||
indices: []
|
||||
}
|
||||
indices: [],
|
||||
},
|
||||
};
|
||||
|
||||
// Private constructor to prevent direct instantiation from outside
|
||||
@ -144,11 +144,11 @@ class Database {
|
||||
}
|
||||
|
||||
private handleAddObjectResponse = async (event: MessageEvent) => {
|
||||
const data = event.data
|
||||
const data = event.data;
|
||||
console.log('Received response from service worker (ADD_OBJECT):', data);
|
||||
if (data.type === 'NOTIFICATIONS') {
|
||||
const service = await Services.getInstance()
|
||||
service.setNotifications(data.data)
|
||||
const service = await Services.getInstance();
|
||||
service.setNotifications(data.data);
|
||||
}
|
||||
};
|
||||
|
||||
@ -201,7 +201,7 @@ class Database {
|
||||
getRequest.onsuccess = () => resolve(getRequest.result);
|
||||
getRequest.onerror = () => reject(getRequest.error);
|
||||
});
|
||||
return result
|
||||
return result;
|
||||
}
|
||||
|
||||
public async dumpStore(storeName: string): Promise<Record<string, any>> {
|
||||
@ -227,9 +227,8 @@ class Database {
|
||||
// Combine keys and values into an object
|
||||
const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
|
||||
return result;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching data from IndexedDB:", error);
|
||||
console.error('Error fetching data from IndexedDB:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
|
||||
import Services from './service';
|
||||
import { navigate } from '../router';
|
||||
import { init, navigate } from '../router';
|
||||
import { addressToEmoji } from '../utils/sp-address.utils';
|
||||
import { RoleDefinition } from 'pkg/sdk_client';
|
||||
import { initValidationModal } from '~/components/validation-modal/validation-modal';
|
||||
import { interpolate } from '~/utils/html.utils';
|
||||
|
||||
export default class ModalService {
|
||||
private static instance: ModalService;
|
||||
@ -56,28 +58,30 @@ export default class ModalService {
|
||||
const container = document.querySelector('#containerId');
|
||||
if (container) {
|
||||
let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
|
||||
html = interpolate(html, {processId: processDiff.processId})
|
||||
container.innerHTML += html;
|
||||
|
||||
// Dynamically load the header JS
|
||||
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.type = 'module';
|
||||
document.head.appendChild(script);
|
||||
const css = document.createElement('style');
|
||||
css.id = 'validation-modal-css'
|
||||
css.id = 'validation-modal-css';
|
||||
css.innerText = validationModalStyle;
|
||||
document.head.appendChild(css);
|
||||
initValidationModal(processDiff)
|
||||
}
|
||||
}
|
||||
|
||||
async closeValidationModal() {
|
||||
const script = document.querySelector('#validation-modal-script')
|
||||
const css = document.querySelector('#validation-modal-css')
|
||||
const component = document.querySelector('#validation-modal')
|
||||
script?.remove()
|
||||
css?.remove()
|
||||
component?.remove()
|
||||
const script = document.querySelector('#validation-modal-script');
|
||||
const css = document.querySelector('#validation-modal-css');
|
||||
const component = document.querySelector('#validation-modal');
|
||||
script?.remove();
|
||||
css?.remove();
|
||||
component?.remove();
|
||||
}
|
||||
|
||||
// this is kind of too specific for pairing though
|
||||
@ -88,7 +92,7 @@ export default class ModalService {
|
||||
const owner = roleDefinition['owner'];
|
||||
members = owner.members;
|
||||
} else {
|
||||
throw new Error('No \"owner\" role');
|
||||
throw new Error('No "owner" role');
|
||||
}
|
||||
|
||||
// pairing specifics
|
||||
@ -145,7 +149,7 @@ export default class ModalService {
|
||||
const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment);
|
||||
await service.handleApiReturn(createPrdUpdateReturn);
|
||||
} catch (e) {
|
||||
throw e
|
||||
throw e;
|
||||
}
|
||||
} else {
|
||||
throw new Error('No currentPcdCommitment');
|
||||
@ -156,7 +160,7 @@ export default class ModalService {
|
||||
const approveChangeReturn = service.approveChange(this.currentPcdCommitment!);
|
||||
await service.handleApiReturn(approveChangeReturn);
|
||||
} catch (e) {
|
||||
throw e
|
||||
throw e;
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
@ -11,6 +11,8 @@ import { storeData, retrieveData } from './storage.service';
|
||||
export const U32_MAX = 4294967295;
|
||||
|
||||
const storageUrl = `http://localhost:8080`;
|
||||
const RELAY_ADDRESS = 'sprt1qqdg4x69xdyhxpz4weuel0985qyswa0x9ycl4q6xc0fngf78jtj27gqj5vff4fvlt3fydx4g7vv0mh7vqv8jncgusp6n2zv860nufdzkyy59pqrdr';
|
||||
const wsurl = `https://demo.4nkweb.com/ws/`;
|
||||
|
||||
export default class Services {
|
||||
private static initializing: Promise<Services> | null = null;
|
||||
@ -95,7 +97,7 @@ export default class Services {
|
||||
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> => {
|
||||
let attempts = 3;
|
||||
@ -186,7 +188,7 @@ export default class Services {
|
||||
try {
|
||||
return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot);
|
||||
} catch (e) {
|
||||
throw e
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
@ -344,7 +346,7 @@ export default class Services {
|
||||
try {
|
||||
await this.openConfirmationModal();
|
||||
} 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}`);
|
||||
}
|
||||
}
|
||||
|
||||
@ -479,7 +481,7 @@ export default class Services {
|
||||
key: commitedIn,
|
||||
});
|
||||
} 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
|
||||
@ -510,7 +512,7 @@ export default class Services {
|
||||
});
|
||||
}
|
||||
} 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) {
|
||||
throw e;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public async restoreSecrets() {
|
||||
@ -549,14 +550,13 @@ export default class Services {
|
||||
const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets');
|
||||
const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets');
|
||||
const secretsStore = {
|
||||
'shared_secrets': sharedSecrets,
|
||||
'unconfirmed_secrets': Object.values(unconfirmedSecrets),
|
||||
shared_secrets: sharedSecrets,
|
||||
unconfirmed_secrets: Object.values(unconfirmedSecrets),
|
||||
};
|
||||
this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore));
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getNotifications(): any[] | null {
|
||||
@ -583,11 +583,11 @@ export default class Services {
|
||||
// path: '/notif3',
|
||||
// },
|
||||
// ];
|
||||
return this.notifications
|
||||
return this.notifications;
|
||||
}
|
||||
|
||||
setNotifications(notifications: any[]) {
|
||||
this.notifications = notifications
|
||||
this.notifications = notifications;
|
||||
}
|
||||
|
||||
async importJSON(content: any): Promise<void> {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export function getCorrectDOM(componentTag: string): Node {
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node
|
||||
return dom
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
|
||||
return dom;
|
||||
}
|
||||
@ -3,6 +3,6 @@ export function interpolate(template: string, data: { [key: string]: string }) {
|
||||
}
|
||||
|
||||
export function getCorrectDOM(componentTag: string): Node {
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node
|
||||
return dom
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
|
||||
return dom;
|
||||
}
|
||||
@ -37,13 +37,13 @@ class MessageStore {
|
||||
}
|
||||
|
||||
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) {
|
||||
memberMessages.messages.push(message);
|
||||
} else {
|
||||
this.messages.push({
|
||||
memberId: String(memberId),
|
||||
messages: [message]
|
||||
messages: [message],
|
||||
});
|
||||
}
|
||||
this.saveToLocalStorage();
|
||||
|
||||
@ -100,7 +100,7 @@ export async function displayEmojis(text: string) {
|
||||
|
||||
// Verify Other address
|
||||
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 emojiDisplay = container.querySelector('#emoji-display-2');
|
||||
const okButton = container.querySelector('#okButton') as HTMLButtonElement;
|
||||
@ -148,7 +148,7 @@ export function initAddressInput() {
|
||||
}
|
||||
|
||||
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;
|
||||
try {
|
||||
// Connect to target, if necessary
|
||||
@ -184,7 +184,7 @@ export async function prepareAndSendPairingTx(secondDeviceAddress: string) {
|
||||
|
||||
export async function generateQRCode(spAddress: string) {
|
||||
try {
|
||||
const container = getCorrectDOM('login-4nk-component') as HTMLElement
|
||||
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
|
||||
const currentUrl = 'https://' + window.location.host;
|
||||
const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress);
|
||||
const qrCode = container?.querySelector('.qr-code img');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user