traxxx-web/components/header/notifications.vue

246 lines
4.1 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>
<ul class="notifs nolist">
<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"
>
<span class="notif-details">
New
<span
v-if="notif.matchedTags.length > 0"
class="notif-tags"
>{{ notif.matchedTags.map((tag) => tag.name).join(', ') }}</span>
scene
<span
v-if="notif.matchedActors.length > 0"
class="notif-actors"
>with {{ notif.matchedActors.map((actor) => actor.name).join(', ') }}&nbsp;</span>
<span
v-if="notif.matchedEntity"
class="notif-entities"
>for {{ notif.matchedEntity.name }}&nbsp;</span>
<span
v-if="notif.matchedExpressions.length > 0"
class="notif-entities"
>matching {{ notif.matchedExpressions.map((match) => match.expression).join(', ') }}</span>
</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>
</div>
</template>
<script setup>
import {
ref,
defineEmits,
onMounted,
inject,
} from 'vue';
import { get, patch } from '#/src/api.js';
import { formatDate } from '#/utils/format.js';
const pageContext = inject('pageContext');
const user = pageContext.user;
const notifications = ref([]);
const done = ref(true);
const emit = defineEmits(['unseen', 'addAlert']);
async function fetchNotifications() {
const res = await get(`/users/${user?.id}/notifications`);
notifications.value = res.notifications;
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;
height: 20rem;
max-width: 100%;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.notifs-header {
display: flex;
justify-content: space-between;
box-shadow: inset 0 0 3px var(--shadow-weak-30);
.icon {
fill: var(--shadow-strong-10);
&: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(--shadow-weak-40);
}
&:before {
width: 2.5rem;
flex-shrink: 0;
content: '•';
color: var(--shadow-weak-20);
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;
}
.notif-details {
padding: .5rem 0 .15rem 0;
box-sizing: border-box;
color: var(--shadow-strong);
font-weight: bold;
}
.notif-link {
overflow: hidden;
}
.notif-scene {
display: flex;
padding: .15rem 0 .5rem 0;
}
.notif-date {
flex-shrink: 0;
color: var(--shadow-strong-10);
&:after {
content: '•';
padding: 0 .5rem;
color: var(--shadow-weak-20);
}
}
.notif-thumb {
width: 5rem;
height: 3rem;
object-fit: cover;
}
</style>