mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-16 06:06:56 +08:00
45 lines
1.6 KiB
Vue
45 lines
1.6 KiB
Vue
<template>
|
|
<div class="sci-navigation--notificaitons-flyout-notification">
|
|
<div class="sci-navigation--notificaitons-flyout-notification-icon" :class="notification.attributes.type_of">
|
|
<i :class="icon"></i>
|
|
</div>
|
|
<div class="sci-navigation--notificaitons-flyout-notification-date">
|
|
{{ notification.attributes.created_at }}
|
|
</div>
|
|
<div class="sci-navigation--notificaitons-flyout-notification-title"
|
|
v-html="notification.attributes.title"
|
|
:data-seen="notification.attributes.checked"></div>
|
|
<div v-html="notification.attributes.message" class="sci-navigation--notificaitons-flyout-notification-message"></div>
|
|
<div v-if="notification.attributes.breadcrumbs" class="flex items-center flex-wrap gap-0.5">
|
|
<template v-for="(breadcrumb, index) in notification.attributes.breadcrumbs">
|
|
<div :key="index" class="flex items-center gap-0.5">
|
|
<i v-if="index > 0" class="sn-icon sn-icon-right"></i>
|
|
<a :href="breadcrumb.url" :title="breadcrumb.name" class="truncate max-w-[20ch] inline-block">{{ breadcrumb.name }}</a>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NotificationItem',
|
|
props: {
|
|
notification: Object
|
|
},
|
|
computed: {
|
|
icon() {
|
|
switch(this.notification.attributes.type_of) {
|
|
case 'deliver':
|
|
return 'fas fa-truck';
|
|
case 'assignment':
|
|
return 'fas fa-list-alt';
|
|
case 'recent_changes':
|
|
return 'fas fa-list-alt';
|
|
case 'deliver_error':
|
|
return 'sn-icon sn-icon-alert-warning';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|