From 1534549d859591d70b73c5b2b8e03028b89e6b3b Mon Sep 17 00:00:00 2001
From: oleg <oleg@thingsboard.io>
Date: Thu, 22 Mar 2018 14:09:02 +0200
Subject: [PATCH] UI:Improvement. "Widget auto focus on search input"

---
 .../widget/action/manage-widget-actions.directive.js  |  9 ++++++++-
 .../widget/action/manage-widget-actions.tpl.html      |  6 +++---
 .../app/entity/attribute/attribute-table.directive.js | 11 +++++++++--
 ui/src/app/entity/attribute/attribute-table.tpl.html  |  6 +++---
 .../app/entity/relation/relation-table.directive.js   | 11 +++++++++--
 ui/src/app/entity/relation/relation-table.tpl.html    |  6 +++---
 ui/src/app/extension/extension-table.directive.js     | 10 ++++++++--
 ui/src/app/extension/extension-table.tpl.html         |  6 +++---
 ui/src/app/widget/lib/alarms-table-widget.js          |  5 ++++-
 ui/src/app/widget/lib/alarms-table-widget.tpl.html    |  2 +-
 ui/src/app/widget/lib/entities-table-widget.js        |  5 ++++-
 ui/src/app/widget/lib/entities-table-widget.tpl.html  |  2 +-
 ui/src/app/widget/lib/timeseries-table-widget.js      |  5 ++++-
 .../app/widget/lib/timeseries-table-widget.tpl.html   |  2 +-
 14 files changed, 61 insertions(+), 25 deletions(-)

diff --git a/ui/src/app/components/widget/action/manage-widget-actions.directive.js b/ui/src/app/components/widget/action/manage-widget-actions.directive.js
index 81c40cd3fd..88a37a876e 100644
--- a/ui/src/app/components/widget/action/manage-widget-actions.directive.js
+++ b/ui/src/app/components/widget/action/manage-widget-actions.directive.js
@@ -111,8 +111,15 @@ function ManageWidgetActionsController($rootScope, $scope, $document, $mdDialog,
         }
     });
 
