878 lines
37 KiB
HTML
878 lines
37 KiB
HTML
{% extends "shared/frontend/base.html" %}
|
|
|
|
{% block title %}{{ ticket.ticket_number }} - BMC Hub{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.ticket-header {
|
|
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
|
|
padding: 2rem;
|
|
border-radius: var(--border-radius);
|
|
color: white;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.ticket-number {
|
|
font-family: 'Monaco', 'Courier New', monospace;
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.ticket-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin: 0.5rem 0;
|
|
}
|
|
|
|
.badge {
|
|
padding: 0.4rem 0.8rem;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.badge-status-open { background-color: #d1ecf1; color: #0c5460; }
|
|
.badge-status-in_progress { background-color: #fff3cd; color: #856404; }
|
|
.badge-status-pending_customer { background-color: #e2e3e5; color: #383d41; }
|
|
.badge-status-resolved { background-color: #d4edda; color: #155724; }
|
|
.badge-status-closed { background-color: #f8d7da; color: #721c24; }
|
|
|
|
.badge-priority-low { background-color: var(--accent-light); color: var(--accent); }
|
|
.badge-priority-normal { background-color: #e2e3e5; color: #383d41; }
|
|
.badge-priority-high { background-color: #fff3cd; color: #856404; }
|
|
.badge-priority-urgent, .badge-priority-critical { background-color: #f8d7da; color: #721c24; }
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.info-item {
|
|
background: var(--bg-card);
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius);
|
|
border: 1px solid var(--accent-light);
|
|
}
|
|
|
|
.info-item label {
|
|
display: block;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.info-item .value {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.comment {
|
|
padding: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
background: var(--accent-light);
|
|
border-radius: var(--border-radius);
|
|
border-left: 4px solid var(--accent);
|
|
}
|
|
|
|
.comment.internal {
|
|
background: #fff3cd;
|
|
border-left-color: #ffc107;
|
|
}
|
|
|
|
.comment-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.comment-author {
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.comment-date {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.worklog-table th {
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid var(--accent-light);
|
|
padding: 0.75rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.worklog-table td {
|
|
padding: 0.75rem;
|
|
border-bottom: 1px solid var(--accent-light);
|
|
}
|
|
|
|
.attachment {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--accent-light);
|
|
border-radius: var(--border-radius);
|
|
margin-right: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
text-decoration: none;
|
|
color: var(--accent);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.attachment:hover {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
|
|
.attachment i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.tag-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 8px;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: white;
|
|
transition: all 0.2s;
|
|
cursor: default;
|
|
}
|
|
|
|
.tag-badge:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.tag-badge .btn-close {
|
|
font-size: 0.6rem;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.tag-badge .btn-close:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.add-tag-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 2px dashed var(--accent-light);
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
color: var(--accent);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.add-tag-btn:hover {
|
|
border-color: var(--accent);
|
|
background: var(--accent-light);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-state i {
|
|
font-size: 2rem;
|
|
margin-bottom: 0.5rem;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.description-box {
|
|
background: var(--bg-body);
|
|
padding: 1.5rem;
|
|
border-radius: var(--border-radius);
|
|
white-space: pre-wrap;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.contact-item {
|
|
padding: 0.75rem;
|
|
margin-bottom: 0.5rem;
|
|
background: var(--accent-light);
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.contact-item:hover {
|
|
transform: translateX(3px);
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.contact-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.contact-name {
|
|
font-weight: 600;
|
|
color: var(--accent);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.contact-details {
|
|
font-size: 0.85rem;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.contact-role-badge {
|
|
padding: 0.25rem 0.6rem;
|
|
border-radius: 4px;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
/* Standard roller */
|
|
.role-primary { background: #28a745; color: white; }
|
|
.role-requester { background: #17a2b8; color: white; }
|
|
.role-assignee { background: #ffc107; color: #000; }
|
|
.role-cc { background: #6c757d; color: white; }
|
|
.role-observer { background: #e9ecef; color: #495057; }
|
|
|
|
/* Almindelige roller */
|
|
.role-ekstern_it { background: #6f42c1; color: white; }
|
|
.role-third_party { background: #fd7e14; color: white; }
|
|
.role-electrician { background: #20c997; color: white; }
|
|
.role-consultant { background: #0dcaf0; color: #000; }
|
|
.role-vendor { background: #dc3545; color: white; }
|
|
|
|
/* Default for custom roller */
|
|
.contact-role-badge:not([class*="role-primary"]):not([class*="role-requester"]):not([class*="role-assignee"]):not([class*="role-cc"]):not([class*="role-observer"]):not([class*="role-ekstern"]):not([class*="role-third"]):not([class*="role-electrician"]):not([class*="role-consultant"]):not([class*="role-vendor"]) {
|
|
background: var(--accent);
|
|
color: white;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4">
|
|
<!-- Ticket Header -->
|
|
<div class="ticket-header">
|
|
<div class="ticket-number">{{ ticket.ticket_number }}</div>
|
|
<div class="ticket-title">{{ ticket.subject }}</div>
|
|
<div class="mt-3">
|
|
<span class="badge badge-status-{{ ticket.status }}">
|
|
{{ ticket.status.replace('_', ' ').title() }}
|
|
</span>
|
|
<span class="badge badge-priority-{{ ticket.priority }}">
|
|
{{ ticket.priority.title() }} Priority
|
|
</span>
|
|
</div>
|
|
<div class="tags-container" id="ticketTags">
|
|
<!-- Tags loaded via JavaScript -->
|
|
</div>
|
|
<button class="add-tag-btn mt-2" onclick="showTagPicker('ticket', {{ ticket.id }}, reloadTags)">
|
|
<i class="bi bi-plus-circle"></i> Tilføj Tag (⌥⇧T)
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="action-buttons mb-4">
|
|
<a href="/api/v1/ticket/tickets/{{ ticket.id }}" class="btn btn-outline-primary">
|
|
<i class="bi bi-pencil"></i> Rediger
|
|
</a>
|
|
<button class="btn btn-outline-secondary" onclick="addComment()">
|
|
<i class="bi bi-chat"></i> Tilføj Kommentar
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="addWorklog()">
|
|
<i class="bi bi-clock"></i> Log Tid
|
|
</button>
|
|
<a href="/ticket/tickets" class="btn btn-outline-secondary">
|
|
<i class="bi bi-arrow-left"></i> Tilbage
|
|
</a>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Main Content -->
|
|
<div class="col-lg-8">
|
|
<!-- Description -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-file-text"></i> Beskrivelse
|
|
</div>
|
|
<div class="description-box">
|
|
{{ ticket.description or 'Ingen beskrivelse' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Comments -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-chat-dots"></i> Kommentarer ({{ comments|length }})
|
|
</div>
|
|
{% if comments %}
|
|
{% for comment in comments %}
|
|
<div class="comment {% if comment.internal_note %}internal{% endif %}">
|
|
<div class="comment-header">
|
|
<span class="comment-author">
|
|
<i class="bi bi-person-circle"></i>
|
|
{{ comment.user_name or 'System' }}
|
|
{% if comment.internal_note %}
|
|
<span class="badge bg-warning text-dark ms-2">Internal</span>
|
|
{% endif %}
|
|
</span>
|
|
<span class="comment-date">
|
|
{{ comment.created_at.strftime('%d-%m-%Y %H:%M') if comment.created_at else '-' }}
|
|
</span>
|
|
</div>
|
|
<div class="comment-text">
|
|
{{ comment.comment_text }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="bi bi-chat"></i>
|
|
<p>Ingen kommentarer endnu</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Worklog -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-clock-history"></i> Worklog ({{ worklog|length }})
|
|
</div>
|
|
{% if worklog %}
|
|
<div class="table-responsive">
|
|
<table class="table worklog-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Dato</th>
|
|
<th>Timer</th>
|
|
<th>Type</th>
|
|
<th>Beskrivelse</th>
|
|
<th>Status</th>
|
|
<th>Medarbejder</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for entry in worklog %}
|
|
<tr>
|
|
<td>{{ entry.work_date.strftime('%d-%m-%Y') if entry.work_date else '-' }}</td>
|
|
<td><strong>{{ "%.2f"|format(entry.hours) }}t</strong></td>
|
|
<td>{{ entry.work_type }}</td>
|
|
<td>{{ entry.description or '-' }}</td>
|
|
<td>
|
|
<span class="badge {% if entry.status == 'billable' %}bg-success{% elif entry.status == 'draft' %}bg-warning{% else %}bg-secondary{% endif %}">
|
|
{{ entry.status }}
|
|
</span>
|
|
</td>
|
|
<td>{{ entry.user_name or '-' }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<i class="bi bi-clock"></i>
|
|
<p>Ingen worklog entries endnu</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Attachments -->
|
|
{% if attachments %}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-paperclip"></i> Vedhæftninger ({{ attachments|length }})
|
|
</div>
|
|
{% for attachment in attachments %}
|
|
<a href="/api/v1/attachments/{{ attachment.id }}/download" class="attachment">
|
|
<i class="bi bi-file-earmark"></i>
|
|
{{ attachment.filename }}
|
|
<small class="ms-2">({{ (attachment.file_size / 1024)|round(1) }} KB)</small>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Ticket Info -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-info-circle"></i> Ticket Information
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<label>Kunde</label>
|
|
<div class="value">
|
|
{% if ticket.customer_name %}
|
|
<a href="/customers/{{ ticket.customer_id }}" style="text-decoration: none; color: var(--accent);">
|
|
{{ ticket.customer_name }}
|
|
</a>
|
|
{% else %}
|
|
<span class="text-muted">Ikke angivet</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<label>Tildelt til</label>
|
|
<div class="value">
|
|
{{ ticket.assigned_to_name or 'Ikke tildelt' }}
|
|
</div>
|
|
</div>
|
|
<div class="info-item mb-3">
|
|
<label>Oprettet</label>
|
|
<div class="value">
|
|
{{ ticket.created_at.strftime('%d-%m-%Y %H:%M') if ticket.created_at else '-' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contacts -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-people"></i> Kontakter
|
|
<button class="btn btn-sm btn-outline-primary ms-auto" onclick="showAddContactModal()">
|
|
<i class="bi bi-plus-circle"></i> Tilføj
|
|
</button>
|
|
</div>
|
|
<div id="contactsList">
|
|
<div class="text-center text-muted py-2">
|
|
<i class="bi bi-hourglass-split"></i> Indlæser...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Back to Ticket Info continuation -->
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="info-item mb-3">
|
|
<label>Senest opdateret</label>
|
|
<div class="value">
|
|
{{ ticket.updated_at.strftime('%d-%m-%Y %H:%M') if ticket.updated_at else '-' }}
|
|
</div>
|
|
</div>
|
|
{% if ticket.resolved_at %}
|
|
<div class="info-item mb-3">
|
|
<label>Løst</label>
|
|
<div class="value">
|
|
{{ ticket.resolved_at.strftime('%d-%m-%Y %H:%M') }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if ticket.first_response_at %}
|
|
<div class="info-item mb-3">
|
|
<label>Første svar</label>
|
|
<div class="value">
|
|
{{ ticket.first_response_at.strftime('%d-%m-%Y %H:%M') }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags -->
|
|
{% if ticket.tags %}
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="section-title">
|
|
<i class="bi bi-tags"></i> Tags
|
|
</div>
|
|
{% for tag in ticket.tags %}
|
|
<span class="badge bg-secondary me-1 mb-1">#{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Add comment (placeholder - integrate with API)
|
|
function addComment() {
|
|
alert('Add comment functionality - integrate with POST /api/v1/ticket/tickets/{{ ticket.id }}/comments');
|
|
}
|
|
|
|
// Add worklog (placeholder - integrate with API)
|
|
function addWorklog() {
|
|
alert('Add worklog functionality - integrate with POST /api/v1/ticket/tickets/{{ ticket.id }}/worklog');
|
|
}
|
|
|
|
// Load and render ticket tags
|
|
async function loadTicketTags() {
|
|
try {
|
|
const response = await fetch('/api/v1/tags/entity/ticket/{{ ticket.id }}');
|
|
if (!response.ok) return;
|
|
|
|
const tags = await response.json();
|
|
const container = document.getElementById('ticketTags');
|
|
|
|
if (tags.length === 0) {
|
|
container.innerHTML = '<small class="text-muted"><i class="bi bi-tags"></i> Ingen tags endnu</small>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = tags.map(tag => `
|
|
<span class="tag-badge" style="background-color: ${tag.color};">
|
|
${tag.icon ? `<i class="bi ${tag.icon}"></i>` : ''}
|
|
${tag.name}
|
|
<button type="button" class="btn-close btn-close-white btn-sm"
|
|
onclick="removeTag(${tag.id}, '${tag.name}')"
|
|
aria-label="Fjern"></button>
|
|
</span>
|
|
`).join('');
|
|
} catch (error) {
|
|
console.error('Error loading tags:', error);
|
|
}
|
|
}
|
|
|
|
async function removeTag(tagId, tagName) {
|
|
if (!confirm(`Fjern tag "${tagName}"?`)) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/tags/entity?entity_type=ticket&entity_id={{ ticket.id }}&tag_id=${tagId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to remove tag');
|
|
await loadTicketTags();
|
|
} catch (error) {
|
|
console.error('Error removing tag:', error);
|
|
alert('Fejl ved fjernelse af tag');
|
|
}
|
|
}
|
|
|
|
function reloadTags() {
|
|
loadTicketTags();
|
|
}
|
|
|
|
// ============================================
|
|
// CONTACTS MANAGEMENT
|
|
// ============================================
|
|
|
|
async function loadContacts() {
|
|
try {
|
|
const response = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/contacts');
|
|
if (!response.ok) throw new Error('Failed to load contacts');
|
|
|
|
const data = await response.json();
|
|
const container = document.getElementById('contactsList');
|
|
|
|
if (!data.contacts || data.contacts.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state py-2">
|
|
<i class="bi bi-person-x"></i>
|
|
<p class="mb-0 small">Ingen kontakter tilføjet endnu</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = data.contacts.map(contact => `
|
|
<div class="contact-item">
|
|
<div class="contact-info">
|
|
<div class="contact-name">
|
|
<span class="contact-role-badge role-${contact.role}">
|
|
${getRoleLabel(contact.role)}
|
|
</span>
|
|
${contact.first_name} ${contact.last_name}
|
|
</div>
|
|
<div class="contact-details">
|
|
${contact.email ? `<i class="bi bi-envelope"></i> ${contact.email}` : ''}
|
|
${contact.phone ? `<i class="bi bi-telephone ms-2"></i> ${contact.phone}` : ''}
|
|
</div>
|
|
${contact.notes ? `<div class="contact-details mt-1"><i class="bi bi-sticky"></i> ${contact.notes}</div>` : ''}
|
|
</div>
|
|
<div class="btn-group btn-group-sm">
|
|
<button class="btn btn-outline-primary" onclick="editContactRole(${contact.contact_id}, '${contact.role}', '${contact.notes || ''}')">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
<button class="btn btn-outline-danger" onclick="removeContact(${contact.contact_id}, '${contact.first_name} ${contact.last_name}')">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
} catch (error) {
|
|
console.error('Error loading contacts:', error);
|
|
document.getElementById('contactsList').innerHTML = `
|
|
<div class="alert alert-warning mb-0">
|
|
<i class="bi bi-exclamation-triangle"></i> Kunne ikke indlæse kontakter
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
function getRoleLabel(role) {
|
|
const labels = {
|
|
'primary': '⭐ Primær',
|
|
'requester': '📝 Anmoder',
|
|
'assignee': '👤 Ansvarlig',
|
|
'cc': '📧 CC',
|
|
'observer': '👁 Observer',
|
|
'ekstern_it': '💻 Ekstern IT',
|
|
'third_party': '🤝 3. part',
|
|
'electrician': '⚡ Elektriker',
|
|
'consultant': '🎓 Konsulent',
|
|
'vendor': '🏢 Leverandør'
|
|
};
|
|
return labels[role] || ('📌 ' + role.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()));
|
|
}
|
|
|
|
async function showAddContactModal() {
|
|
// Fetch all contacts for selection
|
|
try {
|
|
const response = await fetch('/api/v1/contacts?limit=1000');
|
|
if (!response.ok) throw new Error('Failed to load contacts');
|
|
|
|
const data = await response.json();
|
|
const contacts = data.contacts || [];
|
|
|
|
// Check if this ticket has any contacts yet
|
|
const ticketContactsResp = await fetch('/api/v1/ticket/tickets/{{ ticket.id }}/contacts');
|
|
const ticketContacts = await ticketContactsResp.json();
|
|
const isFirstContact = !ticketContacts.contacts || ticketContacts.contacts.length === 0;
|
|
|
|
// Create modal content
|
|
const modalHtml = `
|
|
<div class="modal fade" id="addContactModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="bi bi-person-plus"></i> Tilføj Kontakt</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="mb-3">
|
|
<label class="form-label">Kontakt *</label>
|
|
<select class="form-select" id="contactSelect" required>
|
|
<option value="">Vælg kontakt...</option>
|
|
${contacts.map(c => `
|
|
<option value="${c.id}">${c.first_name} ${c.last_name} ${c.email ? '(' + c.email + ')' : ''}</option>
|
|
`).join('')}
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Rolle *</label>
|
|
<div id="firstContactNotice" class="alert alert-info mb-2" style="display: none;">
|
|
<i class="bi bi-star"></i> <strong>Første kontakt</strong> - Rollen sættes automatisk til "Primær kontakt"
|
|
</div>
|
|
<select class="form-select" id="roleSelect" onchange="toggleCustomRole()" required>
|
|
<optgroup label="Standard roller">
|
|
<option value="primary">⭐ Primær kontakt</option>
|
|
<option value="requester">📝 Anmoder</option>
|
|
<option value="assignee">👤 Ansvarlig</option>
|
|
<option value="cc">📧 CC (Carbon Copy)</option>
|
|
<option value="observer" selected>👁 Observer</option>
|
|
</optgroup>
|
|
<optgroup label="Almindelige roller">
|
|
<option value="ekstern_it">💻 Ekstern IT</option>
|
|
<option value="third_party">🤝 3. part leverandør</option>
|
|
<option value="electrician">⚡ Elektriker</option>
|
|
<option value="consultant">🎓 Konsulent</option>
|
|
<option value="vendor">🏢 Leverandør</option>
|
|
</optgroup>
|
|
<optgroup label="Custom">
|
|
<option value="_custom">✏️ Indtast custom rolle...</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3" id="customRoleDiv" style="display: none;">
|
|
<label class="form-label">Custom Rolle</label>
|
|
<input type="text" class="form-control" id="customRoleInput"
|
|
placeholder="f.eks. 'bygningsingeniør' eller 'projektleder'">
|
|
<small class="text-muted">Brug lowercase og underscore i stedet for mellemrum (f.eks. bygnings_ingeniør)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="form-label">Noter (valgfri)</label>
|
|
<textarea class="form-control" id="contactNotes" rows="2" placeholder="Evt. noter om kontaktens rolle..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuller</button>
|
|
<button type="button" class="btn btn-primary" onclick="addContact()">
|
|
<i class="bi bi-plus-circle"></i> Tilføj
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Remove old modal if exists
|
|
const oldModal = document.getElementById('addContactModal');
|
|
if (oldModal) oldModal.remove();
|
|
|
|
// Append and show new modal
|
|
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
|
const modal = new bootstrap.Modal(document.getElementById('addContactModal'));
|
|
|
|
// Show notice and disable role selector if first contact
|
|
if (isFirstContact) {
|
|
document.getElementById('firstContactNotice').style.display = 'block';
|
|
document.getElementById('roleSelect').value = 'primary';
|
|
document.getElementById('roleSelect').disabled = true;
|
|
}
|
|
|
|
modal.show();
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
alert('Fejl ved indlæsning af kontakter');
|
|
}
|
|
}
|
|
|
|
function toggleCustomRole() {
|
|
const roleSelect = document.getElementById('roleSelect');
|
|
const customDiv = document.getElementById('customRoleDiv');
|
|
const customInput = document.getElementById('customRoleInput');
|
|
|
|
if (roleSelect.value === '_custom') {
|
|
customDiv.style.display = 'block';
|
|
customInput.required = true;
|
|
} else {
|
|
customDiv.style.display = 'none';
|
|
customInput.required = false;
|
|
}
|
|
}
|
|
|
|
async function addContact() {
|
|
const contactId = document.getElementById('contactSelect').value;
|
|
let role = document.getElementById('roleSelect').value;
|
|
const notes = document.getElementById('contactNotes').value;
|
|
|
|
if (!contactId) {
|
|
alert('Vælg venligst en kontakt');
|
|
return;
|
|
}
|
|
|
|
// If custom role selected, use the custom input
|
|
if (role === '_custom') {
|
|
const customRole = document.getElementById('customRoleInput').value.trim();
|
|
if (!customRole) {
|
|
alert('Indtast venligst en custom rolle');
|
|
return;
|
|
}
|
|
role = customRole.toLowerCase().replace(/\s+/g, '_').replace(/-/g, '_');
|
|
}
|
|
|
|
try {
|
|
const url = `/api/v1/ticket/tickets/{{ ticket.id }}/contacts?contact_id=${contactId}&role=${role}${notes ? '¬es=' + encodeURIComponent(notes) : ''}`;
|
|
const response = await fetch(url, { method: 'POST' });
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json();
|
|
throw new Error(error.detail || 'Failed to add contact');
|
|
}
|
|
|
|
// Close modal and reload
|
|
bootstrap.Modal.getInstance(document.getElementById('addContactModal')).hide();
|
|
await loadContacts();
|
|
} catch (error) {
|
|
console.error('Error adding contact:', error);
|
|
alert('Fejl: ' + error.message);
|
|
}
|
|
}
|
|
|
|
async function editContactRole(contactId, currentRole, currentNotes) {
|
|
const newRole = prompt(`Ændr rolle (primary, requester, assignee, cc, observer):`, currentRole);
|
|
if (!newRole || newRole === currentRole) return;
|
|
|
|
const notes = prompt(`Noter (valgfri):`, currentNotes);
|
|
|
|
try {
|
|
const url = `/api/v1/ticket/tickets/{{ ticket.id }}/contacts/${contactId}?role=${newRole}${notes ? '¬es=' + encodeURIComponent(notes) : ''}`;
|
|
const response = await fetch(url, { method: 'PUT' });
|
|
|
|
if (!response.ok) throw new Error('Failed to update contact');
|
|
await loadContacts();
|
|
} catch (error) {
|
|
console.error('Error updating contact:', error);
|
|
alert('Fejl ved opdatering af kontakt');
|
|
}
|
|
}
|
|
|
|
async function removeContact(contactId, contactName) {
|
|
if (!confirm(`Fjern ${contactName} fra ticket?`)) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/v1/ticket/tickets/{{ ticket.id }}/contacts/${contactId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (!response.ok) throw new Error('Failed to remove contact');
|
|
await loadContacts();
|
|
} catch (error) {
|
|
console.error('Error removing contact:', error);
|
|
alert('Fejl ved fjernelse af kontakt');
|
|
}
|
|
}
|
|
|
|
// Load tags and contacts on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadTicketTags();
|
|
loadContacts();
|
|
});
|
|
|
|
// Override global tag picker to auto-reload after adding
|
|
if (window.tagPicker) {
|
|
const originalShow = window.tagPicker.show.bind(window.tagPicker);
|
|
window.showTagPicker = function(entityType, entityId, onSelect) {
|
|
window.tagPicker.show(entityType, entityId, () => {
|
|
loadTicketTags();
|
|
if (onSelect) onSelect();
|
|
});
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock %}
|