Bug 25288: Use the API to list libraries
authorTomas Cohen Arazi <tomascohen@theke.io>
Mon, 27 Apr 2020 05:36:13 +0000 (02:36 -0300)
committerJonathan Druart <jonathan.druart@bugs.koha-community.org>
Wed, 24 Jun 2020 13:15:41 +0000 (15:15 +0200)
This patch makes the general libraries datatable use the API for rendering.
To test:
1. Test the datatable behaviour
2. Apply this patch
3. Repeat your tests
=> SUCCESS: Things work! Filtering and sorting specially

Bonus: Use the browser inspector to notice each interaction with thex
datatable triggers an API call with the right query parameters

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Signed-off-by: Frédéric Demians <f.demians@tamil.fr>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

admin/branches.pl
koha-tmpl/intranet-tmpl/prog/en/modules/admin/branches.tt

index 68b9c25..c3eeea7 100755 (executable)
@@ -147,11 +147,6 @@ if ( $op eq 'add_form' ) {
     $op = 'list';
 }
 
-if ( $op eq 'list' ) {
-    my $libraries = Koha::Libraries->search( {}, { order_by => ['branchcode'] }, );
-    $template->param( libraries => $libraries, );
-}
-
 $template->param(
     messages => \@messages,
     op       => $op,
index 68488d7..3c9ca49 100644 (file)
 
 [% IF op == 'list' %]
     <h3>Libraries</h3>
-    [% IF libraries.count %]
-        <table id="libraries">
-            <thead>
-                <tr>
-                    <th>Name</th>
-                    <th>Code</th>
-                    <th>Address</th>
-                    <th>MARC organization code</th>
-                    <th>IP</th>
-                    <th>Pickup location</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                [% FOREACH library IN libraries %]
-                    <tr>
-                        <td>[% library.branchname | html %]</td>
-                        <td>[% library.branchcode | html %]</td>
-                        <td>
-                            [% IF library.branchaddress1 %]
-                                [% library.branchaddress1 | html %][% END %]
-                            [% IF library.branchaddress2 %]
-                                <br />[% library.branchaddress2 | html %][% END %]
-                            [% IF library.branchaddress3 %]
-                                <br />[% library.branchaddress3 | html %][% END %]
-                            [% IF library.branchcity %]
-                                <br />[% library.branchcity | html %][% END %][% IF ( library.branchstate ) %],
-                                [% library.branchstate | html %][% END %]
-                            [% IF library.branchzip %]
-                                [% library.branchzip | html %][% END %]
-                            [% IF library.branchcountry %]
-                                <br />[% library.branchcountry | html %][% END %]
-                            [% IF library.branchphone %]
-                                <br />Ph: [% library.branchphone | html %][% END %]
-                            [% IF library.branchfax %]
-                                <br />Fax: [% library.branchfax | html %][% END %]
-                            [% IF library.branchemail %]
-                                <br /><a href="mailto:[% library.branchemail | uri %]">[% library.branchemail | html %]</a>[% END %]
-                            [% IF library.branchurl %]
-                                <br /><a href="[% library.branchurl | url %]">[% library.branchurl | html %]</a>[% END %]
-                            [% IF library.opac_info %]
-                                <br />OPAC Info: <div>[% library.opac_info | $raw %]</div>[% END %]
-                            [% IF library.branchnotes %]
-                                <br />Notes: [% library.branchnotes | html %][% END %]
-                        </td>
-                        <td>[% library.marcorgcode | html %]</td>
-                        <td>[% library.branchip | html %]</td>
-                        <td>[% IF library.pickup_location %]Yes[% ELSE %]No[% END %]</td>
-                        <td class="actions">
-                            <a class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/branches.pl?op=add_form&amp;branchcode=[% library.branchcode |uri %]"><i class="fa fa-pencil"></i> Edit</a>
-                            <form action="/cgi-bin/koha/admin/branches.pl" method="post">
-                                <input type="hidden" name="branchcode" value="[% library.branchcode | html %]" />
-                                <input type="hidden" name="op" value="delete_confirm" />
-                                <button type="submit" id="delete_library_[% library.branchcode | html %]" class="btn btn-default btn-xs"><i class="fa fa-trash"></i> Delete</button>
-                            </form>
-                        </td>
-                    </tr>
-                [% END %]
-            </tbody>
-        </table>
-    [% ELSE %]
-        <div class="dialog message">There are no libraries defined. <a href="/cgi-bin/koha/admin/branches.pl?op=add_form">Start defining libraries</a>.</div>
-    [% END %]
+    <table id="libraries">
+        <thead>
+            <tr>
+                <th>Name</th>
+                <th>Code</th>
+                <th>Address</th>
+                <th>MARC organization code</th>
+                <th>IP</th>
+                <th>Pickup location</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+    </table>
 [% END %]
 
             </main>
     <script>
         var columns_settings = [% ColumnsSettings.GetColumns( 'admin', 'libraries', 'libraries', 'json' ) | $raw %];
         $(document).ready(function() {
-            KohaTable("libraries", {
-                "aoColumnDefs": [
-                    { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
-                ],
-                "sPaginationType": "full",
-                "exportColumns": [0,1,2,3,4,5]
+
+            var libraries_url = '/api/v1/libraries';
+            var libraries = $("#libraries").api({
+                "ajax": {
+                    "url": libraries_url
+                },
+                'dom': 'C<"top pager"ilpfB><"#filter_c">tr<"bottom pager"ip>',
+                'emptyTable': '<div class="dialog message">'+_("There are no libraries defined.")+' <a href="/cgi-bin/koha/admin/branches.pl?op=add_form">'+_("Start defining libraries")+'</a>.</div>',
+                "columns": [
+                    {
+                        "data": "name",
+                        "searchable": true,
+                        "orderable": true
+                    },
+                    {
+                        "data": "library_id",
+                        "searchable": true,
+                        "orderable": true
+                    },
+                    {
+                        "data": function( row, type, val, meta ) {
+                            const library_info = [];
+                            if ( row.address1 != null ) library_info.push(row.address1);
+                            if ( row.address2 != null ) library_info.push(row.address2);
+                            if ( row.address3 != null ) library_info.push(row.address3);
+                            // geographical_location = city, state postal_code
+                            const locations = [];
+                            if ( row.city != null ) locations.push(row.city);
+                            if ( row.state != null ) locations.push(row.state);
+                            const geographical_location = locations.join(', ');
+                            if ( geographical_location != '' && row.postal_code != null) {
+                                library_info.push(geographical_location+' '+row.postal_code);
+                            }
+                            else {
+                                library_info.push(geographical_location);
+                            }
+                            if ( row.country != null ) library_info.push(row.country);
+                            if ( row.phone != null ) library_info.push(_("Ph: ") + row.phone);
+                            if ( row.fax != null ) library_info.push(_("Fax: ") + row.fax);
+                            if ( row.email != null ) library_info.push('<a href="mailto:'+row.email+'">'+row.email+'</a>');
+                            if ( row.url != null ) library_info.push('<a href="'+row.url+'">'+row.url+'</a>');
+                            if ( row.opac_info != null ) library_info.push(_("OPAC Info") + ': <div>'+row.opac_info+'</div>');
+                            if ( row.notes != null ) library_info.push(_("Notes")+': '+row.notes);
+                            return library_info.join('<br/>');
+                        },
+                        "searchable": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "marc_org_code",
+                        "searchable": true,
+                        "orderable": true
+                    },
+                    {
+                        "data": "ip",
+                        "searchable": true,
+                        "orderable": true
+                    },
+                    {
+                        "data": "pickup_location",
+                        "searchable": true,
+                        "orderable": true,
+                        "render": function( data, type, row, meta ) {
+                            return (data) ? _("Yes") : _("No");
+                        }
+                    },
+                    {
+                        "data": function( row, type, val, meta ) {
+
+                            var result = '<a class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/branches.pl?op=add_form&amp;branchcode='+row.library_id+'"><i class="fa fa-pencil"></i> '+_("Edit")+'</a>';
+                            result += '<form action="/cgi-bin/koha/admin/branches.pl" method="post">';
+                            result += '<input type="hidden" name="branchcode" value="'+row.library_id+'" />';
+                            result += '<input type="hidden" name="op" value="delete_confirm" />';
+                            result += '<button type="submit" id="delete_library_'+row.library_id+'" class="btn btn-default btn-xs"><i class="fa fa-trash"></i> '+_("Delete")+'</button></form>';
+
+                            return result;
+
+                        },
+                        "searchable": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "address1",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "address2",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "address3",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "city",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "state",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "postal_code",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "country",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "opac_info",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                    {
+                        "data": "notes",
+                        "searchable": true,
+                        "visible": false,
+                        "orderable": false
+                    },
+                ]
             }, columns_settings);
 
             [% UNLESS library %]