Eric Fernandez / foca-modal-cotizacion

Download as
Browse Code »

Commit cbb9be6d59dd6d42d190a2bbeb6328e49d188dee

Authored by Pablo Marco del Pont
0 parents
Exists in master

Primera versión estable.

Showing 11 changed files with 507 additions and 0 deletions   Show diff stats
File was created 1 /node_modules
2 /dist
3 /tmp
4 package-lock\.json
5 src/etc/develop\.js
6
File was created 1 {
2 /*
3 * ENVIRONMENTS
4 * =================
5 */
6
7 // Define globals exposed by modern browsers.
8 "browser": true,
9
10 // Define globals exposed by jQuery.
11 "jquery": true,
12
13 // Define globals exposed by Node.js.
14 "node": true,
15
16 // Allow ES6.
17 "esversion": 6,
18
19 /*
20 * ENFORCING OPTIONS
21 * =================
22 */
23
24 // Force all variable names to use either camelCase style or UPPER_CASE
25 // with underscores.
26 "camelcase": true,
27
28 // Prohibit use of == and != in favor of === and !==.
29 "eqeqeq": true,
30
31 // Enforce tab width of 2 spaces.
32 "indent": 4,
33
34 // Prohibit use of a variable before it is defined.
35 "latedef": false,
36
37 // Enforce line length to 100 characters
38 "maxlen": 100,
39
40 // Require capitalized names for constructor functions.
41 "newcap": true,
42
43 // Enforce use of single quotation marks for strings.
44 "quotmark": "single",
45
46 // Enforce placing 'use strict' at the top function scope
47 "strict": false,
48
49 // Prohibit use of explicitly undeclared variables.
50 "undef": true,
51
52 // Warn when variables are defined but never used.
53 "unused": true,
54
55 // Para que funcione en angular
56 "predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"],
57 /*
58 * RELAXING OPTIONS
59 * =================
60 */
61
62 // Suppress warnings about == null comparisons.
63 "eqnull": true
64 }
65
File was created 1 # foca-modal-cotizacion
2
3 Modal con lista de cotizaciones
File was created 1 const templateCache = require('gulp-angular-templatecache');
2 const concat = require('gulp-concat');
3 const htmlmin = require('gulp-htmlmin');
4 const rename = require('gulp-rename');
5 const uglify = require('gulp-uglify');
6 const gulp = require('gulp');
7 const pump = require('pump');
8 const jshint = require('gulp-jshint');
9 const replace = require('gulp-replace');
10 const connect = require('gulp-connect');
11 const clean = require('gulp-clean');
12
13 var paths = {
14 srcJS: 'src/js/*.js',
15 srcViews: 'src/views/*.html',
16 tmp: 'tmp',
17 dist: 'dist/'
18 };
19
20 gulp.task('clean', function() {
21 return gulp.src(['tmp', 'dist'], {read: false})
22 .pipe(clean());
23 });
24
25 gulp.task('templates', ['clean'], function() {
26 return pump(
27 [
28 gulp.src(paths.srcViews),
29 htmlmin(),
30 templateCache('views.js', {
31 module: 'focaModalCotizacion',
32 root: ''
33 }),
34 gulp.dest(paths.tmp)
35 ]
36 );
37 });
38
39 gulp.task('uglify', ['templates'], function() {
40 return pump(
41 [
42 gulp.src([
43 paths.srcJS,
44 'tmp/views.js'
45 ]),
46 concat('foca-modal-cotizacion.js'),
47 replace('src/views/', ''),
48 replace("['ui.bootstrap', 'focaDirectivas']", '[]'),
49 gulp.dest(paths.tmp),
50 rename('foca-modal-cotizacion.min.js'),
51 uglify(),
52 gulp.dest(paths.dist)
53 ]
54 );
55 });
56
57 gulp.task('pre-commit', function() {
58 return pump(
59 [
60 gulp.src(paths.srcJS),
61 jshint('.jshintrc'),
62 jshint.reporter('default'),
63 jshint.reporter('fail')
64 ]
65 );
66 });
67
68 gulp.task('webserver', function() {
69 pump [
70 connect.server({port: 3000})
71 ]
72 });
73
74 gulp.task('clean-post-install', function(){
75 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
76 'index.html'], {read: false})
77 .pipe(clean());
78 });
79
80 gulp.task('default', ['webserver']);
81
82 gulp.task('watch', function() {
83 gulp.watch([paths.srcJS, paths.srcViews], ['uglify']);
84 });
85
File was created 1 <html ng-app="focaModalCotizacion">
2 <head>
3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5
6 <!--CSS-->
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"/>
9
10 <!--VENDOR JS-->
11 <script src="node_modules/jquery/dist/jquery.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>
14 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
15 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
16
17 <!-- BUILD -->
18 <script src="src/js/app.js"></script>
19 <script src="src/js/controller.js"></script>
20 <script src="src/js/service.js"></script>
21
22 <!-- /BUILD -->
23
24 <!-- CONFIG PARA DEVELOP -->
25 <script src="src/etc/develop.js"></script>
26 <script type="text/javascript">
27 angular.module('focaModalCotizacion')
28 .controller('controller', [
29 '$scope',
30 '$uibModal',
31 '$timeout',
32 function($scope, $uibModal, $timeout) {
33 openModal();
34
35 function openModal() {
36 var modalInstance = $uibModal.open(
37 {
38 ariaLabelledBy: 'Busqueda de Precio Condicion',
39 templateUrl: 'src/views/modal-cotizacion.html',
40 controller: 'focaModalCotizacionController',
41 size: 'lg'
42 }
43 );
44
45 modalInstance.result.then(
46 function (selectedItem) {
47 console.info(selectedItem);
48 $timeout(openModal, 500);
49 }, function () {
50 console.info('modal-component dismissed at: ' + new Date());
51 $timeout(openModal, 500);
52 }
53 );
54 }
55 }
56 ]);
57 </script>
58 </head>
59 <body ng-controller="controller">
60 </body>
61 </html>
62
File was created 1 {
2 "name": "foca-modal-cotizacion",
3 "version": "0.0.1",
4 "description": "Modal de búsqueda de cotizaciones",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1",
8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify",
10 "postinstall": "npm run compile && gulp clean-post-install",
11 "install-dev": "npm install -D angular font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+https://debo.suite.repo/modulos-npm/foca-directivas.git"
12 },
13 "pre-commit": [
14 "gulp-pre-commit"
15 ],
16 "repository": {
17 "type": "git",
18 "url": "https://debo.suite.repo/modulos-npm/foca-modal-cotizacion.git"
19 },
20 "author": "Foca Software",
21 "license": "ISC",
22 "devDependencies": {
23 "angular": "^1.7.5",
24 "bootstrap": "^4.1.3",
25 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
26 "font-awesome": "^4.7.0",
27 "gulp": "3.9.1",
28 "gulp-angular-templatecache": "2.2.3",
29 "gulp-clean": "0.4.0",
30 "gulp-concat": "2.6.1",
31 "gulp-connect": "^5.6.1",
32 "gulp-htmlmin": "5.0.1",
33 "gulp-jshint": "^2.1.0",
34 "gulp-rename": "1.4.0",
35 "gulp-replace": "1.0.0",
36 "gulp-uglify": "3.0.1",
37 "jquery": "^3.3.1",
38 "jshint": "^2.9.6",
39 "pump": "3.0.0",
40 "ui-bootstrap4": "^3.0.5"
41 }
42 }
43
src/etc/develop.js.ejemplo
Diff comments   View file @ cbb9be6
File was created 1 angular.module('focaModalCotizacion')
2 .constant("API_ENDPOINT", {
3 'URL': '//127.0.0.1:9000'
4 });
5
File was created 1 angular.module('focaModalCotizacion', ['ui.bootstrap', 'focaDirectivas']);
2
src/js/controller.js
Diff comments   View file @ cbb9be6
File was created 1 angular.module('focaModalCotizacion')
2 .controller('focaModalCotizacionController',
3 [
4 '$filter',
5 '$scope',
6 '$uibModalInstance',
7 'focaModalCotizacionService',
8 'idMoneda',
9 function($filter, $scope, $uibModalInstance, focaModalCotizacionService, idMoneda) {
10 focaModalCotizacionService.getCotizaciones(idMoneda).then(
11 function(res) {console.log(res.data);
12 $scope.moneda = res.data[0];
13 $scope.cotizacion = res.data[0].cotizaciones;
14 $scope.search();
15 }
16 );
17
18 // pagination
19 $scope.numPerPage = 10;
20 $scope.currentPage = 1;
21 $scope.filteredCotizacion = [];
22 $scope.currentPageCotizacion = [];
23 $scope.selectedCotizacion = -1;
24
25 //METODOS
26 $scope.search = function() {
27 $scope.filteredCotizacion = $filter('filter')(
28 $scope.cotizacion,
29 {$: $scope.filters}
30 );
31
32 $scope.lastPage = Math.ceil(
33 $scope.filteredCotizacion.length / $scope.numPerPage
34 );
35
36 $scope.resetPage();
37 };
38
39 $scope.resetPage = function() {
40 $scope.currentPage = 1;
41 $scope.selectPage(1);
42 };
43
44 $scope.selectPage = function(page) {
45 var start = (page - 1) * $scope.numPerPage;
46 var end = start + $scope.numPerPage;
47 $scope.paginas = [];
48 $scope.paginas = calcularPages(page);
49 $scope.currentPageCotizacion =
50 $scope.filteredCotizacion.slice(start, end);
51 $scope.currentPage = page;
52 };
53
54 $scope.select = function(cotizacion) {
55 $uibModalInstance.close(cotizacion);
56 };
57
58 $scope.cancel = function() {
59 $uibModalInstance.dismiss('cancel');
60 };
61
62 $scope.busquedaDown = function(key) {
63 if (key === 40) {
64 primera(key);
65 }
66 };
67
68 $scope.busquedaPress = function(key) {
69 if (key === 13) {
70 primera(key);
71 }
72 };
73
74 $scope.itemProducto = function(key) {
75 if (key === 38) {
76 anterior(key);
77 }
78
79 if (key === 40) {
80 siguiente(key);
81 }
82
83 if (key === 37) {
84 retrocederPagina();
85 }
86
87 if (key === 39) {
88 avanzarPagina();
89 }
90 };
91
92 function calcularPages(paginaActual) {
93 var paginas = [];
94 paginas.push(paginaActual);
95
96 if (paginaActual - 1 > 1) {
97
98 paginas.unshift(paginaActual - 1);
99 if (paginaActual - 2 > 1) {
100 paginas.unshift(paginaActual - 2);
101 }
102 }
103
104 if (paginaActual + 1 < $scope.lastPage) {
105 paginas.push(paginaActual + 1);
106 if (paginaActual + 2 < $scope.lastPage) {
107 paginas.push(paginaActual + 2);
108 }
109 }
110
111 if (paginaActual !== 1) {
112 paginas.unshift(1);
113 }
114
115 if (paginaActual !== $scope.lastPage) {
116 paginas.push($scope.lastPage);
117 }
118
119 return paginas;
120 }
121
122 function primera() {
123 $scope.selectedCotizacion = 0;
124 }
125
126 function anterior() {
127 if ($scope.selectedCotizacion === 0 && $scope.currentPage > 1) {
128 retrocederPagina();
129 } else {
130 $scope.selectedCotizacion--;
131 }
132 }
133
134 function siguiente() {
135 if ($scope.selectedCotizacion <
136 $scope.currentPageCotizacion.length - 1 ) {
137 $scope.selectedCotizacion++;
138 } else {
139 avanzarPagina();
140 }
141 }
142
143 function retrocederPagina() {
144 if ($scope.currentPage > 1) {
145 $scope.selectPage($scope.currentPage - 1);
146 $scope.selectedCotizacion = $scope.numPerPage - 1;
147 }
148 }
149
150 function avanzarPagina() {
151 if ($scope.currentPage < $scope.lastPage) {
152 $scope.selectPage($scope.currentPage + 1);
153 $scope.selectedCotizacion = 0;
154 }
155 }
156 }
157 ]
158 );
159
File was created 1 angular.module('focaModalCotizacion')
2 .service('focaModalCotizacionService', [
3 '$http',
4 'API_ENDPOINT',
5 function($http, API_ENDPOINT) {
6 return {
7 getCotizaciones: function(idMoneda) {
8 return $http.get(API_ENDPOINT.URL + '/moneda/' + idMoneda);
9 }
10 };
11 }
12 ]);
13
src/views/modal-cotizacion.html
Diff comments   View file @ cbb9be6
File was created 1 <div class="modal-header py-1">
2 <h5 class="modal-title">Seleccione Cotización <span ng-bind="moneda.SIMBOLO"></span></h5>
3 </div>
4 <div class="modal-body" id="modal-body">
5 <div class="input-group">
6 <table class="table table-striped table-sm">
7 <thead>
8 <tr>
9 <th>Fecha</th>
10 <th>Cotización</th>
11 <th>Vendedor</th>
12 <th></th>
13 </tr>
14 </thead>
15 <tbody>
16 <tr
17 class="selectable"
18 ng-repeat="(key,cotizacion) in currentPageCotizacion"
19 ng-click="select(cotizacion)"
20 >
21 <td ng-bind="cotizacion.FECHA | date:'dd/MM/yyyy HH:mm'"></td>
22 <td ng-bind="cotizacion.COTIZACION"></td>
23 <td ng-bind="cotizacion.VENDEDOR"></td>
24 <td>
25 <button
26 type="button"
27 class="btn btn-xs p-1 float-right"
28 ng-class="{
29 'btn-secondary': selectedCotizacion != key,
30 'btn-primary': selectedCotizacion == key
31 }"
32 foca-focus="selectedCotizacion == {{key}}"
33 ng-keydown="itemProducto($event.keyCode)"
34 >
35 <i class="fa fa-arrow-right" aria-hidden="true"></i>
36 </button>
37 </td>
38 </tr>
39 </tbody>
40 </table>
41 <nav>
42 <ul class="pagination pagination-sm justify-content-end mb-0">
43 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
44 <a class="page-link" href="javascript:void()" ng-click="selectPage(currentPage - 1)">
45 <span aria-hidden="true">&laquo;</span>
46 <span class="sr-only">Anterior</span>
47 </a>
48 </li>
49 <li
50 class="page-item"
51 ng-repeat="pagina in paginas"
52 ng-class="{'active': pagina == currentPage}"
53 >
54 <a
55 class="page-link"
56 href="javascript:void()"
57 ng-click="selectPage(pagina)"
58 ng-bind="pagina"
59 ></a>
60 </li>
61 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
62 <a class="page-link" href="javascript:void()" ng-click="selectPage(currentPage + 1)">
63 <span aria-hidden="true">&raquo;</span>
64 <span class="sr-only">Siguiente</span>
65 </a>
66 </li>
67 </ul>
68 </nav>
69 </div>
70 </div>
71 <div class="modal-footer py-1">
72 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
73 </div>
74