Skip to content

Commit

Permalink
#23 Add filters for responsive-table and use operations-table like an…
Browse files Browse the repository at this point in the history 
… example
  • Loading branch information
@ihorml
ihorml committed Nov 29, 2022
1 parent 77a318f commit 4718755
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 6 deletions.
3 changes: 3 additions & 0 deletions app/images/filter-on.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
81 changes: 75 additions & 6 deletions app/sections/operations/operations-table.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ Use this field show / hide user filters
if(!name)
return false;
return {
id: key,
value: key,
name,
}
}).filter((item) => !!item);
Expand Down Expand Up @@ -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 = () => {
Expand Down
9 changes: 9 additions & 0 deletions app/ui/responsive-table.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ====
* ===================
Expand Down
54 changes: 54 additions & 0 deletions app/ui/responsive-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 4718755

Please sign in to comment.