Add Edit renderer for ListColumnType

app/assets/javascripts/application.js.erb

@@ -44,6 +44,7 @@
 //= require protocols/header
 //= require marvinjslauncher
 //= require_directory ./repositories/renderers
+//= require_directory ./repositories/renderers/columns
 //= require_directory ./repositories/validators
 //= require_directory ./sitewide
 //= require turbolinks

app/assets/javascripts/repositories/renderers/columns/list.js

@@ -0,0 +1,53 @@
+/* global dropdownSelector */
+/* eslint-disable no-unused-vars */
+
+var List = (function() {
+  function listItemDropdown(options, currentValue, columnId, formId) {
+    var html = `<select class="form-control selectpicker repository-dropdown"
+                data-abs-min-length="2" data-live-search="true" from="${formId}"
+                data-container="body" column_id="${columnId}">
+                <option value="-1"></option>`;
+    $.each(options, function(index, value) {
+      var selected = (currentValue === value[1]) ? 'selected' : '';
+      html += '<option value="' + value[0] + '" ' + selected + '>';
+      html += value[1] + '</option>';
+    });
+    html += '</select>';
+    return html;
+  }
+
+  function initialListItemsRequest(columnId, currentValue, formId, url) {
+    var massageResponse = [];
+    $.ajax({
+      url: url,
+      type: 'POST',
+      dataType: 'json',
+      async: false,
+      data: {
+        column_id: columnId
+      }
+    }).done(function(data) {
+      $.each(data.list_items, function(index, el) {
+        massageResponse.push([el.id, el.data]);
+      });
+    });
+    return listItemDropdown(massageResponse, currentValue, columnId, formId);
+  }
+
+  function initSelectPicker($select, $hiddenField) {
+    dropdownSelector.init($select, {
+      noEmptyOption: true,
+      singleSelect: true,
+      closeOnSelect: true,
+      selectAppearance: 'simple',
+      onChange: function() {
+        $hiddenField.val(dropdownSelector.getValues($select));
+      }
+    });
+  }
+
+  return {
+    initialListItemsRequest: initialListItemsRequest,
+    initSelectPicker: initSelectPicker
+  };
+}());

app/assets/javascripts/repositories/renderers/edit_renderers.js

