Bug on notification click fixed

src/app/home/home.page.ts

@@ -182,7 +182,7 @@ export class HomePage implements OnInit {
           if(message.actionName){
             this.notificatinsRoutes(data);
           } else {
-            this.toastService.successMessage(message.alert);
+            this.toastService.notificationMessage(message.alert,this.notificatinsRoutes, data);
           }
 
         }
@@ -194,7 +194,7 @@ export class HomePage implements OnInit {
 
   }
 
-  notificatinsRoutes(data) {
+  notificatinsRoutes = (data) => {
     if (data.Service === "agenda") {
       //this.router.navigate(['/home/', service, IdObject, 'home']);
       //this.router.navigate(['/home/agenda', data.IdObject, 'agenda']);
@@ -212,7 +212,7 @@ export class HomePage implements OnInit {
       this.zone.run(() => this.viewPublications(data.IdObject));
     }
     else if (data.Service === "accoes" && data.Object === "publicacao") {
-      this.viewPublicationDetail(data.IdObject)
+      this.zone.run(() => this.viewPublicationDetail(data.FolderId,data.IdObject));
     }
   }
 
@@ -234,20 +234,8 @@ export class HomePage implements OnInit {
     this.router.navigate(['/home/gabinete-digital/expediente',serialNumber,'gabinete-digital']);
   }
 
-  async viewPublicationDetail(publicationId: string) {
-    const modal = await this.modalController.create({
-      component: PublicationDetailPage,
-      componentProps: {
-        publicationId: publicationId,
-        folderId: this.folderId,
-      },
-      cssClass: 'publication-detail modal modal-desktop',
-      //backdropDismiss: false
-    });
-    await modal.present();
-    modal.onDidDismiss().then(() => {
-
-    });
+  async viewPublicationDetail(FolderId: string, publicationId: string ) {
+    this.router.navigate(['/home/publications/view-publications', FolderId, publicationId]);
   }
 
 

src/app/services/toast.service.ts

@@ -86,4 +86,41 @@ export class ToastService {
 
   }
 
+  
+  async notificationMessage(message?: any, callback?: any,data?: any) {
+    
+    let notification = document.createElement('div')
+    notification.className = 'notificationPush'
+    notification.innerHTML = `
+
+    <div class="main-content width-100 pa-20">
+      <p class="message d-flex align-left">
+        <p class="text">{{ message }}</p>
+      </p>
+      
+    </div>
+    `
+
+    let funcx  = ()=>{
+      callback(data);
+      document.body.removeEventListener('click', funcx);
+      notification.remove();
+    }
+
+    document.body.append(notification)
+    document.body.addEventListener('click', funcx);
+
+    notification.querySelector('.text').innerHTML =  message || 'Processo efetuado'
+    setTimeout(()=>{
+
+      notification.style.top = "-100%"
+
+      setTimeout(()=>{
+        notification.remove()
+      },1000)
+
+    },6000)
+    
+  }
+
 }

src/global.scss

@@ -851,12 +851,56 @@ background: rgb(92, 92, 92);
     }
 }
 
+.notificationPush{
+    position: absolute;
+    top: 23px;
+    right: 0px;
+    height: 87px;
+    max-width: 400px;
+    border-radius: 9px;
+    -webkit-border-radius: 9px;
+    -moz-border-radius: 9px;
+    -ms-border-radius: 9px;
+    -o-border-radius: 9px;
+    background-color: white;
+    text-align: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    background-image: url("/assets/background/background-circle-negative.svg");
+    background-size: 686px 674px;
+    background-position: center;
+    background-position-y: 0px;
+    background-repeat: no-repeat;
+    min-width: 340px;
+    box-shadow: 0px 2px 10px #0000003d;
+    display: flex;
+    align-items: center;
+    animation-name: notification-top;
+    animation-duration: 1s;
+    animation-timing-function: ease-in;
+    transition: 1s;
+
+    .main-content {
+        display: flex;
+        align-items: center;
+    }
+    .message {
+        font-size: 12pt;
+    }
+}
+
 
 @keyframes example {
     from {right: -100%;}
     to {right:  0px;}
 }
 
+@keyframes notification-top {
+    from {top: -100%;}
+    to {top:  23px;}
+}
+
 
 .calendar-component .monthview-container table.table tbody {
     tr:nth-child(n+6) {