Bug 34945: Remove the use of event attributes from OPAC clubs tab

This patch removes the use of event attributes (onclick) from the
template for the clubs tab shown in the OPAC to a logged-in user.
These events are defined now along with the other in-page JS.

The patch also makes some general improvements to the template for
consistency:

- Adding Bootstrap color classes to the "Enroll" and "Cancel enrollment"
  buttons.
- Enhancing the responsive configuration to the DataTable.

To test you should have a few patron clubs defined (Tools -> Patron
clubs).

- Apply the patch and log in to the OPAC.
- On the user summary page, click the "Clubs" tab.
- The "Enroll" and "Cancel enrollment" buttons should look correct and
  work as expected:
  - Click the "Enroll" button.
    - On the enrollment confirmation view, test both the "Finish
      enrollment" button and the "Cancel" link.
  - Test "Cancel enrollment" button.
- Test the responsive behavior of the page to confirm that it adjusts
  well to narrow browser widths.

Signed-off-by: Victor Grousset/tuxayo <victor@tuxayo.net>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/clubs-tab.tt

@@ -8,10 +8,10 @@
         <caption class="sr-only">Clubs</caption>
         <thead>
             <tr>
-                <th>Name</th>
+                <th class="all">Name</th>
                 <th>Description</th>
                 <th>Date enrolled</th>
-                <th>&nbsp;</th>
+                <th class="NoSort all">&nbsp;</th>
                 <th></th>
             </tr>
         </thead>
@@ -24,7 +24,7 @@
                     <td>[% e.date_enrolled | $KohaDates %]</td>
                     <td>
                         [% IF e.club.club_template.is_enrollable_from_opac %]
-                            <button class="btn btn-xs btn-default" onclick="cancelEnrollment( [% e.id | html %] )">
+                            <button class="btn btn-sm btn-danger cancel_enrollment" data-id="[% e.id | html %]">
                                 <i class="fa fa-times" aria-hidden="true"></i> Cancel enrollment
                             </button>
                         [% ELSE %]
@@ -45,9 +45,9 @@
     <table id="clubs-table-unenrolled" class="table table-bordered table-striped">
         <thead>
             <tr>
-                <th>Name</th>
+                <th class="all">Name</th>
                 <th>Description</th>
-                <th>&nbsp;</th>
+                <th class="NoSort all">&nbsp;</th>
                 <th></th>
             </tr>
         </thead>
@@ -59,7 +59,7 @@
                     <td>[% c.description | html %]</td>
                     <td>
                         [% IF !c.club_template.is_email_required || ( c.club_template.is_email_required && borrower.notice_email_address ) %]
-                            <button class="btn btn-xs btn-default" onclick="loadEnrollmentForm([% c.id | html%])">
+                            <button class="btn btn-sm btn-primary load_enrollment" data-id="[% c.id | html%]">
                                 <i class="fa fa-plus" aria-hidden="true"></i> Enroll
                             </button>
                         [% ELSE %]
@@ -102,19 +102,35 @@ function cancelEnrollment( id ) {
     });
     return false;
 }
-var Tables = $("#clubs-table-enrolled,#clubs-table-unenrolled");
-Tables.each(function(){
-    $(this).dataTable($.extend(true, {}, dataTablesDefaults, {
-        "searching": false,
-        "paging": false,
-        "info": false,
-        "autoWidth": false,
-        "responsive": {
-            "details": { "type": 'column',"target": -1 }
-        },
-        "columnDefs": [
-            { "className": 'dtr-control', "orderable": false, "targets": -1 }
-        ],
-    }));
-});
+
+    var Tables = $("#clubs-table-enrolled,#clubs-table-unenrolled");
+    Tables.each(function(){
+        $(this).dataTable($.extend(true, {}, dataTablesDefaults, {
+            "searching": false,
+            "paging": false,
+            "info": false,
+            "autoWidth": false,
+            "responsive": {
+                "details": { "type": "column", "target": -1 }
+            },
+            "columnDefs": [
+                { "orderable": false, "searchable": false, "targets": [ 'NoSort' ] },
+                { "className": "dtr-control", "orderable": false, "targets": -1 },
+            ],
+        }));
+    });
+
+    $(".cancel_enrollment").on("click", function(e){
+        e.preventDefault();
+        let clubid = $(this).data("id");
+        cancelEnrollment( clubid );
+    });
+
+    $(".load_enrollment").on("click", function(e){
+        e.preventDefault();
+        let clubid = $(this).data("id");
+        loadEnrollmentForm( clubid );
+    });
+
+
 </script>

koha-tmpl/opac-tmpl/bootstrap/en/modules/clubs/enroll.tt

@@ -29,8 +29,8 @@
             </ol>
         </fieldset>
         <fieldset class="action">
-            <button class="btn btn-primary" onclick="addEnrollment(); return false;">Finish enrollment</button>
-            <a href="#" class="cancel" onclick="showClubs(); return false;">Cancel</a>
+            <button class="btn btn-primary add_enrollment">Finish enrollment</button>
+            <a href="#" class="cancel show_clubs">Cancel</a>
         </fieldset>
     </form>
 </div>
@@ -62,4 +62,16 @@ function showClubs() {
         $("body").css("cursor", "default");
     });
 }
+
+    $(document).ready(function(){
+        $(".add_enrollment").on("click", function(e){
+            e.preventDefault();
+            addEnrollment();
+        });
+
+        $(".show_clubs").on("click", function(e){
+            e.preventDefault();
+            showClubs();
+        });
+    });
 </script>