Merge pull request #2251 from aignatov-bio/ai-sci-4068-custom-select-on-manage-columns-forms

Update drop-down for columns type selection [SCI-4068]

app/assets/javascripts/repository_columns/index.js

@@ -1,4 +1,5 @@
-/* global I18n HelperModule animateSpinner RepositoryListColumnType RepositoryStatusColumnType */
+/* global I18n HelperModule animateSpinner RepositoryListColumnType */
+/* global RepositoryStatusColumnType dropdownSelector */
 /* eslint-disable no-restricted-globals */
 var RepositoryColumns = (function() {
   var manageModal = '#manage-repository-column';
@@ -178,6 +179,13 @@ var RepositoryColumns = (function() {
           .find('#repository-column-name')
           .focus();
         columnType = $('#repository-column-data-type').val();
+        dropdownSelector.init('#repository-column-data-type', {
+          noEmptyOption: true,
+          singleSelect: true,
+          closeOnSelect: true,
+          optionClass: 'custom-option',
+          selectAppearance: 'simple'
+        });
         $manageModal
           .trigger('columnModal::partialLoadedFor' + columnType);
 

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -223,11 +223,17 @@ var dropdownSelector = (function() {
 
       if (pressedKey === 38) {
         if (selectedOption.prev('.dropdown-option').length) {
-          selectedOption.removeClass('highlight').prev('.dropdown-option').addClass('highlight');
+          selectedOption.removeClass('highlight').prev().addClass('highlight');
+        }
+        if (selectedOption.prev('.delimiter').length) {
+          selectedOption.removeClass('highlight').prev().prev().addClass('highlight');
         }
       } else if (pressedKey === 40) {
         if (selectedOption.next('.dropdown-option').length) {
-          selectedOption.removeClass('highlight').next('.dropdown-option').addClass('highlight');
+          selectedOption.removeClass('highlight').next().addClass('highlight');
+        }
+        if (selectedOption.next('.delimiter').length) {
+          selectedOption.removeClass('highlight').next().next().addClass('highlight');
         }
       }
     });
@@ -436,6 +442,11 @@ var dropdownSelector = (function() {
       `);
     }
 
+    // Draw delimiter object
+    function drawDelimiter() {
+      return $('<div class="delimiter"></div>');
+    }
+
     // Draw group object
     function drawGroup(group) {
       return $(`
@@ -452,13 +463,14 @@ var dropdownSelector = (function() {
       if (selector.data('config').singleSelect) {
         $container.find('.dropdown-option').removeClass('select');
         updateCurrentData($container, []);
+        selector.val($(this).data('value')).change();
       }
       $(this).toggleClass('select');
       saveData(selector, $container);
     }
 
     // Remove placeholder from option container
-    container.find('.dropdown-group, .dropdown-option, .empty-dropdown').remove();
+    container.find('.dropdown-group, .dropdown-option, .empty-dropdown, .delimiter').remove();
     if (!data) return;
 
     if (data.length > 0) {
@@ -495,7 +507,12 @@ var dropdownSelector = (function() {
       } else {
         // For simple options we only draw them
         $.each(data, function(oi, option) {
-          var optionElement = drawOption(selector, option);
+          var optionElement;
+          if (option.delimiter) {
+            drawDelimiter().appendTo(container.find('.dropdown-container'));
+            return;
+          }
+          optionElement = drawOption(selector, option);
           optionElement.click(clickOption);
           optionElement.appendTo(container.find('.dropdown-container'));
         });
@@ -701,7 +718,11 @@ var dropdownSelector = (function() {
     } else {
       options = filterOptions(selector, container, selector.find('option'));
       $.each(options, function(oi, option) {
-        result.push({ label: option.innerHTML, value: option.value });
+        result.push({
+          label: option.innerHTML,
+          value: option.value,
+          delimiter: option.dataset.delimiter
+        });
       });
     }
     return result;

app/assets/stylesheets/repository_columns/index.scss

@@ -16,5 +16,11 @@
     position: relative;
     top: -2px;
   }
+
+  #repository-column-data-type + .dropdown-selector-container {
+    .custom-option {
+      padding: 0 25px;
+    }
+  }
 }
 

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -122,6 +122,12 @@
       text-align: center;
     }
 
+    .delimiter {
+      background: $color-alto;
+      height: 1px;
+      margin: 5px 16px;
+    }
+
     .dropdown-select-all {
       background: $color-white;
       border: 0;

app/views/repository_columns/_manage_column_modal_content.html.erb

@@ -30,25 +30,13 @@
       </label>
       <div class="col-sm-9">
         <select class="form-control" name="repository_column[data_type]" id="repository-column-data-type"
-                <%= 'disabled' unless @repository_column.new_record? %>>
+                <%= 'data-disable-on-load="true" disable' unless @repository_column.new_record? %>>
           <option data-create-url="<%= repository_repository_columns_text_columns_path(@repository) %>"
                   data-edit-url="<%= repository_repository_columns_text_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
                   value="RepositoryTextValue"
                   <%= 'selected' if @repository_column.repository_text_value? %> >
             <%= t('libraries.manange_modal_column.select.repository_text_value') %>
           </option>
-          <option data-create-url="<%= repository_repository_columns_status_columns_path(@repository) %>"
-                  data-edit-url="<%= repository_repository_columns_status_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
-                  value="RepositoryStatusValue"
-                  <%= 'selected' if @repository_column.repository_status_value? %> >
-            <%= t('libraries.manange_modal_column.select.repository_status_value') %>
-          </option>
-          <option data-create-url="<%= repository_repository_columns_list_columns_path(@repository) %>"
-                  data-edit-url="<%= repository_repository_columns_list_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
-                  value="RepositoryListValue"
-                  <%= 'selected' if @repository_column.repository_list_value? %> >
-            <%= t('libraries.manange_modal_column.select.repository_list_value') %>
-          </option>
           <option data-create-url="<%= repository_repository_columns_asset_columns_path(@repository) %>"
                   data-edit-url="<%= repository_repository_columns_asset_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
                   value="RepositoryAssetValue"
@@ -56,6 +44,23 @@
             <%= t('libraries.manange_modal_column.select.repository_asset_value') %>
           </option>
 
+          <option data-delimiter=true></option>
+
+          <option data-create-url="<%= repository_repository_columns_list_columns_path(@repository) %>"
+                  data-edit-url="<%= repository_repository_columns_list_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
+                  value="RepositoryListValue"
+                  <%= 'selected' if @repository_column.repository_list_value? %> >
+            <%= t('libraries.manange_modal_column.select.repository_list_value') %>
+          </option>
+          <option data-create-url="<%= repository_repository_columns_status_columns_path(@repository) %>"
+                  data-edit-url="<%= repository_repository_columns_status_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
+                  value="RepositoryStatusValue"
+                  <%= 'selected' if @repository_column.repository_status_value? %> >
+            <%= t('libraries.manange_modal_column.select.repository_status_value') %>
+          </option>
+          
+          <option data-delimiter=true></option>
+
           <option data-create-url="<%= repository_repository_columns_date_time_columns_path(@repository) %>"
                   data-edit-url="<%= repository_repository_columns_asset_column_path(@repository, @repository_column) unless @repository_column.new_record? %>"
                   value="RepositoryDateValue"