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

Improve item error handling [SCI-4193]
2024-12-25 17:24:51 +08:00 · 2020-01-16 14:44:43 +01:00 · 2020-01-16 14:44:43 +01:00 · 33fe956cf3
commit 33fe956cf3
parent 17c643fb21 3a24d3150d
10 changed files with 100 additions and 66 deletions
--- a/app/assets/javascripts/repositories/row_editor.js
+++ b/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();
  }
--- a/app/assets/javascripts/repositories/validators/base_validator.js
+++ b/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() {
--- a/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js
+++ b/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: () => {
--- a/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js
+++ b/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: () => {
--- a/app/assets/javascripts/sitewide/form_errors.js
+++ b/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')) {
--- a/app/assets/stylesheets/repositories.scss
+++ b/app/assets/stylesheets/repositories.scss
@ -334,6 +334,7 @@
      }

      &::before {
+        @include font-small;
        bottom: -15px;
        color: $brand-danger;
        content: attr(data-error-text);
--- a/app/assets/stylesheets/repository_columns/list_type.scss
+++ b/app/assets/stylesheets/repository_columns/list_type.scss
@ -2,51 +2,43 @@

@import "constants";

-.dropdown-preview {
-  align-items: center;
-  background-color: $color-concrete;
-  border: 1px solid $color-gainsboro;
-  border-radius: 5px;
-  display: flex;
-  justify-content: center;
-  padding: 10px 100px 5px;
-  position: relative;
-
-  .field-name {
-    color: $color-silver-chalice;
-    left: 0;
-    padding: 0 5px;
-    position: absolute;
-    top: 0;
-  }
-
-  .preview-block {
-    flex-basis: 200px;
+#manage-repository-column {
+  .dropdown-preview {
+    align-items: center;
+    background-color: $color-concrete;
+    border: 1px solid $color-gainsboro;
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    padding: 10px 100px 5px;
    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;
-    left: 100%;
-    line-height: 34px;
-    margin-left: 15px;
-    position: absolute;
-    width: 100px;
-
-    .list-items-limit {
-      display: none;
-    }
+    color: $brand-danger;
+    display: none;

    &.error-to-many-items {
-      .list-items-count {
-        color: $brand-danger;
-        font-weight: bold;
-      }
-
-      .list-items-limit {
-        display: inline;
-      }
+      display: inline;
    }
  }
+
+  .too-many-items {
+    border-color: $brand-danger;
+  }
 }
--- a/app/views/repository_columns/manage_column_partials/_checklist.html.erb
+++ b/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">
-    <%= t('libraries.manange_modal_column.checklist_type.checklist_items') %>
-  </label>
+  <div class="control-label col-sm-3">
+    <label for="repository-column-data-type"><%= t('libraries.manange_modal_column.checklist_type.checklist_items') %></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>
--- a/app/views/repository_columns/manage_column_partials/_list.html.erb
+++ b/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">
-    <%= t('libraries.manange_modal_column.list_type.dropdown_items_label') %>
-  </label>
+  <div class="control-label col-sm-3">
+  <label for="repository-column-data-type"><%= t('libraries.manange_modal_column.list_type.dropdown_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_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>
--- a/config/locales/en.yml
+++ b/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"