Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[configuration] adds confirmation prompt when deleting a field. (#7069)
Adds confirmation prompt when deleting a field in the configuration module.

Related issue #7010
  • Loading branch information
racostas committed Sep 24, 2021
1 parent 923235f commit 8de5079
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 119 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Expand Up @@ -150,7 +150,8 @@
"modules/candidate_parameters/**",
"modules/bvl_feedback/**",
"modules/dataquery/**",
"modules/dqt/**"
"modules/dqt/**",
"modules/configuration/jsx/configuration_helper.js"
],
"rules": {
"no-jquery/no-other-utils": "warn",
Expand Down
1 change: 1 addition & 0 deletions modules/configuration/.gitignore
Expand Up @@ -2,3 +2,4 @@
# in this directory which need to be migrated before
# we can just ignore the whole directory.
js/SubprojectRelations.js
js/configuration_helper.js
115 changes: 0 additions & 115 deletions modules/configuration/js/configuration_helper.js

This file was deleted.

154 changes: 154 additions & 0 deletions modules/configuration/jsx/configuration_helper.js
@@ -0,0 +1,154 @@
import swal from 'sweetalert2';

$(function() {
'use strict';

$('div').tooltip();

let count = 0;
$('.add').click(function(e) {
e.preventDefault();

count = count + 1;

// Field that will be copied
let currentField = $(this).parent().find('.entry:first-child');

let id = $(currentField).parent().attr('id');
let name = 'add-' + id + '-' + count;

// Setup the new form field
let newField = currentField.clone();
newField.find('.form-control').attr('name', name);
$(newField).find('.btn-remove')
.addClass('remove-new')
.removeClass('btn-remove');
resetForm(newField);

newField.appendTo($(this).parent().children(':first'));
});

$('body').on('click', '.remove-new', function() {
if ($(this).parent().parent().parent().children().length > 1) {
$(this).parent().parent().remove();
} else {
resetForm($(this).parent().parent());
}
});

$('.btn-remove').click(function(e) {
e.preventDefault();

let options = $(this).parent().parent().children().prop('options');
let selectedIndex = $(this)
.parent().parent().children()
.prop('selectedIndex');
let selectedOption = options[selectedIndex].text;
let fieldName = $(this)
.parent().parent().parent().parent().parent().children()
.attr('data-original-title');

swal.fire({
text: 'Please confirm you want to delete the option "' +
selectedOption
+ '" of the field "' + fieldName + '".',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel',
}).then((result) => {
if (result.value) {
let id = $(this).attr('name');
let button = this;

$.ajax({
type: 'post',
url: loris.BaseURL + '/configuration/ajax/process.php',
data: {remove: id},
success: function() {
if ($(button)
.parent().parent().parent().children()
.length > 1
) {
$(button).parent().parent().remove();
} else {
let parentID = $(button)
.parent().parent().parent()
.attr('id');
let name = 'add-' + parentID;

resetForm($(button).parent().parent());
$(button)
.parent().parent().children('.form-control')
.attr('name', name);
$(button)
.addClass('remove-new')
.removeClass('btn-remove');
}
},
error: function(xhr, desc, err) {
console.error(xhr);
console.error('Details: ' + desc + '\nError:' + err);
},
});
}
});
});

// On form submit, process the changes through an AJAX call
$('form').on('submit', function(e) {
e.preventDefault();

let form = $(this).serialize();

// Clear previous feedback
$('.submit-area > label').remove();

$.ajax({
type: 'post',
url: loris.BaseURL + '/configuration/ajax/process.php',
data: form,
success: function() {
let html = '<label>Submitted</label>';
$(html)
.hide()
.appendTo('.submit-area')
.fadeIn(500).delay(1000).fadeOut(500);
location.reload();
},
error: function(xhr, desc, err) {
let html = '<label>' + xhr.responseText + '</label>';
$(html).hide().appendTo('.submit-area').fadeIn(500).delay(1000);
},
});
});

// On form reset, to delete the elements added with the "Add field" button that were not submitted.
$('form').on('reset', function(e) {
$('.tab-pane.active').find('select[name^="add-"]').parent().remove();
});
});

/*
function validate(form) {
// age
// year
// email - this should be done already
// not same instrument twice
}
*/

/**
* Reset form
*
* @param {Element} form A DOM form element
*/
function resetForm(form) {
'use strict';

$(form).find(
'input:text, input:password, input:file, select, textarea'
).val('');
$(form).find('input:radio, input:checkbox')
.removeAttr('checked').removeAttr('selected');
}
6 changes: 4 additions & 2 deletions modules/configuration/test/TestPlan.md
Expand Up @@ -31,8 +31,10 @@ For each of these fields:
- try clicking the "Add field" button to see that this adds a new field to enter
data. Enter data and press save at the bottom of the page. Refresh the page, check
that the data saved
- try deleting a field with the 'X' button. Press save at the bottom of the page.
Refresh the page and check that the field was in fact deleted
- try deleting a field with the 'X' button. A dialog box should ask for confirmation.
Try canceling and accepting the delete action.
Refresh the page and check that the field was in fact deleted if the action was confirmed.
Check that if the field is empty, the dialog box is not displayed when trying to delete the empty field.
[Manual Test]
7. Check that by setting 'Sandbox' in the config.xml to 1, the config tag names
appear in grey below their labels.
Expand Down
2 changes: 1 addition & 1 deletion webpack.config.js
Expand Up @@ -214,7 +214,7 @@ const config = [
'CandidateParameters',
'ConsentWidget',
]),
lorisModule('configuration', ['SubprojectRelations']),
lorisModule('configuration', ['SubprojectRelations', 'configuration_helper']),
lorisModule('conflict_resolver', [
'CandidateConflictsWidget',
'conflictResolverIndex',
Expand Down

0 comments on commit 8de5079

Please sign in to comment.