Commit 3ccbee6e750b49ddd292260e6766f3bc740577c4

Authored by Eric Fernandez
Exists in master

Merge branch 'master' of https://debo.suite.repo/modulos-npm/foca-modal-vendedores

1 <html ng-app="focaModalVendedores"> 1 <html ng-app="focaModalVendedores">
2 2
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 6
7 <!--CSS--> 7 <!--CSS-->
8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> 8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
9 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> 9 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
10 <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet"> 10 <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
11 11
12 <!--VENDOR JS--> 12 <!--VENDOR JS-->
13 <script src="node_modules/jquery/dist/jquery.min.js"></script> 13 <script src="node_modules/jquery/dist/jquery.min.js"></script>
14 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 14 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
15 <script src="node_modules/angular/angular.min.js"></script> 15 <script src="node_modules/angular/angular.min.js"></script>
16 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 16 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
17 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 17 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
18 <script src="node_modules/ladda/dist/spin.min.js"></script> 18 <script src="node_modules/ladda/dist/spin.min.js"></script>
19 <script src="node_modules/ladda/dist/ladda.min.js"></script> 19 <script src="node_modules/ladda/dist/ladda.min.js"></script>
20 <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script> 20 <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
21 21
22 <!-- BUILD --> 22 <!-- BUILD -->
23 <script src="src/js/app.js"></script> 23 <script src="src/js/app.js"></script>
24 <script src="src/js/controller.js"></script> 24 <script src="src/js/controller.js"></script>
25 <script src="src/js/service.js"></script> 25 <script src="src/js/service.js"></script>
26 26
27 <!-- /BUILD --> 27 <!-- /BUILD -->
28 28
29 <!-- CONFIG PARA DEVELOP --> 29 <!-- CONFIG PARA DEVELOP -->
30 <script type="text/javascript"> 30 <script type="text/javascript">
31 angular.module('focaModalVendedores') 31 angular.module('focaModalVendedores')
32 .controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) { 32 .controller('controller', ['$uibModal', '$timeout', function($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 Vendedores', 38 ariaLabelledBy: 'Busqueda de Vendedores',
39 templateUrl: 'src/views/modal-vendedores.html', 39 templateUrl: 'src/views/modal-vendedores.html',
40 controller: 'modalVendedoresCtrl', 40 controller: 'modalVendedoresCtrl',
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 </script> 56 </script>
57 57
58 <script src="src/etc/develop.js"></script> 58 <script src="src/etc/develop.js"></script>
59 </head> 59 </head>
60 60
61 <body ng-controller="controller"> 61 <body ng-controller="controller">
62 <style>
63 .p-5 {
64 padding: 5px !important;
65 }
66 </style>
67 </body> 62 </body>
68 63
69 </html> 64 </html>
src/views/modal-vendedores.html
1 <div class="modal-header py-1"> 1 <div class="modal-header">
2 <h5 class="modal-title">Búsqueda de vendedores</h5> 2 <h5 class="modal-title my-1">Búsqueda de vendedores</h5>
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"> 5 <div class="input-group">
6 <input 6 <input
7 ladda="searchLoading" 7 ladda="searchLoading"
8 type="text" 8 type="text"
9 class="form-control form-control-sm" 9 class="form-control form-control-sm"
10 placeholder="Busqueda" 10 placeholder="Busqueda"
11 ng-model="filters" 11 ng-model="filters"
12 ng-change="search()" 12 ng-change="search()"
13 ng-keydown="busquedaDown($event.keyCode)" 13 ng-keydown="busquedaDown($event.keyCode)"
14 ng-keypress="busquedaPress($event.keyCode)" 14 ng-keypress="busquedaPress($event.keyCode)"
15 foca-focus="selectedVendedor == -1" 15 foca-focus="selectedVendedor == -1"
16 ng-focus="selectedVendedor = -1" 16 ng-focus="selectedVendedor = -1"
17 teclado-virtual 17 teclado-virtual
18 > 18 >
19 <div class="input-group-append"> 19 <div class="input-group-append">
20 <button 20 <button
21 ladda="searchLoading" 21 ladda="searchLoading"
22 class="btn btn-outline-secondary" 22 class="btn btn-outline-secondary"
23 type="button" 23 type="button"
24 ng-click="busquedaPress(13)" 24 ng-click="busquedaPress(13)"
25 > 25 >
26 <i class="fa fa-search" aria-hidden="true"></i> 26 <i class="fa fa-search" aria-hidden="true"></i>
27 </button> 27 </button>
28 </div> 28 </div>
29 </div> 29 </div>
30 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12"> 30 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
31 <thead> 31 <thead>
32 <tr> 32 <tr>
33 <th>Código</th> 33 <th>Código</th>
34 <th>Nombre</th> 34 <th>Nombre</th>
35 <th></th> 35 <th></th>
36 </tr> 36 </tr>
37 </thead> 37 </thead>
38 <tbody> 38 <tbody>
39 <tr ng-show="currentPageVendedores.length == 0 && primerBusqueda"> 39 <tr ng-show="currentPageVendedores.length == 0 && primerBusqueda">
40 <td colspan="3"> 40 <td colspan="3">
41 No se encontraron resultados. 41 No se encontraron resultados.
42 </td> 42 </td>
43 </tr> 43 </tr>
44 <tr class="selected" 44 <tr class="selected"
45 ng-repeat="(key, vendedor) in currentPageVendedores" 45 ng-repeat="(key, vendedor) in currentPageVendedores"
46 ng-click="select(vendedor)" 46 ng-click="select(vendedor)"
47 > 47 >
48 <td ng-bind="vendedor.CodVen"></td> 48 <td ng-bind="vendedor.CodVen"></td>
49 <td ng-bind="vendedor.NomVen"></td> 49 <td ng-bind="vendedor.NomVen"></td>
50 <td class="d-md-none text-primary">
51 <i class="fa fa-arrow-right" aria-hidden="true"></i>
52 </td>
50 <td> 53 <td class="d-none d-md-table-cell">
51 <button 54 <button
52 type="button" 55 type="button"
53 class="btn btn-xs p-1 float-right" 56 class="btn btn-xs p-1 float-right"
54 ng-class="{ 57 ng-class="{
55 'btn-secondary': selectedVendedor != key, 58 'btn-secondary': selectedVendedor != key,
56 'btn-primary': selectedVendedor == key 59 'btn-primary': selectedVendedor == key
57 }" 60 }"
58 foca-focus="selectedVendedor == {{key}}" 61 foca-focus="selectedVendedor == {{key}}"
59 ng-keydown="itemVendedor($event.keyCode)"> 62 ng-keydown="itemVendedor($event.keyCode)">
60 <i class="fa fa-arrow-right" aria-hidden="true"></i> 63 <i class="fa fa-arrow-right" aria-hidden="true"></i>
61 </button> 64 </button>
62 </td> 65 </td>
63 </tr> 66 </tr>
64 </tbody> 67 </tbody>
65 </table> 68 </table>
66 <nav ng-show="currentPageVendedores.length > 0 && primerBusqueda"> 69 <nav ng-show="currentPageVendedores.length > 0 && primerBusqueda">
67 <ul class="pagination pagination-sm justify-content mb-0"> 70 <ul class="pagination pagination-sm justify-content mb-0">
68 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 71 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
69 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 72 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
70 <span aria-hidden="true">&laquo;</span> 73 <span aria-hidden="true">&laquo;</span>
71 <span class="sr-only">Anterior</span> 74 <span class="sr-only">Anterior</span>
72 </a> 75 </a>
73 </li> 76 </li>
74 <li 77 <li
75 class="page-item" 78 class="page-item"
76 ng-repeat="pagina in paginas" 79 ng-repeat="pagina in paginas"
77 ng-class="{'active': pagina == currentPage}" 80 ng-class="{'active': pagina == currentPage}"
78 > 81 >
79 <a 82 <a
80 class="page-link" 83 class="page-link"
81 href="#" 84 href="#"
82 ng-click="selectPage(pagina)" 85 ng-click="selectPage(pagina)"
83 ng-bind="pagina" 86 ng-bind="pagina"
84 ></a> 87 ></a>
85 </li> 88 </li>
86 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 89 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
87 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 90 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
88 <span aria-hidden="true">&raquo;</span> 91 <span aria-hidden="true">&raquo;</span>
89 <span class="sr-only">Siguiente</span> 92 <span class="sr-only">Siguiente</span>
90 </a> 93 </a>
91 </li> 94 </li>
92 </ul> 95 </ul>
93 </nav> 96 </nav>
94 </div> 97 </div>
95 <div class="modal-footer py-1"> 98 <div class="modal-footer">
96 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 99 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
97 </div> 100 </div>
98 101