From 6fa4bba623713c396432ba8b863846883d6a1906 Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期三, 26 一月 2022 10:52:23 +0800
Subject: [PATCH] Merge branch 'pollex-dev' into sit

---
 PAMapp/components/NavBar.vue |  114 +++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 102 insertions(+), 12 deletions(-)

diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index 44664b0..75290c0 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -7,13 +7,32 @@
       <div class="pam-header__title--sub">�����兢蝳�風��</div>
     </div>
     <div class="pam-header__action-bar">
-      <!-- <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
-        @click="$router.push('/notification')"></i> -->
+      <i
+        v-if="isShowNotification"
+        class="icon-bell text--dark-blue cursor--pointer"
+        @click="$router.push('/notification')"
+      >
+        <span :class="{'newNotification': isNewNotification}"></span>
+      </i>
+
         <el-dropdown :class="{'is-open':isOpenDropdown}"
           ref="dropdown"
           trigger="click"
           @command="routerNavigateTo">
-          <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue" @click="isOpenDropdown =!isOpenDropdown" @blur="isOpenDropdown =false"></i>
+          <div
+            @click="isOpenDropdown =!isOpenDropdown"
+            @blur="isOpenDropdown =false">
+            <template v-if="isAdminLogin">
+              <UiAvatar
+              :size="30"
+              :agentNo="consultantId"
+              class="admin-avatar"
+              ></UiAvatar>
+            </template>
+            <template v-else>
+              <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i>
+            </template>
+          </div>
           <el-dropdown-menu
             class="pam-header__dropdown">
             <template v-for="(item,index) in navBarList">
@@ -33,22 +52,47 @@
 
 <script lang="ts">
   import { Vue, Component } from 'vue-property-decorator';
-  import { namespace } from 'nuxt-property-decorator';
+  import { Action, namespace, State, Watch } from 'nuxt-property-decorator';
   import { Role } from '~/shared/models/enum/Role';
   import * as _ from 'lodash';
+  import { NotificationList } from '~/shared/models/reviews.model';
+  import { AppointmentLog } from '~/shared/models/appointment.model';
 
   const roleStorage = namespace('localStorage');
   @Component
   export default class NavBar extends Vue {
 
-    @roleStorage.Getter idToken!: string | null;
-    @roleStorage.Getter currentRole!: string | null;
-    @roleStorage.Getter consultantId!: string | null;
+    @roleStorage.Getter
+    idToken!: string | null;
 
-    @roleStorage.Mutation storageClear!: () => void;
+    @roleStorage.Getter
+    currentRole!: string | null;
+
+    @roleStorage.Getter
+    consultantId!: string | null;
+
+    @roleStorage.Mutation
+    storageClear!: () => void;
+
+    @roleStorage.Getter
+    isAdminLogin!: boolean;
+
+    @roleStorage.Getter
+    isUserLogin!: boolean;
+
+    @Action
+    storeMyPersonalNotification!: () => void;
+
+    @State
+    notificationList!: NotificationList[];
+
+    @Action
+    storeMyAppointmentReviewLog!: () => void;
+
+    @State
+    unReviewLogList!: AppointmentLog[];
 
     isOpenDropdown = false;
-    login_role     = Role.NOT_LOGIN;
 
     navBarList = [{
         authorityOfRoleList: [Role.NOT_LOGIN],
@@ -99,6 +143,16 @@
 
     //////////////////////////////////////////////////////////////////////
 
+    @Watch('$route', {immediate: true})
+    onRouterChange() {
+        if (this.currentRole) {
+          this.storeMyPersonalNotification();
+          this.storeMyAppointmentReviewLog();
+        }
+    }
+
+    //////////////////////////////////////////////////////////////////////
+
     routerNavigateTo(url: string): void {
       (this.$refs.dropdown as any).hide();
       _.isEqual(url,'')
@@ -118,6 +172,21 @@
 
     get loginRole(): Role {
       return this.idToken && this.currentRole ? (this.currentRole as Role): Role.NOT_LOGIN;
+    }
+
+    get isShowNotification() {
+      if (this.isUserLogin) {
+        return this.notificationList.length || this.unReviewLogList.length;
+      }
+      if (this.isAdminLogin) {
+        return this.notificationList.length
+      }
+    }
+
+    get isNewNotification() {
+      if (this.currentRole) {
+        return this.notificationList.filter(item => !item.readDate).length;
+      }
     }
 
   }
@@ -185,9 +254,30 @@
 
       i {
         padding: 0px 15px;
+        @extend .fix-chrome-click--issue;
 
         @media screen and (max-width: 352px) {
           padding: 0px 10px;
+        }
+      }
+
+      .admin-avatar {
+        margin: 0px 15px;
+        @media screen and (max-width: 352px) {
+          margin: 0px 10px;
+        }
+      }
+
+      .icon-bell {
+        position: relative;
+        .newNotification {
+          position: absolute;
+          width: 10px;
+          height: 10px;
+          top: 0;
+          right: 15px;
+          border-radius: 50px;
+          background: $PRIMARY_RED;
         }
       }
     }
@@ -210,11 +300,11 @@
       height: $DESKTOP_NAV_BAR;
 
       .pam-header__logo {
-        width: 180px;
-        height: 100%;
+        width: 160px;
+        height: 70px;
         margin: 0;
         background-image: url('~/assets/images/logo.png');
-        background-size: cover;
+        background-size: contain;
         background-repeat: no-repeat;
         background-position: center;
       }

--
Gitblit v1.8.0