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

Download as
Browse Code »

Commit 4eebd767d381b30d11ba938f7f899ff86498adbe

Authored by Nicolás Guarnieri
1 parent 9350010b10
Exists in master

WIP: Modal de busqueda de producto con tabla y filtro

Showing 5 changed files with 174 additions and 18 deletions   Show diff stats
1 # Busqueda de productos en modal para Debo Suite 1 # Busqueda de productos en modal para Debo Suite
2 2
3 Para ser utilizado en otro modulo debe iniciarse con este codigo ejemplo: 3 Para ser utilizado en otro modulo debe iniciarse con este codigo ejemplo:
4 <pre> 4 <pre>
5 var modalInstance = $uibModal.open( 5 var modalInstance = $uibModal.open(
6 { 6 {
7 ariaLabelledBy: 'Busqueda de Productos', 7 ariaLabelledBy: 'Busqueda de Productos',
8 templateUrl: 'src/views/modal-busqueda-productos.html', 8 templateUrl: 'src/views/modal-busqueda-productos.html',
9 controller: 'modalBusquedaProductosCtrl', 9 controller: 'modalBusquedaProductosCtrl',
10 size: 'md' 10 size: 'md'
11 } 11 }
12 ); 12 );
13 </pre>
14
15 Y despues consiguiendo el resultado de esta forma:
16 <pre>
17 modalInstance.result.then(
18 function (producto) {
19 console.info(producto);
20 // variable producto tiene el producto seleccionado en el modal
21 }, function () {
22 // funcion ejecutada cuando se cancela el modal
23 }
24 );
13 </pre> 25 </pre>
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 15
16 <!-- BUILD --> 16 <!-- BUILD -->
17 <script src="src/js/app.js"></script> 17 <script src="src/js/app.js"></script>
18 <script src="src/js/controller.js"></script> 18 <script src="src/js/controller.js"></script>
19 <script src="src/js/service.js"></script>
19 20
20 <!-- /BUILD --> 21 <!-- /BUILD -->
21 22
22 <!-- CONFIG PARA DEVELOP --> 23 <!-- CONFIG PARA DEVELOP -->
23 <script src="src/etc/develop.js"></script> 24 <script src="src/etc/develop.js"></script>
24 <script type="text/javascript"> 25 <script type="text/javascript">
25 angular.module('focaBusquedaProductos') 26 angular.module('focaBusquedaProductos')
26 .controller('controller', ['$uibModal', function($uibModal) { 27 .controller('controller', [
27 var modalInstance = $uibModal.open( 28 '$scope',
28 { 29 '$uibModal',
29 ariaLabelledBy: 'Busqueda de Productos', 30 '$timeout',
30 templateUrl: 'src/views/modal-busqueda-productos.html', 31 function($scope, $uibModal, $timeout) {
31 controller: 'modalBusquedaProductosCtrl', 32 openModal();
32 size: 'md' 33
34 function openModal() {
35 var modalInstance = $uibModal.open(
36 {
37 ariaLabelledBy: 'Busqueda de Productos',
38 templateUrl: 'src/views/modal-busqueda-productos.html',
39 controller: 'modalBusquedaProductosCtrl',
40 size: 'lg'
41 }
42 );
43
44 modalInstance.result.then(
45 function (selectedItem) {
46 console.info(selectedItem);
47 $timeout(openModal,500);
48 }, function () {
49 console.info('modal-component dismissed at: ' + new Date());
50 $timeout(openModal,500);
51 }
52 );
33 } 53 }
34 ); 54 }
35 }]); 55 ]);
36 </script> 56 </script>
37 </head> 57 </head>
38 <body ng-controller="controller"> 58 <body ng-controller="controller">
59 <style>
60 .p-5 {
61 padding: 5px !important;
62 }
63 </style>
39 </body> 64 </body>
40 </html> 65 </html>
41 66
src/js/controller.js
Diff comments   View file @ 4eebd76
1 angular.module('focaBusquedaProductos') 1 angular.module('focaBusquedaProductos')
2 .controller('modalBusquedaProductosCtrl',
3 ['$uibModalInstance', function($uibModalInstance) {
4
5 }]
6 )
2 .controller('modalBusquedaProductosCtrl',
3 [
4 '$filter',
5 '$scope',
6 '$uibModalInstance',
7 'focaBusquedaProductosService',
8 function($filter, $scope, $uibModalInstance, focaBusquedaProductosService) {
9 focaBusquedaProductosService.getProductos().then(
10 function(res) {
11 $scope.productos = res;
12 $scope.search();
13 }
14 );
15
16 // pagination
17 $scope.numPerPage = 10;
18 $scope.currentPage = 1;
19 $scope.filteredProductos = [];
20 $scope.currentPageProductos = [];
21 $scope.selectProducto = 0;
22
23
24 //METODOS
25 $scope.search = function() {
26 $scope.filteredProductos = $filter('filter')($scope.productos, {$: $scope.filters});
27 $scope.resetPage();
28 }
29
30 $scope.resetPage = function() {
31 $scope.currentPage = 1;
32 $scope.selectPage(1);
33 }
34
35 $scope.selectPage = function(page) {
36 var start = (page - 1) * $scope.numPerPage;
37 var end = start + $scope.numPerPage;
38 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
39 }
40
41 $scope.select = function(producto) {
42 $uibModalInstance.close(producto);
43 }
44
45 $scope.cancel = function() {
46 $uibModalInstance.dismiss('cancel');
47 }
48
49 $scope.enter = function(key) {
50 if (key === 13) {
51 console.table($scope.currentPageProductos);
1 angular.module('focaBusquedaProductos')
2 .service('focaBusquedaProductosService', ['$q', function($q) {
3 return {
4 getProductos: function(filtro) {
5 var deferred = $q.defer();
6
7 deferred.resolve([
8 {
9 idProducto: 1,
10 codigo: 1,
11 sector: 1,
12 descripcion: 'Nafta Comun',
13 codsecfilter: '1-1',
14 precio: 35
15 },
16 {
17 idProducto: 2,
18 codigo: 2,
19 sector: 1,
20 descripcion: 'Diesel',
21 codsecfilter: '1-2',
22 precio: 40
23 },
24 {
25 idProducto: 3,
26 codigo: 1,
27 sector: 2,
28 descripcion: 'Aceite',
29 codsecfilter: '2-1',
30 precio: 95
31 }
32 ]);
33
34 return deferred.promise;
35 }
36 }
37 }])
src/views/modal-busqueda-productos.html
Diff comments   View file @ 4eebd76
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title" id="modal-title">I'm a modal!</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 Esto es una prueba espero que funcione 5 <div class="input-group mb-3">
6 <input
7 type="text"
8 class="form-control"
9 placeholder="Busqueda"
10 ng-model="filters"
11 ng-change="search()"
12 ng-keypress="enter($event.keyCode)"
13 >
14 <table class="table table-striped table-sm">
15 <thead>
16 <tr>
17 <th>Sec.</th>
18 <th>Cod.</th>
19 <th>Descripción</th>
20 <th>P. Base</th>
21 <th></th>
22 </tr>
23 </thead>
24 <tbody>
25 <tr ng-repeat="producto in filteredProductos">
26 <td ng-bind="producto.sector"></td>
27 <td ng-bind="producto.codigo"></td>
28 <td ng-bind="producto.descripcion"></td>
29 <td ng-bind="producto.precio | currency"></td>
30 <td>
31 <button type="button" class="btn btn-secondary p-5 float-right mr-1" ng-click="select(producto)">
32 <i class="fa fa-check" aria-hidden="true"></i>
33 </button>
34 </td>
35 </tr>
36 </tbody>
37 </table>
38 </div>
6 </div> 39 </div>
7 <div class="modal-footer"> 40 <div class="modal-footer">
8 <button class="btn btn-primary" type="button">OK</button> 41 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
9 <button class="btn btn-warning" type="button">Cancel</button>
10 </div> 42 </div>