[configuration] adds confirmation prompt when deleting a field. (aces…

…#7069)

Adds confirmation prompt when deleting a field in the configuration module.

Related issue aces#7010

.eslintrc.json

@@ -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",

modules/configuration/.gitignore

@@ -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

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');
+}

modules/configuration/test/TestPlan.md

@@ -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.

webpack.config.js

@@ -214,7 +214,7 @@ const config = [
     'CandidateParameters',
     'ConsentWidget',
   ]),
-  lorisModule('configuration', ['SubprojectRelations']),
+  lorisModule('configuration', ['SubprojectRelations', 'configuration_helper']),
   lorisModule('conflict_resolver', [
     'CandidateConflictsWidget',
     'conflictResolverIndex',