notification badge error fix

src/app/commons/component/layout/notification/app.notification.component.html

@@ -1,6 +1,5 @@
-<div class="ui-g ui-g-nopad ui-app-noti">
+<div class="ui-g ui-g-nopad ui-app-noti" *ngIf="notifications">
     <h4>Notifications</h4>
-
     <li role="menuitem" *ngFor="let noti of notifications | slice:0:5; let i = index">
         <a href="javascript:void(0)" class="topbar-message" (click)="onNotiClick(noti)" [ngStyle]="noti.confirmDate ? '' : {'background-color': 'lightblue'}">
             <div class="ui-app-noti-date">{{noti.createDate | date: 'short'}}</div>
@@ -13,4 +12,4 @@
             <span>View All</span>
         </a>
     </li>
-</div>
+</div>

src/app/commons/component/layout/notification/app.notification.component.ts

@@ -63,6 +63,9 @@ export class AppNotificationComponent implements OnInit, AfterContentInit {
     }
 
     getUnconfirmedCount() {
+        if (this.notifications === null || this.notifications.length === 0) {
+            return;
+        }
         let totalCnt = 0;
         for (let i = 0; i < 5; i ++) {
             if (!this.notifications[i].confirmDate) {

src/packages/notification/component/badge/notification.component.html

@@ -1,53 +0,0 @@
-
-<!-- <div class="toolbar-notification-container">
-  <button mat-icon-button (click)="isOpen = !isOpen;" [ngClass]="[cssPrefix+'-btn']" [class.open]="isOpen">
-    <mat-icon>notifications_none</mat-icon>
-    <span class="badge" *ngIf="badgeCount !== 0">{{ badgeCount }}</span>
-  </button>
-
-  <div class="dropdown mat-elevation-z4" [class.open]="isOpen">
-
-    <div class="card">
-      <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
-        <div class="title">
-          <div class="name">Notifications</div>
-          <div class="extra">
-            <button mat-button (click)="handleMarkAllAsRead()">Mark all as read</button>
-          </div>
-        </div>
-        <button type="button" mat-icon-button>
-          <mat-icon class="icon">settings</mat-icon>
-        </button>
-      </div>
-      <div *ngIf="notifications?.length !== 0; then thenBlock else elseBlock;"></div>
-      <div class="footer" fxLayout="row" fxLayoutAlign="center center">
-        <div class="action" (click)="handleViewAll()">View All</div>
-      </div>
-    </div>
-
-  </div>
-
-</div>
-
-<ng-template #thenBlock>
-  <perfect-scrollbar class="content">
-    <div *ngFor="let notification of notifications;">
-      <div class="notification" fxLayout="row" fxLayoutAlign="start center" mat-ripple [ngClass]="{'highlight': notification.confirmDate === null}" (click)="handleClick(notification)" > 
-        <mat-icon class="icon">notifications</mat-icon>
-        <div class="title" fxLayout="column">
-          <div class="name">{{ notification.message }}</div>
-          <div class="time">{{ notification.member.name }}</div>
-        </div>
-        <span fxFlex></span>
-        <button type="button" mat-icon-button (click)="mark(notification, $event)">
-          <mat-icon class="close" matTooltip="Mark as read">check circle</mat-icon>
-        </button>
-      </div>
-      <div class="divider" *ngIf="!isLast"></div>
-    </div>
-  </perfect-scrollbar>
-</ng-template>
-
-<ng-template #elseBlock>
-  <div class="no" fxLayout="row" fxLayoutAlign="center center">No notification found.</div>
-</ng-template> -->

src/packages/notification/component/badge/notification.component.scss

@@ -1,168 +0,0 @@
-$prefix: 'notification';
-
-.highlight {
-	background: #039be5
-}
-
-.badge {
-  	position: absolute;
-  	top: 0;
-  	left: 50%;
-  	font-weight: 700;
-  	line-height: 13px;
-  	height: 13px;
-  	padding: 5px;
-    border-radius: 26%;
-    width: 30%;
-    background-color: #f44336;
-  	color: #fff;
-  	border-color:#f44336
-}
-
-.#{$prefix} {
-  &-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  &-btn {
-    display: flex;
-    justify-content: center;
-    margin-right: 10px;
-  }
-}
-.dropdown {
-	background: white;
-	position: absolute;
-	top: 42px;
-	right: 28px;
-	min-width: 350px;
-	z-index: 2;
-	transform: translateY(0) scale(0);
-	transform-origin: top right;
-	visibility: hidden;
-	transition: transform .4s cubic-bezier(.25, .8, .25, 1), visibility .4s cubic-bezier(.25, .8, .25, 1);
-
-	@media screen and (max-width: 599px) {
-	    min-width: 50vw;
-	    right: 5px;
-	    transform: translateY(0);
-    	visibility: hidden;
-    	transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);
-	}
-
-	&.open {
-	    transform: translateY(0) scale(1);
-	    visibility: visible;
-	}
-	.card {
-
-	    .header {
-	      background: #EEEEEE;
-	      min-height: 54px;
-	      padding-left: 16px;
-	      padding-right: 8px;
-	      color: #555;
-	      display: flex;
-	      justify-content: flex-start;
-	      align-items: center;
-	      align-content: center;
-	      border-bottom: 1px solid #e0e0e0;
-
-	      .extra {
-	        font-size: 12px;
-	        color: #888;
-	      }
-    	}
-    }
-    .content {
-      	overflow: hidden;
-      	max-height: 256px;
-
-      	.notification {
-        	min-height: 64px;
-	        padding: 0 16px 0 14px;
-	        position: relative;
-	        color: #666;
-	        cursor: pointer;
-
-	        .icon {
-		        height: 28px;
-		        width: 28px;
-		        line-height: 28px;
-		        font-size: 18px;
-		        margin-right: 13px;
-		        text-align: center;
-		        border-radius: 50%;
-		        background: #FFF;
-		        color: #888;
-		        border: 1px solid #EEE;
-        	}
-
-        	.title {
-          		font-weight: 500;
-          		font-size: 14px;
-        	}
-
-        	.time {
-         		font-size: 12px;
-        	}
-
-        	.close {
-          		font-size: 18px;
-          		width: 18px;
-	          height: 18px;
-	          line-height: 18px;
-	        }
-
-	        &.primary {
-	          .icon {
-	            background: #ccc;
-	            color: #ddd;
-	          }
-	        }
-
-	        &.accent {
-	          .icon {
-	            background: #aaa;
-	            color: #bbb;
-	          }
-	        }
-
-	        &.warn {
-	          .icon {
-	            background: #eee;
-	            color: #ddd;
-	          }
-	        }
-
-	        &.read {
-	          color: #999;
-
-	          .name {
-	            font-weight: normal;
-	          }
-	        }
-      	}
-    }
-
-    .footer {
-      	min-height: 42px;
-      	border-top: 1px solid #EEE;
-
-	    .action {
-	        cursor: pointer;
-	        color: #AAA;
-	        text-align: center;
-	        font-size: 13px;
-	    }
-    }
-
-    .divider {
-      	width: calc(100% - 30px);
-      	height: 1px;
-      	background: #EEE;
-      	margin: 0 16px 0 14px;
-    }
-}

src/packages/notification/component/badge/notification.component.ts

@@ -14,7 +14,6 @@ import { MarkAsRead } from '../../store/detail';
 @Component({
   selector: 'of-notification-badge',
   templateUrl: './notification.component.html',
-  styleUrls: ['./notification.component.scss']
 })
 export class NotificationBadgeComponent implements OnInit, AfterContentInit {
   notification$ = this.listStore.pipe(select(ReadAllByMemberSelector.select('page')));