JS to show additional inputs for multi fields

hypha/apply/funds/templates/funds/application_base.html

@@ -42,7 +42,7 @@
 
             {% for field in form %}
                 {% if field.field %}
-                    {% if field.field.only_input %}
+                    {% if field.field.multi_input_field %}
                         {% include "forms/includes/multi_input_field.html" %}
                     {% else %}
                         {% include "forms/includes/field.html" with is_application=True %}
@@ -74,5 +74,5 @@
     {% if not show_all_group_fields %}
     <script src="{% static 'js/apply/form-group-toggle.js' %}"></script>
     {% endif %}
-    <script src="{% static 'js/apply/multi-input-add-button.js' %}"></script>
+    <script src="{% static 'js/apply/multi-input-fields.js' %}"></script>
 {% endblock %}

hypha/apply/funds/templates/funds/applicationsubmission_form.html

@@ -18,7 +18,7 @@
 
             {% for field in form %}
                 {% if field.field %}
-                    {% if field.field.only_input %}
+                    {% if field.field.multi_input_field %}
                         {% include "forms/includes/multi_input_field.html" %}
                     {% else %}
                         {% include "forms/includes/field.html" %}
@@ -39,5 +39,5 @@
 {% block extra_js %}
     <script src="{% static 'js/apply/list-input-files.js' %}"></script>
     <script src="{% static 'js/apply/tinymce-word-count.js' %}"></script>
-    <script src="{% static 'js/apply/multi-input-add-button.js' %}"></script>
+    <script src="{% static 'js/apply/multi-input-fields.js' %}"></script>
 {% endblock %}

hypha/apply/stream_forms/models.py

@@ -68,17 +68,19 @@ class BaseStreamForm:
                 if isinstance(block, TextFieldBlock):
                     field_from_block.word_limit = struct_value.get('word_limit')
                 if isinstance(block, MultiInputCharFieldBlock):
-                    inputs = struct_value.get('number_of_inputs')
-                    for i in range(inputs):
-                        form_fields[struct_child.id + '_' + str(i)] = field_from_block
-                        if i != 0:
-                            field_from_block.only_input = True
+                    number_of_inputs = struct_value.get('number_of_inputs')
+                    for index in range(number_of_inputs):
+                        form_fields[struct_child.id + '_' + str(index)] = field_from_block
+                        field_from_block.multi_input_id = struct_child.id
+                        if index == number_of_inputs - 1:
+                            field_from_block.multi_input_add_button = True
+                            field_from_block.visibility_index = 0
+                            field_from_block.max_index = index
+                        if index != 0:
+                            field_from_block.multi_input_field = True
                             field_from_block.required = False
                             field_from_block.initial = None
-                        else:
-                            field_from_block.show_add_button = True
-                            field_from_block.number_of_inputs = inputs
-                            field_from_block = copy.copy(field_from_block)
+                        field_from_block = copy.copy(field_from_block)
                 else:
                     form_fields[struct_child.id] = field_from_block
             elif isinstance(block, GroupToggleEndBlock):

hypha/apply/templates/forms/includes/field.html

-{% load util_tags static %}
+{% load util_tags %}
 
 {% with widget_type=field|widget_type field_type=field|field_type %}
 
@@ -11,7 +11,6 @@
                 <span class="form__required">*</span>
             {% endif %}
         </label>
-    {% elif field.field.only_input %}
     {% else %}
         <label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>
             <span>{{ field.label }}</span>
@@ -22,10 +21,7 @@
     {% endif %}
 
     {% if field.help_text %}
-        {% if field.field.only_input %}
-        {% else %}
         <p class="form__help">{{ field.help_text|safe }}</p>
-        {% endif %}
     {% endif %}
 
     {% if field.field.help_link %}
@@ -39,12 +35,8 @@
         {% if widget_type == 'date_input' or widget_type == 'date_time_input' %}
             <div class="{{ widget_type }}">
         {% endif %}
-            
-        {{ field }}
 
