Add pagination button on members search dropdown

diff --git a/galette/templates/default/elements/js/choose_adh.js.twig b/galette/templates/default/elements/js/choose_adh.js.twig
index fa1cd2af9551ca3837b56572318ac3b7e17a32f2..b77d796281a3dd50fac370aa1c459d2db6a8276c 100644 (file)
--- a/galette/templates/default/elements/js/choose_adh.js.twig
+++ b/galette/templates/default/elements/js/choose_adh.js.twig
@@ -4,7 +4,6 @@
     var _adhselect = function() {
         $('{{ js_chosen_id }}').dropdown({
             match: 'text',
-            placeholder: '{{ _T("Search for name or ID and pick member") }}',
             apiSettings: {
                 url: '{{ url_for("contributionMembers", {"page": 1, "search": "{query}"}) }}',
                 method: 'post',
@@ -22,13 +21,37 @@
                         modal_classname: "redalert",
                     } %}
                 }
+            },
+            onShow: function() {
+                $('{{ js_chosen_id }} .chevron.circle.right.icon').on('click', function() {
+                    $.ajax({
+                        // TODO : get next page number.
+                        {% set next_page = 2 %}
+                        url: '{{ url_for("contributionMembers", {"page": next_page }) }}',
+                        method: 'post',
+                        {% include "elements/js/loader.js.twig" with {
+                            loader: "action",
+                            loader_text: "",
+                            selector: ".menu.visible"
+                        } %},
+                        success: function(res) {
+                            var _values = Object.values(res)[0];
+                            $('{{ js_chosen_id }}').dropdown('change values', _values);
+                        },
+                        error: function() {
+                            {% include "elements/js/modal.js.twig" with {
+                                modal_title_twig: _T("An error occurred :(")|e("js"),
+                                modal_without_content: true,
+                                modal_class: "mini",
+                                modal_deny_only: true,
+                                modal_cancel_text: _T("Close")|e("js"),
+                                modal_classname: "redalert",
+                            } %}
+                        }
+                    });
+                });
             }
         });
