diff --git a/src/backoffice/templates/backoffice/link/link_display.html b/src/backoffice/templates/backoffice/link/link_display.html index 375cedb7d53293fc8dc567895a59b316c25c91e5..b8dbc9c098a87591e453bdd39b7465310f50d7aa 100644 --- a/src/backoffice/templates/backoffice/link/link_display.html +++ b/src/backoffice/templates/backoffice/link/link_display.html @@ -2,7 +2,10 @@ {% load i18n %} <div class="card-header bg-default">{% trans 'Links' %}</div> -<ul class="list-group list-group-flush"> +<ul + id="links" + class="list-group list-group-flush" +> {% csrf_token %} {{ link_forms.management_form }} <input type="hidden" name="form_type" value="link_form"> @@ -13,3 +16,14 @@ </li> {% endfor %} </ul> + +<div class="card-body"> + <button + type="button" + class="btn btn-secondary float-end" + data-add-from-template="#link_form_template" + data-add-to="#links" + > + {{ _("Add link") }} + </button> +</div> diff --git a/src/backoffice/templates/backoffice/project/create_edit.html b/src/backoffice/templates/backoffice/project/create_edit.html index 5d60767dd15ec0b1264f600575807f2795f64059..5b3ea1ceaf76d2bc66d8220112ff0cca4b6e01f9 100644 --- a/src/backoffice/templates/backoffice/project/create_edit.html +++ b/src/backoffice/templates/backoffice/project/create_edit.html @@ -10,9 +10,78 @@ {% endif %} | {{ event_type }} | {{ conference.name }} {% endblock title %} + {% block scripts %} <script src="{% static "backoffice/modal.js" %}"></script> <script> + const extractNumber = (value) => { + const numberString = value.replace(/[^0-9]/g, ''); + return new Number(numberString); + }; + + /** + * Iterates over all buttons with the "data-add-from-template" attribute. + * For each button register a click listener, that copies the element found by selector from that attribute. + * Then seplaces "template" with "links-NUMBER". NUMER is the last numer of any "name" from source. + * The new element is added to the node specified by "data-add-to". + */ + const setUpAddFromTemplate = () => { + /** + * @type {NodeList} + */ + const addButtons = document.querySelectorAll("[data-add-from-template]"); + + addButtons.forEach( + /** + * @param addButton {Node} + */ + (addButton) => { + const templateSelector = addButton.dataset.addFromTemplate; + const template = document.querySelector(templateSelector); + + if (!template) { + console.log("Template source not found"); + return; + } + + const targetSelector = addButton.dataset.addTo; + const target = document.querySelector(targetSelector); + + if (!target) { + console.log("Template target not found"); + return; + } + + addButton.addEventListener("click", () => { + const last = [...target.querySelectorAll("[name]")].pop(); + + if (!last) { + console.log("Unable to find last element in source"); + return; + } + + const lastNumber = extractNumber(last.getAttribute("name")); + + if (isNaN(lastNumber)) { + console.log("Unable to find last element number in source"); + return; + } + + const nextNumber = lastNumber + 1; + // TODO "links" mit ins template rendern, damit hier nur noch die Nummer eingesetzt werden muss + const nextAsString = template.outerHTML.replaceAll("template", `links-${nextNumber}`); + + // TODO eventuell fertiges LI als Template rausrendern + const next = document.createElement("li"); + next.classList.add("list-group-item"); + next.innerHTML = nextAsString; + + target.appendChild(next); + }); + } + ); + }; + $(document).ready(() => { showModal = registerModal() publishProject = document.getElementById('publishProject'); @@ -58,9 +127,11 @@ }) } }; + setUpAddFromTemplate(); }); </script> {% endblock scripts %} + {% block content %} {% if form.instance.assembly %} {% url 'backoffice:assembly-project' pk=form.instance.id assembly=form.instance.assembly.id as edit_url %} @@ -174,4 +245,4 @@ {% include 'backoffice/link/components/form_line.html' %} {% endwith %} </div> -{% endblock templates %} \ No newline at end of file +{% endblock templates %}