Skip to content

Commit c2a3aa6

Browse files
sde1000sde1000
committed
Replace edit-in-place forms with modal dialogs
1 parent 453434b commit c2a3aa6

10 files changed

Lines changed: 366 additions & 171 deletions

File tree

‎quicktill/tillweb/static/tillweb/tillweb-bootstrap.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ table.dataTable th div.dt-column-header {
4646
padding-right: 0 !important;
4747
}
4848

49+
/* Remove the bottom margin from the json viewer */
50+
pre.json-viewer {
51+
margin-bottom: 0;
52+
}
53+
4954
.error {
5055
color: red;
5156
}

‎quicktill/tillweb/templates/tillweb/paymentlist.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<div class="table-responsive">
12
<table class="table table-striped table-hover table-sm mb-2" id="payments">
23
<thead class="table-light">
34
<tr>
@@ -33,6 +34,7 @@
3334
{% endfor %}
3435
</tbody>
3536
</table>
37+
</div>
3638
<script type="text/javascript">
3739
$(document).ready(function(){
3840
$("#payments").DataTable(dt_sortonly);

‎quicktill/tillweb/templates/tillweb/paytype.html‎

Lines changed: 72 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{% extends "tillweb/tillweb.html" %}
22
{% load static %}
3+
{% load tillweb_utils %}
34

45
{% block title %}{{till}} — {{paytype.description}} payment method{% endblock %}
56

@@ -17,49 +18,83 @@
1718

1819
{% block tillcontent %}
1920

20-
{% if may_edit %}
21-
<form class="mb-2" action="" method="post">{% csrf_token %}
22-
{% include "form-horizontal.html" %}
23-
<button class="btn btn-primary" type="submit" name="submit_update">
24-
Update payment method
25-
</button>
26-
{% if not recent_payments and not recent_totals %}
27-
<button class="btn btn-danger" type="submit" name="submit_delete">
28-
Delete payment method
29-
</button>
21+
{% with dtc="col-sm-3 text-sm-end" ddc="col-sm-9" %}
22+
<dl class="row">
23+
<dt class="{{dtc}}">Code</dt>
24+
<dd class="{{ddc}}">{{paytype.paytype}}</dd>
25+
26+
<dt class="{{dtc}}">Description</dt>
27+
<dd class="{{ddc}}">{{paytype.description}}</dd>
28+
29+
<dt class="{{dtc}}">Driver name</dt>
30+
<dd class="{{ddc}}">{{paytype.driver_name}}</dd>
31+
32+
<dt class="{{dtc}}">Mode</dt>
33+
<dd class="{{ddc}}">{{paytype.mode_display}}</dd>
34+
35+
{% if paytype.config %}
36+
<dt class="{{dtc}}">Config</dt>
37+
<dd class="{{ddc}}"><div class="json-state">{{paytype.config}}</div></dd>
3038
{% endif %}
31-
</form>
32-
{% else %}
33-
<table class="kvtable mb-2">
34-
<tr><th scope="row">Code</th><td>{{paytype.paytype}}</td></tr>
35-
<tr><th scope="row">Description</th><td>{{paytype.description}}</td></tr>
36-
<tr><th scope="row">Driver name</th><td>{{paytype.driver_name}}</td></tr>
37-
<tr><th scope="row">Mode</th><td>{{paytype.mode_display}}</td></tr>
38-
<tr><th scope="row">Config</th><td>{{paytype.config}}</td></tr>
39-
<tr><th scope="row">Payments account</th><td>{{paytype.payments_account}}</td></tr>
40-
<tr><th scope="row">Fees account</th><td>{{paytype.fees_account}}</td></tr>
41-
<tr><th scope="row">Payment date policy</th><td>{{paytype.payment_date_policy}}</td></tr>
42-
</table>
43-
{% endif %}
4439

45-
{% if paytype.state %}
46-
<h2>Internal state</h2>
47-
<div class="json-state">{{paytype.state}}</div>
40+
<dt class="{{dtc}}">Payments account</dt>
41+
<dd class="{{ddc}}">{{paytype.payments_account}}</dd>
42+
43+
<dt class="{{dtc}}">Fees account</dt>
44+
<dd class="{{ddc}}">{{paytype.fees_account}}</dd>
45+
46+
<dt class="{{dtc}}">Payment date policy</dt>
47+
<dd class="{{ddc}}">{{paytype.payment_date_policy}}</dd>
48+
49+
{% if paytype.state %}
50+
<dt class="{{dtc}}">Internal state</dt>
51+
<dd class="{{ddc}}"><div class="json-state">{{paytype.state}}</div></dd>
52+
{% endif %}
53+
</dl>
54+
{% endwith %}
4855

4956
<script type="text/javascript">
50-
let elements = document.querySelectorAll('.json-state');
51-
52-
for (let elem of elements) {
53-
try {
54-
jsonObj = JSON.parse(elem.innerText);
55-
elem.innerText = "";
56-
jsonViewer = new JSONViewer();
57-
elem.appendChild(jsonViewer.getContainer());
58-
jsonViewer.showJSON(jsonObj, null, 0);
59-
} catch (err) {
57+
$(document).ready(function() {
58+
const elements = document.querySelectorAll('.json-state');
59+
60+
for (let elem of elements) {
61+
try {
62+
jsonObj = JSON.parse(elem.innerText);
63+
elem.innerText = "";
64+
jsonViewer = new JSONViewer();
65+
elem.appendChild(jsonViewer.getContainer());
66+
jsonViewer.showJSON(jsonObj, null, 0);
67+
} catch (err) {
68+
}
6069
}
61-
}
70+
});
6271
</script>
72+
73+
{% if may_edit %}
74+
<button class="btn btn-secondary mb-2" type="button" data-bs-toggle="modal" data-bs-target="#updateModal">
75+
Change settings
76+
</button>
77+
78+
{% modal "updateModal" dialog_class="modal-lg" title="Change settings" %}
79+
<form class="mb-2" action="" method="post">{% csrf_token %}
80+
<div class="modal-body">
81+
{% include "form.html" %}
82+
</div>
83+
<div class="modal-footer">
84+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
85+
Cancel
86+
</button>
87+
{% if not recent_payments and not recent_totals %}
88+
<button class="btn btn-danger" type="submit" name="submit_delete">
89+
Delete payment method
90+
</button>
91+
{% endif %}
92+
<button class="btn btn-primary" type="submit" name="submit_update">
93+
Update payment method
94+
</button>
95+
</div>
96+
</form>
97+
{% endmodal %}
6398
{% endif %}
6499

65100
<ul class="nav nav-tabs mb-2" id="tables" role="tablist">

‎quicktill/tillweb/templates/tillweb/stockitem.html‎

Lines changed: 85 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -11,55 +11,91 @@
1111
</div>
1212
{% endif %}
1313

14-
<table class="table">
15-
<tr><th scope="row">Stock ID</th><td>{{stock.id}}</td></tr>
16-
<tr><th scope="row">Check digits</th><td>{{stock.checkdigits}}</td></tr>
17-
<tr><th scope="row">Manufacturer</th><td><a href="{% url "tillweb-stocktype-search" %}?manufacturer={{stock.stocktype.manufacturer|urlencode}}">{{stock.stocktype.manufacturer}}</a></td></tr>
18-
<tr><th scope="row">Name</th><td><a href="{{stock.stocktype.get_absolute_url}}">{{stock.stocktype.name}}</a></td></tr>
19-
<tr><th scope="row">ABV</th><td>{{stock.stocktype.abvstr}}</td></tr>
20-
{% if stock.delivery %}
21-
<tr><th scope="row">Supplier</th><td><a href="{{stock.delivery.supplier.get_absolute_url}}">{{stock.delivery.supplier.name}}</a></td></tr>
22-
<tr><th scope="row">Delivery date</th><td>{{stock.delivery.date}}</td></tr>
23-
<tr><th scope="row">Delivery ID</th><td><a href="{{stock.delivery.get_absolute_url}}">{{stock.delivery.id}}</a>{% if not stock.checked %} <span class="badge bg-warning">Not confirmed</span>{% endif %}</td></tr>
24-
{% else %}
25-
<tr><th scope="row">Discovered in stock take</th><td><a href="{{stock.stocktake.get_absolute_url}}">{{stock.stocktake.id}}</a>{% if not stock.checked %} <span class="badge bg-warning">Not committed</span>{% endif %}</td></tr>
26-
{% endif %}
27-
<tr><th scope="row">Department</th><td><a href="{{stock.stocktype.department.get_absolute_url}}">{{stock.stocktype.department.description}}</a></td></tr>
28-
<tr><th scope="row">Stock unit</th><td>{{stock.description}} ({{stock.size}} {{stock.stocktype.unit.name}}s)</td></tr>
29-
<tr><th scope="row">Cost price</th>
30-
{% if stock.costprice %}
31-
<td>{{money}}{{stock.costprice}} (ex-VAT)</td>
32-
{% else %}<td>Unknown</td>{% endif %}</tr>
33-
<tr><th scope="row">Sale price</th><td>{% if stock.stocktype.saleprice != None %}{{money}}{{stock.stocktype.pricestr}} (inc-VAT){% else %}Not set{% endif %}</td></tr>
34-
{% if stock.onsale %}
35-
<tr><th scope="row">Put on sale</th><td>{{stock.onsale}}
36-
{% if stock.stockonsale %} on line <a href="{{stock.stockonsale.stockline.get_absolute_url}}">{{stock.stockonsale.stockline.name}}</a>
37-
{% endif %}
38-
</td></tr>
39-
{% endif %}
40-
{% if stock.finished %}
41-
<tr><th scope="row">Finished</th><td>{{stock.finished}} ({{stock.finishcode.description}})</td></tr>
42-
{% endif %}
43-
{% if stock.bestbefore %}
44-
<tr><th scope="row">Best before</th><td>{{stock.bestbefore}}</td></tr>
45-
{% endif %}
46-
<tr><th scope="row">Amount used</th><td>{{stock.used}} {{stock.stocktype.unit.name}}s</td></tr>
47-
<tr><th scope="row">Amount remaining</th><td>{{stock.remaining}} {{stock.stocktype.unit.name}}s</td></tr>
48-
{% if stock.annotations %}
49-
<tr><th scope="row">Notes</th><td>
50-
{% with annotationlist=stock.annotations excluded_column="stock" %}
51-
{% include "tillweb/annotationlist.html" %}
14+
{% with dtc="col-4 col-sm-2 text-sm-end" ddc="col-8 col-sm-10" %}
15+
<dl class="row lh-1">
16+
<dt class="{{dtc}}">Stock ID</dt>
17+
<dd class="{{ddc}}">{{stock.id}}</dd>
18+
19+
<dt class="{{dtc}}">Check digits</dt>
20+
<dd class="{{ddc}}">{{stock.checkdigits}}</dd>
21+
22+
<dt class="{{dtc}}">Manufacturer</dt>
23+
<dd class="{{ddc}}"><a href="{% url "tillweb-stocktype-search" %}?manufacturer={{stock.stocktype.manufacturer|urlencode}}">{{stock.stocktype.manufacturer}}</a></dd>
24+
25+
<dt class="{{dtc}}">Name</dt>
26+
<dd class="{{ddc}}"><a href="{{stock.stocktype.get_absolute_url}}">{{stock.stocktype.name}}</a></dd>
27+
28+
<dt class="{{dtc}}">ABV</dt>
29+
<dd class="{{ddc}}">{{stock.stocktype.abvstr}}</dd>
30+
31+
{% if stock.delivery %}
32+
<dt class="{{dtc}}">Supplier</dt>
33+
<dd class="{{ddc}}"><a href="{{stock.delivery.supplier.get_absolute_url}}">{{stock.delivery.supplier.name}}</a></dd>
34+
35+
<dt class="{{dtc}}">Delivery date</dt>
36+
<dd class="{{ddc}}">{{stock.delivery.date}}</dd>
37+
38+
<dt class="{{dtc}}">Delivery ID</dt>
39+
<dd class="{{ddc}}"><a href="{{stock.delivery.get_absolute_url}}">{{stock.delivery.id}}</a>{% if not stock.checked %} <span class="badge bg-warning">Not confirmed</span>{% endif %}</dd>
40+
41+
{% else %}
42+
<dt class="{{dtc}}">Discovered in stock take</dt>
43+
<dd class="{{ddc}}"><a href="{{stock.stocktake.get_absolute_url}}">{{stock.stocktake.id}}</a>{% if not stock.checked %} <span class="badge bg-warning">Not committed</span>{% endif %}</dd>
44+
{% endif %}
45+
46+
<dt class="{{dtc}}">Department</dt>
47+
<dd class="{{ddc}}"><a href="{{stock.stocktype.department.get_absolute_url}}">{{stock.stocktype.department.description}}</a></dd>
48+
49+
<dt class="{{dtc}}">Stock unit</dt>
50+
<dd class="{{ddc}}">{{stock.description}} ({{stock.size}} {{stock.stocktype.unit.name}}s)</dd>
51+
52+
<dt class="{{dtc}}">Cost price</dt>
53+
<dd class="{{ddc}}">{% if stock.costprice %}{{money}}{{stock.costprice}} (ex-VAT){% else %}Unknown{% endif %}</dd>
54+
55+
<dt class="{{dtc}}">Sale price</dt>
56+
<dd class="{{ddc}}">{% if stock.stocktype.saleprice != None %}{{money}}{{stock.stocktype.pricestr}} (inc-VAT){% else %}Not set{% endif %}</dd>
57+
58+
{% if stock.onsale %}
59+
<dt class="{{dtc}}">Put on sale</dt>
60+
<dd class="{{ddc}}">{{stock.onsale}}
61+
{% if stock.stockonsale %} on line <a href="{{stock.stockonsale.stockline.get_absolute_url}}">{{stock.stockonsale.stockline.name}}</a>
62+
{% endif %}</dd>
63+
{% endif %}
64+
65+
{% if stock.finished %}
66+
<dt class="{{dtc}}">Finished</dt>
67+
<dd class="{{ddc}}">{{stock.finished}} ({{stock.finishcode.description}})</dd>
68+
{% endif %}
69+
70+
{% if stock.bestbefore %}
71+
<dt class="{{dtc}}">Best before</dt>
72+
<dd class="{{ddc}}">{{stock.bestbefore}}</dd>
73+
{% endif %}
74+
75+
<dt class="{{dtc}}">Amount used</dt>
76+
<dd class="{{ddc}}">{{stock.used}} {{stock.stocktype.unit.name}}s</dd>
77+
78+
<dt class="{{dtc}}">Amount remaining</dt>
79+
<dd class="{{ddc}}">{{stock.remaining}} {{stock.stocktype.unit.name}}s</dd>
80+
81+
{% if stock.annotations %}
82+
<dt class="{{dtc}}">Notes</dt>
83+
<dd class="{{ddc}}">
84+
{% with annotationlist=stock.annotations excluded_column="stock" %}
85+
{% include "tillweb/annotationlist.html" %}
86+
{% endwith %}
87+
</dd>
88+
{% endif %}
89+
</dl>
5290
{% endwith %}
53-
</td></tr>{% endif %}
54-
</table>
5591

5692
{% if aform %}
57-
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#noteModal">
93+
<button type="button" class="btn btn-secondary mb-2" data-bs-toggle="modal" data-bs-target="#noteModal">
5894
Add a note
5995
</button>
6096
{% endif %}
6197
{% if wform %}
62-
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#wasteModal">
98+
<button type="button" class="btn btn-secondary mb-2" data-bs-toggle="modal" data-bs-target="#wasteModal">
6399
Record waste
64100
</button>
65101
{% endif %}
@@ -101,14 +137,14 @@
101137
{% if stock.out %}
102138
<div class="mb-3">
103139
<h2>Usage summary</h2>
104-
<table class="table w-auto">
105-
{% for rc,qty in stock.removed %}
106-
<tr>
107-
<th scope="row">{{rc.reason}}</th>
108-
<td>{{qty}} {{stock.stocktype.unit.name}}s</td>
109-
</tr>
140+
{% with dtc="col-4 col-sm-2 text-sm-end" ddc="col-8 col-sm-10" %}
141+
<dl class="row lh-1">
142+
{% for rc, qty in stock.removed %}
143+
<dt class="{{dtc}}">{{rc.reason}}</dt>
144+
<dd class="{{ddc}}">{{qty}} {{stock.stocktype.unit.name}}s</dd>
110145
{% endfor %}
111-
</table>
146+
</dl>
147+
{% endwith %}
112148
</div>
113149

114150
<div class="row mb-3">

‎quicktill/tillweb/templates/tillweb/stockunit.html‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,56 @@
11
{% extends "tillweb/tillweb.html" %}
2+
{% load tillweb_utils %}
23

34
{% block title %}{{till}} — item size "{{stockunit.name}}"{% endblock %}
45

56
{% block tillcontent %}
67

8+
{% with dtc="col-6 col-sm-2 text-sm-end" ddc="col-6 col-sm-10" %}
9+
<dl class="row">
10+
<dt class="{{dtc}}">Description</dt>
11+
<dd class="{{ddc}}">{{stockunit.name}}</dd>
12+
13+
<dt class="{{dtc}}">Unit</dt>
14+
<dd class="{{ddc}}"><a href="{{stockunit.unit.get_absolute_url}}">{{stockunit.unit.description}}</a></dd>
15+
16+
<dt class="{{dtc}}">Size</dt>
17+
<dd class="{{ddc}}">{{stockunit.size}} {{stockunit.unit.name}}</dd>
18+
19+
<dt class="{{dtc}}">Merge?</dt>
20+
<dd class="{{ddc}}">{{stockunit.merge|yesno:"Yes,No"}}</dd>
21+
</dl>
22+
{% endwith %}
23+
24+
<p>If the "merge" option is selected, then entering a quantity of more
25+
than one when recording a delivery will create a single, larger
26+
stock item instead of multiple items of this size.</p>
27+
728
{% if form %}
29+
<button class="btn btn-secondary mb-2" type="button" data-bs-toggle="modal" data-bs-target="#updateModal">
30+
Update details
31+
</button>
32+
33+
{% modal "updateModal" title="Update details" %}
834
<form action="" method="post">{% csrf_token %}
9-
{% include "form-horizontal.html" %}
10-
<p>If you select the "merge" option, then entering a quantity of
11-
more than one when recording a delivery will create a single,
12-
larger stock item instead of multiple items of this size.</p>
13-
<button class="btn btn-primary mb-2" type="submit" name="submit_update">
14-
Update
15-
</button>
16-
<button class="btn btn-danger mb-2" type="submit" name="submit_delete">
17-
Delete
18-
</button>
35+
<div class="modal-body">
36+
{% include "form.html" %}
37+
<p>If you select the "merge" option, then entering a quantity of
38+
more than one when recording a delivery will create a single,
39+
larger stock item instead of multiple items of this size.</p>
40+
</div>
41+
<div class="modal-footer">
42+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
43+
Cancel
44+
</button>
45+
<button class="btn btn-danger mb-2" type="submit" name="submit_delete">
46+
Delete
47+
</button>
48+
<button class="btn btn-primary mb-2" type="submit" name="submit_update">
49+
Update
50+
</button>
51+
</div>
1952
</form>
20-
{% else %}
21-
<table class="table mb-2 w-auto">
22-
<tr><th scope="row">Description</th><td>{{stockunit.name}}</td></tr>
23-
<tr><th scope="row">Unit</th><td><a href="{{stockunit.unit.get_absolute_url}}">{{stockunit.unit.description}}</a></td></tr>
24-
<tr><th scope="row">Size</th><td>{{stockunit.size}} {{stockunit.unit.name}}</td></tr>
25-
<tr><th scope="row">Merge?</th><td>{% if stockunit.merge %}Yes{% else %}No{% endif %}</td></tr>
26-
</table>
53+
{% endmodal %}
2754
{% endif %}
2855

2956
{% endblock %}

0 commit comments

Comments
 (0)