mirror of
https://gitlab.com/omair-personal/exchange.git
synced 2026-08-19 04:24:08 +00:00
added vue time ago component
added custom field for booking updated notification updated fetch notification on frontend
This commit is contained in:
Jack Goh
@@ -97,8 +97,11 @@ class BookingController extends Controller
|
||||
$booking->status_desc = $status_desc;
|
||||
$booking->marking = $booking->user->marking;
|
||||
}
|
||||
|
||||
$notif_details = "Booking updated";
|
||||
$notif_link = "booking/2004/transfer";
|
||||
|
||||
$user->notify(new BookingUpdated($booking));
|
||||
$user->notify(new BookingUpdated($notif_details, $notif_link));
|
||||
|
||||
return $bookings;
|
||||
}
|
||||
@@ -190,8 +193,7 @@ class BookingController extends Controller
|
||||
->where('term', '!=', 'x2_cheque')
|
||||
->where('term', '!=', 'x2_ba')
|
||||
->where('term', '!=', 'x2_cash');
|
||||
})
|
||||
|
||||
})
|
||||
->orderby('updated_at','desc')
|
||||
->paginate(10);
|
||||
|
||||
|
||||
@@ -24,6 +24,7 @@ class UserController extends Controller
|
||||
|
||||
public function notifications()
|
||||
{
|
||||
return auth()->user()->unreadNotifications()->limit(5)->get()->toArray();
|
||||
$notifications = auth()->user()->unreadNotifications()->limit(5)->get();
|
||||
return response()->json(['notifications'=>$notifications], 200);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,16 +13,18 @@ use App\Booking;
|
||||
class BookingUpdated extends Notification
|
||||
{
|
||||
use Queueable;
|
||||
protected $booking;
|
||||
protected $details;
|
||||
protected $link;
|
||||
|
||||
/**
|
||||
* Create a new notification instance.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function __construct(Booking $booking)
|
||||
public function __construct($details, $link)
|
||||
{
|
||||
$this->booking = $booking;
|
||||
$this->details = $details;
|
||||
$this->link = $link;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -36,24 +38,11 @@ class BookingUpdated extends Notification
|
||||
return ['database', 'broadcast'];
|
||||
}
|
||||
|
||||
// /**
|
||||
// * Get the mail representation of the notification.
|
||||
// *
|
||||
// * @param mixed $notifiable
|
||||
// * @return \Illuminate\Notifications\Messages\MailMessage
|
||||
// */
|
||||
// public function toMail($notifiable)
|
||||
// {
|
||||
// return (new MailMessage)
|
||||
// ->line('The introduction to the notification.')
|
||||
// ->action('Notification Action', url('/'))
|
||||
// ->line('Thank you for using our application!');
|
||||
// }
|
||||
|
||||
public function toDatabase($notifiable)
|
||||
{
|
||||
return [
|
||||
'booking_id' => $this->booking->id
|
||||
'details' => $this->details,
|
||||
'link' => $this->link
|
||||
];
|
||||
}
|
||||
|
||||
@@ -66,14 +55,16 @@ class BookingUpdated extends Notification
|
||||
public function toArray($notifiable)
|
||||
{
|
||||
return [
|
||||
'booking' => $this->booking,
|
||||
'details' => $this->details,
|
||||
'link' => $this->link
|
||||
];
|
||||
}
|
||||
|
||||
public function toBroadcast($notifiable)
|
||||
{
|
||||
return new BroadcastMessage([
|
||||
'booking' => $this->booking,
|
||||
'details' => $this->details,
|
||||
'link' => $this->link
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+2187
-2011
File diff suppressed because it is too large
Load Diff
@@ -38,6 +38,7 @@
|
||||
"vue-loading-spinner": "^1.0.11",
|
||||
"vue-meta": "^1.4.4",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-timeago": "^5.0.0",
|
||||
"vuex": "^3.0.1",
|
||||
"vuex-router-sync": "^5.0.0"
|
||||
},
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"/js/lang-zh-CN.1eaced19dec8880e8788.js": "/js/lang-zh-CN.1eaced19dec8880e8788.js",
|
||||
"/js/lang-es.8f478e6e7ba5b47cb57f.js": "/js/lang-es.8f478e6e7ba5b47cb57f.js",
|
||||
"/js/lang-en.118567ba566d80e1464a.js": "/js/lang-en.118567ba566d80e1464a.js",
|
||||
"/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/app.js": "/js/app.js",
|
||||
"/css/app.css": "/css/app.css"
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import router from '~/router'
|
||||
import i18n from '~/plugins/i18n'
|
||||
import App from '~/components/App'
|
||||
import ElementUI from 'element-ui'
|
||||
import VueTimeago from 'vue-timeago'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
|
||||
@@ -32,6 +33,18 @@ const config = {
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.use(ElementUI, { locale })
|
||||
|
||||
Vue.use(VueTimeago, {
|
||||
name: 'Timeago', // Component name, `Timeago` by default
|
||||
locale: 'en', // Default locale
|
||||
// We use `date-fns` under the hood
|
||||
// So you can use all locales from it
|
||||
locales: {
|
||||
'zh-CN': require('date-fns/locale/zh_cn'),
|
||||
'ja': require('date-fns/locale/ja'),
|
||||
}
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
i18n,
|
||||
|
||||
@@ -12,25 +12,32 @@
|
||||
</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)'>
|
||||
<div v-if="notifications">
|
||||
<div v-for="item in notifications" :key="item">
|
||||
<a href="#">
|
||||
<el-dropdown-item>
|
||||
<b v-if="item.is_read == 0">
|
||||
{{item.detail}}
|
||||
</b>
|
||||
<span v-else >
|
||||
<!-- <b v-if="item.is_read == 0">
|
||||
{{item.detail}}
|
||||
asd
|
||||
</b> -->
|
||||
<span >
|
||||
{{item.data.details}}
|
||||
|
||||
</span>
|
||||
<br/>
|
||||
<span class="opacity80">
|
||||
{{item.time_interval}}
|
||||
<timeago :datetime="item.created_at"></timeago>
|
||||
</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>
|
||||
<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-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
@@ -94,23 +101,25 @@ import Echo from "laravel-echo"
|
||||
import Pusher from "pusher-js"
|
||||
import store from '~/store'
|
||||
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LocaleDropdown
|
||||
LocaleDropdown,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
appName: window.config.appName,
|
||||
notification:[],
|
||||
//loadingNotification:false,
|
||||
bellBadge : 0,
|
||||
unread_message_length:0,
|
||||
url: '/api/notification/user',
|
||||
pagination: [],
|
||||
notifications: null,
|
||||
}),
|
||||
mounted () {
|
||||
if (this.user){
|
||||
this.listen()
|
||||
this.listenNotification()
|
||||
this.fetchNotification()
|
||||
}
|
||||
},
|
||||
computed: mapGetters({
|
||||
@@ -124,9 +133,9 @@ export default {
|
||||
// Redirect to login.
|
||||
this.$router.push({ name: 'login' });
|
||||
},
|
||||
test(){
|
||||
fetchNotification(){
|
||||
axios.get('api/notifications').then(response => {
|
||||
//console.log(response)
|
||||
this.notifications = response.data.notifications
|
||||
})
|
||||
},
|
||||
|
||||
@@ -188,7 +197,7 @@ export default {
|
||||
},
|
||||
|
||||
// notification with pusher
|
||||
listen(){
|
||||
listenNotification(){
|
||||
window.Echo = new Echo({
|
||||
broadcaster: 'pusher',
|
||||
key: window.config.pusherUrl,
|
||||
@@ -245,9 +254,6 @@ export default {
|
||||
height: 2rem;
|
||||
margin: -.375rem 0;
|
||||
}
|
||||
.el-dropdown-menu{
|
||||
height: 50%;
|
||||
}
|
||||
#notification{
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
Reference in New Issue
Block a user