Add List items partial and JS

app/assets/javascripts/application.js.erb

@@ -30,6 +30,7 @@
 //= require jsnetworkx
 //= require bootstrap-select
 //= require_directory ./sitewide
+//= require_directory ./repository_columns/columns_initializers
 //= require datatables
 //= require ajax-bootstrap-select.min
 //= require underscore

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

@@ -0,0 +1,63 @@
+/* eslint-disable no-unused-vars */
+var RepositoryListColumnType = (function() {
+  var manageModal = '#manageRepositoryColumn';
+
+  function textToItems(text, delimiter) {
+    var res = [];
+    var definedDelimiters = {
+      return: '\n',
+      comma: ',',
+      semicolon: ';',
+      pipe: '|',
+      space: ' '
+    };
+
+    var delimiters = []
+    if (delimiter === 'auto') {
+      delimiters = ['\n', ',', ';', '|', ' '];
+    } else {
+      delimiters.push(definedDelimiters[delimiter]);
+    }
+
+    $.each(delimiters, (index, currentDelimiter) => {
+      res = text.trim().split(currentDelimiter);
+      if (res.length > 1) {
+        return false;
+      }
+    });
+
+    return res.filter(Boolean);
+  }
+
+  function drawDropdownPreview(items) {
+    var $manageModal = $(manageModal);
+    var $dropdownPreview = $manageModal.find('.dropdown-preview select');
+    $('option', $dropdownPreview).remove();
+    $.each(items, function(i, item) {
+      $dropdownPreview.append($('<option>', {
+        value: item,
+        text: item
+      }));
+    });
+  }
+
+  function initDropdownItemsTextArea() {
+    var $manageModal = $(manageModal);
+    var listItemsTextarea = '[data-column-type="RepositoryListValue"] #list-items-textarea';
+    var dropdownDelimiter = 'select#delimiter';
+
+    $manageModal.off('change keyup paste', listItemsTextarea).on('change keyup paste', listItemsTextarea, function() {
+      drawDropdownPreview(textToItems($(listItemsTextarea).val(), $(dropdownDelimiter).val()));
+    });
+
+    $manageModal.off('change', dropdownDelimiter).on('change', dropdownDelimiter, function() {
+      drawDropdownPreview(textToItems($(listItemsTextarea).val(), $(dropdownDelimiter).val()));
+    });
+  }
+
+  return {
+    init: () => {
+      initDropdownItemsTextArea();
+    }
+  };
+}());

app/assets/javascripts/repository_columns/index.js

@@ -1,4 +1,4 @@
-/* global I18n HelperModule animateSpinner */
+/* global I18n HelperModule animateSpinner RepositoryListColumnType */
 /* eslint-disable no-restricted-globals */
 var RepositoryColumns = (function() {
   var manageModal = '#manageRepositoryColumn';
@@ -148,6 +148,7 @@ var RepositoryColumns = (function() {
         initCreateSubmitAction();
         initDeleteSubmitAction();
         initManageColumnModal();
+        RepositoryListColumnType.init();
       }
     }
   };

app/assets/stylesheets/repositories.scss

@@ -269,3 +269,26 @@
     text-align: right;
   }
 }
+
+.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;
+  }
+}

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

@@ -1 +1,25 @@
-<%= 'list-test' %>
+<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') %>
+  </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="col-sm-9">
+    <%= text_area_tag 'list-items-textarea', nil, 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>
+    <select class="form-control">
+      <option value="" disabled selected>Select option...</option>
+    </select>
+  </div>
+</div>

config/locales/en.yml

@@ -1144,6 +1144,9 @@ en:
       edit:
         title: "Edit %{name} Column"
         button: "Update column"
+      list_type:
+        delimiter_label: "Delimiter"
+        dropdown_items_label: "Dropdown items"
 
     repository_columns:
       head_title: '%{repository} | Manage Columns'