mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/shipping-portal.git
synced 2026-08-27 16:34:13 +00:00
edmondlang
98 lines
5.7 KiB
Vue
98 lines
5.7 KiB
Vue
<template>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="btn-group">
|
|
<i class="fa fa-bell fs-18 m-t-5 muted pointer" :class="{'text-primary' : isClicked}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @click="openNotification()"></i>
|
|
<div class="b-rad-md dropdown-menu dropdown-menu-right p-l-15 p-b-15 p-r-15 p-t-0" style="width: 100vw; height: 100vh; background: transparent !important;" @click="openNotification()">
|
|
<div class="row shadow" style="width: 320px; position: absolute; top: 50px; right: 50px; background: white!important;">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="bg-master-lighter col p-l-10 p-l-10 p-t-10 bg-white text-center">
|
|
<p>Notification Center</p>
|
|
</div>
|
|
</div>
|
|
<loading-component style="height: 200px; top: 0;" key="1" color="primary" v-show="isLoading"></loading-component>
|
|
<div class="row" :class="{'h-100' : notificationsLength >= 5}" v-show="!isLoading" style="max-height: 400px; ">
|
|
<div class="col page-container overflow-hidden">
|
|
<div class="row b-b b-grey bg-primary-lighter-hover pointer w-100 m-l-0 m-r-0" v-for="(notification, index) in notifications">
|
|
<div class="col-auto justify-content-center align-items-center d-flex hide">
|
|
<div>
|
|
<i class="fa fa-check-circle fs-20 p-l-5 text-success"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col padding-10 p-l-15 p-r-15">
|
|
<p class="bold m-b-5 lh-16">{{ notification.title }}</p>
|
|
<p class="fs-9 m-b-0 lh-10">{{ notification.description }}</p>
|
|
<p class="fs-9 m-b-0 m-t-10 lh-10">{{ notification.long_ago }}</p>
|
|
</div>
|
|
<div class="col-auto justify-content-center align-items-center d-none" :class="{'d-flex' : index === 0}">
|
|
<div>
|
|
<i class="fa fa-circle fs-10 text-primary"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-center m-t-50 m-b-50" v-if="notificationsLength === 0" v-show="!isLoading">
|
|
<div class="col">
|
|
<div class="row align-items-center justify-content-center hint-text">
|
|
<div class="col-4 hint-text"><img src="/images/not-found-illustration.png" class="w-100 hint-text"/></div>
|
|
</div>
|
|
<div class="row text-center">
|
|
<div class="col">
|
|
<div class="row m-t-20">
|
|
<div class="col">
|
|
<p class="all-caps no-margin fs-11" style="letter-spacing: 2px;">Nothing To Show Here</p>
|
|
</div>
|
|
</div>
|
|
<div class="row m-t-5 align-items-center justify-content-center hide">
|
|
<div class="col">
|
|
<small class="fs-9 muted all-caps font-lato" style="letter-spacing: 2px">There is no results found.</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row b-t muted">
|
|
<div class="col p-l-10 p-l-10 p-t-10 m-b-10 bg-white text-center">
|
|
<a href="#">View All Notifications</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
|
export default {
|
|
data(){
|
|
return {
|
|
isLoading: true,
|
|
error: '',
|
|
notifications: null,
|
|
isClicked: false,
|
|
notificationsLength: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
openNotification(){
|
|
this.isClicked === false ? this.fetchNotification() : '';
|
|
this.isClicked = !this.isClicked;
|
|
},
|
|
fetchNotification(){
|
|
this.isLoading = true;
|
|
this.submit(route('notifications.list'), 'get', this.section, false, false)
|
|
},
|
|
successHandler(response){
|
|
this.isLoading = false;
|
|
this.notifications = response.payload.data;
|
|
this.notificationsLength = response.payload.data.length;
|
|
},
|
|
},
|
|
mixins: [ModalFormHandler]
|
|
}
|
|
</script> |