scinote-web/app/javascript/vue/navigation/notifications/notification_item.vue

51 lines
1.8 KiB
Vue

<template>
<div class="sci-navigation--notificaitons-flyout-notification">
<div class="sci-navigation--notificaitons-flyout-notification-icon" :class="notification.type_of">
<i class="fas" :class="icon"></i>
</div>
<div class="sci-navigation--notificaitons-flyout-notification-date">
{{ notification.created_at }}
</div>
<div class="sci-navigation--notificaitons-flyout-notification-title"
v-html="notification.title"
:data-seen="notification.checked"></div>
<div v-if="notification.type_of !== 'system_message'" v-html="notification.message" class="sci-navigation--notificaitons-flyout-notification-message"></div>
<a v-else @click="showSystemNotification()" class="sci-navigation--notificaitons-flyout-notification-message" data-notification="system">{{ i18n.t('nav.notifications.read_more') }}</a>
</div>
</template>
<script>
export default {
name: 'NotificationItem',
props: {
notification: Object
},
computed: {
icon() {
switch(this.notification.type_of) {
case 'deliver':
return 'fa-truck';
case 'system_message':
return 'fa-gift';
case 'assignment':
return 'fa-list-alt';
case 'recent_changes':
return 'fa-list-alt';
}
}
},
methods: {
showSystemNotification() {
$.get(this.notification.action_url, (data) => {
let systemNotificationModal = $('#manage-module-system-notification-modal');
let systemNotificationModalBody = systemNotificationModal.find('.modal-body');
let systemNotificationModalTitle = systemNotificationModal.find('#manage-module-system-notification-modal-label');
systemNotificationModalBody.html(data.modal_body);
systemNotificationModalTitle.text(data.modal_title);
systemNotificationModal.modal('show');
});
}
}
}
</script>