Restore prev/next pagination on search dropdowns

diff --git a/galette/templates/default/elements/js/choose_adh.js.twig b/galette/templates/default/elements/js/choose_adh.js.twig
index bb42cd9dcc6068706c2300d3b6fdf95a6922ad55..b27b188bdcb15ad29d8c0e32f65c33379e9a8b65 100644 (file)
--- a/galette/templates/default/elements/js/choose_adh.js.twig
+++ b/galette/templates/default/elements/js/choose_adh.js.twig
@@ -1,6 +1,132 @@
 {% if js_chosen_id is not defined %}
     {% set js_chosen_id = "#id_adh" %}
 {% endif %}
+    var _current_page = 1;
+
+    var _chosenPages = function() {
+            // Hide or enable pagination buttons.
+            {% if members.filters.pages is defined and members.filters.pages > 1 %}
+                $('.next-results').removeClass('disabled');
+                $('.next-results, .prev-results').removeClass('displaynone');
+            {% else %}
+                $('.next-results, .prev-results').addClass('displaynone');
+            {% endif %}
+
+            // Next results
+            $('{{ js_chosen_id }} .next-results').off().on('click', function() {
+                var _data = {
+                    page: _current_page + 1,
+                };
+                var _selected_value = $('{{ js_chosen_id }}').dropdown('get value');
+                var _selected_text = $('{{ js_chosen_id }}').dropdown('get text');
+                {% if members.filters.pages is defined %}
+                    var _pages = {{ members.filters.pages }};
+                {% endif %}
+
+                $.ajax({
+                    url: '{{ url_for("contributionMembers") }}',
+                    method: 'post',
+                    data: _data,
+                    {% include "elements/js/loader.js.twig" with {
+                        loader: "action",
+                        loader_text: "",
+                        selector: ".menu.visible",
+                        extra_beforesend: "$('.next-results').addClass('disabled');",
+                        extra_complete: "if (_pages > _current_page) {$('.next-results').removeClass('disabled');}"
+                    } %},
+                    success: function(res) {
+                        // Reload dropdown's items with new results.
+                        var _values = Object.values(res)[0];
+                        $('{{ js_chosen_id }}').dropdown('change values', _values);
+
+                        // Restore selected item.
+                        if (_selected_value != '') {
+                            $('{{ js_chosen_id }}').dropdown('set value', _selected_value);
+                            $('{{ js_chosen_id }}').dropdown('set text', _selected_text);
+                        }
+
+                        // New current page number.
+                        _current_page += 1;
+
+                        // Disable/Enable required pagination buttons.
+                        if (_pages == _current_page) {
+                            $('.next-results').addClass('disabled');
+                        }
+                        if (_current_page > 1) {
+                            $('.prev-results').removeClass('disabled');
+                        }
+                    },
+                    error: function() {
+                        {% include "elements/js/modal.js.twig" with {
+                            modal_title_twig: _T("An error occurred retrieving members :(")|e("js"),
+                            modal_without_content: true,
+                            modal_class: "mini",
+                            modal_deny_only: true,
+                            modal_cancel_text: _T("Close")|e("js"),
+                            modal_classname: "redalert",
+                        } %}
+                    }
+                });
+            });
+
+            // Previous results
+            $('{{ js_chosen_id }} .prev-results').off().on('click', function() {
+                var _data = {
+                    page: _current_page - 1,
+                };
+                var _selected_value = $('{{ js_chosen_id }}').dropdown('get value');
+                var _selected_text = $('{{ js_chosen_id }}').dropdown('get text');
+                {% if members.filters.pages is defined %}
+                    var _pages = {{ members.filters.pages }};
+                {% endif %}
+
+                $.ajax({
+                    url: '{{ url_for("contributionMembers") }}',
+                    method: 'post',
+                    data: _data,
+                    {% include "elements/js/loader.js.twig" with {
+                        loader: "action",
+                        loader_text: "",
+                        selector: ".menu.visible",
+                        extra_beforesend: "$('.prev-results').addClass('disabled');",
+                        extra_complete: "if (_current_page > 1) {$('.prev-results').removeClass('disabled');}"
+                    } %},
+                    success: function(res) {
+                        // Reload dropdown's items with new results.
+                        var _values = Object.values(res)[0];
+                        $('{{ js_chosen_id }}').dropdown('change values', _values);
+
+                        // Restore selected item.
+                        if (_selected_value != '') {
+                            $('{{ js_chosen_id }}').dropdown('set value', _selected_value);
+                            $('{{ js_chosen_id }}').dropdown('set text', _selected_text);
+                        }
+
+                        // New current page number.
+                        _current_page -= 1;
+
+                        // Disable/Enable required pagination buttons.
+                        if (_pages > _current_page) {
+                            $('.next-results').removeClass('disabled');
+                        }
+                        if (_current_page == 1) {
+                            $('.prev-results').addClass('disabled');
+                        }
+                    },
+                    error: function() {
+                        {% include "elements/js/modal.js.twig" with {
+                            modal_title_twig: _T("An error occurred retrieving members :(")|e("js"),
+                            modal_without_content: true,
+                            modal_class: "mini",
+                            modal_deny_only: true,
+                            modal_cancel_text: _T("Close")|e("js"),
+                            modal_classname: "redalert",
+                        } %}
+                    }
+                });
+            });
+    }
+
     var _adhselect = function() {
         $('{{ js_chosen_id }}').dropdown({
             match: 'text',
@@ -23,34 +149,16 @@
                 }
             },
             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",
-                            } %}
-                        }
-                    });
-                });
-            }
+                _chosenPages();
+            },
+            onChange: function() {
+                _chosenPages();
+            },
+            onHide: function() {
+                // Reset to defaults.
+                _current_page = 1;
+                $('.next-results, .prev-results').addClass('disabled');
+            },
         });
     }
 

