From 36302ad6e85ce65d846aaefa16f16a4656a834f2 Mon Sep 17 00:00:00 2001 From: Oleksii Kriuchykhin Date: Wed, 21 Mar 2018 16:56:36 +0100 Subject: [PATCH] Refactor existing columns management to control only Column visibility and order [SCI-2220] --- .../repositories/repository_datatable.js.erb | 399 +----------------- app/views/my_modules/repository.html.erb | 4 + .../_columns_reorder_dropdown.html.erb | 18 + app/views/repositories/_repository.html.erb | 23 +- .../repositories/_repository_table.html.erb | 8 +- config/locales/en.yml | 1 + 6 files changed, 40 insertions(+), 413 deletions(-) create mode 100644 app/views/repositories/_columns_reorder_dropdown.html.erb diff --git a/app/assets/javascripts/repositories/repository_datatable.js.erb b/app/assets/javascripts/repositories/repository_datatable.js.erb index 98fa39f4e..0544fa549 100644 --- a/app/assets/javascripts/repositories/repository_datatable.js.erb +++ b/app/assets/javascripts/repositories/repository_datatable.js.erb @@ -1011,102 +1011,6 @@ var RepositoryDatatable = (function(global) { var dropdown, dropdownList; - function createNewColumn() { - // Make an Ajax request to repository_columns_controller - var url = $('#new-column-form').data('action'); - var columnName = $('#new-column-name').val(); - if (columnName.length > 0) { - $.ajax({ - method: 'POST', - dataType: 'json', - data: {repository_column: {name: columnName}}, - error: function(data) { - var form = $('#new-column-form'); - form.addClass('has-error'); - form.find('.help-block').remove(); - form.append('' + - data.responseJSON.name + - ''); - }, - success: function(data) { - var form = $('#new-column-form'); - form.find('.help-block').remove(); - if (form.hasClass('has-error')) { - form.removeClass('has-error'); - } - $('#new-column-name').val(''); - form.append('' + - I18n.t('repositories.js.column_added') + - ''); - - // Preserve save/delete buttons as we need them after new table - // will be created - $('div.toolbarButtons').appendTo('div.repository-table'); - $('div.toolbarButtons').hide(); - - // Destroy datatable - TABLE.destroy(); - - // Add number of columns - $(TABLE_ID).data('num-columns', - $(TABLE_ID).data('num-columns') + 1); - // Add column to table (=table header) - originalHeader.append( - '' + generateColumnNameTooltip(data.name) + ''); - - // Remove all event handlers as we re-initialize them later with - // new table - $(TABLE_ID).off(); - $(TABLE_ID +' thead').empty(); - $(TABLE_ID + ' thead').append(originalHeader); - - // Re-initialize datatable - TABLE = dataTableInit(); - TABLE.on('init.dt', function() { - loadColumnsNames(); - dropdownOverflow(); - }); - }, - url: url - }); - } else { - var form = $('#new-column-form'); - form.addClass('has-error'); - form.find('.help-block').remove(); - form.append('' + - I18n.t('repositories.js.empty_column_name') + - ''); - } - } - - function initNewColumnForm() { - $('#repository-columns-dropdown').on('show.bs.dropdown', function() { - // Clear input and errors when dropdown is opened - var input = $(this).find('input#new-column-name'); - input.val(''); - var form = $('#new-column-form'); - if (form.hasClass('has-error')) { - form.removeClass('has-error'); - } - form.find('.help-block').remove(); - }); - $('#add-new-column-button').click(function(e) { - e.stopPropagation(); - createNewColumn(); - }); - $('#new-column-name').keydown(function(e) { - if (e.keyCode === 13) { - e.preventDefault(); - createNewColumn(); - } - }); - } - // loads the columns names in the dropdown list function loadColumnsNames() { // Save scroll position @@ -1117,13 +1021,9 @@ var RepositoryDatatable = (function(global) { if (index > 1) { var colIndex = $(el).attr('data-column-index'); var visible = TABLE.column(colIndex).visible(); - var editable = $(el).is('[data-editable]'); - var deletable = $(el).is('[data-deletable]'); var visClass = (visible) ? 'glyphicon-eye-open' : 'glyphicon-eye-close'; var visLi = (visible) ? '' : 'col-invisible'; - var editClass = (editable) ? '' : 'disabled'; - var delClass = (deletable) ? '' : 'disabled'; var thederName; if ($(el).find('.modal-tooltiptext').length > 0) { @@ -1132,36 +1032,20 @@ var RepositoryDatatable = (function(global) { thederName = el.innerText; } - var html = - '
  • ' + - '' + generateColumnNameTooltip(thederName) + - ' ' + - '' + - '' + - '' + - '' + - '' + - ' ' + - '' + - '' + - '
    • '; - dropdownList.append(html); + var listItem = dropdownList + .find('.repository-columns-list-template') + .clone(); + + listItem.attr('data-position', colIndex); + listItem.attr('data-id', $(el).attr('id')); + listItem.addClass(visLi); + listItem.removeClass('repository-columns-list-template hide'); + listItem.find('.text').text(generateColumnNameTooltip(thederName)); + listItem.find('.vis').addClass(visClass); + listItem.find('.vis') + .attr('title', $(TABLE_ID).data('columns-visibility-text')); + + dropdownList.append(listItem); } }); // Restore scroll position @@ -1218,7 +1102,7 @@ var RepositoryDatatable = (function(global) { function initSorting() { dropdownList.sortable({ - items: 'li:not(.add-new-column-form)', + items: 'li:not(.repository-columns-list-template)', cancel: '.new-repository-column', axis: 'y', update: function() { @@ -1235,256 +1119,6 @@ var RepositoryDatatable = (function(global) { }); } - function initEditColumns() { - function cancelEditMode() { - dropdownList.find('.text-edit').hide(); - dropdownList.find('.controls .ok,.cancel').hide(); - dropdownList.find('.text').css('display', ''); // show() doesn't work - dropdownList.find('.controls .vis,.edit,.del').css('display', ''); // show() doesn't work - } - - function editColumn(li) { - var id = li.attr('data-id'); - var text = li.find('.text'); - var textEdit = li.find('.text-edit'); - var newName = textEdit.val().trim(); - var url = li.attr('data-update-url'); - - $.ajax({ - url: url, - type: 'PUT', - data: {repository_column: {name: newName}}, - dataType: 'json', - success: function() { - dropdownList.sortable('enable'); - $(li).clearFormErrors(); - text.html(generateColumnNameTooltip(newName)); - $(TABLE.columns().header()).filter('#' + id) - .html(generateColumnNameTooltip(newName)); - originalHeader.find('#' + id).html(newName); - cancelEditMode(); - initHeaderTooltip(); - }, - error: function(xhr) { - dropdownList.sortable('disable'); - $(li).clearFormErrors(); - var msg = $.parseJSON(xhr.responseText); - - renderFormError(xhr, - $(li).find('.text-edit'), - Object.keys(msg)[0] + ' ' + msg.name.toString()); - var verticalHeight = $(li).offset().top; - dropdownList.scrollTo(verticalHeight, 0); - } - }); - } - - // On edit buttons click (bind onto master dropdown list) - dropdownList.on('click', '.edit:not(.disabled)', function(event) { - event.stopPropagation(); - - // Clear all input errors - _.each(dropdownList, function(el) { - $(el).clearFormErrors(); - }); - - cancelEditMode(); - - var li = $(this).closest('li'); - var url = li.attr('data-edit-url'); - ajaxCallEvent(); - - function ajaxCallEvent() { - $.ajax({ - url: url, - success: function() { - var text; - var textEdit; - var controls; - var controlsEdit; - text = li.find('.text'); - if ($(text).find('.modal-tooltiptext').length > 0) { - text = $(text).find('.modal-tooltiptext'); - } - textEdit = li.find('.text-edit'); - controls = li.find('.controls .vis,.edit,.del'); - controlsEdit = li.find('.controls .ok,.cancel'); - - // Toggle edit mode - li.addClass('editing'); - - // Set the text-edit's value - textEdit.val(text.text().trim()); - - // Toggle elements - text.hide(); - controls.hide(); - textEdit.css('display', ''); // show() doesn't work - controlsEdit.css('display', ''); // show() doesn't work - dropdownList.sortable('disable'); - dropdownList.on('click', function(ev) { - ev.stopPropagation(); - }); - // Focus input - textEdit.focus(); - }, - error: function(e) { - $(li).clearFormErrors(); - var msg = $.parseJSON(e.responseText); - - renderFormError(undefined, - $(li).find('.text-edit'), - msg.name.toString()); - var verticalHeight = $(li).offset().top; - dropdownList.scrollTo(verticalHeight, 0); - setTimeout(function() { - $(li).clearFormErrors(); - }, 5000); - } - }); - } - }); - - // On hiding dropdown, cancel edit mode throughout dropdown - dropdown.on('hidden.bs.dropdown', function() { - cancelEditMode(); - }); - - // On OK buttons click - dropdownList.on('click', '.ok', function(event) { - event.stopPropagation(); - dropdownList.sortable('enable'); - var self = $(this); - var li = self.closest('li'); - $(li).clearFormErrors(); - editColumn(li); - }); - - // On enter click while editing column text - dropdownList.on('keydown', 'input.text-edit', function(event) { - if (event.keyCode === 13) { - event.preventDefault(); - dropdownList.sortable('enable'); - var self = $(this); - var li = self.closest('li'); - $(li).clearFormErrors(); - editColumn(li); - } - }); - - // On cancel buttons click - dropdownList.on('click', '.cancel', function(event) { - event.stopPropagation(); - dropdownList.sortable('enable'); - var self = $(this); - var li = self.closest('li'); - $(li).clearFormErrors(); - li.removeClass('editing'); - - li.find('.text-edit').hide(); - li.find('.controls .ok,.cancel').hide(); - li.find('.text').css('display', ''); // show() doesn't work - li.find('.controls .vis,.edit,.del').css('display', ''); // show() doesn't work - }); - } - - function initDeleteColumns() { - var modal = $('#deleteRepositoryColumn'); - - dropdownList.on('click', '.del', function(event) { - event.stopPropagation(); - - var self = $(this); - var li = self.closest('li'); - var url = li.attr('data-destroy-html-url'); - var colIndex = originalHeader.find('#' + li.attr('data-id')).index(); - - $.ajax({ - url: url, - type: 'POST', - dataType: 'json', - data: {column_index: colIndex}, - success: function(data) { - var modalBody = modal.find('.modal-body'); - - // Inject the body's HTML into modal - modalBody.html(data.html); - - // Show the modal - modal.modal('show'); - }, - error: function(xhr) { - dropdownList.sortable('disable'); - $(li).clearFormErrors(); - var msg = $.parseJSON(xhr.responseText); - - renderFormError(undefined, - $(li).find('.text-edit'), - msg.name.toString()); - var verticalHeight = $(li).offset().top; - dropdownList.scrollTo(verticalHeight, 0); - setTimeout(function() { - $(li).clearFormErrors(); - }, 5000); - } - }); - }); - - modal.find('.modal-footer [data-action=delete]').on('click', function() { - var modalBody = modal.find('.modal-body'); - var form = modalBody.find('[data-role=destroy-repository-column-form]'); - var id = form.attr('data-id'); - - form - .on('ajax:success', function() { - // Preserve save/delete buttons as we need them after new table - // will be created - $('div.toolbarButtons').appendTo('div.repository-table'); - $('div.toolbarButtons').hide(); - - // Destroy datatable - TABLE.destroy(); - - // Subtract number of columns - $(TABLE_ID).data( - 'num-columns', - $(TABLE_ID).data('num-columns') - 1 - ); - - // Remove column from table (=table header) & rows - var th = originalHeader.find('#' + id); - var index = th.index(); - th.remove(); - $(TABLE_ID + ' tbody td:nth-child(' + (index + 1) + ')').remove(); - - // Remove all event handlers as we re-initialize them later with - // new table - $(TABLE_ID).off(); - $(TABLE_ID + ' thead').empty(); - $(TABLE_ID + ' thead').append(originalHeader); - - // Re-initialize datatable - TABLE = dataTableInit(); - loadColumnsNames(); - - // Hide modal - modal.modal('hide'); - }) - .on('ajax:error', function() { - // TODO - }); - - form.submit(); - }); - - modal.on('hidden.bs.modal', function() { - // Remove event handlers, clear contents - var modalBody = modal.find('.modal-body'); - modalBody.off(); - modalBody.html(''); - }); - } - // calculate the max height of window and adjust dropdown max-height function dropdownOverflow() { var windowHeight = $(window).height(); @@ -1510,11 +1144,8 @@ var RepositoryDatatable = (function(global) { TABLE.on('init.dt', function() { dropdown = $('#repository-columns-dropdown'); dropdownList = $('#repository-columns-list'); - initNewColumnForm(); initSorting(); toggleColumnVisibility(); - initEditColumns(); - initDeleteColumns(); }); $('#repository-columns-dropdown').on('show.bs.dropdown', function() { loadColumnsNames(); diff --git a/app/views/my_modules/repository.html.erb b/app/views/my_modules/repository.html.erb index 6b37f0095..a524cd49d 100644 --- a/app/views/my_modules/repository.html.erb +++ b/app/views/my_modules/repository.html.erb @@ -12,6 +12,10 @@ +
    + <%= render partial: "repositories/columns_reorder_dropdown" %> +
    + diff --git a/app/views/repositories/_repository.html.erb b/app/views/repositories/_repository.html.erb index 1db7cf18d..e9b36dd10 100644 --- a/app/views/repositories/_repository.html.erb +++ b/app/views/repositories/_repository.html.erb @@ -72,28 +72,7 @@
    - + <%= render partial: "columns_reorder_dropdown", formats: :html %>
    diff --git a/app/views/repositories/_repository_table.html.erb b/app/views/repositories/_repository_table.html.erb index a29c80082..85dfe7d57 100644 --- a/app/views/repositories/_repository_table.html.erb +++ b/app/views/repositories/_repository_table.html.erb @@ -20,13 +20,7 @@ <%= t("repositories.table.added_on") %> <%= t("repositories.table.added_by") %> <% repository.repository_columns.order(:id).each do |column| %> - - <%= 'data-deletable' if can_manage_repository_column?(column) %> - <%= "data-edit-url='#{edit_repository_repository_column_path(repository, column)}'" %> - <%= "data-update-url='#{repository_repository_column_path(repository, column)}'" %> - <%= "data-destroy-html-url='#{repository_columns_destroy_html_path(repository, column)}'" %> - > + <%= display_tooltip(column.name) %> <% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index b675d7f22..1e5490bca 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -944,6 +944,7 @@ en: column_new_text: "New column" column_create: "Create" columns_delete: "Delete" + columns_reorder: "Re-Order Columns" columns_visibility: "Visible columns" view_all_records: "View all items" view_assigned_records: "View assigned items"