omair/exchange
1
0
Fork 0
mirror of https://gitlab.com/omair-personal/exchange.git synced 2026-08-19 04:24:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated notification with pagination and loading indicator

Browse Source
This commit is contained in:
Jack Goh
2018-09-03 12:09:56 +08:00
parent 5cecb731f6
commit 467f924a30
3 changed files with 34 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Http/Controllers/UserController.php
+1 -1
View File
@@ -24,7 +24,7 @@ class UserController extends Controller
public function notifications()
{
$notifications = auth()->user()->unreadNotifications()->limit(5)->get();
$notifications = auth()->user()->unreadNotifications()->paginate(10);
return response()->json(['notifications'=> $notifications], 200);
}
}
public/mix-manifest.json
+3 -3
View File
@@ -1,7 +1,7 @@
{
"/js/lang-zh-CN.d58f1daf9ffad04a7e36.js": "/js/lang-zh-CN.d58f1daf9ffad04a7e36.js",
"/js/lang-es.0496a0ac8cc229ecb44c.js": "/js/lang-es.0496a0ac8cc229ecb44c.js",
"/js/lang-en.aa3b7e1f6270ab73c0db.js": "/js/lang-en.aa3b7e1f6270ab73c0db.js",
"/js/lang-zh-CN.8f24b899bd8647b112ca.js": "/js/lang-zh-CN.8f24b899bd8647b112ca.js",
"/js/lang-es.39c652b0ae93bea24dc3.js": "/js/lang-es.39c652b0ae93bea24dc3.js",
"/js/lang-en.ba5dc1086fad676ee230.js": "/js/lang-en.ba5dc1086fad676ee230.js",
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css"
}
resources/assets/js/components/Navbar.vue
+30 -50
View File
@@ -12,21 +12,21 @@
</el-badge>
<el-dropdown-menu slot="dropdown">
<div id="notification">
<div v-if="notifications">
<div v-for="(idx,item) in notifications" :key="idx.id">
<div v-if="notifications" v-loading="loading">
<div v-for="(value, key) in notifications" :key="key.id">
<el-dropdown-item>
<a v-on:click.prevent='navigateTo(item.data.link)'>
<a v-on:click.prevent='navigateTo(value.data.link)'>
<!-- <b v-if="item.is_read == 0">
{{item.detail}}
asd
</b> -->
<span >
{{item.data.details}}
{{value.data.details}}
</span>
<br/>
<span class="opacity80">
<timeago :datetime="item.created_at"></timeago>
<timeago :datetime="value.created_at"></timeago>
</span>
</a>
</el-dropdown-item>
@@ -37,8 +37,7 @@
<div v-else>There are no notifications.</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-button v-if="pagination.next_page_url != null" id="notification-load-more" v-on:click='fetchPaginateNotification(pagination.next_page_url)'>Load more</el-button>
</el-dropdown-menu>
</el-dropdown>
</template>
@@ -113,12 +112,13 @@ export default {
//loadingNotification:false,
bellBadge : 0,
unread_message_length:0,
url: '/api/notification/user',
loadMoreNotificationUrl: null,
pagination: [],
notifications: null,
loading: true,
}),
mounted () {
if (this.user){
if (this.user){
this.listenNotification()
this.fetchNotification()
}
@@ -136,37 +136,11 @@ export default {
},
fetchNotification(){
axios.get('api/notifications').then(response => {
this.notifications = response.data.notifications
this.notifications = response.data.notifications.data;
this.makePagination(response.data.notifications);
this.loading = false
})
},
// refreshNoti() {
// axios.get(this.url).then(response => {
// this.bookingTable = response.data.data
// this.notification = response.data.message.data;
// this.bellBadge = response.data.unread_message.length;
// this.makePagination(response.data.message);
// console.log(response.data);
// })
// },
// getNotification(url){
// this.notification = [];
// this.loadingNotification=true;
// axios
// .get(url)
// .then((response) => {
// this.loadingNotification=false;
// this.notification = response.data.message.data;
// this.bellBadge = response.data.unread_message.length;
// this.makePagination(response.data.message);
// console.log(response.data);
// }).catch((error) => {
// console.log(error)
// this.$router.push({
// name: 'notfound'
// })
// })
// },
makePagination(data){
let pagination ={
current_page: data.current_page,
@@ -176,24 +150,30 @@ export default {
};
this.pagination = pagination;
},
fetchPaginateBooking(url) {
this.url = url;
fetchPaginateNotification(url) {
this.loading = true
this.loadMoreNotificationUrl = url
//this.loadingNotification=true;
if(this.url !== null){
axios
.get(url)
.then((response) => {
this.loadingNotification=false;
this.notification = this.notification.concat(response.data.message.data);
this.bellBadge = response.data.unread_message.length;
this.makePagination(response.data.message);
console.log(this.notification);
//this.loadingNotification=false;
this.notifications = response.data.notifications.data;
//this.bellBadge = response.data.unread_message.length;
this.makePagination(response.data.notifications);
this.loading = false
}).catch((error) => {
console.log(error)
this.$router.push({
name: 'notfound'
})
})
this.$message({
showClose: true,
message: error.response.data.message,
type: 'Error fetching notifications',
duration: 10000
});
})
}
else{
this.pagination = null;
}
},