diff --git a/galette/templates/default/elements/js/loader.js.twig b/galette/templates/default/elements/js/loader.js.twig
index 99c20ca5c1edeaea7a03449ad9ff74720efc928e..dd45b20e37eb74c8b81ed447b01bd3e9cd1ed4e4 100644 (file)
--- a/galette/templates/default/elements/js/loader.js.twig
+++ b/galette/templates/default/elements/js/loader.js.twig
@@ -68,6 +68,10 @@
     $('{{ loader_parent }}').append(_loader);
 {% endif %}
 
+{% if extra_beforesend is defined %}
+        {{ extra_beforesend|raw }}
+{% endif %}
+
     },
     complete: function() {
 
@@ -81,4 +85,8 @@
     {% endif %}
 {% endif %}
 
+{% if extra_complete is defined %}
+        {{ extra_complete|raw }}
+{% endif %}
+
     }

diff --git a/galette/templates/default/pages/contribution_form.html.twig b/galette/templates/default/pages/contribution_form.html.twig
index ce2f91e5d50ac71fe5d46ca10e4c89a253b75c60..8a10937a917846a87c790a96f1fbed31fb1d80cb 100644 (file)
--- a/galette/templates/default/pages/contribution_form.html.twig
+++ b/galette/templates/default/pages/contribution_form.html.twig
@@ -28,7 +28,8 @@
                                 <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>
+                                    <span class="ui mini compact icon disabled button prev-results"><i class="jsonly displaynone chevron circle left icon disabled button tooltip" title="{{ _T("Load previous members...") }}"></i></span>
+                                    <span class="ui mini compact icon disabled button next-results"><i class="jsonly displaynone chevron circle right icon disabled button tooltip" title="{{ _T("Load following members...") }}"></i></span>
                                     <div class="jsonly displaynone default text">{% if adh_selected == 0 %}{{ _T("Search for name or ID and pick member") }}{% endif %}</div>
                                 </div>
                             </div>

diff --git a/galette/templates/default/pages/member_form.html.twig b/galette/templates/default/pages/member_form.html.twig
index 45541c8562a9cc2c39e9c2557e8769009b99b4b0..1c833b07dfe996b124d5a5692fbf29a33edf583e 100644 (file)
--- a/galette/templates/default/pages/member_form.html.twig
+++ b/galette/templates/default/pages/member_form.html.twig
@@ -65,7 +65,8 @@
                         <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>
+                            <span class="ui mini compact icon disabled button prev-results"><i class="jsonly displaynone chevron circle left icon disabled button tooltip" title="{{ _T("Load previous members...") }}"></i></span>
+                            <span class="ui mini compact icon disabled button next-results"><i class="jsonly displaynone chevron circle right icon disabled button tooltip" title="{{ _T("Load following members...") }}"></i></span>
                             <div class="jsonly displaynone default text">{{ _T("Search for name or ID and pick member") }}</div>
                         </div>
                     </span>

diff --git a/galette/templates/default/pages/transaction_form.html.twig b/galette/templates/default/pages/transaction_form.html.twig
index 51c0e5bababc147d1c5dde60fcf493674e69da60..cba65f5bc14c563b12f5eb7f704b3bd1fa4b9ee4 100644 (file)
--- a/galette/templates/default/pages/transaction_form.html.twig
+++ b/galette/templates/default/pages/transaction_form.html.twig
@@ -19,7 +19,8 @@
                             <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>
+                                <span class="ui mini compact icon disabled button prev-results"><i class="jsonly displaynone chevron circle left icon disabled button tooltip" title="{{ _T("Load previous members...") }}"></i></span>
+                                <span class="ui mini compact icon disabled button next-results"><i class="jsonly displaynone chevron circle right icon disabled button tooltip" title="{{ _T("Load following members...") }}"></i></span>
                                 <div class="jsonly displaynone default text">{% if not transaction.member %}{{ _T("Search for name or ID and pick member") }}{% endif %}</div>
                             </div>
                         </div>

diff --git a/ui/semantic/galette/modules/dropdown.overrides b/ui/semantic/galette/modules/dropdown.overrides
index 48160f35740f0d74d03e7621680f2933121406d3..734d5cd60636e119fd2f5d2663950df898d977f7 100644 (file)
--- a/ui/semantic/galette/modules/dropdown.overrides
+++ b/ui/semantic/galette/modules/dropdown.overrides
@@ -13,31 +13,36 @@
      Search dropdown
 -------------------------*/
 .ui.search.selection.paginated.dropdown {
-    &.clearable .text {
-        margin-right: 2.5em;
-    }
-    > .chevron.circle.right.icon {
+    > .ui.mini.button {
         display: none;
     }
-    &.visible > .chevron.circle.right.icon {
+    > input.search {
+        width: 100%;
+    }
+    &.visible > .ui.mini.button {
         display: block;
-        cursor: pointer;
+        margin-right: 0;
+        //cursor: pointer;
         font-size: .85714286em;
-        margin: -.78571429em;
-        padding: .91666667em;
-        top: .78571429em;
-        right: 3.5em;
         position: absolute;
+        top: .3rem;
         opacity: .6;
         z-index: 3;
         &:hover {
             opacity: 1;
         }
+        &.next-results {
+            right: 2.5em;
+        }
+        &.prev-results {
+            right: 5em;
+        }
     }
     &.visible > .remove.icon {
-        right: 5em;
-    }
-    > input.search {
-        padding: .67857143em 5em .67857143em 1em;
+        right: 8.5em;
     }
 }
+.ui.search.selection.paginated.dropdown,
+.ui.search.selection.paginated.dropdown > input.search {
+    padding: .67857143em 6.5em .67857143em 1em;
+}