-    function enterFilterMode () {
+    function enterFilterMode (event) {
+        let $button = angular.element(event.currentTarget);
+        let $toolbarsContainer = $button.closest('.toolbarsContainer');
+
         vm.query.search = '';
+
+        $timeout(()=>{
+            $toolbarsContainer.find('.searchInput').focus();
+        })
     }
 
     function exitFilterMode () {
diff --git a/ui/src/app/components/widget/action/manage-widget-actions.tpl.html b/ui/src/app/components/widget/action/manage-widget-actions.tpl.html
index fc9262e87a..07f76f2e33 100644
--- a/ui/src/app/components/widget/action/manage-widget-actions.tpl.html
+++ b/ui/src/app/components/widget/action/manage-widget-actions.tpl.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div ng-form="manageWidgetActionsForm" class="tb-manage-widget-actions md-whiteframe-z1" layout="column">
+<div ng-form="manageWidgetActionsForm" class="tb-manage-widget-actions md-whiteframe-z1 toolbarsContainer" layout="column">
     <md-toolbar class="md-table-toolbar md-default" ng-show="vm.query.search === null">
         <div class="md-toolbar-tools">
             <span translate>widget-config.actions</span>
@@ -26,7 +26,7 @@
                     {{ 'widget-config.add-action' | translate }}
                 </md-tooltip>
             </md-button>
-            <md-button class="md-icon-button" ng-click="vm.enterFilterMode()">
+            <md-button class="md-icon-button" ng-click="vm.enterFilterMode($event)">
                 <md-icon>search</md-icon>
                 <md-tooltip md-direction="top">
                     {{ 'action.search' | translate }}
@@ -44,7 +44,7 @@
             </md-button>
             <md-input-container flex>
                 <label>&nbsp;</label>
-                <input ng-model="vm.query.search" name="querySearchInput" placeholder="{{ 'widget-config.search-actions' | translate }}"/>
+                <input ng-model="vm.query.search" class="searchInput" name="querySearchInput" placeholder="{{ 'widget-config.search-actions' | translate }}"/>
             </md-input-container>
             <md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
                 <md-icon aria-label="Close" class="material-icons">close</md-icon>
diff --git a/ui/src/app/entity/attribute/attribute-table.directive.js b/ui/src/app/entity/attribute/attribute-table.directive.js
index b551ae600c..00618541ce 100644
--- a/ui/src/app/entity/attribute/attribute-table.directive.js
+++ b/ui/src/app/entity/attribute/attribute-table.directive.js
@@ -30,7 +30,7 @@ import AliasController from '../../api/alias-controller';
 
 /*@ngInject*/
 export default function AttributeTableDirective($compile, $templateCache, $rootScope, $q, $mdEditDialog, $mdDialog,
-                                                $mdUtil, $document, $translate, $filter, utils, types, dashboardUtils,
+                                                $mdUtil, $document, $translate, $filter, $timeout, utils, types, dashboardUtils,
                                                 entityService, attributeService, widgetService) {
 
     var linker = function (scope, element, attrs) {
@@ -110,8 +110,15 @@ export default function AttributeTableDirective($compile, $templateCache, $rootS
             scope.attributeScope = getAttributeScopeByValue(attrs.defaultAttributeScope);
         }
 
-        scope.enterFilterMode = function() {
+        scope.enterFilterMode = function(event) {
+            let $button = angular.element(event.currentTarget);
+            let $toolbarsContainer = $button.closest('.toolbarsContainer');
+
             scope.query.search = '';
+
+            $timeout(()=>{
+                $toolbarsContainer.find('.searchInput').focus();
+            })
         }
 
         scope.exitFilterMode = function() {
diff --git a/ui/src/app/entity/attribute/attribute-table.tpl.html b/ui/src/app/entity/attribute/attribute-table.tpl.html
index d55a6da99b..ecbcf00fd6 100644
--- a/ui/src/app/entity/attribute/attribute-table.tpl.html
+++ b/ui/src/app/entity/attribute/attribute-table.tpl.html
@@ -26,7 +26,7 @@
             </md-select>
         </md-input-container>
     </section>
-    <div class="md-whiteframe-z1" ng-class="{flex: mode==='widget'}">
+    <div class="md-whiteframe-z1 toolbarsContainer" ng-class="{flex: mode==='widget'}">
         <md-toolbar class="md-table-toolbar md-default" ng-show="mode==='default'
                                                                  && !selectedAttributes.length
                                                                  && query.search === null">
@@ -39,7 +39,7 @@
                         {{ 'action.add' | translate }}
                     </md-tooltip>
                 </md-button>
-                <md-button class="md-icon-button" ng-click="enterFilterMode()">
+                <md-button class="md-icon-button" ng-click="enterFilterMode($event)">
                     <md-icon>search</md-icon>
                     <md-tooltip md-direction="top">
                         {{ 'action.search' | translate }}
@@ -65,7 +65,7 @@
                 </md-button>
                 <md-input-container flex>
                     <label>&nbsp;</label>
-                    <input ng-model="query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
+                    <input ng-model="query.search" class="searchInput" placeholder="{{ 'common.enter-search' | translate }}"/>
                 </md-input-container>
                 <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="exitFilterMode()">
                     <md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
diff --git a/ui/src/app/entity/relation/relation-table.directive.js b/ui/src/app/entity/relation/relation-table.directive.js
index 32478117ee..872042c2fa 100644
--- a/ui/src/app/entity/relation/relation-table.directive.js
+++ b/ui/src/app/entity/relation/relation-table.directive.js
@@ -41,7 +41,7 @@ export default function RelationTable() {
 }
 
 /*@ngInject*/
-function RelationTableController($scope, $q, $mdDialog, $document, $translate, $filter, utils, types, entityRelationService) {
+function RelationTableController($scope, $q, $mdDialog, $document, $translate, $filter, $timeout, utils, types, entityRelationService) {
 
     let vm = this;
 
@@ -90,8 +90,15 @@ function RelationTableController($scope, $q, $mdDialog, $document, $translate, $
         }
     });
 
-    function enterFilterMode () {
+    function enterFilterMode (event) {
+        let $button = angular.element(event.currentTarget);
+        let $toolbarsContainer = $button.closest('.toolbarsContainer');
+
         vm.query.search = '';
+
+        $timeout(()=>{
+            $toolbarsContainer.find('.searchInput').focus();
+        })
     }
 
     function exitFilterMode () {
diff --git a/ui/src/app/entity/relation/relation-table.tpl.html b/ui/src/app/entity/relation/relation-table.tpl.html
index 16d422c751..a2b0920b4e 100644
--- a/ui/src/app/entity/relation/relation-table.tpl.html
+++ b/ui/src/app/entity/relation/relation-table.tpl.html
@@ -26,7 +26,7 @@
             </md-select>
         </md-input-container>
     </section>
-    <div layout="column" class="md-whiteframe-z1">
+    <div layout="column" class="md-whiteframe-z1 toolbarsContainer">
         <md-toolbar class="md-table-toolbar md-default" ng-show="!vm.selectedRelations.length
                                                                  && vm.query.search === null">
             <div class="md-toolbar-tools">
@@ -39,7 +39,7 @@
                         {{ 'action.add' | translate }}
                     </md-tooltip>
                 </md-button>
-                <md-button class="md-icon-button" ng-click="vm.enterFilterMode()">
+                <md-button class="md-icon-button" ng-click="vm.enterFilterMode($event)">
                     <md-icon>search</md-icon>
                     <md-tooltip md-direction="top">
                         {{ 'action.search' | translate }}
@@ -64,7 +64,7 @@
                 </md-button>
                 <md-input-container flex>
                     <label>&nbsp;</label>
-                    <input ng-model="vm.query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
+                    <input ng-model="vm.query.search" class="searchInput" placeholder="{{ 'common.enter-search' | translate }}"/>
                 </md-input-container>
                 <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.exitFilterMode()">
                     <md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
diff --git a/ui/src/app/extension/extension-table.directive.js b/ui/src/app/extension/extension-table.directive.js
index ecd38658f9..18d281c0b0 100644
--- a/ui/src/app/extension/extension-table.directive.js
+++ b/ui/src/app/extension/extension-table.directive.js
@@ -45,7 +45,7 @@ export default function ExtensionTableDirective() {
 }
 
 /*@ngInject*/
-function ExtensionTableController($scope, $filter, $document, $translate, types, $mdDialog, attributeService, telemetryWebsocketService, importExport) {
+function ExtensionTableController($scope, $filter, $document, $translate, $timeout, $mdDialog, types, attributeService, telemetryWebsocketService, importExport) {
 
     let vm = this;
 
@@ -141,11 +141,17 @@ function ExtensionTableController($scope, $filter, $document, $translate, types,
         }
     });
 
-    function enterFilterMode() {
+    function enterFilterMode(event) {
+        let $button = angular.element(event.currentTarget);
+        let $toolbarsContainer = $button.closest('.toolbarsContainer');
+
         vm.query.search = '';
         if(vm.inWidget) {
             vm.ctx.hideTitlePanel = true;
         }
+        $timeout(()=>{
+            $toolbarsContainer.find('.searchInput').focus();
+        })
     }
 
     function exitFilterMode() {
diff --git a/ui/src/app/extension/extension-table.tpl.html b/ui/src/app/extension/extension-table.tpl.html
index 0ad2f4df34..6a482b9ffc 100644
--- a/ui/src/app/extension/extension-table.tpl.html
+++ b/ui/src/app/extension/extension-table.tpl.html
@@ -16,7 +16,7 @@
 
 -->
 <md-content flex class="md-padding tb-absolute-fill tb-data-table extension-table" layout="column">
-    <div layout="column" class="md-whiteframe-z1" ng-class="{'tb-absolute-fill' : vm.inWidget}">
+    <div layout="column" class="md-whiteframe-z1 toolbarsContainer" ng-class="{'tb-absolute-fill' : vm.inWidget}">
         <md-toolbar ng-if="!vm.inWidget" class="md-table-toolbar md-default" ng-show="!vm.selectedExtensions.length
                                                                                       && vm.query.search === null">
             <div class="md-toolbar-tools">
@@ -41,7 +41,7 @@
                         {{ 'action.add' | translate }}
                     </md-tooltip>
                 </md-button>
-                <md-button class="md-icon-button" ng-click="vm.enterFilterMode()">
+                <md-button class="md-icon-button" ng-click="vm.enterFilterMode($event)">
                     <md-icon>search</md-icon>
                     <md-tooltip md-direction="top">
                         {{ 'action.search' | translate }}
@@ -66,7 +66,7 @@
                 </md-button>
                 <md-input-container flex>
                     <label>&nbsp;</label>
-                    <input ng-model="vm.query.search" placeholder="{{ 'common.enter-search' | translate }}"/>
+                    <input ng-model="vm.query.search" class="searchInput" placeholder="{{ 'common.enter-search' | translate }}"/>
                 </md-input-container>
                 <md-button class="md-icon-button" aria-label="{{ 'action.back' | translate }}" ng-click="vm.exitFilterMode()">
                     <md-icon aria-label="{{ 'action.close' | translate }}" class="material-icons">close</md-icon>
diff --git a/ui/src/app/widget/lib/alarms-table-widget.js b/ui/src/app/widget/lib/alarms-table-widget.js
index 0a5bbce8ba..0696a7b873 100644
--- a/ui/src/app/widget/lib/alarms-table-widget.js
+++ b/ui/src/app/widget/lib/alarms-table-widget.js
@@ -45,7 +45,7 @@ function AlarmsTableWidget() {
 }
 
 /*@ngInject*/
-function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDialog, $document, $translate, $q, alarmService, utils, types) {
+function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDialog, $document, $translate, $q, $timeout, alarmService, utils, types) {
     var vm = this;
 
     vm.stylesInfo = {};
@@ -266,6 +266,9 @@ function AlarmsTableWidgetController($element, $scope, $filter, $mdMedia, $mdDia
     function enterFilterMode () {
         vm.query.search = '';
         vm.ctx.hideTitlePanel = true;
+        $timeout(()=>{
+            angular.element(vm.ctx.$container).find('.searchInput').focus();
+        })
     }
 
     function exitFilterMode () {
diff --git a/ui/src/app/widget/lib/alarms-table-widget.tpl.html b/ui/src/app/widget/lib/alarms-table-widget.tpl.html
index 1cca18bb86..8480058bc2 100644
--- a/ui/src/app/widget/lib/alarms-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/alarms-table-widget.tpl.html
@@ -28,7 +28,7 @@
                 </md-button>
                 <md-input-container flex>
                     <label>&nbsp;</label>
-                    <input ng-model="vm.query.search" placeholder="{{'alarm.search' | translate}}"/>
+                    <input ng-model="vm.query.search" class="searchInput" placeholder="{{'alarm.search' | translate}}"/>
                 </md-input-container>
                 <md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
                     <md-icon aria-label="Close" class="material-icons">close</md-icon>
diff --git a/ui/src/app/widget/lib/entities-table-widget.js b/ui/src/app/widget/lib/entities-table-widget.js
index 1601e71332..d0b629d290 100644
--- a/ui/src/app/widget/lib/entities-table-widget.js
+++ b/ui/src/app/widget/lib/entities-table-widget.js
@@ -45,7 +45,7 @@ function EntitiesTableWidget() {
 }
 
 /*@ngInject*/
-function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $translate, utils, types) {
+function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $translate, $timeout, utils, types) {
     var vm = this;
 
     vm.stylesInfo = {};
@@ -254,6 +254,9 @@ function EntitiesTableWidgetController($element, $scope, $filter, $mdMedia, $tra
     function enterFilterMode () {
         vm.query.search = '';
         vm.ctx.hideTitlePanel = true;
+        $timeout(()=>{
+            angular.element(vm.ctx.$container).find('.searchInput').focus();
+        })
     }
 
     function exitFilterMode () {
diff --git a/ui/src/app/widget/lib/entities-table-widget.tpl.html b/ui/src/app/widget/lib/entities-table-widget.tpl.html
index 97a8d699db..474d536024 100644
--- a/ui/src/app/widget/lib/entities-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/entities-table-widget.tpl.html
@@ -27,7 +27,7 @@
                 </md-button>
                 <md-input-container flex>
                     <label>&nbsp;</label>
-                    <input ng-model="vm.query.search" placeholder="{{'entity.search' | translate}}"/>
+                    <input ng-model="vm.query.search" class="searchInput" placeholder="{{'entity.search' | translate}}"/>
                 </md-input-container>
                 <md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
                     <md-icon aria-label="Close" class="material-icons">close</md-icon>
diff --git a/ui/src/app/widget/lib/timeseries-table-widget.js b/ui/src/app/widget/lib/timeseries-table-widget.js
index 684bbde1e3..bca79565af 100644
--- a/ui/src/app/widget/lib/timeseries-table-widget.js
+++ b/ui/src/app/widget/lib/timeseries-table-widget.js
@@ -44,7 +44,7 @@ function TimeseriesTableWidget() {
 }
 
 /*@ngInject*/
-function TimeseriesTableWidgetController($element, $scope, $filter) {
+function TimeseriesTableWidgetController($element, $scope, $filter, $timeout) {
     var vm = this;
     let dateFormatFilter = 'yyyy-MM-dd HH:mm:ss';
 
@@ -62,6 +62,9 @@ function TimeseriesTableWidgetController($element, $scope, $filter) {
     function enterFilterMode () {
         vm.query.search = '';
         vm.ctx.hideTitlePanel = true;
+        $timeout(()=>{
+            angular.element(vm.ctx.$container).find('.searchInput').focus();
+        })
     }
 
     function exitFilterMode () {
diff --git a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
index eb9b8caa75..08c4c9ef9a 100644
--- a/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/timeseries-table-widget.tpl.html
@@ -27,7 +27,7 @@
                 </md-button>
                 <md-input-container flex>
                     <label>&nbsp;</label>
-                    <input ng-model="vm.query.search" placeholder="{{'widget.search-data' | translate}}" md-autofocus/>
+                    <input ng-model="vm.query.search" class="searchInput" placeholder="{{'widget.search-data' | translate}}" md-autofocus/>
                 </md-input-container>
                 <md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()">
                     <md-icon aria-label="Close" class="material-icons">close</md-icon>