From 9eec36cb018d223f94afb0691a16155ffea68a92 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Mon, 21 Oct 2019 12:40:53 +0200 Subject: [PATCH] Refactor column type edit modal --- .../javascripts/repository_columns/index.js | 240 ++++++------------ app/assets/stylesheets/repositories.scss | 4 + .../_delete_column_modal.html.erb | 16 -- .../_delete_column_modal_body.html.erb | 45 ++-- .../_manage_column_modal.html.erb | 2 +- .../_manage_column_modal_content.html.erb | 10 +- app/views/repository_columns/index.html.erb | 22 +- 7 files changed, 125 insertions(+), 214 deletions(-) delete mode 100644 app/views/repository_columns/_delete_column_modal.html.erb diff --git a/app/assets/javascripts/repository_columns/index.js b/app/assets/javascripts/repository_columns/index.js index f74ce9773..a0bf3edc8 100644 --- a/app/assets/javascripts/repository_columns/index.js +++ b/app/assets/javascripts/repository_columns/index.js @@ -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( - // "" + 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 - 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 = `
  • + function insertNewListItem(column) { + var html = `
  • +
    ${column.name}
    -   - +
    @@ -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(); } } }; diff --git a/app/assets/stylesheets/repositories.scss b/app/assets/stylesheets/repositories.scss index 4f5d13aee..0e4931bdb 100644 --- a/app/assets/stylesheets/repositories.scss +++ b/app/assets/stylesheets/repositories.scss @@ -260,4 +260,8 @@ .modal-footer { text-align: center; } + + .delete-footer { + text-align: right; + } } diff --git a/app/views/repository_columns/_delete_column_modal.html.erb b/app/views/repository_columns/_delete_column_modal.html.erb deleted file mode 100644 index b0f324854..000000000 --- a/app/views/repository_columns/_delete_column_modal.html.erb +++ /dev/null @@ -1,16 +0,0 @@ - diff --git a/app/views/repository_columns/_delete_column_modal_body.html.erb b/app/views/repository_columns/_delete_column_modal_body.html.erb index 98cb6072f..8c3210a1f 100644 --- a/app/views/repository_columns/_delete_column_modal_body.html.erb +++ b/app/views/repository_columns/_delete_column_modal_body.html.erb @@ -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| %> -

    <%= t("repositories.modal_delete_column.message", column: @repository_column.name) %>

    - -<% end %> +
    + +

    <%= t("repositories.modal_delete_column.title") %>

    +
    +
    +

    <%= t("repositories.modal_delete_column.message", column: @repository_column.name) %>

    + +
    +
    + + +
    + diff --git a/app/views/repository_columns/_manage_column_modal.html.erb b/app/views/repository_columns/_manage_column_modal.html.erb index dadb6525a..e2cc853e8 100644 --- a/app/views/repository_columns/_manage_column_modal.html.erb +++ b/app/views/repository_columns/_manage_column_modal.html.erb @@ -1,4 +1,4 @@ -