Merge pull request #2313 from aignatov-bio/ai-sci-4328-fix-general-css-issues-for-repositories

Fix general css issue for repositories [SCI-4238]

app/assets/javascripts/repositories/renderers/edit_renderers.js

@@ -8,8 +8,8 @@ $.fn.dataTable.render.editRowName = function(formId, cell) {
   let text = $cell.find('a').first().text();
 
   $cell.html(`
-    <div class="form-group">
+    <div class="sci-input-container text-field">
-      <input class="form-control editing"
+      <input class="sci-input-field"
              form="${formId}"
              type="text"
              name="repository_row[name]"
@@ -49,8 +49,8 @@ $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell)
   let text = $cell.text();
 
   $cell.html(`
-    <div class="form-group">
+    <div class="sci-input-container text-field">
-      <input class="form-control editing"
+      <input class="sci-input-field"
              form="${formId}"
              type="text"
              name="repository_cells[${columnId}]"
@@ -137,8 +137,8 @@ $.fn.dataTable.render.editRepositoryNumberValue = function(formId, columnId, cel
   let $cell = $(cell.node());
 
   $cell.html(`
-    <div class="form-group">
+    <div class="sci-input-container text-field">
-      <input class="form-control editing"
+      <input class="sci-input-field"
              form="${formId}"
              type="number"
              name="repository_cells[${columnId}]"

app/assets/javascripts/repositories/renderers/new_renderers.js

@@ -5,8 +5,8 @@ GLOBAL_CONSTANTS DateTimeHelper
 
 $.fn.dataTable.render.newRowName = function(formId, $cell) {
   $cell.html(`
-    <div class="form-group">
+    <div class="sci-input-container text-field">
-      <input class="form-control editing"
+      <input class="sci-input-field"
              form="${formId}"
              type="text"
              name="repository_row[name]"
@@ -39,8 +39,8 @@ $.fn.dataTable.render.newRepositoryAssetValue = function(formId, columnId, $cell
 
 $.fn.dataTable.render.newRepositoryTextValue = function(formId, columnId, $cell) {
   $cell.html(`
-    <div class="form-group">
+    <div class="sci-input-container text-field">
-      <input class="form-control editing"
+      <input class="sci-input-field"
              form="${formId}"
              type="text"
              name="repository_cells[${columnId}]"
@@ -66,8 +66,8 @@ $.fn.dataTable.render.newRepositoryChecklistValue = function(formId, columnId, $
 
 $.fn.dataTable.render.newRepositoryNumberValue = function(formId, columnId, $cell) {
   $cell.html(`
-    <div class="form-group">
+    <div class="sci-input-container text-field">
-      <input class="form-control editing"
+      <input class="sci-input-field"
              form="${formId}"
              type="number"
              name="repository_cells[${columnId}]"

app/assets/javascripts/repositories/repository_datatable.js

@@ -1,5 +1,5 @@
 /*
-  globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise
+  globals I18n _ SmartAnnotation FilePreviewModal animateSpinner Promise dropdownSelector
   HelperModule animateLoading hideAssignUnasignModal RepositoryDatatableRowEditor
 */
 
@@ -385,7 +385,7 @@ var RepositoryDatatable = (function(global) {
   function dataTableInit() {
     viewAssigned = 'assigned';
     TABLE = $(TABLE_ID).DataTable({
-      dom: "R<'main-actions'<'toolbar'><'filter-container'f>>t<'pagination-row'<'pagination-info'li><'pagination-actions'p>>",
+      dom: "R<'main-actions hidden'<'toolbar'><'filter-container'f>>t<'pagination-row hidden'<'pagination-info'li><'pagination-actions'p>>",
       stateSave: true,
       processing: true,
       serverSide: true,
@@ -519,6 +519,8 @@ var RepositoryDatatable = (function(global) {
         });
       },
       fnInitComplete: function() {
+        var tableLengthSelect = $('.dataTables_length select');
+        var tableFilterInput = $('.dataTables_filter input');
         initRowSelection();
         bindExportActions();
         disableCheckboxToggleOnAssetDownload();
@@ -540,8 +542,35 @@ var RepositoryDatatable = (function(global) {
           initCancelButton();
         }
 
+        if ($('.repository-show').length) {
           $('.dataTables_scrollBody, .dataTables_scrollHead').css('overflow', '');
         }
+
+        if (tableLengthSelect.val() == null) {
+          tableLengthSelect.val(10).change();
+        }
+        $.each(tableLengthSelect.find('option'), (i, option) => {
+          option.innerHTML = I18n.t('repositories.index.show_per_page', { number: option.value });
+        });
+        $('.dataTables_length').append(tableLengthSelect).find('label').remove();
+        dropdownSelector.init(tableLengthSelect, {
+          noEmptyOption: true,
+          singleSelect: true,
+          closeOnSelect: true,
+          selectAppearance: 'simple'
+        });
+
+        tableFilterInput.attr('placeholder', I18n.t('repositories.index.filter_inventory'))
+          .addClass('sci-input-field')
+          .css('margin', 0);
+        $('.dataTables_filter').append(`
+            <div class="sci-input-container left-icon">
+              <i class="fas fa-search"></i>
+            </div>`).find('.sci-input-container').prepend(tableFilterInput);
+        $('.dataTables_filter').find('label').remove();
+
+        $('.main-actions, .pagination-row').removeClass('hidden');
+      }
     });
 
     // hack to replace filter placeholder

app/assets/javascripts/sitewide/form_errors.js

@@ -25,12 +25,6 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) {
       $form.clearFormErrors();
     }
 
-    // Mark error form group
-    var $formGroup = $(input).closest('.form-group');
-    if (!$formGroup.hasClass('has-error')) {
-      $formGroup.addClass('has-error');
-    }
-
     // Add error message/s
     var errorText = ($.makeArray(errMsgs).map(function(m) {
       if( m instanceof Array ) {
@@ -40,6 +34,19 @@ var renderFormError = function(ev, input, errMsgs, clearErr, errAttributes) {
       }
 
     })).join('<br />');
+
+    if ($(input).hasClass('sci-input-field')) {
+      $(input).closest('.sci-input-container').addClass('error');
+      $(input).closest('.sci-input-container').attr('data-error-text', errorText);
+      return;
+    }
+
+    // Mark error form group
+    var $formGroup = $(input).closest('.form-group');
+    if (!$formGroup.hasClass('has-error')) {
+      $formGroup.addClass('has-error');
+    }
+
     var $errSpan = "<span class='help-block'" +
       errAttributes + '>' + errorText + '</span>';
     $(input).after($errSpan);

app/assets/stylesheets/application.scss

@@ -28,6 +28,7 @@
 @import "partials/*";
 @import "my_modules/protocols/*";
 @import "my_modules/results/*";
+@import "my_modules/*";
 @import "protocols/*";
 @import "repository/*";
 @import "repository_columns/*";

app/assets/stylesheets/extend/bootstrap.scss

@@ -143,3 +143,10 @@
     }
   }
 }
+
+
+.bootstrap-datetimepicker-widget {
+  .dow {
+    @include font-button;
+  }
+}

app/assets/stylesheets/extend/datatable.scss

@@ -12,9 +12,15 @@
 
     tr {
       th {
-        border-bottom-width: 0;
+        border-bottom: 2px solid $color-white;
         border-left: 2px solid $color-white;
         font-weight: bold;
+        white-space: nowrap;
+
+        .modal-tooltiptext {
+          margin-left: -10px;
+          margin-top: 10px;
+        }
 
         &::after {
           color: $color-silver-chalice;

app/assets/stylesheets/my_modules/repositories.scss

@@ -0,0 +1,69 @@
+// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
+// scss-lint:disable NestingDepth ImportantRule
+
+.my-module-inventories {
+
+  .main-actions {
+    align-items: center;
+    display: flex;
+
+    .filter-container {
+      flex-grow: 1;
+    }
+  }
+
+  .dataTables_scroll {
+    .dataTables_scrollBody {
+      thead {
+        opacity: 0;
+      }
+    }
+  }
+
+  tbody {
+    tr:hover {
+
+      .assigned-column {
+        .repository-row-edit-icon {
+          display: none !important;
+        }
+
+        .circle-icon {
+          margin-left: 30px !important;
+        }
+      }
+    }
+  }
+
+  .pagination-row {
+    align-items: center;
+    display: flex;
+
+    .pagination-info,
+    .pagination-actions {
+      flex-grow: 1;
+    }
+
+    .pagination-info {
+      align-items: center;
+      display: flex;
+
+      .dataTables_info {
+        padding-top: 0;
+      }
+
+      .dataTables_length {
+        margin-right: 24px;
+        width: 170px;
+
+        .dropdown-selector-container {
+          width: inherit;
+        }
+
+        label {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/repositories.scss

@@ -132,7 +132,7 @@
     }
 
     .dataTables_scrollBody {
-      thead {
+      thead th#checkbox {
         opacity: 0;
       }
     }
@@ -166,7 +166,12 @@
       }
 
       .dataTables_length {
-        margin-right: 10px;
+        margin-right: 24px;
+        width: 170px;
+
+        .dropdown-selector-container {
+          width: inherit;
+        }
 
         label {
           margin-bottom: 0;

app/assets/stylesheets/repository/repository_table.scss

@@ -78,15 +78,21 @@
         padding: 5px;
       }
     }
-  }
 
-  .checklist-dropdown span  {
+    span  {
       color: $brand-primary;
       cursor: pointer;
+
       &:hover {
         text-decoration: underline;
       }
     }
+  }
+  // Text and Number field
+
+  .text-field.sci-input-container {
+    min-width: 150px;
+  }
 
   // DateTime
   .datetime-container {

app/assets/stylesheets/shared_styles/elements/input_fields.scss

@@ -16,6 +16,7 @@
     animation-timing-function: $timing-function-sharp;
     border: $border-default;
     border-radius: $border-radius-default;
+    box-shadow: none;
     height: 36px;
     outline: 0;
     padding: 0 0 0 10px;

app/assets/stylesheets/themes/scinote.scss

@@ -516,14 +516,6 @@ a[data-toggle="tooltip"] {
   .dataTables_wrapper {
     margin-top: 15px;
     clear: both;
-
-    .dataTables_length {
-      float: left;
-    }
-
-    .dataTables_filter {
-      float: right;
-    }
   }
 
   table {

app/views/my_modules/repository.html.erb

@@ -44,7 +44,7 @@
     <% end %>
   </div>
 
-  <div id="content"
+  <div id="content" class="my-module-inventories"
        data-repo-id="#repository-table-<%= @repository.id %>">
   	<%= render partial: "repositories/repository_table",
                locals: {

config/locales/en.yml

@@ -1007,6 +1007,8 @@ en:
       edit_inventory: "Edit Inventory"
       share_inventory: "Share"
       view_only_permission_label: "You have veiw-only permission"
+      show_per_page: "Show %{number} per page"
+      filter_inventory: "Filter inventory"
 
       options_dropdown:
         import_items: 'Import items'