Eric Fernandez / foca-modal-busqueda-productos

Download as
Browse Code »

Commit c33f4e727725897e5a22df8bb79df154e58a685e

Authored by Eric Fernandez
1 parent 00724ae53c
Exists in master

Refactor búsqueda de modal productos/articulos

Showing 4 changed files with 117 additions and 100 deletions   Show diff stats
... ... @@ -36,12 +36,12 @@
36 36 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
37 37 },
38 38 "devDependencies": {
39   - "angular": "^1.7.4",
  39 + "angular": "^1.7.5",
40 40 "bootstrap": "^4.1.3",
41 41 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
42 42 "font-awesome": "^4.7.0",
43 43 "gulp": "^3.9.1",
44   - "gulp-angular-templatecache": "^2.2.1",
  44 + "gulp-angular-templatecache": "^2.2.3",
45 45 "gulp-clean": "^0.4.0",
46 46 "gulp-concat": "^2.6.1",
47 47 "gulp-connect": "^5.6.1",
... ... @@ -50,11 +50,11 @@
50 50 "gulp-rename": "^1.4.0",
51 51 "gulp-replace": "^1.0.0",
52 52 "gulp-uglify": "^3.0.1",
53   - "jasmine-core": "^3.2.1",
  53 + "jasmine-core": "^3.3.0",
54 54 "jquery": "^3.3.1",
55 55 "jshint": "^2.9.6",
56 56 "pre-commit": "^1.2.2",
57 57 "pump": "^3.0.0",
58   - "ui-bootstrap4": "^3.0.4"
  58 + "ui-bootstrap4": "^3.0.5"
59 59 }
60 60 }
src/js/controller.js
Diff comments   View file @ c33f4e7
... ... @@ -7,42 +7,54 @@ angular.module('focaBusquedaProductos')
7 7 'idLista',
8 8 'focaBusquedaProductosService',
9 9 function($filter, $scope, $uibModalInstance, idLista, focaBusquedaProductosService) {
10   - if(idLista) {
11   - focaBusquedaProductosService.getProductosByIdLista(idLista).then(
12   - function(res) {
13   - $scope.productos = res.data;
14   - $scope.search();
15   - }
16   - );
17   - } else {
18   - focaBusquedaProductosService.getProductos().then(
19   - function(res) {
20   - $scope.productos = res.data;
21   - $scope.search();
22   - }
23   - );
24   - }
25   -
26 10  
  11 + $scope.filters = '';
  12 + $scope.productos = [];
  13 + $scope.primerBusqueda = false;
27 14 // pagination
28 15 $scope.numPerPage = 10;
29 16 $scope.currentPage = 1;
30 17 $scope.filteredProductos = [];
31 18 $scope.currentPageProductos = [];
32 19 $scope.selectedProducto = -1;
33   -
  20 +
34 21 //METODOS
  22 + $scope.busquedaPress = function(key) {
  23 + if (key === 13) {
  24 + $scope.primerBusqueda = true;
  25 + if(idLista) {
  26 + focaBusquedaProductosService
  27 + .getProductosByIdLista(idLista, $scope.filters)
  28 + .then(
  29 + function(res) {
  30 + $scope.productos = res.data;
  31 + $scope.search();
  32 + }
  33 + );
  34 + } else {
  35 + focaBusquedaProductosService.getProductos().then(
  36 + function(res) {
  37 + $scope.productos = res.data;
  38 + $scope.search();
  39 + }
  40 + );
  41 + }
  42 + }
  43 + };
  44 +
35 45 $scope.search = function() {
36   - $scope.filteredProductos = $filter('filter')(
37   - $scope.productos,
38   - {$: $scope.filters}
39   - );
  46 + if($scope.productos.length > 0) {
  47 + $scope.filteredProductos = $filter('filter')(
  48 + $scope.productos,
  49 + {$: $scope.filters}
  50 + );
40 51  
41   - $scope.lastPage = Math.ceil(
42   - $scope.filteredProductos.length / $scope.numPerPage
43   - );
  52 + $scope.lastPage = Math.ceil(
  53 + $scope.filteredProductos.length / $scope.numPerPage
  54 + );
44 55  
45   - $scope.resetPage();
  56 + $scope.resetPage();
  57 + }
46 58 };
47 59  
48 60 $scope.resetPage = function() {
... ... @@ -73,12 +85,6 @@ angular.module('focaBusquedaProductos')
73 85 }
74 86 };
75 87  
76   - $scope.busquedaPress = function(key) {
77   - if (key === 13) {
78   - primera(key);
79   - }
80   - };
81   -
82 88 $scope.itemProducto = function(key) {
83 89 if (key === 38) {
84 90 anterior(key);
... ... @@ -7,8 +7,9 @@ angular.module('focaBusquedaProductos')
7 7 getProductos: function() {
8 8 return $http.get(API_ENDPOINT.URL + '/articulos');
9 9 },
10   - getProductosByIdLista: function(id) {
11   - return $http.get(API_ENDPOINT.URL + '/articulos/lista/' + id);
  10 + getProductosByIdLista: function(id, filters) {
  11 + return $http.post(API_ENDPOINT.URL + '/articulos/lista',
  12 + {filters: filters, id: id});
12 13 }
13 14 };
14 15 }
src/views/modal-busqueda-productos.html
Diff comments   View file @ c33f4e7
... ... @@ -14,70 +14,80 @@
14 14 foca-focus="selectedProducto == -1"
15 15 ng-focus="selectedProducto = -1"
16 16 >
17   - <table class="table table-striped table-sm">
18   - <thead>
19   - <tr>
20   - <th>Sec.</th>
21   - <th>Cod.</th>
22   - <th>Descripción</th>
23   - <th>P. Base</th>
24   - <th></th>
25   - </tr>
26   - </thead>
27   - <tbody>
28   - <tr class="selectable"
29   - ng-repeat="(key,producto) in currentPageProductos"
30   - ng-click="select(producto)">
31   - <td ng-bind="producto.sector"></td>
32   - <td ng-bind="producto.codigo"></td>
33   - <td ng-bind="producto.descripcion"></td>
34   - <td ng-bind="producto.precio | currency"></td>
35   - <td>
36   - <button
37   - type="button"
38   - class="btn btn-xs p-1 float-right"
39   - ng-class="{
40   - 'btn-secondary': selectedProducto != key,
41   - 'btn-primary': selectedProducto == key
42   - }"
43   - foca-focus="selectedProducto == {{key}}"
44   - ng-keydown="itemProducto($event.keyCode)"
45   - >
46   - <i class="fa fa-arrow-right" aria-hidden="true"></i>
47   - </button>
48   - </td>
49   - </tr>
50   - </tbody>
51   - </table>
52   - <nav>
53   - <ul class="pagination pagination-sm justify-content-end mb-0">
54   - <li class="page-item" ng-class="{'disabled': currentPage == 1}">
55   - <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
56   - <span aria-hidden="true">&laquo;</span>
57   - <span class="sr-only">Anterior</span>
58   - </a>
59   - </li>
60   - <li
61   - class="page-item"
62   - ng-repeat="pagina in paginas"
63   - ng-class="{'active': pagina == currentPage}"
64   - >
65   - <a
66   - class="page-link"
67   - href="#"
68   - ng-click="selectPage(pagina)"
69   - ng-bind="pagina"
70   - ></a>
71   - </li>
72   - <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
73   - <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
74   - <span aria-hidden="true">&raquo;</span>
75   - <span class="sr-only">Siguiente</span>
76   - </a>
77   - </li>
78   - </ul>
79   - </nav>
  17 + <div class="input-group-append">
  18 + <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
  19 + <i class="fa fa-search" aria-hidden="true"></i>
  20 + </button>
  21 + </div>
