feat(UX): persist search criterias (#2425)

* feat(ui): persist search criteria

* fix(ui): trying make templates search working correctly

* fix(ui): corrected search persistance on home and templates

* fix(ui): corrected javascript errors
pull/2449/head
Olli Janatuinen 2018-12-06 21:54:34 +02:00 committed by Anthony Lapenna
parent 1a94158f77
commit 2541f4daea
45 changed files with 192 additions and 81 deletions

View File

@ -8,7 +8,7 @@
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter"
placeholder="Search..." auto-focus> ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells"> <table class="table table-hover table-filters nowrap-cells">

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -109,7 +109,7 @@
></containers-datatable-actions> ></containers-datatable-actions>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells"> <table class="table table-hover table-filters nowrap-cells">

View File

@ -78,6 +78,10 @@ function (PaginationService, DatatableService, EndpointProvider) {
} }
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.onColumnVisibilityChange = function() { this.onColumnVisibilityChange = function() {
DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility); DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
}; };
@ -227,6 +231,11 @@ function (PaginationService, DatatableService, EndpointProvider) {
this.columnVisibility = storedColumnVisibility; this.columnVisibility = storedColumnVisibility;
} }
this.columnVisibility.state.open = false; this.columnVisibility.state.open = false;
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -16,7 +16,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells"> <table class="table table-hover table-filters nowrap-cells">

View File

@ -17,6 +17,10 @@ angular.module('portainer.docker')
} }
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function (orderField) { this.changeOrderBy = function (orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -130,6 +134,11 @@ angular.module('portainer.docker')
this.updateStoredFilters(storedFilters.state.values); this.updateStoredFilters(storedFilters.state.values);
} }
this.filters.state.open = false; this.filters.state.open = false;
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -37,7 +37,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells"> <table class="table table-hover table-filters nowrap-cells">

View File

