Loading notifications async.
This commit is contained in:
parent
652c389840
commit
70882e0baf
|
|
@ -105,73 +105,10 @@
|
|||
</button>
|
||||
|
||||
<template #popper>
|
||||
<div class="menu">
|
||||
<div class="notifs-header">
|
||||
<h4 class="notifs-heading">Notifications</h4>
|
||||
|
||||
<div
|
||||
class="notifs-actions"
|
||||
>
|
||||
<Icon
|
||||
icon="stack-check"
|
||||
@click="markAllSeen"
|
||||
<Notifications
|
||||
@unseen="(count) => unseen = count"
|
||||
@add-alert="showAlertDialog = true"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-close-popper
|
||||
icon="plus3"
|
||||
@click="showAlertDialog = true"
|
||||
/>
|
||||
</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(', ') }} </span>
|
||||
|
||||
<span
|
||||
v-if="notif.matchedEntity"
|
||||
class="notif-entities"
|
||||
>for {{ notif.matchedEntity.name }} </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>
|
||||
</VDropdown>
|
||||
|
||||
|
|
@ -269,10 +206,10 @@ import {
|
|||
} from 'vue';
|
||||
|
||||
import navigate from '#/src/navigate.js';
|
||||
import { get, patch, del } from '#/src/api.js';
|
||||
import { formatDate } from '#/utils/format.js';
|
||||
import { del } from '#/src/api.js';
|
||||
// import getPath from '#/src/get-path.js';
|
||||
|
||||
import Notifications from '#/components/header/notifications.vue';
|
||||
import Settings from '#/components/settings/settings.vue';
|
||||
import AlertDialog from '#/components/alerts/create.vue';
|
||||
|
||||
|
|
@ -281,9 +218,7 @@ import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/
|
|||
const pageContext = inject('pageContext');
|
||||
|
||||
const user = pageContext.user;
|
||||
const notifications = ref(pageContext.notifications.notifications);
|
||||
const unseen = ref(pageContext.notifications.unseen);
|
||||
const done = ref(true);
|
||||
const unseen = ref(pageContext.meta.unseenNotifications);
|
||||
const query = ref(pageContext.urlParsed.search.q || '');
|
||||
const allowLogin = pageContext.env.allowLogin;
|
||||
const searchFocused = ref(false);
|
||||
|
|
@ -297,41 +232,6 @@ function search() {
|
|||
navigate('/search', { q: query.value }, { redirect: true });
|
||||
}
|
||||
|
||||
async function fetchNotifications() {
|
||||
const res = await get(`/users/${user?.id}/notifications`);
|
||||
|
||||
notifications.value = res.notifications;
|
||||
unseen.value = 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;
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
await del('/session');
|
||||
navigate('/login', null, { redirect: true });
|
||||
|
|
@ -514,119 +414,6 @@ function blurSearch(event) {
|
|||
fill: var(--shadow);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,245 @@
|
|||
<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(', ') }} </span>
|
||||
|
||||
<span
|
||||
v-if="notif.matchedEntity"
|
||||
class="notif-entities"
|
||||
>for {{ notif.matchedEntity.name }} </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>
|
||||
|
|
@ -6,6 +6,6 @@ export default {
|
|||
'urlParsed',
|
||||
'env',
|
||||
'user',
|
||||
'notifications',
|
||||
'meta',
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -145,12 +145,26 @@ export async function removeAlert(alertId, reqUser) {
|
|||
.delete();
|
||||
}
|
||||
|
||||
export async function fetchUnseenNotificationsCount(reqUser) {
|
||||
if (!reqUser) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rawUnseen = await knex('notifications')
|
||||
.select(knex.raw('count(id)'))
|
||||
.where('user_id', reqUser.id)
|
||||
.where('seen', false)
|
||||
.first();
|
||||
|
||||
return Number(rawUnseen.count);
|
||||
}
|
||||
|
||||
export async function fetchNotifications(reqUser, options = {}) {
|
||||
if (!reqUser) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const [notifications, rawUnseen] = await Promise.all([
|
||||
const [notifications, unseen] = await Promise.all([
|
||||
knex('notifications')
|
||||
.select(
|
||||
'notifications.*',
|
||||
|
|
@ -169,15 +183,10 @@ export async function fetchNotifications(reqUser, options = {}) {
|
|||
.limit(options.limit)
|
||||
.groupBy('notifications.id', 'alerts.id')
|
||||
.orderBy('created_at', 'desc'),
|
||||
knex('notifications')
|
||||
.select(knex.raw('count(id)'))
|
||||
.where('user_id', reqUser.id)
|
||||
.where('seen', false)
|
||||
.first(),
|
||||
fetchUnseenNotificationsCount(reqUser),
|
||||
]);
|
||||
|
||||
const scenes = await fetchScenesById(notifications.map((notification) => notification.scene_id));
|
||||
const unseen = Number(rawUnseen.count);
|
||||
|
||||
const curatedNotifications = notifications.map((notification) => {
|
||||
const scene = scenes.find((sceneX) => sceneX.id === notification.scene_id);
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ import {
|
|||
updateNotificationsApi,
|
||||
} from './alerts.js';
|
||||
|
||||
import { fetchNotifications } from '../alerts.js';
|
||||
import { fetchUnseenNotificationsCount } from '../alerts.js';
|
||||
|
||||
import initLogger from '../logger.js';
|
||||
|
||||
|
|
@ -168,7 +168,7 @@ export default async function initServer() {
|
|||
router.get('/api/tags', fetchTagsApi);
|
||||
|
||||
router.get('*', async (req, res, next) => {
|
||||
const notifications = await fetchNotifications(req.user, { limit: 20 });
|
||||
const unseenNotifications = await fetchUnseenNotificationsCount(req.user);
|
||||
|
||||
const pageContextInit = {
|
||||
urlOriginal: req.originalUrl,
|
||||
|
|
@ -191,7 +191,9 @@ export default async function initServer() {
|
|||
maxAggregateSize: config.database.manticore.maxAggregateSize,
|
||||
media: config.media,
|
||||
},
|
||||
notifications,
|
||||
meta: {
|
||||
unseenNotifications,
|
||||
},
|
||||
};
|
||||
|
||||
const pageContext = await renderPage(pageContextInit);
|
||||
|
|
|
|||
Loading…
Reference in New Issue