tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/layout/header/navbar/navbar.component.ts

@@ -0,0 +1,255 @@
+import { ChangeDetectorRef, Component, HostListener, Input, OnDestroy, OnInit } from '@angular/core';
+import { NotificationService } from '../../../../services/notification.service';
+import { Subscription,filter } from 'rxjs';
+import { Router,ActivatedRoute,NavigationEnd } from '@angular/router';
+import { Subject, takeUntil } from "rxjs";
+import { ToastService } from '../../../../services/toast.service';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+const enterTransition = transition(':enter', [
+  style({
+    opacity: 0,
+    // transform: 'translateX(50px)'
+  }),
+  animate('1s ease-in', style({
+    opacity: 1
+  }))
+]);
+ 
+const leaveTrans = transition(':leave', [
+  style({
+    opacity: 1,
+    // transform: 'translateX(-50px)'
+  }),
+  animate('1s ease-out', style({
+    opacity: 0,
+  }))
+])
+ 
+const fadeIn = trigger('fadeIn', [
+  enterTransition
+]);
+ 
+const fadeOut = trigger('fadeOut', [
+  leaveTrans
+])
+@Component({
+  selector: 'lib-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  animations: [
+    fadeIn,
+    fadeOut
+
+  ]
+})
+export class NavbarComponent implements OnInit,OnDestroy {
+  @Input() appHeaderDefaulMenuDisplay: boolean;
+  @Input() isRtl: boolean;
+  private readonly destroy$ = new Subject();
+
+  itemClass: string = 'ms-1 ms-lg-3';
+  btnClass: string = 'btn btn-icon btn-custom btn-icon-muted btn-active-light btn-active-color-primary w-35px h-35px w-md-40px h-md-40px';
+  btnClass1: string;
+  userAvatarClass: string = 'symbol-35px symbol-md-40px';
+  btnIconClass: string = 'fs-2 fs-md-1';
+  notificationReceived: boolean = false;
+  notification:any = [];
+  pushNotificationList:any = [];
+  activeTabId:string = 'alerts';
+  loading:boolean = true;
+  noData:boolean = false;
+  url:any;
+  showNotification:boolean = true;
+  showDropdown:boolean = false;
+
+  private subscription: Subscription;
+  notificationDropDownClass: boolean = true;
+
+  constructor(private service:NotificationService,private router:Router,private toast:ToastService,private cd:ChangeDetectorRef) {
+    
+  }
+  
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
+  ngOnInit(): void {
+    this.router.events.pipe(filter(event => event instanceof NavigationEnd),takeUntil(this.destroy$)).subscribe(() => {
+      this.showNotificationIcon();
+    });
+    this.showNotificationIcon();
+   
+  }
+ 
+  showNotificationIcon () {
+    let url = this.router.url.split('/');
+    if(url.includes('notifications')) {
+      this.showNotification = false;
+    }
+    else {
+      this.showNotification = true;
+    }
+    this.notificationList();
+  }
+
+  toggleUserDropDown() {
+    this.notificationDropDownClass = !this.notificationDropDownClass;
+  }
+  setActiveTabId(tabId: any) {
+    this.activeTabId = tabId;
+  }
+
+  notificationList() {
+    this.pushNotificationList = []; 
+    this.loading = true;
+    let data = {
+      limit: 10,
+      offset: 1
+    };
+    this.service.notificationList(data)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.loading = false;
+            this.noData = false;
+            this.notification = res.data.result.slice(0,5);
+            this.pushNotificationList = res.data.result.filter((item:any) => item._source.showPushNotification);
+            this.pushNotificationList.forEach((item: any) => {
+              item._score = true;
+              setTimeout(() => {
+                item._score = false;
+                this.service.notificationPushUpdate(item).pipe(takeUntil(this.destroy$)).subscribe ((res: any) => {
+                })
+                // this.notificationPushUpdate(item,'');
+              }, 6000);
+            });
+            
+          } else {
+            this.notification = []; 
+            this.loading = false;
+            this.noData = true;
+          }
+        },
+        error: (err) => {
+          this.notification = []; 
+          this.loading = false;
+          this.noData = true;
+        }
+      });
+  }
+
+   notificationPushUpdate(data: any,btnDetails:any): void {
+    this.service.notificationPushUpdate(data).pipe(takeUntil(this.destroy$)).subscribe((res: any) => {
+      if (res && res.code == 200) {
+        if(btnDetails && btnDetails?.redirectionUrl != '' && btnDetails?.redirectionUrl.split('/').length > 1) {
+          this.router.navigateByUrl(btnDetails.redirectionUrl);
+        }
+        if(btnDetails && btnDetails?.redirectionUrl == 'remind') {
+          this.service.updateRemind(data._id).pipe(takeUntil(this.destroy$)).subscribe(() => {})
+          
+        }
+        if(btnDetails && btnDetails?.redirectionUrl == 'trialApproved') {
+          let params = {
+            id:btnDetails.id,
+            type:'approve'
+          }
+          this.service.trialApproved(params).pipe(takeUntil(this.destroy$)).subscribe((res:any) => {})
+        }
+        if(btnDetails && btnDetails?.redirectionUrl == 'subscribed') {
+          let params = {
+            clientId: btnDetails?.clientId,
+            products: [
+                {
+                    name: btnDetails.product,
+                    productName: btnDetails.name,
+                    type: "subscription",
+                    content: "new"
+                }
+            ]
+          }
+          this.service.updateSubscription(params).pipe(takeUntil(this.destroy$)).subscribe((res:any) => {})
+        }
+        this.cd.detectChanges();
+        setTimeout(() => {
+          if(btnDetails) {
+            if(!this.showNotification){
+              this.service.triggerReload();
+            } 
+            this.service.notificationUpdate(data._id).pipe(takeUntil(this.destroy$)).subscribe()
+          }
+          this.notificationList();
+        },1000);
+      }
+    })
+  }
+
+  updateNotification(data: any, btnDetails: any): void {
+    this.loading = true;
+    this.service.notificationUpdate(data._id).pipe(takeUntil(this.destroy$)).subscribe((res: any) => {
+      if (res && res.code == 200) {
+        if(!btnDetails || btnDetails?.redirectionUrl != 'subscribed')
+          this.toast.getSuccessToast(res.message);
+        setTimeout(() => {
+          this.notificationList();
+        },1000);
+        if(btnDetails && btnDetails?.redirectionUrl != '' && !['remind','subscribed'].includes(btnDetails?.redirectionUrl)) {
+          this.router.navigateByUrl(btnDetails.redirectionUrl);
+        }
+        if(btnDetails && btnDetails?.redirectionUrl == 'remind') {
+          this.service.updateRemind(data._id).pipe(takeUntil(this.destroy$)).subscribe(() => {})
+        }
+        if(btnDetails && btnDetails?.redirectionUrl == 'trialApproved') {
+          let params = {
+            id:btnDetails.id,
+            type:'approve'
+          }
+          this.service.trialApproved(params).pipe(takeUntil(this.destroy$)).subscribe(() => {})
+        }
+        if(btnDetails && btnDetails?.redirectionUrl == 'subscribed') {
+          let params = {
+            clientId: btnDetails?.clientId,
+            products: [
+                {
+                    name: btnDetails.product,
+                    productName: btnDetails.name,
+                    type: "subscription",
+                    content: "new"
+                }
+            ]
+          }
+          this.service.updateSubscription(params).pipe(takeUntil(this.destroy$)).subscribe((res:any) => {
+            if(res && res.code == 200) {
+              this.toast.getSuccessToast('Product Subscribed Successfully');
+            }
+          })
+        }
+        this.cd.detectChanges();
+      }
+    },(error:any) => {
+      this.loading = false;
+      this.noData = true;
+    })
+  }
+
+  handleNotification() {
+    this.service.updateNotificationReceived(true);
+  }
+
+  viewAll(type:any){
+    this.router.navigateByUrl('/notifications/alerts')
+  }
+  redirecttonotification(){
+    this.router.navigateByUrl('/notifications/alerts?tab=download')
+  }
+
+  @HostListener('document:click', ['$event'])
+  onClick (event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    if(!target.closest('.app-navbar')) {
+      this.showDropdown = false;
+    }
+  }
+
+}

