🐛 Cleaning up UI on importers show (#1011)

* 🐛 Cleaning up UI on importers show

This commit will align the download buttons on the importer pages with
the header.  Also, the table width was funky so that is also fixed.

* Add missing translations

This commit will add missing translations for the importer show page
table.

* Hide importer-entry-classes div

In Bootstrap 4 we now use d-none.

app/assets/javascripts/bulkrax/datatables.js

@@ -3,6 +3,10 @@ Blacklight.onLoad(function() {
     $('#importer-show-table').DataTable( {
       'processing': true,
       'serverSide': true,
+      'width': '100%',
+      'autoWidth': false,
+      'scrollX': true,
+      'scrollCollapse': true,
       "ajax": window.location.href.replace(/(\/(importers|exporters)\/\d+)/, "$1/entry_table.json"),
       "pageLength": 30,
       "lengthMenu": [[30, 100, 200], [30, 100, 200]],
@@ -15,6 +19,14 @@ Blacklight.onLoad(function() {
         { "data": "errors", "orderable": false },
         { "data": "actions", "orderable": false }
       ],
+      drawCallback: function() {
+        // Remove the inline styles that DataTables adds to the scrollHeadInner and table elements
+        // it's not perfect but better than the style being applied
+        setTimeout(function() {
+          $('.dataTables_scrollHeadInner').removeAttr('style');
+          $('.table.table-striped.dataTable.no-footer').removeAttr('style');
+        }, 100);
+      },
       initComplete: function () {
         // Add entry class filter
         entrySelect.bind(this)()

app/views/bulkrax/importers/show.html.erb

@@ -1,10 +1,10 @@
-<div class="col-xs-12 main-header">
+<div class="col-xs-12 main-header d-flex justify-content-between align-items-center">
   <h1><span class="fa fa-cloud-upload" aria-hidden="true"></span> Importer: <%= @importer.name %></h1>
   <div class="pull-right">
-    <%= link_to 'Download Original File', importer_original_file_path(@importer.id), class: 'btn btn-primary', data: { turbolinks: false } if @importer.original_file %>
+    <%= link_to 'Download Original File', importer_original_file_path(@importer.id), class: 'btn btn-primary text-nowrap', data: { turbolinks: false } if @importer.original_file %>
     <% if @importer.failed_entries? %>
-      <%= link_to 'Export Errored Entries', importer_export_errors_path(@importer.id), class: 'btn btn-primary', data: { turbolinks: false }%>
-      <%= link_to 'Upload Corrected Entries', importer_upload_corrected_entries_path(@importer.id), class: 'btn btn-primary' if @importer.parser.is_a?(Bulkrax::CsvParser) %>
+      <%= link_to 'Export Errored Entries', importer_export_errors_path(@importer.id), class: 'btn btn-primary text-nowrap', data: { turbolinks: false }%>
+      <%= link_to 'Upload Corrected Entries', importer_upload_corrected_entries_path(@importer.id), class: 'btn btn-primary text-nowrap' if @importer.parser.is_a?(Bulkrax::CsvParser) %>
     <% end %>
   </div>
 </div>

app/views/bulkrax/shared/_entries_tab.html.erb

@@ -12,5 +12,5 @@
       </tr>
     </thead>
   </table>
-  <div id='importer-entry-classes' class='hidden'><%= [item.parser.entry_class.to_s, item.parser.collection_entry_class.to_s, item.parser.file_set_entry_class.to_s].compact.join('|') %></div>
+  <div id='importer-entry-classes' class='hidden d-none'><%= [item.parser.entry_class.to_s, item.parser.collection_entry_class.to_s, item.parser.file_set_entry_class.to_s].compact.join('|') %></div>
 </div>

config/locales/bulkrax.en.yml

@@ -1,9 +1,9 @@
 en:
-  helpers: 
-    action: 
+  helpers:
+    action:
       importer:
         new: "New"
-      exporter: 
+      exporter:
         new: "New"
   bulkrax:
     admin:
@@ -75,6 +75,8 @@ en:
         identifier: Identifier
         entry_id: Entry ID
         status: Status
+        type: Type
+        updated_at: Updated At
         errors: Errors
         status_set_at: Status Set At
         actions: Actions