mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git
synced 2026-08-24 14:54:38 +00:00
refactor navbar code
This commit is contained in:
Jack Goh
@@ -1,93 +1,191 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white">
|
||||
<div class="container">
|
||||
<router-link :to="{ name: user ? 'home' : 'welcome' }" class="navbar-brand">
|
||||
{{ appName }}
|
||||
</router-link>
|
||||
< template >
|
||||
<
|
||||
nav class = "navbar navbar-expand-lg navbar-light bg-white" >
|
||||
<
|
||||
div class = "container" >
|
||||
<
|
||||
router - link: to = "{ name: user ? 'home' : 'welcome' }"
|
||||
class = "navbar-brand" > {
|
||||
{
|
||||
appName
|
||||
}
|
||||
} <
|
||||
/router-link>
|
||||
|
||||
<template v-if="user">
|
||||
<el-dropdown trigger="click" align="right">
|
||||
<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 in notification" :key="item">
|
||||
<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>
|
||||
</template>
|
||||
<
|
||||
template v -
|
||||
if = "user" >
|
||||
<
|
||||
el - dropdown trigger = "click"
|
||||
align = "right" >
|
||||
<
|
||||
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 in notification": key = "item" >
|
||||
<
|
||||
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> <
|
||||
/template>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
|
||||
<span class="navbar-toggler-icon"/>
|
||||
</button>
|
||||
<
|
||||
button class = "navbar-toggler"
|
||||
type = "button"
|
||||
data - toggle = "collapse"
|
||||
data - target = "#navbarToggler"
|
||||
aria - controls = "navbarToggler"
|
||||
aria - expanded = "false" >
|
||||
<
|
||||
span class = "navbar-toggler-icon" / >
|
||||
<
|
||||
/button>
|
||||
|
||||
<div id="navbarToggler" class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<locale-dropdown/>
|
||||
</ul>
|
||||
<
|
||||
div id = "navbarToggler"
|
||||
class = "collapse navbar-collapse" >
|
||||
<
|
||||
ul class = "navbar-nav ml-auto" >
|
||||
<
|
||||
locale - dropdown / >
|
||||
<
|
||||
/ul>
|
||||
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<!--Authenticated -->
|
||||
<template v-if="user">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle text-dark"
|
||||
href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
|
||||
{{ user.name }}
|
||||
</a>
|
||||
<div class="dropdown-menu">
|
||||
<router-link :to="{ name: 'settings.profile' }" class="dropdown-item pl-3">
|
||||
<fa icon="cog" fixed-width/>
|
||||
{{ $t('settings') }}
|
||||
</router-link>
|
||||
<
|
||||
ul class = "navbar-nav ml-auto" >
|
||||
<!--Authenticated -->
|
||||
<
|
||||
template v -
|
||||
if = "user" >
|
||||
<
|
||||
li class = "nav-item dropdown" >
|
||||
<
|
||||
a class = "nav-link dropdown-toggle text-dark"
|
||||
href = "#"
|
||||
role = "button"
|
||||
data - toggle = "dropdown"
|
||||
aria - haspopup = "true"
|
||||
aria - expanded = "false" >
|
||||
<
|
||||
img: src = "user.photo_url"
|
||||
class = "rounded-circle profile-photo mr-1" > {
|
||||
{
|
||||
user.name
|
||||
}
|
||||
} <
|
||||
/a> <
|
||||
div class = "dropdown-menu" >
|
||||
<
|
||||
router - link: to = "{ name: 'settings.profile' }"
|
||||
class = "dropdown-item pl-3" >
|
||||
<
|
||||
fa icon = "cog"
|
||||
fixed - width / > {
|
||||
{
|
||||
$t('settings')
|
||||
}
|
||||
} <
|
||||
/router-link>
|
||||
|
||||
<div class="dropdown-divider"/>
|
||||
<a href="#" class="dropdown-item pl-3" @click.prevent="logout">
|
||||
<fa icon="sign-out-alt" fixed-width/>
|
||||
{{ $t('logout') }}
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<!-- Guest -->
|
||||
<template v-else>
|
||||
<li class="nav-item">
|
||||
<router-link :to="{ name: 'login' }" class="nav-link" active-class="active">
|
||||
{{ $t('login') }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<router-link :to="{ name: 'register' }" class="nav-link" active-class="active">
|
||||
{{ $t('register') }}
|
||||
</router-link>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
<
|
||||
div class = "dropdown-divider" / >
|
||||
<
|
||||
a href = "#"
|
||||
class = "dropdown-item pl-3"
|
||||
@click.prevent = "logout" >
|
||||
<
|
||||
fa icon = "sign-out-alt"
|
||||
fixed - width / > {
|
||||
{
|
||||
$t('logout')
|
||||
}
|
||||
} <
|
||||
/a> <
|
||||
/div> <
|
||||
/li> <
|
||||
/template>
|
||||
<!-- Guest -->
|
||||
<
|
||||
template v -
|
||||
else >
|
||||
<
|
||||
li class = "nav-item" >
|
||||
<
|
||||
router - link: to = "{ name: 'login' }"
|
||||
class = "nav-link"
|
||||
active - class = "active" > {
|
||||
{
|
||||
$t('login')
|
||||
}
|
||||
} <
|
||||
/router-link> <
|
||||
/li> <
|
||||
li class = "nav-item" >
|
||||
<
|
||||
router - link: to = "{ name: 'register' }"
|
||||
class = "nav-link"
|
||||
active - class = "active" > {
|
||||
{
|
||||
$t('register')
|
||||
}
|
||||
} <
|
||||
/router-link> <
|
||||
/li> <
|
||||
/template> <
|
||||
/ul> <
|
||||
/div> <
|
||||
/div> <
|
||||
/nav> <
|
||||
/template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
<
|
||||
script >
|
||||
import {
|
||||
mapGetters
|
||||
} from 'vuex'
|
||||
import LocaleDropdown from './LocaleDropdown'
|
||||
import axios from 'axios'
|
||||
import Echo from "laravel-echo"
|
||||
@@ -101,14 +199,14 @@ export default {
|
||||
|
||||
data: () => ({
|
||||
appName: window.config.appName,
|
||||
notification:[],
|
||||
notification: [],
|
||||
//loadingNotification:false,
|
||||
bellBadge : 0,
|
||||
unread_message_length:0,
|
||||
bellBadge: 0,
|
||||
unread_message_length: 0,
|
||||
url: '/api/notification/user',
|
||||
pagination: [],
|
||||
}),
|
||||
mounted () {
|
||||
mounted() {
|
||||
this.listen()
|
||||
this.test()
|
||||
},
|
||||
@@ -116,19 +214,21 @@ export default {
|
||||
user: 'auth/user'
|
||||
}),
|
||||
methods: {
|
||||
async logout(){
|
||||
async logout() {
|
||||
// Log out the user.
|
||||
await this.$store.dispatch('auth/logout');
|
||||
|
||||
// Redirect to login.
|
||||
this.$router.push({ name: 'login' });
|
||||
this.$router.push({
|
||||
name: 'login'
|
||||
});
|
||||
},
|
||||
test(){
|
||||
axios.get('api/notifications').then(response => {
|
||||
test() {
|
||||
axios.get('api/notifications').then(response => {
|
||||
//console.log(response)
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
// refreshNoti() {
|
||||
// axios.get(this.url).then(response => {
|
||||
// this.bookingTable = response.data.data
|
||||
@@ -156,8 +256,8 @@ export default {
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
makePagination(data){
|
||||
let pagination ={
|
||||
makePagination(data) {
|
||||
let pagination = {
|
||||
current_page: data.current_page,
|
||||
last_page: data.last_page,
|
||||
next_page_url: data.next_page_url,
|
||||
@@ -167,12 +267,11 @@ export default {
|
||||
},
|
||||
fetchPaginateBooking(url) {
|
||||
this.url = url;
|
||||
//this.loadingNotification=true;
|
||||
if(this.url !== null){
|
||||
if (this.url !== null) {
|
||||
axios
|
||||
.get(url)
|
||||
.then((response) => {
|
||||
this.loadingNotification=false;
|
||||
this.loadingNotification = false;
|
||||
this.notification = this.notification.concat(response.data.message.data);
|
||||
this.bellBadge = response.data.unread_message.length;
|
||||
this.makePagination(response.data.message);
|
||||
@@ -187,38 +286,25 @@ export default {
|
||||
},
|
||||
|
||||
// notification with pusher
|
||||
listen(){
|
||||
listen() {
|
||||
window.Echo = new Echo({
|
||||
broadcaster: 'pusher',
|
||||
key: window.config.pusherUrl,
|
||||
cluster: 'ap1',
|
||||
encrypted: true,
|
||||
authEndpoint: 'broadcasting/auth',
|
||||
auth: {
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + store.getters['auth/token'],
|
||||
},
|
||||
broadcaster: 'pusher',
|
||||
key: window.config.pusherUrl,
|
||||
cluster: 'ap1',
|
||||
encrypted: true,
|
||||
authEndpoint: 'broadcasting/auth',
|
||||
auth: {
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + store.getters['auth/token'],
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
window.Echo.private(`App.User.`+ this.user.id)
|
||||
.notification((notification) => {
|
||||
console.log(notification);
|
||||
});
|
||||
|
||||
// window.Echo.channel('private-App.User.' + this.user.id)
|
||||
// .listen('BroadcastNotificationCreated', response => {
|
||||
// if (! ('Notification' in window)) {
|
||||
// alert('Web Notification is not supported');
|
||||
// return;
|
||||
// }
|
||||
// console.log(response)
|
||||
|
||||
// });
|
||||
|
||||
window.Echo.private(`App.User.` + this.user.id)
|
||||
.notification((notification) => {
|
||||
console.log(notification);
|
||||
});
|
||||
},
|
||||
|
||||
// readNotification(notification_id){
|
||||
@@ -235,44 +321,44 @@ export default {
|
||||
// },
|
||||
navigateTo(nav) {
|
||||
window.location.href = nav;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
} <
|
||||
/script>
|
||||
|
||||
<style scoped>
|
||||
.profile-photo {
|
||||
width: 2rem;
|
||||
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;
|
||||
<
|
||||
style scoped >
|
||||
.profile - photo {
|
||||
width: 2 rem;
|
||||
height: 2 rem;
|
||||
margin: -.375 rem 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: 20 px;
|
||||
background: white;
|
||||
border: 1 px solid# dcdfe6;
|
||||
}
|
||||
.el - dropdown - menu__item {
|
||||
line - height: 26 px;
|
||||
}
|
||||
.opacity80 {
|
||||
opacity: 0.8;
|
||||
}::-webkit - scrollbar {
|
||||
width: 0 px;
|
||||
background: transparent; /* make scrollbar transparent */
|
||||
}
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
.item {
|
||||
margin - top: 10 px;
|
||||
margin - right: 40 px;
|
||||
} <
|
||||
/style>
|
||||
Reference in New Issue
Block a user