Update basic modal layout for creating new column types

app/assets/javascripts/repository_columns/index.js.erb

@@ -20,13 +20,16 @@
               $('.modal-backdrop').remove();
             });
 
-            _initTagInput();
+            _initColumnTypeSelector();
+            $('#repository_column_data_type').val($(modalID).attr('data-edit-type')).trigger('click');;
+            $('#repository_column_data_type').prop('disabled', true);
             setTimeout(function() {
               $('#repository_column_name').focus();
             }, 500)
 
             if($(modalID).attr('data-edit-type') === 'RepositoryListValue') {
               var values = JSON.parse($(tagsInputID).attr('data-value'));
+              $('#repository_column_data_type').val('RepositoryListValue');
               $(colRadID).click().promise().done(function() {
                 $.each(values, function(index, element) {
                   $(tagsInputID).tagsinput('add', element);
@@ -35,7 +38,7 @@
             }
 
             $('[data-action="save"]').on('click', function() {
-              if($(colRadID).is(':checked')) {
+              if($('#repository_column_data_type').val() === 'RepositoryListValue') {
                 $('#list_items').val($(tagsInputID).val());
               }
 
@@ -85,19 +88,28 @@
               $('.modal-backdrop').remove();
             });
 
-            _initTagInput();
+            _initColumnTypeSelector();
+            $('[data-column-type="RepositoryTextValue"]').show();
             setTimeout(function() {
               $('#repository_column_name').focus();
             }, 500);
 
             $('[data-action="save"]').on('click', function() {
-              var colRad = '#repository_column_data_type_repositorylistvalue';
+              var url = $('#repository_column_data_type').find(':selected').data('create-url')
-              if($(colRad).is(':checked')) {
+              $.ajax({
-                $('#list_items')
+                url: url,
-                  .val($('[data-role="tagsinput"]').val());
+                data: { repository_column: { name: $('#repository_column_name').val() }},
-              }
+                type: 'POST',
-              var form = $('[data-role="manage-repository-column-form"]');
+                success: function(data) {
-              _processResponse(form, 'create', modalID);
+                  _insertNewListItem(data);
+                  HelperModule.flashAlertMsg(data.message, 'success');
+                  if (modalID) {
+                    $(modalID).modal('hide');
+                  }
+                },
+                error: function(xhr) {
+                }
+              });
             });
           });
         });
@@ -139,21 +151,18 @@
       .find('span.pull-left').text(column.name);
   }
 
-  function _initTagInput() {
+  function _initColumnTypeSelector() {
     $('[name="repository_column[data_type]"]')
       .on('click', function() {
-        var listValueId = 'repository_column_data_type_repositorylistvalue';
+        $('.column-type').hide();
-        if($(this).attr('id') === listValueId) {
+        $('[data-column-type="'+$(this).val()+'"]').show();
-          $('[data-role="tagsinput"]').tagsinput({
+    });
-            maxChars: <%= Constants::NAME_MAX_LENGTH %>,
+  }
-            trimValue: true
+
-          });
+  function _initTagInput() {
-          $('.bootstrap-tagsinput').show();
+    $('[data-role="tagsinput"]').tagsinput({
-          $('[data-role="tagsimput-label"]').show();
+      maxChars: <%= Constants::NAME_MAX_LENGTH %>,
-        } else {
+      trimValue: true
-          $('.bootstrap-tagsinput').hide();
-          $('[data-role="tagsimput-label"]').hide();
-        }
     });
   }
 

app/assets/stylesheets/repositories.scss

@@ -255,3 +255,9 @@
     color: $color-silver-chalice;
   }
 }
+
+#manageRepositoryColumn {
+  .modal-footer {
+    text-align: center;
+  }
+}

app/helpers/repository_columns_helper.rb

@@ -1,16 +0,0 @@
-module RepositoryColumnsHelper
-  def form_url(repository, column)
-    return repository_repository_columns_path(repository) if column.new_record?
-    repository_repository_column_path(repository, column)
-  end
-
-  def disabled?(column, type)
-    return false if column.new_record?
-    column.data_type != type
-  end
-
-  def checked?(column, type)
-    return true if column.new_record? && type == 'RepositoryTextValue'
-    return true if column.data_type == type
-  end
-end

app/views/repository_columns/_manage_column_modal.html.erb

@@ -17,47 +17,60 @@
         </h4>
       </div>
       <div class="modal-body">
