Merge pull request #676 from jktu2870/improvements

Added autofocus for search buttons

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 () {

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>

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() {

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>

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 () {

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>

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() {

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>

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 () {

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>

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 () {

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>

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 () {

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>