From 27d109b5792305d849f578627f98e1cb55a330f4 Mon Sep 17 00:00:00 2001
From: wayne <wayne8692wayne8692@gmail.com>
Date: 星期五, 11 三月 2022 15:12:54 +0800
Subject: [PATCH] Merge branch 'Phase3' into pollex-dev

---
 PAMapp/components/NavBar.vue |  292 +++++++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 216 insertions(+), 76 deletions(-)

diff --git a/PAMapp/components/NavBar.vue b/PAMapp/components/NavBar.vue
index d0a7d46..75290c0 100644
--- a/PAMapp/components/NavBar.vue
+++ b/PAMapp/components/NavBar.vue
@@ -1,99 +1,194 @@
 <template>
   <header class="pam-header">
-    <div class="pam-header__logo" @click="$router.push('/')"></div>
+    <div class="pam-header__logo"
+      @click="pushRouterByLoginRole"></div>
     <div class="pam-header__title">
       <div class="pam-header__title--main">���兢蝳��蜓</div>
       <div class="pam-header__title--sub">�����兢蝳�風��</div>
     </div>
-    <div class="pam-header__action-bar" style="position:relaitive">
-      <i class="icon-bell text--dark-blue cursor--pointer fix-chrome-click--issue"
-        @click="$router.push('/notification')"></i>
-      <el-dropdown>
-        <i class="icon-avatar text--dark-blue cursor--pointer fix-chrome-click--issue"></i>
-        <el-dropdown-menu slot="dropdown"
-          class="pam-header__dropdown">
-          <template v-for="(navbarItem,index) in navBarList">
-            <li class="pam-header__dropdown-item fix-chrome-click--issue "
-              :class="{'pam-header__dropdown-divider':navbarItem.title === '憿批��'}"
-              v-if="navbarItem.needRole.includes(loginRole)"
-              :key="index"
-              @click="linkTo(navbarItem.link)">
-              {{navbarItem.title}}
-            </li>
-          </template>
-        </el-dropdown-menu>
-      </el-dropdown>
+    <div class="pam-header__action-bar">
+      <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">
+          <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">
+              <el-dropdown-item :key="index"
+                v-if="item.authorityOfRoleList.includes(loginRole)"
+                class="fix-chrome-click--issue"
+                :class="{'pam-header__dropdown-divider':item.title === '憿批��'}"
+                :command="item.routeUrl">
+                {{item.title}}
+              </el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </el-dropdown>
     </div>
   </header>
 </template>
 
 <script lang="ts">
   import { Vue, Component } from 'vue-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.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;
+
     navBarList = [{
-        needRole: [Role.NOT_LOGIN],
-        link: '/login',
-        title: '��',
+        authorityOfRoleList: [Role.NOT_LOGIN],
+        routeUrl: '/login',
+        title: '�� | 閮餃��',
       },
       {
-        needRole: [Role.USER],
-        link: '/accountSetting',
+        authorityOfRoleList: [Role.USER],
+        routeUrl: '/accountSetting',
         title: '�犖撣唾�身摰�',
       },
       {
-        needRole: [Role.ADMIN],
-        link: '/notFinish',
+        authorityOfRoleList:[Role.ADMIN],
+        routeUrl: '/agentInfo/',
         title: '���董�����',
       },
       {
-        needRole: [Role.USER, Role.ADMIN],
-        link: '/record/contactRecord',
+        authorityOfRoleList:[Role.ADMIN],
+        routeUrl: '/record',
         title: '�������',
       },
       {
-        needRole: [Role.NOT_LOGIN, Role.USER],
-        link: '/myConsultantList/consultantList',
+        authorityOfRoleList: [Role.USER],
+        routeUrl: '/userReviewsRecord',
+        title: '�������',
+      },
+      {
+        authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
+        routeUrl: '/myConsultantList/consultantList',
         title: '���“���',
       },
       {
-        needRole: [Role.USER, Role.ADMIN],
-        link: '',
+        authorityOfRoleList: [Role.NOT_LOGIN, Role.USER],
+        routeUrl: '/faq',
+        title: 'F&Q 撣貉����',
+      },
+      {
+        authorityOfRoleList: [Role.USER, Role.ADMIN],
+        routeUrl: '',
         title: '��',
       },
       {
-        needRole: [Role.NOT_LOGIN],
-        link: '/consultantLogin',
+        authorityOfRoleList: [Role.NOT_LOGIN],
+        routeUrl: '/consultantLogin',
         title: '憿批��',
       },
     ];
