FEAT #12091 TIME 0:50 close notifications when click on button

src/frontend/app/notification.service.html

@@ -2,10 +2,13 @@
     <div class="notif-container-icon">
         <i class="fa fa-{{data.icon}} fa-2x"></i>
     </div>
+    <button mat-icon-button class="notif-container-close" (click)="dismiss()">
+        <mat-icon class="fa fa-times fa-lg" aria-hidden="true"></mat-icon>
+    </button>
     <div class="notif-container-content">
         <div class="notif-container-content-msg">
             <div [innerHTML]="data.url"></div>
             <div [innerHTML]="data.message"></div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file

src/frontend/app/notification.service.scss

@@ -22,6 +22,12 @@
             flex-direction: column;
         }
     }
+
+    &-close {
+        position: absolute;
+        top: 5px;
+        right: 5px;
+    }
 }
 
 ::ng-deep.mat-snack-bar-container.error-snackbar  {
@@ -34,4 +40,4 @@
     color: $primary;
     background: white;
     border: solid 1px $primary;
-}
+}
\ No newline at end of file

src/frontend/app/notification.service.ts

@@ -10,6 +10,10 @@ import { LANG } from './translate.component';
 })
 export class CustomSnackbarComponent {
     constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
+
+    dismiss() {
+        this.data.close();
+    }
 }
 
 @Injectable()
@@ -20,21 +24,21 @@ export class NotificationService {
     }
     success(message: string) {
         const duration = this.getMessageDuration(message, 2000);
-        this.snackBar.openFromComponent(CustomSnackbarComponent, {
+        const snackBar = this.snackBar.openFromComponent(CustomSnackbarComponent, {
             duration: duration,
             panelClass: 'success-snackbar',
             verticalPosition : 'top',
-            data: { message: message, icon: 'info-circle' }
+            data: { message: message, icon: 'info-circle', close: () => {snackBar.dismiss()} }
         });
     }
 
     error(message: string, url: string = null) {
         const duration = this.getMessageDuration(message, 4000);
-        this.snackBar.openFromComponent(CustomSnackbarComponent, {
+        const snackBar = this.snackBar.openFromComponent(CustomSnackbarComponent, {
             duration: duration,
             panelClass: 'error-snackbar',
             verticalPosition : 'top',
-            data: { url: url, message: message, icon: 'exclamation-triangle' }
+            data: { url: url, message: message, icon: 'exclamation-triangle', close: () => {snackBar.dismiss()} }
         });
     }