@ -22,6 +22,10 @@ function (PaginationService, DatatableService) {
} }
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function(orderField) { this.changeOrderBy = function(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -86,6 +90,11 @@ function (PaginationService, DatatableService) {
this.filters = storedFilters; this.filters = storedFilters;
} }
this.filters.usage.open = false; this.filters.usage.open = false;
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -14,7 +14,7 @@
></services-datatable-actions> ></services-datatable-actions>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -16,6 +16,10 @@ function (PaginationService, DatatableService, EndpointProvider) {
publicURL: EndpointProvider.endpointPublicURL() publicURL: EndpointProvider.endpointPublicURL()
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function(orderField) { this.changeOrderBy = function(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -109,6 +113,11 @@ function (PaginationService, DatatableService, EndpointProvider) {
if (storedExpandedItems !== null) { if (storedExpandedItems !== null) {
this.expandItems(storedExpandedItems); this.expandItems(storedExpandedItems);
} }
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..."> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -14,6 +14,10 @@ function (PaginationService, DatatableService) {
selectedItems: [] selectedItems: []
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function(orderField) { this.changeOrderBy = function(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -52,6 +56,11 @@ function (PaginationService, DatatableService) {
this.state.reverseOrder = storedOrder.reverse; this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy; this.state.orderBy = storedOrder.orderBy;
} }
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-filters nowrap-cells"> <table class="table table-hover table-filters nowrap-cells">

View File

@ -22,6 +22,10 @@ function (PaginationService, DatatableService) {
} }
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function(orderField) { this.changeOrderBy = function(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -86,6 +90,11 @@ function (PaginationService, DatatableService) {
this.filters = storedFilters; this.filters = storedFilters;
} }
this.filters.usage.open = false; this.filters.usage.open = false;
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">

View File

@ -8,7 +8,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">

View File

@ -14,7 +14,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover"> <table class="table table-hover">

View File

@ -2,7 +2,7 @@
<table class="table table-hover"> <table class="table table-hover">
<div class="col-sm-12"> <div class="col-sm-12">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..."> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
</div> </div>
<thead> <thead>
<tr> <tr>

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -11,6 +11,11 @@ function (PaginationService, DatatableService) {
selectedItems: [] selectedItems: []
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function(orderField) { this.changeOrderBy = function(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -49,6 +54,12 @@ function (PaginationService, DatatableService) {
this.state.reverseOrder = storedOrder.reverse; this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy; this.state.orderBy = storedOrder.orderBy;
} }
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
this.onTextFilterChange();
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -17,7 +17,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -11,6 +11,10 @@ function (PaginationService, DatatableService) {
selectedItems: [] selectedItems: []
}; };
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
};
this.changeOrderBy = function(orderField) { this.changeOrderBy = function(orderField) {
this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false; this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
this.state.orderBy = orderField; this.state.orderBy = orderField;
@ -49,6 +53,11 @@ function (PaginationService, DatatableService) {
this.state.reverseOrder = storedOrder.reverse; this.state.reverseOrder = storedOrder.reverse;
this.state.orderBy = storedOrder.orderBy; this.state.orderBy = storedOrder.orderBy;
} }
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
}; };
function setDefaults(ctrl) { function setDefaults(ctrl) {

View File

@ -14,7 +14,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..."> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -14,7 +14,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..."> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -14,7 +14,7 @@
</div> </div>
<div class="searchBar"> <div class="searchBar">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..."> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover nowrap-cells"> <table class="table table-hover nowrap-cells">

View File

@ -1,5 +1,5 @@
angular.module('portainer.app').controller('EndpointListController', [ angular.module('portainer.app').controller('EndpointListController', ['DatatableService',
function EndpointListController() { function EndpointListController(DatatableService) {
var ctrl = this; var ctrl = this;
ctrl.state = { ctrl.state = {
textFilter: '', textFilter: '',
@ -7,7 +7,7 @@ angular.module('portainer.app').controller('EndpointListController', [
}; };
ctrl.$onChanges = $onChanges; ctrl.$onChanges = $onChanges;
ctrl.onFilterChanged = onFilterChanged; ctrl.onTextFilterChange = onTextFilterChange;
function $onChanges(changesObj) { function $onChanges(changesObj) {
handleEndpointsChange(changesObj.endpoints); handleEndpointsChange(changesObj.endpoints);
@ -21,15 +21,16 @@ angular.module('portainer.app').controller('EndpointListController', [
return; return;
} }
onFilterChanged(); onTextFilterChange();
} }
function onFilterChanged() { function onTextFilterChange() {
var filterValue = ctrl.state.textFilter; var filterValue = ctrl.state.textFilter;
ctrl.state.filteredEndpoints = filterEndpoints( ctrl.state.filteredEndpoints = filterEndpoints(
ctrl.endpoints, ctrl.endpoints,
filterValue filterValue
); );
DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
} }
function filterEndpoints(endpoints, filterValue) { function filterEndpoints(endpoints, filterValue) {
@ -57,5 +58,13 @@ angular.module('portainer.app').controller('EndpointListController', [
function convertStatusToString(status) { function convertStatusToString(status) {
return status === 1 ? 'up' : 'down'; return status === 1 ? 'up' : 'down';
} }
this.$onInit = function() {
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
onTextFilterChange();
}
};
} }
]); ]);

View File

@ -5,6 +5,7 @@ angular.module('portainer.app').component('endpointList', {
titleText: '@', titleText: '@',
titleIcon: '@', titleIcon: '@',
endpoints: '<', endpoints: '<',
tableKey: '@',
dashboardAction: '<', dashboardAction: '<',
snapshotAction: '<', snapshotAction: '<',
showSnapshotAction: '<', showSnapshotAction: '<',

View File

@ -20,7 +20,7 @@
type="text" type="text"
class="searchInput" class="searchInput"
ng-model="$ctrl.state.textFilter" ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onFilterChanged()" ng-change="$ctrl.onTextFilterChange()"
placeholder="Search by name, group, tag, status, URL..." auto-focus> placeholder="Search by name, group, tag, status, URL..." auto-focus>
</div> </div>

View File

@ -2,7 +2,7 @@
<table class="table table-hover"> <table class="table table-hover">
<div class="col-sm-12"> <div class="col-sm-12">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..."> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search...">
</div> </div>
<thead> <thead>
<tr> <tr>

View File

@ -0,0 +1,56 @@
angular.module('portainer.app').controller('TemplateListController', ['DatatableService',
function TemplateListController(DatatableService) {
var ctrl = this;
this.state = {
textFilter: '',
selectedCategory: '',
categories: [],
showContainerTemplates: true
};
this.onTextFilterChange = function() {
DatatableService.setDataTableTextFilters(this.tableKey, this.state.textFilter);
}
this.updateCategories = function() {
var availableCategories = [];
for (var i = 0; i < ctrl.templates.length; i++) {
var template = ctrl.templates[i];
if ((template.Type === 1 && ctrl.state.showContainerTemplates) || (template.Type === 2 && ctrl.showSwarmStacks) || (template.Type === 3 && !ctrl.showSwarmStacks)) {
availableCategories = availableCategories.concat(template.Categories);
}
}
this.state.categories = _.sortBy(_.uniq(availableCategories));
};
this.filterByCategory = function(item) {
if (!ctrl.state.selectedCategory) {
return true;
}
return _.includes(item.Categories, ctrl.state.selectedCategory);
};
this.filterByType = function(item) {
if ((item.Type === 1 && ctrl.state.showContainerTemplates) || (item.Type === 2 && ctrl.showSwarmStacks) || (item.Type === 3 && !ctrl.showSwarmStacks)) {
return true;
}
return false;
};
this.$onInit = function() {
if (this.showSwarmStacks) {
this.state.showContainerTemplates = false;
}
this.updateCategories();
var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
if (textFilter !== null) {
this.state.textFilter = textFilter;
}
};
}
]);

View File

@ -1,54 +1,11 @@
angular.module('portainer.app').component('templateList', { angular.module('portainer.app').component('templateList', {
templateUrl: 'app/portainer/components/template-list/templateList.html', templateUrl: 'app/portainer/components/template-list/templateList.html',
controller: function() { controller: 'TemplateListController',
var ctrl = this;
this.state = {
textFilter: '',
selectedCategory: '',
categories: [],
showContainerTemplates: true
};
this.updateCategories = function() {
var availableCategories = [];
for (var i = 0; i < ctrl.templates.length; i++) {
var template = ctrl.templates[i];
if ((template.Type === 1 && ctrl.state.showContainerTemplates) || (template.Type === 2 && ctrl.showSwarmStacks) || (template.Type === 3 && !ctrl.showSwarmStacks)) {
availableCategories = availableCategories.concat(template.Categories);
}
}
this.state.categories = _.sortBy(_.uniq(availableCategories));
};
this.filterByCategory = function(item) {
if (!ctrl.state.selectedCategory) {
return true;
}
return _.includes(item.Categories, ctrl.state.selectedCategory);
};
this.filterByType = function(item) {
if ((item.Type === 1 && ctrl.state.showContainerTemplates) || (item.Type === 2 && ctrl.showSwarmStacks) || (item.Type === 3 && !ctrl.showSwarmStacks)) {
return true;
}
return false;
};
this.$onInit = function() {
if (this.showSwarmStacks) {
this.state.showContainerTemplates = false;
}
this.updateCategories();
};
},
bindings: { bindings: {
titleText: '@', titleText: '@',
titleIcon: '@', titleIcon: '@',
templates: '<', templates: '<',
tableKey: '@',
selectAction: '<', selectAction: '<',
deleteAction: '<', deleteAction: '<',
showSwarmStacks: '<', showSwarmStacks: '<',

View File

@ -37,7 +37,7 @@
<div class="searchBar" style="border-top: 2px solid #f6f6f6;"> <div class="searchBar" style="border-top: 2px solid #f6f6f6;">
<i class="fa fa-search searchIcon" aria-hidden="true"></i> <i class="fa fa-search searchIcon" aria-hidden="true"></i>
<input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus> <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
</div> </div>
<div class="blocklist"> <div class="blocklist">

View File

@ -13,6 +13,14 @@ function DatatableServiceFactory(LocalStorage) {
return LocalStorage.getDataTableSettings(key); return LocalStorage.getDataTableSettings(key);
}; };
service.setDataTableTextFilters = function(key, filters) {
LocalStorage.storeDataTableTextFilters(key, filters);
};
service.getDataTableTextFilters = function(key) {
return LocalStorage.getDataTableTextFilters(key);
};
service.setDataTableFilters = function(key, filters) { service.setDataTableFilters = function(key, filters) {
LocalStorage.storeDataTableFilters(key, filters); LocalStorage.storeDataTableFilters(key, filters);
}; };

View File

@ -65,6 +65,12 @@ angular.module('portainer.app')
storeDataTableOrder: function(key, data) { storeDataTableOrder: function(key, data) {
localStorageService.set('datatable_order_' + key, data); localStorageService.set('datatable_order_' + key, data);
}, },
getDataTableTextFilters: function(key) {
return localStorageService.get('datatable_text_filter_' + key);
},
storeDataTableTextFilters: function(key, data) {
localStorageService.set('datatable_text_filter_' + key, data);
},
getDataTableFilters: function(key) { getDataTableFilters: function(key) {
return localStorageService.get('datatable_filters_' + key); return localStorageService.get('datatable_filters_' + key);
}, },

View File

@ -40,7 +40,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<endpoint-list <endpoint-list
title-text="Endpoints" title-icon="fa-plug" title-text="Endpoints" title-icon="fa-plug"
endpoints="endpoints" endpoints="endpoints" table-key="endpoints"
dashboard-action="goToDashboard" dashboard-action="goToDashboard"
show-snapshot-action="!applicationState.application.authentication || isAdmin" show-snapshot-action="!applicationState.application.authentication || isAdmin"
snapshot-action="triggerSnapshot" snapshot-action="triggerSnapshot"

View File

@ -350,7 +350,7 @@
<div class="col-sm-12"> <div class="col-sm-12">
<template-list ng-if="templates" <template-list ng-if="templates"
title-text="Templates" title-icon="fa-rocket" title-text="Templates" title-icon="fa-rocket"
templates="templates" templates="templates" table-key="templates"
select-action="selectTemplate" select-action="selectTemplate"
delete-action="deleteTemplate" delete-action="deleteTemplate"
show-add-action="state.templateManagement && isAdmin" show-add-action="state.templateManagement && isAdmin"