Skip to content

Commit a94e672

Browse files
tdunn891tdunn891
committed
Improve view_ticket template with jumbotron
1 parent c39b2b2 commit a94e672

File tree

1 file changed

+192
-108
lines changed

1 file changed

+192
-108
lines changed

‎tickets/templates/view_ticket.html‎

Lines changed: 192 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,205 @@
11
{% extends "base.html" %}
22
{% load bootstrap_tags %}
33
{% block title %}
4-
View Ticket | {{ ticket.id }}
4+
View Ticket (ID: {{ ticket.id }})
55
{% endblock %}
66
{% block page_heading %}
7-
<h2>View Ticket | {{ ticket.id}} </h2>
8-
<hr>
7+
View Ticket: ({{ticket.id}})
98
{% endblock %}
109
{% block content %}
11-
<div class="row">
12-
<div class="col col-5">
13-
<h4>Details</h4>
14-
<table class="table table-sm">
15-
{% comment %} <thead> {% endcomment %}
16-
{% comment %} <tr> {% endcomment %}
17-
{% comment %} <th scope="col">Field</th> {% endcomment %}
18-
{% comment %} <th scope="col">Value</th> {% endcomment %}
19-
{% comment %} </tr> {% endcomment %}
20-
{% comment %} </thead> {% endcomment %}
21-
<tbody>
22-
<tr>
23-
<th>Summary</th>
24-
<td>{{ ticket.summary }}</td>
25-
</tr>
26-
<tr>
27-
<th>Ticket Type</th>
28-
<td>{{ ticket.ticket_type }}</td>
29-
</tr>
30-
<tr>
31-
<th>Submitted By </th>
32-
<td>{{ ticket.submitted_by }}</td>
33-
</tr>
34-
<tr>
35-
<th>Assigned To</th>
36-
<td>{{ ticket.assigned_to }}</td>
37-
</tr>
38-
<tr>
39-
<th>Status</th>
40-
<td>{{ ticket.status }}</td>
41-
</tr>
42-
<tr>
43-
<th>Priority</th>
44-
<td><span class="badge badge-pill badge-warning">{{ ticket.priority }}</span></td>
45-
</tr>
46-
<tr>
47-
<th>Created Date</th>
48-
<td>{{ ticket.created_date }}</td>
49-
</tr>
50-
<tr>
51-
<th>Tags</th>
52-
<td>{{ticket.tags.all|join:", "}}</td>
53-
</tr>
54-
<tr>
55-
<th>Upvotes</th>
56-
<td>{{ ticket.upvotes }} <a href="#" class="btn btn-outline-primary btn-sm">+1</a></td>
57-
</tr>
58-
</tbody>
59-
</table>
60-
<a class="btn btn-primary" href="{% url 'edit_ticket' ticket.id %}">Edit</a>
61-
{% if ticket.status != 'Cancelled' %}
62-
<a class="btn btn-warning" href="{% url 'cancel_ticket' ticket.id %}">Cancel</a>
63-
{% endif %}
64-
<a class="btn btn-danger" href="{% url 'delete_ticket' ticket.id %}">Delete</a>
10+
<nav>
11+
<div class="nav nav-tabs" id="nav-tab" role="tablist">
12+
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
13+
aria-controls="nav-home" aria-selected="true">Details</a>
14+
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
15+
aria-controls="nav-profile" aria-selected="false">Change History</a>
6516
</div>
66-
<div class="col col-7">
67-
<h4>Change History</h4>
68-
<table class="table table-sm">
69-
<thead>
70-
<tr>
71-
<th scope="col">Property</th>
72-
<th scope="col">New Value</th>
73-
<th scope="col">Old Value</th>
74-
<th scope="col">User</th>
75-
<th scope="col">Date</th>
76-
</tr>
77-
</thead>
78-
<tbody>
79-
{% if all_deltas %}
80-
{% for delta in all_deltas %}
81-
<tr>
82-
<td>{{ delta.field }}</td>
83-
<td>{{ delta.new_value }}</td>
84-
<td>{{ delta.old_value }}</td>
85-
<td>{{ delta.changed_by }}</td>
86-
<td>{{ delta.date_changed }}</td>
87-
</tr>
88-
{% endfor %}
89-
{% else %}
90-
<tr>
91-
<td>-</td>
92-
<td>-</td>
93-
<td>-</td>
94-
<td>-</td>
95-
<td>-</td>
96-
</tr>
97-
{% endif %}
98-
</tbody>
99-
</table>
17+
</nav>
18+
19+
<!-- Internal Tabs -->
20+
<div class="tab-content" id="nav-tabContent">
21+
<!-- Details Pane -->
22+
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
23+
<div class="jumbotron">
24+
<div class="row">
25+
<div class="col col-8">
26+
<h4 class="display-5">{{ ticket.summary}}
27+
{% if ticket.ticket_type == "Bug" %}
28+
<i class="material-icons">bug_report</i>
29+
{% elif ticket.ticket_type == "Feature" %}
30+
<i class="material-icons">build</i>
31+
{% endif %}
32+
</h4>
33+
<p class="lead">{{ ticket.description }}</p>
34+
</div>
35+
</div>
36+
<div class="row">
37+
<div class="col col-7">
38+
<table class="table table-sm">
39+
<tbody>
40+
<tr>
41+
<th>Priority</th>
42+
<td>
43+
{% if ticket.priority == "Low" %}
44+
<span class="badge badge-info">
45+
{% elif ticket.priority == "Medium" %}
46+
<span class="badge badge-warning">
47+
{% elif ticket.priority == "High" %}
48+
<span class="badge badge-danger">
49+
{% endif %}
50+
{{ ticket.priority }}
51+
</span>
52+
</td>
53+
</tr>
54+
<tr>
55+
<th>Status</th>
56+
<td>{{ ticket.status }}</td>
57+
</tr>
58+
<tr>
59+
<th>Submitter</th>
60+
<td>{{ ticket.submitted_by }}</td>
61+
</tr>
62+
<tr>
63+
<th>Assignee</th>
64+
<td>{{ ticket.assigned_to }}</td>
65+
</tr>
66+
<tr>
67+
<th>Created</th>
68+
<td>{{ ticket.created_date }}</td>
69+
</tr>
70+
<tr>
71+
<th>Resolved</th>
72+
{% if ticket.est_resolved_date == None %}
73+
<td>--</td>
74+
{% else %}
75+
<td>{{ ticket.est_resolved_date }}</td>
76+
{% endif %}
77+
</tr>
78+
<tr>
79+
<th>Age (days)</th>
80+
<td>{{ ticket.age }}</td>
81+
</tr>
82+
<tr>
83+
<th>Tags</th>
84+
<td>{{ticket.tags.all|join:", "}}</td>
85+
</tr>
86+
</tbody>
87+
</table>
88+
<hr>
89+
<a href="{% url 'upvote' ticket.id %}"
90+
class="btn btn-outline-primary btn-sm float-right">{{ ticket.upvotes }}
91+
Upvote<i class="material-icons">arrow_upward</i></a>
92+
<a class="btn btn-primary" href="{% url 'edit_ticket' ticket.id %}">Edit</a>
93+
{% if ticket.status != 'Cancelled' %}
94+
<a class="btn btn-warning" href="{% url 'cancel_ticket' ticket.id %}">Cancel</a>
95+
{% endif %}
96+
<a class="btn btn-danger" href="{% url 'delete_ticket' ticket.id %}">Delete</a>
97+
</div>
98+
99+
<div class="col col-5">
100+
{% if all_deltas %}
101+
<h5><i class="material-icons">timeline</i> Activity</h5>
102+
<ul>
103+
{% for delta in all_deltas %}
104+
<li>
105+
<!-- {{ delta.date_changed }}<br> -->
106+
<b>{{ delta.changed_by }}</b> set <b>{{ delta.field }}</b> to
107+
<b>{{ delta.new_value }}</b>
108+
</li>
109+
{% endfor %}
110+
</ul>
111+
{% endif %}
112+
</div>
113+
</div>
114+
<div class="row">
115+
<div class="col col-6">
116+
{% if ticket.screenshot %}
117+
<b>Screenshot:</b>
118+
<a href="{{ ticket.screenshot.url }}" target="_blank">
119+
<img src="{{ ticket.screenshot.url }}" alt="{{ ticket.screenshot }}" />
120+
</a>
121+
{% endif %}
122+
</div>
123+
</div>
124+
</div>
125+
<hr>
126+
<div class="row">
127+
<div class="col col-12">
128+
<h4><i class="material-icons">insert_comment</i> Comments ({{ comments.count }})</h4>
129+
<ul class="list-group">
130+
{% for comment in comments %}
131+
<li class="list-group-item">
132+
<i class="material-icons rounded-circle float-left">account_circle</i>
133+
<b>&nbsp;&nbsp;{{ comment.user }}</b><span class="text-muted">
134+
<small>&nbsp;{{ comment.date }}</small></span>
135+
<br>&nbsp;&nbsp;{{ comment.comment_body }}
136+
</li>
137+
{% endfor %}
138+
</ul>
139+
<form method="post" enctype="multipart/form-data">
140+
{% csrf_token %}
141+
{{ form | as_bootstrap }}
142+
<button class="btn btn-outline-primary" type="submit">Submit</button>
143+
</form>
144+
</div>
145+
</div>
100146
</div>
101-
</div>
102-
<hr>
103-
<div class="row">
104-
<div class="col col-12">
105-
<h4>Comments</h4>
106-
<ul class="list-group">
107-
{% for comment in comments %}
108-
<li class="list-group-item"><b>@{{ comment.user }}</b><span class="float-right">
109-
<i>{{ comment.date }}</i></span>
110-
<br>{{ comment.comment_body }}
111-
</li>
147+
<!-- Change History Pane -->
148+
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
149+
<div class="jumbotron">
150+
<div class="row">
151+
<div class="col col-12">
152+
<h4 class="display-5">{{ ticket.summary}}
153+
{% if ticket.ticket_type == "Bug" %}
154+
<i class="material-icons">bug_report</i>
155+
{% elif ticket.ticket_type == "Feature" %}
156+
<i class="material-icons">build</i>
157+
{% endif %}
158+
</h4>
159+
<p class="lead">{{ ticket.description }}</p>
160+
<br>
161+
<table class="table table-sm">
162+
<thead>
163+
<tr>
164+
<th scope="col">Property</th>
165+
<th scope="col">New Value</th>
166+
<th scope="col">Old Value</th>
167+
<th scope="col">User</th>
168+
<th scope="col">Date</th>
169+
</tr>
170+
</thead>
171+
<tbody>
172+
{% if all_deltas %}
173+
{% for delta in all_deltas %}
174+
<!-- Exclude 'upvotes' -->
175+
<tr>
176+
<td>{{ delta.field }}</td>
177+
<td>{{ delta.new_value }}</td>
178+
<td>{{ delta.old_value }}</td>
179+
<td>{{ delta.changed_by }}</td>
180+
<td>{{ delta.date_changed }}</td>
181+
</tr>
182+
{% endfor %}
183+
{% else %}
184+
<tr>
185+
<td>-</td>
186+
<td>-</td>
187+
<td>-</td>
188+
<td>-</td>
189+
<td>-</td>
190+
</tr>
191+
{% endif %}
192+
</tbody>
193+
</table>
194+
</div>
195+
</div>
196+
</div>
197+
<!-- <h4>Activity</h4>
198+
<ul>
199+
{% for delta in all_deltas %}
200+
<li>{{ delta.changed_by}} updated <b>{{ delta.field }}</b> to <b>{{ delta.new_value }}</b></li>
112201
{% endfor %}
113-
</ul>
114-
<form method="post" enctype="multipart/form-data">
115-
{% csrf_token %}
116-
{{ form | as_bootstrap }}
117-
<button class="btn btn-outline-primary" type="submit">Submit</button>
118-
</form>
202+
</ul> -->
119203
</div>
120204
</div>
121205
{% endblock %}

0 commit comments

Comments
 (0)