mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-26 09:42:46 +08:00
Update basic modal layout for creating new column types
This commit is contained in:
parent
43e81c46b7
commit
467c80da52
9 changed files with 102 additions and 82 deletions
|
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -255,3 +255,9 @@
|
|||
color: $color-silver-chalice;
|
||||
}
|
||||
}
|
||||
|
||||
#manageRepositoryColumn {
|
||||
.modal-footer {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
|
@ -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>
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<%= 'asset-test' %>
|
|
@ -0,0 +1 @@
|
|||
<%= 'date-test' %>
|
|
@ -0,0 +1 @@
|
|||
<%= 'list-test' %>
|
|
@ -0,0 +1 @@
|
|||
<%= 'text-test' %>
|
|
@ -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"
|
||||
|
||||
|
|
Loading…
Reference in a new issue