-    get idToken(): string | null {
-      return localStorage.getItem('id_token');
-    }
-    get roleOfState(): string | null {
-      return localStorage.getItem('roleOfState');
-    }
-    get loginRole(): string {
-      return this.roleOfState && this.idToken ? this.roleOfState : Role.NOT_LOGIN;
+
+    //////////////////////////////////////////////////////////////////////
+
+    @Watch('$route', {immediate: true})
+    onRouterChange() {
+        if (this.currentRole) {
+          this.storeMyPersonalNotification();
+          this.storeMyAppointmentReviewLog();
+        }
     }
 
-    linkTo(routerLink: string): void {
-      _.isEqual(routerLink, '') ? this.fakeLogout() : this.$router.push(routerLink);
+    //////////////////////////////////////////////////////////////////////
+
+    routerNavigateTo(url: string): void {
+      (this.$refs.dropdown as any).hide();
+      _.isEqual(url,'')
+        ? this.logout()
+        : this.$router.push(_.isEqual(url,'/agentInfo/') ? url+this.consultantId :url);
     }
 
-
-    // TODO: ��TP隤����� ���蝙�
-    fakeLogout(): void {
-      localStorage.clear();
-      // this.$router.go(0);
-      window.location.href = '/'
+    pushRouterByLoginRole(): void {
+      const link = _.isEqual(this.currentRole, Role.ADMIN) ? '/myAppointmentList/appointmentList' : '/';
+      this.$router.push(link);
     }
-  }
-  export enum Role {
-    USER = 'user',
-    ADMIN = 'admin',
-    NOT_LOGIN = '',
+
+    logout(): void {
+      this.storageClear();
+      _.isEqual(this.$route.name, 'index') ? location.reload() : this.$router.push('/');
+    }
+
+    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;
+      }
+    }
+
   }
 
 </script>
@@ -107,33 +202,37 @@
     display: flex;
     align-items: center;
     background-color: $PRIMARY_WHITE;
-    z-index: 3;
+    z-index: 6;
 
     .pam-header__logo {
       height: 30px;
       width: 115px;
       margin: 0 10px;
       background-image: url('~/assets/images/taiwan-logo.png');
-      background-repeat:no-repeat;
+      background-repeat: no-repeat;
       background-size: contain;
       background-position: center;
     }
+
     .pam-header__title {
       flex: 1;
       flex-basis: 160px;
-      border-left:1px #CCCCCC solid;
-      padding-left:10px;
-      .pam-header__title--main {
-        font-size: 16px;
-        font-weight: bold;
-        color: $PRUDENTIAL_GREY;
-        letter-spacing:0.8px;
-        @media screen and (max-width: 352px) {
-          font-size: 12px;
-        }
+      border-left: 1px #CCCCCC solid;
+      padding-left: 10px;
+
+    .pam-header__title--main {
+      font-size: 16px;
+      font-weight: bold;
+      color: $PRUDENTIAL_GREY;
+      letter-spacing: 0.8px;
+
+      @media screen and (max-width: 352px) {
+        font-size: 12px;
       }
-      .pam-header__title--sub {
-        padding-top: 2px;
+    }
+
+    .pam-header__title--sub {
+      padding-top: 2px;
         font-size: 12px;
         transform: scale(0.9);
         -webkit-transform-origin-x: 0;
@@ -145,16 +244,53 @@
 
 
     .pam-header__action-bar {
+      position: relative;
       display: flex;
+      height: 100%;
       font-size: 24px;
       font-weight: bold;
+      align-items: center;
       justify-content: space-around;
 
       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;
+        }
+      }
+    }
+  }
+
+  .el-dropdown{
+    height: 100%;
+    display: flex;
+    align-items: center;
+    &.is-open {
+        background-color: $PEACH;
+      i {
+        color: $PRIMARY_WHITE;
       }
     }
   }
@@ -162,26 +298,30 @@
   @include desktop {
     .pam-header {
       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-repeat:no-repeat;
+        background-size: contain;
+        background-repeat: no-repeat;
         background-position: center;
       }
+
       .pam-header__title {
         display: flex;
-        justify-content: start;
+        justify-content: flex-start;
         align-items: center;
         border: none;
         padding-left: 30px;
-        .pam-header__title--main{
+
+        .pam-header__title--main {
           font-size: 30px;
           letter-spacing: 1.5px;
         }
-        .pam-header__title--sub{
+
+        .pam-header__title--sub {
           font-size: 20px;
           letter-spacing: 2px;
           transform: none;

--
Gitblit v1.8.0