80 22 </div>
  23 + <table ng-show="primerBusqueda" class="table table-striped table-sm">
  24 + <thead>
  25 + <tr>
  26 + <th>Sec.</th>
  27 + <th>Cod.</th>
  28 + <th>Descripción</th>
  29 + <th>P. Base</th>
  30 + <th></th>
  31 + </tr>
  32 + </thead>
  33 + <tbody>
  34 + <tr ng-show="currentPageProductos.length == 0">
  35 + <td colspan="5">
  36 + No se encontraron resultados.
  37 + </td>
  38 + </tr>
  39 + <tr class="selectable"
  40 + ng-repeat="(key,producto) in currentPageProductos"
  41 + ng-click="select(producto)">
  42 + <td ng-bind="producto.sector"></td>
  43 + <td ng-bind="producto.codigo"></td>
  44 + <td ng-bind="producto.descripcion"></td>
  45 + <td ng-bind="producto.precio | currency"></td>
  46 + <td>
  47 + <button
  48 + type="button"
  49 + class="btn btn-xs p-1 float-right"
  50 + ng-class="{
  51 + 'btn-secondary': selectedProducto != key,
  52 + 'btn-primary': selectedProducto == key
  53 + }"
  54 + foca-focus="selectedProducto == {{key}}"
  55 + ng-keydown="itemProducto($event.keyCode)"
  56 + >
  57 + <i class="fa fa-arrow-right" aria-hidden="true"></i>
  58 + </button>
  59 + </td>
  60 + </tr>
  61 + </tbody>
  62 + </table>
  63 + <nav ng-show="currentPageProductos.length > 0 && primerBusqueda">
  64 + <ul class="pagination pagination-sm justify-content mb-0">
  65 + <li class="page-item" ng-class="{'disabled': currentPage == 1}">
  66 + <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
  67 + <span aria-hidden="true">&laquo;</span>
  68 + <span class="sr-only">Anterior</span>
  69 + </a>
  70 + </li>
  71 + <li
  72 + class="page-item"
  73 + ng-repeat="pagina in paginas"
  74 + ng-class="{'active': pagina == currentPage}"
  75 + >
  76 + <a
  77 + class="page-link"
  78 + href="#"
  79 + ng-click="selectPage(pagina)"
  80 + ng-bind="pagina"
  81 + ></a>
  82 + </li>
  83 + <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
  84 + <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
  85 + <span aria-hidden="true">&raquo;</span>
  86 + <span class="sr-only">Siguiente</span>
  87 + </a>
  88 + </li>
  89 + </ul>
  90 + </nav>
81 91 </div>
82 92 <div class="modal-footer py-1">
83 93 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>