Luigi / foca-modal-domicilio

Download as
Browse Code ยป

Commit 021b79827d3e91db681c5964e71c1bd8ffdeb9bf

Authored by Eric Fernandez
1 parent ad735d98cc
Exists in master

First Version

Showing 10 changed files with 539 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 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('templates', function() {
21 return pump(
22 [
23 gulp.src(paths.srcViews),
24 htmlmin(),
25 templateCache('views.js', {
26 module: 'focaModalDomicilio',
27 root: ''
28 }),
29 gulp.dest(paths.tmp)
30 ]
31 );
32 });
33
34 gulp.task('uglify', ['templates'], function() {
35 return pump(
36 [
37 gulp.src([
38 paths.srcJS,
39 'tmp/views.js'
40 ]),
41 concat('foca-modal-domicilios.js'),
42 replace('src/views/', ''),
43 replace("['ui.bootstrap', 'focaDirectivas']", '[]'),
44 gulp.dest(paths.tmp),
45 rename('foca-modal-domicilios.min.js'),
46 uglify(),
47 gulp.dest(paths.dist)
48 ]
49 );
50 });
51
52 gulp.task('pre-commit', function() {
53 return pump(
54 [
55 gulp.src(paths.srcJS),
56 jshint('.jshintrc'),
57 jshint.reporter('default'),
58 jshint.reporter('fail')
59 ]
60 );
61
62 gulp.start('uglify');
63 });
64
65 gulp.task('webserver', function() {
66 pump [
67 connect.server({port: 3000})
68 ]
69 });
70
71 gulp.task('clean-post-install', function(){
72 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
73 'index.html'], {read: false})
74 .pipe(clean());
75 });
76
77 gulp.task('default', ['webserver']);
78
File was created 1 <html ng-app="focaModalDomicilio">
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('focaModalDomicilio')
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 Domicilios',
39 templateUrl: 'src/views/modal-domicilio.html',
40 controller: 'focaModalDomicilioController',
41 size: 'lg',
42 resolve: {idLista : function() { return null; }}
43 }
44 );
45
46 modalInstance.result.then(
47 function (selectedItem) {
48 console.info(selectedItem);
49 $timeout(openModal, 500);
50 }, function () {
51 console.info('modal-component dismissed at: ' + new Date());
52 $timeout(openModal, 500);
53 }
54 );
55 }
56 }
57 ]);
58 </script>
59 </head>
60 <body ng-controller="controller">
61 </body>
62 </html>
63
File was created 1 {
2 "name": "foca-modal-domicilio",
3 "version": "0.0.1",
4 "description": "Modal para busqueda de domicilios",
5 "scripts": {
6 "test": "echo \"Error: no test specified\" && exit 1",
7 "gulp-pre-commit": "gulp pre-commit",
8 "compile": "gulp uglify",
9 "postinstall": "npm run compile && gulp clean-post-install",
10 "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
11 },
12 "pre-commit": [
13 "gulp-pre-commit"
14 ],
15 "repository": {
16 "type": "git",
17 "url": "https://debo.suite.repo/modulos-npm/foca-modal-domicilio.git"
18 },
19 "author": "Foca Software",
20 "license": "ISC",
21 "peerDependencies": {
22 "angular": "^1.7.4",
23 "bootstrap": "^4.1.3",
24 "font-awesome": "^4.7.0",
25 "ui-bootstrap4": "^3.0.4",
26 "gulp": "^3.9.1",
27 "gulp-angular-templatecache": "^2.2.1",
28 "gulp-concat": "^2.6.1",
29 "gulp-connect": "^5.6.1",
30 "gulp-htmlmin": "^5.0.1",
31 "gulp-rename": "^1.4.0",
32 "gulp-replace": "^1.0.0",
33 "gulp-uglify": "^3.0.1",
34 "jquery": "^3.3.1",
35 "pump": "^3.0.0",
36 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
37 },
38 "devDependencies": {
39 "angular": "^1.7.5",
40 "bootstrap": "^4.1.3",
41 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
42 "font-awesome": "^4.7.0",
43 "gulp": "^3.9.1",
44 "gulp-angular-templatecache": "^2.2.3",
45 "gulp-clean": "^0.4.0",
46 "gulp-concat": "^2.6.1",
47 "gulp-connect": "^5.6.1",
48 "gulp-htmlmin": "^5.0.1",
49 "gulp-jshint": "^2.1.0",
50 "gulp-rename": "^1.4.0",
51 "gulp-replace": "^1.0.0",
52 "gulp-uglify": "^3.0.1",
53 "jasmine-core": "^3.3.0",
54 "jquery": "^3.3.1",
55 "jshint": "^2.9.6",
56 "pre-commit": "^1.2.2",
57 "pump": "^3.0.0",
58 "ui-bootstrap4": "^3.0.5"
59 }
60 }
61
src/etc/develop.js.ejemplo
Diff comments   View file @ 021b798
File was created 1 angular.module('focaModalDomicilio')
2 .constant("API_ENDPOINT", {
3 'URL': '//127.0.0.1:9000'
4 });
5
File was created 1 angular.module('focaModalDomicilio', ['ui.bootstrap', 'focaDirectivas']);
2
src/js/controller.js
Diff comments   View file @ 021b798
File was created 1 angular.module('focaModalDomicilio')
2 .controller('focaModalDomicilioController',
3 [
4 '$filter',
5 '$scope',
6 '$uibModalInstance',
7 // 'idCliente',
8 'focaModalDomicilioService',
9 function($filter, $scope, $uibModalInstance, focaModalDomicilioService) {
10
11 focaModalDomicilioService.getDomiciliosByIdCliente(1).then(
12 function(res) {
13 $scope.domicilios = res.data;
14 $scope.search();
15 }
16 );
17
18 // pagination
19 $scope.numPerPage = 5;
20 $scope.currentPage = 1;
21 $scope.filteredDomicilios = [];
22 $scope.currentPageDomicilios = [];
23 $scope.selectedDomicilio = -1;
24
25 //METODOS
26 $scope.search = function() {
27 $scope.filteredDomicilios = $filter('filter')(
28 $scope.domicilios,
29 {$: $scope.filters}
30 );
31
32 $scope.lastPage = Math.ceil(
33 $scope.filteredDomicilios.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.currentPageDomicilios = $scope.filteredDomicilios.slice(start, end);
50 $scope.currentPage = page;
51 };
52
53 $scope.select = function(domicilio) {
54 $uibModalInstance.close(domicilio);
55 };
56
57 $scope.cancel = function() {
58 $uibModalInstance.dismiss('cancel');
59 };
60
61 $scope.busquedaDown = function(key) {
62 if (key === 40) {
63 primera(key);
64 }
65 };
66
67 $scope.busquedaPress = function(key) {
68 if (key === 13) {
69 primera(key);
70 }
71 };
72
73 $scope.itemDomicilio = function(key) {
74 if (key === 38) {
75 anterior(key);
76 }
77
78 if (key === 40) {
79 siguiente(key);
80 }
81
82 if (key === 37) {
83 retrocederPagina();
84 }
85
86 if (key === 39) {
87 avanzarPagina();
88 }
89 };
90
91 function calcularPages(paginaActual) {
92 var paginas = [];
93 paginas.push(paginaActual);
94
95 if (paginaActual - 1 > 1) {
96
97 paginas.unshift(paginaActual - 1);
98 if (paginaActual - 2 > 1) {
99 paginas.unshift(paginaActual - 2);
100 }
101 }
102
103 if (paginaActual + 1 < $scope.lastPage) {
104 paginas.push(paginaActual + 1);
105 if (paginaActual + 2 < $scope.lastPage) {
106 paginas.push(paginaActual + 2);
107 }
108 }
109
110 if (paginaActual !== 1) {
111 paginas.unshift(1);
112 }
113
114 if (paginaActual !== $scope.lastPage) {
115 paginas.push($scope.lastPage);
116 }
117
118 return paginas;
119 }
120
121 function primera() {
122 $scope.selectedDomicilio = 0;
123 }
124
125 function anterior() {
126 if ($scope.selectedDomicilio === 0 && $scope.currentPage > 1) {
127 retrocederPagina();
128 } else {
129 $scope.selectedDomicilio--;
130 }
131 }
132
133 function siguiente() {
134 if ($scope.selectedDomicilio < $scope.currentPageDomicilios.length - 1 ) {
135 $scope.selectedDomicilio++;
136 } else {
137 avanzarPagina();
138 }
139 }
140
141 function retrocederPagina() {
142 if ($scope.currentPage > 1) {
143 $scope.selectPage($scope.currentPage - 1);
144 $scope.selectedDomicilio = $scope.numPerPage - 1;
145 }
146 }
147
148 function avanzarPagina() {
149 if ($scope.currentPage < $scope.lastPage) {
150 $scope.selectPage($scope.currentPage + 1);
151 $scope.selectedDomicilio = 0;
152 }
153 }
154 }
155 ]
156 );
157
File was created 1 angular.module('focaModalDomicilio')
2 .service('focaModalDomicilioService', [
3 '$http',
4 'API_ENDPOINT',
5 function($http, API_ENDPOINT) {
6 return {
7 getDomiciliosByIdCliente: function(id) {
8 var idTipoDom = 2;//El tipo para nota de pedido es 2 (tipo de entrega)
9 return $http.get(API_ENDPOINT.URL +
10 '/domicilio/tipo/' + idTipoDom + '/cliente/' + id);
11 }
12 };
13 }
14 ]);
15
src/views/modal-domicilio.html
Diff comments   View file @ 021b798
File was created 1 <div class="modal-header">
2 <h3 class="modal-title">Busqueda de Domicilios</h3>
3 </div>
4 <div class="modal-body" id="modal-body">
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-keydown="busquedaDown($event.keyCode)"
13 ng-keypress="busquedaPress($event.keyCode)"
14 foca-focus="selectedDomicilio == -1"
15 ng-focus="selectedDomicilio = -1"
16 >
17 <table class="table table-striped table-sm">
18 <thead>
19 <tr>
20 <th>Domicilio</th>
21 <th>Localidad</th>
22 <th>Provincia</th>
23 <th colspan="5" class="text-center">Contacto</th>
24 <th></th>
25 </tr>
26 <tr>
27 <th></th>
28 <th></th>
29 <th></th>
30 <th>Nombre</th>
31 <th>Telefono 1</th>
32 <th>Telefono 2</th>
33 <th></th>
34 </tr>
35 </thead>
36 <tbody>
37 <tr class="selectable"
38 ng-repeat="(key,domicilio) in currentPageDomicilios"
39 ng-click="select(domicilio)">
40 <td ng-bind="domicilio.dom"></td>
41 <td ng-bind="domicilio.loc"></td>
42 <td ng-bind="domicilio.pci"></td>
43 <td ng-bind="domicilio.contacto[0].nombre"></td>
44 <td ng-bind="domicilio.contacto[0].telefono1"></td>
45 <td ng-bind="domicilio.contacto[0].telefono2"></td>
46 <td>
47 <button
48 type="button"
49 class="btn p-2 float-right"
50 ng-class="{
51 'btn-secondary': selectedDomicilio != key,
52 'btn-primary': selectedDomicilio == key
53 }"
54 foca-focus="selectedDomicilio == {{key}}"
55 ng-keydown="itemDomicilio($event.keyCode)"
56 >
57 <i class="fa fa-arrow-right" aria-hidden="true"></i>
58 </button>
59 </td>
60 </tr>
61
62 </tbody>
63 </table>
64 <nav>
65 <ul class="pagination justify-content-end">
66 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
67 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
68 <span aria-hidden="true">&laquo;</span>
69 <span class="sr-only">Anterior</span>
70 </a>
71 </li>
72 <li
73 class="page-item"
74 ng-repeat="pagina in paginas"
75 ng-class="{'active': pagina == currentPage}"
76 >
77 <a
78 class="page-link"
79 href="#"
80 ng-click="selectPage(pagina)"
81 ng-bind="pagina"
82 ></a>
83 </li>
84 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
85 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
86 <span aria-hidden="true">&raquo;</span>
87 <span class="sr-only">Siguiente</span>
88 </a>
89 </li>
90 </ul>
91 </nav>
92 </div>
93 </div>
94 <div class="modal-footer">
95 <button class="btn btn-secondary" type="button" ng-click="cancel()">Seleccionar otro cliente</button>
96 </div>
97