Bug 32341: Some OPAC tables are not displayed well in mobile mode
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-account.tt
1 [% USE raw %]
2 [% USE Asset %]
3 [% USE Koha %]
4 [% USE KohaDates %]
5 [% USE AuthorisedValues %]
6 [% USE Price %]
7 [% SET ENABLE_OPAC_PAYMENTS = payment_methods %]
8 [% USE AdditionalContents %]
9 [% SET DISPLAY_PAYMENT_BLOCK = 0 %]
10 [% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
11 [% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
12 [% INCLUDE 'doc-head-open.inc' %]
13 <title>Your charges &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
14 [% INCLUDE 'doc-head-close.inc' %]
15 [% BLOCK cssinclude %]
16     [% Asset.css("css/datatables.css") | $raw %]
17 [% END %]
18 </head>
19
20 [% INCLUDE 'bodytag.inc' bodyid='opac-account' bodyclass='scrollto' %]
21 [% INCLUDE 'masthead.inc' %]
22
23 <div class="main">
24     <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumbs">
25         <ol class="breadcrumb">
26             <li class="breadcrumb-item">
27                 <a href="/cgi-bin/koha/opac-main.pl">Home</a>
28             </li>
29             <li class="breadcrumb-item">
30                 <a href="/cgi-bin/koha/opac-user.pl">[% INCLUDE 'patron-title.inc' patron = logged_in_user %]</a>
31             </li>
32             <li class="breadcrumb-item active">
33                 <a href="#" aria-current="page">Your charges</a>
34             </li>
35         </ol>
36     </nav> <!-- /#breadcrumbs -->
37
38     <div class="container-fluid">
39         <div class="row">
40             <div class="col col-lg-2 order-2 order-lg-1">
41                 <div id="navigation">
42                     [% INCLUDE 'navigation.inc' IsPatronPage=1 %]
43                 </div>
44             </div>
45             <div class="col-md-12 col-lg-10 order-1">
46                 <div id="useraccount" class="maincontent">
47
48                     <h1>Charges</h1>
49                     [% IF message %]
50                         <div class="alert alert-info">
51                             [% IF message == 'valid_payment' %]
52                                 <p>Your payment of $[% message_value | html %] has been processed successfully!</p>
53                             [% ELSIF message == 'duplicate_payment' %]
54                                 <p>A payment with the transaction ID '[% message_value | html %]' has already been posted to an account.</p>
55                                 <p>Please contact a librarian for details.</p>
56                             [% ELSIF message == 'invalid_payment' %]
57                                 <p>The transaction ID '[% message_value | html %]' for this payment is invalid.</p>
58                                 <p>Please contact a librarian for details.</p>
59                             [% END %]
60                         </div>
61                     [% END %]
62
63                     [% IF payment_error %]
64                         <div id="error" class="alert alert-warning">
65                             <p><strong>Error:</strong> there was a problem processing your payment</p>
66                         </div>
67                     [% ELSIF payment %]
68                         <div class="alert alert-info">
69                             <p><strong>Payment applied:</strong> your payment of [% payment | html %] has been applied to your account</p>
70                         </div>
71                     [% END %]
72
73                     [% PROCESS 'account-table.inc' ACCOUNT_LINES = ACCOUNT_LINES, ENABLE_OPAC_PAYMENTS = ENABLE_OPAC_PAYMENTS, plugins = plugins %]
74
75                 </div> <!-- / #useraccount -->
76             </div> <!-- / .col-10 -->
77         </div> <!-- / .row -->
78     </div> <!-- / .container-fluid -->
79 </div> <!-- / .main -->
80
81 [% INCLUDE 'opac-bottom.inc' %]
82 [% BLOCK jsinclude %]
83 [% INCLUDE 'datatables.inc' %]
84 <script>
85 $( document ).ready(function() {
86
87     var MSG_MIN_THRESHOLD = _("Minimum amount needed by this service is %s");
88     var txtActivefilter = _("Filter paid transactions");
89     var txtInactivefilter = _("Show all transactions");
90
91     var fines_table = $("#finestable").dataTable($.extend(true, {}, dataTablesDefaults, {
92          [% IF ENABLE_OPAC_PAYMENTS %]
93          "order": [[ 1, "desc" ]],
94          [% ELSE %]
95          "order": [[ 0, "desc" ]],
96          [% END %]
97          "dom": '<"#filter_p">',
98          "autoWidth": false,
99          "responsive": true,
100     } ));
101
102     $("#filter_p").html('<p><a href="#" id="filter_paid"><i class="fa fa-filter" aria-hidden="true"></i> '+txtActivefilter+'</a>');
103     $('#filter_paid').click(function(e) {
104         e.preventDefault();
105         if ($(this).hasClass('filtered')) {
106             var filteredValue = '';
107             $(this).html('<i class="fa fa-filter" aria-hidden="true"></i> '+txtActivefilter);
108         } else { //Not filtered. Let's do it!
109             var filteredValue = '^((?!0.00).*)$'; //Filter not matching 0.00 http://stackoverflow.com/a/406408
110             $(this).html('<i class="fa fa-filter" aria-hidden="true"></i> '+txtInactivefilter);
111         }
112         fines_table.fnFilter(filteredValue, -1, true, false);
113         $(this).toggleClass('filtered');
114     });
115
116     //Start filtered
117     $('#filter_paid').click();
118
119     $(".pay-online").removeClass("hidden");
120
121     $("#amount-to-pay-label").hide();
122
123     $(".checkbox-pay, input[name='payment_method']").change( function() {
124         // Disable the pay button if no fees are selected
125         //$("#submit-pay").prop("disabled", ! $(".checkbox-pay:checked").length );
126
127         // Calculate the total amount to be paid based on selected fees
128         var total = 0;
129         $(".checkbox-pay").each( function() {
130             if ( $(this).is(":checked") ) {
131                 var id = this.id.split("checkbox-pay-")[1];
132                 total += parseFloat( $("#amount-" + id).val() );
133             }
134         });
135
136         var p = Promise.resolve();
137         if ( total ) {
138             p = Promise.all(
139                 $('input[name="payment_method"]').map(function() {
140                     var self = this;
141                     return new Promise(function(resolve, reject) {
142                         var threshold = $(self).data('threshold');
143                         var help = $(self).parent().siblings('.help-block');
144                         if(!threshold || threshold == '' || threshold <= total) {
145                             $(self).prop('disabled', false);
146                             help.addClass('hide');
147                         } else {
148                             $(self).prop('disabled', true);
149                             help.html(MSG_MIN_THRESHOLD.format(parseInt(threshold,10).toFixed(2))).removeClass('hide');
150                         }
151                         resolve();
152                     })
153                 }).toArray()
154             );
155
156             $("#amount-to-pay").html( total.toFixed(2) );
157             $("#amount-to-pay-label").show();
158         } else {
159             $('input[name="payment_method"]').prop('disabled', false).parent().siblings('.help-block').addClass('hide');
160             $("#amount-to-pay-label").hide();
161         }
162         p.then(function() {
163             $("#submit-pay").prop("disabled", ! $(".checkbox-pay:checked").length || ! $('input[name="payment_method"]:checked:not(:disabled)').length);
164         })
165     });
166 });
167 </script>
168 [% END %]