#23 Add the load more button to fetch all possible data

app/sections/accounts/account.html

@@ -532,7 +532,8 @@ <h3 class="panel-title pull-left">
         <operations-table ng-if="!!account.name"
                           show-filters="showFilters"
                           group-by-account-id="account.id"
-                          date-from="now-1y"
+                          default-date-from="now-1y"
+                          filters-date-from="now-1y"
                           filter-by-account-id-enabled="false"
         />
     </div>

app/sections/operations/operations-table.directive.js

@@ -1,3 +1,5 @@
+import moment from 'moment'
+
 /*
 Use this directive like this:
 <operations-table />
@@ -92,9 +94,12 @@ Use this field show / hide user filters
             }).filter((item) => !!item);
 
             $scope.totalItems = 0;
+            $scope.currentPage = 1;
+            $scope.maxPage = 0;
 
             $scope.defaultDateFrom = $scope.defaultDateFrom || 'now-1M'
             $scope.filtersDateFrom = $scope.filtersDateFrom || 'now-1y'
+            $scope.extendedDateFrom = null;
 
             // default values for filtering fields
             $scope.filters = {
@@ -121,27 +126,39 @@ Use this field show / hide user filters
                 OperationsService.columns.TYPE,
             ];
 
-            $scope.select = function (page_operations) {
-                if(page_operations === 1)
+            $scope.loadMore = () => {
+                if(!$scope.extendedDateFrom) {
+                    $scope.extendedDateFrom = moment().subtract(1, 'year')
+                } else {
+                    $scope.extendedDateFrom = $scope.extendedDateFrom.subtract(1, 'year')
+                }
+
+                $scope.select($scope.currentPage)
+            }
+
+            $scope.select = function (page_operations, filtersChanged = false) {
+                if(filtersChanged) {
                     $scope.totalItems = 0;
+                    $scope.maxPage = 0;
+                }
 
                 const page = page_operations - 1;
                 const limit = 20;
                 const offset = page * limit;
 
                 if(page_operations === 1 || !$scope.userOpenedFirstPageTime) { // if user switches back from page Y (Y>1) to page 1 we need to fetch new transactions and update time range
-                    $scope.userOpenedFirstPageTime = new Date();
+                    $scope.userOpenedFirstPageTime = new moment();
                 }
 
-                const date_to = $scope.userOpenedFirstPageTime.toISOString();
+                const date_to = $scope.userOpenedFirstPageTime.format("YYYY-DD-MM");
 
                 $scope.operationsLoading = true;
                 $scope.operationsLoadingError = false;
                 OperationsService.getOperationsHistory({
                     limit,
                     offset,
                     date_to,
-                    date_from: filtersDefined() ? $scope.filtersDateFrom : $scope.defaultDateFrom || undefined,
+                    date_from: $scope.extendedDateFrom ? $scope.extendedDateFrom.format("YYYY-DD-MM") : filtersDefined() ? $scope.filtersDateFrom : $scope.defaultDateFrom || undefined,
                     assetId: $scope.filters.assetIdOrName,
                     accountId: $scope.groupByAccountId || $scope.filters.accountIdOrName,
                     creditOfferId: $scope.groupByCreditOfferId,
@@ -170,7 +187,13 @@ Use this field show / hide user filters
                             allowMultiple: true
                         });
                     } else {
-                        $scope.totalItems += response.length;
+                        if(page_operations > $scope.maxPage) { // next page
+                            $scope.maxPage = page_operations;
+                            $scope.totalItems += response.length;
+                        } else if (page_operations === $scope.maxPage) { // loads more for current page
+                            $scope.totalItems = $scope.totalItems - $scope.operations.length + response.length;
+                        }
+                        $scope.hasNextPage = response.length > limit;
                         $scope.operations = response.slice(0, limit); // remove the additional item which defines the existence of the next page
                         $scope.currentPage = page_operations;
                         if (page_operations == 1) {

app/sections/operations/operations-table.html

@@ -22,13 +22,13 @@
 
     <div class="operations-table-filters" ng-if="showFilters === true">
         <div ng-if="filterByAccountIdEnabled !== false">
-            <input type="text" ng-change="select(1)" ng-model-options="inputFilterOptions" ng-model="filters.accountIdOrName" placeholder="Type account name or id" class="form-control" style="width: 200px" ng-model="asset_id">
+            <input type="text" ng-change="select(1, true)" ng-model-options="inputFilterOptions" ng-model="filters.accountIdOrName" placeholder="Type account name or id" class="form-control" style="width: 200px" ng-model="asset_id">
         </div>
         <div ng-if="filterByAssetIdEnabled !== false">
-            <input type="text" ng-change="select(1)" ng-model-options="inputFilterOptions" ng-model="filters.assetIdOrName" placeholder="Type asset name or id" class="form-control" style="width: 200px" ng-model="asset_id">
+            <input type="text" ng-change="select(1, true)" ng-model-options="inputFilterOptions" ng-model="filters.assetIdOrName" placeholder="Type asset name or id" class="form-control" style="width: 200px" ng-model="asset_id">
         </div>
         <div ng-if="filterByOperationTypeEnabled !== false">
-            <select ng-change="select(1)" class="form-control" style="width: 200px" ng-model="filters.operationType">
+            <select ng-change="select(1, true)" class="form-control" style="width: 200px" ng-model="filters.operationType">
                 <option value="-1">Filter by operation type</option>
                 <option value="{{operationType.id}}" ng-repeat="operationType in operationTypes">
                     {{ operationType.name }}
@@ -44,6 +44,18 @@
                       data-loading-error="operationsLoadingError"
     ></responsive-table>
 
+    <div class="operations-table--load-more" ng-if="!operationsLoading && !operationsLoadingError && (operations.length !== 20 || !hasNextPage)">
+        <div>
+            There might be more data
+        </div>
+        <div ng-if="extendedDateFrom">
+            Data from <strong>{{ extendedDateFrom.format("YYYY-DD-MM") }}</strong> to <strong>{{ userOpenedFirstPageTime.format("YYYY-DD-MM") }}</strong>
+        </div>
+        <button class="btn btn-default" ng-click="loadMore()">
+            Load
+        </button>
+    </div>
+
     <footer class="table-footer">
         <div class="row">
             <div class="col-md-6 page-num-info">

app/styles/custom.css

@@ -357,6 +357,13 @@ ul.scrollable-tabs-shadow-right:after {
     margin-right: 12px;
 }
 
+.operations-table--load-more > div{
+    margin-bottom: 8px;
+}
+.operations-table--load-more {
+    text-align: center;
+}
+
 .operations-filter {
     width: 18px;
     cursor: pointer;

package.json

@@ -48,6 +48,7 @@
     "extract-zip": "^2.0.0",
     "highcharts": "^8.1.2",
     "md5-file": "^5.0.0",
+    "moment": "^2.29.4",
     "ngstorage": "^0.3.11"
   }
 }