500 lines
16 KiB
JavaScript
500 lines
16 KiB
JavaScript
/*global DateTimeShortcuts, SelectFilter*/
|
|
/**
|
|
* Django admin inlines
|
|
*
|
|
* Based on jQuery Formset 1.1
|
|
* @author Stanislaus Madueke (stan DOT madueke AT gmail DOT com)
|
|
* @requires jQuery 1.2.6 or later
|
|
*
|
|
* Copyright (c) 2009, Stanislaus Madueke
|
|
* All rights reserved.
|
|
*
|
|
* Spiced up with Code from Zain Memon's GSoC project 2009
|
|
* and modified for Django by Jannis Leidel, Travis Swicegood and Julien Phalip.
|
|
*
|
|
* Licensed under the New BSD License
|
|
* See: https://opensource.org/licenses/bsd-license.php
|
|
*/
|
|
"use strict";
|
|
{
|
|
const $ = django.jQuery;
|
|
$.fn.formset = function (opts) {
|
|
const options = $.extend({}, $.fn.formset.defaults, opts);
|
|
const $this = $(this);
|
|
const $parent = $this.parent();
|
|
const updateElementIndex = function (el, prefix, ndx) {
|
|
const id_regex = new RegExp("(" + prefix + "-(\\d+|__prefix__))");
|
|
const replacement = prefix + "-" + ndx;
|
|
if ($(el).prop("for")) {
|
|
$(el).prop("for", $(el).prop("for").replace(id_regex, replacement));
|
|
}
|
|
if (el.id) {
|
|
el.id = el.id.replace(id_regex, replacement);
|
|
}
|
|
if (el.name) {
|
|
// !CHANGED from original
|
|
// el.name = el.name.replace(id_regex, replacement);
|
|
el.setAttribute("name", el.name.replace(id_regex, replacement));
|
|
}
|
|
};
|
|
const totalForms = $("#id_" + options.prefix + "-TOTAL_FORMS").prop(
|
|
"autocomplete",
|
|
"off"
|
|
);
|
|
let nextIndex = parseInt(totalForms.val(), 10);
|
|
const maxForms = $("#id_" + options.prefix + "-MAX_NUM_FORMS").prop(
|
|
"autocomplete",
|
|
"off"
|
|
);
|
|
const minForms = $("#id_" + options.prefix + "-MIN_NUM_FORMS").prop(
|
|
"autocomplete",
|
|
"off"
|
|
);
|
|
let addButton;
|
|
|
|
/**
|
|
* The "Add another MyModel" button below the inline forms.
|
|
*/
|
|
const addInlineAddButton = function () {
|
|
if (addButton === null) {
|
|
if ($this.prop("tagName") === "TR") {
|
|
// If forms are laid out as table rows, insert the
|
|
// "add" button in a new table row:
|
|
const numCols = $this.eq(-1).children().length;
|
|
$parent.append(
|
|
'<tr class="' +
|
|
options.addCssClass +
|
|
'"><td colspan="' +
|
|
numCols +
|
|
'"><a href="#">' +
|
|
options.addText +
|
|
"</a></tr>"
|
|
);
|
|
addButton = $parent.find("tr:last a");
|
|
} else {
|
|
// Otherwise, insert it immediately after the last form:
|
|
$this
|
|
.filter(":last")
|
|
.after(
|
|
'<div class="' +
|
|
options.addCssClass +
|
|
'"><a href="#">' +
|
|
options.addText +
|
|
"</a></div>"
|
|
);
|
|
addButton = $this.filter(":last").next().find("a");
|
|
}
|
|
}
|
|
addButton.on("click", addInlineClickHandler);
|
|
};
|
|
|
|
const addInlineClickHandler = function (e) {
|
|
e.preventDefault();
|
|
const template = $("#" + options.prefix + "-empty");
|
|
const row = template.clone(true);
|
|
row
|
|
.removeClass(options.emptyCssClass)
|
|
.addClass(options.formCssClass)
|
|
.attr("id", options.prefix + "-" + nextIndex);
|
|
|
|
addInlineDeleteButton(row);
|
|
row.find("*").each(function () {
|
|
updateElementIndex(this, options.prefix, totalForms.val());
|
|
});
|
|
|
|
// Insert the new form when it has been fully edited.
|
|
// !CHANGED from original
|
|
if ($(template).parent().is("tbody")) {
|
|
row
|
|
.wrap('<tbody class="template"></tbody>')
|
|
.parent()
|
|
.insertBefore($(template).parent());
|
|
} else {
|
|
row.insertBefore($(template));
|
|
}
|
|
|
|
// Update number of total forms.
|
|
$(totalForms).val(parseInt(totalForms.val(), 10) + 1);
|
|
nextIndex += 1;
|
|
// Hide the add button if there's a limit and it's been reached.
|
|
if (maxForms.val() !== "" && maxForms.val() - totalForms.val() <= 0) {
|
|
addButton.parent().hide();
|
|
}
|
|
// Show the remove buttons if there are more than min_num.
|
|
toggleDeleteButtonVisibility(row.closest(".inline-group"));
|
|
|
|
// Pass the new form to the post-add callback, if provided.
|
|
if (options.added) {
|
|
options.added(row);
|
|
}
|
|
row.get(0).dispatchEvent(
|
|
new CustomEvent("formset:added", {
|
|
bubbles: true,
|
|
detail: {
|
|
formsetName: options.prefix,
|
|
},
|
|
})
|
|
);
|
|
};
|
|
|
|
/**
|
|
* The "X" button that is part of every unsaved inline.
|
|
* (When saved, it is replaced with a "Delete" checkbox.)
|
|
*/
|
|
const addInlineDeleteButton = function (row) {
|
|
if (row.is("tr")) {
|
|
// If the forms are laid out in table rows, insert
|
|
// the remove button into the last table cell:
|
|
row
|
|
.children(":last")
|
|
.append(
|
|
'<div><a class="' +
|
|
options.deleteCssClass +
|
|
'" href="#">' +
|
|
options.deleteText +
|
|
"</a></div>"
|
|
);
|
|
} else if (row.is("ul") || row.is("ol")) {
|
|
// If they're laid out as an ordered/unordered list,
|
|
// insert an <li> after the last list item:
|
|
row.append(
|
|
'<li><a class="' +
|
|
options.deleteCssClass +
|
|
'" href="#">' +
|
|
options.deleteText +
|
|
"</a></li>"
|
|
);
|
|
} else {
|
|
// Otherwise, just insert the remove button as the
|
|
// last child element of the form's container:
|
|
row
|
|
.children(":first")
|
|
.append(
|
|
'<span><a class="' +
|
|
options.deleteCssClass +
|
|
'" href="#">' +
|
|
options.deleteText +
|
|
"</a></span>"
|
|
);
|
|
}
|
|
// Add delete handler for each row.
|
|
row
|
|
.find("a." + options.deleteCssClass)
|
|
.on("click", inlineDeleteHandler.bind(this));
|
|
};
|
|
|
|
const inlineDeleteHandler = function (e1) {
|
|
e1.preventDefault();
|
|
const deleteButton = $(e1.target);
|
|
const row = deleteButton.closest("." + options.formCssClass);
|
|
const inlineGroup = row.closest(".inline-group");
|
|
// Remove the parent form containing this button,
|
|
// and also remove the relevant row with non-field errors:
|
|
const prevRow = row.prev();
|
|
if (prevRow.length && prevRow.hasClass("row-form-errors")) {
|
|
prevRow.remove();
|
|
}
|
|
|
|
// !CHANGED from original
|
|
if (deleteButton.parent().parent().parent().parent().is("tbody")) {
|
|
row.parent().remove();
|
|
} else {
|
|
row.remove();
|
|
}
|
|
nextIndex -= 1;
|
|
// Pass the deleted form to the post-delete callback, if provided.
|
|
if (options.removed) {
|
|
options.removed(row);
|
|
}
|
|
document.dispatchEvent(
|
|
new CustomEvent("formset:removed", {
|
|
detail: {
|
|
formsetName: options.prefix,
|
|
},
|
|
})
|
|
);
|
|
// Update the TOTAL_FORMS form count.
|
|
const forms = $("." + options.formCssClass);
|
|
$("#id_" + options.prefix + "-TOTAL_FORMS").val(forms.length);
|
|
// Show add button again once below maximum number.
|
|
if (maxForms.val() === "" || maxForms.val() - forms.length > 0) {
|
|
addButton.parent().show();
|
|
}
|
|
// Hide the remove buttons if at min_num.
|
|
toggleDeleteButtonVisibility(inlineGroup);
|
|
// Also, update names and ids for all remaining form controls so
|
|
// they remain in sequence:
|
|
let i, formCount;
|
|
const updateElementCallback = function () {
|
|
updateElementIndex(this, options.prefix, i);
|
|
};
|
|
for (i = 0, formCount = forms.length; i < formCount; i++) {
|
|
updateElementIndex($(forms).get(i), options.prefix, i);
|
|
$(forms.get(i)).find("*").each(updateElementCallback);
|
|
}
|
|
};
|
|
|
|
const toggleDeleteButtonVisibility = function (inlineGroup) {
|
|
if (minForms.val() !== "" && minForms.val() - totalForms.val() >= 0) {
|
|
inlineGroup.find(".inline-deletelink").hide();
|
|
} else {
|
|
inlineGroup.find(".inline-deletelink").show();
|
|
}
|
|
};
|
|
|
|
// !CHANGED from original. Business logic for tabular inlines is different.
|
|
if ($this.parent().is("tbody")) {
|
|
$this
|
|
.parent()
|
|
.parent()
|
|
.find("tr.form-row")
|
|
.each(function (i) {
|
|
$(this)
|
|
.not("." + options.emptyCssClass)
|
|
.addClass(options.formCssClass);
|
|
});
|
|
} else {
|
|
$this.each(function (i) {
|
|
$(this)
|
|
.not("." + options.emptyCssClass)
|
|
.addClass(options.formCssClass);
|
|
});
|
|
}
|
|
|
|
// Create the delete buttons for all unsaved inlines:
|
|
// !CHANGED from original, added parent() and used find() instead of filter()
|
|
$this
|
|
.parent()
|
|
.parent()
|
|
.find(
|
|
"." +
|
|
options.formCssClass +
|
|
":not(.has_original):not(." +
|
|
options.emptyCssClass +
|
|
")"
|
|
)
|
|
.each(function () {
|
|
addInlineDeleteButton($(this));
|
|
});
|
|
toggleDeleteButtonVisibility($this);
|
|
|
|
// Create the add button, initially hidden.
|
|
addButton = options.addButton;
|
|
addInlineAddButton();
|
|
|
|
// Show the add button if allowed to add more items.
|
|
// Note that max_num = None translates to a blank string.
|
|
const showAddButton =
|
|
maxForms.val() === "" || maxForms.val() - totalForms.val() > 0;
|
|
if ($this.length && showAddButton) {
|
|
addButton.parent().show();
|
|
} else {
|
|
addButton.parent().hide();
|
|
}
|
|
|
|
return this;
|
|
};
|
|
|
|
/* Setup plugin defaults */
|
|
$.fn.formset.defaults = {
|
|
prefix: "form", // The form prefix for your django formset
|
|
addText: "add another", // Text for the add link
|
|
deleteText: "remove", // Text for the delete link
|
|
addCssClass: "add-row", // CSS class applied to the add link
|
|
deleteCssClass: "delete-row", // CSS class applied to the delete link
|
|
emptyCssClass: "empty-row", // CSS class applied to the empty row
|
|
formCssClass: "dynamic-form", // CSS class applied to each form in a formset
|
|
added: null, // Function called each time a new form is added
|
|
removed: null, // Function called each time a form is deleted
|
|
addButton: null, // Existing add button to use
|
|
};
|
|
|
|
// Tabular inlines ---------------------------------------------------------
|
|
$.fn.tabularFormset = function (selector, options, callback = null) {
|
|
const $rows = $(this);
|
|
|
|
const reinitDateTimeShortCuts = function () {
|
|
// Reinitialize the calendar and clock widgets by force
|
|
if (typeof DateTimeShortcuts !== "undefined") {
|
|
$(".datetimeshortcuts").remove();
|
|
DateTimeShortcuts.init();
|
|
}
|
|
};
|
|
|
|
const updateSelectFilter = function () {
|
|
// If any SelectFilter widgets are a part of the new form,
|
|
// instantiate a new SelectFilter instance for it.
|
|
if (typeof SelectFilter !== "undefined") {
|
|
$(".selectfilter").each(function (index, value) {
|
|
SelectFilter.init(value.id, this.dataset.fieldName, false);
|
|
});
|
|
$(".selectfilterstacked").each(function (index, value) {
|
|
SelectFilter.init(value.id, this.dataset.fieldName, true);
|
|
});
|
|
}
|
|
};
|
|
|
|
const initPrepopulatedFields = function (row) {
|
|
row.find(".prepopulated_field").each(function () {
|
|
const field = $(this),
|
|
input = field.find("input, select, textarea"),
|
|
dependency_list = input.data("dependency_list") || [],
|
|
dependencies = [];
|
|
$.each(dependency_list, function (i, field_name) {
|
|
dependencies.push(
|
|
"#" +
|
|
row
|
|
.find(".field-" + field_name)
|
|
.find("input, select, textarea")
|
|
.attr("id")
|
|
);
|
|
});
|
|
if (dependencies.length) {
|
|
input.prepopulate(dependencies, input.attr("maxlength"));
|
|
}
|
|
});
|
|
};
|
|
|
|
$rows.formset({
|
|
prefix: options.prefix,
|
|
addText: options.addText,
|
|
formCssClass: "dynamic-" + options.prefix,
|
|
deleteCssClass: "inline-deletelink",
|
|
deleteText: options.deleteText,
|
|
emptyCssClass: "empty-form",
|
|
added: function (row) {
|
|
initPrepopulatedFields(row);
|
|
reinitDateTimeShortCuts();
|
|
updateSelectFilter();
|
|
},
|
|
addButton: options.addButton,
|
|
});
|
|
|
|
if (typeof callback === "function") {
|
|
callback();
|
|
}
|
|
|
|
return $rows;
|
|
};
|
|
|
|
// Stacked inlines ---------------------------------------------------------
|
|
$.fn.stackedFormset = function (selector, options, callback = null) {
|
|
const $rows = $(this);
|
|
const updateInlineLabel = function (row) {
|
|
$(selector)
|
|
.find(".inline_label")
|
|
.each(function (i) {
|
|
const count = i + 1;
|
|
$(this).html(
|
|
$(this)
|
|
.html()
|
|
.replace(/(#\d+)/g, "#" + count)
|
|
);
|
|
});
|
|
};
|
|
|
|
const reinitDateTimeShortCuts = function () {
|
|
// Reinitialize the calendar and clock widgets by force, yuck.
|
|
if (typeof DateTimeShortcuts !== "undefined") {
|
|
$(".datetimeshortcuts").remove();
|
|
DateTimeShortcuts.init();
|
|
}
|
|
};
|
|
|
|
const updateSelectFilter = function () {
|
|
// If any SelectFilter widgets were added, instantiate a new instance.
|
|
if (typeof SelectFilter !== "undefined") {
|
|
$(".selectfilter").each(function (index, value) {
|
|
SelectFilter.init(value.id, this.dataset.fieldName, false);
|
|
});
|
|
$(".selectfilterstacked").each(function (index, value) {
|
|
SelectFilter.init(value.id, this.dataset.fieldName, true);
|
|
});
|
|
}
|
|
};
|
|
|
|
const initPrepopulatedFields = function (row) {
|
|
row.find(".prepopulated_field").each(function () {
|
|
const field = $(this),
|
|
input = field.find("input, select, textarea"),
|
|
dependency_list = input.data("dependency_list") || [],
|
|
dependencies = [];
|
|
$.each(dependency_list, function (i, field_name) {
|
|
// Dependency in a fieldset.
|
|
let field_element = row.find(".form-row .field-" + field_name);
|
|
// Dependency without a fieldset.
|
|
if (!field_element.length) {
|
|
field_element = row.find(".form-row.field-" + field_name);
|
|
}
|
|
dependencies.push(
|
|
"#" + field_element.find("input, select, textarea").attr("id")
|
|
);
|
|
});
|
|
if (dependencies.length) {
|
|
input.prepopulate(dependencies, input.attr("maxlength"));
|
|
}
|
|
});
|
|
};
|
|
|
|
$rows.formset({
|
|
prefix: options.prefix,
|
|
addText: options.addText,
|
|
formCssClass: "dynamic-" + options.prefix,
|
|
deleteCssClass: "inline-deletelink",
|
|
deleteText: options.deleteText,
|
|
emptyCssClass: "empty-form",
|
|
removed: updateInlineLabel,
|
|
added: function (row) {
|
|
initPrepopulatedFields(row);
|
|
reinitDateTimeShortCuts();
|
|
updateSelectFilter();
|
|
updateInlineLabel(row);
|
|
},
|
|
addButton: options.addButton,
|
|
});
|
|
|
|
if (typeof callback === "function") {
|
|
callback();
|
|
}
|
|
|
|
return $rows;
|
|
};
|
|
|
|
$(window).on("htmx:afterSettle", function (event) {
|
|
if (event.target.classList.contains("js-inline-admin-formset")) {
|
|
initInlines($(event.target), function () {
|
|
if (typeof DateTimeShortcuts !== "undefined") {
|
|
$(".datetimeshortcuts").remove();
|
|
DateTimeShortcuts.init();
|
|
}
|
|
|
|
$(event.target).find(".admin-autocomplete").djangoAdminSelect2();
|
|
});
|
|
}
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
$(".js-inline-admin-formset").each(function () {
|
|
initInlines(this);
|
|
});
|
|
});
|
|
|
|
function initInlines(el, callback = null) {
|
|
const data = $(el).data(),
|
|
inlineOptions = data.inlineFormset;
|
|
let selector;
|
|
switch (data.inlineType) {
|
|
case "stacked":
|
|
selector = inlineOptions.name + "-group .inline-related";
|
|
$(selector).stackedFormset(selector, inlineOptions.options, callback);
|
|
break;
|
|
case "tabular":
|
|
selector =
|
|
inlineOptions.name +
|
|
"-group .tabular.inline-related tbody:last > tr.form-row";
|
|
$(selector).tabularFormset(selector, inlineOptions.options, callback);
|
|
break;
|
|
}
|
|
}
|
|
}
|