From 6fbb99c8d2352fdaf49a2f240fe8986d128d179a Mon Sep 17 00:00:00 2001
From: Urban Rotnik <urban.rotnik@gmail.com>
Date: Fri, 25 Oct 2019 17:38:15 +0200
Subject: [PATCH] Add List items partial and JS

---
 app/assets/javascripts/application.js.erb     |  1 +
 .../columns_initializers/list_column_type.js  | 63 +++++++++++++++++++
 .../javascripts/repository_columns/index.js   |  3 +-
 app/assets/stylesheets/repositories.scss      | 23 +++++++
 .../manage_column_partials/_list.html.erb     | 26 +++++++-
 config/locales/en.yml                         |  3 +
 6 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/repository_columns/columns_initializers/list_column_type.js

diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb
index 10312b0dc..1b9a571c8 100644
--- a/app/assets/javascripts/application.js.erb
+++ b/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
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
new file mode 100644
index 000000000..24c52b53c
--- /dev/null
+++ b/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();
+    }
+  };
+}());
diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js
index ed4ccf388..e2e7f9746 100644
--- a/app/assets/javascripts/repository_columns/index.js
+++ b/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();
       }
     }
   };
diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss
index f3ce98422..b8dbd8394 100644
--- a/app/assets/stylesheets/repositories.scss
+++ b/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;
+  }
+}
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 7bd2a5770..316009a56 100644
--- a/app/views/repository_columns/manage_column_partials/_list.html.erb
+++ b/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>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9f474150d..618110492 100644
--- a/config/locales/en.yml
+++ b/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'