Bug 23354: (follow-up) Responses to feedback
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / pos / pay.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% USE AuthorisedValues %]
5 [% USE Price %]
6 [% SET footerjs = 1 %]
7 [% INCLUDE 'doc-head-open.inc' %]
8 <title>Koha &rsaquo; Payments</title>
9 [% INCLUDE 'doc-head-close.inc' %]
10 </head>
11
12 <body id="payments" class="pos">
13 [% INCLUDE 'header.inc' %]
14 [% INCLUDE 'circ-search.inc' %]
15
16 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; Point of sale</div>
17
18 <div class="main container-fluid">
19     <div class="row">
20         <div class="col-sm-10 col-sm-push-2">
21
22         [% IF ( error_registers ) %]
23         <div id="error_message" class="dialog alert">
24             You must have at least one cash register associated with this branch before you can record payments.
25         </div>
26         [% ELSE %]
27         <form name="payForm" id="payForm" method="post" action="/cgi-bin/koha/pos/pay.pl">
28             <div class="row">
29
30                 <div class="col-sm-6">
31                     <fieldset class="rows">
32                         <legend>Items for purchase</legend>
33                             Please select items from below to add to this transaction:
34                             [% SET invoice_types = AuthorisedValues.GetAuthValueDropbox('MANUAL_INV') %]
35                             [% IF invoice_types %]
36                             <table id="invoices">
37                             <thead>
38                                 <tr>
39                                     <th>Code</th>
40                                     <th>Description</th>
41                                     <th>Cost</th>
42                                     <th>Action</th>
43                                 </tr>
44                             </thead>
45                             <tbody>
46                             [% FOREACH invoice IN invoice_types %]
47                                 <tr>
48                                     <td>[% invoice.authorised_value | html %]</td>
49                                     <td>[% invoice.lib_opac | html %]</td>
50                                     <td>[% invoice.lib | html %]</td>
51                                     <td>
52                                         <button class="add_button" data-invoice-code="[% invoice.lib_opac %]" data-invoice-title="[% invoice.authorised_value | html %]" data-invoice-price="[% invoice.lib | html %]"><i class="fa fa-plus"></i> Add</button>
53                                     </td>
54                                 </tr>
55                             [% END %]
56                             </table>
57                             [% ELSE %]
58                             You have no manual invoice types defined
59                             [% END %]
60                     </fieldset>
61                 </div>
62
63                 <div class="col-sm-6">
64
65                     <fieldset class="rows">
66                         <legend>This sale</legend>
67                         <p>Click to edit item cost or quantities</p>
68                         <table id="sale" class="table_sale">
69                             <thead>
70                                 <tr>
71                                     <th>Item</th>
72                                     <th>Cost</th>
73                                     <th>Quantity</th>
74                                     <th>Total</th>
75                                     <th>Action</th>
76                                 </tr>
77                             </thead>
78                             <tbody>
79                             </tbody>
80                             <tfoot>
81                                 <tr>
82                                     <td colspan="3">Total payable:</td>
83                                     <td></td>
84                                     <td></td>
85                                 </tr>
86                             </tfoot>
87                         </table>
88                     </fieldset>
89
90                     <fieldset class="rows">
91                         <legend>Collect payment</legend>
92                         <ol>
93                             <li>
94                                 <label for="paid">Amount being paid: </label>
95                                 <input type="number" min="0.00" max="10000.00" step="0.01" name="paid" id="paid" value="[% amountoutstanding | $Price on_editing => 1 %]" readonly/>
96                             </li>
97                             <li>
98                                 <label for="collected">Collected from patron: </label>
99                                 <input type="number" min="0.00" max="10000.00" step="0.01" name="collected" id="collected" value=""/>
100                             </li>
101                             <li>
102                                 <label>Change to give: </label>
103                                 <span id="change">0.00</span>
104                                 <input type="hidden" name="change" value="0.00"/>
105                             </li>
106
107                             [% SET payment_types = AuthorisedValues.GetAuthValueDropbox('PAYMENT_TYPE') %]
108                             [% IF payment_types %]
109                             <li>
110                                 <label for="payment_type">Payment type: </label>
111                                 <select name="payment_type" id="payment_type">
112                                     [% FOREACH pt IN payment_types %]
113                                         <option value="[% pt.authorised_value | html %]">[% pt.lib | html %]</option>
114                                     [% END %]
115                                 </select>
116                             </li>
117                             [% END %]
118
119                             [% IF Koha.Preference('UseCashRegisters') %]
120                             <li>
121                                 <label for="cash_register">Cash register: </label>
122                                 <select name="cash_register" id="cash_register">
123                                     [% FOREACH register IN registers %]
124                                       [% IF register.id == registerid %]
125                                     <option value="[% register.id %]" selected="selected">[% register.name | html %]</option>
126                                       [% ELSE %]
127                                     <option value="[% register.id %]">[% register.name | html %]</option>
128                                       [% END %]
129                                     [% END %]
130                                 </select>
131                             </li>
132                             [% END %]
133                         </ol>
134
135                     </fieldset>
136                 </div>
137
138                 <div class="action">
139                     <input type="submit" name="submitbutton" value="Confirm" />
140                     <a class="cancel" href="/cgi-bin/koha/pos/pay.pl">Cancel</a>
141                 </div>
142             </div>
143         </form>
144         [% END %]
145     </div>
146
147     <div class="col-sm-2 col-sm-pull-10">
148         <aside>
149             [% INCLUDE 'pos-menu.inc' %]
150         </aside>
151     </div>
152 </div> <!-- /.row -->
153
154 <!-- Modal -->
155 <div id="confirm_change_form" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
156     <div class="modal-dialog">
157         <div class="modal-content">
158             <div class="modal-header">
159                 <h3>The amount collected is more than the outstanding charge</h3>
160             </div>
161             <div class="modal-body">
162                 <p>The amount collected from the patron is higher than the amount to be paid.</p>
163                 <p>The change to give is <b><span id="modal_change">0.00</span></b>.</p>
164                 <p>Confirm this payment?</p>
165             </div>
166             <div class="modal-footer">
167                 <button class="btn btn-default approve" id="modal_submit" type="button"><i class="fa fa-check"></i> Yes</button>
168                 <button class="btn btn-default deny cancel" href="#" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times"></i> No</button>
169             </div>
170         </div>
171     </div>
172 </div>
173
174 [% IF payment_id && Koha.Preference('FinePaymentAutoPopup') %]
175 <!-- Automatic Print Reciept -->
176       <a id="printReciept" style="display: none" href="#"></a>
177 [% END %]
178
179 [% MACRO jsinclude BLOCK %]
180     [% Asset.js("js/admin-menu.js") | $raw %]
181     [% INCLUDE 'datatables.inc' %]
182     [% Asset.js("lib/jquery/plugins/jquery.jeditable.mini.js") | $raw %]
183     <script>
184     function fnClickAddRow( table, invoiceTitle, invoicePrice ) {
185       table.fnAddData( [
186         invoiceTitle,
187         invoicePrice,
188         1,
189         null,
190         '<button class="drop"><i class="fa fa-trash"></i> Remove</button>'
191          ]
192       );
193     }
194
195     function moneyFormat(textObj) {
196         var newValue = textObj.value;
197         var decAmount = "";
198         var dolAmount = "";
199         var decFlag   = false;
200         var aChar     = "";
201
202         for(var i=0; i < newValue.length; i++) {
203             aChar = newValue.substring(i, i+1);
204             if (aChar >= "0" && aChar <= "9") {
205                 if(decFlag) {
206                     decAmount = "" + decAmount + aChar;
207                 }
208                 else {
209                     dolAmount = "" + dolAmount + aChar;
210                 }
211             }
212             if (aChar == ".") {
213                 if (decFlag) {
214                     dolAmount = "";
215                     break;
216                 }
217                 decFlag = true;
218             }
219         }
220
221         if (dolAmount == "") {
222             dolAmount = "0";
223         }
224     // Strip leading 0s
225         if (dolAmount.length > 1) {
226             while(dolAmount.length > 1 && dolAmount.substring(0,1) == "0") {
227                 dolAmount = dolAmount.substring(1,dolAmount.length);
228             }
229         }
230         if (decAmount.length > 2) {
231             decAmount = decAmount.substring(0,2);
232         }
233     // Pad right side
234         if (decAmount.length == 1) {
235            decAmount = decAmount + "0";
236         }
237         if (decAmount.length == 0) {
238            decAmount = decAmount + "00";
239         }
240
241         textObj.value = dolAmount + "." + decAmount;
242     }
243
244     function updateChangeValues() {
245         var change = $('#change')[0];
246         change.innerHTML = Math.round(($('#collected')[0].value - $('#paid')[0].value) * 100) / 100;
247         if (change.innerHTML <= 0) {
248             change.innerHTML = "0.00";
249         } else {
250             change.value = change.innerHTML;
251             moneyFormat(change);
252             change.innerHTML = change.value;
253         }
254
255         $(':input[name="change"]').val(change.value);
256         $('#modal_change').html(change.innerHTML);
257     }
258
259     $(document).ready(function() {
260         var sale_table = $("#sale").dataTable($.extend(true, {}, dataTablesDefaults, {
261             "bPaginate": false,
262             "bFilter": false,
263             "bInfo": false,
264             "bAutoWidth": false,
265             "aoColumnDefs": [{
266                 "aTargets": [-2],
267                 "bSortable": false,
268                 "bSearchable": false,
269             }, {
270                 "aTargets": [-2],
271                 "mRender": function ( data, type, full ) {
272                     var price = Number.parseFloat(data).toFixed(2);
273                     return '£'+price;
274                 }
275             }, {
276                 "aTargets": [-3, -4],
277                 "sClass" : "editable",
278             }],
279             "aaSorting": [
280                 [1, "asc"]
281             ],
282             "fnDrawCallback": function (oSettings) {
283                 var local = this;
284                 local.$('.editable').editable( function(value, settings) {
285                     var aPos = local.fnGetPosition( this );
286                     local.fnUpdate( value, aPos[0], aPos[1], true, false );
287                     return value;
288                 },{
289                     type    : 'text'
290                 });
291             },
292             "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
293                 var iTotal = aData[1] * aData[2];
294                 this.fnUpdate( iTotal, nRow, 3, false, false );
295             },
296             "fnFooterCallback": function(nFoot, aData, iStart, iEnd, aiDisplay) {
297                 var iTotalPrice = 0;
298                 for ( var i=0 ; i<aData.length ; i++ )
299                             {
300                                     iTotalPrice += aData[i][3]*1;
301                             }
302
303                 iTotalPrice = Number.parseFloat(iTotalPrice).toFixed(2);
304                 nFoot.getElementsByTagName('td')[1].innerHTML = iTotalPrice;
305                 $('#paid').val(iTotalPrice);
306                 $('#paid').trigger('change');
307             }
308         }));
309
310         $("#sale").on("click", "button.drop", function(){
311                 sale_table.DataTable().row($(this).parents('tr')).remove().draw(false);
312         });
313
314         var items_table = $("#invoices").dataTable($.extend(true,{}, dataTablesDefaults, {
315                "aoColumnDefs": [
316                   { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable":false },
317                ],
318                "aaSorting": [[ 0, "asc" ]],
319                "paginationType": "full",
320         }));
321
322         $(".add_button").on("click", function(e) {
323             e.preventDefault();
324             fnClickAddRow(sale_table, $( this ).data('invoiceTitle'), $( this ).data('invoicePrice') );
325             items_table.fnFilter( '' );
326         });
327
328         // Change calculation and modal
329         var change = $('#change')[0];
330         $("#paid, #collected").on("change",function() {
331             moneyFormat( this );
332             if (change != undefined) {
333                 updateChangeValues();
334             }
335         });
336
337         var checked = false;
338         $('#modal_submit').click(function() {
339             checked = true;
340             $('#payForm').submit();
341         });
342
343         $('#payForm').submit(function(e){
344             if (change != undefined && change.innerHTML > 0.00 && !checked) {
345                 e.preventDefault();
346                 $("#confirm_change_form").modal("show");
347             } else {
348                 var rows = sale_table.fnGetData();
349                 rows.forEach(function (row, index) {
350                     var sale = {
351                         code: row[0],
352                         price: row[1],
353                         quantity: row[2]
354                     };
355                     $('<input>').attr({
356                         type: 'hidden',
357                         name: 'sales',
358                         value: JSON.stringify(sale)
359                     }).appendTo('#payForm');
360                 });
361                 return true;
362             }
363         });
364
365         [% IF payment_id && Koha.Preference('FinePaymentAutoPopup') %]
366             $("#printReciept").click(function() {
367                 var win = window.open('/cgi-bin/koha/pos/printreceipt.pl?action=print&accountlines_id=[% payment_id | uri %]&collected=[% collected | uri %]&change=[% change | uri %]', '_blank');
368                 win.focus();
369             });
370             $("#printReciept").click();
371         [% END %]
372     });
373     </script>
374 [% END %]
375
376 [% INCLUDE 'intranet-bottom.inc' %]