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
2018-12-06 21:54:34 +02:00 · 2018-12-06 21:54:34 +02:00 · 2541f4daea
parent 1a94158f77
commit 2541f4daea
45 changed files with 192 additions and 81 deletions
--- a/app/agent/components/files-datatable/files-datatable.html
+++ b/app/agent/components/files-datatable/files-datatable.html
@ -8,7 +8,7 @@
      <div class="searchBar">
        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter"
-          placeholder="Search..." auto-focus>
+          ng-change="$ctrl.onTextFilterChange()" placeholder="Search..." auto-focus>
      </div>
      <div class="table-responsive">
        <table class="table">
--- a/app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html
+++ b/app/azure/components/datatables/containergroups-datatable/containerGroupsDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover table-filters nowrap-cells">
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/containers-datatable/containersDatatable.html
+++ b/app/docker/components/datatables/containers-datatable/containersDatatable.html
@ -109,7 +109,7 @@
      ></containers-datatable-actions>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover table-filters nowrap-cells">
--- a/app/docker/components/datatables/containers-datatable/containersDatatableController.js
+++ b/app/docker/components/datatables/containers-datatable/containersDatatableController.js
@ -78,6 +78,10 @@ function (PaginationService, DatatableService, EndpointProvider) {
    }
  };

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

  function setDefaults(ctrl) {
--- a/app/docker/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/docker/components/datatables/events-datatable/eventsDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/host-jobs-datatable/jobsDatatable.html
+++ b/app/docker/components/datatables/host-jobs-datatable/jobsDatatable.html
@ -16,7 +16,7 @@
          </div>
          <div class="searchBar">
            <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 class="table-responsive">
            <table class="table table-hover table-filters nowrap-cells">
--- a/app/docker/components/datatables/host-jobs-datatable/jobsDatatableController.js
+++ b/app/docker/components/datatables/host-jobs-datatable/jobsDatatableController.js
@ -17,6 +17,10 @@ angular.module('portainer.docker')
        }
      };

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

      function setDefaults(ctrl) {
--- a/app/docker/components/datatables/images-datatable/imagesDatatable.html
+++ b/app/docker/components/datatables/images-datatable/imagesDatatable.html
@ -37,7 +37,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover table-filters nowrap-cells">
--- a/app/docker/components/datatables/images-datatable/imagesDatatableController.js
+++ b/app/docker/components/datatables/images-datatable/imagesDatatableController.js
@ -22,6 +22,10 @@ function (PaginationService, DatatableService) {
    }
  };

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

  function setDefaults(ctrl) {
--- a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
+++ b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
+++ b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@ -14,7 +14,7 @@
      ></services-datatable-actions>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/services-datatable/servicesDatatableController.js
+++ b/app/docker/components/datatables/services-datatable/servicesDatatableController.js
@ -16,6 +16,10 @@ function (PaginationService, DatatableService, EndpointProvider) {
    publicURL: EndpointProvider.endpointPublicURL()
  };

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

  function setDefaults(ctrl) {
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatableController.js
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatableController.js
@ -14,6 +14,10 @@ function (PaginationService, DatatableService) {
    selectedItems: []
  };

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

  function setDefaults(ctrl) {
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover table-filters nowrap-cells">
--- a/app/docker/components/datatables/volumes-datatable/volumesDatatableController.js
+++ b/app/docker/components/datatables/volumes-datatable/volumesDatatableController.js
@ -22,6 +22,10 @@ function (PaginationService, DatatableService) {
    }
  };

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

  function setDefaults(ctrl) {
--- a/app/extensions/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.html
+++ b/app/extensions/storidge/components/cluster-events-datatable/storidgeClusterEventsDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover">
--- a/app/extensions/storidge/components/nodes-datatable/storidgeNodesDatatable.html
+++ b/app/extensions/storidge/components/nodes-datatable/storidgeNodesDatatable.html
@ -8,7 +8,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover">
--- a/app/extensions/storidge/components/profiles-datatable/storidgeProfilesDatatable.html
+++ b/app/extensions/storidge/components/profiles-datatable/storidgeProfilesDatatable.html
@ -14,7 +14,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover">
--- a/app/portainer/components/access-table/accessTable.html
+++ b/app/portainer/components/access-table/accessTable.html
@ -2,7 +2,7 @@
  <table class="table table-hover">
    <div class="col-sm-12">
      <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>
    <thead>
      <tr>
--- a/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
+++ b/app/portainer/components/datatables/endpoints-datatable/endpointsDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/datatables/genericDatatableController.js
+++ b/app/portainer/components/datatables/genericDatatableController.js
@ -11,6 +11,11 @@ function (PaginationService, DatatableService) {
    selectedItems: []
  };

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

  function setDefaults(ctrl) {
--- a/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
+++ b/app/portainer/components/datatables/groups-datatable/groupsDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
+++ b/app/portainer/components/datatables/registries-datatable/registriesDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatable.html
@ -17,7 +17,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/datatables/stacks-datatable/stacksDatatableController.js
+++ b/app/portainer/components/datatables/stacks-datatable/stacksDatatableController.js
@ -11,6 +11,10 @@ function (PaginationService, DatatableService) {
    selectedItems: []
  };

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

  function setDefaults(ctrl) {
--- a/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
+++ b/app/portainer/components/datatables/tags-datatable/tagsDatatable.html
@ -14,7 +14,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
+++ b/app/portainer/components/datatables/teams-datatable/teamsDatatable.html
@ -14,7 +14,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/datatables/users-datatable/usersDatatable.html
+++ b/app/portainer/components/datatables/users-datatable/usersDatatable.html
@ -14,7 +14,7 @@
      </div>
      <div class="searchBar">
        <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 class="table-responsive">
        <table class="table table-hover nowrap-cells">
--- a/app/portainer/components/endpoint-list/endpoint-list-controller.js
+++ b/app/portainer/components/endpoint-list/endpoint-list-controller.js
@ -1,5 +1,5 @@
-angular.module('portainer.app').controller('EndpointListController', [
-  function EndpointListController() {
+angular.module('portainer.app').controller('EndpointListController', ['DatatableService',
+  function EndpointListController(DatatableService) {
    var ctrl = this;
    ctrl.state = {
      textFilter: '',
@ -7,7 +7,7 @@ angular.module('portainer.app').controller('EndpointListController', [
    };

    ctrl.$onChanges = $onChanges;
-    ctrl.onFilterChanged = onFilterChanged;
+    ctrl.onTextFilterChange = onTextFilterChange;

    function $onChanges(changesObj) {
      handleEndpointsChange(changesObj.endpoints);
@ -21,15 +21,16 @@ angular.module('portainer.app').controller('EndpointListController', [
        return;
      }

-      onFilterChanged();
+      onTextFilterChange();
    }

-    function onFilterChanged() {
+    function onTextFilterChange() {
      var filterValue = ctrl.state.textFilter;
      ctrl.state.filteredEndpoints = filterEndpoints(
        ctrl.endpoints,
        filterValue
      );
+      DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
    }

    function filterEndpoints(endpoints, filterValue) {
@ -57,5 +58,13 @@ angular.module('portainer.app').controller('EndpointListController', [
    function convertStatusToString(status) {
      return status === 1 ? 'up' : 'down';
    }
+
+    this.$onInit = function() {
+      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
+      if (textFilter !== null) {
+        this.state.textFilter = textFilter;
+        onTextFilterChange();
+      }
+    };
  }
 ]);
--- a/app/portainer/components/endpoint-list/endpoint-list.js
+++ b/app/portainer/components/endpoint-list/endpoint-list.js
@ -5,6 +5,7 @@ angular.module('portainer.app').component('endpointList', {
    titleText: '@',
    titleIcon: '@',
    endpoints: '<',
+    tableKey: '@',
    dashboardAction: '<',
    snapshotAction: '<',
    showSnapshotAction: '<',
--- a/app/portainer/components/endpoint-list/endpointList.html
+++ b/app/portainer/components/endpoint-list/endpointList.html
@ -20,7 +20,7 @@
          type="text"
          class="searchInput"
          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onFilterChanged()"
+          ng-change="$ctrl.onTextFilterChange()"
          placeholder="Search by name, group, tag, status, URL..." auto-focus>
      </div>

--- a/app/portainer/components/group-association-table/groupAssociationTable.html
+++ b/app/portainer/components/group-association-table/groupAssociationTable.html
@ -2,7 +2,7 @@
  <table class="table table-hover">
    <div class="col-sm-12">
      <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>
    <thead>
      <tr>
--- a/app/portainer/components/template-list/template-list-controller.js
+++ b/app/portainer/components/template-list/template-list-controller.js
@ -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;
+      }
+    };
+  }
+]);
--- a/app/portainer/components/template-list/template-list.js
+++ b/app/portainer/components/template-list/template-list.js
@ -1,54 +1,11 @@
 angular.module('portainer.app').component('templateList', {
  templateUrl: 'app/portainer/components/template-list/templateList.html',
-  controller: function() {
-    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();
-    };
-  },
+  controller: 'TemplateListController',
  bindings: {
    titleText: '@',
    titleIcon: '@',
    templates: '<',
+    tableKey: '@',
    selectAction: '<',
    deleteAction: '<',
    showSwarmStacks: '<',
--- a/app/portainer/components/template-list/templateList.html
+++ b/app/portainer/components/template-list/templateList.html
@ -37,7 +37,7 @@

      <div class="searchBar" style="border-top: 2px solid #f6f6f6;">
        <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 class="blocklist">
--- a/app/portainer/services/datatableService.js
+++ b/app/portainer/services/datatableService.js
@ -13,6 +13,14 @@ function DatatableServiceFactory(LocalStorage) {
    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) {
    LocalStorage.storeDataTableFilters(key, filters);
  };
--- a/app/portainer/services/localStorage.js
+++ b/app/portainer/services/localStorage.js
@ -65,6 +65,12 @@ angular.module('portainer.app')
    storeDataTableOrder: function(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) {
      return localStorageService.get('datatable_filters_' + key);
    },
--- a/app/portainer/views/home/home.html
+++ b/app/portainer/views/home/home.html
@ -40,7 +40,7 @@
  <div class="col-sm-12">
    <endpoint-list
      title-text="Endpoints" title-icon="fa-plug"
-      endpoints="endpoints"
+      endpoints="endpoints" table-key="endpoints"
      dashboard-action="goToDashboard"
      show-snapshot-action="!applicationState.application.authentication || isAdmin"
      snapshot-action="triggerSnapshot"
--- a/app/portainer/views/templates/templates.html
+++ b/app/portainer/views/templates/templates.html
@ -350,7 +350,7 @@
  <div class="col-sm-12">
    <template-list ng-if="templates"
      title-text="Templates" title-icon="fa-rocket"
-      templates="templates"
+      templates="templates" table-key="templates"
      select-action="selectTemplate"
      delete-action="deleteTemplate"
      show-add-action="state.templateManagement && isAdmin"