Preventive file - inline forms

5 files changed, 52 insertions, 2 deletions

diff --git a/ishtar_common/static/js/ishtar.js b/ishtar_common/static/js/ishtar.js
index 897356fe3..3fa293deb 100644
--- a/ishtar_common/static/js/ishtar.js
+++ b/ishtar_common/static/js/ishtar.js
@@ -1874,4 +1874,27 @@ var update_select_widget = function(input_name, values, only_values, excluded_va
 		}
 	}
 	$("#id_" + input_name).html(options);
+};
+
+var inline_register_add_button = function(slug){
+    let inline_form = document.querySelectorAll(".form-" + slug);
+    let inline_container = document.querySelector("#formset-container-" + slug);
+    let inline_add_button = document.querySelector("#add-form-" + slug);
+    let inline_div_add_button = document.querySelector("#div-add-form-" + slug);
+    let inline_total_forms = document.querySelector("#id_" + slug + "-TOTAL_FORMS");
+    let inline_form_num = inline_form.length - 1;
+    inline_add_button.addEventListener(
+        'click', function(e){
+            e.preventDefault();
+            let new_form = inline_form[0].cloneNode(true);
+            let form_regex_var = slug + '(\\d){1}-';
+            let form_regex = new RegExp(form_regex_var, 'g');
+            inline_form_num++;
+            console.log(new_form);
+            new_form.innerHTML = new_form.innerHTML.replace(
+                form_regex, slug + `-${inline_form_num}-`);
+            inline_container.insertBefore(new_form, inline_div_add_button);
+            inline_total_forms.setAttribute('value', `${inline_form_num+1}`);
+        }
+    );
 };
\ No newline at end of file
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index f9feef533..af4396be3 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -265,6 +265,10 @@
     <div id='message'>
         <div class='information'><i class="fa fa-info-circle" aria-hidden="true"></i> <span class='content'></span></div>
     </div>
+    <script type='text/javascript'>
+    {% block end_js %}
+    {% endblock %}
+    </script>
 </body>
 
 </html>
diff --git a/ishtar_common/templates/blocks/bs_field_snippet.html b/ishtar_common/templates/blocks/bs_field_snippet.html
index dcee87f7f..beecf624f 100644
--- a/ishtar_common/templates/blocks/bs_field_snippet.html
+++ b/ishtar_common/templates/blocks/bs_field_snippet.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-    <div id="main_div-{{field.auto_id}}" class="form-group{% if not field.label %} no-label{% endif %} {% if field.field.widget.attrs.cols or force_large_col %}col-lg-12{% else %}col-lg-6{% endif %}{% if field.errors %} is-invalid{% endif %}{% if field.field.required %} required{% endif %}{% if force_large_col %} full-width{% endif %}"
+    <div id="main_div-{{field.auto_id}}" class="form-group{% if not field.label %} no-label{% endif %} {% if bs_col_width %}{{bs_col_width}}{% elif field.field.widget.attrs.bs_col_width %}{{field.field.widget.attrs.bs_col_width}}{% else %}{% if field.field.widget.attrs.cols or force_large_col %}col-lg-12{% else %}col-lg-6{% endif %}{% endif %}{% if field.errors %} is-invalid{% endif %}{% if field.field.required %} required{% endif %}{% if force_large_col %} full-width{% endif %}"
          data-alt-name="{{field.field.alt_name}}">
         {% if field.label %}{{ field.label_tag }}{% endif %}
         {% if extra_field_label %}<label><em>{{extra_field_label}}</em></label>{% endif %}
diff --git a/ishtar_common/templates/blocks/bs_formset_snippet.html b/ishtar_common/templates/blocks/bs_formset_snippet.html
index 0d089ee1b..3a7e537d3 100644
--- a/ishtar_common/templates/blocks/bs_formset_snippet.html
+++ b/ishtar_common/templates/blocks/bs_formset_snippet.html
@@ -1,6 +1,9 @@
 {% load i18n from_dict %}
-<div class="form-row">
+<div id="formset-container-{{formset.prefix}}">
+    {{ formset.non_form_errors.as_ul }}
+    {{ formset.management_form }}
     {% for form in formset %}
+    <div class="form-row form-{{formset.prefix}}">
     {% if form.non_field_errors and not no_error %}
     <div class="alert alert-danger" role="alert">
         {{form.non_field_errors}}
@@ -16,11 +19,26 @@
 
     {% csrf_token %}
     {% for field in form.visible_fields %}
+    {% with bs_col_width='col-3' %}
     {% include "blocks/bs_field_snippet.html" %}
+    {% endwith %}
     {% endfor %}
 
     {% if form.extra_render %}
     {{form.extra_render|safe}}
     {% endif %}
+    </div>
     {% endfor %}
+    {% if formset.dynamic_add %}
+    <div class="form-row pb-2" id="div-add-form-{{formset.prefix}}">
+        <div class="col">
+            <button class="btn btn-secondary" id="add-form-{{formset.prefix}}" type="button">{% trans "Add" %}</button>
+        </div>
+    </div>
+    <script>
+        $(document).ready(function(){
+            inline_register_add_button("{{formset.prefix}}");
+        });
+    </script>
+    {% endif %}
 </div>
diff --git a/ishtar_common/templates/ishtar/forms/base_form.html b/ishtar_common/templates/ishtar/forms/base_form.html
index fb1fc997f..3f069e7d6 100644
--- a/ishtar_common/templates/ishtar/forms/base_form.html
+++ b/ishtar_common/templates/ishtar/forms/base_form.html
@@ -23,10 +23,15 @@
     {% endif %}
     {% block form_head %}
     {% endblock %}
+    {% block bs_form %}
     {% bs_form form 0 True %}
+    {% endblock %}
+    {% block bs_form_inlines %}
     {% for inline in inline_forms %}
+    <h4>{{inline.form_label}}</h4>
     {% bs_formset inline 0 True %}
     {% endfor %}
+    {% endblock %}
 </div>
 {% endblock %}