Update delimiter dropdown for manage column modal

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

@@ -1,4 +1,4 @@
-/* global GLOBAL_CONSTANTS dropdownSelector RepositoryListColumnType */
+/* global GLOBAL_CONSTANTS dropdownSelector RepositoryListColumnType I18n */
 
 var RepositoryChecklistColumnType = (function() {
   var manageModal = '#manage-repository-column';
@@ -15,6 +15,12 @@ var RepositoryChecklistColumnType = (function() {
     });
   }
 
+  function initUpdatePlaceholder(delimiter) {
+    var value = delimiter.value;
+    var placeholder = I18n.t('libraries.manange_modal_column.checklist_type.items_placeholders.' + value);
+    $(itemsTextarea).attr('placeholder', placeholder);
+  }
+
   function initDropdownItemsTextArea() {
     var $manageModal = $(manageModal);
     var columnNameInput = '#repository-column-name';
@@ -42,6 +48,7 @@ var RepositoryChecklistColumnType = (function() {
           dropdownOptions
         );
         initChecklistDropdown();
+        initUpdatePlaceholder(this);
       })
       .on('columnModal::partialLoadedForRepositoryChecklistValue', function() {
         RepositoryListColumnType.refreshPreviewDropdownList(
@@ -72,6 +79,12 @@ var RepositoryChecklistColumnType = (function() {
       repositoryColumnParams.repository_checklist_items_attributes = options;
       repositoryColumnParams.metadata = { delimiter: $(delimiterDropdown).data('used-delimiter') };
       return repositoryColumnParams;
+    },
+    initChecklistDropdown: () => {
+      initChecklistDropdown();
+    },
+    initChecklistPlaceholder: () => {
+      initUpdatePlaceholder($(delimiterDropdown)[0]);
     }
   };
 }());

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

@@ -1,4 +1,4 @@
-/* global GLOBAL_CONSTANTS */
+/* global GLOBAL_CONSTANTS dropdownSelector I18n */
 /* eslint-disable no-unused-vars */
 var RepositoryListColumnType = (function() {
   var manageModal = '#manage-repository-column';
@@ -7,6 +7,21 @@ var RepositoryListColumnType = (function() {
   var previewContainer = '.list-column-type  .dropdown-preview';
   var dropdownOptions = '.list-column-type #dropdown-options';
 
+  function initListDropdown() {
+    dropdownSelector.init(previewContainer + ' .preview-select', {
+      noEmptyOption: true,
+      singleSelect: true,
+      selectAppearance: 'simple',
+      closeOnSelect: true
+    });
+  }
+
+  function initUpdatePlaceholder(delimiter) {
+    var value = delimiter.value;
+    var placeholder = I18n.t('libraries.manange_modal_column.list_type.items_placeholders.' + value);
+    $(itemsTextarea).attr('placeholder', placeholder);
+  }
+
   function onlyUnique(value, index, self) {
     return self.indexOf(value) === index;
   }
@@ -113,15 +128,18 @@ var RepositoryListColumnType = (function() {
           delimiterDropdown,
           dropdownOptions
         );
+        initListDropdown();
         $('.changing-existing-list-items-warning').removeClass('hidden');
       })
       .on('change', delimiterDropdown, function() {
+        initUpdatePlaceholder(this);
         refreshPreviewDropdownList(
           previewContainer,
           itemsTextarea,
           delimiterDropdown,
           dropdownOptions
         );
+        initListDropdown();
       })
       .on('columnModal::partialLoadedForRepositoryListValue', function() {
         refreshPreviewDropdownList(
@@ -130,6 +148,7 @@ var RepositoryListColumnType = (function() {
           delimiterDropdown,
           dropdownOptions
         );
+        initListDropdown();
       })
       .on('keyup change', columnNameInput, function() {
         $manageModal.find(previewContainer).find('.preview-label').html($manageModal.find(columnNameInput).val());
@@ -155,6 +174,14 @@ var RepositoryListColumnType = (function() {
 
     refreshPreviewDropdownList: (preview, textarea, delimiter, dropdown) => {
       refreshPreviewDropdownList(preview, textarea, delimiter, dropdown);
+    },
+
+    initListDropdown: () => {
+      initListDropdown();
+    },
+
+    initListPlaceholder: () => {
+      initUpdatePlaceholder($(delimiterDropdown)[0]);
     }
   };
 }());

app/assets/javascripts/repository_columns/index.js

@@ -149,6 +149,20 @@ var RepositoryColumns = (function() {
       var button = $(this);
       var modalUrl = button.data('modal-url');
       var columnType;
+      var delimiterOptionsRender = function(data) {
+        return `<span class='icon'>${data.params.icon}</span>${data.label}`;
+      };
+      var delimiterDropdownConfig = {
+        singleSelect: true,
+        noEmptyOption: true,
+        selectAppearance: 'simple',
+        closeOnSelect: true,
+        optionClass: 'delimiter-icon-dropdown',
+        optionLabel: delimiterOptionsRender,
+        tagClass: 'delimiter-icon-dropdown',
+        tagLabel: delimiterOptionsRender,
+        disableSearch: true
+      };
       $.get(modalUrl, (data) => {
         $manageModal.find('.modal-content').html(data.html)
           .find('#repository-column-name')
@@ -159,8 +173,18 @@ var RepositoryColumns = (function() {
           singleSelect: true,
           closeOnSelect: true,
           optionClass: 'custom-option',
-          selectAppearance: 'simple'
+          selectAppearance: 'simple',
+          disableSearch: true
         });
+
+        dropdownSelector.init('.list-column-type .delimiter', delimiterDropdownConfig);
+        RepositoryListColumnType.initListDropdown();
+        RepositoryListColumnType.initListPlaceholder();
+
+        dropdownSelector.init('.checklist-column-type .delimiter', delimiterDropdownConfig);
+        RepositoryChecklistColumnType.initChecklistDropdown();
+        RepositoryChecklistColumnType.initChecklistPlaceholder();
+
         $manageModal
           .trigger('columnModal::partialLoadedFor' + columnType);
 

app/assets/javascripts/sitewide/dropdown_selector.js

@@ -40,6 +40,7 @@
     singleSelect: boolean, // disable multiple select. default 'false'
     selectAppearance: string, // 'tag' or 'simple'. Default 'tag'
     closeOnSelect: boolean, // Close dropdown after select
+    disableSearch: boolean, // Disable search
   }
 
 
@@ -153,6 +154,9 @@ var dropdownSelector = (function() {
 
   // Read option to JSON
   function convertOptionToJson(option) {
+    if (option === undefined) {
+      return { label: '', value: '', params: {} };
+    }
     return {
       label: option.innerHTML,
       value: option.value,
@@ -424,6 +428,11 @@ var dropdownSelector = (function() {
       dropdownContainer.addClass('simple-mode');
     }
 
+    // Disable search
+    if (config.disableSearch) {
+      dropdownContainer.addClass('disable-search');
+    }
+
     // initialization keyboard controll
     initKeyboardControl(dropdownContainer);
 
@@ -615,7 +624,7 @@ var dropdownSelector = (function() {
       // Add new tag before search field
       var tag = $(`<div class="${tagAppearance} ${customClass}" style="${customStyle ? customStyle(data) : ''}" >
                   <div class="tag-label"
-                    title="${label}"
+                    title="${$('<span>' + label + '</span>').text()}"
                     data-ds-tag-group="${data.group}"
                     data-ds-tag-id="${data.value}">
                     ${label}
@@ -740,7 +749,8 @@ var dropdownSelector = (function() {
         result.push({
           label: option.innerHTML,
           value: option.value,
-          delimiter: option.dataset.delimiter
+          delimiter: option.dataset.delimiter,
+          params: JSON.parse(option.dataset.params || '{}')
         });
       });
     }

app/assets/stylesheets/repository_columns/index.scss

@@ -44,12 +44,34 @@
 
     .form-control {
       font-size: 14px;
-      height: 30px;
     }
 
     #items-textarea {
       height: 120px;
     }
+
+    .dropdown-selector-container {
+      .delimiter-icon-dropdown {
+
+        .tag-label {
+          align-items: center;
+          display: flex;
+        }
+
+        .icon {
+          background: $color-concrete;
+          border-radius: $border-radius-default;
+          display: inline-block;
+          font-size: 20px;
+          font-weight: bold;
+          line-height: 24px;
+          margin-right: 5px;
+          text-align: center;
+          transition: .3s;
+          width: 24px;
+        }
+      }
+    }
   }
 
   .modal-footer {

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -244,7 +244,7 @@
 
       .ds-simple {
         .tag-label {
-          overflow: hiddens;
+          overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
@@ -296,7 +296,7 @@
       }
     }
 
-    &.simple-mode {
+    &.simple-mode:not(.disable-search) {
       .search-field {
         display: block;
         line-height: 14px;
@@ -307,13 +307,19 @@
       }
 
       .ds-simple {
-        color: $color-silver-chalice;
         font-size: 12px;
         line-height: 14px;
+        opacity: .6;
       }
     }
   }
 
+  &.disable-search {
+    .search-field {
+      display: none;
+    }
+  }
+
   &.disabled {
 
     .input-field {

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

@@ -10,7 +10,14 @@
     <%= t('libraries.manange_modal_column.list_type.delimiter_label') %>
   </label>
   <div class="col-sm-9">
-    <%= select_tag('delimiter', options_for_select(delimiters, selected_delimiter), class: 'form-control delimiter', disabled: !column.new_record?) %>
+    <select name="delimiter" id="delimiter" class="form-control delimiter" <%= "data-disable-on-load=true" if !column.new_record? %>>
+      <% delimiters.each do |delimiter| %>
+        <option value="<%= delimiter[1] %>" 
+          <%= "selected" if delimiter[1] == selected_delimiter  %>
+          data-params='{"icon": "<%= Constants::REPOSITORY_LIST_ITEMS_DELIMITERS_ICON_MAP[delimiter[1].to_sym] %>"}'
+        ><%= delimiter[0] %></option>
+      <% end %>
+    </select>
   </div>
 </div>
 <div class="form-group">

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

@@ -10,7 +10,14 @@
     <%= t('libraries.manange_modal_column.list_type.delimiter_label') %>
   </label>
   <div class="col-sm-9">
-    <%= select_tag('delimiter', options_for_select(delimiters, selected_delimiter), class: 'form-control delimiter', disabled: !column.new_record?) %>
+    <select name="delimiter" id="delimiter" class="form-control delimiter" <%= "data-disable-on-load=true" if !column.new_record? %>>
+      <% delimiters.each do |delimiter| %>
+        <option value="<%= delimiter[1] %>" 
+          <%= "selected" if delimiter[1] == selected_delimiter  %>
+          data-params='{"icon": "<%= Constants::REPOSITORY_LIST_ITEMS_DELIMITERS_ICON_MAP[delimiter[1].to_sym] %>"}'
+        ><%= delimiter[0] %></option>
+      <% end %>
+    </select>
   </div>
 </div>
 <div class="form-group">

config/initializers/constants.rb

@@ -989,6 +989,14 @@ class Constants
     space: ' '
   }.freeze
 
+  REPOSITORY_LIST_ITEMS_DELIMITERS_ICON_MAP = {
+    auto: "＊",
+    return: "↵",
+    comma: ',',
+    semicolon: ';',
+    space: '⎵'
+  }.freeze
+
   IMPORT_REPOSITORY_ITEMS_LIMIT = 2000
 
   # Very basic regex to check for validity of emails

config/locales/en.yml

@@ -1198,6 +1198,12 @@ en:
           space: "Space"
           semicolon: "Semicolon"
           comma: "Comma"
+        items_placeholders:
+          auto: "Enter dropdown list options..."
+          return: "Enter dropdown list options one per line:\nDropdown list option 1\nDropdown list option 2\n..."
+          comma: "Enter dropdown list options, separated by commas..."
+          semicolon: "Enter dropdown list options, separated by semicolons..."
+          space: "Enter dropdown list options, separated by space..."
       status_type:
         status_options_label: "Status options"
         add_status_label: "Add status option"
@@ -1209,6 +1215,12 @@ en:
         multiple_options: 'options'
         all_options: 'All options'
         checklist_items: 'Checklist items'
+        items_placeholders:
+          auto: "Enter checklist items..."
+          return: "Enter checklist items one per line:\nChecklist item 1\nChecklist item  2\n..."
+          comma: "Enter checklist items, separated by commas..."
+          semicolon: "Enter checklist items, separated by semicolons..."
+          space: "Enter checklist items, separated by space..."
 
     repository_columns:
       head_title: '%{repository} | Manage Columns'