link diffs from db to notification to modal

src/components/header/header.ts

@@ -1,3 +1,4 @@
+import ModalService from '~/services/modal.service';
 import { INotification } from '../../models/notification.model';
 import { currentRoute, navigate } from '../../router';
 import Services from '../../services/service';
@@ -81,12 +82,17 @@ async function setNotification(notifications: any[]): Promise<void> {
     for (const notif of notifications) {
       const notifElement = document.createElement('div');
       notifElement.className = 'notification-element';
-      notifElement.setAttribute('notif-id', notif.states[0]?.commited_in.toString());
+      notifElement.setAttribute('notif-id', notif.processId);
       notifElement.innerHTML = `
-          <div>${notif.states[0]?.commited_in}</div>
+          <div>Validation required : </div>
+          <div style="text-overflow: ellipsis; content-visibility: auto;">${notif.processId}</div>
           `;
       // this.addSubscription(notifElement, 'click', 'goToProcessPage')
       notificationBoard.appendChild(notifElement);
+      notifElement.addEventListener('click', async () => {
+        const modalService = await ModalService.getInstance()
+        modalService.injectValidationModal(notif)
+      })
     }
   } else {
     noNotifications.style.display = 'block';

src/components/validation-modal/validation-modal.html

@@ -1,7 +1,4 @@
 
-    <style>
-        
-    </style>
 <div id="validation-modal" class="validation-modal">
     <div class="modal-content">
         <div class="modal-title">Validate</div>

src/components/validation-modal/validation-modal.ts

@@ -1,3 +1,5 @@
+import ModalService from "~/services/modal.service";
+
 document.querySelectorAll('.expansion-panel-header').forEach(header => {
   header.addEventListener('click', function(event) {
     const target = event.target as HTMLElement
@@ -6,8 +8,10 @@ document.querySelectorAll('.expansion-panel-header').forEach(header => {
   });
 });
 
-function validate() {
+async function validate() {
   console.log('==> VALIDATE')
+  const modalservice = await ModalService.getInstance()
+  modalservice.closeValidationModal()
 }
 
-window.validate = validate
+(window as any).validate = validate

src/service-workers/database.worker.js

@@ -67,18 +67,76 @@ async function openDatabase() {
 
 async function getAllItemsWithFlag() {
   const db = await openDatabase();
-  const tx = db.transaction('processes', 'readonly');
-  const store = tx.objectStore('processes');
+  
+  // Function to get all processes because it is asynchronous
+  const getAllProcesses = () => {
+    return new Promise((resolve, reject) => {
+      const tx = db.transaction('processes', 'readonly');
+      const store = tx.objectStore('processes');
+      const request = store.openCursor();
+      const processes = [];
+      
+      request.onsuccess = (event) => {
+        const cursor = event.target.result;
+        if (cursor) {
+          processes.push({ key: cursor.key, ...cursor.value });
+          cursor.continue();
+        } else {
+          resolve(processes);
+        }
+      };
+      
+      request.onerror = (event) => {
+        reject(event.target.error);
+      };
+    });
+  };
+  
+  const allProcesses = await getAllProcesses();
+  const tx = db.transaction('diffs', 'readonly');
+  const store = tx.objectStore('diffs');
+
   return new Promise((resolve, reject) => {
     const request = store.getAll();
     request.onsuccess = (event) => {
-        const allItems = event.target.result;
-        const itemsWithFlag = allItems.filter(item => item);
-        resolve(itemsWithFlag);
+      const allItems = event.target.result;
+      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);
+        });
+
+        if (currentProcess) {
+          const processKey = currentProcess.merkle_root;
+
+          if (!processMap[processKey]) {
+            processMap[processKey] = {
+              process: currentProcess.states,
+              processId: currentProcess.key,
+              diffs: []
+            };
+          }
+          processMap[processKey].diffs.push(diff);
+        }
+      }
+
+      const results = Object.values(processMap).map(entry => {
+        return {
+          process: entry.process,
+          processId: entry.processId,
+          diffs: entry.diffs
+        };
+      });
+
+      resolve(results);
     };
+
     request.onerror = (event) => {
-        reject(event.target.error);
+      reject(event.target.error);
     };
-});
+  });
 }
 

src/services/modal.service.ts

@@ -52,7 +52,7 @@ export default class ModalService {
     }
   }
   
-  async injectValidationModal() {
+  async injectValidationModal(processDiff: any) {
     const container = document.querySelector('#containerId');
     if (container) {
       let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
@@ -60,15 +60,26 @@ export default class ModalService {
 
       // Dynamically load the header JS
       const script = document.createElement('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.innerText = validationModalStyle;
       document.head.appendChild(css);
     }
   }
 
+  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()
+  }
+
   // this is kind of too specific for pairing though
   public async openPairingConfirmationModal(roleDefinition: Record<string, RoleDefinition>, commitmentTx: string, merkleRoot: string) {
     // pairing specifics

src/services/service.ts

@@ -3,7 +3,7 @@ import { INotification } from '~/models/notification.model';
 import { IProcess } from '~/models/process.model';
 // import Database from './database';
 import { initWebsocket, sendMessage } from '../websockets';
-import { ApiReturn, Member, PcdUpdates, Process, RoleDefinition } from '../../pkg/sdk_client';
+import { ApiReturn, Member, Process, RoleDefinition, UserDiff } from '../../pkg/sdk_client';
 import ModalService from './modal.service';
 import Database from './database.service';
 
@@ -15,7 +15,7 @@ export default class Services {
   private static initializing: Promise<Services> | null = null;
   private static instance: Services;
   private currentProcess: string | null = null;
-  private pendingUpdates: PcdUpdates | null = null;
+  private pendingUpdates: any | null = null;
   private currentUpdateMerkleRoot: string | null = null; 
   private localAddress: string | null = null;
   private pairedAddresses: string[] = [];
@@ -147,6 +147,7 @@ export default class Services {
               min_sig_member: 1.0,
             },
           ],
+          storages: []
         },
       },
       session_privkey: newKey['private_key'],
@@ -263,7 +264,7 @@ export default class Services {
 
   public getUpdateProposals(commitmentOutpoint: string) {
     try {
-      const proposals: PcdUpdates = this.sdkClient.get_update_proposals(commitmentOutpoint);
+      const proposals: any = this.sdkClient.get_update_proposals(commitmentOutpoint);
       if (proposals.decrypted_pcds && proposals.decrypted_pcds.length != 0) {
         this.currentProcess = commitmentOutpoint;
         this.pendingUpdates = proposals;
@@ -316,11 +317,12 @@ export default class Services {
         // Save process to storage
         try {
           await this.saveProcess(updatedProcess.commitment_tx, updatedProcess.current_process);
+          await this.saveDiffs(updatedProcess.new_diffs);
         } catch (e) {
           throw e;
         }
 
-        if (updatedProcess.new_state) {
+        if ((updatedProcess as any).new_state) {
           this.currentProcess = updatedProcess.commitment_tx;
 
           this.getUpdateProposals(this.currentProcess!);
@@ -492,6 +494,20 @@ export default class Services {
       throw new Error(`Failed to save process: ${e}`)
     }
   }
+  public async saveDiffs(diffs: UserDiff[]) {
+    const db = await Database.getInstance();
+    try {
+      for(const diff of diffs) {
+        await db.addObject({
+          storeName: 'diffs',
+          object: diff,
+          key: diff.value_commitment,
+        });
+      }
+    } catch (e) {
+      throw new Error(`Failed to save process: ${e}`)
+    }
+  }
 
   public async getProcess(commitedIn: string): Promise<Process> {
     const db = await Database.getInstance();