From 0522b9b0a37e80f84c069f1e3c12393b18e441a5 Mon Sep 17 00:00:00 2001 From: Urban Rotnik Date: Thu, 16 Jan 2020 11:30:26 +0100 Subject: [PATCH 1/3] Update too many items error showing Update too many items error showing --- .../checklist_column_type.js | 2 +- .../columns_initializers/list_column_type.js | 11 +-- app/assets/stylesheets/repositories.scss | 1 + .../repository_columns/list_type.scss | 68 ++++++++----------- .../_checklist.html.erb | 16 +++-- .../manage_column_partials/_list.html.erb | 16 +++-- config/locales/en.yml | 1 + 7 files changed, 58 insertions(+), 57 deletions(-) diff --git a/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/checklist_column_type.js index 646d5fc38..05421454f 100644 --- 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: () => { diff --git a/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js b/app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js index 4d1496fe5..3de9129e9 100644 --- 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: () => { diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index bc803e681..7f76c270c 100644 --- 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); diff --git a/app/assets/stylesheets/repository_columns/list_type.scss b/app/assets/stylesheets/repository_columns/list_type.scss index 4db1a354e..c14341305 100644 --- 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; + } } diff --git a/app/views/repository_columns/manage_column_partials/_checklist.html.erb b/app/views/repository_columns/manage_column_partials/_checklist.html.erb index 7e1b8d0ba..b0b8c1be0 100644 --- 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 @@
- +
+ +
+ 0 + + <%= t('libraries.manange_modal_column.too_many_items_label', limit: Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN) %> + +
+
<%= 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') %>" > -
- 0 - /<%= Constants::REPOSITORY_CHECKLIST_ITEMS_PER_COLUMN %> -
diff --git a/app/views/repository_columns/manage_column_partials/_list.html.erb b/app/views/repository_columns/manage_column_partials/_list.html.erb index 6423235d9..6a33f9cbe 100644 --- 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 @@
- +
+ +
+ 0 + + <%= t('libraries.manange_modal_column.too_many_items_label', limit: Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN) %> + +
+
<%= 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 @@
<%= column.name %>
-
- 0 - /<%= Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %> -
diff --git a/config/locales/en.yml b/config/locales/en.yml index f886a93d5..d6890198f 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1159,6 +1159,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" From 218316bea2c8bfa7165ce7337cacb8fba1ae4f00 Mon Sep 17 00:00:00 2001 From: Urban Rotnik Date: Thu, 16 Jan 2020 13:30:05 +0100 Subject: [PATCH 2/3] Update error handling for name and text --- .../repositories/validators/base_validator.js | 35 +++++++++++++++++-- .../javascripts/sitewide/form_errors.js | 6 ---- config/locales/en.yml | 7 ++++ 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/app/assets/javascripts/repositories/validators/base_validator.js b/app/assets/javascripts/repositories/validators/base_validator.js index a68792f73..14d4e9436 100644 --- 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() { diff --git a/app/assets/javascripts/sitewide/form_errors.js b/app/assets/javascripts/sitewide/form_errors.js index 2db026ef3..8a11b5723 100644 --- 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('
'); - 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')) { diff --git a/config/locales/en.yml b/config/locales/en.yml index d6890198f..464592d7d 100644 --- 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' From 3a24d3150d808f21e7a5b7e5463cfecd85118188 Mon Sep 17 00:00:00 2001 From: Urban Rotnik Date: Thu, 16 Jan 2020 13:49:34 +0100 Subject: [PATCH 3/3] Remove error on new file select, fix for new row file cells --- app/assets/javascripts/repositories/row_editor.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/assets/javascripts/repositories/row_editor.js b/app/assets/javascripts/repositories/row_editor.js index 2e591a8a7..6f1cdb177 100644 --- 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(); }