Bug 23351: Clean up localization template
authorOwen Leonard <oleonard@myacpl.org>
Fri, 19 Jul 2019 14:06:59 +0000 (14:06 +0000)
committerMartin Renvoize <martin.renvoize@ptfs-europe.com>
Wed, 2 Oct 2019 12:53:28 +0000 (13:53 +0100)
This patch modifies the template used for translation of item type
descriptions. It is updated with more consistent Bootstrap grid markup
and improved handling of adding and removing rows from the DataTable.

To test you should have more than one translation installed.

 - Apply the patch and go to Administration -> Item types.
 - Edit an item type.
 - Click the translate link.
 - Add a new translation. The table of translations should be updated
   with your new translation.
 - Test the "Delete" link corresponding to your new entry. It should
   work correctly.

Signed-off-by: Jesse Maseto <jesse@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
koha-tmpl/intranet-tmpl/prog/en/modules/admin/localization.tt

index 6952ba0..95d2810 100644 (file)
@@ -4,37 +4,68 @@
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Localization</title>
 [% INCLUDE 'doc-head-close.inc' popup => 1 %]
+<style>#localization { margin-top: 1em; }</style>
 </head>
 
 <body id="admin_localization" class="admin">
-<div id="main">
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-sm-12">
 <form id="add_translation" method="post">
     <input type="hidden" name="entity" value="[% entity | html %]" />
     <input type="hidden" name="code" value="[% code | html %]" />
-    Lang: <select name="lang">
-        [% FOR language IN languages %]
-            [% FOR sublanguage IN language.sublanguages_loop %]
-                [% IF language.plural %]
-                    <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
-                [% ELSE %]
-                    <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
-                [% END %]
-            [% END %]
-        [% END %]
-    </select>
-    Translation: <input type="text" name="translation" />
-    <input type="submit" value="Add" />
+    <input type="hidden" name="interface" value="[% interface_side | html %]" />
+    <fieldset class="rows clearfix">
+        <ol>
+            <li>
+                <span class="label">Authorized value:</span>
+                [% code | html %]
+            </li>
+            <li>
+                <label for="lang">Language:</label>
+                <select name="lang" id="lang">
+                    [% FOR language IN languages %]
+                        [% FOR sublanguage IN language.sublanguages_loop %]
+                            [% IF language.plural %]
+                                <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] [% sublanguage.region_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
+                            [% ELSE %]
+                                <option value="[% sublanguage.rfc4646_subtag | html %]">[% sublanguage.native_description | html %] ([% sublanguage.rfc4646_subtag | html %])</option>
+                            [% END %]
+                        [% END %]
+                    [% END %]
+                </select>
+            </li>
+            <li>
+                <label for="translation">Translation:</label>
+                <input type="text" size="40" name="translation" id="translation" />
+            </li>
+            <li>
+                <span class="label">&nbsp;</span>
+                <input type="submit" value="Add" />
+            </li>
+        </ol>
+    </fieldset>
 </form>
+            </div> <!-- /.col-sm-12 -->
+        </div> <!-- /.row -->
+
+        <div class="row">
+            <div class="col-sm-12">
 <div id="messages"></div>
+            </div> <!-- /.col-sm-12 -->
+        </div> <!-- /.row -->
+
+        <div class="row">
+            <div class="col-sm-12">
 <table id="localization">
     <thead>
         <tr>
             <th>Id</th>
             <th>Entity</th>
             <th>Code</th>
-            <th>Lang</th>
+            <th>Language</th>
             <th>Translation</th>
-            <th></th>
+            <th class="NoSort">&nbsp;</th>
         </tr>
     </thead>
     <tbody>
@@ -50,7 +81,9 @@
         [% END %]
     </tbody>
 </table>
-</div>
+            </div> <!-- /.col-sm-12 -->
+        </div> <!-- /.row -->
+    </div> <!-- /.container-fluid -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
                     }
                 },
                 error: function (data) {
-                    $(cell).css('background-color', '#FF0000');
+                    $(cell).css('background-color', '#FF9090');
                     if ( $(cell).hasClass('lang') ) {
                         $(cell).text(data.lang)
                     } else if ( $(cell).hasClass('translation') ) {
                     show_message({ type: 'success_on_delete', data: data });
                 },
                 error: function (data) {
-                    $(cell).css('background-color', '#FF0000');
+                    $(cell).css('background-color', '#FF9090');
                     show_message({ type: 'error_on_delete', data: data });
                 },
             });
             $(".dialog").hide();
 
             var table = $("#localization").DataTable($.extend(true, {}, dataTablesDefaults, {
+                "dom": 't',
+                "columnDefs": [
+                    { 'sortable': false, 'targets': [ 'NoSort' ] }
+                ],
                 'bPaginate': false,
+                'autoWidth': false,
             }));
 
-            var languages_select = $('<select name="lang"></select>');
+            var languages_select = $('<select name="lang" id="lang"></select>');
             [% FOR language IN languages %]
                 [% FOR sublanguage IN language.sublanguages_loop %]
                     var option;
                 send_update_request( data, this );
             });
 
-            $("a.delete").on('click', function(e){
+            $("body").on("click", "a.delete", function(e){
                 e.preventDefault();
                 if ( confirm(_("Are you sure you want to delete this translation?")) ) {
                     var td = $(this).parent();
                         if ( data.error ) {
                             show_message({ type: 'error_on_insert', data: data });
                         } else {
-                            // FIXME Should append the delete link
-                            table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "" ] ).draw();
+                            var new_row = table.row.add( [ data.id, data.entity, data.code, data.lang, data.translation, "<a href=\"#\" class=\"delete\"><i class=\"fa fa-trash\"></i> Delete</a>" ] ).draw().node();
+                            $( new_row ).attr("id", "row_id_" + data.id ).data("id", data.id );
                             show_message({ type: 'success_on_insert', data: data });
                         }
                     },