From 7297e0eb83e76ba2fedce08ea7e93e5cf329db3b Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Sun, 24 Mar 2024 16:58:26 +0200
Subject: [PATCH] pagination display top bar if out of bound

---
 client/res/templates/record/list.tpl       | 427 +++++++++++----------
 client/src/collection.js                   |   2 +-
 client/src/helpers/list/misc/sticky-bar.js |   4 +
 client/src/views/record/list.js            |  10 +-
 4 files changed, 228 insertions(+), 215 deletions(-)

diff --git a/client/res/templates/record/list.tpl b/client/res/templates/record/list.tpl
index bd6866abbf..19160268d4 100644
--- a/client/res/templates/record/list.tpl
+++ b/client/res/templates/record/list.tpl
@@ -1,232 +1,235 @@
-{{#if collection.models.length}}
-
 {{#if topBar}}
-<div class="list-buttons-container clearfix">
-    {{#if displayActionsButtonGroup}}
-    <div class="btn-group actions">
-        {{#if massActionList}}
-        <button
-            type="button"
-            class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
-            data-toggle="dropdown"
-        >{{translate 'Actions'}} <span class="caret"></span></button>
-        {{/if}}
-        {{#if buttonList.length}}
-        {{#each buttonList}}
-            {{button
-                name
-                scope=../scope
-                label=label
-                style=style
-                hidden=hidden
-                class='list-action-item'
-            }}
-        {{/each}}
-        {{/if}}
-
-        <div class="btn-group">
-            {{#if dropdownItemList.length}}
-            <button
-                type="button"
-                class="btn btn-text dropdown-toggle dropdown-item-list-button"
-                data-toggle="dropdown"
-            ><span class="fas fa-ellipsis-h"></span></button>
-            <ul class="dropdown-menu pull-left">
-                {{#each dropdownItemList}}
-                {{#if this}}
-                <li class="{{#if hidden}}hidden{{/if}}">
-                <a
-                    role="button"
-                    tabindex="0"
-                    class="action list-action-item"
-                    data-action="{{name}}"
-                    data-name="{{name}}"
-                >{{#if html}}{{{html}}}{{else}}{{translate label scope=../entityType}}{{/if}}</a></li>
-                {{else}}
-                    {{#unless @first}}
-                    {{#unless @last}}
-                    <li class="divider"></li>
-                    {{/unless}}
-                    {{/unless}}
+    <div class="list-buttons-container clearfix">
+        {{#if displayActionsButtonGroup}}
+            <div class="btn-group actions">
+                {{#if massActionList}}
+                    <button
+                        type="button"
+                        class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
+                        data-toggle="dropdown"
+                    >{{translate 'Actions'}} <span class="caret"></span></button>
                 {{/if}}
-                {{/each}}
-            </ul>
-            {{/if}}
-        </div>
-
-        {{#if massActionList}}
-        <ul class="dropdown-menu actions-menu">
-            {{#each massActionList}}
-            {{#if this}}
-            <li>
-                <a
-                    role="button"
-                    tabindex="0"
-                    data-action="{{./this}}"
-                    class='mass-action'
-                >{{translate this category="massActions" scope=../scope}}</a></li>
-            {{else}}
-            {{#unless @first}}
-            {{#unless @last}}
-            <li class="divider"></li>
-            {{/unless}}
-            {{/unless}}
-            {{/if}}
-            {{/each}}
-        </ul>
-        {{/if}}
-    </div>
-
-    <div class="sticked-bar hidden">
-        <div class="btn-group">
-            <button
-                type="button"
-                class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
-                data-toggle="dropdown"
-            >{{translate 'Actions'}} <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu actions-menu">
-                {{#each massActionList}}
-                {{#if this}}
-                <li>
-                    <a
-                        role="button"
-                        tabindex="0"
-                        data-action="{{./this}}"
-                        class='mass-action'
-                    >{{translate this category="massActions" scope=../scope}}</a>
-                </li>
-                {{else}}
-                {{#unless @first}}
-                {{#unless @last}}
-                <li class="divider"></li>
-                {{/unless}}
-                {{/unless}}
+                {{#if buttonList.length}}
+                    {{#each buttonList}}
+                        {{button
+                            name
+                            scope=../scope
+                            label=label
+                            style=style
+                            hidden=hidden
+                            class='list-action-item'
+                        }}
+                    {{/each}}
                 {{/if}}
-                {{/each}}
-            </ul>
-        </div>
+
+                <div class="btn-group">
+                    {{#if dropdownItemList.length}}
+                        <button
+                            type="button"
+                            class="btn btn-text dropdown-toggle dropdown-item-list-button"
+                            data-toggle="dropdown"
+                        ><span class="fas fa-ellipsis-h"></span></button>
+                        <ul class="dropdown-menu pull-left">
+                            {{#each dropdownItemList}}
+                                {{#if this}}
+                                    <li class="{{#if hidden}}hidden{{/if}}">
+                                        <a
+                                            role="button"
+                                            tabindex="0"
+                                            class="action list-action-item"
+                                            data-action="{{name}}"
+                                            data-name="{{name}}"
+                                        >{{#if html}}{{{html}}}{{else}}{{translate label scope=../entityType}}{{/if}}</a></li>
+                                {{else}}
+                                    {{#unless @first}}
+                                        {{#unless @last}}
+                                            <li class="divider"></li>
+                                        {{/unless}}
+                                    {{/unless}}
+                                {{/if}}
+                            {{/each}}
+                        </ul>
+                    {{/if}}
+                </div>
+
+                {{#if massActionList}}
+                    <ul class="dropdown-menu actions-menu">
+                        {{#each massActionList}}
+                            {{#if this}}
+                                <li>
+                                    <a
+                                        role="button"
+                                        tabindex="0"
+                                        data-action="{{./this}}"
+                                        class='mass-action'
+                                    >{{translate this category="massActions" scope=../scope}}</a></li>
+                            {{else}}
+                                {{#unless @first}}
+                                    {{#unless @last}}
+                                        <li class="divider"></li>
+                                    {{/unless}}
+                                {{/unless}}
+                            {{/if}}
+                        {{/each}}
+                    </ul>
+                {{/if}}
+            </div>
+
+            <div class="sticked-bar hidden">
+                <div class="btn-group">
+                    <button
+                        type="button"
+                        class="btn btn-default btn-xs-wide dropdown-toggle actions-button hidden"
+                        data-toggle="dropdown"
+                    >{{translate 'Actions'}} <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu actions-menu">
+                        {{#each massActionList}}
+                            {{#if this}}
+                                <li>
+                                    <a
+                                        role="button"
+                                        tabindex="0"
+                                        data-action="{{./this}}"
+                                        class='mass-action'
+                                    >{{translate this category="massActions" scope=../scope}}</a>
+                                </li>
+                            {{else}}
+                                {{#unless @first}}
+                                    {{#unless @last}}
+                                        <li class="divider"></li>
+                                    {{/unless}}
+                                {{/unless}}
+                            {{/if}}
+                        {{/each}}
+                    </ul>
+                </div>
+
+                {{#if hasPagination}}
+                    {{{paginationSticky}}}
+                {{/if}}
+            </div>
+        {{/if}}
 
         {{#if hasPagination}}
-            {{{paginationSticky}}}
+            {{{pagination}}}
         {{/if}}
-    </div>
-    {{/if}}
 
-    {{#if hasPagination}}
-        {{{pagination}}}
-    {{/if}}
+        {{#if settings}}
+            <div class="settings-container pull-right">{{{settings}}}</div>
+        {{/if}}
 
-    {{#if settings}}
-    <div class="settings-container pull-right">{{{settings}}}</div>
-    {{/if}}
-
-    {{#if displayTotalCount}}
-    <div class="text-muted total-count">
+        {{#if displayTotalCount}}
+            <div class="text-muted total-count">
         <span
             title="{{translate 'Total'}}"
             class="total-count-span"
         >{{totalCountFormatted}}</span>
+            </div>
+        {{/if}}
     </div>
-    {{/if}}
-</div>
 {{/if}}
 
-<div class="list{{#if tableMinWidth}} scrollable{{/if}}{{#if showMoreActive}} has-show-more{{/if}}" data-scope="{{scope}}">
-    <table class="table"{{#if tableMinWidth}} style="min-width: {{tableMinWidth}}px;"{{/if}}>
-        {{#if header}}
-        <thead>
-            <tr>
-                {{#if checkboxes}}
-                <th
-                    style="width: {{checkboxColumnWidth}}"
-                    data-name="r-checkbox"
-                >
-                    <span class="select-all-container"><input type="checkbox" class="select-all form-checkbox form-checkbox-small"></span>
-                    {{#unless checkAllResultDisabled}}
-                    <div class="btn-group checkbox-dropdown">
-                        <a
-                            class="btn btn-link btn-sm dropdown-toggle"
-                            data-toggle="dropdown"
-                            tabindex="0"
-                            role="button"
-                        >
-                            <span class="caret"></span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li>
-                                <a
-                                    role="button"
-                                    tabindex="0"
-                                    data-action="selectAllResult"
-                                >{{translate 'Select All Results'}}</a>
-                            </li>
-                        </ul>
-                    </div>
-                    {{/unless}}
-                </th>
-                {{/if}}
-                {{#each headerDefs}}
-                <th
-                    style="{{#if width}}width: {{width}};{{/if}}{{#if align}} text-align: {{align}};{{/if}}"
-                    {{#if className}}class="{{className}}"{{/if}}
-                    {{#if name}}data-name="{{name}}"{{/if}}
-                >
-                    {{#if this.isSortable}}
-                        <a
-                            role="button"
-                            tabindex="0"
-                            class="sort"
-                            data-name="{{this.name}}"
-                            title="{{translate 'Sort'}}"
-                        >{{label}}</a>
-                        {{#if this.isSorted}}
-                            {{#unless this.isDesc}}
-                            <span class="fas fa-chevron-down fa-sm"></span>
-                            {{else}}
-                            <span class="fas fa-chevron-up fa-sm"></span>
-                            {{/unless}}
-                        {{/if}}
-                    {{else}}
-                        {{#if html}}
-                        {{{html}}}
-                        {{else}}
-                        {{label}}
-                        {{/if}}
+{{#if collectionLength}}
+    <div
+        class="list{{#if tableMinWidth}} scrollable{{/if}}{{#if showMoreActive}} has-show-more{{/if}}"
+        data-scope="{{scope}}"
+    >
+        <table class="table"{{#if tableMinWidth}} style="min-width: {{tableMinWidth}}px;"{{/if}}>
+            {{#if header}}
+            <thead>
+                <tr>
+                    {{#if checkboxes}}
+                    <th
+                        style="width: {{checkboxColumnWidth}}"
+                        data-name="r-checkbox"
+                    >
+                        <span
+                            class="select-all-container"
+                        ><input type="checkbox" class="select-all form-checkbox form-checkbox-small"></span>
+                        {{#unless checkAllResultDisabled}}
+                        <div class="btn-group checkbox-dropdown">
+                            <a
+                                class="btn btn-link btn-sm dropdown-toggle"
+                                data-toggle="dropdown"
+                                tabindex="0"
+                                role="button"
+                            >
+                                <span class="caret"></span>
+                            </a>
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a
+                                        role="button"
+                                        tabindex="0"
+                                        data-action="selectAllResult"
+                                    >{{translate 'Select All Results'}}</a>
+                                </li>
+                            </ul>
+                        </div>
+                        {{/unless}}
+                    </th>
                     {{/if}}
-                </th>
-                {{/each}}
-            </tr>
-        </thead>
+                    {{#each headerDefs}}
+                    <th
+                        style="{{#if width}}width: {{width}};{{/if}}{{#if align}} text-align: {{align}};{{/if}}"
+                        {{#if className}}class="{{className}}"{{/if}}
+                        {{#if name}}data-name="{{name}}"{{/if}}
+                    >
+                        {{#if this.isSortable}}
+                            <a
+                                role="button"
+                                tabindex="0"
+                                class="sort"
+                                data-name="{{this.name}}"
+                                title="{{translate 'Sort'}}"
+                            >{{label}}</a>
+                            {{#if this.isSorted}}
+                                {{#unless this.isDesc}}
+                                <span class="fas fa-chevron-down fa-sm"></span>
+                                {{else}}
+                                <span class="fas fa-chevron-up fa-sm"></span>
+                                {{/unless}}
+                            {{/if}}
+                        {{else}}
+                            {{#if html}}
+                            {{{html}}}
+                            {{else}}
+                            {{label}}
+                            {{/if}}
+                        {{/if}}
+                    </th>
+                    {{/each}}
+                </tr>
+            </thead>
+            {{/if}}
+            <tbody>
+            {{#each rowList}}
+                <tr data-id="{{./this}}" class="list-row">
+                {{{var this ../this}}}
+                </tr>
+            {{/each}}
+            </tbody>
+        </table>
+
+        {{#if showMoreEnabled}}
+            <div class="show-more{{#unless showMoreActive}} hidden{{/unless}}">
+                <a
+                    type="button"
+                    role="button"
+                    tabindex="0"
+                    class="btn btn-default btn-block"
+                    data-action="showMore"
+                    {{#if showCount}}title="{{translate 'Total'}}: {{totalCountFormatted}}"{{/if}}
+                >
+                    {{#if showCount}}
+                    <div class="pull-right text-muted more-count">{{moreCountFormatted}}</div>
+                    {{/if}}
+                    <span>{{translate 'Show more'}}</span>
+                </a>
+            </div>
         {{/if}}
-        <tbody>
-        {{#each rowList}}
-            <tr data-id="{{./this}}" class="list-row">
-            {{{var this ../this}}}
-            </tr>
-        {{/each}}
-        </tbody>
-    </table>
-
-    {{#if showMoreEnabled}}
-        <div class="show-more{{#unless showMoreActive}} hidden{{/unless}}">
-            <a
-                type="button"
-                role="button"
-                tabindex="0"
-                class="btn btn-default btn-block"
-                data-action="showMore"
-                {{#if showCount}}title="{{translate 'Total'}}: {{totalCountFormatted}}"{{/if}}
-            >
-                {{#if showCount}}
-                <div class="pull-right text-muted more-count">{{moreCountFormatted}}</div>
-                {{/if}}
-                <span>{{translate 'Show more'}}</span>
-            </a>
-        </div>
-    {{/if}}
-</div>
-
+    </div>
 {{else}}
     {{#unless noDataDisabled}}
     <div class="no-data">{{translate 'No Data'}}</div>
diff --git a/client/src/collection.js b/client/src/collection.js
index 228abe0612..d5410f45fe 100644
--- a/client/src/collection.js
+++ b/client/src/collection.js
@@ -666,7 +666,7 @@ class Collection {
      * @returns {Promise}
      */
     previousPage() {
-        return this.setOffset(this.offset - this.maxSize);
+        return this.setOffset(Math.max(0, this.offset - this.maxSize));
     }
 
     /**
diff --git a/client/src/helpers/list/misc/sticky-bar.js b/client/src/helpers/list/misc/sticky-bar.js
index e521b213ab..198dde70f6 100644
--- a/client/src/helpers/list/misc/sticky-bar.js
+++ b/client/src/helpers/list/misc/sticky-bar.js
@@ -82,6 +82,10 @@ class StickyBarHelper {
         const $stickedBar = this.$stickedBar = this.$el.find('.sticked-bar');
         const $middle = this.$el.find('> .list');
 
+        if (!$middle.get(0)) {
+            return;
+        }
+
         const $window = $(window);
 
         let $scrollable = $window;
diff --git a/client/src/views/record/list.js b/client/src/views/record/list.js
index 3b39de2c41..ae220e17fe 100644
--- a/client/src/views/record/list.js
+++ b/client/src/views/record/list.js
@@ -874,18 +874,24 @@ class ListRecordView extends View {
 
         const displayTotalCount = this.displayTotalCount && this.collection.total > 0 && !this.pagination;
 
-        const topBar =
+        let topBar = this.collection.length && (
             this.pagination ||
             this.checkboxes ||
             (this.buttonList.length && !this.buttonsDisabled) ||
             (this.dropdownItemList.length && !this.buttonsDisabled) ||
             this.forceDisplayTopBar ||
-            displayTotalCount;
+            displayTotalCount
+        );
+
+        if (!topBar && this.pagination && !this.collection.length && this.collection.offset > 0) {
+            topBar = true;
+        }
 
         const noDataDisabled = this.noDataDisabled || this._renderEmpty;
 
         return {
             scope: this.scope,
+            collectionLength: this.collection.models.length,
             entityType: this.entityType,
             header: this.header,
             headerDefs: this._getHeaderDefs(),