ce75f12f56
- Added bug reporting API router to main application. - Enhanced screenshot functionality in bug-report.js with timeout handling and dynamic loading of html2canvas library. - Improved screenshot capture strategies and error handling for better user experience. - Updated modal handling for bug reports to include screenshot previews and status messages. - Refactored code for better readability and maintainability. feat: implement user-specific case status and preferences - Created migration to allow dynamic case statuses in sag_sager table. - Added user_sag_list_preferences table for per-user preferences on case list filters. - Introduced user_menu_preferences table to manage per-user menu visibility preferences with triggers for updated_at timestamps.
1386 lines
52 KiB
HTML
1386 lines
52 KiB
HTML
{% extends "shared/frontend/base.html" %}
|
|
|
|
{% block title %}Sager - BMC Hub{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.search-bar {
|
|
margin-bottom: 0;
|
|
flex: 1 1 380px;
|
|
min-width: 240px;
|
|
}
|
|
|
|
.search-bar input {
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
padding: 0.45rem 0.85rem;
|
|
}
|
|
|
|
.top-controls-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6rem;
|
|
margin-bottom: 0.9rem;
|
|
}
|
|
|
|
.top-controls-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
margin-left: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.top-controls-actions .btn {
|
|
white-space: nowrap;
|
|
padding-top: 0.4rem;
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
|
|
.table-wrapper {
|
|
background: var(--bg-card);
|
|
border-radius: 12px;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.sag-table {
|
|
width: 100%;
|
|
min-width: 1760px;
|
|
margin: 0;
|
|
}
|
|
|
|
.sag-table thead {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.sag-table thead th {
|
|
padding: 0.6rem 0.75rem;
|
|
font-weight: 600;
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
border: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sag-table thead th.col-expand,
|
|
.sag-table tbody td.col-expand {
|
|
width: 44px;
|
|
min-width: 44px;
|
|
max-width: 44px;
|
|
text-align: center;
|
|
padding-left: 0.45rem;
|
|
padding-right: 0.45rem;
|
|
}
|
|
|
|
.sag-table tbody tr {
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sag-table tbody tr:nth-child(even) {
|
|
background: rgba(15, 76, 117, 0.04);
|
|
}
|
|
|
|
.sag-table tbody tr:hover {
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
.sag-table tbody td {
|
|
padding: 0.5rem 0.75rem;
|
|
vertical-align: top;
|
|
font-size: 0.86rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sag-table td.col-company,
|
|
.sag-table td.col-contact,
|
|
.sag-table td.col-owner,
|
|
.sag-table td.col-group,
|
|
.sag-table td.col-desc {
|
|
white-space: normal;
|
|
}
|
|
|
|
.sag-table td.col-company,
|
|
.sag-table td.col-contact,
|
|
.sag-table td.col-owner,
|
|
.sag-table td.col-group {
|
|
max-width: 180px;
|
|
}
|
|
|
|
.sag-table td.col-desc {
|
|
min-width: 260px;
|
|
max-width: 360px;
|
|
}
|
|
|
|
.sag-id {
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.sag-unread-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.35rem;
|
|
height: 1.35rem;
|
|
padding: 0 0.35rem;
|
|
margin-left: 0.45rem;
|
|
border-radius: 999px;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
|
|
}
|
|
|
|
.sag-unread-fresh {
|
|
background: #2f9e44;
|
|
}
|
|
|
|
.sag-unread-warm {
|
|
background: #f08c00;
|
|
}
|
|
|
|
.sag-unread-hot {
|
|
background: #c92a2a;
|
|
animation: sagUnreadPulse 1.8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes sagUnreadPulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.08); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.sag-titel {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sag-beskrivelse {
|
|
color: var(--text-secondary);
|
|
font-size: 0.8rem;
|
|
margin-top: 0.2rem;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Tree view styles */
|
|
.tree-row {
|
|
position: relative;
|
|
}
|
|
|
|
.tree-row.has-children {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tree-row.has-children:before {
|
|
content: none;
|
|
}
|
|
|
|
.tree-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: var(--accent-light);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.75rem;
|
|
color: var(--accent);
|
|
font-weight: bold;
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.col-expand .tree-toggle {
|
|
position: static;
|
|
transform: none;
|
|
}
|
|
|
|
.tree-toggle:hover {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.tree-child {
|
|
background: rgba(0,0,0,0.02);
|
|
}
|
|
|
|
.tree-child td {
|
|
padding: 0.5rem 1rem !important;
|
|
border-top: none !important;
|
|
}
|
|
|
|
.tree-child .child-branch {
|
|
color: rgba(0,0,0,0.4);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
|
|
.relation-badge {
|
|
display: inline-block;
|
|
font-size: 0.65rem;
|
|
padding: 0.25rem 0.6rem;
|
|
background: var(--accent);
|
|
color: white;
|
|
border-radius: 12px;
|
|
margin-right: 0.5rem;
|
|
font-weight: 600;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.35rem 0.8rem;
|
|
border-radius: 20px;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
background: #e9ecef;
|
|
color: #495057;
|
|
}
|
|
|
|
.status-åben {
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.status-lukket {
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.status-under-behandling,
|
|
.status-i-gang,
|
|
.status-in-progress {
|
|
background: #dbeafe;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.status-afventer,
|
|
.status-on-hold {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.status-løst,
|
|
.status-afsluttet,
|
|
.status-resolved,
|
|
.status-done,
|
|
.status-closed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.filter-pills {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-pill {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
background: var(--bg-card);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.filter-pill:hover {
|
|
background: var(--accent-light);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.filter-pill.active {
|
|
background: var(--accent);
|
|
color: white;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.stats-bar {
|
|
display: inline-flex;
|
|
gap: 0.4rem;
|
|
margin-bottom: 0;
|
|
padding: 0.25rem;
|
|
background: var(--bg-card);
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(0,0,0,0.08);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.stat-item {
|
|
text-align: center;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 999px;
|
|
background: rgba(0,0,0,0.03);
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 0.92rem;
|
|
font-weight: 700;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.62rem;
|
|
color: var(--text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.35px;
|
|
}
|
|
|
|
.type-filter-wrap {
|
|
min-width: 200px;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.type-filter-header {
|
|
display: none;
|
|
}
|
|
|
|
.type-filter-dropdown .dropdown-toggle {
|
|
width: 100%;
|
|
text-align: left;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid #ced4da;
|
|
background: #fff;
|
|
color: var(--text-primary);
|
|
font-weight: 400;
|
|
font-size: 0.86rem;
|
|
padding: 0.28rem 2rem 0.28rem 0.65rem;
|
|
min-height: calc(1.4em + 0.56rem + 2px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.6rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.type-filter-dropdown .dropdown-toggle:hover,
|
|
.type-filter-dropdown .dropdown-toggle:focus,
|
|
.type-filter-dropdown .dropdown-toggle:active,
|
|
.type-filter-dropdown .dropdown-toggle.show {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
color: var(--text-primary);
|
|
background: #fff;
|
|
}
|
|
|
|
.type-filter-dropdown .dropdown-toggle::after {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.type-filter-dropdown .dropdown-menu {
|
|
width: min(340px, 92vw);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
padding: 0.45rem;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.type-filter-checkbox-list {
|
|
max-height: 12.5rem;
|
|
overflow-y: auto;
|
|
padding-right: 0.2rem;
|
|
}
|
|
|
|
.type-filter-checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
padding: 0.34rem 0.42rem;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
margin-bottom: 0.2rem;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.type-filter-checkbox-item:hover {
|
|
background: rgba(15, 76, 117, 0.08);
|
|
}
|
|
|
|
.type-filter-checkbox-item input {
|
|
margin-top: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.type-filter-checkbox-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: #16384f;
|
|
user-select: none;
|
|
}
|
|
|
|
.type-filter-menu-actions {
|
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
margin-top: 0.35rem;
|
|
padding-top: 0.38rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.3rem;
|
|
}
|
|
|
|
.type-filter-menu-actions .btn {
|
|
font-size: 0.72rem;
|
|
line-height: 1.2;
|
|
padding: 0.2rem 0.45rem;
|
|
}
|
|
|
|
.type-filter-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.6rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.type-filter-selection {
|
|
font-size: 0.73rem;
|
|
color: var(--text-secondary);
|
|
min-height: 1rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
flex: 1;
|
|
}
|
|
|
|
.type-filter-empty {
|
|
font-size: 0.8rem;
|
|
color: var(--text-secondary);
|
|
padding: 0.22rem 0.1rem;
|
|
}
|
|
|
|
.mini-filter-wrap {
|
|
min-width: 190px;
|
|
max-width: 260px;
|
|
}
|
|
|
|
.mini-filter-dropdown .dropdown-toggle {
|
|
width: 100%;
|
|
text-align: left;
|
|
border-radius: 0.375rem;
|
|
border: 1px solid #ced4da;
|
|
background: #fff;
|
|
color: var(--text-primary);
|
|
font-weight: 400;
|
|
font-size: 0.86rem;
|
|
padding: 0.28rem 2rem 0.28rem 0.65rem;
|
|
min-height: calc(1.4em + 0.56rem + 2px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mini-filter-dropdown .dropdown-toggle:hover,
|
|
.mini-filter-dropdown .dropdown-toggle:focus,
|
|
.mini-filter-dropdown .dropdown-toggle:active,
|
|
.mini-filter-dropdown .dropdown-toggle.show {
|
|
border-color: #86b7fe;
|
|
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
color: var(--text-primary);
|
|
background: #fff;
|
|
}
|
|
|
|
.mini-filter-dropdown .dropdown-menu {
|
|
width: min(320px, 92vw);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
padding: 0.45rem;
|
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.mini-filter-list {
|
|
max-height: 12.5rem;
|
|
overflow-y: auto;
|
|
padding-right: 0.2rem;
|
|
}
|
|
|
|
.mini-filter-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.52rem;
|
|
padding: 0.34rem 0.42rem;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
margin-bottom: 0.15rem;
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.mini-filter-item:hover {
|
|
background: rgba(15, 76, 117, 0.08);
|
|
}
|
|
|
|
.mini-filter-item input {
|
|
margin-top: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mini-filter-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: #16384f;
|
|
user-select: none;
|
|
}
|
|
|
|
.mini-filter-footer {
|
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
margin-top: 0.35rem;
|
|
padding-top: 0.35rem;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.mini-filter-clear {
|
|
font-size: 0.72rem;
|
|
line-height: 1.2;
|
|
padding: 0.2rem 0.45rem;
|
|
}
|
|
|
|
.owner-cell {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.owner-avatar {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
color: #fff;
|
|
background: var(--accent);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.owner-avatar.group-avatar {
|
|
background: #7c3aed;
|
|
}
|
|
|
|
.owner-avatar.empty-avatar {
|
|
background: #cbd5e1;
|
|
color: #475569;
|
|
}
|
|
|
|
.owner-name {
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
word-break: break-word;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.top-controls-row {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.top-controls-actions {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 3rem;
|
|
margin-bottom: 1rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.sag-top-alerts {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.sag-top-alerts .alert {
|
|
border-left: 6px solid;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.sag-top-alerts .alert-warning {
|
|
border-left-color: #f59f00;
|
|
}
|
|
|
|
.sag-top-alerts .alert-danger {
|
|
border-left-color: #e03131;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% macro initials_bubble(label, group=false) -%}
|
|
{% if label %}
|
|
{% set norm = label.strip() %}
|
|
{% set parts = norm.split() %}
|
|
{% set initials = ((parts[0][0] if parts|length > 0 else norm[0]) ~ (parts[1][0] if parts|length > 1 else ''))|upper %}
|
|
<span class="owner-avatar {% if group %}group-avatar{% endif %}" title="{{ norm }}">{{ initials }}</span>
|
|
{% else %}
|
|
<span class="owner-avatar empty-avatar" title="Ikke sat">-</span>
|
|
{% endif %}
|
|
{%- endmacro %}
|
|
|
|
<div class="container-fluid" style="max-width: none; padding-top: 0.65rem;">
|
|
<div id="sagTopAlerts" class="sag-top-alerts d-none"></div>
|
|
|
|
<div class="top-controls-row">
|
|
<h1 style="margin: 0; color: var(--accent); flex-shrink: 0;">
|
|
<i class="bi bi-list-check"></i>
|
|
</h1>
|
|
|
|
<div class="stats-bar">
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ sager|length }}</div>
|
|
<div class="stat-label">Total</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">{{ sager|selectattr('status', 'equalto', 'åben')|list|length }}</div>
|
|
<div class="stat-label">Åbne</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="search-bar">
|
|
<input type="text"
|
|
class="form-control"
|
|
id="searchInput"
|
|
placeholder="🔍 Søg efter sag ID, titel, beskrivelse..."
|
|
autocomplete="off">
|
|
</div>
|
|
|
|
<div class="top-controls-actions">
|
|
<button class="btn btn-outline-primary" onclick="window.location.href='/sag/varekob-salg'">
|
|
<i class="bi bi-basket3 me-2"></i>Varekøb & Salg
|
|
</button>
|
|
<button class="btn btn-primary" style="background: var(--accent); border: none;" onclick="window.location.href='/sag/new'">
|
|
<i class="bi bi-plus-lg me-2"></i>Ny Sag
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
|
|
<div class="filter-pills">
|
|
<div class="filter-pill active" data-filter="all">Alle</div>
|
|
<div class="filter-pill" data-filter="åben">Åbne</div>
|
|
<div class="filter-pill" data-filter="lukket">Lukkede</div>
|
|
</div>
|
|
<div class="type-filter-wrap">
|
|
<div class="dropdown type-filter-dropdown mb-1">
|
|
<button class="btn dropdown-toggle" type="button" id="typeFilterDropdownBtn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
<span id="typeFilterDropdownLabel">Vælg typer</span>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="typeFilterDropdownBtn">
|
|
<div class="type-filter-checkbox-list" id="typeFilterCheckboxList"></div>
|
|
<div class="type-filter-menu-actions">
|
|
<button class="btn btn-sm btn-outline-secondary" type="button" id="clearTypeFilterBtn">Ryd</button>
|
|
<button class="btn btn-sm btn-primary" type="button" id="saveTypeFilterDefaultBtn">Gem</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<select class="d-none" id="typeFilter" multiple title="Type filter data source"></select>
|
|
</div>
|
|
<div class="mini-filter-wrap">
|
|
<div class="dropdown mini-filter-dropdown mb-1">
|
|
<button class="btn dropdown-toggle" type="button" id="assigneeDropdownBtn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
<span id="assigneeDropdownLabel">Ansvarlig</span>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="assigneeDropdownBtn">
|
|
<div class="mini-filter-list" id="assigneeFilterList"></div>
|
|
<div class="mini-filter-footer">
|
|
<button class="btn btn-sm btn-outline-secondary mini-filter-clear" type="button" id="clearAssigneeFilterBtn">Ryd</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<select class="d-none" name="ansvarlig_bruger_id" id="assigneeFilter" multiple>
|
|
<option value="">Alle medarbejdere</option>
|
|
<option value="__UNASSIGNED__" {% if current_unassigned %}selected{% endif %}>Uden ansvarlig</option>
|
|
{% for user in assignment_users or [] %}
|
|
<option value="{{ user.user_id }}" {% if current_ansvarlig_bruger_id == user.user_id %}selected{% endif %}>{{ user.display_name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="mini-filter-wrap">
|
|
<div class="dropdown mini-filter-dropdown mb-1">
|
|
<button class="btn dropdown-toggle" type="button" id="groupDropdownBtn" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
|
|
<span id="groupDropdownLabel">Grupper</span>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="groupDropdownBtn">
|
|
<div class="mini-filter-list" id="groupFilterList"></div>
|
|
<div class="mini-filter-footer">
|
|
<button class="btn btn-sm btn-outline-secondary mini-filter-clear" type="button" id="clearGroupFilterBtn">Ryd</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<select class="d-none" name="assigned_group_id" id="groupFilter" multiple>
|
|
<option value="">Alle grupper</option>
|
|
{% for group in assignment_groups or [] %}
|
|
<option value="{{ group.id }}" {% if current_assigned_group_id == group.id %}selected{% endif %}>{{ group.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<a class="btn btn-sm btn-outline-secondary" href="{{ toggle_include_deferred_url }}">
|
|
{% if include_deferred %}Skjul udsatte{% else %}Vis udsatte{% endif %}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="table-wrapper">
|
|
{% if sager %}
|
|
<table class="sag-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-expand"></th>
|
|
<th style="width: 90px;">SagsID</th>
|
|
<th style="width: 180px;">Virksom.</th>
|
|
<th style="width: 150px;">Kontakt</th>
|
|
<th style="width: 300px;">Beskr.</th>
|
|
<th style="width: 120px;">Type</th>
|
|
<th style="width: 110px;">Prioritet</th>
|
|
<th style="width: 120px;">Status</th>
|
|
<th style="width: 160px;">Ansvarl.</th>
|
|
<th style="width: 170px;">Gruppe/Level</th>
|
|
<th style="width: 240px;">Næste todo</th>
|
|
<th style="width: 120px;">Opret.</th>
|
|
<th style="width: 120px;">Arbejdsstart</th>
|
|
<th style="width: 140px;">Start senest</th>
|
|
<th style="width: 120px;">Deadline</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="sagTableBody">
|
|
{% for sag in sager %}
|
|
{% if sag.id not in child_ids %}
|
|
{% set has_relations = sag.id in relations_map and relations_map[sag.id]|length > 0 %}
|
|
<tr class="tree-row {% if has_relations %}has-children{% endif %}"
|
|
data-sag-id="{{ sag.id }}"
|
|
data-status="{{ sag.status }}"
|
|
data-type="{{ sag.template_key or sag.type or 'ticket' }}"
|
|
data-assignee-id="{{ sag.ansvarlig_bruger_id if sag.ansvarlig_bruger_id else '' }}"
|
|
data-group-id="{{ sag.assigned_group_id if sag.assigned_group_id else '' }}">
|
|
<td class="col-expand" onclick="event.stopPropagation();">
|
|
{% if has_relations %}
|
|
<span class="tree-toggle" onclick="toggleTreeNode(event, {{ sag.id }})">+</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<span class="sag-id" role="button" onclick="window.location.href='/sag/{{ sag.id }}/v3'">#{{ sag.id }}</span>
|
|
{% if (sag.unread_email_count or 0) > 0 %}
|
|
{% set unread_level = sag.unread_email_level or 'fresh' %}
|
|
<span class="sag-unread-badge sag-unread-{{ unread_level }}" title="{{ sag.unread_email_count }} ulæste e-mails">
|
|
{{ sag.unread_email_count if sag.unread_email_count <= 99 else '99+' }}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="col-company" onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
{{ sag.customer_name if sag.customer_name else '-' }}
|
|
</td>
|
|
<td class="col-contact" onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
{{ sag.kontakt_navn if sag.kontakt_navn and sag.kontakt_navn.strip() else '-' }}
|
|
</td>
|
|
<td class="col-desc" onclick="window.location.href='/sag/{{ sag.id }}/v3'">
|
|
<div class="sag-titel" {% if sag.beskrivelse %}title="{{ sag.beskrivelse }}"{% endif %}>{{ sag.titel }}</div>
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'">
|
|
<span class="badge bg-light text-dark border">{{ sag.template_key or sag.type or 'ticket' }}</span>
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem; text-transform: capitalize;">
|
|
{{ sag.priority if sag.priority else 'normal' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'">
|
|
{% set status_raw = sag.status if sag.status else 'åben' %}
|
|
{% set status_class = status_raw|lower|replace(' ', '-') %}
|
|
<span class="status-badge status-{{ status_class }}">{{ status_raw }}</span>
|
|
</td>
|
|
<td class="col-owner" onclick="window.location.href='/sag/{{ sag.id }}/v3'">
|
|
<div class="owner-cell">
|
|
{{ initials_bubble(sag.ansvarlig_navn) }}
|
|
</div>
|
|
</td>
|
|
<td class="col-group" onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
<div class="owner-cell">
|
|
{{ initials_bubble(sag.assigned_group_name, true) }}
|
|
</div>
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem; white-space: normal; max-width: 240px;">
|
|
{% if sag.next_todo_title %}
|
|
<div>{{ sag.next_todo_title }}</div>
|
|
{% if sag.next_todo_due_date %}
|
|
<div class="small text-muted">Forfald: {{ sag.next_todo_due_date.strftime('%d/%m-%Y') }}</div>
|
|
{% endif %}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ sag.created_at.strftime('%d/%m-%Y') if sag.created_at else '-' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ sag.start_date.strftime('%d/%m-%Y') if sag.start_date else '-' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ sag.deferred_until.strftime('%d/%m-%Y') if sag.deferred_until else '-' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ sag.deadline.strftime('%d/%m-%Y') if sag.deadline else '-' }}
|
|
</td>
|
|
</tr>
|
|
{% if has_relations %}
|
|
{% set seen_targets = [] %}
|
|
{% for rel in relations_map[sag.id] %}
|
|
{% set related_sag = sager|selectattr('id', 'equalto', rel.target_id)|first %}
|
|
{% if related_sag and rel.target_id not in seen_targets %}
|
|
{% set _ = seen_targets.append(rel.target_id) %}
|
|
{% set all_rel_types = relations_map[sag.id]|selectattr('target_id', 'equalto', rel.target_id)|map(attribute='type')|list %}
|
|
<tr class="tree-child" data-parent="{{ sag.id }}" data-status="{{ related_sag.status }}" data-type="{{ related_sag.template_key or related_sag.type or 'ticket' }}" data-assignee-id="{{ related_sag.ansvarlig_bruger_id if related_sag.ansvarlig_bruger_id else '' }}" data-group-id="{{ related_sag.assigned_group_id if related_sag.assigned_group_id else '' }}" style="display: none;">
|
|
<td class="col-expand"><span class="child-branch">└</span></td>
|
|
<td>
|
|
<span class="sag-id" role="button" onclick="window.location.href='/sag/{{ related_sag.id }}/v3'">#{{ related_sag.id }}</span>
|
|
{% if (related_sag.unread_email_count or 0) > 0 %}
|
|
{% set child_unread_level = related_sag.unread_email_level or 'fresh' %}
|
|
<span class="sag-unread-badge sag-unread-{{ child_unread_level }}" title="{{ related_sag.unread_email_count }} ulæste e-mails">
|
|
{{ related_sag.unread_email_count if related_sag.unread_email_count <= 99 else '99+' }}
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="col-company" onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
{{ related_sag.customer_name if related_sag.customer_name else '-' }}
|
|
</td>
|
|
<td class="col-contact" onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
{{ related_sag.kontakt_navn if related_sag.kontakt_navn and related_sag.kontakt_navn.strip() else '-' }}
|
|
</td>
|
|
<td class="col-desc" onclick="window.location.href='/sag/{{ related_sag.id }}/v3'">
|
|
{% for rt in all_rel_types %}
|
|
<span class="relation-badge">{{ rt }}</span>
|
|
{% endfor %}
|
|
<div class="sag-titel" style="display: inline;" {% if related_sag.beskrivelse %}title="{{ related_sag.beskrivelse }}"{% endif %}>{{ related_sag.titel }}</div>
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'">
|
|
<span class="badge bg-light text-dark border">{{ related_sag.template_key or related_sag.type or 'ticket' }}</span>
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem; text-transform: capitalize;">
|
|
{{ related_sag.priority if related_sag.priority else 'normal' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'">
|
|
{% set related_status_raw = related_sag.status if related_sag.status else 'åben' %}
|
|
{% set related_status_class = related_status_raw|lower|replace(' ', '-') %}
|
|
<span class="status-badge status-{{ related_status_class }}">{{ related_status_raw }}</span>
|
|
</td>
|
|
<td class="col-owner" onclick="window.location.href='/sag/{{ related_sag.id }}/v3'">
|
|
<div class="owner-cell">
|
|
{{ initials_bubble(related_sag.ansvarlig_navn) }}
|
|
</div>
|
|
</td>
|
|
<td class="col-group" onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem;">
|
|
<div class="owner-cell">
|
|
{{ initials_bubble(related_sag.assigned_group_name, true) }}
|
|
</div>
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary); font-size: 0.85rem; white-space: normal; max-width: 240px;">
|
|
{% if related_sag.next_todo_title %}
|
|
<div>{{ related_sag.next_todo_title }}</div>
|
|
{% if related_sag.next_todo_due_date %}
|
|
<div class="small text-muted">Forfald: {{ related_sag.next_todo_due_date.strftime('%d/%m-%Y') }}</div>
|
|
{% endif %}
|
|
{% else %}
|
|
-
|
|
{% endif %}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ related_sag.created_at.strftime('%d/%m-%Y') if related_sag.created_at else '-' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ related_sag.start_date.strftime('%d/%m-%Y') if related_sag.start_date else '-' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ related_sag.deferred_until.strftime('%d/%m-%Y') if related_sag.deferred_until else '-' }}
|
|
</td>
|
|
<td onclick="window.location.href='/sag/{{ related_sag.id }}/v3'" style="color: var(--text-secondary);">
|
|
{{ related_sag.deadline.strftime('%d/%m-%Y') if related_sag.deadline else '-' }}
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="bi bi-inbox"></i>
|
|
<p>Ingen sager fundet</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const topAlertCustomerId = {{ current_customer_id if current_customer_id else 'null' }};
|
|
|
|
function escapeTopAlertHtml(value) {
|
|
return String(value ?? '')
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
async function loadSagTopAlertsForCustomer(customerId) {
|
|
const container = document.getElementById('sagTopAlerts');
|
|
if (!container || !customerId) {
|
|
return;
|
|
}
|
|
|
|
container.classList.remove('d-none');
|
|
container.innerHTML = '<div class="alert alert-info mb-0"><span class="spinner-border spinner-border-sm me-2"></span>Henter kunde-alerts...</div>';
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/alert-notes/check?entity_type=customer&entity_id=${customerId}`, {
|
|
credentials: 'include'
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
const alerts = (data?.alerts || []).filter((alert) => ['critical', 'warning'].includes(String(alert?.severity || '').toLowerCase()));
|
|
|
|
if (!alerts.length) {
|
|
container.classList.add('d-none');
|
|
container.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const html = alerts.map((alert) => {
|
|
const isCritical = String(alert.severity || '').toLowerCase() === 'critical';
|
|
const klass = isCritical ? 'alert-danger' : 'alert-warning';
|
|
const label = isCritical ? 'KRITISK' : 'ADVARSEL';
|
|
const title = escapeTopAlertHtml(alert.title || 'Vigtig kundeinformation');
|
|
const message = escapeTopAlertHtml(alert.message || '');
|
|
return `
|
|
<div class="alert ${klass} mb-2" role="alert">
|
|
<strong>${label}:</strong> ${title}
|
|
${message ? `<div class="small mt-1">${message}</div>` : ''}
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
container.innerHTML = html;
|
|
container.classList.remove('d-none');
|
|
} catch (error) {
|
|
console.error('Failed to load customer alerts on sag list:', error);
|
|
container.innerHTML = '<div class="alert alert-warning mb-0" role="alert"><strong>Advarsel:</strong> Kunde-alerts kunne ikke hentes.</div>';
|
|
container.classList.remove('d-none');
|
|
}
|
|
}
|
|
|
|
// Tree toggle functionality
|
|
function toggleTreeNode(event, sagId) {
|
|
event.stopPropagation();
|
|
const toggle = event.currentTarget || event.target;
|
|
const row = toggle.closest('tr');
|
|
|
|
if (!row) {
|
|
return;
|
|
}
|
|
|
|
if (row.classList.contains('expanded')) {
|
|
row.classList.remove('expanded');
|
|
toggle.textContent = '+';
|
|
} else {
|
|
row.classList.add('expanded');
|
|
toggle.textContent = '-';
|
|
}
|
|
|
|
applyFilters();
|
|
}
|
|
|
|
// Search functionality
|
|
const searchInput = document.getElementById('searchInput');
|
|
const allRows = document.querySelectorAll('.tree-row');
|
|
let currentSearch = '';
|
|
let currentFilter = 'all';
|
|
let currentTypes = new Set();
|
|
let currentAssignees = new Set();
|
|
let currentGroups = new Set();
|
|
const closedStatuses = new Set({{ (closed_statuses or ['lukket', 'løst', 'afsluttet', 'closed', 'resolved', 'done'])|tojson }});
|
|
|
|
const assigneeFilter = document.getElementById('assigneeFilter');
|
|
const groupFilter = document.getElementById('groupFilter');
|
|
const assigneeFilterList = document.getElementById('assigneeFilterList');
|
|
const groupFilterList = document.getElementById('groupFilterList');
|
|
const assigneeDropdownLabel = document.getElementById('assigneeDropdownLabel');
|
|
const groupDropdownLabel = document.getElementById('groupDropdownLabel');
|
|
const clearAssigneeFilterBtn = document.getElementById('clearAssigneeFilterBtn');
|
|
const clearGroupFilterBtn = document.getElementById('clearGroupFilterBtn');
|
|
|
|
function applyFilters() {
|
|
const search = currentSearch;
|
|
|
|
allRows.forEach(row => {
|
|
const text = row.textContent.toLowerCase();
|
|
const status = String(row.dataset.status || '').toLowerCase();
|
|
const type = row.dataset.type || 'ticket';
|
|
const assigneeRaw = String(row.dataset.assigneeId || '').trim();
|
|
const groupRaw = String(row.dataset.groupId || '').trim();
|
|
const assigneeId = assigneeRaw || '__UNASSIGNED__';
|
|
const groupId = groupRaw;
|
|
const matchesSearch = text.includes(search);
|
|
const isClosed = closedStatuses.has(status);
|
|
const matchesFilter = currentFilter === 'all'
|
|
|| (currentFilter === 'åben' && !isClosed)
|
|
|| (currentFilter === 'lukket' && isClosed)
|
|
|| status === currentFilter;
|
|
const matchesType = currentTypes.size === 0 || currentTypes.has(type);
|
|
const matchesAssignee = currentAssignees.size === 0 || currentAssignees.has(assigneeId);
|
|
const matchesGroup = currentGroups.size === 0 || currentGroups.has(groupId);
|
|
const visible = matchesSearch && matchesFilter && matchesType && matchesAssignee && matchesGroup;
|
|
|
|
row.style.display = visible ? '' : 'none';
|
|
|
|
const sagId = row.dataset.sagId;
|
|
if (sagId) {
|
|
const children = document.querySelectorAll(`tr[data-parent="${sagId}"]`);
|
|
children.forEach(child => {
|
|
const childText = child.textContent.toLowerCase();
|
|
const childStatus = String(child.dataset.status || '').toLowerCase();
|
|
const childType = child.dataset.type || 'ticket';
|
|
const childAssigneeRaw = String(child.dataset.assigneeId || '').trim();
|
|
const childGroupRaw = String(child.dataset.groupId || '').trim();
|
|
const childAssigneeId = childAssigneeRaw || '__UNASSIGNED__';
|
|
const childGroupId = childGroupRaw;
|
|
const childMatchesSearch = childText.includes(search);
|
|
const childIsClosed = closedStatuses.has(childStatus);
|
|
const childMatchesFilter = currentFilter === 'all'
|
|
|| (currentFilter === 'åben' && !childIsClosed)
|
|
|| (currentFilter === 'lukket' && childIsClosed)
|
|
|| childStatus === currentFilter;
|
|
const childMatchesType = currentTypes.size === 0 || currentTypes.has(childType);
|
|
const childMatchesAssignee = currentAssignees.size === 0 || currentAssignees.has(childAssigneeId);
|
|
const childMatchesGroup = currentGroups.size === 0 || currentGroups.has(childGroupId);
|
|
const childVisible = visible && row.classList.contains('expanded') && childMatchesSearch && childMatchesFilter && childMatchesType && childMatchesAssignee && childMatchesGroup;
|
|
child.style.display = childVisible ? '' : 'none';
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderMiniFilterOptions(selectEl, listEl, selectedSet, labelEl, defaultLabel) {
|
|
if (!selectEl || !listEl) return;
|
|
const options = Array.from(selectEl.options || []).filter((opt) => String(opt.value || '').trim() !== '');
|
|
if (options.length === 0) {
|
|
listEl.innerHTML = '<span class="type-filter-empty">Ingen muligheder</span>';
|
|
if (labelEl) labelEl.textContent = defaultLabel;
|
|
return;
|
|
}
|
|
|
|
listEl.innerHTML = options.map((opt) => {
|
|
const value = String(opt.value || '').trim();
|
|
const isChecked = selectedSet.has(value);
|
|
const safeValue = value.replace(/"/g, '"');
|
|
const safeLabel = String(opt.textContent || value).replace(/"/g, '"');
|
|
const safeId = `${selectEl.id}-opt-${value.replace(/[^a-zA-Z0-9_-]+/g, '-')}`;
|
|
return `
|
|
<label class="mini-filter-item" for="${safeId}">
|
|
<input class="form-check-input" type="checkbox" id="${safeId}" data-value="${safeValue}" ${isChecked ? 'checked' : ''}>
|
|
<span class="mini-filter-label">${safeLabel}</span>
|
|
</label>
|
|
`;
|
|
}).join('');
|
|
|
|
if (labelEl) {
|
|
labelEl.textContent = selectedSet.size === 0 ? defaultLabel : `${selectedSet.size} valgt`;
|
|
}
|
|
}
|
|
|
|
function syncMiniSelect(selectEl, selectedSet) {
|
|
if (!selectEl) return;
|
|
Array.from(selectEl.options || []).forEach((opt) => {
|
|
const value = String(opt.value || '').trim();
|
|
opt.selected = value !== '' && selectedSet.has(value);
|
|
});
|
|
}
|
|
|
|
if (assigneeFilterList && assigneeFilter) {
|
|
assigneeFilterList.addEventListener('change', function(event) {
|
|
const checkbox = event.target.closest('input[type="checkbox"][data-value]');
|
|
if (!checkbox) return;
|
|
const value = String(checkbox.dataset.value || '').trim();
|
|
if (!value) return;
|
|
if (checkbox.checked) currentAssignees.add(value);
|
|
else currentAssignees.delete(value);
|
|
syncMiniSelect(assigneeFilter, currentAssignees);
|
|
renderMiniFilterOptions(assigneeFilter, assigneeFilterList, currentAssignees, assigneeDropdownLabel, 'Ansvarlig');
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
if (groupFilterList && groupFilter) {
|
|
groupFilterList.addEventListener('change', function(event) {
|
|
const checkbox = event.target.closest('input[type="checkbox"][data-value]');
|
|
if (!checkbox) return;
|
|
const value = String(checkbox.dataset.value || '').trim();
|
|
if (!value) return;
|
|
if (checkbox.checked) currentGroups.add(value);
|
|
else currentGroups.delete(value);
|
|
syncMiniSelect(groupFilter, currentGroups);
|
|
renderMiniFilterOptions(groupFilter, groupFilterList, currentGroups, groupDropdownLabel, 'Grupper');
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
if (clearAssigneeFilterBtn) {
|
|
clearAssigneeFilterBtn.addEventListener('click', function() {
|
|
currentAssignees = new Set();
|
|
syncMiniSelect(assigneeFilter, currentAssignees);
|
|
renderMiniFilterOptions(assigneeFilter, assigneeFilterList, currentAssignees, assigneeDropdownLabel, 'Ansvarlig');
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
if (clearGroupFilterBtn) {
|
|
clearGroupFilterBtn.addEventListener('click', function() {
|
|
currentGroups = new Set();
|
|
syncMiniSelect(groupFilter, currentGroups);
|
|
renderMiniFilterOptions(groupFilter, groupFilterList, currentGroups, groupDropdownLabel, 'Grupper');
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
function initMiniFilterSelections() {
|
|
if (assigneeFilter) {
|
|
currentAssignees = new Set(
|
|
Array.from(assigneeFilter.selectedOptions || [])
|
|
.map((opt) => String(opt.value || '').trim())
|
|
.filter((value) => value)
|
|
);
|
|
renderMiniFilterOptions(assigneeFilter, assigneeFilterList, currentAssignees, assigneeDropdownLabel, 'Ansvarlig');
|
|
}
|
|
|
|
if (groupFilter) {
|
|
currentGroups = new Set(
|
|
Array.from(groupFilter.selectedOptions || [])
|
|
.map((opt) => String(opt.value || '').trim())
|
|
.filter((value) => value)
|
|
);
|
|
renderMiniFilterOptions(groupFilter, groupFilterList, currentGroups, groupDropdownLabel, 'Grupper');
|
|
}
|
|
}
|
|
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', function(e) {
|
|
currentSearch = e.target.value.toLowerCase();
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
// Filter functionality
|
|
const filterPills = document.querySelectorAll('.filter-pill');
|
|
|
|
filterPills.forEach(pill => {
|
|
pill.addEventListener('click', function() {
|
|
// Update active state
|
|
filterPills.forEach(p => p.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
currentFilter = this.dataset.filter || 'all';
|
|
applyFilters();
|
|
});
|
|
});
|
|
|
|
const typeFilter = document.getElementById('typeFilter');
|
|
const typeFilterCheckboxList = document.getElementById('typeFilterCheckboxList');
|
|
const typeFilterDropdownLabel = document.getElementById('typeFilterDropdownLabel');
|
|
const typeFilterSelection = document.getElementById('typeFilterSelection');
|
|
const clearTypeFilterBtn = document.getElementById('clearTypeFilterBtn');
|
|
const saveTypeFilterDefaultBtn = document.getElementById('saveTypeFilterDefaultBtn');
|
|
|
|
function getSelectedTypesFromUi() {
|
|
return Array.from(currentTypes);
|
|
}
|
|
|
|
function renderTypeFilterOptions() {
|
|
if (!typeFilterCheckboxList || !typeFilter) return;
|
|
const options = Array.from(typeFilter.options || []);
|
|
if (options.length === 0) {
|
|
typeFilterCheckboxList.innerHTML = '<span class="type-filter-empty">Ingen typer fundet</span>';
|
|
if (typeFilterSelection) typeFilterSelection.textContent = 'Ingen typer tilgaengelige';
|
|
if (typeFilterDropdownLabel) typeFilterDropdownLabel.textContent = 'Ingen typer';
|
|
return;
|
|
}
|
|
|
|
typeFilterCheckboxList.innerHTML = options.map((opt) => {
|
|
const value = String(opt.value || '').trim();
|
|
const key = value.toLowerCase();
|
|
const isActive = currentTypes.has(key);
|
|
const safeValue = value.replace(/"/g, '"');
|
|
const safeId = `type-filter-opt-${key.replace(/[^a-z0-9_-]+/g, '-')}`;
|
|
return `
|
|
<label class="type-filter-checkbox-item" for="${safeId}">
|
|
<input class="form-check-input" type="checkbox" id="${safeId}" data-type="${safeValue}" ${isActive ? 'checked' : ''}>
|
|
<span class="type-filter-checkbox-label">${value}</span>
|
|
</label>
|
|
`;
|
|
}).join('');
|
|
|
|
if (typeFilterSelection) {
|
|
const selectedLabels = options
|
|
.filter((opt) => currentTypes.has(String(opt.value || '').trim().toLowerCase()))
|
|
.map((opt) => String(opt.value || '').trim())
|
|
.filter(Boolean);
|
|
if (selectedLabels.length === 0) {
|
|
typeFilterSelection.textContent = 'Ingen typer valgt';
|
|
if (typeFilterDropdownLabel) typeFilterDropdownLabel.textContent = 'Vælg typer';
|
|
} else {
|
|
typeFilterSelection.textContent = `Valgt: ${selectedLabels.join(', ')}`;
|
|
if (typeFilterDropdownLabel) typeFilterDropdownLabel.textContent = `${selectedLabels.length} valgt`;
|
|
}
|
|
}
|
|
}
|
|
|
|
function applySelectedTypesToUi() {
|
|
if (!typeFilter) return;
|
|
Array.from(typeFilter.options || []).forEach((opt) => {
|
|
opt.selected = currentTypes.has(String(opt.value || '').trim().toLowerCase());
|
|
});
|
|
renderTypeFilterOptions();
|
|
}
|
|
|
|
if (typeFilterCheckboxList) {
|
|
typeFilterCheckboxList.addEventListener('change', function(event) {
|
|
const checkbox = event.target.closest('input[type="checkbox"][data-type]');
|
|
if (!checkbox) return;
|
|
const typeValue = String(checkbox.dataset.type || '').trim().toLowerCase();
|
|
if (!typeValue) return;
|
|
if (checkbox.checked) {
|
|
currentTypes.add(typeValue);
|
|
} else {
|
|
currentTypes.delete(typeValue);
|
|
}
|
|
applySelectedTypesToUi();
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
if (clearTypeFilterBtn) {
|
|
clearTypeFilterBtn.addEventListener('click', function() {
|
|
currentTypes = new Set();
|
|
applySelectedTypesToUi();
|
|
applyFilters();
|
|
});
|
|
}
|
|
|
|
async function loadTypeFilters() {
|
|
if (!typeFilter) return;
|
|
try {
|
|
const rowTypes = new Set(Array.from(document.querySelectorAll('.tree-row[data-type], .tree-child[data-type]'))
|
|
.map((row) => (row.dataset.type || '').trim())
|
|
.filter(Boolean));
|
|
|
|
const res = await fetch('/api/v1/settings/case_types');
|
|
let configuredTypes = [];
|
|
if (res.ok) {
|
|
const setting = await res.json();
|
|
const types = JSON.parse(setting.value || '[]');
|
|
if (Array.isArray(types)) {
|
|
configuredTypes = types;
|
|
}
|
|
}
|
|
|
|
configuredTypes.forEach((t) => rowTypes.add(String(t || '').trim()));
|
|
const mergedTypes = Array.from(rowTypes).filter(Boolean).sort((a, b) => a.localeCompare(b, 'da'));
|
|
if (mergedTypes.length === 0) {
|
|
typeFilter.innerHTML = '';
|
|
renderTypeFilterOptions();
|
|
return;
|
|
}
|
|
|
|
typeFilter.innerHTML = mergedTypes.map(type => `<option value="${type}">${type}</option>`).join('');
|
|
applySelectedTypesToUi();
|
|
} catch (err) {
|
|
console.error('Failed to load case types', err);
|
|
}
|
|
}
|
|
|
|
async function loadTypeFilterPreferences() {
|
|
try {
|
|
const res = await fetch('/api/v1/sag/me/list-preferences', { credentials: 'include' });
|
|
if (!res.ok) return;
|
|
const data = await res.json();
|
|
const fromServer = Array.isArray(data?.type_filters) ? data.type_filters : [];
|
|
currentTypes = new Set(fromServer.map((v) => String(v || '').trim().toLowerCase()).filter(Boolean));
|
|
applySelectedTypesToUi();
|
|
applyFilters();
|
|
} catch (err) {
|
|
console.error('Failed to load type filter preferences', err);
|
|
}
|
|
}
|
|
|
|
async function saveTypeFilterPreferences() {
|
|
if (!saveTypeFilterDefaultBtn) return;
|
|
const selected = getSelectedTypesFromUi();
|
|
saveTypeFilterDefaultBtn.disabled = true;
|
|
try {
|
|
const res = await fetch('/api/v1/sag/me/list-preferences', {
|
|
method: 'PATCH',
|
|
credentials: 'include',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ type_filters: selected }),
|
|
});
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
if (typeof showNotification === 'function') {
|
|
showNotification('Typefilter gemt som standard', 'success');
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to save type filter preferences', err);
|
|
if (typeof showNotification === 'function') {
|
|
showNotification('Kunne ikke gemme typefilter', 'error');
|
|
}
|
|
} finally {
|
|
saveTypeFilterDefaultBtn.disabled = false;
|
|
}
|
|
}
|
|
|
|
if (saveTypeFilterDefaultBtn) {
|
|
saveTypeFilterDefaultBtn.addEventListener('click', saveTypeFilterPreferences);
|
|
}
|
|
|
|
(async () => {
|
|
initMiniFilterSelections();
|
|
await loadTypeFilters();
|
|
await loadTypeFilterPreferences();
|
|
applyFilters();
|
|
})();
|
|
|
|
if (topAlertCustomerId) {
|
|
loadSagTopAlertsForCustomer(topAlertCustomerId);
|
|
}
|
|
</script>
|
|
{% endblock %}
|