From 417ca42718b15ac546b17d4f7b202942732f7b41 Mon Sep 17 00:00:00 2001
From: Parbhat Puri <parbhatpuri17@gmail.com>
Date: Mon, 15 Jun 2020 08:58:40 +0000
Subject: [PATCH] JS to show additional inputs for multi fields
---
.../templates/funds/application_base.html | 4 +--
.../funds/applicationsubmission_form.html | 4 +--
hypha/apply/stream_forms/models.py | 20 ++++++-----
.../apply/templates/forms/includes/field.html | 12 ++-----
.../forms/includes/multi_input_field.html | 29 +++-------------
.../apply/multi-input-add-button.js | 11 ------
.../javascript/apply/multi-input-fields.js | 34 +++++++++++++++++++
.../src/sass/apply/components/_form.scss | 4 +++
.../src/sass/public/components/_form.scss | 4 +++
9 files changed, 64 insertions(+), 58 deletions(-)
delete mode 100644 hypha/static_src/src/javascript/apply/multi-input-add-button.js
create mode 100644 hypha/static_src/src/javascript/apply/multi-input-fields.js
diff --git a/hypha/apply/funds/templates/funds/application_base.html b/hypha/apply/funds/templates/funds/application_base.html
index 5e4ac8d33..adb4ccce6 100644
--- a/hypha/apply/funds/templates/funds/application_base.html
+++ b/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 %}
diff --git a/hypha/apply/funds/templates/funds/applicationsubmission_form.html b/hypha/apply/funds/templates/funds/applicationsubmission_form.html
index 75a79a23e..5580b435d 100644
--- a/hypha/apply/funds/templates/funds/applicationsubmission_form.html
+++ b/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 %}
diff --git a/hypha/apply/stream_forms/models.py b/hypha/apply/stream_forms/models.py
index 4e92920be..348c10b96 100644
--- a/hypha/apply/stream_forms/models.py
+++ b/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):
diff --git a/hypha/apply/templates/forms/includes/field.html b/hypha/apply/templates/forms/includes/field.html
index 90e147e7a..4d3413580 100644
--- a/hypha/apply/templates/forms/includes/field.html
+++ b/hypha/apply/templates/forms/includes/field.html
@@ -1,4 +1,4 @@
-{% 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' %}
diff --git a/hypha/apply/templates/forms/includes/multi_input_field.html b/hypha/apply/templates/forms/includes/multi_input_field.html
index b946d9ce3..c934ff72c 100644
--- a/hypha/apply/templates/forms/includes/multi_input_field.html
+++ b/hypha/apply/templates/forms/includes/multi_input_field.html
@@ -1,26 +1,7 @@
-<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 %}
diff --git a/hypha/static_src/src/javascript/apply/multi-input-add-button.js b/hypha/static_src/src/javascript/apply/multi-input-add-button.js
deleted file mode 100644
index 3310bb22f..000000000
--- a/hypha/static_src/src/javascript/apply/multi-input-add-button.js
+++ /dev/null
@@ -1,11 +0,0 @@
-(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);
diff --git a/hypha/static_src/src/javascript/apply/multi-input-fields.js b/hypha/static_src/src/javascript/apply/multi-input-fields.js
new file mode 100644
index 000000000..da3e68e58
--- /dev/null
+++ b/hypha/static_src/src/javascript/apply/multi-input-fields.js
@@ -0,0 +1,34 @@
+(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);
diff --git a/hypha/static_src/src/sass/apply/components/_form.scss b/hypha/static_src/src/sass/apply/components/_form.scss
index 896eaba00..ca67df2d2 100644
--- a/hypha/static_src/src/sass/apply/components/_form.scss
+++ b/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;
diff --git a/hypha/static_src/src/sass/public/components/_form.scss b/hypha/static_src/src/sass/public/components/_form.scss
index 12f529d49..fe845c796 100644
--- a/hypha/static_src/src/sass/public/components/_form.scss
+++ b/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;
+ }
}
--
GitLab