From 47187557be06a51e7f131b37c264306e1bd489e9 Mon Sep 17 00:00:00 2001
From: Ihor Brazhnichenko <ihor.bra@gmail.com>
Date: Tue, 29 Nov 2022 19:40:29 +0200
Subject: [PATCH] #23 Add filters for responsive-table and use operations-table
 like an example

---
 app/images/filter-on.svg                      |  3 +
 .../operations/operations-table.directive.js  | 81 +++++++++++++++++--
 app/ui/responsive-table.directive.js          |  9 +++
 app/ui/responsive-table.html                  | 54 +++++++++++++
 4 files changed, 141 insertions(+), 6 deletions(-)
 create mode 100644 app/images/filter-on.svg

diff --git a/app/images/filter-on.svg b/app/images/filter-on.svg
new file mode 100644
index 0000000..b3a29a4
--- /dev/null
+++ b/app/images/filter-on.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58954 9.09588L3.93725 3.86703C3.60333 3.55813 3.82191 3 4.2768 3H19.7232C20.1781 3 20.3967 3.55813 20.0628 3.86703L14.4105 9.09588C14.3082 9.19052 14.25 9.32356 14.25 9.46292V20.451C14.25 20.9363 13.6281 21.1371 13.3444 20.7433L9.84437 15.8866C9.78302 15.8015 9.75 15.6992 9.75 15.5943V9.46292C9.75 9.32356 9.69184 9.19052 9.58954 9.09588Z" fill="#82CA80" stroke="#82CA80"/>
+</svg>
diff --git a/app/sections/operations/operations-table.directive.js b/app/sections/operations/operations-table.directive.js
index eb4dfea..072e2fd 100644
--- a/app/sections/operations/operations-table.directive.js
+++ b/app/sections/operations/operations-table.directive.js
@@ -88,7 +88,7 @@ Use this field show / hide user filters
                 if(!name)
                     return false;
                 return {
-                    id: key,
+                    value: key,
                     name,
                 }
             }).filter((item) => !!item);
@@ -119,12 +119,81 @@ Use this field show / hide user filters
             // see the issue: https://github.com/blocksights/blocksights-open-explorer/issues/15
             $scope.userOpenedFirstPageTime = null;
             
