Nicolás Guarnieri / foca-modal-busqueda-productos

Download as
Browse Code »

Commit 5597e6f1ec99901283303ada6c4356301679f490

Authored by Nicolás Guarnieri
1 parent fc26605fa7
Exists in master

no important

Showing 2 changed files with 1 additions and 6 deletions   Show diff stats
1 <html ng-app="focaBusquedaProductos"> 1 <html ng-app="focaBusquedaProductos">
2 <head> 2 <head>
3 <meta charset="UTF-8"/> 3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5 5
6 <!--CSS--> 6 <!--CSS-->
7 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> 7 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
8 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 8 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
9 9
10 <!--VENDOR JS--> 10 <!--VENDOR JS-->
11 <script src="node_modules/jquery/dist/jquery.min.js"></script> 11 <script src="node_modules/jquery/dist/jquery.min.js"></script>
12 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 12 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
13 <script src="node_modules/angular/angular.min.js"></script> 13 <script src="node_modules/angular/angular.min.js"></script>
14 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 14 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
15 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 15 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
16 16
17 <!-- BUILD --> 17 <!-- BUILD -->
18 <script src="src/js/app.js"></script> 18 <script src="src/js/app.js"></script>
19 <script src="src/js/controller.js"></script> 19 <script src="src/js/controller.js"></script>
20 <script src="src/js/service.js"></script> 20 <script src="src/js/service.js"></script>
21 21
22 <!-- /BUILD --> 22 <!-- /BUILD -->
23 23
24 <!-- CONFIG PARA DEVELOP --> 24 <!-- CONFIG PARA DEVELOP -->
25 <script src="src/etc/develop.js"></script> 25 <script src="src/etc/develop.js"></script>
26 <script type="text/javascript"> 26 <script type="text/javascript">
27 angular.module('focaBusquedaProductos') 27 angular.module('focaBusquedaProductos')
28 .controller('controller', [ 28 .controller('controller', [
29 '$scope', 29 '$scope',
30 '$uibModal', 30 '$uibModal',
31 '$timeout', 31 '$timeout',
32 function($scope, $uibModal, $timeout) { 32 function($scope, $uibModal, $timeout) {
33 openModal(); 33 openModal();
34 34
35 function openModal() { 35 function openModal() {
36 var modalInstance = $uibModal.open( 36 var modalInstance = $uibModal.open(
37 { 37 {
38 ariaLabelledBy: 'Busqueda de Productos', 38 ariaLabelledBy: 'Busqueda de Productos',
39 templateUrl: 'src/views/modal-busqueda-productos.html', 39 templateUrl: 'src/views/modal-busqueda-productos.html',
40 controller: 'modalBusquedaProductosCtrl', 40 controller: 'modalBusquedaProductosCtrl',
41 size: 'lg' 41 size: 'lg'
42 } 42 }
43 ); 43 );
44 44
45 modalInstance.result.then( 45 modalInstance.result.then(
46 function (selectedItem) { 46 function (selectedItem) {
47 console.info(selectedItem); 47 console.info(selectedItem);
48 $timeout(openModal, 500); 48 $timeout(openModal, 500);
49 }, function () { 49 }, function () {
50 console.info('modal-component dismissed at: ' + new Date()); 50 console.info('modal-component dismissed at: ' + new Date());
51 $timeout(openModal, 500); 51 $timeout(openModal, 500);
52 } 52 }
53 ); 53 );
54 } 54 }
55 } 55 }
56 ]); 56 ]);
57 </script> 57 </script>
58 </head> 58 </head>
59 <body ng-controller="controller"> 59 <body ng-controller="controller">
60 <style>
61 .p-5 {
62 padding: 5px !important;
63 }
64 </style>
65 </body> 60 </body>
66 </html> 61 </html>
67 62
src/views/modal-busqueda-productos.html
Diff comments   View file @ 5597e6f
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Busqueda de Productos</h3> 2 <h3 class="modal-title">Busqueda de Productos</h3>
3 </div> 3 </div>
4 <div class="modal-body" id="modal-body"> 4 <div class="modal-body" id="modal-body">
5 <div class="input-group mb-3"> 5 <div class="input-group mb-3">
6 <input 6 <input
7 type="text" 7 type="text"
8 class="form-control" 8 class="form-control"
9 placeholder="Busqueda" 9 placeholder="Busqueda"
10 ng-model="filters" 10 ng-model="filters"
11 ng-change="search()" 11 ng-change="search()"
12 ng-keydown="busquedaDown($event.keyCode)" 12 ng-keydown="busquedaDown($event.keyCode)"
13 ng-keypress="busquedaPress($event.keyCode)" 13 ng-keypress="busquedaPress($event.keyCode)"
14 foca-focus="selectedProducto == -1" 14 foca-focus="selectedProducto == -1"
15 ng-focus="selectedProducto = -1" 15 ng-focus="selectedProducto = -1"
16 > 16 >
17 <table class="table table-striped table-sm"> 17 <table class="table table-striped table-sm">
18 <thead> 18 <thead>
19 <tr> 19 <tr>
20 <th>Sec.</th> 20 <th>Sec.</th>
21 <th>Cod.</th> 21 <th>Cod.</th>
22 <th>Descripción</th> 22 <th>Descripción</th>
23 <th>P. Base</th> 23 <th>P. Base</th>
24 <th></th> 24 <th></th>
25 </tr> 25 </tr>
26 </thead> 26 </thead>
27 <tbody> 27 <tbody>
28 <tr ng-repeat="(key,producto) in currentPageProductos"> 28 <tr ng-repeat="(key,producto) in currentPageProductos">
29 <td ng-bind="producto.sector"></td> 29 <td ng-bind="producto.sector"></td>
30 <td ng-bind="producto.codigo"></td> 30 <td ng-bind="producto.codigo"></td>
31 <td ng-bind="producto.descripcion"></td> 31 <td ng-bind="producto.descripcion"></td>
32 <td ng-bind="producto.precio | currency"></td> 32 <td ng-bind="producto.precio | currency"></td>
33 <td> 33 <td>
34 <button 34 <button
35 type="button" 35 type="button"
36 class="btn p-5 float-right" 36 class="btn p-2 float-right"
37 ng-class="{ 'btn-secondary': selectedProducto != key, 'btn-primary': selectedProducto == key}" 37 ng-class="{ 'btn-secondary': selectedProducto != key, 'btn-primary': selectedProducto == key}"
38 ng-click="select(producto)" 38 ng-click="select(producto)"
39 foca-focus="selectedProducto == {{key}}" 39 foca-focus="selectedProducto == {{key}}"
40 ng-keydown="itemProducto($event.keyCode)" 40 ng-keydown="itemProducto($event.keyCode)"
41 > 41 >
42 <i class="fa fa-arrow-right" aria-hidden="true"></i> 42 <i class="fa fa-arrow-right" aria-hidden="true"></i>
43 </button> 43 </button>
44 </td> 44 </td>
45 </tr> 45 </tr>
46 </tbody> 46 </tbody>
47 </table> 47 </table>
48 <nav> 48 <nav>
49 <ul class="pagination justify-content-end"> 49 <ul class="pagination justify-content-end">
50 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 50 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
51 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 51 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
52 <span aria-hidden="true">&laquo;</span> 52 <span aria-hidden="true">&laquo;</span>
53 <span class="sr-only">Anterior</span> 53 <span class="sr-only">Anterior</span>
54 </a> 54 </a>
55 </li> 55 </li>
56 <li class="page-item" ng-repeat="pagina in paginas" ng-class="{'active': pagina == currentPage}"> 56 <li class="page-item" ng-repeat="pagina in paginas" ng-class="{'active': pagina == currentPage}">
57 <a 57 <a
58 class="page-link" 58 class="page-link"
59 href="#" 59 href="#"
60 ng-click="selectPage(pagina)" 60 ng-click="selectPage(pagina)"
61 ng-bind="pagina" 61 ng-bind="pagina"
62 ></a> 62 ></a>
63 </li> 63 </li>
64 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 64 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
65 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 65 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
66 <span aria-hidden="true">&raquo;</span> 66 <span aria-hidden="true">&raquo;</span>
67 <span class="sr-only">Siguiente</span> 67 <span class="sr-only">Siguiente</span>
68 </a> 68 </a>
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </nav> 71 </nav>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div class="modal-footer"> 74 <div class="modal-footer">
75 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 75 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
76 </div> 76 </div>
77 77