mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-09-27 15:36:39 +08:00
Refactor column type edit modal
This commit is contained in:
aignatov-bio
Urban Rotnik
parent
bcb8cc1840
commit
9eec36cb01
7 changed files with 125 additions and 214 deletions
|
|
@ -1,165 +1,67 @@
|
|||
/* global I18n HelperModule animateSpinner */
|
||||
/* no-restricted-globals */
|
||||
/* eslint-disable no-restricted-globals */
|
||||
var RepositoryColumns = (function() {
|
||||
var manageModal = '#manageRepositoryColumn';
|
||||
|
||||
function initColumnTypeSelector() {
|
||||
$('#repository_column_data_type')
|
||||
.on('click', function() {
|
||||
$('.column-type').hide();
|
||||
$('[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');
|
||||
});
|
||||
var $manageModal = $(manageModal);
|
||||
$manageModal.off('click', '#repository-column-data-type').on('click', '#repository-column-data-type', function() {
|
||||
$('.column-type').hide();
|
||||
$('[data-column-type="' + $(this).val() + '"]').show();
|
||||
});
|
||||
}
|
||||
|
||||
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) {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
function initDeleteSubmitAction(modal, form) {
|
||||
modal.find('#delete-repo-column-submit').on('click', function() {
|
||||
form.submit();
|
||||
modal.modal('hide');
|
||||
function initDeleteSubmitAction() {
|
||||
var $manageModal = $(manageModal);
|
||||
$manageModal.off('click', '#delete-repo-column-submit').on('click', '#delete-repo-column-submit', function() {
|
||||
animateSpinner();
|
||||
form.on('ajax:success', function(e, data) {
|
||||
removeElementFromDom(data);
|
||||
HelperModule.flashAlertMsg(data.message, 'success');
|
||||
animateSpinner(null, false);
|
||||
}).on('ajax:error', function(e, xhr) {
|
||||
animateSpinner(null, false);
|
||||
HelperModule.flashAlertMsg(xhr.responseJSON.message, 'danger');
|
||||
$manageModal.modal('hide');
|
||||
$.ajax({
|
||||
url: $(this).data('delete-url'),
|
||||
type: 'DELETE',
|
||||
dataType: 'json',
|
||||
success: (result) => {
|
||||
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) {
|
||||
var html = `<li class="list-group-item row" data-id="${id}"
|
||||
data-destroy-url="${column.destroy_html_url}"
|
||||
data-edit-url="${column.edit_url}">
|
||||
function insertNewListItem(column) {
|
||||
var html = `<li class="list-group-item row" data-id="${column.id}">
|
||||
|
||||
<div class="col-xs-8">
|
||||
<span class="pull-left column-name">${column.name}</span>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<span class="controlls pull-right">
|
||||
<button class="btn btn-default edit-repo-column" data-action="edit">
|
||||
<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">
|
||||
<button class="btn btn-default edit-repo-column"
|
||||
data-action="edit"
|
||||
data-modal-url="${column.destroy_html_url}"
|
||||
>
|
||||
<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>
|
||||
${I18n.t('libraries.repository_columns.index.delete_column')}
|
||||
<%= I18n.t "libraries.repository_columns.index.delete_column" %>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -172,35 +74,43 @@ var RepositoryColumns = (function() {
|
|||
$('[data-attr="no-columns"]').remove();
|
||||
}
|
||||
|
||||
function initCreateSubmitAction(modalHtml) {
|
||||
$('#new-repo-column-submit').on('click', function() {
|
||||
var url = $('#repository_column_data_type').find(':selected').data('create-url');
|
||||
var params = { repository_column: { name: $('#repository_column_name').val() } };
|
||||
$.post(url, params, (responseData) => {
|
||||
var data = responseData.data;
|
||||
insertNewListItem(data.id, data.attributes);
|
||||
HelperModule.flashAlertMsg(data.attributes.message, 'success');
|
||||
modalHtml.modal('hide');
|
||||
function initCreateSubmitAction() {
|
||||
var $manageModal = $(manageModal);
|
||||
$manageModal.off('click', '#new-repo-column-submit').on('click', '#new-repo-column-submit', function() {
|
||||
var url = $('#repository-column-data-type').find(':selected').data('create-url');
|
||||
var params = { repository_column: { name: $('#repository-column-name').val() } };
|
||||
$.post(url, params, (data) => {
|
||||
insertNewListItem(data);
|
||||
HelperModule.flashAlertMsg(data.message, 'success');
|
||||
$manageModal.modal('hide');
|
||||
}).error((error) => {
|
||||
$('#new_repository_column').renderFormErrors('repository_column', error.responseJSON.repository_column, true);
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function initNewColumnModal() {
|
||||
var modalHtml = $('#manageRepositoryColumn');
|
||||
$('.repository-columns-header').off('click', '#new-repo-column-modal').on('click', '#new-repo-column-modal', function() {
|
||||
var modalUrl = $(this).attr('data-modal-url');
|
||||
$.get(modalUrl, function(data) {
|
||||
modalHtml.find('.modal-content').html(data.html);
|
||||
modalHtml.modal('show');
|
||||
function initEditSubmitAction() {
|
||||
var $manageModal = $(manageModal);
|
||||
$manageModal.off('click', '#new-repo-column-submit').on('click', '#new-repo-column-submit', function() {
|
||||
// TODO
|
||||
});
|
||||
}
|
||||
|
||||
initColumnTypeSelector();
|
||||
$('[data-column-type="RepositoryTextValue"]').show();
|
||||
setTimeout(function() {
|
||||
$('#repository_column_name').focus();
|
||||
}, 500);
|
||||
initCreateSubmitAction(modalHtml);
|
||||
function initManageColumnModal() {
|
||||
var $manageModal = $(manageModal);
|
||||
$('.repository-column-edtior').off('click', '.manage-repo-column').on('click', '.manage-repo-column', function() {
|
||||
var button = $(this);
|
||||
var modalUrl = button.data('modal-url');
|
||||
$.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 {
|
||||
init: () => {
|
||||
if ($('.repository-columns-header').length > 0) {
|
||||
initEditCoumnModal();
|
||||
initDeleteColumnModal();
|
||||
initNewColumnModal();
|
||||
initColumnTypeSelector();
|
||||
initEditSubmitAction();
|
||||
initCreateSubmitAction();
|
||||
initDeleteSubmitAction();
|
||||
initManageColumnModal();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -260,4 +260,8 @@
|
|||
.modal-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.delete-footer {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">×</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>
|
||||
|
|
@ -1,18 +1,27 @@
|
|||
<%= bootstrap_form_for @repository_column,
|
||||
url: repository_repository_column_path(@repository,
|
||||
@repository_column),
|
||||
remote: true,
|
||||
method: :delete,
|
||||
data: { role: "destroy-repository-column-form",
|
||||
id: @repository_column.id} do |f| %>
|
||||
<p><%= t("repositories.modal_delete_column.message", column: @repository_column.name) %></p>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<span class="fas fa-exclamation-circle"></span>
|
||||
|
||||
<%= t("repositories.modal_delete_column.alert_heading") %>
|
||||
<ul>
|
||||
<li><%= t("repositories.modal_delete_column.alert_line_1", nr: @repository_column.repository_cells.count) %></li>
|
||||
<li><%= t("repositories.modal_delete_column.alert_line_2") %></li>
|
||||
</ul>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title"><%= t("repositories.modal_delete_column.title") %></h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><%= t("repositories.modal_delete_column.message", column: @repository_column.name) %></p>
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<span class="fas fa-exclamation-circle"></span>
|
||||
<%= t("repositories.modal_delete_column.alert_heading") %>
|
||||
<ul>
|
||||
<li><%= t("repositories.modal_delete_column.alert_line_1", nr: @repository_column.repository_cells.count) %></li>
|
||||
<li><%= t("repositories.modal_delete_column.alert_line_2") %></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer delete-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"
|
||||
data-delete-url="<%= repository_repository_column_path(@repository, @repository_column) %>"
|
||||
>
|
||||
<%= t("repositories.modal_delete_column.delete") %>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="modal fade"
|
||||
<div class="modal"
|
||||
id="manageRepositoryColumn"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-horizontal"
|
||||
id="new_repository_column"
|
||||
id="new-repository-column"
|
||||
data-edit-type="<%= @repository_column.data_type unless @repository_column.new_record? %>">
|
||||
<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') %>
|
||||
</label>
|
||||
<div class="col-sm-9">
|
||||
|
|
@ -21,15 +21,15 @@
|
|||
class="form-control"
|
||||
type="text"
|
||||
name="repository_column[name]"
|
||||
id="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">
|
||||
<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">
|
||||
<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">
|
||||
<%= t('libraries.manange_modal_column.select.repository_text_value') %>
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<% 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="row">
|
||||
<%= link_to t('libraries.repository_columns.index.back_to_repository_html', repository: @repository.name),
|
||||
|
|
@ -13,9 +13,9 @@
|
|||
</div>
|
||||
<div class="col-md-6 text-right">
|
||||
<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-action="new-column-modal"
|
||||
data-action="new"
|
||||
data-tooltiplink="<%= I18n.t('tooltips.link.inventory.manage_columns') %>"
|
||||
data-tooltipcontent="<%= I18n.t('tooltips.text.inventory.manage_columns') %>">
|
||||
<span class="fas fa-plus"></span> <%=t 'libraries.repository_columns.index.new_column' %>
|
||||
|
|
@ -33,20 +33,23 @@
|
|||
<% else %>
|
||||
<% @repository_columns.each do |column| %>
|
||||
<% cache column do %>
|
||||
<li class="list-group-item row"
|
||||
data-id="<%= column.id %>"
|
||||
data-destroy-url="<%= repository_columns_destroy_html_path(@repository, column) %>"
|
||||
data-edit-url="<%= edit_repository_repository_column_path(@repository, column) %>">
|
||||
<li class="list-group-item row" data-id="<%= column.id %>">
|
||||
<div class="col-xs-8">
|
||||
<span class="pull-left column-name"><%= column.name %></span>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<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>
|
||||
<%=t 'libraries.repository_columns.index.edit_column'%>
|
||||
</button>
|
||||
<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>
|
||||
<%=t 'libraries.repository_columns.index.delete_column'%>
|
||||
</button>
|
||||
|
|
@ -61,4 +64,3 @@
|
|||
</div>
|
||||
|
||||
<%= render partial: 'manage_column_modal' %>
|
||||
<%= render partial: 'delete_column_modal' %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue