WIP: Modal de busqueda de producto con tabla y filtro

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