package/src/lib/modules/layout/header/notifications-inner/notifications-inner.component.html

@@ -0,0 +1,200 @@
+<div class="card topbar" >
+  <div class="card-header">
+  <h3 class="title-notify mt-10 mb-6">
+    Notifications
+  </h3>
+  </div>
+  <ng-container *ngIf="loading">
+    <div class="row loader  d-flex justify-content-center align-items-center">
+      <div class="shimmer">
+        <div class="wrapper">
+          <div class="stroke animate title"></div>
+          <div class="stroke animate link"></div>
+          <div class="stroke animate description"></div>
+        </div>
+      </div>
+      <div class="shimmer">
+        <div class="wrapper">
+          <div class="stroke animate title"></div>
+          <div class="stroke animate link"></div>
+          <div class="stroke animate description"></div>
+        </div>
+      </div>
+  
+    </div>
+  </ng-container>
+  <ng-container *ngIf="noData && !loading">
+    <div class="row">
+      <div class="col-lg-12 mb-3">
+        <div class="card-body d-flex justify-content-center align-items-center flex-column">
+          <img class="img-src w-25" src="./assets/tango/Icons/noNotification.svg" alt="">
+          <span class="notificationAlign mt-10">No New Notification</span>
+          <span class="noNotification mt-2">Any new notification will be shown here.</span>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div class="alertscroll" *ngIf="notification.length">
+    <div *ngFor="let item of notification" class="mh-300px ng-star-inserted" style="overflow: auto;">
+      <div class="d-flex flex-stack py-3 mx-4 ng-star-inserted">
+        <div class="d-flex align-items-center">
+          <div class="symbol symbol-35px me-4"><span class="symbol-label bg-light-primary"><span
+                class="svg-icon svg-icon-2 svg-icon-primary"></span><span
+                class="svg-icon svg-icon-2 svg-icon-primary"><svg xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24"
+                  version="1.1" class="ng-star-inserted">
+                  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                    <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                    <path
+                      d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z"
+                      fill="#009EF7" fill-rule="nonzero" opacity="0.3"></path>
+                    <path
+                      d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z"
+                      fill="#009EF7" fill-rule="nonzero"></path>
+                  </g>
+                </svg></span></span></div>
+          <div class="mb-0 me-2" style="text-align: left;"><div class="alert-title">{{ item._source.logType }}</div>
+            <div class="alt-desc">{{ item._source.logSubType }}</div>
+          </div>
+        </div><span class="badge badge-light fs-9">{{ item._source.date|customDateFormat }}</span>
+
+        
+      </div>
+    
+    </div>
+    <div class="text-center border-top">
+      <a (click)="viewAll('alerts')" class="btn btn-color-gray-600 btn-active-color-primary mt-4">
+        View All
+      </a>
+    </div>
+    
+  </div>
+</div>
+
+<!-- <div class="d-flex flex-column bgi-no-repeat rounded-top">
+  <ul class="nav nav-line-tabs nav-line-tabs-2x nav-stretch border-0 fw-bold px-9">
+    <li class="nav-item w-50 text-center">
+      <a class="nav-link w-100 opacity-75 opacity-state-100 pb-4 cursor-pointer d-block text-center"
+        data-bs-toggle="tab" [ngClass]="activeTabId === 'alerts' ? 'active' : ''" (click)="setActiveTabId('alerts')">
+        Alerts
+      </a>
+    </li>
+
+
+    <li class="nav-item w-50 text-center">
+      <a class="
+          nav-link d-block text-center
+          text-white w-100
+          opacity-75 opacity-state-100
+          pb-4
+          cursor-pointer
+        " data-bs-toggle="tab" [ngClass]="activeTabId === 'download' ? 'active' : ''"
+        (click)="setActiveTabId('download')">
+        Download
+      </a>
+    </li>
+  </ul>
+</div> -->
+
+
+<!-- <div class="tab-content">
+  <div class="tab-pane fade" id="alerts" role="tabpanel" [ngClass]="activeTabId === 'alerts' ? 'show active' : ''">
+    <div>
+      <div class="mh-300px ng-star-inserted" style="overflow: auto;">
+        <div class="d-flex flex-stack py-3 mx-4 ng-star-inserted">
+          <div class="d-flex align-items-center">
+            <div class="symbol symbol-35px me-4"><span class="symbol-label bg-light-primary"><span
+                  class="svg-icon svg-icon-2 svg-icon-primary"></span><span
+                  class="svg-icon svg-icon-2 svg-icon-primary"><svg xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24"
+                    version="1.1" class="ng-star-inserted">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                      <path
+                        d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z"
+                        fill="#009EF7" fill-rule="nonzero" opacity="0.3"></path>
+                      <path
+                        d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z"
+                        fill="#009EF7" fill-rule="nonzero"></path>
+                    </g>
+                  </svg></span></span></div>
+            <div class="mb-0 me-2" style="text-align: left;"><div class="alert-title">User Added</div>
+              <div class="alt-desc">rock has been successfully onboarde...</div>
+            </div>
+          </div><span class="badge badge-light fs-9">28 May</span>
+        </div>
+        <div class="d-flex flex-stack py-3 mx-4 ng-star-inserted">
+          <div class="d-flex align-items-center">
+            <div class="symbol symbol-35px me-4"><span class="symbol-label bg-light-primary"><span
+                  class="svg-icon svg-icon-2 svg-icon-primary"></span><span
+                  class="svg-icon svg-icon-2 svg-icon-primary"><svg xmlns="http://www.w3.org/2000/svg"
+                    xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24"
+                    version="1.1" class="ng-star-inserted">
+                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <polygon points="0 0 24 0 24 24 0 24"></polygon>
+                      <path
+                        d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z"
+                        fill="#009EF7" fill-rule="nonzero" opacity="0.3"></path>
+                      <path
+                        d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z"
+                        fill="#009EF7" fill-rule="nonzero"></path>
+                    </g>
+                  </svg></span></span></div>
+            <div class="mb-0 me-2" style="text-align: left;"><div class="alert-title">User Added</div>
+              <div class="alt-desc">rock has been successfully onboarde...</div>
+            </div>
+          </div><span class="badge badge-light fs-9">28 May</span>
+        </div>
+       
+      </div>
+    </div>
+
+    <div class="py-3 text-center border-top">
+      <a (click)="viewAll('alerts')" class="btn btn-color-gray-600 btn-active-color-primary">
+        View All
+
+      </a>
+    </div>
+  </div>
+
+
+  <div class="tab-pane fade" id="download" role="tabpanel" [ngClass]="activeTabId === 'download' ? 'show active' : ''">
+    <div class="scroll-y mh-400px my-5 px-5">
+      <div class="d-flex flex-stack py-4">
+        <div class="d-flex align-items-center">
+          <span class="me-3">
+            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect width="32" height="32" rx="16" fill="#DAF1FF" />
+              <g clip-path="url(#clip0_9019_100928)">
+                <path
+                  d="M16.0007 18.6667V16M16.0007 13.3334H16.0073M22.6673 16C22.6673 19.6819 19.6826 22.6667 16.0007 22.6667C12.3188 22.6667 9.33398 19.6819 9.33398 16C9.33398 12.3181 12.3188 9.33337 16.0007 9.33337C19.6826 9.33337 22.6673 12.3181 22.6673 16Z"
+                  stroke="#00A3FF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round" />
+              </g>
+              <defs>
+                <clipPath id="clip0_9019_100928">
+                  <rect width="16" height="16" fill="white" transform="translate(8 8)" />
+                </clipPath>
+              </defs>
+            </svg>
+          </span>
+          <div class="mb-0 me-2">
+
+            <div class="title-desc">Invited <span class="title-name">Lana Steiner</span> to the team</div>
+          </div>
+        </div>
+
+        <span class="fs-8"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"
+            fill="none">
+            <circle cx="5" cy="5" r="4" fill="#12B76A" />
+          </svg></span>
+      </div>
+    </div>
+    <div class="py-3 text-center border-top">
+      <a (click)="viewAll('download')" class="btn btn-color-gray-600 btn-active-color-primary">
+        View All
+
+      </a>
+    </div>
+  </div>
+</div> -->

