Improve update items action, JS and views

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

@@ -13,7 +13,6 @@ var RepositoryListColumnType = (function() {
       return: '\n',
       comma: ',',
       semicolon: ';',
-      pipe: '|',
       space: ' '
     };
 
@@ -51,21 +50,55 @@ var RepositoryListColumnType = (function() {
     });
   }
 
+  function refreshCounter(number) {
+    var $manageModal = $(manageModal);
+    $manageModal.find('.list-items-count').html(number);
+
+    if (number > GLOBAL_CONSTANTS.REPOSITORY_LIST_ITEMS_PER_COLUMN) {
+      $manageModal.find('.limit-counter-container').addClass('error-to-many-items');
+      $manageModal.find('button[data-action="save"]').prop('disabled', true);
+    } else {
+      $manageModal.find('.limit-counter-container').removeClass('error-to-many-items');
+      $manageModal.find('button[data-action="save"]').prop('disabled', false);
+    }
+  }
+
+  function refreshPreviewDropdownList() {
+    var listItemsTextarea = '[data-column-type="RepositoryListValue"] #list-items-textarea';
+    var dropdownDelimiter = 'select#delimiter';
+
+    var items = textToItems($(listItemsTextarea).val(), $(dropdownDelimiter).val());
+    var hashItems = [];
+    drawDropdownPreview(items);
+    refreshCounter(items.length);
+
+    $.each(items, (index, option) => {
+      hashItems.push({ data: option });
+    });
+
+    $('#dropdown_options').val(JSON.stringify(hashItems));
+  }
+
   function initDropdownItemsTextArea() {
     var $manageModal = $(manageModal);
     var listItemsTextarea = '[data-column-type="RepositoryListValue"] #list-items-textarea';
     var dropdownDelimiter = 'select#delimiter';
+    var columnNameInput = 'input#repository-column-name';
 
     $manageModal.off('change keyup paste', listItemsTextarea).on('change keyup paste', listItemsTextarea, function() {
-      var items = textToItems($(listItemsTextarea).val(), $(dropdownDelimiter).val());
-      drawDropdownPreview(items);
-      $('#dropdown_options').val(items);
+      refreshPreviewDropdownList();
     });
 
     $manageModal.off('change', dropdownDelimiter).on('change', dropdownDelimiter, function() {
-      var items = textToItems($(listItemsTextarea).val(), $(dropdownDelimiter).val());
-      drawDropdownPreview(items);
-      $('#dropdown_options').val(items);
+      refreshPreviewDropdownList();
+    });
+
+    $manageModal.off('columnModal::partialLoaded').on('columnModal::partialLoaded', function() {
+      refreshPreviewDropdownList();
+    });
+
+    $manageModal.off('keyup change', columnNameInput).on('keyup change', columnNameInput, function() {
+      $manageModal.find('.preview-label').html($manageModal.find(columnNameInput).val());
     });
   }
 

app/assets/javascripts/repository_columns/index.js

