Update basic modal layout for creating new column types

This commit is contained in:
Mojca Lorber 2019-10-09 23:11:01 +02:00 committed by Urban Rotnik
parent 43e81c46b7
commit 467c80da52
9 changed files with 102 additions and 82 deletions

View file

@ -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';
if($(colRad).is(':checked')) {
$('#list_items')
.val($('[data-role="tagsinput"]').val());
}
var form = $('[data-role="manage-repository-column-form"]');
_processResponse(form, 'create', modalID);
var url = $('#repository_column_data_type').find(':selected').data('create-url')
$.ajax({
url: url,
data: { repository_column: { name: $('#repository_column_name').val() }},
type: 'POST',
success: function(data) {
_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';
if($(this).attr('id') === listValueId) {
$('[data-role="tagsinput"]').tagsinput({
maxChars: <%= Constants::NAME_MAX_LENGTH %>,
trimValue: true
});
$('.bootstrap-tagsinput').show();
$('[data-role="tagsimput-label"]').show();
} else {
$('.bootstrap-tagsinput').hide();
$('[data-role="tagsimput-label"]').hide();
}
$('.column-type').hide();
$('[data-column-type="'+$(this).val()+'"]').show();
});
}
function _initTagInput() {
$('[data-role="tagsinput"]').tagsinput({
maxChars: <%= Constants::NAME_MAX_LENGTH %>,
trimValue: true
});
}

View file

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

View file

@ -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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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:
text: "Text"
file: "File"
dropdown: "Dropdown"
select:
repository_text_value: "Text"
repository_date_value: "Date"
repository_list_value: "Dropdown"
repository_asset_value: "File"
new:
title: "Add New Column"
button: "Save column"
edit:
title: "Edit %{name} Column"