Jose Pinto / foca-modal-vendedores

Download as
Browse Code »

Commit 8a3a4a039e4eb15d9dbd01bb5f1b74d6815d9cb6

Authored by Nicolás Guarnieri
1 parent 773e0eeacf
Exists in master

mejoras para mobile

Showing 2 changed files with 74 additions and 60 deletions   Show diff stats
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 10
11 <!--VENDOR JS--> 11 <!--VENDOR JS-->
12 <script src="node_modules/jquery/dist/jquery.min.js"></script> 12 <script src="node_modules/jquery/dist/jquery.min.js"></script>
13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
14 <script src="node_modules/angular/angular.min.js"></script> 14 <script src="node_modules/angular/angular.min.js"></script>
15 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 15 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
16 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 16 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
17 17
18 <!-- BUILD --> 18 <!-- BUILD -->
19 <script src="src/js/app.js"></script> 19 <script src="src/js/app.js"></script>
20 <script src="src/js/controller.js"></script> 20 <script src="src/js/controller.js"></script>
21 <script src="src/js/service.js"></script> 21 <script src="src/js/service.js"></script>
22 22
23 <!-- /BUILD --> 23 <!-- /BUILD -->
24 24
25 <!-- CONFIG PARA DEVELOP --> 25 <!-- CONFIG PARA DEVELOP -->
26 <script type="text/javascript"> 26 <script type="text/javascript">
27 angular.module('focaModalVendedores') 27 angular.module('focaModalVendedores')
28 .controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) { 28 .controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) {
29 openModal(); 29 openModal();
30 30
31 function openModal() { 31 function openModal() {
32 var modalInstance = $uibModal.open( 32 var modalInstance = $uibModal.open(
33 { 33 {
34 ariaLabelledBy: 'Busqueda de Vendedores', 34 ariaLabelledBy: 'Busqueda de Vendedores',
35 templateUrl: 'src/views/modal-vendedores.html', 35 templateUrl: 'src/views/modal-vendedores.html',
36 controller: 'modalVendedoresCtrl', 36 controller: 'modalVendedoresCtrl',
37 size: 'lg' 37 size: 'lg'
38 } 38 }
39 ); 39 );
40 40
41 modalInstance.result.then( 41 modalInstance.result.then(
42 function (selectedItem) { 42 function (selectedItem) {
43 console.info(selectedItem); 43 console.info(selectedItem);
44 $timeout(openModal, 500); 44 $timeout(openModal, 500);
45 }, function () { 45 }, function () {
46 console.info('modal-component dismissed at: ' + new Date()); 46 console.info('modal-component dismissed at: ' + new Date());
47 $timeout(openModal, 500); 47 $timeout(openModal, 500);
48 } 48 }
49 ); 49 );
50 } 50 }
51 51
52 52
53 }]); 53 }]);
54 </script> 54 </script>
55 55
56 <script src="src/etc/develop.js"></script> 56 <script src="src/etc/develop.js"></script>
57 </head> 57 </head>
58 58
59 <body ng-controller="controller"> 59 <body ng-controller="controller">
60 <style> 60 <style>
61 .p-5 { 61 .active{color:#fff;text-decoration:none;outline:0;background-color:#337ab7}.btn-xs{padding:.15rem .5rem;font-size:.8rem;line-height:1.5;border-radius:.2rem}.no-border-bottom{border-bottom:0 !important}.no-border-top{border-top:0 !important}.no-border{border:0 !important}.margin-bottom-mobile{margin-bottom:2.5em !important}.tamaño-boton{width:44px}@media (max-width: 576px){.modal-content{height:auto;height:100%;border-radius:0}}@media (max-width: 576px){.modal-dialog{width:100%;height:100%;margin:0;padding:0}}@media (max-width: 576px){.modal-body{overflow-y:auto}}.botonera .btn{margin-bottom:5px}.botonera-lateral>.row{height:420px}.botonera-principal menuitem{display:inline-block;height:130px;text-align:center;width:180px}.botonera-principal button{background-image:url("../img/botonera.png");border-radius:12px;border-width:0;height:90px;position:relative;width:90px}.botonera-principal button span{left:0;position:absolute;text-align:center;top:90px;width:100%;font-size:12px;color:#777777}.botonera-principal-menu{padding-left:90px}.botonera-principal-logo{width:80%;opacity:.8}.botonera-principal-vacio button{background-position:-4380px 0}.botonera-principal-vacio button:hover{background-position:-4380px -90px}.botonera-principal-abrir-turno button{background-position:0 0}.botonera-principal-abrir-turno button:hover{background-position:0 -90px}.botonera-principal-cerrar-turno button{background-position:-90px 0}.botonera-principal-cerrar-turno button:hover{background-position:-90px -90px}.botonera-principal-caja button{background-position:-180px 0}.botonera-principal-caja button:hover{background-position:-180px -90px}.botonera-principal-facturador button{background-position:-270px 0px}.botonera-principal-facturador button:hover{background-position:-270px -90px}.botonera-principal-nota-pedido button{background-position:-1250px 0px}.botonera-principal-nota-pedido button:hover{background-position:-1250px -90px}.botonera-secundaria{background-color:rgba(0,0,0,0.8)}.botonera-secundaria .row{border-radius:5px;overflow:hidden}.botonera-secundaria .btn{border-radius:0;margin-right:1px;width:calc(100% - 1px);margin-bottom:1px}body{background-color:#cccccc}.contenedor{background-image:radial-gradient(circle at 50% 50%, #ebecf1, #abaec3)}@media (min-width: 768px){.contenedor{min-height:600px;min-width:800px}}.grilla-articulo{background-color:rgba(0,0,0,0.8)}@media (min-width: 768px){.grilla-articulo{height:430px}}.lista{background-color:rgba(0,0,0,0.8);padding:10px}.lista tr{background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5))}.lista tbody td{border-top:none;color:#ffffff}.lista thead th{border-bottom:1px solid #ffffff;border-top:none;color:#ffffff;font-family:sans-serif;font-size:12px}.lista .boton-accion{background:none;color:#ffffff;border:1px solid #ffffff;border-radius:30px;padding:5px 7px}.lista .boton-accion i{font-size:16px}.login{background-color:#bdbdbd;border:1px solid #000000;border-radius:3px;height:155px;left:calc(50% - 130px);opacity:0.7;position:absolute;text-align:center;top:190px;width:260px}.login-titulo{border-bottom:1px solid #ffffff;padding:5px 0}.login-campo label{display:block;font-size:12px;margin:5px 0 0}.login-campo input:focus{outline:3px solid #ff9900}.panel-informativo{background:linear-gradient(#ccc, #eee);min-height:32px}.panel-informativo .form-group{margin-bottom:5px}.panel-informativo .form-control-xs{height:calc(1.6rem);padding:.25rem .5rem;font-size:.8rem;line-height:1.3;border-radius:.2rem}.panel-informativo .label{font-size:.8em}.panel-informativo .valor{font-size:.8em}@media (max-width: 576px){.panel-informativo .nota-pedido{text-align:center}}@media (min-width: 576px){.panel-informativo .numero-pedido{text-align:center}}.table-nonfluid{width:auto}.table-celda-total{color:#000000;background-color:#FF9900}.keyboard{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:62%;height:60%;margin-left:13%;margin-top:-19%;position:absolute}.keyboard table{border-spacing:10px;border-collapse:separate;z-index:100000}.keyboard table td{touch-action:none}.keyboard .letter{background-color:#bdbdbd;box-shadow:2px 2px 3px #555555;width:47px;height:50px;text-align:center;font-family:"arial";cursor:pointer;color:#000;font-size:22px}.keyboard .letter:hover{background-color:#fafafa}.keyboard .letter:active{background-color:#999;color:#fff}.keyboard .number{background-color:#bdbdbd;box-shadow:2px 2px 3px #555555;width:47px;height:35px;text-align:center;font-family:"arial";cursor:pointer;color:#000;font-size:22px}.keyboard .number:hover{background-color:#fafafa}.keyboard .number:active{background-color:#999;color:#fff}.keyboard .margin{width:40px;height:50px}.teclado-activar{background-color:#17d236}.boton-activar-teclado{margin-top:-10%;position:absolute;z-index:100000}.tabla-articulo{max-height:420px}.tabla-articulo tr{display:inline-table;table-layout:fixed}.tabla-articulo tbody{overflow-y:auto;max-height:280px;display:block}.acciones-mobile{line-height:2.5em;color:orange;font-size:1.25em}.swiper-container{height:400px}.swiper-slide{background:transparent;height:400px;text-align:unset;-webkit-align-items:unset;align-items:unset}.crear-nota-pedido-fecha input[type="date"]::-webkit-clear-button{display:none}
62 padding: 5px !important;
63 }
64 </style> 62 </style>
65 </body> 63 </body>
66 64
67 </html> 65 </html>
src/views/modal-vendedores.html
Diff comments   View file @ 8a3a4a0
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Búsqueda de vendedores</h3> 2 <h3 class="modal-title">Búsqueda de vendedores</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="selectedVendedor == -1" 14 foca-focus="selectedVendedor == -1"
15 ng-focus="selectedVendedor = -1" 15 ng-focus="selectedVendedor = -1"
16 > 16 >
17 <table class="table table-striped table-sm">
18 <thead>
19 <tr>
20 <th>Código</th>
21 <th>Nombre</th>
22 <th></th>
23 </tr>
24 </thead>
25 <tbody>
26 <tr ng-repeat="(key, vendedor) in currentPageVendedores">
27 <td ng-bind="vendedor.CodVen"></td>
28 <td ng-bind="vendedor.NomVen"></td>
29 <td>
30 <button
31 type="button"
32 class="btn p-2 float-right"
33 ng-class="{
34 'btn-secondary': selectedVendedor != key,
35 'btn-primary': selectedVendedor == key
36 }"
37 ng-click="select(vendedor)"
38 foca-focus="selectedVendedor == {{key}}"
39 ng-keydown="itemVendedor($event.keyCode)">
40 <i class="fa fa-arrow-right" aria-hidden="true"></i>
41 </button>
42 </td>
43 </tr>
44 </tbody>
45 </table>
46 <nav>
47 <ul class="pagination justify-content-end">
48 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
49 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
50 <span aria-hidden="true">&laquo;</span>
51 <span class="sr-only">Anterior</span>
52 </a>
53 </li>
54 <li
55 class="page-item"
56 ng-repeat="pagina in paginas"
57 ng-class="{'active': pagina == currentPage}"
58 >
59 <a
60 class="page-link"
61 href="#"
62 ng-click="selectPage(pagina)"
63 ng-bind="pagina"
64 ></a>
65 </li>
66 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
67 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
68 <span aria-hidden="true">&raquo;</span>
69 <span class="sr-only">Siguiente</span>
70 </a>
71 </li>
72 </ul>
73 </nav>
74 </div> 17 </div>
18 <table class="table table-striped table-sm">
19 <thead>
20 <tr>
21 <th class="d-none d-sm-table-cell">Código</th>
22 <th class="d-sm-none">Cód.</th>
23 <th>Nombre</th>
24 <th></th>
25 </tr>
26 </thead>
27 <tbody>
28 <tr
29 ng-repeat="(key, vendedor) in currentPageVendedores"
30 ng-click="select(vendedor)"
31 >
32 <td ng-bind="vendedor.CodVen"></td>
33 <td ng-bind="vendedor.NomVen"></td>
34 <td>
35 <button
36 type="button"
37 class="btn p-2 float-right d-none d-md-table-cell"