@@ -83,7 +83,7 @@ var RepositoryColumns = (function() {
   function loadSpecificParams(type, params) {
     var newParams = params;
     if (type === 'RepositoryListValue') {
-      newParams.repository_column.list_items = $('#dropdown_options').val();
+      newParams.repository_column.repository_list_items_attributes = JSON.parse($('#dropdown_options').val());
     }
     return newParams;
   }
@@ -95,13 +95,20 @@ var RepositoryColumns = (function() {
       var params = { repository_column: { name: $('#repository-column-name').val() } };
       var selectedType = $('#repository-column-data-type').find(':selected').val();
       params = loadSpecificParams(selectedType, params);
-      $.post(url, params, (result) => {
-        var data = result.data;
-        insertNewListItem(data);
-        HelperModule.flashAlertMsg(data.attributes.message, 'success');
-        $manageModal.modal('hide');
-      }).error((error) => {
-        $('#new-repository-column').renderFormErrors('repository_column', error.responseJSON.repository_column, true);
+      $.ajax({
+        url: url,
+        type: 'POST',
+        data: JSON.stringify(params),
+        contentType: 'application/json',
+        success: function(result) {
+          var data = result.data;
+          insertNewListItem(data);
+          HelperModule.flashAlertMsg(data.attributes.message, 'success');
+          $manageModal.modal('hide');
+        },
+        error: function(error) {
+          $('#new-repository-column').renderFormErrors('repository_column', error.responseJSON.repository_column, true);
+        }
       });
     });
   }
@@ -116,7 +123,9 @@ var RepositoryColumns = (function() {
       $.ajax({
         url: url,
         type: 'PUT',
-        data: params,
+        data: JSON.stringify(params),
+        dataType: 'json',
+        contentType: 'application/json',
         success: function(result) {
           var data = result.data;
           updateListItem(data);
@@ -135,16 +144,20 @@ var RepositoryColumns = (function() {
     $('.repository-column-edtior').off('click', '.manage-repo-column').on('click', '.manage-repo-column', function() {
       var button = $(this);
       var modalUrl = button.data('modal-url');
+      var columnType;
       $.get(modalUrl, (data) => {
         $manageModal.modal('show').find('.modal-content').html(data.html)
           .find('#repository-column-name')
           .focus();
+        $manageModal.trigger('columnModal::partialLoaded');
 
         if (button.data('action') === 'new') {
           $('[data-column-type="RepositoryTextValue"]').show();
           $('#new-repo-column-submit').show();
         } else {
+          columnType = $('#repository-column-data-type').find(':selected').val();
           $('#update-repo-column-submit').show();
+          $('[data-column-type=' + columnType + ']').show();
         }
       }).fail(function() {
         HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');

app/assets/javascripts/sitewide/constants.js.erb

@@ -3,5 +3,6 @@ const GLOBAL_CONSTANTS = {
   NAME_MAX_LENGTH: <%= Constants::NAME_MAX_LENGTH %>,
   FILENAME_TRUNCATION_LENGTH: <%= Constants::FILENAME_TRUNCATION_LENGTH %>,
   FILE_MAX_SIZE_MB: <%= Rails.configuration.x.file_max_size_mb %>,
-  IS_SAFARI: /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+  IS_SAFARI: /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
+  REPOSITORY_LIST_ITEMS_PER_COLUMN: <%= Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %>
 };

app/assets/stylesheets/repositories.scss

@@ -290,5 +290,31 @@
 
   .preview-block {
     flex-basis: 200px;
+    position: relative;
+  }
+
+  .limit-counter-container {
+    bottom: 0;
+    color: $color-silver-chalice;
+    left: 100%;
+    line-height: 34px;
+    margin-left: 15px;
+    position: absolute;
+    width: 100px;
+
+    .list-items-limit {
+      display: none;
+    }
+
+    &.error-to-many-items {
+      .list-items-count {
+        color: $brand-danger;
+        font-weight: bold;
+      }
+
+      .list-items-limit {
+        display: inline;
+      }
+    }
   }
 }

app/controllers/repository_columns/list_columns_controller.rb

@@ -20,11 +20,11 @@ module RepositoryColumns
     end
 
     def update
-      service = RepositoryColumns::UpdateColumnService
+      service = RepositoryColumns::UpdateListColumnService
                 .call(user: current_user,
-                        team: current_team,
-                        column: @repository_column,
-                        params: update_repository_column_params)
+                      team: current_team,
+                      column: @repository_column,
+                      params: repository_column_params)
 
       if service.succeed?
         render json: service.column, status: :ok
@@ -49,9 +49,5 @@ module RepositoryColumns
     def repository_column_params
       params.require(:repository_column).permit(:name, repository_list_items_attributes: %i(data))
     end
-
-    def update_repository_column_params
-      params.require(:repository_column).permit(:name, repository_list_items_attributes: %i(id data _destroy))
-    end
   end
 end

app/services/repository_columns/update_list_column_service.rb

@@ -21,7 +21,7 @@ module RepositoryColumns
       if @column.repository_list_items.size - to_be_deleted.size + to_be_created.size >=
          Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN
 
-        @errors[:repository_column] = { repository_list_items: 'too many items dude!' }
+        @errors[:repository_column] = { repository_list_items: 'too many items' }
       end
       return self unless valid?
 

app/views/repository_columns/_manage_column_modal_content.html.erb

@@ -67,7 +67,7 @@
       <%= render partial: "repository_columns/manage_column_partials/asset.html.erb" %>
     </span>
     <span style="display: none" class="column-type" data-column-type="RepositoryListValue">
-      <%= render partial: "repository_columns/manage_column_partials/list.html.erb" %>
+      <%= render partial: "repository_columns/manage_column_partials/list.html.erb", locals: { column: @repository_column } %>
     </span>
     <span style="display: none" class="column-type" data-column-type="RepositoryStatusValue">
       <%= render partial: "repository_columns/manage_column_partials/status.html.erb" %>

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

@@ -1,10 +1,15 @@
+<% delimiters = Constants::REPOSITORY_LIST_ITEMS_DELIMITERS
+                .split(',')
+                .map {|e| Hash[t('libraries.manange_modal_column.list_type.delimiters.' + e), e]}
+                .inject(:merge) %>
+
 <%= hidden_field_tag 'dropdown_options' %>
 <div class="form-group">
   <label class="control-label col-sm-3" for="repository-column-data-type">
     <%= t('libraries.manange_modal_column.list_type.delimiter_label') %>
   </label>
   <div class="col-sm-9">
-    <%= select_tag('delimiter', options_for_select(%w(auto return comma semicolon space pipe), 'auto'), class: 'form-control') %>
+    <%= select_tag('delimiter', options_for_select(delimiters, 'auto'), class: 'form-control') %>
   </div>
 </div>
 <div class="form-group">
@@ -12,15 +17,18 @@
     <%= t('libraries.manange_modal_column.list_type.dropdown_items_label') %>
   </label>
   <div class="col-sm-9">
-    <%= text_area_tag 'list-items-textarea', nil, rows: 10, class: 'form-control' %>
+    <%= text_area_tag 'list-items-textarea', column.repository_list_items.pluck(:data).join("\n"), rows: 10, class: 'form-control' %>
   </div>
 </div>
 <div class="dropdown-preview">
   <span class="field-name">Preview</span>
   <div class="preview-block">
-    <div class="preview-label">Test</div>
+    <div class="preview-label"><%= column.name %></div>
     <select class="form-control">
-      <option value="" disabled selected>Select option...</option>
     </select>
+    <div class="limit-counter-container">
+      <span class="list-items-count"></span>
+      <span class="list-items-limit">/<%= Constants::REPOSITORY_LIST_ITEMS_PER_COLUMN %></span>
+      <span> items</span></div>
   </div>
 </div>

config/initializers/constants.rb

@@ -977,6 +977,8 @@ class Constants
 
   REPOSITORY_LIST_ITEMS_PER_COLUMN = 500
 
+  REPOSITORY_LIST_ITEMS_DELIMITERS = 'auto,return,comma,semicolon,space'.freeze
+
   IMPORT_REPOSITORY_ITEMS_LIMIT = 2000
 
   # Very basic regex to check for validity of emails

config/locales/en.yml

@@ -1147,6 +1147,12 @@ en:
       list_type:
         delimiter_label: "Delimiter"
         dropdown_items_label: "Dropdown items"
+        delimiters:
+          auto: "Auto"
+          return: "Return"
+          space: "Space"
+          semicolon: "Semicolon"
+          comma: "Comma"
 
     repository_columns:
       head_title: '%{repository} | Manage Columns'