scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-08 21:06:24 +08:00
Code Issues Projects Releases Packages Wiki Activity

Refactor column type edit modal

Browse source
This commit is contained in:
aignatov-bio 2019-10-21 12:40:53 +02:00 • committed by Urban Rotnik
parent bcb8cc1840
commit 9eec36cb01
7 changed files with 125 additions and 214 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

240
app/assets/javascripts/repository_columns/index.js
View file

@ -1,165 +1,67 @@
/* global I18n HelperModule animateSpinner */ /* global I18n HelperModule animateSpinner */
/* no-restricted-globals */ /* eslint-disable no-restricted-globals */
var RepositoryColumns = (function() { var RepositoryColumns = (function() {
var manageModal = '#manageRepositoryColumn';
function initColumnTypeSelector() { function initColumnTypeSelector() {
$('#repository_column_data_type') var $manageModal = $(manageModal);
.on('click', function() { $manageModal.off('click', '#repository-column-data-type').on('click', '#repository-column-data-type', function() {
$('.column-type').hide(); $('.column-type').hide();
$('[data-column-type="' + $(this).val() + '"]').show(); $('[data-column-type="' + $(this).val() + '"]').show();
});
}
// function replaceListItem(column) {
// $('.list-group-item[data-id="' + column.id + '"]')
// .find('span.pull-left').text(column.name);
// }
//
// function initTagInput() {
// $('[data-role="tagsinput"]').tagsinput({
// maxChars: GLOBAL_CONSTANTS.NAME_MAX_LENGTH,
// trimValue: true
// });
// }
//
// function processResponse(form, action, modalID) {
// form.on('ajax:success', function(e, data) {
// switch (action) {
// case 'destroy':
// removeElementFromDom(data);
// break;
// case 'create':
// break;
// case 'update':
// replaceListItem(data);
// break;
// default:
// location.reload();
// }
// HelperModule.flashAlertMsg(data.message, 'success');
// animateSpinner(null, false);
// modalHtml.modal('hide');
// }).on('ajax:error', function(e, xhr) {
// animateSpinner(null, false);
// if (modalID) {
// if (xhr.responseJSON.message.hasOwnProperty('repository_list_items')) {
// var message = xhr.responseJSON.message['repository_list_items'];
// $('.dnd-error').remove();
// $('#manageRepositoryColumn ').find('.bootstrap-tagsinput').after(
// "<i class='dnd-error'>" + message + "</i>"
// );
// } else {
// var field = { "name": xhr.responseJSON.message };
// $(form).renderFormErrors('repository_column', field, true, e);
// }
// } else {
// HelperModule.flashAlertMsg(xhr.responseJSON.message, 'danger');
// }
// });
// if (modalID) {
// form.submit();
// }
// }
// @TODO
function initEditSubmitAction(modalHtml) {
$('#new-repo-column-submit').on('click', function() {
// if ($('#repository_column_data_type').val() === 'RepositoryListValue') {
// $('#list_items').val($(tagsInputID).val());
// }
//
// processResponse($(formID), 'update', modalHtml);
});
}
// @TODO refactor that
function initEditCoumnModal() {
var modalHtml = $('#manageRepositoryColumn');
// var colRadID = '#repository_column_data_type_repositorylistvalue';
// var tagsInputID = '[data-role="tagsinput"]';
// var formID = '[data-role="manage-repository-column-form"]';
$('.repository-columns-body').off('click', '.edit-repo-column').on('click', '.edit-repo-column', function() {
var editUrl = $(this).closest('li').attr('data-edit-url');
$.get(editUrl, function(data) {
modalHtml.find('.modal-content').html(data.html);
modalHtml.modal('show');
initColumnTypeSelector();
$('#repository_column_data_type').val(modalHtml.find('#new_repository_column').attr('data-edit-type')).trigger('click');
$('#repository_column_data_type').prop('disabled', true);
setTimeout(function() {
$('#repository_column_name').focus();
}, 500);
// if (modalHtml.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(tagsInputValues, function(index, element) {
// $(tagsInputID).tagsinput('add', element);
// });
// });
// }
initEditSubmitAction(modalHtml);
}).fail(function() {
HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');
});
}); });
} }
function removeElementFromDom(column) { function removeElementFromDom(column) {
$('.list-group-item[data-id="' + column.id + '"]').remove(); $('.repository-column-edtior .list-group-item[data-id="' + column.id + '"]').remove();
if ($('.list-group-item').length === 0) { if ($('.list-group-item').length === 0) {
location.reload(); location.reload();
} }
} }
function initDeleteSubmitAction(modal, form) { function initDeleteSubmitAction() {
modal.find('#delete-repo-column-submit').on('click', function() { var $manageModal = $(manageModal);
form.submit(); $manageModal.off('click', '#delete-repo-column-submit').on('click', '#delete-repo-column-submit', function() {
modal.modal('hide');
animateSpinner(); animateSpinner();
form.on('ajax:success', function(e, data) { $manageModal.modal('hide');
removeElementFromDom(data); $.ajax({
HelperModule.flashAlertMsg(data.message, 'success'); url: $(this).data('delete-url'),
animateSpinner(null, false); type: 'DELETE',
}).on('ajax:error', function(e, xhr) { dataType: 'json',
animateSpinner(null, false); success: (result) => {
HelperModule.flashAlertMsg(xhr.responseJSON.message, 'danger'); removeElementFromDom(result);
HelperModule.flashAlertMsg(result.message, 'success');
animateSpinner(null, false);
},
error: (result) => {
animateSpinner(null, false);
HelperModule.flashAlertMsg(result.responseJSON.error, 'danger');
}
}); });
}); });
} }
function initDeleteColumnModal() {
$('.repository-columns-body').off('click', '.delete-repo-column').on('click', '.delete-repo-column', function() {
var element = $(this);
var modalHtml = $('#deleteRepositoryColumn');
$.get(element.closest('li').attr('data-destroy-url'), function(data) {
modalHtml.find('.modal-body').html(data.html);
modalHtml.modal('show');
initDeleteSubmitAction(modalHtml, $(modalHtml.find('form')));
}).fail(function() {
HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');
});
});
}
function insertNewListItem(id, column) { function insertNewListItem(column) {
var html = `<li class="list-group-item row" data-id="${id}" var html = `<li class="list-group-item row" data-id="${column.id}">
data-destroy-url="${column.destroy_html_url}"
data-edit-url="${column.edit_url}">
<div class="col-xs-8"> <div class="col-xs-8">
<span class="pull-left column-name">${column.name}</span> <span class="pull-left column-name">${column.name}</span>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<span class="controlls pull-right"> <span class="controlls pull-right">
<button class="btn btn-default edit-repo-column" data-action="edit"> <button class="btn btn-default edit-repo-column"
<span class="fas fa-pencil-alt"></span> data-action="edit"
${I18n.t('libraries.repository_columns.index.edit_column')} data-modal-url="${column.destroy_html_url}"
</button>&nbsp; >
<button class="btn btn-default delete-repo-column" data-action="destroy"> <span class="fas fa-pencil-alt"></span>
<%= I18n.t "libraries.repository_columns.index.edit_column" %>
</button>
<button class="btn btn-default delete-repo-column"
data-action="destroy"
data-modal-url="${column.destroy_html_url}"
>
<span class="fas fa-trash-alt"></span> <span class="fas fa-trash-alt"></span>
${I18n.t('libraries.repository_columns.index.delete_column')} <%= I18n.t "libraries.repository_columns.index.delete_column" %>
</button> </button>
</span> </span>
</div> </div>
@ -172,35 +74,43 @@ var RepositoryColumns = (function() {
$('[data-attr="no-columns"]').remove(); $('[data-attr="no-columns"]').remove();
} }
function initCreateSubmitAction(modalHtml) { function initCreateSubmitAction() {
$('#new-repo-column-submit').on('click', function() { var $manageModal = $(manageModal);
var url = $('#repository_column_data_type').find(':selected').data('create-url'); $manageModal.off('click', '#new-repo-column-submit').on('click', '#new-repo-column-submit', function() {
var params = { repository_column: { name: $('#repository_column_name').val() } }; var url = $('#repository-column-data-type').find(':selected').data('create-url');
$.post(url, params, (responseData) => { var params = { repository_column: { name: $('#repository-column-name').val() } };
var data = responseData.data; $.post(url, params, (data) => {
insertNewListItem(data.id, data.attributes); insertNewListItem(data);
HelperModule.flashAlertMsg(data.attributes.message, 'success'); HelperModule.flashAlertMsg(data.message, 'success');
modalHtml.modal('hide'); $manageModal.modal('hide');
}).error((error) => { }).error((error) => {
$('#new_repository_column').renderFormErrors('repository_column', error.responseJSON.repository_column, true); $('#new_repository_column').renderFormErrors('repository_column', error.responseJSON.repository_column, true);
}); })
}); });
} }
function initNewColumnModal() { function initEditSubmitAction() {
var modalHtml = $('#manageRepositoryColumn'); var $manageModal = $(manageModal);
$('.repository-columns-header').off('click', '#new-repo-column-modal').on('click', '#new-repo-column-modal', function() { $manageModal.off('click', '#new-repo-column-submit').on('click', '#new-repo-column-submit', function() {
var modalUrl = $(this).attr('data-modal-url'); // TODO
$.get(modalUrl, function(data) { });
modalHtml.find('.modal-content').html(data.html); }
modalHtml.modal('show');
initColumnTypeSelector(); function initManageColumnModal() {
$('[data-column-type="RepositoryTextValue"]').show(); var $manageModal = $(manageModal);
setTimeout(function() { $('.repository-column-edtior').off('click', '.manage-repo-column').on('click', '.manage-repo-column', function() {
$('#repository_column_name').focus(); var button = $(this);
}, 500); var modalUrl = button.data('modal-url');
initCreateSubmitAction(modalHtml); $.get(modalUrl, (data) => {
$manageModal.modal('show').find('.modal-content').html(data.html)
.find('#repository-column-name')
.focus();
if (button.data('action') === 'new') {
$('[data-column-type="RepositoryTextValue"]').show();
}
}).fail(function() {
HelperModule.flashAlertMsg(I18n.t('libraries.repository_columns.no_permissions'), 'danger');
}); });
}); });
} }
@ -208,9 +118,11 @@ var RepositoryColumns = (function() {
return { return {
init: () => { init: () => {
if ($('.repository-columns-header').length > 0) { if ($('.repository-columns-header').length > 0) {
initEditCoumnModal(); initColumnTypeSelector();
initDeleteColumnModal(); initEditSubmitAction();
initNewColumnModal(); initCreateSubmitAction();
initDeleteSubmitAction();
initManageColumnModal();
} }
} }
}; };

4
app/assets/stylesheets/repositories.scss
View file

@ -260,4 +260,8 @@
.modal-footer { .modal-footer {
text-align: center; text-align: center;
} }
.delete-footer {
text-align: right;
}
} }

16
app/views/repository_columns/_delete_column_modal.html.erb
View file

@ -1,16 +0,0 @@
<div class="modal fade" id="deleteRepositoryColumn" tabindex="-1" role="dialog" aria-labelledby="deleteRepositoryColumnLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><%= t("repositories.modal_delete_column.title") %></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel")%></button>
<button id="delete-repo-column-submit" type="button" class="btn btn-danger" data-action="delete"><%= t("repositories.modal_delete_column.delete") %></button>
</div>
</div>
</div>
</div>

45
app/views/repository_columns/_delete_column_modal_body.html.erb
View file

@ -1,18 +1,27 @@
<%= bootstrap_form_for @repository_column, <div class="modal-header">
url: repository_repository_column_path(@repository, <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@repository_column), <h4 class="modal-title"><%= t("repositories.modal_delete_column.title") %></h4>
remote: true, </div>
method: :delete, <div class="modal-body">
data: { role: "destroy-repository-column-form", <p><%= t("repositories.modal_delete_column.message", column: @repository_column.name) %></p>
id: @repository_column.id} do |f| %> <div class="alert alert-danger" role="alert">
<p><%= t("repositories.modal_delete_column.message", column: @repository_column.name) %></p> <span class="fas fa-exclamation-circle"></span>
<div class="alert alert-danger" role="alert"> <%= t("repositories.modal_delete_column.alert_heading") %>
<span class="fas fa-exclamation-circle"></span> <ul>
&nbsp; <li><%= t("repositories.modal_delete_column.alert_line_1", nr: @repository_column.repository_cells.count) %></li>
<%= t("repositories.modal_delete_column.alert_heading") %> <li><%= t("repositories.modal_delete_column.alert_line_2") %></li>
<ul> </ul>
<li><%= t("repositories.modal_delete_column.alert_line_1", nr: @repository_column.repository_cells.count) %></li> </div>
<li><%= t("repositories.modal_delete_column.alert_line_2") %></li> </div>
</ul> <div class="modal-footer delete-footer">
</div> <button type="button" class="btn btn-default" data-dismiss="modal"><%= t("general.cancel")%></button>
<% end %> <button id="delete-repo-column-submit"
type="button"
class="btn btn-danger"
data-action="delete"
data-delete-url="<%= repository_repository_column_path(@repository, @repository_column) %>"
>
<%= t("repositories.modal_delete_column.delete") %>
</button>
</div>

2
app/views/repository_columns/_manage_column_modal.html.erb
View file

@ -1,4 +1,4 @@
<div class="modal fade" <div class="modal"
id="manageRepositoryColumn" id="manageRepositoryColumn"
tabindex="-1" tabindex="-1"
role="dialog" role="dialog"

10
app/views/repository_columns/_manage_column_modal_content.html.erb
View file

@ -10,10 +10,10 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-horizontal" <div class="form-horizontal"
id="new_repository_column" id="new-repository-column"
data-edit-type="<%= @repository_column.data_type unless @repository_column.new_record? %>"> data-edit-type="<%= @repository_column.data_type unless @repository_column.new_record? %>">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-3" for="repository_column_name"> <label class="control-label col-sm-3" for="repository-column-name">
<%= t('libraries.manange_modal_column.name') %> <%= t('libraries.manange_modal_column.name') %>
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
@ -21,15 +21,15 @@
class="form-control" class="form-control"
type="text" type="text"
name="repository_column[name]" name="repository_column[name]"
id="repository_column_name"> id="repository-column-name">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-3" for="repository_column_data_type"> <label class="control-label col-sm-3" for="repository-column-data-type">
<%= t('libraries.manange_modal_column.colum_type') %> <%= t('libraries.manange_modal_column.colum_type') %>
</label> </label>
<div class="col-sm-9"> <div class="col-sm-9">
<select class="form-control" name="repository_column[data_type]" id="repository_column_data_type"> <select class="form-control" name="repository_column[data_type]" id="repository-column-data-type">
<option data-create-url="<%= repository_repository_columns_text_columns_path(@repository) %>" value="RepositoryTextValue"> <option data-create-url="<%= repository_repository_columns_text_columns_path(@repository) %>" value="RepositoryTextValue">
<%= t('libraries.manange_modal_column.select.repository_text_value') %> <%= t('libraries.manange_modal_column.select.repository_text_value') %>
</option> </option>

22
app/views/repository_columns/index.html.erb
View file

@ -1,6 +1,6 @@
<% provide(:head_title, t('libraries.repository_columns.head_title', repository: @repository.name)) %> <% provide(:head_title, t('libraries.repository_columns.head_title', repository: @repository.name)) %>
<div class="content-pane"> <div class="content-pane repository-column-edtior">
<div class="repository-columns-header container"> <div class="repository-columns-header container">
<div class="row"> <div class="row">
<%= link_to t('libraries.repository_columns.index.back_to_repository_html', repository: @repository.name), <%= link_to t('libraries.repository_columns.index.back_to_repository_html', repository: @repository.name),
@ -13,9 +13,9 @@
</div> </div>
<div class="col-md-6 text-right"> <div class="col-md-6 text-right">
<button id="new-repo-column-modal" <button id="new-repo-column-modal"
class="btn btn-primary help_tooltips" class="btn btn-primary help_tooltips manage-repo-column"
data-modal-url="<%= repository_columns_create_html_path(@repository) %>" data-modal-url="<%= repository_columns_create_html_path(@repository) %>"
data-action="new-column-modal" data-action="new"
data-tooltiplink="<%= I18n.t('tooltips.link.inventory.manage_columns') %>" data-tooltiplink="<%= I18n.t('tooltips.link.inventory.manage_columns') %>"
data-tooltipcontent="<%= I18n.t('tooltips.text.inventory.manage_columns') %>"> data-tooltipcontent="<%= I18n.t('tooltips.text.inventory.manage_columns') %>">
<span class="fas fa-plus"></span>&nbsp;<%=t 'libraries.repository_columns.index.new_column' %> <span class="fas fa-plus"></span>&nbsp;<%=t 'libraries.repository_columns.index.new_column' %>
@ -33,20 +33,23 @@
<% else %> <% else %>
<% @repository_columns.each do |column| %> <% @repository_columns.each do |column| %>
<% cache column do %> <% cache column do %>
<li class="list-group-item row" <li class="list-group-item row" data-id="<%= column.id %>">
data-id="<%= column.id %>"
data-destroy-url="<%= repository_columns_destroy_html_path(@repository, column) %>"
data-edit-url="<%= edit_repository_repository_column_path(@repository, column) %>">
<div class="col-xs-8"> <div class="col-xs-8">
<span class="pull-left column-name"><%= column.name %></span> <span class="pull-left column-name"><%= column.name %></span>
</div> </div>
<div class="col-xs-4"> <div class="col-xs-4">
<span class="controlls pull-right"> <span class="controlls pull-right">
<button class="btn btn-default edit-repo-column" data-action="edit"> <button class="btn btn-default edit-repo-column manage-repo-column"
data-action="edit"
data-modal-url="<%= edit_repository_repository_column_path(@repository, column) %>"
>
<span class="fas fa-pencil-alt"></span> <span class="fas fa-pencil-alt"></span>
<%=t 'libraries.repository_columns.index.edit_column'%> <%=t 'libraries.repository_columns.index.edit_column'%>
</button>&nbsp; </button>&nbsp;
<button class="btn btn-default delete-repo-column" data-action="destroy"> <button class="btn btn-default delete-repo-column manage-repo-column"
data-action="destroy"
data-modal-url="<%= repository_columns_destroy_html_path(@repository, column) %>"
>
<span class="fas fa-trash-alt"></span> <span class="fas fa-trash-alt"></span>
<%=t 'libraries.repository_columns.index.delete_column'%> <%=t 'libraries.repository_columns.index.delete_column'%>
</button> </button>
@ -61,4 +64,3 @@
</div> </div>
<%= render partial: 'manage_column_modal' %> <%= render partial: 'manage_column_modal' %>
<%= render partial: 'delete_column_modal' %>