Apr 2 2026: implement notification settings matrix
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Notification Matrix{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<style>
|
||||
.matrix-wrap { max-width: 1100px; margin: 0 auto; }
|
||||
|
||||
/* ── Matrix table ── */
|
||||
.matrix-tbl { border-collapse: collapse; width: 100%; font-size: .82rem; }
|
||||
.matrix-tbl th, .matrix-tbl td {
|
||||
border: 1px solid #e2e8f0;
|
||||
padding: .35rem .55rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.matrix-tbl thead th {
|
||||
background: #1a1d23; color: #fff; font-weight: 600;
|
||||
text-align: center; white-space: nowrap;
|
||||
}
|
||||
.matrix-tbl thead th.event-col { text-align: left; }
|
||||
.matrix-tbl thead th.group-hdr {
|
||||
background: #2563eb; font-size: .75rem; letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.matrix-tbl tbody tr:nth-child(even) td { background: #f8fafc; }
|
||||
.matrix-tbl tbody tr:hover td { background: #eff6ff; }
|
||||
.matrix-tbl td.event-name { font-weight: 500; color: #1a1d23; white-space: nowrap; }
|
||||
.matrix-tbl td.check-cell { text-align: center; }
|
||||
|
||||
/* Checkbox styling */
|
||||
.matrix-check {
|
||||
width: 1.1rem; height: 1.1rem; cursor: pointer;
|
||||
accent-color: #2563eb;
|
||||
}
|
||||
/* Disabled row (event has no meaningful broadcast) */
|
||||
.matrix-tbl tr.implicit td { color: #94a3b8; }
|
||||
.matrix-tbl tr.implicit td.event-name { color: #64748b; font-style: italic; }
|
||||
|
||||
/* Custom emails cell */
|
||||
.custom-cell { min-width: 180px; }
|
||||
.custom-input {
|
||||
width: 100%; font-size: .75rem;
|
||||
border: 1px solid #e2e8f0; border-radius: 4px;
|
||||
padding: .2rem .4rem; color: #374151;
|
||||
background: #f8fafc;
|
||||
}
|
||||
.custom-input:focus {
|
||||
outline: none; border-color: #2563eb;
|
||||
box-shadow: 0 0 0 2px rgba(37,99,235,.15);
|
||||
}
|
||||
|
||||
/* Legend */
|
||||
.legend { font-size: .78rem; color: #64748b; }
|
||||
.legend span { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1rem; }
|
||||
|
||||
/* Implicit badge */
|
||||
.badge-implicit {
|
||||
font-size: .62rem; background: #f1f5f9; color: #64748b;
|
||||
border: 1px solid #e2e8f0; border-radius: 4px;
|
||||
padding: 1px 5px; vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="matrix-wrap mt-3">
|
||||
|
||||
{# ── Page header ── #}
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<div>
|
||||
<h4 class="mb-0"><i class="bi bi-grid-3x3-gap-fill text-primary me-2"></i>Notification Matrix</h4>
|
||||
<p class="text-muted mb-0 mt-1" style="font-size:.85rem;">
|
||||
Control which roles receive email notifications for each event.
|
||||
<strong>Assignee</strong>, <strong>followers</strong>, and <strong>customer portal</strong>
|
||||
recipients are handled automatically where marked.
|
||||
</p>
|
||||
</div>
|
||||
<a href="{{ url_for('auth.list_users') }}" class="btn btn-outline-secondary btn-sm">
|
||||
<i class="bi bi-arrow-left"></i> Back to Users
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# ── Legend ── #}
|
||||
<div class="legend mb-3 d-flex flex-wrap align-items-center">
|
||||
<span><input type="checkbox" checked disabled class="matrix-check"> Enabled by default</span>
|
||||
<span><input type="checkbox" disabled class="matrix-check"> Disabled by default</span>
|
||||
<span><span class="badge-implicit">implicit</span> Always notified — not controlled here</span>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('auth.notification_matrix') }}">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
|
||||
<div class="table-responsive shadow-sm rounded">
|
||||
<table class="matrix-tbl">
|
||||
<thead>
|
||||
{# Row 1: spanning group headers #}
|
||||
<tr>
|
||||
<th class="event-col" rowspan="2" style="min-width:200px;">Event</th>
|
||||
<th class="group-hdr" colspan="4">Internal Recipients</th>
|
||||
<th class="group-hdr" colspan="1">Customer</th>
|
||||
<th class="group-hdr" colspan="1">Custom Recipients</th>
|
||||
</tr>
|
||||
{# Row 2: individual role headers #}
|
||||
<tr>
|
||||
{% for role_key, role_label in matrix_roles if role_key != 'custom' and role_key != 'customer' %}
|
||||
<th style="min-width:80px;">{{ role_label }}</th>
|
||||
{% endfor %}
|
||||
<th style="min-width:80px;">Customer</th>
|
||||
<th style="min-width:200px;">Email addresses<br><span style="font-weight:400;font-size:.7rem;color:#94a3b8;">(comma-separated)</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for event_key, event_label in matrix_events.items() %}
|
||||
{% set event_state = state.get(event_key, {}) %}
|
||||
<tr>
|
||||
<td class="event-name">
|
||||
{{ event_label }}
|
||||
{# Show implicit labels where assignee/followers are always notified #}
|
||||
{% if event_key in ('issue_assigned', 'issue_reassigned', 'issue_unassigned',
|
||||
'issue_status', 'issue_comment') %}
|
||||
<span class="badge-implicit ms-1">assignee</span>
|
||||
{% endif %}
|
||||
{% if event_key == 'issue_follow_update' %}
|
||||
<span class="badge-implicit ms-1">followers</span>
|
||||
{% endif %}
|
||||
{% if event_key == 'sla_alert' %}
|
||||
<span class="badge-implicit ms-1">assignee</span>
|
||||
<span class="badge-implicit ms-1">followers</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
|
||||
{# Internal role checkboxes (admin, supervisor, inspector, project_manager) #}
|
||||
{% for role_key, _ in matrix_roles if role_key not in ('custom', 'customer') %}
|
||||
{% set row = event_state.get(role_key) %}
|
||||
{% if row is not none %}
|
||||
{% set checked = row.enabled %}
|
||||
{% else %}
|
||||
{% set checked = defaults.get((event_key, role_key), false) %}
|
||||
{% endif %}
|
||||
<td class="check-cell">
|
||||
<input type="checkbox"
|
||||
class="matrix-check"
|
||||
name="matrix_{{ event_key }}_{{ role_key }}"
|
||||
value="1"
|
||||
{% if checked %}checked{% endif %}>
|
||||
</td>
|
||||
{% endfor %}
|
||||
|
||||
{# Customer checkbox #}
|
||||
{% set cust_row = event_state.get('customer') %}
|
||||
{% if cust_row is not none %}
|
||||
{% set cust_checked = cust_row.enabled %}
|
||||
{% else %}
|
||||
{% set cust_checked = defaults.get((event_key, 'customer'), false) %}
|
||||
{% endif %}
|
||||
<td class="check-cell">
|
||||
<input type="checkbox"
|
||||
class="matrix-check"
|
||||
name="matrix_{{ event_key }}_customer"
|
||||
value="1"
|
||||
{% if cust_checked %}checked{% endif %}>
|
||||
</td>
|
||||
|
||||
{# Custom emails text input #}
|
||||
{% set custom_row = event_state.get('custom') %}
|
||||
{% if custom_row is not none %}
|
||||
{% set custom_val = custom_row.get_custom_emails() | join(', ') %}
|
||||
{% else %}
|
||||
{% set custom_val = '' %}
|
||||
{% endif %}
|
||||
<td class="custom-cell">
|
||||
<input type="text"
|
||||
class="custom-input"
|
||||
name="custom_{{ event_key }}"
|
||||
value="{{ custom_val }}"
|
||||
placeholder="e.g. ops@company.com, mgr@co.com">
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 d-flex gap-2 align-items-center">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<i class="bi bi-check2-circle me-1"></i>Save Matrix
|
||||
</button>
|
||||
<a href="{{ url_for('auth.notification_matrix') }}" class="btn btn-outline-secondary">
|
||||
Reset
|
||||
</a>
|
||||
<span class="text-muted ms-2" style="font-size:.8rem;">
|
||||
<i class="bi bi-info-circle me-1"></i>
|
||||
Changes take effect immediately for all subsequent notifications.
|
||||
</span>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{# ── Notes card ── #}
|
||||
<div class="card mt-4 border-0 bg-light">
|
||||
<div class="card-body py-2 px-3">
|
||||
<p class="mb-1" style="font-size:.8rem;">
|
||||
<strong>Internal:</strong> Admin, Supervisor, Inspector, and Project Manager users
|
||||
receive in-app notifications and emails based on their individual
|
||||
<a href="{{ url_for('notifications.preferences') }}">preference settings</a>.
|
||||
</p>
|
||||
<p class="mb-1" style="font-size:.8rem;">
|
||||
<strong>Customer:</strong> Customer-portal users are notified only for facilities
|
||||
they are assigned to via their project/facility assignments.
|
||||
</p>
|
||||
<p class="mb-0" style="font-size:.8rem;">
|
||||
<strong>Custom Recipients:</strong> Additional email addresses (e.g. external managers)
|
||||
receive a plain email. They do not get in-app notifications and are not affected
|
||||
by individual user preference settings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{% endblock %}
|
||||
+135
-64
@@ -52,6 +52,47 @@
|
||||
<a class="navbar-brand" href="{{ url_for('dashboard.index') }}">
|
||||
<i class="bi bi-clipboard-check"></i> Janitorial QC
|
||||
</a>
|
||||
<!-- ── Bell + toggler always visible on mobile/tablet ── -->
|
||||
<div class="d-flex align-items-center gap-2 ms-auto me-2 d-lg-none">
|
||||
<!-- Notification bell (always visible) -->
|
||||
<div class="dropdown">
|
||||
<a class="nav-link position-relative notif-bell-wrapper text-white"
|
||||
href="#"
|
||||
id="notifDropdownMobile"
|
||||
role="button"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
title="Notifications">
|
||||
<i class="bi bi-bell fs-5"></i>
|
||||
{% if unread_notification_count > 0 %}
|
||||
<span class="badge bg-danger notif-badge" id="notif-count-badge-mobile">
|
||||
{{ unread_notification_count if unread_notification_count <= 99 else '99+' }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-danger notif-badge d-none" id="notif-count-badge-mobile"></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end notif-dropdown shadow"
|
||||
id="notif-dropdown-menu-mobile">
|
||||
<div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
|
||||
<span class="fw-semibold" style="font-size:.9rem;">Notifications</span>
|
||||
<button class="btn btn-link btn-sm p-0 text-muted text-decoration-none mark-all-read-btn"
|
||||
style="font-size:.75rem;">Mark all as read</button>
|
||||
</div>
|
||||
<div class="notif-list-mobile">
|
||||
<div class="notif-empty">Loading…</div>
|
||||
</div>
|
||||
<div class="border-top d-flex justify-content-between px-3 py-2" style="font-size:.8rem;">
|
||||
<a href="{{ url_for('notifications.index') }}" class="text-decoration-none">
|
||||
<i class="bi bi-list-ul me-1"></i>View all
|
||||
</a>
|
||||
<a href="{{ url_for('notifications.preferences') }}" class="text-decoration-none text-muted">
|
||||
<i class="bi bi-gear me-1"></i>Preferences
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
@@ -111,12 +152,17 @@
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('audit.index') }}">Audit Trail</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{{ url_for('auth.notification_matrix') }}">
|
||||
<i class="bi bi-grid-3x3-gap-fill"></i> Notif. Matrix
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
<ul class="navbar-nav align-items-center">
|
||||
|
||||
<!-- ── Notification Bell ── -->
|
||||
<li class="nav-item dropdown me-2">
|
||||
<!-- ── Notification Bell (desktop lg+ only) ── -->
|
||||
<li class="nav-item dropdown me-2 d-none d-lg-block">
|
||||
<a class="nav-link position-relative notif-bell-wrapper"
|
||||
href="#"
|
||||
id="notifDropdown"
|
||||
@@ -227,50 +273,61 @@
|
||||
const CSRF_TOKEN = '{{ csrf_token() }}';
|
||||
const POLL_INTERVAL = 60000; // 60 seconds
|
||||
|
||||
const badge = document.getElementById('notif-count-badge');
|
||||
const listEl = document.getElementById('notif-list');
|
||||
const markAllBtn = document.getElementById('mark-all-read-btn');
|
||||
// ── Element refs — desktop bell (lg+) and mobile/tablet bell (<lg) ──
|
||||
const badgeDesktop = document.getElementById('notif-count-badge');
|
||||
const badgeMobile = document.getElementById('notif-count-badge-mobile');
|
||||
const listDesktop = document.getElementById('notif-list');
|
||||
const listMobile = document.querySelector('.notif-list-mobile');
|
||||
|
||||
// ── Update both badge instances ────────────────────────────────────────
|
||||
function updateBadge(count) {
|
||||
if (count > 0) {
|
||||
badge.textContent = count > 99 ? '99+' : count;
|
||||
badge.classList.remove('d-none');
|
||||
} else {
|
||||
badge.textContent = '';
|
||||
badge.classList.add('d-none');
|
||||
}
|
||||
[badgeDesktop, badgeMobile].forEach(function(badge) {
|
||||
if (!badge) return;
|
||||
if (count > 0) {
|
||||
badge.textContent = count > 99 ? '99+' : count;
|
||||
badge.classList.remove('d-none');
|
||||
} else {
|
||||
badge.textContent = '';
|
||||
badge.classList.add('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderNotifications(notifications) {
|
||||
// ── Render notification items into a given container ───────────────────
|
||||
function renderInto(container, notifications) {
|
||||
if (!container) return;
|
||||
if (!notifications.length) {
|
||||
listEl.innerHTML = '<div class="notif-empty">'
|
||||
container.innerHTML = '<div class="notif-empty">'
|
||||
+ '<i class="bi bi-check2-circle me-1"></i>You\'re all caught up!</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
listEl.innerHTML = notifications.map(n => `
|
||||
<div class="d-block text-decoration-none text-dark notif-item px-3 py-2 border-bottom
|
||||
${n.is_read ? '' : 'unread'}"
|
||||
data-notif-id="${n.id}"
|
||||
data-link="${escapeAttr(n.link || '')}">
|
||||
<div class="notif-title">${escapeHtml(n.title)}</div>
|
||||
<div class="notif-body">${escapeHtml(n.body)}</div>
|
||||
<div class="notif-time">${escapeHtml(n.created_at)}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
listEl.querySelectorAll('.notif-item').forEach(el => {
|
||||
el.addEventListener('click', function () {
|
||||
const id = this.dataset.notifId;
|
||||
const link = this.dataset.link;
|
||||
markRead(id, () => {
|
||||
this.classList.remove('unread');
|
||||
container.innerHTML = notifications.map(function(n) {
|
||||
return '<div class="d-block text-decoration-none text-dark notif-item px-3 py-2 border-bottom '
|
||||
+ (n.is_read ? '' : 'unread') + '"'
|
||||
+ ' data-notif-id="' + n.id + '"'
|
||||
+ ' data-link="' + escapeAttr(n.link || '') + '">'
|
||||
+ '<div class="notif-title">' + escapeHtml(n.title) + '</div>'
|
||||
+ '<div class="notif-body">' + escapeHtml(n.body) + '</div>'
|
||||
+ '<div class="notif-time">' + escapeHtml(n.created_at) + '</div>'
|
||||
+ '</div>';
|
||||
}).join('');
|
||||
container.querySelectorAll('.notif-item').forEach(function(el) {
|
||||
el.addEventListener('click', function() {
|
||||
var id = this.dataset.notifId;
|
||||
var link = this.dataset.link;
|
||||
markRead(id, function() {
|
||||
el.classList.remove('unread');
|
||||
if (link) window.location.href = link;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function renderNotifications(notifications) {
|
||||
renderInto(listDesktop, notifications);
|
||||
renderInto(listMobile, notifications);
|
||||
}
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
return str.replace(/&/g,'&').replace(/</g,'<')
|
||||
@@ -278,55 +335,69 @@
|
||||
}
|
||||
function escapeAttr(str) { return escapeHtml(str); }
|
||||
|
||||
// ── Fetch + update ─────────────────────────────────────────────────────
|
||||
window.fetchNotifications = function fetchNotifications() {
|
||||
fetch(FEED_URL, { credentials: 'same-origin' })
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function(data) {
|
||||
updateBadge(data.unread_count);
|
||||
window._jqcNotifications = data.notifications;
|
||||
const dropdownEl = document.getElementById('notifDropdown');
|
||||
if (dropdownEl.getAttribute('aria-expanded') === 'true') {
|
||||
var deskEl = document.getElementById('notifDropdown');
|
||||
var mobileEl = document.getElementById('notifDropdownMobile');
|
||||
var deskOpen = deskEl && deskEl.getAttribute('aria-expanded') === 'true';
|
||||
var mobileOpen = mobileEl && mobileEl.getAttribute('aria-expanded') === 'true';
|
||||
if (deskOpen || mobileOpen) {
|
||||
renderNotifications(data.notifications);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
.catch(function() {});
|
||||
};
|
||||
|
||||
function markRead(id, callback) {
|
||||
fetch(`${MARK_READ_BASE}${id}/mark-read`, {
|
||||
fetch(MARK_READ_BASE + id + '/mark-read', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': CSRF_TOKEN, 'Content-Type': 'application/json' },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(() => { if (callback) callback(); fetchNotifications(); })
|
||||
.catch(() => { if (callback) callback(); });
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function() { if (callback) callback(); fetchNotifications(); })
|
||||
.catch(function() { if (callback) callback(); });
|
||||
}
|
||||
|
||||
document.getElementById('notifDropdown').addEventListener('show.bs.dropdown', function () {
|
||||
if (window._jqcNotifications) {
|
||||
renderNotifications(window._jqcNotifications);
|
||||
} else {
|
||||
fetchNotifications();
|
||||
}
|
||||
// ── Show dropdown → render cached data immediately ─────────────────────
|
||||
['notifDropdown', 'notifDropdownMobile'].forEach(function(id) {
|
||||
var el = document.getElementById(id);
|
||||
if (!el) return;
|
||||
el.addEventListener('show.bs.dropdown', function() {
|
||||
if (window._jqcNotifications) {
|
||||
renderNotifications(window._jqcNotifications);
|
||||
} else {
|
||||
fetchNotifications();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
markAllBtn.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
fetch(MARK_ALL_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': CSRF_TOKEN },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(() => {
|
||||
updateBadge(0);
|
||||
listEl.querySelectorAll('.notif-item.unread').forEach(el => el.classList.remove('unread'));
|
||||
if (window._jqcNotifications) {
|
||||
window._jqcNotifications.forEach(n => n.is_read = true);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
// ── Mark all read — works from either bell ─────────────────────────────
|
||||
document.querySelectorAll('#mark-all-read-btn, .mark-all-read-btn').forEach(function(btn) {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
fetch(MARK_ALL_URL, {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRFToken': CSRF_TOKEN },
|
||||
credentials: 'same-origin',
|
||||
})
|
||||
.then(function(r) { return r.json(); })
|
||||
.then(function() {
|
||||
updateBadge(0);
|
||||
document.querySelectorAll('.notif-item.unread').forEach(function(el) {
|
||||
el.classList.remove('unread');
|
||||
});
|
||||
if (window._jqcNotifications) {
|
||||
window._jqcNotifications.forEach(function(n) { n.is_read = true; });
|
||||
}
|
||||
})
|
||||
.catch(function() {});
|
||||
});
|
||||
});
|
||||
|
||||
fetchNotifications();
|
||||
|
||||
Reference in New Issue
Block a user