Merge pull request #2317 from urbanrotnik/ur-sci-4193-item-error-handling

Improve item error handling [SCI-4193]

app/assets/javascripts/repositories/row_editor.js

@@ -66,6 +66,7 @@ var RepositoryDatatableRowEditor = (function() {
 
       $label.text($input[0].files[0].name);
       $fileBtn.removeClass('new-file');
+      $fileBtn.removeClass('error');
     });
 
 
@@ -77,6 +78,7 @@ var RepositoryDatatableRowEditor = (function() {
       $fileBtn.addClass('new-file');
       $label.text('');
       $input.val('');
+      $fileBtn.removeClass('error');
 
       if (!$input.data('is-empty')) { // set hidden field for deletion only if original value has been set on rendering
         $input
@@ -151,6 +153,7 @@ var RepositoryDatatableRowEditor = (function() {
     });
 
     initSmartAnnotation($row);
+    initAssetCellActions($row);
 
     TABLE.columns.adjust();
   }

app/assets/javascripts/repositories/validators/base_validator.js

@@ -1,11 +1,40 @@
-/* global GLOBAL_CONSTANTS textValidator I18n */
+/* global GLOBAL_CONSTANTS I18n */
 
 $.fn.dataTable.render.RowNameValidator = function($input) {
-  return textValidator(undefined, $input, 1, GLOBAL_CONSTANTS.NAME_MAX_LENGTH);
+  var $inputContainer = $input.closest('.sci-input-container');
+  var value = $input.val();
+  var errorText;
+
+  if (value === '') {
+    errorText = I18n.t('repositories.table.name.errors.is_empty');
+  } else if (value.length > GLOBAL_CONSTANTS.NAME_MAX_LENGTH) {
+    errorText = I18n.t('repositories.table.name.errors.too_long', { max_length: GLOBAL_CONSTANTS.FILE_MAX_SIZE_MB });
+  }
+
+  if (errorText) {
+    $inputContainer.addClass('error');
+    $inputContainer.attr('data-error-text', errorText);
+    return false;
+  }
+
+  $inputContainer.removeClass('error');
+  return true;
 };
 
 $.fn.dataTable.render.RepositoryTextValueValidator = function($input) {
-  return textValidator(undefined, $input, 0, GLOBAL_CONSTANTS.TEXT_MAX_LENGTH);
+  var $inputContainer = $input.closest('.sci-input-container');
+  var value = $input.val();
+  var errorText;
+
+  if (value.length > GLOBAL_CONSTANTS.TEXT_MAX_LENGTH) {
+    errorText = I18n.t('repositories.table.text.errors.too_long', { max_length: GLOBAL_CONSTANTS.TEXT_MAX_LENGTH });
+    $inputContainer.addClass('error');
+    $inputContainer.attr('data-error-text', errorText);
+    return false;
+  }
+
+  $inputContainer.removeClass('error');
+  return true;
 };
 
 $.fn.dataTable.render.RepositoryListValueValidator = function() {

app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js

@@ -63,7 +63,7 @@ var RepositoryChecklistColumnType = (function() {
     },
     checkValidation: () => {
       var $manageModal = $(manageModal);
-      var count = $manageModal.find(previewContainer).find('.items-count').attr('data-count');
+      var count = $manageModal.find('.items-count').attr('data-count');
       return count < GLOBAL_CONSTANTS.REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN;
     },
     loadParams: () => {

app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js

@@ -68,18 +68,21 @@ var RepositoryListColumnType = (function() {
     });
   }
 
-  function refreshCounter(number, container) {
+  function refreshCounter(number) {
     var $manageModal = $(manageModal);
-    var $counterContainer = $manageModal.find(container).find('.limit-counter-container');
+    var $counterContainer = $manageModal.find('.limit-counter-container');
     var $btn = $manageModal.find('.column-save-btn');
+    var $textarea = $counterContainer.parents('.form-group').find('textarea');
 
     $counterContainer.find('.items-count').html(number).attr('data-count', number);
 
     if (number >= GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN) {
       $counterContainer.addClass('error-to-many-items');
+      $textarea.addClass('too-many-items');
       $btn.addClass('disabled');
     } else {
       $counterContainer.removeClass('error-to-many-items');
+      $textarea.removeClass('too-many-items');
       $btn.removeClass('disabled');
     }
   }
@@ -88,7 +91,7 @@ var RepositoryListColumnType = (function() {
     var items = textToItems($(textarea).val(), delimiterContainer);
     var hashItems = [];
     drawDropdownPreview(items, preview);
-    refreshCounter(items.length, preview);
+    refreshCounter(items.length);
 
     $.each(items, (index, option) => {
       hashItems.push({ data: option });
@@ -139,7 +142,7 @@ var RepositoryListColumnType = (function() {
     },
     checkValidation: () => {
       var $manageModal = $(manageModal);
-      var count = $manageModal.find(previewContainer).find('.items-count').attr('data-count');
+      var count = $manageModal.find('.items-count').attr('data-count');
       return count < GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN;
     },
     loadParams: () => {

app/assets/javascripts/sitewide/form_errors.js

@@ -35,12 +35,6 @@ 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')) {

app/assets/stylesheets/repositories.scss

@@ -334,6 +334,7 @@
       }
 
       &::before {
+        @include font-small;
         bottom: -15px;
         color: $brand-danger;
         content: attr(data-error-text);

app/assets/stylesheets/repository_columns/list_type.scss

@@ -2,51 +2,43 @@
 
 @import "constants";
 
-.dropdown-preview {
+#manage-repository-column {
-  align-items: center;
+  .dropdown-preview {
-  background-color: $color-concrete;
+    align-items: center;
-  border: 1px solid $color-gainsboro;
+    background-color: $color-concrete;
-  border-radius: 5px;
+    border: 1px solid $color-gainsboro;
-  display: flex;
+    border-radius: 5px;
-  justify-content: center;
+    display: flex;
-  padding: 10px 100px 5px;
+    justify-content: center;
-  position: relative;
+    padding: 10px 100px 5px;
-
-  .field-name {
-    color: $color-silver-chalice;
-    left: 0;
-    padding: 0 5px;
-    position: absolute;
-    top: 0;
-  }
-
-  .preview-block {
-    flex-basis: 200px;
     position: relative;
+
+    .field-name {
+      color: $color-silver-chalice;
+      left: 0;
+      padding: 0 5px;
+      position: absolute;
+      top: 0;
+    }
+
+    .preview-block {
+      flex-basis: 200px;
+      position: relative;
+    }
   }
 
   .limit-counter-container {
+    @include font-small;
     bottom: 0;
-    color: $color-silver-chalice;
+    color: $brand-danger;
-    left: 100%;
+    display: none;
-    line-height: 34px;
-    margin-left: 15px;
-    position: absolute;
-    width: 100px;
-
-    .list-items-limit {
-      display: none;
-    }
 
     &.error-to-many-items {
-      .list-items-count {
+      display: inline;
-        color: $brand-danger;
-        font-weight: bold;
-      }
-
-      .list-items-limit {
-        display: inline;
-      }
     }
   }
+
+  .too-many-items {
+    border-color: $brand-danger;
+  }
 }

app/views/repository_columns/manage_column_partials/_checklist.html.erb

@@ -14,9 +14,15 @@
   </div>
 </div>
 <div class="form-group">
-  <label class="control-label col-sm-3" for="repository-column-data-type">
+  <div class="control-label col-sm-3">
-    <%= t('libraries.manange_modal_column.checklist_type.checklist_items') %>
+    <label for="repository-column-data-type"><%= t('libraries.manange_modal_column.checklist_type.checklist_items') %></label>
-  </label>
+    <div class="limit-counter-container">
+      <span class="items-count" data-count="0">0</span>
+      <span class="items-limit">
+        <%= t('libraries.manange_modal_column.too_many_items_label', limit: Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN) %>
+      </span>
+    </div>
+  </div>
   <div class="col-sm-9">
     <%= text_area_tag 'items-textarea', column.repository_checklist_items.pluck(:data).join(selected_delimiter_char), rows: 10, class: 'form-control items-textarea' %>
     <% unless column.new_record? %>
@@ -36,9 +42,5 @@
       data-select-multiple-name="<%= t('libraries.manange_modal_column.checklist_type.multiple_options') %>"
     >
     </select>
-    <div class="limit-counter-container">
-      <span class="items-count" data-count="0">0</span>
-      <span class="items-limit">/<%= Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN %> </span>
-      <span class="items-label"></span></div>
   </div>
 </div>

app/views/repository_columns/manage_column_partials/_list.html.erb

@@ -14,9 +14,15 @@
   </div>
 </div>
 <div class="form-group">
-  <label class="control-label col-sm-3" for="repository-column-data-type">
+  <div class="control-label col-sm-3">
-    <%= t('libraries.manange_modal_column.list_type.dropdown_items_label') %>
+  <label for="repository-column-data-type"><%= t('libraries.manange_modal_column.list_type.dropdown_items_label') %></label>
-  </label>
+  <div class="limit-counter-container">
+    <span class="items-count" data-count="0">0</span>
+    <span class="items-limit">
+      <%= t('libraries.manange_modal_column.too_many_items_label', limit: Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN) %>
+    </span>
+  </div>
+</div>
   <div class="col-sm-9">
     <%= text_area_tag 'items-textarea', column.repository_list_items.pluck(:data).join(selected_delimiter_char), rows: 10, class: 'form-control items-textarea' %>
     <% unless column.new_record? %>
@@ -32,9 +38,5 @@
     <div class="preview-label"><%= column.name %></div>
     <select class="form-control preview-select">
     </select>
-    <div class="limit-counter-container">
-      <span class="items-count" data-count="0">0</span>
-      <span class="items-limit">/<%= Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %> </span>
-      <span class="items-label"></span></div>
   </div>
 </div>

config/locales/en.yml

@@ -1058,6 +1058,8 @@ en:
       assets:
         select_file_btn: "Select File (Max %{max_size} MB)..."
       text:
+        errors:
+          :too_long: "Text is too long (maximum is %{max_length} characters)"
         enter_text: "Enter text"
       number:
         enter_number: "Enter number"
@@ -1071,6 +1073,11 @@ en:
         errors:
           set_all_or_none: 'Needs to set both or none'
           not_valid_range: 'Range is not valid.'
+      name:
+        errors:
+          too_long: "Item name is too long (maximum is %{max_length} characters)"
+          is_empty: "Item name should be filled"
+
     add_new_record: "New item"
     import_records:
       import: 'Import'
@@ -1159,6 +1166,7 @@ en:
       colum_type: "Column type"
       dropdown_item_descirption: "Dropdown items should be separated by comma."
       change_multi_select_items_warning: "Be careful: changing existing list items will result in deselecting previously selected items."
+      too_many_items_label: " of %{limit} items"
       select:
         repository_text_value: "Text"
         repository_number_value: "Number"