#23 Add filter by asset and operation type for dashboard operations

app/core/service.network.js

@@ -63,13 +63,20 @@
 
                 });
             },
-            getLastOperations: function(limit, from, date_to = (new Date().toISOString()), callback) {
-                return $http.get(appConfig.urls.elasticsearch_wrapper() + "/account_history"
-                    + "?limit=" + limit
-                    + "&offset=" + from
-                    + (from < 1000000 ? "&from_date=now-1M" : "&from_date=2015-10-10")
-                    + "&to_date=" + date_to
-                ).then(response => {
+            getLastOperations: function({ limit = 10, from = 0, assetId = undefined, operationType = undefined, date_to = (new Date().toISOString()) }, callback) {
+                return $http.get(appConfig.urls.elasticsearch_wrapper() + "/account_history", {
+                    params: {
+                        "limit": limit,
+                        "offset": from,
+                        "from_date": (from < 1000000 ? "now-1M" : "2015-10-10"),
+                        "asset_id": assetId,
+                        "operation_type": operationType,
+                        "to_date": date_to,
+                    }
+                }).then(response => {
+                    if(response && response.data && response.data.asset_not_found) {
+                        return callback(response.data)
+                    }
                     let last_ops = [];
 
                     // only add if the op id is not already added (transfer appears in both accounts!)

app/i18n/en.json

@@ -211,6 +211,8 @@
   "Daily DEX Volume Chart Series Title": "{{symbol}} Volume",
   "Block number symbol": "Block #",
   "Operations Count": "Operations Count",
+  "Asset not found": "Asset {{asset}} not found",
+  "Please check the asset name": "Please check the asset name or use the id",
 
   "Committee members": "Committee members",
   "Current active committee members": "Current active committee members",

app/sections/dashboard/dashboard.controller.js

@@ -2,15 +2,15 @@
     'use strict';
 
     angular.module('app').controller('DashboardCtrl', ['$scope', 'Notify', '$timeout', '$window', 'networkService',
-        'chartService', 'appConfig', '$filter', DashboardCtrl])
+        'chartService', 'appConfig', '$filter', 'utilities', DashboardCtrl])
 
         .filter('to_trusted', ['$sce', function($sce){
             return function(text) {
                 return $sce.trustAsHtml(text);
             };
         }]);
 
-    function DashboardCtrl($scope, Notify, $timeout, $window, networkService, chartService, appConfig, $filter) {
+    function DashboardCtrl($scope, Notify, $timeout, $window, networkService, chartService, appConfig, $filter, utilities) {
 
         networkService.getHeader(function (returnData) {
             $scope.dynamic = returnData;
@@ -52,6 +52,8 @@
             const page = page_operations -1;
             const limit = 20;
             const from = page * limit;
+            const operationType = $scope.operationTypeFilter !== '-1' ? $scope.operationTypeFilter : undefined;
+            const assetId = $scope.assetNameOrSymbolFilter && $scope.assetNameOrSymbolFilter.length ? $scope.assetNameOrSymbolFilter.toUpperCase() : undefined
 
             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();
@@ -61,22 +63,50 @@
 
             $scope.operationsLoading = true;
             $scope.operationsLoadingError = false;
-            networkService.getLastOperations(limit, from, date_to, function (returnData) {
+            networkService.getLastOperations({limit, from, operationType, assetId, date_to}, function (returnData) {
                 $scope.operationsLoading = false;
-                $scope.operations = returnData;
-                $scope.currentPage = page_operations;
-                if (page_operations == 1) {
-                    if (returnData.length > 0) {
-                        $scope.total_ops = returnData[0].operation_id_num;
-                    } else {
-                        $scope.total_ops = 0;
+                if(returnData && returnData.asset_not_found) {
+                    return Notify.warning({
+                        key: 'httpAssetNotFound',
+                        title: $filter('translate')('Asset not found', {
+                            asset: assetId
+                        }),
+                        message: $filter('translate')('Please check the asset name'),
+                        allowMultiple: true
+                    });
+                } else {
+                    $scope.operations = returnData;
+                    $scope.currentPage = page_operations;
+                    if (page_operations == 1) {
+                        if (returnData.length > 0) {
+                            $scope.total_ops = returnData[0].operation_id_num;
+                        } else {
+                            $scope.total_ops = 0;
+                        }
                     }
                 }
             }).catch(err => {
                 $scope.operationsLoadingError = true;
             });
         };
         $scope.select(1);
+
+        $scope.operationTypes = new Array(75).fill('#').map((item, key) => {
+            const name = utilities.operationType(key)[0]
+            if(!name)
+                return false;
+            return {
+                id: key,
+                name,
+            }
+        }).filter((item) => !!item);
+
+        $scope.operationTypeFilter = '-1';
+        $scope.assetNameOrSymbolFilter = '';
+        $scope.assetNameOrSymbolFilterModelOptions = {
+            debounce: 500,
+            getterSetter: true
+        };
 
         $scope.chartsData = {
             operations_chart: chartService.loadingChart(),
@@ -86,6 +116,10 @@
             uias_chart: chartService.loadingChart(),
             holders_chart: chartService.loadingChart(),
         };
+
+        $scope.$watchGroup(["operationTypeFilter", "assetNameOrSymbolFilter"], () => {
+            $scope.select(1)
+        });
 
         // lazy load on tab change
         $scope.loadTabsCharts = function(tabName) {

app/sections/dashboard/dashboard.html

@@ -139,6 +139,19 @@
     <div class="panel panel-default">
         <div class="panel-body table-responsive">
 
+            <div class="dashboard-operations-filters">
+                <div>
+                    <input type="text" ng-model-options="assetNameOrSymbolFilterModelOptions" ng-model="assetNameOrSymbolFilter" placeholder="Type asset name or id" class="form-control" style="width: 200px" ng-model="asset_id">
+                </div>
+                <div>
+                    <select class="form-control" style="width: 200px" ng-model="operationTypeFilter">
+                        <option value="-1">Filter by operation type</option>
+                        <option value="{{operationType.id}}" ng-repeat="operationType in operationTypes">
+                            {{ operationType.name }}
+                        </option>
+                    </select>
+                </div>
+            </div>
 
             <responsive-table data-data="operations"
                               data-columns="operationsColumns"

app/styles/custom.css

@@ -353,6 +353,15 @@ ul.scrollable-tabs-shadow-right:after {
     z-index: 1000;
 }
 
+.dashboard-operations-filters > div {
+    margin-right: 12px;
+}
+
+.dashboard-operations-filters {
+    display: flex;
+    margin-bottom: 16px;
+}
+
 .market--tv_chart_container {
     height: 43vh;
 }