traxxx-web/components/header/notifications.vue

280 lines
4.6 KiB
Vue
Raw Normal View History

2024-05-28 01:48:50 +00:00
<template>
<div class="menu">
<div class="notifs-header">
<h4 class="notifs-heading">Notifications</h4>
<div
class="notifs-actions"
>
<Icon
icon="stack-check"
@click="markAllSeen"
/>
<Icon
v-close-popper
icon="plus3"
@click="emit('addAlert')"
/>
</div>
</div>
2024-05-28 03:49:28 +00:00
<ul
v-if="done"
class="notifs nolist"
>
2024-05-28 01:48:50 +00:00
<li
v-for="notif in notifications"
:key="notif.id"
class="notif"
:class="{ unseen: !notif.isSeen }"
@click="markSeen(notif)"
>
<a
:href="`/scene/${notif.scene.id}/${notif.scene.slug}`"
target="_blank"
class="notif-body notif-link nolink"
>
2024-05-28 03:49:28 +00:00
<span class="notif-trigger">
<span class="notif-details">
New
2024-05-28 01:48:50 +00:00
2024-05-28 03:49:28 +00:00
<template
v-if="notif.matchedTags.length > 0"
>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</template>
2024-05-28 01:48:50 +00:00
2024-05-28 03:49:28 +00:00
scene
2024-05-28 01:48:50 +00:00
2024-05-28 03:49:28 +00:00
<template
v-if="notif.matchedActors.length > 0"
>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</template>
2024-05-28 01:48:50 +00:00
2024-05-28 03:49:28 +00:00
<template
v-if="notif.matchedEntity"
>for {{ notif.matchedEntity.name }}&nbsp;</template>
<template
v-if="notif.matchedExpressions.length > 0"
>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</template>
</span>
2024-05-28 01:48:50 +00:00
<span
2024-05-28 03:49:28 +00:00
v-if="notif.alertId"
class="notif-id"
title="Alert ID"
>#{{ notif.alertId }}</span>
2024-05-28 01:48:50 +00:00
</span>
<span class="notif-scene">
<span class="notif-date">{{ formatDate(notif.scene.effectiveDate, 'MMM d') }}</span>
<span class="notif-title ellipsis">{{ notif.scene.title }}</span>
</span>
</a>
</li>
</ul>
2024-05-28 03:49:28 +00:00
<Ellipsis
v-else
class="notifs loading"
/>
2024-05-28 01:48:50 +00:00
</div>
</template>
<script setup>
import {
ref,
defineEmits,
onMounted,
inject,
} from 'vue';
import { get, patch } from '#/src/api.js';
import { formatDate } from '#/utils/format.js';
2024-05-28 03:49:28 +00:00
import Ellipsis from '#/components/loading/ellipsis.vue';
2024-05-28 01:48:50 +00:00
const pageContext = inject('pageContext');
const user = pageContext.user;
const notifications = ref([]);
const done = ref(true);
const emit = defineEmits(['unseen', 'addAlert']);
async function fetchNotifications() {
2024-05-28 03:49:28 +00:00
done.value = false;
2024-05-28 01:48:50 +00:00
2024-05-28 03:49:28 +00:00
const res = await get(`/users/${user?.id}/notifications`);
2024-05-28 01:48:50 +00:00
notifications.value = res.notifications;
2024-05-28 03:49:28 +00:00
done.value = true;
2024-05-28 01:48:50 +00:00
emit('unseen', res.unseen);
}
async function markSeen(notif) {
if (notif.isSeen || !done.value) {
return;
}
done.value = false;
await patch(`/users/${user?.id}/notifications/${notif.id}`, {
seen: true,
});
await fetchNotifications();
done.value = true;
}
async function markAllSeen() {
done.value = false;
await patch(`/users/${user?.id}/notifications`, {
seen: true,
});
await fetchNotifications();
done.value = true;
}
onMounted(async () => {
await fetchNotifications();
});
</script>
<style scoped>
.notifs {
width: 30rem;
2024-05-28 03:49:28 +00:00
max-height: 20rem;
2024-05-28 01:48:50 +00:00
max-width: 100%;
2024-05-28 03:49:28 +00:00
height: 100%;
2024-05-28 01:48:50 +00:00
overflow-y: auto;
overflow-x: hidden;
}
2024-05-28 03:49:28 +00:00
.loading {
display: flex;
justify-content: center;
}
2024-05-28 01:48:50 +00:00
.notifs-header {
display: flex;
justify-content: space-between;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--glass-strong-10);
2024-05-28 01:48:50 +00:00
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
}
.notifs-heading {
font-size: 1rem;
padding: .75rem 1rem;
margin: 0;
font-weight: normal;
}
.notifs-actions {
align-items: stretch;
.icon {
height: 100%;
padding: 0 .75rem;
&:last-child {
padding-right: 1rem;
}
}
}
.notif {
display: flex;
align-items: center;
width: 100%;
overflow: hidden;
&:not(:last-child) {
border-bottom: solid 1px var(--glass-weak-40);
2024-05-28 01:48:50 +00:00
}
&:before {
width: 2.5rem;
flex-shrink: 0;
content: '•';
color: var(--glass-weak-20);
2024-05-28 01:48:50 +00:00
text-align: center;
}
&.unseen:before {
color: var(--primary);
}
&.unseen:hover:before {
content: '✓';
}
}
.notif-body {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
box-sizing: border-box;
font-size: .9rem;
}
2024-05-28 03:49:28 +00:00
.notif-trigger {
display: flex;
justify-content: space-between;
padding: .5rem 0 .1rem 0;
2024-05-28 01:48:50 +00:00
box-sizing: border-box;
color: var(--glass-strong);
2024-05-28 01:48:50 +00:00
font-weight: bold;
}
2024-05-28 03:49:28 +00:00
.notif-details {
line-height: 1.25;
}
2024-05-28 01:48:50 +00:00
.notif-link {
overflow: hidden;
}
.notif-scene {
display: flex;
padding: .15rem 0 .5rem 0;
}
.notif-date {
flex-shrink: 0;
color: var(--glass-strong-10);
2024-05-28 01:48:50 +00:00
&:after {
content: '•';
padding: 0 .5rem;
color: var(--glass-weak-20);
2024-05-28 01:48:50 +00:00
}
}
.notif-thumb {
width: 5rem;
height: 3rem;
object-fit: cover;
}
2024-05-28 03:49:28 +00:00
.notif-id {
padding: 0 .5rem;
color: var(--glass-weak-10);
2024-05-28 03:49:28 +00:00
font-size: .9rem;
font-weight: normal;
}
2024-05-28 01:48:50 +00:00
</style>