added back notification bell at navigation bar

This commit is contained in:
Jack Goh
2018-07-31 15:38:08 +08:00
parent b7e65891f7
commit 33a502a378
2 changed files with 62 additions and 14 deletions
@@ -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">
+56 -3
View File
@@ -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>