-        <%= bootstrap_form_for @repository_column,
+        <div class="form-horizontal" id="new_repository_column">
-                               url: form_url(@repository, @repository_column),
+          <div class="form-group">
-                               remote: true,
+            <label class="control-label col-sm-3" for="repository_column_name">
-                               data: { role: "manage-repository-column-form" } do |f| %>
+              <%= t('libraries.manange_modal_column.name') %>
-          <%= hidden_field_tag :list_items %>
+            </label>
-          <%= f.text_field :name %>
+            <div class="col-sm-9">
-          <%= f.form_group :data_type, label: { text: t('libraries.manange_modal_column.colum_type') } do %>
+              <input placeholder="<%= t('libraries.manange_modal_column.name_placeholder') %>"
-            <br />
+                     class="form-control"
-            <span id="repository-column-types-list">
+                     type="text"
-              <%= f.radio_button :data_type,
+                     name="repository_column[name]"
-                                 'RepositoryTextValue'.freeze,
+                     id="repository_column_name">
-                                 label: t('libraries.manange_modal_column.labels.text'),
+            </div>
-                                 inline: true,
+          </div>
-                                 checked: checked?(@repository_column, 'RepositoryTextValue'.freeze),
+          <div class="form-group">
-                                 disabled: disabled?(@repository_column, 'RepositoryTextValue'.freeze) %>
+            <label class="control-label col-sm-3" for="repository_column_data_type">
-              <%= f.radio_button :data_type,
+              <%= t('libraries.manange_modal_column.colum_type') %>
-                                 'RepositoryAssetValue'.freeze,
+            </label>
-                                 label: t('libraries.manange_modal_column.labels.file'),
+            <div class="col-sm-9">
-                                 inline: true,
+              <select class="form-control" name="repository_column[data_type]" id="repository_column_data_type">
-                                 checked: checked?(@repository_column, 'RepositoryAssetValue'.freeze),
+                <option data-create-url="<%= repository_create_text_path(@repository) %>" value="RepositoryTextValue">
-                                 disabled: disabled?(@repository_column, 'RepositoryAssetValue'.freeze) %>
+                  <%= t('libraries.manange_modal_column.select.repository_text_value') %>
-              <%= f.radio_button :data_type,
+                </option>
-                                 'RepositoryListValue'.freeze,
+                <option data-create-url="<%= repository_create_date_path(@repository) %>" value="RepositoryDateValue">
-                                 label: t('libraries.manange_modal_column.labels.dropdown'),
+                  <%= t('libraries.manange_modal_column.select.repository_date_value') %>
-                                 inline: true,
+                </option>
-                                 checked: checked?(@repository_column, 'RepositoryListValue'.freeze),
+                <option data-create-url="<%= repository_create_list_path(@repository) %>" value="RepositoryListValue">
-                                 disabled: disabled?(@repository_column, 'RepositoryListValue'.freeze) %>
+                  <%= t('libraries.manange_modal_column.select.repository_list_value') %>
-            </span>
+                </option>
-          <% end %>
+                <option data-create-url="<%= repository_create_asset_path(@repository) %>" value="RepositoryAssetValue">
-          <input class="form-control"
+                  <%= t('libraries.manange_modal_column.select.repository_asset_value') %>
-                 data-role="tagsinput"
+                </option>
-                 style="display: none"
+              </select>
-                 data-value="<%= @repository_column.repository_list_items.pluck(:data) %>"
+            </div>
-                 />
+          </div>
-          <br />
+
-          <span style="display: none" data-role="tagsimput-label"><%=t 'libraries.manange_modal_column.dropdown_item_descirption' %></span>
+          <hr/>
-        <% end %>
+          <span style="display: none" class="column-type" data-column-type="RepositoryTextValue">
+            <%= render partial: "repository_columns/manage_column_partials/text.html.erb" %>
+          </span>
+          <span style="display: none" class="column-type" data-column-type="RepositoryAssetValue">
+            <%= render partial: "repository_columns/manage_column_partials/asset.html.erb" %>
+          </span>
+          <span style="display: none" class="column-type" data-column-type="RepositoryListValue">
+            <%= render partial: "repository_columns/manage_column_partials/list.html.erb" %>
+          </span>
+          <span style="display: none" class="column-type" data-column-type="RepositoryDateValue">
+            <%= render partial: "repository_columns/manage_column_partials/date.html.erb" %>
+          </span>
+        </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel")%></button>
+        <button class="btn btn-success" data-action="save">
-        <button type="button" class="btn btn-success" data-action="save"><%= t("general.save") %></button>
+          <%= t("libraries.manange_modal_column.new.button") %>
+        </button>
       </div>
     </div>
   </div>

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

@@ -0,0 +1 @@
+<%= 'asset-test' %>

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

@@ -0,0 +1 @@
+<%= 'date-test' %>

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

@@ -0,0 +1 @@
+<%= 'list-test' %>

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

@@ -0,0 +1 @@
+<%= 'text-test' %>

config/locales/en.yml

@@ -1128,14 +1128,18 @@ en:
       nothing_to_delete: "Can't find sharing relation for destroy"
   libraries:
     manange_modal_column:
+      name_placeholder: "Enter column name..."
+      name: "Name"
       colum_type: "Column type"
       dropdown_item_descirption: "Dropdown items should be separated by comma."
-      labels:
+      select:
-        text: "Text"
+        repository_text_value: "Text"
-        file: "File"
+        repository_date_value: "Date"
-        dropdown: "Dropdown"
+        repository_list_value: "Dropdown"
+        repository_asset_value: "File"
       new:
         title: "Add New Column"
+        button: "Save column"
       edit:
         title: "Edit %{name} Column"