Luigi / foca-modal-domicilio

Download as
Browse Code ยป

Commit d3d096b2a11ee3f25c04fa1a3e187097b30eb3f4

Authored by Eric Fernandez
2 parents ad735d98cc c60ee77aea
Exists in master

Merge branch 'master' into 'master' 

First Version

See merge request modulos-npm/foca-modal-domicilio!1
Showing 10 changed files   Show diff stats
... ... @@ -0,0 +1,5 @@
  1 +/node_modules
  2 +/dist
  3 +/tmp
  4 +package-lock\.json
  5 +src/etc/develop\.js
... ... @@ -0,0 +1,64 @@
  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 +}
... ... @@ -0,0 +1,77 @@
  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']);
... ... @@ -0,0 +1,62 @@
  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>
... ... @@ -0,0 +1,60 @@
  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 +}
src/etc/develop.js.ejemplo
Diff comments   View file @ d3d096b
... ... @@ -0,0 +1,4 @@
  1 +angular.module('focaModalDomicilio')
  2 + .constant("API_ENDPOINT", {
  3 + 'URL': '//127.0.0.1:9000'
  4 + });
... ... @@ -0,0 +1 @@
  1 +angular.module('focaModalDomicilio', ['ui.bootstrap', 'focaDirectivas']);
src/js/controller.js
Diff comments   View file @ d3d096b
... ... @@ -0,0 +1,156 @@
  1 +angular.module('focaModalDomicilio')
  2 + .controller('focaModalDomicilioController',
  3 + [
  4 + '$filter',
  5 + '$scope',
  6 + '$uibModalInstance',
  7 + 'idCliente',
  8 + 'focaModalDomicilioService',
  9 + function($filter, $scope, $uibModalInstance, idCliente,focaModalDomicilioService) {
  10 +
  11 + focaModalDomicilioService.getDomiciliosByIdCliente(idCliente).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 + );
... ... @@ -0,0 +1,14 @@
  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 + ]);
src/views/modal-domicilio.html
Diff comments   View file @ d3d096b
... ... @@ -0,0 +1,95 @@
  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 + </tbody>
  62 + </table>
  63 + <nav>
  64 + <ul class="pagination justify-content-end">
  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>
  91 + </div>
  92 +</div>
  93 +<div class="modal-footer">
  94 + <button class="btn btn-secondary" type="button" ng-click="cancel()">Seleccionar otro cliente</button>
  95 +</div>