Skip to content

Commit

Permalink
Update formsets.js
Browse files Browse the repository at this point in the history 
Fix formsets
  • Loading branch information
@B-Alica
B-Alica authored Dec 5, 2023
1 parent ddc3bf3 commit a168c22
Showing 1 changed file with 50 additions and 50 deletions.
100 changes: 50 additions & 50 deletions dsfr/static/js/formsets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ let container = document.querySelector(".formset-group"); // The formset contai
let addButton = document.querySelector("#add-form"); // Button to add a new form
let totalForms = document.querySelector('[id$="-TOTAL_FORMS"]'); // Total number of forms in formset.management

// Hide the checkbox "Supprimer" since we use a button "Supprimer cet élément"
try {
let checkbox_remove = document.querySelector('[id$="-DELETE"]'); // Checkbox to remove the formset, not used because replaced with a deleting link
if ( typeof checkbox_remove !== "undefined" ) {
let div_remove = checkbox_remove.parentElement.parentElement;
div_remove.remove();
}
let checkbox_remove = document.querySelector('[id$="-DELETE"]');
if ( typeof checkbox_remove !== "undefined" ) {
let div_remove = checkbox_remove.parentElement.parentElement;
div_remove.remove();
}
}
catch (error) {}

Expand All @@ -19,67 +20,66 @@ let firstForm = formsetGroup[0].cloneNode(true); // Clone the formset
addButton.addEventListener('click', addForm);

function addForm(e) {
// Add a form to the formset
// Add a form to the formset

e.preventDefault();

let newForm
if (formsetGroup[0]){
newForm = formsetGroup[0].cloneNode(true); // Clone the formset
} else {
newForm = firstForm; // If all other forms have been deleted
}
let newForm;
if (formsetGroup[0]){
newForm = formsetGroup[0].cloneNode(true); // Clone the formset
} else {
newForm = firstForm; // If all other forms have been deleted
}

// Regex
// Regex
let formRegex = /\w+-(\d+)-/g; // Regex to find all instances of the form number
let idRemoveFormRegex = /remove-(\d+)/g; // Regex to find all instances of the form number on remove link
let idRemoveFunctionRegex = /removeFormset\((\d+)\)/g; // Regex to find all instances of the form number on remove function in link
let idRemoveFormRegex = /remove-(\d+)/g; // Regex to find all instances of the form number on remove link
let idRemoveFunctionRegex = /removeFormset\((\d+)\)/g; // Regex to find all instances of the form number on remove function in link

// Get the number of the last form on the page
formsetGroup = document.querySelectorAll(".formset");
// Get the number of the last form on the page
formsetGroup = document.querySelectorAll(".formset");

let last_number = 0;
if (formsetGroup.length > 0){
let last_form = formsetGroup[formsetGroup.length-1]; // Get the last form in the formset
last_number = /\w+-(\d+)-\w+/.exec(last_form.innerHTML)[1]; // Get the form number in the last form with a regex (fields in the form have an id following the pattern "form-X-...." where X is the number of the form)
}
let last_number = 0;
if (formsetGroup.length > 0){
let last_form = formsetGroup[formsetGroup.length-1]; // Get the last form in the formset
last_number = /\w+-(\d+)-\w+/.exec(last_form.innerHTML)[1]; // Get the form number in the last form with a regex (fields in the form have an id following the pattern "form-X-...." where X is the number of the form)
}

let newNumber = parseInt(last_number)+1; // Number of the new form

let newNumber = parseInt(last_number)+1; // Number of the new form

// Replace last number by new number in newForm
newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${newNumber}-`); // Update the new form to have the correct form number
// Replace last number by new number in newForm
newForm.innerHTML = newForm.innerHTML.replace(formRegex, `${objectName}_set-${newNumber}-`); // Update the new form to have the correct form number
newForm.setAttribute('id', `formset-${newNumber}`); // Update the new form to have the correct form id
newForm.innerHTML = newForm.innerHTML.replace(idRemoveFormRegex, `remove-${newNumber}`); // Update the new form to have the correct form number on remove link
newForm.innerHTML = newForm.innerHTML.replace(idRemoveFunctionRegex, `removeFormset(${newNumber})`); // Update the new form to have the correct form number on remove function in link

// Insert the new form at the end of the list of forms
container.insertBefore(newForm, addButton);

// Update total number of forms in the management form
totalForms.setAttribute('value', `${formsetGroup.length+1}`);

// Delete the checkbox "Supprimer" since we use a button "Supprimer cet élément"
try {
let id_to_delete = document.querySelector('[id$="-DELETE"]').id;
let to_delete = document.getElementById(id_to_delete);
to_delete = to_delete.parentNode;
to_delete.remove();
newForm.innerHTML = newForm.innerHTML.replace(idRemoveFormRegex, `remove-${newNumber}`); // Update the new form to have the correct form number on remove link
newForm.innerHTML = newForm.innerHTML.replace(idRemoveFunctionRegex, `removeFormset(${newNumber})`); // Update the new form to have the correct form number on remove function in link

// Insert the new form at the end of the list of forms
container.insertBefore(newForm, addButton);

// Update total number of forms in the management form
// +2 because firstForm has to be included too in the total number of forms in the formset
totalForms.setAttribute('value', `${formsetGroup.length+2}`);

// Hide the checkbox "Supprimer" since we use a button "Supprimer cet élément"
try {
let to_hide = document.querySelectorAll('[id$="-DELETE"]');
for (const element of to_hide) {
let hide = element.parentNode;
hide.style.display = 'none';
}
} catch { };

}

function removeFormset(numFormset){
// Remove a form from the formset thanks to the form id
// Hide a form from the formset thanks to the form id

// Get the form by its id
// Get the form by its id
let form_id = "formset-" + numFormset;
let form = document.getElementById(form_id);

// Remove the form from the formset
form.remove();

// Update total number of forms in the management form
formsetGroup = document.querySelectorAll(".formset");
totalForms.setAttribute('value', `${formsetGroup.length}`);
// Check the hidden "delete" checkbox
// Hide the form
let case_a_cocher = document.querySelector(`[id$="-${numFormset}-DELETE"]`);
case_a_cocher.checked = true;
form.style.display = 'none';
}

0 comments on commit a168c22

Please sign in to comment.