cief/exchange
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange.git synced 2026-08-19 04:14:04 +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() public function notifications()
{ {
$notifications = auth()->user()->unreadNotifications()->limit(5)->get(); $notifications = auth()->user()->unreadNotifications()->paginate(10);
return response()->json(['notifications'=> $notifications], 200); 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-zh-CN.8f24b899bd8647b112ca.js": "/js/lang-zh-CN.8f24b899bd8647b112ca.js",
"/js/lang-es.0496a0ac8cc229ecb44c.js": "/js/lang-es.0496a0ac8cc229ecb44c.js", "/js/lang-es.39c652b0ae93bea24dc3.js": "/js/lang-es.39c652b0ae93bea24dc3.js",
"/js/lang-en.aa3b7e1f6270ab73c0db.js": "/js/lang-en.aa3b7e1f6270ab73c0db.js", "/js/lang-en.ba5dc1086fad676ee230.js": "/js/lang-en.ba5dc1086fad676ee230.js",
"/js/app.js": "/js/app.js", "/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css" "/css/app.css": "/css/app.css"
} }
resources/assets/js/components/Navbar.vue
+30 -50
View File
@@ -12,21 +12,21 @@
</el-badge> </el-badge>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<div id="notification"> <div id="notification">
<div v-if="notifications"> <div v-if="notifications" v-loading="loading">
<div v-for="(idx,item) in notifications" :key="idx.id"> <div v-for="(value, key) in notifications" :key="key.id">
<el-dropdown-item> <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"> <!-- <b v-if="item.is_read == 0">
{{item.detail}} {{item.detail}}
asd asd
</b> --> </b> -->
<span > <span >
{{item.data.details}} {{value.data.details}}
</span> </span>
<br/> <br/>
<span class="opacity80"> <span class="opacity80">
<timeago :datetime="item.created_at"></timeago> <timeago :datetime="value.created_at"></timeago>
</span> </span>
</a> </a>
</el-dropdown-item> </el-dropdown-item>
@@ -37,8 +37,7 @@
<div v-else>There are no notifications.</div> <div v-else>There are no notifications.</div>
</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> <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>
<div v-else id="notification-load-more"></div> -->
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</template> </template>
@@ -113,12 +112,13 @@ export default {
//loadingNotification:false, //loadingNotification:false,
bellBadge : 0, bellBadge : 0,
unread_message_length:0, unread_message_length:0,
url: '/api/notification/user', loadMoreNotificationUrl: null,
pagination: [], pagination: [],
notifications: null, notifications: null,
loading: true,
}), }),
mounted () { mounted () {
if (this.user){ if (this.user){
this.listenNotification() this.listenNotification()
this.fetchNotification() this.fetchNotification()
} }
@@ -136,37 +136,11 @@ export default {
}, },
fetchNotification(){ fetchNotification(){
axios.get('api/notifications').then(response => { 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){ makePagination(data){
let pagination ={ let pagination ={
current_page: data.current_page, current_page: data.current_page,
@@ -176,24 +150,30 @@ export default {
}; };
this.pagination = pagination; this.pagination = pagination;
}, },
fetchPaginateBooking(url) { fetchPaginateNotification(url) {
this.url = url; this.loading = true
this.loadMoreNotificationUrl = url
//this.loadingNotification=true; //this.loadingNotification=true;
if(this.url !== null){ if(this.url !== null){
axios axios
.get(url) .get(url)
.then((response) => { .then((response) => {
this.loadingNotification=false; //this.loadingNotification=false;
this.notification = this.notification.concat(response.data.message.data); this.notifications = response.data.notifications.data;
this.bellBadge = response.data.unread_message.length; //this.bellBadge = response.data.unread_message.length;
this.makePagination(response.data.message); this.makePagination(response.data.notifications);
console.log(this.notification); this.loading = false
}).catch((error) => { }).catch((error) => {
console.log(error) this.$message({
this.$router.push({ showClose: true,
name: 'notfound' message: error.response.data.message,
}) type: 'Error fetching notifications',
}) duration: 10000
});
})
}
else{
this.pagination = null;
} }
}, },