From 9d4796cf908dfe9cd45c86d430ac9a73d91732d9 Mon Sep 17 00:00:00 2001 From: Mojca Lorber Date: Mon, 14 Oct 2019 15:27:03 +0200 Subject: [PATCH] refactor repository column javascript --- app/assets/javascripts/application.js.erb | 1 + .../javascripts/repository_columns/index.js | 245 ++++++++++++++++++ .../repository_columns/index.js.erb | 234 ----------------- app/views/repository_columns/index.html.erb | 1 - config/initializers/assets.rb | 1 - 5 files changed, 246 insertions(+), 236 deletions(-) create mode 100644 app/assets/javascripts/repository_columns/index.js delete mode 100644 app/assets/javascripts/repository_columns/index.js.erb diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index efb788b6f..22d9a9f1d 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -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 diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js new file mode 100644 index 000000000..85118ce20 --- /dev/null +++ b/app/assets/javascripts/repository_columns/index.js @@ -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( + // "" + message + "" + // ); + // } 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 = `
  • +
    + ${column.name} +
    +
    + +   + + +
    +
    • `; + + // 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(); +}); diff --git a/app/assets/javascripts/repository_columns/index.js.erb b/app/assets/javascripts/repository_columns/index.js.erb deleted file mode 100644 index e7f9748c9..000000000 --- a/app/assets/javascripts/repository_columns/index.js.erb +++ /dev/null @@ -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 = '
  • '; - html += '' + column.name + ''; - html += '
    '; - html += ' '; - html += '
    • '; - $(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( - "" + message + "" - ); - } 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(); -})(); diff --git a/app/views/repository_columns/index.html.erb b/app/views/repository_columns/index.html.erb index 199a5590b..8b0b3ab94 100644 --- a/app/views/repository_columns/index.html.erb +++ b/app/views/repository_columns/index.html.erb @@ -60,4 +60,3 @@ <%= render partial: 'delete_column_modal' %> -<%= javascript_include_tag "repository_columns/index" %> diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb index eeb3df477..8c3a740bb 100644 --- a/config/initializers/assets.rb +++ b/config/initializers/assets.rb @@ -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)