buscador en header, paginado en footer, cambio icons, focus no results

focus no results: Hace focus en el input de busqueda cuando no encuentra resultados

buscador en header, paginado en footer, cambio icons, focus no results
focus no results: Hace focus en el input de busqueda cuando no encuentra resultados
Jose Pinto
1 parent 69106c08b8
Showing 3 changed files with 49 additions and 36 deletions Show diff stats
package.json
src/js/controller.js
src/views/foca-modal-nota-pedido.html
@@ -7,7 +7,7 @@
     "gulp-pre-commit": "gulp pre-commit",
     "compile": "gulp uglify",
     "postinstall": "npm run compile && gulp clean-post-install",
-    "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
+    "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+ssh://git@git.focasoftware.com:npm/foca-directivas"
   },
   "pre-commit": [
     "gulp-pre-commit"
@@ -33,13 +33,13 @@
     "gulp-uglify": "^3.0.1",
     "jquery": "^3.3.1",
     "pump": "^3.0.0",
-    "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
+    "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas"
   },
   "devDependencies": {
     "angular": "^1.7.5",
     "angular-ladda": "^0.4.3",
     "bootstrap": "^4.1.3",
-    "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
+    "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas",
     "font-awesome": "^4.7.0",
     "gulp": "^3.9.1",
     "gulp-angular-templatecache": "^2.2.3",
 angular.module('focaModalNotaPedido')
     .controller('focaModalNotaPedidoController', 
         [
+            '$timeout',
             '$filter',
             '$scope',
             '$uibModalInstance',
             'focaModalNotaPedidoService',
             'usadoPor',
-            function($filter, $scope, $uibModalInstance,
+            function($timeout, $filter, $scope, $uibModalInstance,
                 focaModalNotaPedidoService, usadoPor
             ) {
                 var fecha = new Date();
@@ -55,10 +56,10 @@ angular.module(&#39;focaModalNotaPedido&#39;)
                     $scope.searchLoading = false;
                     $scope.primerBusqueda = true;
                     $scope.notasPedido = res.data;
-                    $scope.search();
+                    $scope.search(true);
                     primera();
                 }
-                $scope.search = function() {
+                $scope.search = function(pressed) {
                     if($scope.notasPedido.length > 0) {
                         $scope.filteredNotasPedido = $filter('filter')(
                             $scope.notasPedido,
@@ -70,6 +71,12 @@ angular.module(&#39;focaModalNotaPedido&#39;)
                         );
  
                         $scope.resetPage();
+                        if(pressed && $scope.filteredNotasPedido.length === 0){
+                            $timeout(function() {
+                                angular.element('#search')[0].focus();
+                                $scope.filters = '';
+                            });
+                        }
                     }
                 };
  
 <div class="modal-header py-1">
-    <h5 class="modal-title">Busqueda de Nota de Pedido</h5>
+    <div class="row w-100">
+        <div class="col-lg-6">
+            <h5 class="modal-title my-1">Búsqueda de Nota de Pedido</h5>
+        </div>
+        <div class="input-group col-lg-6 pr-0 my-2">
+            <input
+                ladda="searchLoading"
+                type="text"
+                class="form-control form-control-sm"
+                id="search"
+                placeholder="Razón social"
+                ng-model="filters"
+                ng-change="search()"
+                ng-keydown="busquedaDown($event.keyCode)"
+                ng-keypress="busquedaPress($event.keyCode)"
+                foca-focus="selectedNotaPedido == -1"
+                ng-focus="selectedNotaPedido = -1"
+                teclado-virtual
+            />
+            <div class="input-group-append">
+                <button
+                    ladda="searchLoading"
+                    class="btn btn-outline-secondary"
+                    type="button"
+                    ng-click="busquedaPress(13)"
+                >
+                    <i class="fa fa-search" aria-hidden="true"></i>
+                </button>
+            </div>
+        </div>
+    </div>
 </div>
 <div class="modal-body" id="modal-body">
+
     <div class="input-group row">
         <small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>
         <div class="col-md-4 col-8 input-group mb-2">
@@ -38,31 +69,6 @@
             />
         </div>
     </div>
-    <div class="input-group">
-        <input
-            ladda="searchLoading"
-            type="text"
-            class="form-control form-control-sm"
-            placeholder="Busqueda"
-            ng-model="filters"
-            ng-change="search()"
-            ng-keydown="busquedaDown($event.keyCode)"
-            ng-keypress="busquedaPress($event.keyCode)"
-            foca-focus="selectedNotaPedido == -1"
-            ng-focus="selectedNotaPedido = -1"
-            teclado-virtual
-        />
-        <div class="input-group-append">
-            <button
-                ladda="searchLoading"
-                class="btn btn-outline-secondary"
-                type="button"
-                ng-click="busquedaPress(13)"
-            >
-                <i class="fa fa-search" aria-hidden="true"></i>
-            </button>
-        </div>
-    </div>
     <table ng-show="primerBusqueda" class="table table-striped table-sm">
         <thead>
             <tr>
@@ -95,13 +101,15 @@
                         foca-focus="selectedNotaPedido == {{key}}"
                         ng-keydown="itemNotaPedido($event.keyCode)"
                     >
-                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
+                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
                     </button>
                 </td>
             </tr>
         </tbody>
     </table>
-    <nav ng-show="currentPageNotasPedido.length > 0 && primerBusqueda">
+</div>
+<div class="modal-footer py-1">
+    <nav ng-show="currentPageNotasPedido.length > 0 && primerBusqueda" class="mr-auto">
         <ul class="pagination pagination-sm justify-content mb-0">
             <li class="page-item" ng-class="{'disabled': currentPage == 1}">
                 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
@@ -129,7 +137,5 @@
             </li>
         </ul>
     </nav>
-</div>
-<div class="modal-footer py-1">
     <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
 </div>
...	...	@@ -7,7 +7,7 @@
7	7	"gulp-pre-commit": "gulp pre-commit",
8	8	"compile": "gulp uglify",
9	9	"postinstall": "npm run compile && gulp clean-post-install",
10		- "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
	10	+ "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+ssh://git@git.focasoftware.com:npm/foca-directivas"
11	11	},
12	12	"pre-commit": [
13	13	"gulp-pre-commit"
...	...	@@ -33,13 +33,13 @@
33	33	"gulp-uglify": "^3.0.1",
34	34	"jquery": "^3.3.1",
35	35	"pump": "^3.0.0",
36		- "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
	36	+ "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas"
37	37	},
38	38	"devDependencies": {
39	39	"angular": "^1.7.5",
40	40	"angular-ladda": "^0.4.3",
41	41	"bootstrap": "^4.1.3",
42		- "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
	42	+ "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas",
43	43	"font-awesome": "^4.7.0",
44	44	"gulp": "^3.9.1",
45	45	"gulp-angular-templatecache": "^2.2.3",
1	1	angular.module('focaModalNotaPedido')
2	2	.controller('focaModalNotaPedidoController',
3	3	[
	4	+ '$timeout',
4	5	'$filter',
5	6	'$scope',
6	7	'$uibModalInstance',
7	8	'focaModalNotaPedidoService',
8	9	'usadoPor',
9		- function($filter, $scope, $uibModalInstance,
	10	+ function($timeout, $filter, $scope, $uibModalInstance,
10	11	focaModalNotaPedidoService, usadoPor
11	12	) {
12	13	var fecha = new Date();
...	...	@@ -55,10 +56,10 @@ angular.module('focaModalNotaPedido')
55	56	$scope.searchLoading = false;
56	57	$scope.primerBusqueda = true;
57	58	$scope.notasPedido = res.data;
58		- $scope.search();
	59	+ $scope.search(true);
59	60	primera();
60	61	}
61		- $scope.search = function() {
	62	+ $scope.search = function(pressed) {
62	63	if($scope.notasPedido.length > 0) {
63	64	$scope.filteredNotasPedido = $filter('filter')(
64	65	$scope.notasPedido,
...	...	@@ -70,6 +71,12 @@ angular.module('focaModalNotaPedido')
70	71	);
71	72
72	73	$scope.resetPage();
	74	+ if(pressed && $scope.filteredNotasPedido.length === 0){
	75	+ $timeout(function() {
	76	+ angular.element('#search')[0].focus();
	77	+ $scope.filters = '';
	78	+ });
	79	+ }
73	80	}
74	81	};
75	82
1	1	<div class="modal-header py-1">
2		- <h5 class="modal-title">Busqueda de Nota de Pedido</h5>
	2	+ <div class="row w-100">
	3	+ <div class="col-lg-6">
	4	+ <h5 class="modal-title my-1">Búsqueda de Nota de Pedido</h5>
	5	+ </div>
	6	+ <div class="input-group col-lg-6 pr-0 my-2">
	7	+ <input
	8	+ ladda="searchLoading"
	9	+ type="text"
	10	+ class="form-control form-control-sm"
	11	+ id="search"
	12	+ placeholder="Razón social"
	13	+ ng-model="filters"
	14	+ ng-change="search()"
	15	+ ng-keydown="busquedaDown($event.keyCode)"
	16	+ ng-keypress="busquedaPress($event.keyCode)"
	17	+ foca-focus="selectedNotaPedido == -1"
	18	+ ng-focus="selectedNotaPedido = -1"
	19	+ teclado-virtual
	20	+ />
	21	+ <div class="input-group-append">
	22	+ <button
	23	+ ladda="searchLoading"
	24	+ class="btn btn-outline-secondary"
	25	+ type="button"
	26	+ ng-click="busquedaPress(13)"
	27	+ >
	28	+ <i class="fa fa-search" aria-hidden="true"></i>
	29	+ </button>
	30	+ </div>
	31	+ </div>
	32	+ </div>
3	33	</div>
4	34	<div class="modal-body" id="modal-body">
	35	+
5	36	<div class="input-group row">
6	37	<small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>
7	38	<div class="col-md-4 col-8 input-group mb-2">
...	...	@@ -38,31 +69,6 @@
38	69	/>
39	70	</div>
40	71	</div>
41		- <div class="input-group">
42		- <input
43		- ladda="searchLoading"
44		- type="text"
45		- class="form-control form-control-sm"
46		- placeholder="Busqueda"
47		- ng-model="filters"
48		- ng-change="search()"
49		- ng-keydown="busquedaDown($event.keyCode)"
50		- ng-keypress="busquedaPress($event.keyCode)"
51		- foca-focus="selectedNotaPedido == -1"
52		- ng-focus="selectedNotaPedido = -1"
53		- teclado-virtual
54		- />
55		- <div class="input-group-append">
56		- <button
57		- ladda="searchLoading"
58		- class="btn btn-outline-secondary"
59		- type="button"
60		- ng-click="busquedaPress(13)"
61		- >
62		- <i class="fa fa-search" aria-hidden="true"></i>
63		- </button>
64		- </div>
65		- </div>
66	72	<table ng-show="primerBusqueda" class="table table-striped table-sm">
67	73	<thead>
68	74	<tr>
...	...	@@ -95,13 +101,15 @@
95	101	foca-focus="selectedNotaPedido == {{key}}"
96	102	ng-keydown="itemNotaPedido($event.keyCode)"
97	103	>
98		- <i class="fa fa-arrow-right" aria-hidden="true"></i>
	104	+ <i class="fa fa-circle-thin" aria-hidden="true"></i>
99	105	</button>
100	106	</td>
101	107	</tr>
102	108	</tbody>
103	109	</table>
104		- <nav ng-show="currentPageNotasPedido.length > 0 && primerBusqueda">
	110	+</div>
	111	+<div class="modal-footer py-1">
	112	+ <nav ng-show="currentPageNotasPedido.length > 0 && primerBusqueda" class="mr-auto">
105	113	<ul class="pagination pagination-sm justify-content mb-0">
106	114	<li class="page-item" ng-class="{'disabled': currentPage == 1}">
107	115	<a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
...	...	@@ -129,7 +137,5 @@
129	137	</li>
130	138	</ul>
131	139	</nav>
132		-</div>
133		-<div class="modal-footer py-1">
134	140	<button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
135	141	</div>