+            const filters = [
+                $scope.filterByAssetIdEnabled !== false ? {
+                    width: '150px',
+                    defaultValue: '',
+                    placeholder: 'Search by asset',
+                    onChange: (value) => {
+                        $scope.filters.assetIdOrName = value;
+                        $scope.select(1, true);
+                    },
+                    modelOptions: {
+                        debounce: 500,
+                        getterSetter: true
+                    }
+                } : null,
+                $scope.filterByAccountIdEnabled !== false ? {
+                    width: '150px',
+                    defaultValue: '',
+                    placeholder: 'Search by account',
+                    onChange: (value) => {
+                        $scope.filters.accountIdOrName = value;
+                        $scope.select(1, true);
+                    },
+                    modelOptions: {
+                        debounce: 500,
+                        getterSetter: true
+                    }
+                } : null,
+            ].filter((item) => !!item);
+            
             $scope.operationsColumns = $scope.columns || [
-                OperationsService.columns.OPERATION_TEXT,
-                OperationsService.columns.OPERATION_ID,
-                OperationsService.columns.DATETIME,
-                OperationsService.columns.BLOCK,
-                OperationsService.columns.TYPE,
+                {
+                    title: $filter('translate')('Operation'),
+                    index: 'operation_text',
+                    onFilterCancel: () => {
+                        $scope.filters.assetIdOrName = undefined;
+                        $scope.filters.accountIdOrName = undefined;
+                        $scope.select(1, true)
+                    },
+                    filter: filters.length ? filters : undefined
+                },
+                {
+                    title: $filter('translate')('ID'),
+                    index: 'operation_id',
+                },
+                {
+                    title: $filter('translate')('Date and time'),
+                    index: 'time',
+                    hidden: ['xs']
+                },
+                {
+                    title: $filter('translate')('Block'),
+                    index: 'block_num',
+                    hidden: ['xs', 'sm']
+                },
+                {
+                    title: $filter('translate')('Type'),
+                    index: 'type',
+                    hidden: ['xs', 'sm', 'md'],
+                    onFilterCancel: () => {
+                        $scope.filters.operationType = '-1';
+                        $scope.select(1, true)
+                    },
+                    filter: $scope.filterByOperationTypeEnabled !== false ? [
+                        {
+                            width: '300px',
+                            placeholder: 'Filter by operation id',
+                            defaultValue: '-1',
+                            onChange: (value) => {
+                                $scope.filters.operationType = value;
+                                $scope.select(1, true);
+                            },
+                            options: $scope.operationTypes
+                        }
+                    ] : undefined
+                }
             ];
             
             $scope.loadMore = () => {
diff --git a/app/ui/responsive-table.directive.js b/app/ui/responsive-table.directive.js
index 50900bd..4ae91d8 100644
--- a/app/ui/responsive-table.directive.js
+++ b/app/ui/responsive-table.directive.js
@@ -38,6 +38,15 @@
  *
  * columns[].sortReverse {boolean}       - Reverse the sorting when user sort the column
  * columns[].sortByDefault {boolean}     - Turns on the sorting for the column when page loads
+ *
+ * columns[].filter[]                      - use an array to apply one or more filters to specific column
+ * columns[].filter[].width                - The width of input/select
+ * columns[].filter[].placeholder          - The placeholder of input/select
+ * columns[].filter[].defaultValue         - Default value, please use '-1' for select
+ * columns[].filter[].onChange(value)      - Handler for filter changes
+ * columns[].filter[].onFilterCancel       - Handler when filter canceled (for e.g. to fetch non filtered data)
+ * columns[].filter[].modelOptions         - ng-model-options
+ * columns[].filter[].options              - use this for <select>, if <options> missed - the filter will be a simple input[type=text]
  * ===================
  * ===== Data API ====
  * ===================
diff --git a/app/ui/responsive-table.html b/app/ui/responsive-table.html
index caf8df8..14c3c66 100644
--- a/app/ui/responsive-table.html
+++ b/app/ui/responsive-table.html
@@ -11,6 +11,33 @@
             <th ng-repeat="column in columns track by column.title" class="{{ columnClass[column.title] ||  '' }}" ng-class="column.sort ? 'responsive-table-sort-enabled' : 'responsive-table-sort-disabled'" ng-click="sort(column)">
                 {{column.title}}
                 <span ng-if="column.index === sortingParameter" class="responsive-table-sort-button" ng-class="sortingOrder ? 'responsive-table-sort-button-desc' : 'responsive-table-sort-button-asc'"></span>
+
+                <img ng-if="column.filter" src="{{ column.showFilter ? 'images/filter-on.svg' : 'images/filter.svg' }}" ng-click="column.showFilter = !column.showFilter; !column.showFilter ? column.onFilterCancel() : null" class="operations-filter"/>
+                <span ng-repeat="filter in column.filter" ng-if="column.showFilter" style="display: inline-block; margin-right: 5px;">
+                    <select ng-if="filter.options"
+                            ng-change="filter.onChange(filter.optionValue)"
+                            class="form-control"
+                            ng-model="filter.optionValue"
+                            ng-init="filter.optionValue = filter.defaultValue"
+                            style="width: {{column.filter.width || '200px'}}"
+                    >
+                        <option value="-1">{{filter.placeholder}}</option>
+                        <option value="{{option.value}}" ng-repeat="option in filter.options">
+                            {{ option.name }}
+                        </option>
+                    </select>
+                    <div ng-if="!filter.options">
+                        <input type="text"
+                               ng-change="filter.onChange(filter.value)"
+                               ng-model-options="filter.modelOptions || {}"
+                               ng-model="filter.value"
+                               placeholder="{{ filter.placeholder }}"
+                               ng-init="filter.optionValue = filter.defaultValue || ''"
+                               class="form-control"
+                               style="width: {{filter.width || '200px'}}"
+                        />
+                    </div>
+                </span>
             </th>
         </tr>
         </thead>
@@ -53,6 +80,33 @@
                             <strong>
                                 {{column.title}}:
                             </strong>
+
+                            <img ng-if="column.filter" src="{{ column.showFilter ? 'images/filter-on.svg' : 'images/filter.svg' }}" ng-click="column.showFilter = !column.showFilter; !column.showFilter ? column.onFilterCancel() : null" class="operations-filter"/>
+                            <span ng-repeat="filter in column.filter" ng-if="column.showFilter" style="display: inline-block; margin-right: 5px;">
+                                <select ng-if="filter.options"
+                                        ng-change="filter.onChange(filter.optionValue)"
+                                        class="form-control"
+                                        ng-model="filter.optionValue"
+                                        ng-init="filter.optionValue = filter.defaultValue"
+                                        style="width: {{column.filter.width || '200px'}}"
+                                >
+                                    <option value="-1">{{filter.placeholder}}</option>
+                                    <option value="{{option.value}}" ng-repeat="option in filter.options">
+                                        {{ option.name }}
+                                    </option>
+                                </select>
+                                <div ng-if="!filter.options">
+                                    <input type="text"
+                                           ng-change="filter.onChange(filter.value)"
+                                           ng-model-options="filter.modelOptions || {}"
+                                           ng-model="filter.value"
+                                           placeholder="{{ filter.placeholder }}"
+                                           ng-init="filter.optionValue = filter.defaultValue || ''"
+                                           class="form-control"
+                                           style="width: {{filter.width || '200px'}}"
+                                    />
+                                </div>
+                            </span>
                         </td>
                         <td>
                             <div ng-include style="padding-left: 12px;padding-top: 6px;" src="template" onload="row = item; cell = item[column.index]; index = column.index"></div>