@@ -1,3 +1,5 @@
+/* global List SmartAnnotation*/
+
 $.fn.dataTable.render.editRowName = function(formId, cell) {
   let $cell = $(cell.node());
   let text = $cell.find('a').first().text();
@@ -19,14 +21,62 @@ $.fn.dataTable.render.editRepositoryAssetValue = function(formId, columnId, cell
 };
 
 $.fn.dataTable.render.editRepositoryTextValue = function(formId, columnId, cell) {
-  SmartAnnotation.init(cell);
+  let $cell = $(cell.node());
-  return '';
+  let text = $cell.text();
+
+  $cell.html(`
+    <div class="form-group">
+      <input class="form-control editing"
+             form="${formId}"
+             type="text"
+             name="repository_cells[${columnId}]"
+             value="${text}"
+             data-type="RepositoryTextValue">
+    </div>`);
+
+  SmartAnnotation.init($cell.find('input'));
 };
 
 $.fn.dataTable.render.editRepositoryListValue = function(formId, columnId, cell) {
-  return '';
+  let $cell = $(cell.node());
+  let currentValue = $cell.text();
+  let url = $cell.closest('table').data('list-items-path');
+  let hiddenField = `
+    <input form="${formId}"
+           type="hidden"
+           name="repository_cells[${columnId}]"
+           value=""
+           data-type="RepositoryListValue">`;
+
+  $cell.html(hiddenField + List.initialListItemsRequest(columnId, currentValue, formId, url));
+
+  List.initSelectPicker($cell.find('select'), $cell.find(`[name='repository_cells[${columnId}]']`));
 };
 
 $.fn.dataTable.render.editRepositoryStatusValue = function(formId, columnId, cell) {
   return '';
 };
+
+$.fn.dataTable.render.editRepositoryDateTimeValue = function(formId, columnId, cell) {
+  return '';
+};
+
+$.fn.dataTable.render.editRepositoryDateValue = function(formId, columnId, cell) {
+  return '';
+};
+
+$.fn.dataTable.render.editRepositoryTimeValue = function(formId, columnId, cell) {
+  return '';
+};
+
+$.fn.dataTable.render.editRepositoryDateTimeRangeValue = function(formId, columnId, cell) {
+  return '';
+};
+
+$.fn.dataTable.render.editRepositoryDateRangeValue = function(formId, columnId, cell) {
+  return '';
+};
+
+$.fn.dataTable.render.editRepositoryTimeRangeValue = function(formId, columnId, cell) {
+  return '';
+};

app/assets/javascripts/repositories/row_editor.js

@@ -106,6 +106,7 @@ var RepositoryDatatableRowEditor = (function() {
     let $row = $(row.node());
     let itemId = row.id();
     let formId = `repositoryRowForm${itemId}`;
+    let requestUrl = $(TABLE.table().node()).data('current-uri');
     let rowForm = $(`
       <form id="${formId}"
             class="repository-row-edit-form"
@@ -114,20 +115,22 @@ var RepositoryDatatableRowEditor = (function() {
             data-remote="true"
             data-row-id="${itemId}">
         <input name="id" type="hidden" value="${itemId}" />
+        <input name="request_url" type="hidden" value="${requestUrl}" />
       </form>
     `);
 
     $row.find('td').first().append(rowForm);
 
     TABLE.cells(row.index(), row.columns().eq(0)).every(function() {
-      let columnId = $(TABLE.columns(this.index().column).header()).attr('id');
+      let $header = $(TABLE.columns(this.index().column).header());
+      let columnId = $header.attr('id');
+      let dataType = $header.data('type');
       let cell = this;
 
       if (columnId === NAME_COLUMN_ID) {
         $.fn.dataTable.render.editRowName(formId, cell);
-      } else {
+      } else if (dataType) {
-        let dataType = $(this.column().header()).data('type');
+        $.fn.dataTable.render['edit' + dataType](formId, columnId, cell);
-        if (dataType) $.fn.dataTable.render['edit' + dataType](formId, columnId, cell);
       }
 
       return true;

app/assets/javascripts/repositories/validators/base_validator.js

@@ -3,3 +3,12 @@
 $.fn.dataTable.render.RowNameValidator = function($input) {
   return textValidator(undefined, $input, 1, GLOBAL_CONSTANTS.NAME_MAX_LENGTH);
 };
+
+$.fn.dataTable.render.RepositoryTextValueValidator = function($input) {
+  return textValidator(undefined, $input, 1, GLOBAL_CONSTANTS.NAME_MAX_LENGTH);
+};
+
+
+$.fn.dataTable.render.RepositoryListValueValidator = function() {
+  return true;
+};

app/views/users/settings/account/preferences/index.html.erb

@@ -10,7 +10,7 @@
         <div class="time-zone-container">
           <%= label_tag t("users.settings.account.preferences.edit.time_zone_label") %>
           <div class="time-zone-selector-container">
-            <%= select_tag "time-zone-input-field",  
+            <%= select_tag "time-zone-input-field",
                             options_for_select(
                               ActiveSupport::TimeZone.all.map{ |tz|
                                 [tz.formatted_offset + " " + tz.name, tz.name]
@@ -19,7 +19,7 @@
                             ),{
                               'data-path-to-update': update_preferences_path(format: :json),
                               class: 'hidden'
-                            } 
+                            }
             %>
           </div>
           <small><%= t("users.settings.account.preferences.edit.time_zone_sublabel") %></small>
@@ -28,7 +28,7 @@
         <div class="date-format-container">
           <%= label_tag t("users.settings.account.preferences.edit.date_format_label") %>
           <div class="date-format-selector-container">
-            <%= select_tag "date-format-input-field",  
+            <%= select_tag "date-format-input-field",
                             options_for_select(
                               Constants::SUPPORTED_DATE_FORMATS.uniq.map{ |df|
                                 ["#{l(Time.new(2014, 11, 6), format: :full_date, date_format: df)}", df]
@@ -37,7 +37,7 @@
                             ),{
                               'data-path-to-update': update_preferences_path(format: :json),
                               class: 'hidden'
-                            } 
+                            }
             %>
           </div>
           <small><%= t("users.settings.account.preferences.edit.date_format_sublabel") %></small>