131 lines
6.0 KiB
HTML
131 lines
6.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Support Tickets{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1>Support Tickets</h1>
|
|
<a href="/tickets/new" class="btn btn-primary">New Ticket</a>
|
|
</div>
|
|
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header bg-light">
|
|
<h5 class="mb-0">Filter Tickets</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form action="/tickets" method="get" up-target="#tickets-container" up-transition="cross-fade">
|
|
<div class="row g-3">
|
|
<div class="col-md-4">
|
|
<label for="status" class="form-label">Status</label>
|
|
<select class="form-select" id="status" name="status" up-autosubmit>
|
|
<option value="">All Statuses</option>
|
|
<option value="open" {% if status == "open" %}selected{% endif %}>Open</option>
|
|
<option value="in_progress" {% if status == "in_progress" %}selected{% endif %}>In Progress</option>
|
|
<option value="waiting_for_customer" {% if status == "waiting_for_customer" %}selected{% endif %}>Waiting for Customer</option>
|
|
<option value="resolved" {% if status == "resolved" %}selected{% endif %}>Resolved</option>
|
|
<option value="closed" {% if status == "closed" %}selected{% endif %}>Closed</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="priority" class="form-label">Priority</label>
|
|
<select class="form-select" id="priority" name="priority" up-autosubmit>
|
|
<option value="">All Priorities</option>
|
|
<option value="low" {% if priority == "low" %}selected{% endif %}>Low</option>
|
|
<option value="medium" {% if priority == "medium" %}selected{% endif %}>Medium</option>
|
|
<option value="high" {% if priority == "high" %}selected{% endif %}>High</option>
|
|
<option value="critical" {% if priority == "critical" %}selected{% endif %}>Critical</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="search" class="form-label">Search</label>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="search" name="search" value="{{ search | default(value='') }}" placeholder="Search tickets...">
|
|
<button class="btn btn-outline-secondary" type="submit">
|
|
<i class="bi bi-search"></i> Search
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tickets-container">
|
|
{% if tickets | length > 0 %}
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Title</th>
|
|
<th>Status</th>
|
|
<th>Priority</th>
|
|
<th>Created</th>
|
|
<th>Updated</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for ticket in tickets %}
|
|
<tr>
|
|
<td>{{ ticket.id | truncate(length=8) }}</td>
|
|
<td>
|
|
<a href="/tickets/{{ ticket.id }}" up-layer="new modal" up-size="large">
|
|
{{ ticket.title }}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<span class="badge
|
|
{% if ticket.status == 'Open' %}bg-danger{% endif %}
|
|
{% if ticket.status == 'In Progress' %}bg-warning{% endif %}
|
|
{% if ticket.status == 'Waiting for Customer' %}bg-info{% endif %}
|
|
{% if ticket.status == 'Resolved' %}bg-success{% endif %}
|
|
{% if ticket.status == 'Closed' %}bg-secondary{% endif %}
|
|
">
|
|
{{ ticket.status }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge
|
|
{% if ticket.priority == 'Low' %}bg-success{% endif %}
|
|
{% if ticket.priority == 'Medium' %}bg-info{% endif %}
|
|
{% if ticket.priority == 'High' %}bg-warning{% endif %}
|
|
{% if ticket.priority == 'Critical' %}bg-danger{% endif %}
|
|
">
|
|
{{ ticket.priority }}
|
|
</span>
|
|
</td>
|
|
<td>{{ ticket.created_at | date(format="%Y-%m-%d %H:%M") }}</td>
|
|
<td>{{ ticket.updated_at | date(format="%Y-%m-%d %H:%M") }}</td>
|
|
<td>
|
|
<a href="/tickets/{{ ticket.id }}" class="btn btn-sm btn-outline-primary" up-layer="new modal" up-size="large">
|
|
View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
<h4 class="alert-heading">No tickets found!</h4>
|
|
<p>There are no tickets matching your filter criteria. Try adjusting your filters or create a new ticket.</p>
|
|
<hr>
|
|
<p class="mb-0">
|
|
<a href="/tickets/new" class="btn btn-primary">Create New Ticket</a>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Initialize Unpoly event handlers
|
|
up.on('up:fragment:inserted', function(event) {
|
|
// This will run whenever a fragment is updated via Unpoly
|
|
console.log('Fragment updated:', event.target);
|
|
});
|
|
</script>
|
|
{% endblock %} |