package/src/lib/modules/layout/header/notifications-inner/notifications-inner.component.scss

@@ -0,0 +1,139 @@
+.nav-line-tabs .nav-item .nav-link.active{
+    border-radius: 6px !important;
+    background: var(--Primary-50, #EAF8FF) !important;
+    padding: 10px 14px !important;
+    border-bottom:  none !important;
+    width:100% !important;
+}
+.nav-line-tabs.nav-line-tabs-2x {
+    background: var(--Gray-50, #F9FAFB) !important;
+    padding: 6px !important;
+    border-radius: 8px !important;
+    border: 1px solid var(--Gray-100, #F2F4F7) !important;
+}
+.title-name{
+    color: var(--Primary-700, #009BF3) !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    line-height: 20px;
+}
+.title-desc{
+    color: var(--Gray-500, #667085) !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 20px;
+}
+.title-notify{
+    color: var(--Gray-900, #101828) !important;
+    font-size: 20px !important;
+    font-weight: 500 !important;
+    line-height: 30px; 
+}
+.alert-title{
+    color: var(--Gray-900, #101828);
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 28px;
+    text-align: left;
+}
+
+.alt-desc{
+    color: var(--Gray-500, #667085) !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    line-height: 20px; 
+    width: 200px; /* fixed width */
+    white-space: nowrap; /* prevent wrapping */
+    overflow: hidden; /* hide overflow */
+    text-overflow: ellipsis; /* show ellipsis */
+}
+
+.alertscroll{
+    max-height: 300px;
+    overflow: scroll;
+}
+
+.loader {
+    .title {
+        width: 65%;
+    }
+
+    .link {
+        width: 85%;
+    }
+
+    .description {
+        width: 95%;
+    }
+
+    .shimmer {
+        padding: 15px;
+        width: 95%;
+        height: 120px;
+        margin: 10px auto;
+        background: #ffffff;
+    }
+
+    .shimmer .image-card {
+        height: 90px;
+        width: 90px;
+        float: right;
+        border-radius: 8px;
+    }
+
+    .stroke {
+        height: 15px;
+        background: #777;
+        margin-top: 20px;
+    }
+
+    .wrapper {
+        width: 0px;
+        animation: fullView 0.5s forwards linear;
+    }
+
+    @keyframes fullView {
+        100% {
+            width: 100%;
+        }
+    }
+
+    .animate {
+        animation: shimmer 3s;
+        animation-iteration-count: infinite;
+        background: linear-gradient(to right, #e6e6e6 5%, #cccccc 25%, #e6e6e6 35%);
+        background-size: 1000px 100%;
+    }
+
+    @keyframes shimmer {
+        from {
+            background-position: -1000px 0;
+        }
+
+        to {
+            background-position: 1000px 0;
+        }
+    }
+
+}
+
+.notificationAlign {
+    color: var(--Gray-900, #101828);
+    text-align: center;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.noNotification {
+    color: var(--Gray-500, #667085);
+    text-align: center;
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+}

package/src/lib/modules/layout/header/notifications-inner/notifications-inner.component.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectorRef, Component, HostBinding, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { NotificationService } from '../../../../services/notification.service'
+import { Subject, takeUntil } from "rxjs";
+
+export type NotificationsTabsType =
+  | 'kt_topbar_notifications_1'
+  | 'kt_topbar_notifications_2'
+  | 'kt_topbar_notifications_3';
+
+@Component({
+  selector: 'lib-notifications-inner',
+  templateUrl: './notifications-inner.component.html',
+  styleUrl:'./notifications-inner.component.scss'
+})
+export class NotificationsInnerComponent implements OnInit {
+  @HostBinding('class') class =
+    'menu menu-sub menu-sub-dropdown menu-column w-450px w-lg-425px';
+  @HostBinding('attr.data-kt-menu') dataKtMenu = 'true';
+
+  activeTabId = 'alerts';
+  private readonly destroy$ = new Subject();
+  notification: any = [];
+  loading:boolean = true;
+  noData:boolean = false;
+
+  constructor(private router:Router, private service:NotificationService,private cd :ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this.notificationList()
+  }
+
+  setActiveTabId(tabId: any) {
+    this.activeTabId = tabId;
+  }
+
+  notificationList() {
+    this.notification = []; 
+    this.loading = true;
+    let data = {
+      limit: 5,
+      offset: 1
+    };
+    this.service.notificationList(data)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (res: any) => {
+          if (res && res.code == 200) {
+            this.loading = false;
+            this.noData = false;
+            this.notification = res.data.result || [];
+          } else {
+            this.notification = []; 
+            this.loading = false;
+            this.noData = true;
+          }
+        },
+        error: (err) => {
+          this.notification = []; 
+          this.loading = false;
+          this.noData = true;
+        }
+      });
+  }
+
+  handleNotification() {
+    this.service.updateNotificationReceived(true);
+  }
+
+  viewAll(type:any){
+    this.dataKtMenu = 'false';
+    this.router.navigate(['/notifications/alerts'])
+  }
+}
+
+