-
-        $('#reset-contributor').on('click', function() {
-            $('{{ js_chosen_id }}').dropdown('restore defaults');
-            $('{{ js_chosen_id }}').dropdown('refresh');
-        });
     }
 
     $(function() {

diff --git a/galette/templates/default/pages/contribution_form.html.twig b/galette/templates/default/pages/contribution_form.html.twig
index 5ee255217cdb039b25e3a05aaf3d1317def03a42..ce2f91e5d50ac71fe5d46ca10e4c89a253b75c60 100644 (file)
--- a/galette/templates/default/pages/contribution_form.html.twig
+++ b/galette/templates/default/pages/contribution_form.html.twig
@@ -25,17 +25,12 @@
     {% if not require_mass %}
                             <div class="inline field">
                                 <label for="id_adh">{{ _T("Contributor:") }}</label>
-                                <div id="id_adh" class="jsonly search-dropdown ui input nochosen">
+                                <div id="id_adh" class="jsonly search-dropdown ui input nochosen paginated">
                                     <input id="id_adh_input" type="text" name="id_adh" value="{{ contribution.member is not null ? contribution.member }}" placeholder="{{ _T("Member ID") }}">
                                     <i class="jsonly displaynone dropdown icon"></i>
+                                    <i class="jsonly displaynone chevron circle right icon tooltip" title="{{ _T("Next results") }}"></i>
                                     <div class="jsonly displaynone default text">{% if adh_selected == 0 %}{{ _T("Search for name or ID and pick member") }}{% endif %}</div>
-                                    <div class="jsonly displaynone menu">
-                            {% for k, v in members.list %}
-                                        <div class="item" data-value="{{ k }}">{{ v }}</div>
-                            {% endfor %}
-                                    </div>
                                 </div>
-                                <div class="tooltip jsonly displaynone ui tiny icon button" id="reset-contributor" title="{{ _T("Reset") }}"><i class="redo icon"></i><span class="displaynone">{{ _T("Reset") }}</span></div>
                             </div>
     {% endif %}
                             <div class="inline field">

diff --git a/galette/templates/default/pages/member_form.html.twig b/galette/templates/default/pages/member_form.html.twig
index be611694f36e12c39ec93460bd2c67d4ee0dc85a..45541c8562a9cc2c39e9c2557e8769009b99b4b0 100644 (file)
--- a/galette/templates/default/pages/member_form.html.twig
+++ b/galette/templates/default/pages/member_form.html.twig
@@ -62,17 +62,12 @@
                         <label for="attach"><i class="linkify icon"></i> {{ _T("Attach member") }}</label>
                     </div>
                     <span id="parent_id_elt" class="">
-                        <div id="parent_id" class="jsonly search-dropdown ui input nochosen">
+                        <div id="parent_id" class="jsonly search-dropdown ui input nochosen paginated">
                             <input id="parent_id_input" type="text" name="parent_id" value="{{ member.isDuplicate() and member.parent is defined and member.parent is not null ? member.parent.id }}" placeholder="{{ _T("Member ID") }}">
                             <i class="jsonly displaynone dropdown icon"></i>
+                            <i class="jsonly displaynone chevron circle right icon tooltip" title="{{ _T("Next results") }}"></i>
                             <div class="jsonly displaynone default text">{{ _T("Search for name or ID and pick member") }}</div>
-                            <div class="jsonly displaynone menu">
-            {% for k, v in members.list %}
-                                <div class="item" data-value="{{ k }}">{{ v }}</div>
-            {% endfor %}
-                            </div>
                         </div>
-                        <div class="jsonly displaynone ui tiny icon button tooltip" id="reset-contributor" title="{{ _T("Reset") }}"><i class="redo icon"></i><span class="displaynone">{{ _T("Reset") }}</span></div>
                     </span>
             {% if member.isDuplicate() %}
                     <input type="hidden" name="duplicate" value="1" />

diff --git a/galette/templates/default/pages/transaction_form.html.twig b/galette/templates/default/pages/transaction_form.html.twig
index 46187c6b8019879d13d4a47755223149be9d795b..51c0e5bababc147d1c5dde60fcf493674e69da60 100644 (file)
--- a/galette/templates/default/pages/transaction_form.html.twig
+++ b/galette/templates/default/pages/transaction_form.html.twig
@@ -16,17 +16,12 @@
                         </div>
                         <div class="field inline">
                             <label for="id_adh" >{{ _T("Originator:") }}</label>
-                            <div id="id_adh" class="jsonly search-dropdown ui input nochosen"{% if required.id_adh == 1 %} required="required"{% endif %}>
+                            <div id="id_adh" class="jsonly search-dropdown ui input nochosen paginated"{% if required.id_adh == 1 %} required="required"{% endif %}>
                                 <input id="id_adh_input" type="text" name="id_adh" value="{{ transaction.member is not null ? transaction.member }}" placeholder="{{ _T("Member ID") }}">
                                 <i class="jsonly displaynone dropdown icon"></i>
+                                <i class="jsonly displaynone chevron circle right icon tooltip" title="{{ _T("Next results") }}"></i>
                                 <div class="jsonly displaynone default text">{% if not transaction.member %}{{ _T("Search for name or ID and pick member") }}{% endif %}</div>
-                                <div class="jsonly displaynone menu">
-    {% for k, v in members.list %}
-                                    <div class="item" data-value="{{ k }}">{{ v }}</div>
-    {% endfor %}
-                                </div>
                             </div>
-                            <div class="tooltip jsonly displaynone ui tiny icon button" id="reset-contributor" title="{{ _T("Reset") }}"><i class="redo icon"></i><span class="displaynone">{{ _T("Reset") }}</span></div>
                         </div>
                         <div class="field inline">
                             <label for="trans_date">{{ _T("Date:") }}</label>

diff --git a/ui/semantic/galette/modules/dropdown.overrides b/ui/semantic/galette/modules/dropdown.overrides
index e6325c98f91e7930e6dde96471626293465eb360..48160f35740f0d74d03e7621680f2933121406d3 100644 (file)
--- a/ui/semantic/galette/modules/dropdown.overrides
+++ b/ui/semantic/galette/modules/dropdown.overrides
@@ -8,3 +8,36 @@
 .nojs select[multiple].ui.dropdown {
   height: 7rem;
 }
+
+/*------------------------
+     Search dropdown
+-------------------------*/
+.ui.search.selection.paginated.dropdown {
+    &.clearable .text {
+        margin-right: 2.5em;
+    }
+    > .chevron.circle.right.icon {
+        display: none;
+    }
+    &.visible > .chevron.circle.right.icon {
+        display: block;
+        cursor: pointer;
+        font-size: .85714286em;
+        margin: -.78571429em;
+        padding: .91666667em;
+        top: .78571429em;
+        right: 3.5em;
+        position: absolute;
+        opacity: .6;
+        z-index: 3;
+        &:hover {
+            opacity: 1;
+        }
+    }
+    &.visible > .remove.icon {
+        right: 5em;
+    }
+    > input.search {
+        padding: .67857143em 5em .67857143em 1em;
+    }
+}