Skip to content

Commit 3bb0e49

Browse files
Nico-APNico-AP
committed
fix(ui): Fix beahviour of processing rule modals in the blueprint edit view.
1 parent e66ae0f commit 3bb0e49

File tree

2 files changed

+119
-66
lines changed

2 files changed

+119
-66
lines changed

‎ddm/datadonation/static/ddm_datadonation/js/blueprint-edit-ui-helpers.js

+118-65
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,174 @@
11
/**
2-
* Updates rule description in the form of a proper sentence.
2+
* Include rule description in the form of a proper sentence in the extraction rules table.
33
*/
4-
updateRuleDescription = function( id ) {
4+
function updateRuleDescription(id) {
55
const id_prefix = "id_processingrule_set-" + id + "-";
6-
const field = $("[id^=" + id_prefix + "field]").val();
7-
const operator = $("[id^=" + id_prefix + "comparison_operator]").val();
8-
const comp_value = $("[id^=" + id_prefix + "comparison_value]").val();
9-
const repl_value = $("[id^=" + id_prefix + "replacement_value]").val();
6+
const field = document.querySelector(`[id^="${id_prefix}field"]`)?.value;
7+
const operator = document.querySelector(`[id^="${id_prefix}comparison_operator"]`)?.value;
8+
const comp_value = document.querySelector(`[id^="${id_prefix}comparison_value"]`)?.value;
9+
const repl_value = document.querySelector(`[id^="${id_prefix}replacement_value"]`)?.value;
1010

1111
let msg = "";
12-
if ( field !== "" ) {
13-
if ( operator === "" && field !== "" ){
12+
if (field !== "") {
13+
if (operator === "" && field !== "") {
1414
msg = "Keep field '" + field + "' in uploaded data.";
15-
} else if ( operator === "regex-delete-match" ) {
15+
} else if (operator === "regex-delete-match") {
1616
msg = "Delete parts of '" + field + "' field that match the following regex expression: '" + comp_value + "'.";
17-
} else if ( operator === "regex-replace-match" ) {
17+
} else if (operator === "regex-replace-match") {
1818
msg = "Replace parts of '" + field + "' field that match the regex expression '" + comp_value + "' with '" + repl_value + "'.";
19-
} else if ( operator === "regex-delete-row" ) {
19+
} else if (operator === "regex-delete-row") {
2020
msg = "Delete entry if '" + field + "' field value matches the following regex expression: '" + comp_value + "'.";
2121
} else {
2222
msg = "Delete row if current value of field '" + field + "' " + operator + " '" + comp_value + "'.";
2323
}
24-
$("[id=step-description-" + id + "]").html(msg);
24+
25+
const descriptionElement = document.querySelector(`[id=step-description-${id}]`);
26+
if (descriptionElement) {
27+
descriptionElement.textContent = msg;
28+
}
2529
}
26-
};
2730

31+
}
2832

2933
/**
30-
* Updates the field value placeholders in the filter settings overview.
34+
* Updates the field value placeholders in the extraction rules table.
3135
*/
32-
updateFieldValue = function( id ) {
33-
$("#configuration-" + id).find("input").each(function() {
34-
if (!$(this).is("button")) {
35-
let fieldName = $(this).attr("id").split("-").pop();
36-
let targetId = "#" + fieldName + "-" + id;
37-
$( targetId ).html($(this).val());
36+
function updateRuleTable(id) {
37+
let container = document.getElementById("configuration-" + id);
38+
let inputs = container.querySelectorAll("input");
39+
40+
inputs.forEach(function(input) {
41+
if (input.type !== "button") {
42+
let fieldName = input.id.split("-").pop();
43+
let targetId = fieldName + "-" + id;
44+
let targetElement = document.getElementById(targetId);
45+
46+
if (targetElement) {
47+
targetElement.textContent = input.value;
48+
}
3849
}
3950
});
40-
};
4151

42-
hideErrorMessages = function(id) {
52+
updateRuleDescription(id);
53+
}
54+
55+
function hideErrorMessages(id) {
4356
const independentFields = ["execution_order", "name", "field"];
4457
for (let i = 0; i < independentFields.length; i++) {
45-
let curElement = $("#id_processingrule_set-" + id + "-" + independentFields[i]);
46-
curElement.siblings( ".form-error" ).hide();
58+
const curElement = document.getElementById(`id_processingrule_set-${id}-${independentFields[i]}`);
59+
if (curElement) {
60+
const errorElements = curElement.parentElement.querySelectorAll(".form-error");
61+
errorElements.forEach(function(errorElement) {
62+
errorElement.style.display = "none";
63+
});
64+
}
4765
}
4866
}
4967

50-
checkNoFieldsMissing = function( id ) {
68+
function checkNoFieldsMissing(id) {
5169
const independentFields = ["execution_order", "name", "field"];
5270

5371
for (let i = 0; i < independentFields.length; i++) {
54-
let val = $("[id$=" + id + "-" + independentFields[i] + "]").val();
72+
const fieldElement = document.querySelector(`[id$="${id}-${independentFields[i]}"]`);
73+
const val = fieldElement ? fieldElement.value : "";
5574

5675
if (val === "") {
57-
let curElement = $("#id_processingrule_set-" + id + "-" + independentFields[i]);
58-
curElement.siblings( ".form-error" ).show();
59-
return(false);
76+
const curElement = document.getElementById(`id_processingrule_set-${id}-${independentFields[i]}`);
77+
if (curElement) {
78+
const errorElements = curElement.parentElement.querySelectorAll(".form-error");
79+
errorElements.forEach(function (errorElement) {
80+
errorElement.style.display = "block";
81+
});
82+
}
83+
return false;
6084
}
6185
}
6286

63-
let comparisonOperator = $("#id_processingrule_set-" + id + "-comparison_operator");
64-
if (comparisonOperator.val() !== "") {
65-
let comparisonValue = $("#id_processingrule_set-" + id + "-comparison_value").val();
66-
if (comparisonValue === "") {
67-
let curElement = $("#id_processingrule_set-" + id + "-comparison_value");
68-
curElement.siblings( ".form-error" ).show();
69-
return(false);
87+
const comparisonOperator = document.getElementById(`id_processingrule_set-${id}-comparison_operator`);
88+
if (comparisonOperator && comparisonOperator.value !== "") {
89+
const comparisonValue = document.getElementById(`id_processingrule_set-${id}-comparison_value`);
90+
if (comparisonValue && comparisonValue.value === "") {
91+
const errorElements = comparisonValue.parentElement.querySelectorAll(".form-error");
92+
errorElements.forEach(function (errorElement) {
93+
errorElement.style.display = "block";
94+
});
95+
return false;
7096
}
7197
}
72-
return(true);
98+
99+
return true;
73100
}
74101

75-
closeModal = function(id) {
76-
let modal = $("#configuration-" + id);
77-
modal.hide();
78-
$("body").removeClass("modal-open").removeAttr("style");
79-
$(".modal-backdrop").remove();
102+
function closeModal(id) {
103+
const modal = document.getElementById(`configuration-${id}`);
104+
if (modal) {
105+
modal.style.display = "none";
106+
}
107+
108+
const body = document.body;
109+
body.classList.remove("modal-open");
110+
body.removeAttribute("style");
111+
112+
const modalBackdrop = document.querySelectorAll(".modal-backdrop");
113+
modalBackdrop.forEach(function (backdrop) {
114+
backdrop.remove();
115+
});
80116
}
81117

82118
/**
83119
* On OK-click in modal, update filter settings overview.
84120
*/
85-
$( "body" ).on("click", "button[class*='ddm-modal-ok']", function() {
86-
const current_id = $(this).attr("id").match(/\d+/)[0];
87-
hideErrorMessages(current_id);
88-
if (checkNoFieldsMissing(current_id)) {
89-
updateRuleDescription(current_id);
90-
updateFieldValue(current_id);
91-
closeModal(current_id);
121+
document.body.addEventListener("click", function (event) {
122+
if (event.target.tagName === "BUTTON" && event.target.className.includes("ddm-modal-ok")) {
123+
const current_id = event.target.id.match(/\d+/)[0];
124+
hideErrorMessages(current_id);
125+
if (checkNoFieldsMissing(current_id)) {
126+
updateRuleTable(current_id);
127+
closeModal(current_id);
128+
}
92129
}
93130
});
94131

95-
$( "body" ).on("click", "button[class*='ddm-modal-cancel']", function() {
96-
const current_id = $(this).attr("id").match(/\d+/)[0];
97-
let e = $("#execution_order-" + current_id);
98132

99-
if ($.trim(e.text()) === 'None') {
100-
$("#configuration-" + current_id).remove();
101-
$('#inlineform-table tr:last').remove();
133+
document.body.addEventListener("click", function (event) {
134+
if (event.target.tagName === "BUTTON" && event.target.className.includes("ddm-modal-cancel")) {
135+
const current_id = event.target.id.match(/\d+/)[0];
136+
const e = document.getElementById(`execution_order-${current_id}`);
137+
138+
if (e && e.textContent.trim() === "None") {
139+
const configurationElement = document.getElementById(`configuration-${current_id}`);
140+
if (configurationElement) {
141+
configurationElement.remove();
142+
}
143+
144+
const lastRow = document.querySelector("#inlineform-table tr:last-child");
145+
if (lastRow) {
146+
lastRow.remove();
147+
}
102148

103-
let totalFormElement = $("#id_processingrule_set-TOTAL_FORMS");
104-
let currentFormN = totalFormElement.val();
105-
totalFormElement.val(parseInt(currentFormN) - 1);
149+
const totalFormElement = document.getElementById("id_processingrule_set-TOTAL_FORMS");
150+
if (totalFormElement) {
151+
const currentFormN = parseInt(totalFormElement.value, 10);
152+
totalFormElement.value = currentFormN - 1;
153+
}
154+
}
155+
closeModal(current_id);
106156
}
107-
closeModal(current_id);
108157
});
109158

110159

111-
$(document).ready(function() {
112-
let IDs = new Set();
113-
$("[id^=id_processingrule_set-]").each(function() {
114-
if( /\d+/.test($( this ).attr("id")) ) {
115-
IDs.add($( this ).attr("id").match(/\d+/)[0]);
160+
document.addEventListener("DOMContentLoaded", function () {
161+
const IDs = new Set();
162+
const elements = document.querySelectorAll("[id^=id_processingrule_set-]");
163+
164+
elements.forEach(function (element) {
165+
const idMatch = element.id.match(/\d+/);
166+
if (idMatch) {
167+
IDs.add(idMatch[0]);
116168
}
117169
});
118-
for ( const id of IDs ) {
170+
171+
for (const id of IDs) {
119172
updateRuleDescription(id);
120173
}
121174
});

‎ddm/datadonation/templates/ddm_datadonation/blueprint/block_data_extraction.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
<p><b>Available extraction operators</b></p>
2121

22-
<table id="inlineform-table" class="table table-borderless fs-08">
22+
<table id="extraction-info-table" class="table table-borderless fs-08">
2323
<tr class="border-bottom">
2424
<th>Extraction Operator</th>
2525
<th>Description</th>

0 commit comments

Comments
 (0)