-        {% if field.field.show_add_button %}
-            <button class="multi-input-add-btn" type="button">Add new item</button>
-        {% endif %}
+        {{ field }}
 
         {% if field.errors %}<h6 class="form__error-text">{{ field.errors.as_text|linebreaksbr }}</h6>{% endif %}
         {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' %}

hypha/apply/templates/forms/includes/multi_input_field.html

-<div class="form__item">
-    {% if field.initial %}
-        <div class="multi-input-field-show">
-            {{ field }}
-        </div>
-    {% else %}
-        <div class="multi-input-field-hidden">
-            {{ field }}
-        </div>
-    {% endif %}
+<div class="form__item {% if not field.initial %}multi-input-field-hidden{% endif %}" data-multi-field-for="{{ field.field.multi_input_id }}">
+    {{ field }}
 </div>
 
-{% block extra_css %}
-
-<style>
-    .multi-input-field-hidden {
-        display: none;
-    }
-    .multi-input-field-show {
-        display: block;
-        position: relative;
-        padding-bottom: 22px;
-    }
-</style>
-
-{% endblock %}
+{% if field.field.multi_input_add_button %}
+    <button class="link link--button link--button--narrow multi-input-add-btn" type="button" data-multi-field-id="{{ field.field.multi_input_id }}" data-multi-visibility-index="{{ field.field.visibility_index }}" data-multi-max-index="{{ field.field.max_index }}">Add new item</button>
+{% endif %}

hypha/static_src/src/javascript/apply/multi-input-add-button.js

-(function ($) {
-
-    'use strict';
-
-    $('.multi-input-add-btn').click(function () {
-        var allElements = document.getElementsByClassName('multi-input-field-hidden');
-        if (allElements.hasOwnProperty(0)) {
-            allElements[0].className = 'multi-input-field-show';
-        }
-    });
-})(jQuery);

hypha/static_src/src/javascript/apply/multi-input-fields.js

+(function ($) {
+
+    'use strict';
+
+    $('.multi-input-add-btn').each(function () {
+        var multiFieldId = $(this).data('multi-field-id');
+        const multiMaxIndex = $(this).data('multi-max-index');
+        var multiFieldInputs = $(".form__item[data-multi-field-for='" + multiFieldId + "']");
+        var multiFieldHiddenInput = $(".form__item.multi-input-field-hidden[data-multi-field-for='" + multiFieldId + "']");
+        var multiVisibilityIndex = multiFieldInputs.index(multiFieldHiddenInput);
+        if (multiVisibilityIndex >= 0) {
+            $(this).data('multi-visibility-index', multiVisibilityIndex);
+        }
+        else if (multiVisibilityIndex == -1) {
+            $(this).data('multi-visibility-index', multiMaxIndex);
+        }
+    });
+
+    $('.multi-input-add-btn').click(function () {
+        var multiFieldId = $(this).data('multi-field-id');
+        var multiVisibilityIndex = $(this).data('multi-visibility-index');
+        const multiMaxIndex = $(this).data('multi-max-index');
+
+        var multiShowIndex = multiVisibilityIndex + 1;
+        if (multiShowIndex <= multiMaxIndex) {
+            var multiShowId = 'id_' + multiFieldId + '_' + multiShowIndex;
+            $('#' + multiShowId).parent('.form__item').removeClass('multi-input-field-hidden');
+            $(this).data('multi-visibility-index', multiShowIndex);
+        }
+        else {
+            $(this).hide();
+        }
+    });
+})(jQuery);

hypha/static_src/src/sass/apply/components/_form.scss

@@ -549,6 +549,10 @@
         max-width: 410px;
     }
 
+    .multi-input-field-hidden {
+        display: none;
+    }
+
     &__info-box {
         background-color: $color--light-blue-90;
         padding: 1rem;

hypha/static_src/src/sass/public/components/_form.scss

@@ -364,4 +364,8 @@
         border: 1px solid $color--mid-grey;
         max-width: 410px;
     }
+
+    .multi-input-field-hidden {
+        display: none;
+    }
 }