scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-27 10:14:17 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor repository column javascript

Browse source
This commit is contained in:
Mojca Lorber 2019-10-14 15:27:03 +02:00 committed by Urban Rotnik
parent 467c80da52
commit 9d4796cf90
5 changed files with 246 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/application.js.erb
View file

@ -36,6 +36,7 @@
//= require i18n.js
//= require i18n/translations
//= require users/settings/teams/invite_users_modal
//= require repository_columns/index
//= require perfect-scrollbar.min
//= require shared/inline_editing
//= require activestorage

245
app/assets/javascripts/repository_columns/index.js Normal file
View file

@ -0,0 +1,245 @@
/* global I18n HelperModule animateSpinner */
/* no-restricted-globals */
var RepositoryColumns = (function() {
function initColumnTypeSelector() {
$('[name="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);
// if (modalID) {
// $(modalID).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 refactor that
function initEditCoumnModal() {
var modalID = '#manageRepositoryColumn';
// var colRadID = '#repository_column_data_type_repositorylistvalue';
// var tagsInputID = '[data-role="tagsinput"]';
// var formID = '[data-role="manage-repository-column-form"]';
$('[data-action="edit"]').off('click').on('click', function() {
var editUrl = $(this).closest('li').attr('data-edit-url');
$.get(editUrl, function(data) {
$(data.html).appendTo('body').promise().done(function() {
$(modalID).modal('show').promise().done(function() {
$(modalID).on('hidden.bs.modal', function() {
// remove edit modal window
$(modalID).remove();
$('.modal-backdrop').remove();
});
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(tagsInputValues, function(index, element) {
// $(tagsInputID).tagsinput('add', element);
// });
// });
// }
$('[data-action="save"]').on('click', function() {
// if ($('#repository_column_data_type').val() === 'RepositoryListValue') {
// $('#list_items').val($(tagsInputID).val());
// }
//
// processResponse($(formID), 'update', modalID);
});
});
});
}).fail(function() {
HelperModule.flashAlertMsg(
I18n.t('libraries.repository_columns.no_permissions'), 'danger'
);
});
});
}
function removeElementFromDom(column) {
$('.list-group-item[data-id="' + column.id + '"]').remove();
if ($('.list-group-item').length === 0) {
location.reload();
}
}
function initDeleteSubmitAction(modal, form) {
modal.find('[data-action="delete"]').on('click', function() {
form.submit();
modal.modal('hide');
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');
});
});
}
function initDeleteColumnModal() {
$('[data-action="destroy"]').off('click').on('click', function() {
var element = $(this);
var modalHtml = $('#deleteRepositoryColumn');
$.get(element.closest('li').attr('data-destroy-url'), function(data) {
modalHtml.find('.modal-body').html(data.html)
.promise()
.done(function() {
modalHtml.modal('show');
initDeleteSubmitAction(modalHtml, $(modalHtml.find('form')));
});
}).fail(function() {
HelperModule.flashAlertMsg(
I18n.t('libraries.repository_columns.no_permissions'), 'danger'
);
});
});
}
function insertNewListItem(column) {
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">
<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" data-action="edit">
<span class="fas fa-pencil-alt"></span>&nbsp;
<%= I18n.t "libraries.repository_columns.index.edit_column" %>
</button>&nbsp;
<button class="btn btn-default delete-column" data-action="destroy">
<span class="fas fa-trash-alt"></span>&nbsp;
<%= I18n.t "libraries.repository_columns.index.delete_column" %>
</button>
</span>
</div>
</li>`;
// remove element if already persent
$('[data-id="' + column.id + '"]').remove();
$(html).insertBefore('.repository-columns-body ul li:first')
.promise()
.done(function() {
initDeleteColumnModal();
initEditCoumnModal();
});
// remove 'no column' list item
$('[data-attr="no-columns"]').remove();
}
function initNewColumnModal() {
var modalID = '#manageRepositoryColumn';
$('[data-action="new-column-modal"]').off('click').on('click', function() {
var modalUrl = $(this).attr('data-modal-url');
$.get(modalUrl, function(data) {
$(data.html).appendTo('body').promise().done(function() {
$(modalID).modal('show').promise().done(function() {
$(modalID).on('hidden.bs.modal', function() {
// remove create new modal window
$(modalID).remove();
$('.modal-backdrop').remove();
});
initColumnTypeSelector();
$('[data-column-type="RepositoryTextValue"]').show();
setTimeout(function() {
$('#repository_column_name').focus();
}, 500);
$('[data-action="save"]').on('click', function() {
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(data2) {
insertNewListItem(data2);
HelperModule.flashAlertMsg(data2.message, 'success');
if (modalID) {
$(modalID).modal('hide');
}
},
error: function() {
}
});
});
});
});
});
});
}
return {
init: () => {
initEditCoumnModal();
initDeleteColumnModal();
initNewColumnModal();
}
};
}());
$(document).on('turbolinks:load', function() {
RepositoryColumns.init();
});

234
app/assets/javascripts/repository_columns/index.js.erb
View file

@ -1,234 +0,0 @@
(function() {
'use strict';
// @TODO refactor that eventually
function initEditCoumnModal() {
var modalID = '#manageRepositoryColumn';
var colRadID = '#repository_column_data_type_repositorylistvalue';
var tagsInputID = '[data-role="tagsinput"]';
var formID = '[data-role="manage-repository-column-form"]';
$('[data-action="edit"]').off('click').on('click', function() {
var editUrl = $(this).closest('li').attr('data-edit-url');
$.get(editUrl, function(data) {
$(data.html).appendTo('body').promise().done(function() {
$(modalID).modal('show').promise().done(function() {
$(modalID).on('hidden.bs.modal', function () {
// remove edit modal window
$(modalID).remove();
$('.modal-backdrop').remove();
});
_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);
});
});
}
$('[data-action="save"]').on('click', function() {
if($('#repository_column_data_type').val() === 'RepositoryListValue') {
$('#list_items').val($(tagsInputID).val());
}
_processResponse($(formID), 'update', modalID);
});
});
});
}).fail(function(error) {
HelperModule.flashAlertMsg(
"<%= I18n.t("libraries.repository_columns.no_permissions") %>",
'danger');
});
});
}
function initDeleteColumnModal() {
$('[data-action="destroy"]').off('click').on('click', function() {
var element = $(this);
var modal_html = $("#deleteRepositoryColumn");
$.get(element.closest('li').attr('data-destroy-url'), function(data) {
modal_html.find('.modal-body').html(data.html)
.promise()
.done(function() {
modal_html.modal('show');
_initSubmitAction(modal_html, $(modal_html.find('form')));
});
}).fail(function(error) {
HelperModule.flashAlertMsg(
"<%= I18n.t("libraries.repository_columns.no_permissions") %>",
'danger');
});
});
}
// @TODO refactor that eventually
function initNewColumnModal() {
var modalID = '#manageRepositoryColumn';
$('[data-action="new-column-modal"]').off('click').on('click', function() {
var modalUrl = $(this).attr('data-modal-url');
$.get(modalUrl, function(data) {
$(data.html).appendTo('body').promise().done(function() {
$(modalID).modal('show').promise().done(function() {
$(modalID).on('hidden.bs.modal', function () {
// remove create new modal window
$(modalID).remove();
$('.modal-backdrop').remove();
});
_initColumnTypeSelector();
$('[data-column-type="RepositoryTextValue"]').show();
setTimeout(function() {
$('#repository_column_name').focus();
}, 500);
$('[data-action="save"]').on('click', function() {
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) {
}
});
});
});
});
});
});
}
/* *********************************
Helper methods
********************************* */
function _insertNewListItem(column) {
// remove element if already persent
$('[data-id="' + column.id + '"]').remove();
var html = '<li class="list-group-item row" data-id="' + column.id + '" ';
html += 'data-destroy-url="' + column.destroy_html_url + '"';
html += 'data-edit-url="' + column.edit_url + '"><div class="col-xs-8">';
html += '<span class="pull-left column-name">' + column.name + '</span>';
html += '</div><div class="col-xs-4"><span class="controlls pull-right">';
html += '<button class="btn btn-default" data-action="edit">';
html += '<span class="fas fa-pencil-alt"></span>&nbsp;';
html += '<%= I18n.t "libraries.repository_columns.index.edit_column" %></button>&nbsp;';
html += '<button class="btn btn-default delete-column" data-action="destroy">';
html += '<span class="fas fa-trash-alt"></span>&nbsp;';
html += '<%= I18n.t "libraries.repository_columns.index.delete_column" %>';
html += '</button></span></div></li>';
$(html).insertBefore('.repository-columns-body ul li:first')
.promise()
.done(function() {
initDeleteColumnModal();
initEditCoumnModal();
});
// remove 'no column' list item
$('[data-attr="no-columns"]').remove();
}
function _replaceListItem(column) {
$('.list-group-item[data-id="' + column.id + '"]')
.find('span.pull-left').text(column.name);
}
function _initColumnTypeSelector() {
$('[name="repository_column[data_type]"]')
.on('click', function() {
$('.column-type').hide();
$('[data-column-type="'+$(this).val()+'"]').show();
});
}
function _initTagInput() {
$('[data-role="tagsinput"]').tagsinput({
maxChars: <%= Constants::NAME_MAX_LENGTH %>,
trimValue: true
});
}
function _removeElementFromDom(column) {
$('.list-group-item[data-id="' + column.id + '"]').remove();
if($('.list-group-item').length === 0) {
location.reload();
}
}
function _initSubmitAction(modal, form) {
modal.find('[data-action="delete"]').on('click', function() {
form.submit();
modal.modal('hide')
animateSpinner();
_processResponse(form, 'destroy');
});
}
function _processResponse(form, action, modalID) {
form.on('ajax:success', function(e, data) {
switch(action) {
case 'destroy':
_removeElementFromDom(data);
break;
case 'create':
_insertNewListItem(data);
break;
case 'update':
_replaceListItem(data);
break;
default:
location.reload();
}
HelperModule.flashAlertMsg(data.message, 'success');
animateSpinner(null, false);
if (modalID) {
$(modalID).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();
}
}
/* *********************************
Initializers
********************************* */
initEditCoumnModal();
initDeleteColumnModal();
initNewColumnModal();
})();

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

@ -60,4 +60,3 @@
</div>
<%= render partial: 'delete_column_modal' %>
<%= javascript_include_tag "repository_columns/index" %>

1
config/initializers/assets.rb
View file

@ -93,7 +93,6 @@ Rails.application.config.assets.precompile +=
%w(repositories/my_module_repository.js)
Rails.application.config.assets.precompile += %w(activities/index.js)
Rails.application.config.assets.precompile += %w(global_activities/index.js)
Rails.application.config.assets.precompile += %w(repository_columns/index.js)
Rails.application.config.assets.precompile += %w(repositories/show.js)
Rails.application.config.assets.precompile += %w(sidebar_toggle.js)
Rails.application.config.assets.precompile += %w(reports/reports_datatable.js)