chore: snapshot notifications hardening and css/docs alignment
This commit is contained in:
@@ -5,10 +5,16 @@
|
||||
* notification list rendering, mark-read and dismiss actions.
|
||||
*/
|
||||
|
||||
import { telemetry } from '../../../../js/core/app-telemetry.js';
|
||||
import { getAppBase } from '../../../../js/pages/app-list-utils.js';
|
||||
|
||||
const POLL_INTERVAL_MS = 60_000;
|
||||
const TYPE_ICONS = {
|
||||
'user.created': 'bi-person-plus',
|
||||
'user.deleted': 'bi-person-dash',
|
||||
'user.activated': 'bi-person-check',
|
||||
'user.deactivated': 'bi-person-x',
|
||||
'user.assignment_changed': 'bi-diagram-3',
|
||||
'system': 'bi-gear',
|
||||
};
|
||||
|
||||
@@ -47,6 +53,8 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
const details = root.querySelector('[data-notification-bell]');
|
||||
const dropdown = root.querySelector('[data-notification-dropdown]');
|
||||
if (!details || !dropdown) return { destroy() {} };
|
||||
const appBase = getAppBase();
|
||||
const endpoint = (path) => new URL(path, appBase).toString();
|
||||
|
||||
const badge = details.querySelector('[data-notification-badge]');
|
||||
const list = dropdown.querySelector('[data-notification-list]');
|
||||
@@ -109,15 +117,34 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
`<button type="button" class="app-notification-item__action-btn" data-action="dismiss" title="${escapeHtml(dropdown.dataset.labelDismiss || '')}"><i class="bi bi-x"></i></button>` +
|
||||
`</div>`;
|
||||
|
||||
// Click on item navigates if link exists
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
if (n.link) {
|
||||
// Keyboard + click navigation for items with a link
|
||||
if (n.link) {
|
||||
item.classList.add('app-notification-item--link');
|
||||
item.setAttribute('role', 'link');
|
||||
item.setAttribute('tabindex', '0');
|
||||
|
||||
const navigate = () => {
|
||||
if (n.is_read === 0) markRead(n.id);
|
||||
const base = document.querySelector('base')?.getAttribute('href') || '/';
|
||||
window.location.href = base + n.link;
|
||||
}
|
||||
}, { signal });
|
||||
window.location.href = endpoint(String(n.link));
|
||||
};
|
||||
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
navigate();
|
||||
}, { signal });
|
||||
|
||||
item.addEventListener('keydown', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
navigate();
|
||||
}
|
||||
}, { signal });
|
||||
} else {
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
}, { signal });
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
item.addEventListener('click', (e) => {
|
||||
@@ -135,21 +162,33 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
// --- API ---
|
||||
async function loadNotifications() {
|
||||
try {
|
||||
const data = await fetchJson('notifications/list-data', { signal });
|
||||
const data = await fetchJson(endpoint('notifications/list-data'), { signal });
|
||||
if (data.ok) {
|
||||
renderNotifications(data.notifications || []);
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: load failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'load' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function pollUnreadCount() {
|
||||
try {
|
||||
const data = await fetchJson('notifications/unread-count-data', { signal });
|
||||
const data = await fetchJson(endpoint('notifications/unread-count-data'), { signal });
|
||||
if (data.ok) {
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: poll failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'poll' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function markRead(id) {
|
||||
@@ -159,7 +198,7 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
body.set('id', String(id));
|
||||
if (csrf.key) body.set(csrf.key, csrf.token);
|
||||
|
||||
const data = await fetchJson('notifications/mark-read-data', {
|
||||
const data = await fetchJson(endpoint('notifications/mark-read-data'), {
|
||||
method: 'POST',
|
||||
body,
|
||||
signal,
|
||||
@@ -168,7 +207,13 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
if (details.open) loadNotifications();
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: mark-read failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'mark-read' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function markAllRead() {
|
||||
@@ -178,7 +223,7 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
body.set('all', '1');
|
||||
if (csrf.key) body.set(csrf.key, csrf.token);
|
||||
|
||||
const data = await fetchJson('notifications/mark-read-data', {
|
||||
const data = await fetchJson(endpoint('notifications/mark-read-data'), {
|
||||
method: 'POST',
|
||||
body,
|
||||
signal,
|
||||
@@ -187,7 +232,13 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
if (details.open) loadNotifications();
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: mark-all-read failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'mark-all-read' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function dismiss(id) {
|
||||
@@ -197,7 +248,7 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
body.set('id', String(id));
|
||||
if (csrf.key) body.set(csrf.key, csrf.token);
|
||||
|
||||
const data = await fetchJson('notifications/delete-data', {
|
||||
const data = await fetchJson(endpoint('notifications/delete-data'), {
|
||||
method: 'POST',
|
||||
body,
|
||||
signal,
|
||||
@@ -212,7 +263,13 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: dismiss failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'dismiss' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// --- Events ---
|
||||
|
||||
Reference in New Issue
Block a user