From 33a502a378ce42a4b6c26a5275fd9338c48bba4e Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Tue, 31 Jul 2018 15:38:08 +0800
Subject: [PATCH] added back notification bell at navigation bar

---
 .../assets/js/components/LocaleDropdown.vue   | 17 ++----
 resources/assets/js/components/Navbar.vue     | 59 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index 010328c6..eba621cd 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -1,11 +1,6 @@
 <template>
   <div>
     <ul class="nav navbar-nav">
-      <li v-if="(user && role == 'admin')" class="nav-item">
-        <router-link :to="{ name: 'admin.home' }" class="nav-link">
-          {{ $t('Home') }}
-        </router-link>
-      </li>
       <ul class="navbar-nav">
         <li v-if="(user && role == 'admin')" class="nav-item">
           <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
@@ -36,13 +31,13 @@
   <el-dialog align="center" :visible.sync="UpdateRateDialogVisible" width="900px">
       <el-form :inline="true" align="center" ref="rate" :model="rate" :rules="rules">
 
-          <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:25% ></el-input></el-form-item>
-          <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:25%></el-input></el-form-item>
-          <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:25%></el-input></el-form-item>
+          <el-form-item prop="x1_cash" >X1: &nbsp;&nbsp;&nbsp;Cash : <el-input v-model.number="rate.x1_cash" style=width:60% ></el-input></el-form-item>
+          <el-form-item prop="x1_cheque" >Cheque : <el-input  v-model.number="rate.x1_cheque" style=width:60%></el-input></el-form-item>
+          <el-form-item prop="x1_ba">BA : <el-input v-model.number="rate.x1_ba" style=width:60%></el-input></el-form-item>
           <br>
-          <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:25% ></el-input></el-form-item>
-          <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:25%></el-input></el-form-item>
-          <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:25%></el-input></el-form-item>
+          <el-form-item prop="x2_cash" >X2: &nbsp;&nbsp;&nbsp;Cash : <el-input  v-model.number="rate.x2_cash" style=width:60% ></el-input></el-form-item>
+          <el-form-item prop="x2_cheque" >Cheque : <el-input  v-model.number="rate.x2_cheque" style=width:60%></el-input></el-form-item>
+          <el-form-item prop="x2_ba" >BA : <el-input  v-model.number="rate.x2_ba" style=width:60%></el-input></el-form-item>
       </el-form>
       <br>
       <div align="center">
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 5e6a1e1f..b76395b8 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -17,9 +17,36 @@
           <locale-dropdown/>
         </ul>
         <template v-if="user">
-          
-          
-      
+          <!-- notification here -->
+          <el-dropdown trigger="click">
+              <el-badge :value="bellBadge > 0 ? bellBadge : ''" class="item">
+                <el-button icon="el-icon-bell" circle></el-button>
+              </el-badge>
+              <el-dropdown-menu slot="dropdown">
+                <div id="notification">
+                  <div v-for="(item,index) in notification">
+                    <a v-on:click.prevent='readNotification(item.id);navigateTo(item.link)'>
+                      <el-dropdown-item>
+                        <b v-if="item.is_read == 0">
+                          {{item.detail}}
+                        </b>
+                        <span v-else >
+                          {{item.detail}}
+                        </span>
+                        <br/>
+                        <span class="opacity80">
+                          {{item.time_interval}}
+                        </span>
+                      </el-dropdown-item>
+                    </a>
+                  </div>
+                </div>
+                <el-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateBooking(pagination.next_page_url)'>Load more</el-button>
+                <div v-else id="notification-load-more"></div>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+
           <ul class="navbar-nav ml-auto">
             <li class="nav-item dropdown">
               <a class="nav-link dropdown-toggle text-dark"
@@ -67,6 +94,32 @@
     height: 2rem;
     margin: -.375rem 0;
   }
+  .el-dropdown-menu{
+  height: 50%;
+}
+#notification{
+  overflow-y: scroll;
+  overflow-x: hidden;
+  max-height: 100%;
+}
+#notification-load-more{
+  position: absolute;
+  width: 100%;
+  min-height: 20px;
+  background: white;
+  border: 1px solid #dcdfe6;
+}
+.el-dropdown-menu__item {
+  line-height: 26px;
+}
+.opacity80{
+  opacity: 0.8 ;
+}
+::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* make scrollbar transparent */
+}
+
 </style>
 
 <script>