diff --git a/ddm/datadonation/static/ddm_datadonation/js/blueprint-edit-ui-helpers.js b/ddm/datadonation/static/ddm_datadonation/js/blueprint-edit-ui-helpers.js index e7b31c48..bfc8d2c0 100644 --- a/ddm/datadonation/static/ddm_datadonation/js/blueprint-edit-ui-helpers.js +++ b/ddm/datadonation/static/ddm_datadonation/js/blueprint-edit-ui-helpers.js @@ -1,121 +1,174 @@ /** - * Updates rule description in the form of a proper sentence. + * Include rule description in the form of a proper sentence in the extraction rules table. */ -updateRuleDescription = function( id ) { +function updateRuleDescription(id) { const id_prefix = "id_processingrule_set-" + id + "-"; - const field = $("[id^=" + id_prefix + "field]").val(); - const operator = $("[id^=" + id_prefix + "comparison_operator]").val(); - const comp_value = $("[id^=" + id_prefix + "comparison_value]").val(); - const repl_value = $("[id^=" + id_prefix + "replacement_value]").val(); + const field = document.querySelector(`[id^="${id_prefix}field"]`)?.value; + const operator = document.querySelector(`[id^="${id_prefix}comparison_operator"]`)?.value; + const comp_value = document.querySelector(`[id^="${id_prefix}comparison_value"]`)?.value; + const repl_value = document.querySelector(`[id^="${id_prefix}replacement_value"]`)?.value; let msg = ""; - if ( field !== "" ) { - if ( operator === "" && field !== "" ){ + if (field !== "") { + if (operator === "" && field !== "") { msg = "Keep field '" + field + "' in uploaded data."; - } else if ( operator === "regex-delete-match" ) { + } else if (operator === "regex-delete-match") { msg = "Delete parts of '" + field + "' field that match the following regex expression: '" + comp_value + "'."; - } else if ( operator === "regex-replace-match" ) { + } else if (operator === "regex-replace-match") { msg = "Replace parts of '" + field + "' field that match the regex expression '" + comp_value + "' with '" + repl_value + "'."; - } else if ( operator === "regex-delete-row" ) { + } else if (operator === "regex-delete-row") { msg = "Delete entry if '" + field + "' field value matches the following regex expression: '" + comp_value + "'."; } else { msg = "Delete row if current value of field '" + field + "' " + operator + " '" + comp_value + "'."; } - $("[id=step-description-" + id + "]").html(msg); + + const descriptionElement = document.querySelector(`[id=step-description-${id}]`); + if (descriptionElement) { + descriptionElement.textContent = msg; + } } -}; +} /** - * Updates the field value placeholders in the filter settings overview. + * Updates the field value placeholders in the extraction rules table. */ -updateFieldValue = function( id ) { - $("#configuration-" + id).find("input").each(function() { - if (!$(this).is("button")) { - let fieldName = $(this).attr("id").split("-").pop(); - let targetId = "#" + fieldName + "-" + id; - $( targetId ).html($(this).val()); +function updateRuleTable(id) { + let container = document.getElementById("configuration-" + id); + let inputs = container.querySelectorAll("input"); + + inputs.forEach(function(input) { + if (input.type !== "button") { + let fieldName = input.id.split("-").pop(); + let targetId = fieldName + "-" + id; + let targetElement = document.getElementById(targetId); + + if (targetElement) { + targetElement.textContent = input.value; + } } }); -}; -hideErrorMessages = function(id) { + updateRuleDescription(id); +} + +function hideErrorMessages(id) { const independentFields = ["execution_order", "name", "field"]; for (let i = 0; i < independentFields.length; i++) { - let curElement = $("#id_processingrule_set-" + id + "-" + independentFields[i]); - curElement.siblings( ".form-error" ).hide(); + const curElement = document.getElementById(`id_processingrule_set-${id}-${independentFields[i]}`); + if (curElement) { + const errorElements = curElement.parentElement.querySelectorAll(".form-error"); + errorElements.forEach(function(errorElement) { + errorElement.style.display = "none"; + }); + } } } -checkNoFieldsMissing = function( id ) { +function checkNoFieldsMissing(id) { const independentFields = ["execution_order", "name", "field"]; for (let i = 0; i < independentFields.length; i++) { - let val = $("[id$=" + id + "-" + independentFields[i] + "]").val(); + const fieldElement = document.querySelector(`[id$="${id}-${independentFields[i]}"]`); + const val = fieldElement ? fieldElement.value : ""; if (val === "") { - let curElement = $("#id_processingrule_set-" + id + "-" + independentFields[i]); - curElement.siblings( ".form-error" ).show(); - return(false); + const curElement = document.getElementById(`id_processingrule_set-${id}-${independentFields[i]}`); + if (curElement) { + const errorElements = curElement.parentElement.querySelectorAll(".form-error"); + errorElements.forEach(function (errorElement) { + errorElement.style.display = "block"; + }); + } + return false; } } - let comparisonOperator = $("#id_processingrule_set-" + id + "-comparison_operator"); - if (comparisonOperator.val() !== "") { - let comparisonValue = $("#id_processingrule_set-" + id + "-comparison_value").val(); - if (comparisonValue === "") { - let curElement = $("#id_processingrule_set-" + id + "-comparison_value"); - curElement.siblings( ".form-error" ).show(); - return(false); + const comparisonOperator = document.getElementById(`id_processingrule_set-${id}-comparison_operator`); + if (comparisonOperator && comparisonOperator.value !== "") { + const comparisonValue = document.getElementById(`id_processingrule_set-${id}-comparison_value`); + if (comparisonValue && comparisonValue.value === "") { + const errorElements = comparisonValue.parentElement.querySelectorAll(".form-error"); + errorElements.forEach(function (errorElement) { + errorElement.style.display = "block"; + }); + return false; } } - return(true); + + return true; } -closeModal = function(id) { - let modal = $("#configuration-" + id); - modal.hide(); - $("body").removeClass("modal-open").removeAttr("style"); - $(".modal-backdrop").remove(); +function closeModal(id) { + const modal = document.getElementById(`configuration-${id}`); + if (modal) { + modal.style.display = "none"; + } + + const body = document.body; + body.classList.remove("modal-open"); + body.removeAttribute("style"); + + const modalBackdrop = document.querySelectorAll(".modal-backdrop"); + modalBackdrop.forEach(function (backdrop) { + backdrop.remove(); + }); } /** * On OK-click in modal, update filter settings overview. */ -$( "body" ).on("click", "button[class*='ddm-modal-ok']", function() { - const current_id = $(this).attr("id").match(/\d+/)[0]; - hideErrorMessages(current_id); - if (checkNoFieldsMissing(current_id)) { - updateRuleDescription(current_id); - updateFieldValue(current_id); - closeModal(current_id); +document.body.addEventListener("click", function (event) { + if (event.target.tagName === "BUTTON" && event.target.className.includes("ddm-modal-ok")) { + const current_id = event.target.id.match(/\d+/)[0]; + hideErrorMessages(current_id); + if (checkNoFieldsMissing(current_id)) { + updateRuleTable(current_id); + closeModal(current_id); + } } }); -$( "body" ).on("click", "button[class*='ddm-modal-cancel']", function() { - const current_id = $(this).attr("id").match(/\d+/)[0]; - let e = $("#execution_order-" + current_id); - if ($.trim(e.text()) === 'None') { - $("#configuration-" + current_id).remove(); - $('#inlineform-table tr:last').remove(); +document.body.addEventListener("click", function (event) { + if (event.target.tagName === "BUTTON" && event.target.className.includes("ddm-modal-cancel")) { + const current_id = event.target.id.match(/\d+/)[0]; + const e = document.getElementById(`execution_order-${current_id}`); + + if (e && e.textContent.trim() === "None") { + const configurationElement = document.getElementById(`configuration-${current_id}`); + if (configurationElement) { + configurationElement.remove(); + } + + const lastRow = document.querySelector("#inlineform-table tr:last-child"); + if (lastRow) { + lastRow.remove(); + } - let totalFormElement = $("#id_processingrule_set-TOTAL_FORMS"); - let currentFormN = totalFormElement.val(); - totalFormElement.val(parseInt(currentFormN) - 1); + const totalFormElement = document.getElementById("id_processingrule_set-TOTAL_FORMS"); + if (totalFormElement) { + const currentFormN = parseInt(totalFormElement.value, 10); + totalFormElement.value = currentFormN - 1; + } + } + closeModal(current_id); } - closeModal(current_id); }); -$(document).ready(function() { - let IDs = new Set(); - $("[id^=id_processingrule_set-]").each(function() { - if( /\d+/.test($( this ).attr("id")) ) { - IDs.add($( this ).attr("id").match(/\d+/)[0]); +document.addEventListener("DOMContentLoaded", function () { + const IDs = new Set(); + const elements = document.querySelectorAll("[id^=id_processingrule_set-]"); + + elements.forEach(function (element) { + const idMatch = element.id.match(/\d+/); + if (idMatch) { + IDs.add(idMatch[0]); } }); - for ( const id of IDs ) { + + for (const id of IDs) { updateRuleDescription(id); } }); diff --git a/ddm/datadonation/templates/ddm_datadonation/blueprint/block_data_extraction.html b/ddm/datadonation/templates/ddm_datadonation/blueprint/block_data_extraction.html index 99a728a3..34fadbdf 100644 --- a/ddm/datadonation/templates/ddm_datadonation/blueprint/block_data_extraction.html +++ b/ddm/datadonation/templates/ddm_datadonation/blueprint/block_data_extraction.html @@ -19,7 +19,7 @@ <p><b>Available extraction operators</b></p> -<table id="inlineform-table" class="table table-borderless fs-08"> +<table id="extraction-info-table" class="table table-borderless fs-08"> <tr class="border-bottom"> <th>Extraction Operator</th> <th>Description</th>