Merge pull request #20 from jianyiee96/sr4-consultation

Sr4 consultation

src/app/classes/booking/booking.ts

@@ -15,6 +15,7 @@ export class Booking{
     bookingStatusEnum: BookingStatusEnum
     bookingComment: string
     cancellationComment: string
+    isForReview: boolean
 
     constructor(bookingId?: number, serviceman?: Serviceman, consultationPurpose?: ConsultationPurpose,
         consultation?: Consultation, bookingSlot?: BookingSlot, formInstances?: FormInstance[], bookingStatusEnum?: BookingStatusEnum,
@@ -28,5 +29,6 @@ export class Booking{
             this.bookingStatusEnum = bookingStatusEnum
             this.bookingComment = bookingComment
             this.cancellationComment = cancellationComment
+            this.isForReview = this.isForReview
     }
 }

src/app/classes/notification/notification.spec.ts

@@ -0,0 +1,7 @@
+import { Notification } from './notification';
+
+describe('Notification', () => {
+  it('should create an instance', () => {
+    expect(new Notification()).toBeTruthy();
+  });
+});

src/app/classes/notification/notification.ts

@@ -0,0 +1,39 @@
+import { NotificationTypeEnum } from '../notificationtype-enum'
+import { Serviceman } from '../serviceman/serviceman'
+
+export class Notification {
+
+    notificationId: number
+    notificationDate: Date
+    title: string
+    message: string
+    isRead: boolean
+    isFetched: boolean
+    serviceman: Serviceman
+    dynamicId: number
+    notificationTypeEnum: NotificationTypeEnum
+
+    constructor(
+        notificationId?: number,
+        notificationDate?: Date,
+        title?: string,
+        message?: string,
+        isRead?: boolean,
+        isFetched?: boolean,
+        serviceman?: Serviceman,
+        dynamicId?: number,
+        notificationTypeEnum?: NotificationTypeEnum
+    ) {
+
+        this.notificationId = notificationId
+        this.notificationDate = notificationDate
+        this.title = title
+        this.message = message
+        this.isRead = isRead
+        this.isFetched = isFetched
+        this.serviceman = serviceman
+        this.dynamicId = dynamicId
+        this.notificationTypeEnum = notificationTypeEnum
+    }
+
+}

src/app/classes/notificationtype-enum.ts

@@ -0,0 +1,6 @@
+export enum NotificationTypeEnum{
+  BOOKING = ('BOOKING'),
+  CONSULTATION = ("CONSULTATION"),
+  FORM = ("FORM"),
+  GENERAL = ("GENERAL")
+}

src/app/layout/app-main/app-main.component.html

@@ -1,4 +1,4 @@
-<div class="layout-wrapper" (click)="onWrapperClick()"
+<div class="layout-wrapper" 
      [ngClass]="{'layout-wrapper-static': layoutMode === 'static',
                 'layout-wrapper-active': mobileMenuActive,
                 'layout-menu-horizontal': layoutMode === 'horizontal',

src/app/layout/app-topbar/app-topbar.component.css

@@ -0,0 +1,59 @@
+.unread {
+  background: aliceblue;
+}
+
+.astext {
+  background: none;
+  border: none;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  color: #337ab7;
+  float: right;
+  padding-top: 2px;
+}
+
+.astext:hover {
+  text-decoration: underline;
+  color: #64a3da;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+
+.container {
+  position: relative;  
+  width:100%;
+  max-width:100px;
+}
+.container:before {
+content:"";
+position:absolute;
+width:100%;
+height:100%;
+top:0;left:0;right:0;
+background-color:rgba(0,0,0,0);
+}
+.container:hover::before {
+background-color:rgba(0,0,0,0.5);
+}
+.container abc {
+display:block;
+}
+.container button {
+position: absolute;
+top: 60%;
+left: 50%;
+transform: translate(-50%, -50%);
+-ms-transform: translate(-50%, -50%);
+opacity:0;
+} 
+.container:hover button {   
+opacity: 1;
+}

src/app/layout/app-topbar/app-topbar.component.html

@@ -1,5 +1,6 @@
+<p-toast></p-toast>
 <div class="layout-topbar">
-
+    
     <a routerLink="/" *ngIf="app.isHorizontal() && !app.isMobile()" class="topbar-logo">
         <img alt="logo" src="assets/layout/images/logo-HoMED-white.svg" />
     </a>
@@ -38,28 +39,95 @@
                     </li>
                 </ul>
             </li>
-            <li #notifications [ngClass]="{'active-topmenuitem':app.activeTopbarItem === notifications}" (click)="app.onTopbarRootItemClick($event, notifications)">
+            <li #notifications [ngClass]="{'active-topmenuitem':app.activeTopbarItem === notifications}" style="cursor: pointer;">
                 <a href="#">
-                    <i class="topbar-icon pi pi-bell"></i>
-                    <span class="topbar-badge animated rubberBand">2</span>
+                    <i class="topbar-icon pi pi-bell" (click)="app.onTopbarRootItemClick($event, notifications)"></i>
+                    <span class="topbar-badge animated rubberBand">{{unreadCounter}}</span>
                     <span class="topbar-item-name">Notifications</span>
                 </a>
-                <ul class="fadeInDown">
+
+
+                <ul class="triangleOverride fadeInDown" style="width: 500px;">
                     <li role="menuitem">
-                        <a href="#">
-                            <i class="pi pi-calendar"></i>
-                            <span>Medical Review at 3</span>
-                        </a>
+                        <div style="padding: 10px 10px 10px 10px;
+                        display: block;
+                        width: 100%;
+                        box-sizing: border-box;
+                        color: #909090;
+                        background: #e1e1e1">
+                        <button class="astext" (click)="app.onTopbarRootItemClick($event, notifications)" style="padding-right: 10px;"><i class="pi pi-times"></i></button>
+                        </div>
                     </li>
                     <li role="menuitem">
-                        <a href="#">
-                            <i class="pi pi-comment"></i>
-                            <span>Check FFI Results</span>
-                        </a>
+                        <div style="padding: 10px 10px 10px 10px;
+                        display: block;
+                        width: 100%;
+                        box-sizing: border-box;
+                        color: #909090;
+                        background: #e1e1e1">
+
+                            <span style="font-size: large;">Notifications</span>
+                            <button class="astext" (click)="deleteAllNotifications()">Delete All</button>
+                            <button class="astext" (click)="readAllNotifications()" style="padding-right: 10px;">Mark All as Read</button>
+                        </div>
                     </li>
+                    <p-scrollPanel [style]="{width: '100%', height: '700px'}">
+                        <ng-container *ngIf="this.allNotifications.length === 0">
+                            <p-messages severity="info">
+                                <ng-template pTemplate>
+                                    <i class="pi pi-info-circle"></i>
+                                    <div class="p-ml-2">You have no notification!!</div>
+                                </ng-template>
+                            </p-messages>
+                        </ng-container>
+                        <ng-container *ngFor="let notification of this.allNotifications">
+                            <li role="menuitem" (mouseover)="notiHover=true" (mouseout)="notiHover=false">
+                                <a (click)="redirecting(notification)" style="width:500px;" [ngClass]="{ 'unread' : !notification.isRead}" pTooltip="{{notification.message}}" tooltipPosition="bottom" 
+                                [tooltipDisabled]="numLines(notification.message) <= 3">
+
+                                    <div class="p-grid">
+                                        <div *ngIf="notification.isRead" class="p-col-10">
+                                            <h5>{{notification.title}}</h5>
+                                            <span>{{notification.message}}</span>
+                                            <br/>
+                                            <p style="font-size:0.8rem; color: #65676b">{{notification.notificationDate | date:'dd/MM/yyyy HH:mm'}}</p>
+                                        </div>
+                                        <div *ngIf="!notification.isRead" class="p-col-10">
+                                            <h5 style="font-weight: bold;">{{notification.title}}</h5>
+                                            <span style="font-weight: bold; white-space: pre-line;" class="ellipsis">{{notification.message}}</span>
+                                            <br/>
+                                            <p style="color: #73acf7; font-weight: bold;">{{notification.notificationDate | date:'dd/MM/yyyy HH:mm'}}</p>
+
+                                        </div>
+                                        <div class="p-col-2" style="display: flex; align-items: center; justify-content: center;">
+                                            <div class="p-grid">
+                                                <!-- <div class="p-col"> -->
+
+                                                <!-- </div> -->
+                                                <div class="p-col">
+                                                    <button pButton pRipple (click)="deleteNotification(notification)" type="button" icon="pi pi-trash" class="p-button-rounded p-button-outlined"></button>
+                                                </div>
+                                            </div>
+
+                                        </div>
+
+
+                                    </div>
+                                </a>
+                            </li>
+                        </ng-container>
+                    </p-scrollPanel>
+
                 </ul>
             </li>
         </ul>
     </div>
 </div>
+<p-dialog header="{{displayNotfication.title}}" [(visible)]="display">
+    <h4>
+       {{displayNotfication.message}} 
+    </h4>
+
+</p-dialog>
+