From eb03d5bd18810c4a36909cd49e5090c8438686db Mon Sep 17 00:00:00 2001 From: David Watson <14983002+watson8@users.noreply.github.com> Date: Tue, 15 Oct 2024 09:57:21 +0100 Subject: [PATCH] CTP-3783 avoid clone table --- datatables/js/datatables.js | 126 ++++++------------ ...dit_feedback_within_specified_time.feature | 27 ++-- 2 files changed, 58 insertions(+), 95 deletions(-) diff --git a/datatables/js/datatables.js b/datatables/js/datatables.js index 01e7cbf3..9032fe66 100644 --- a/datatables/js/datatables.js +++ b/datatables/js/datatables.js @@ -1,20 +1,11 @@ var table_obj_list = []; var id = 0; -var array_button_grade = []; var is_responsive = false; -var form_plagiarism_alert_change = false; -var form_moderation_agreement_change = false; -var fullload = false; -var display_suspended_gbl = 0; var tableobject = 0; $( document ).ready(function() { - - - var langmessage = JSON.parse($('#element_lang_messages').attr('data-lang')); - - var base_url = window.location.origin + '/mod/coursework/datatables/js/'; + var base_url = window.location.origin + '/mod/coursework/datatables/js/'; require.config({ paths: { @@ -24,7 +15,7 @@ $( document ).ready(function() { 'datatables.buttons': base_url + 'datatables.buttons', 'datatables.select': base_url + 'datatables.select', 'datatables.responsive': base_url + 'datatables.responsive.min', - 'jquery-mousewheel': base_url +'jquery.mousewheel', + 'jquery-mousewheel': base_url + 'jquery.mousewheel', 'datetimepicker': base_url + 'jquery.datetimepicker', } @@ -41,22 +32,22 @@ $( document ).ready(function() { }; $.fn.dataTable.Api.register('row().show()', function() { var page_info = this.table().page.info(); - // Get row index + // Get row index. var new_row_index = this.index(); - // Row position + // Row position. var row_position = this.table() .rows({ search: 'applied' })[0] .indexOf(new_row_index); // Already on right page ? if ((row_position >= page_info.start && row_position < page_info.end) || row_position < 0) { - // Return row object + // Return row object. return this; } - // Find page number + // Find page number. var page_to_display = Math.floor(row_position / this.table().page.len()); - // Go to that page + // Go to that page. this.table().page(page_to_display); - // Return row object + // Return row object. return this; }); require(['jquery', 'datatables.searchpanes'], function($) { @@ -89,12 +80,9 @@ $( document ).ready(function() { var wrapperelement = tableelement.parent('.dataTables_wrapper'); var paginationelement = wrapperelement.find('.dataTables_paginate'); tableobject = table_obj_list[tableid]; + var submissionswrapper = tableelement.parent('.dataTables_wrapper'); - var submissionswrapper = tableelement.parent('.dataTables_wrapper'); - - - - // hide buttons + // Hide buttons. wrapperelement.find('.dataTables_paginate, .dataTables_info, .dataTables_length, .dataTables_filter').css('visibility', 'hidden'); wrapperelement.find('thead, .dt-button').each(function() { var me = $(this); @@ -109,7 +97,7 @@ $( document ).ready(function() { $('
' + langmessage.loadingpagination + '
').insertAfter(paginationelement); $('').insertBefore(wrapperelement.find('.dt-button > span')); - // prepare params for ajax request + // Prepare params for ajax request. var params = { group: tableelement.attr('group'), perpage: tableelement.attr('perpage'), @@ -131,11 +119,9 @@ $( document ).ready(function() { console.log('test remove 1'); $("#datatable_top_loading_message").remove(); tableobject.rows.add($(response)).draw(false); - // move_to_page_initial(tableid); wrapperelement.find('.submission-loading').remove(); - // tableobject.searchPanes.rebuildPane(); // => comment out this line in case of removing the filter button with its searchpane }).fail(function() {}).always(function() { - // show buttons + // Show buttons. wrapperelement.find('.pagination-loading').remove(); wrapperelement.find('.submission-loading').remove(); wrapperelement.find('thead, .dt-button').css('pointer-events', 'auto'); @@ -144,18 +130,15 @@ $( document ).ready(function() { } function initDatatable(is_responsive) { - $(".datatabletest").each(function () { - - //class that determines whether all data for the databale has been full loaded + // Class that determines whether all data for the databale has been full loaded. var fullloaded = $(this).hasClass('full-loaded'); - - var table = $(this).DataTable( { + $(this).DataTable({ 'order': [], stateSave: true, language: { searchPanes: { - collapse: {0: $('#search_pane_button').val() || 'Filter', _:($('#search_pane_button').val() || 'Filter')+' (%d)'} + collapse: {0: $('#search_pane_button').val() || 'Filter', _:($('#search_pane_button').val() || 'Filter') + ' (%d)'} } }, buttons:[ @@ -164,16 +147,12 @@ $( document ).ready(function() { dom: 'Blfrtip', columnDefs:[ { - searchPanes:{ - show: false - }, + searchPanes:{show: false}, targets: ['studentname','addition-multiple-button'], bSortable: false }, { - searchPanes: { - show: false - }, + searchPanes: {show: false}, targets: ['lastname_cell','firstname_cell','tableheadpersonaldeadline', 'tableheaddate', 'tableheadfilename', 'tableheadplagiarismalert', 'plagiarism', 'agreedgrade', 'feedbackandgrading', 'provisionalgrade', 'tableheadmoderationagreement'] }, { @@ -222,26 +201,11 @@ $( document ).ready(function() { if (!fullloaded) { background_load_table($(this).attr('id')); } - - - - }); - - } - - function move_to_page_initial(table_id) { - var key = 'datatable_navigate_' + window.location.href + table_id; - var id = localStorage.getItem(key); - if (id) { - table_obj_list[table_id].row('#' + id).show().draw(false); - } - // clear id - localStorage.removeItem(key); } if(isMobileDevice() && $(window).width() < 768) { - // For small screens + // For small screens. var table = $('.datatabletest tbody').on('click', 'td.details-control', function () { var tr = $(this).closest("tr"); var row_id = tr.attr('id').replace('allocatable_', ''); @@ -251,18 +215,19 @@ $( document ).ready(function() { $(tr).next('tr.row_assessors').remove(); } else { - $(''+ - '' + $('#' + table_id).clone().html() + '
' + - '').insertAfter($(tr)); + // As originally written this code created a new table with duplicate IDs. + // See comment on CTP-3783 below for more info. + const oldTable = $('#' + table_id); + const newRow = $( + '' + ); + oldTable.addClass('assessors_expanded').css('width', '95%').appendTo(newRow.find('td')); } - $(tr).toggleClass('shown'); - // $("#" + table_id).toggleClass('tbl_assessor_shown'); - // $("#" + table_id).DataTable({ 'dom': '', 'responsive': true }); }); } else { - // Add event listener for opening and closing details + // Add event listener for opening and closing details. $('.datatabletest tbody').on('click', 'td.details-control', function () { console.log('clicking button'); var tr = $(this).closest("tr"); @@ -273,21 +238,24 @@ $( document ).ready(function() { var row_id = tr.attr('id').replace('allocatable_', ''); var table_id = 'assessorfeedbacktable_' + row_id; - - if ($('#' + table_id).length > 0) { + const oldTable = $('#' + table_id); + if (oldTable.length) { if ( row.child.isShown() ) { - // This row is already open - close it + // This row is already open - close it. row.child.hide(); tr.removeClass('shown'); } else { - // Open this row - // row.child( format(row.data()) ).show(); - row.child($( - ''+ - '' + - '
' + $('#' + table_id).clone().html() + '
' - )).show(); + // Open this row. + // CTP-3783 As originally written this code cloned the old table and added its HTML again to the new row. + // This meant that we had 2 x tables do duplicate IDs, with the old table hidden and new one visible. + // The multiple behat tests failed when trying to click the hidden feedback button not visible one. + const newRow = $( + '' + ); + oldTable.addClass('assessors_expanded').css('width', '95%').appendTo(newRow.find('td')); + oldTable.show(); + row.child(newRow).show(); tr.addClass('shown'); } } @@ -295,7 +263,6 @@ $( document ).ready(function() { }); } - $('.datatabletest').on('click', '.splitter-firstname, .splitter-lastname, .splitter-email', function (event) { event.preventDefault(); var node = $(event.target), @@ -305,33 +272,20 @@ $( document ).ready(function() { currentsort = 'desc'; sortby = 'asc'; } - - //node.closest('#example').DataTable() - // .order( [ sortColumn, sortby ] ) - // .draw(); var table_id = $(this).closest('.datatabletest').attr('id'); table = table_obj_list[table_id]; var headerclass = $(this).hasClass('splitter-firstname') ? 'firstname_cell' : 'lastname_cell'; headerclass = $(this).hasClass('splitter-email') ? 'email_cell' : headerclass; console.log(headerclass); var sortColumn = table.column('.' + headerclass).index(); -console.log(sortColumn); - console.log(sortby); - console.log(table); table.order([sortColumn, sortby]).draw(); node.addClass('sorting_' + sortby).removeClass('sorting sorting_' + currentsort); node.parent().removeClass('sorting sorting_asc sorting_desc'); node.siblings().removeClass('sorting_asc sorting_desc').addClass('sorting'); }); - - }); - function isMobileDevice() { - if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { - return true; - } - return false; + return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)); } diff --git a/tests/behat/feedback_edit_feedback_within_specified_time.feature b/tests/behat/feedback_edit_feedback_within_specified_time.feature index a797184a..8e51f92f 100644 --- a/tests/behat/feedback_edit_feedback_within_specified_time.feature +++ b/tests/behat/feedback_edit_feedback_within_specified_time.feature @@ -1,4 +1,4 @@ -@mod @mod_coursework +@mod @mod_coursework @mod_coursework_feedback_edit_specified_time Feature: Allow markers to edit their marking but only during specific marking stages As an initial marker @@ -17,10 +17,13 @@ Feature: Allow markers to edit their marking but only during specific marking st And the student has a submission And the submission is finalised + @javascript Scenario: Edit own initial feedback before delayed time Given there are feedbacks from both teachers And I log in as the teacher And I visit the coursework page + And I expand the coursework grading row +# todo This is a problem because JS is duplicating the table so we get multiple rows e.g. for #edit_feedback_212000 Then I should see the edit feedback button for the teacher's feedback @javascript @@ -29,20 +32,25 @@ Feature: Allow markers to edit their marking but only during specific marking st And I wait "35" seconds And I log in as the teacher And I visit the coursework page + And I expand the coursework grading row Then I should not see the edit feedback button for the teacher's feedback + @javascript Scenario: Automatic agreement before delayed time Given the coursework "automaticagreementstrategy" setting is "percentage_distance" in the database And the coursework "automaticagreementrange" setting is "10" in the database And I am logged in as a teacher And I visit the coursework page - And I click on the new feedback button for assessor 1 - And I grade the submission as 67 without comments using the simple form + And I expand the coursework grading row + And I click on the only interactable link with title "New feedback" + And I grade the submission as 67 using the ajax form And I log out + And I log in as the other teacher And I visit the coursework page - And I click on the new feedback button for assessor 2 - And I grade the submission as 63 without comments using the simple form + And I expand the coursework grading row + And I click on the only interactable link with title "New feedback" + And I grade the submission as 63 using the ajax form And I visit the coursework page Then I should not see the final grade on the multiple marker page @@ -52,13 +60,14 @@ Feature: Allow markers to edit their marking but only during specific marking st And the coursework "automaticagreementrange" setting is "10" in the database And I am logged in as a teacher And I visit the coursework page - And I click on the new feedback button for assessor 1 - And I grade the submission as 67 without comments using the simple form + And I click on the only interactable link with title "New feedback" + And I grade the submission as 67 using the ajax form And I log out + And I log in as the other teacher And I visit the coursework page - And I click on the new feedback button for assessor 2 - And I grade the submission as 63 without comments using the simple form + And I click on the only interactable link with title "New feedback" + And I grade the submission as 63 using the ajax form And I wait "50" seconds And I visit the coursework page Then I should see the final grade as 67 on the multiple marker page