Luigi / foca-modal-cobranza

Download as
Browse Code »

Commit a56a016665444cdbf3a2a32c10c504ee7d837359

Authored by Nicolás Guarnieri
1 parent c20057836f
Exists in master and in 1 other branch develop

modal terminado

Showing 10 changed files with 648 additions and 0 deletions   Show diff stats
... ... @@ -0,0 +1,10 @@
  1 +
  2 +node_modules/
  3 +
  4 +package-lock\.json
  5 +
  6 +dist/
  7 +
  8 +src/etc/develop\.js
  9 +
  10 +tmp/
... ... @@ -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,95 @@
  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: 'focaModalCobranza',
  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-cobranza.js'),
  47 + replace('src/views/', ''),
  48 + replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
  49 + gulp.dest(paths.tmp),
  50 + rename('foca-modal-cobranza.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 + gulp.start('uglify');
  68 +});
  69 +
  70 +gulp.task('webserver', function() {
  71 + pump [
  72 + connect.server({port: 3000})
  73 + ]
  74 +});
  75 +
  76 +gulp.task('clean-post-install', function(){
  77 + return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
  78 + 'index.html'], {read: false})
  79 + .pipe(clean());
  80 +});
  81 +
  82 +gulp.task('default', ['webserver']);
  83 +
  84 +gulp.task('watch', function() {
  85 + gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
  86 +});
  87 +
  88 +gulp.task('copy', ['uglify'], function(){
  89 + gulp.src('dist/*.js')
  90 + .pipe(gulp.dest('../../wrapper-demo/node_modules/foca-modal-cobranza/dist'));
  91 +});
  92 +
  93 +gulp.task('watchAndCopy', function() {
  94 + gulp.watch([paths.srcJS, paths.srcViews], ['copy'])
  95 +});
... ... @@ -0,0 +1,73 @@
  1 +<html ng-app="focaModalCobranza">
  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 + <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
  10 +
  11 + <!--VENDOR JS-->
  12 + <script src="node_modules/jquery/dist/jquery.min.js"></script>
  13 + <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
  14 + <script src="node_modules/angular/angular.min.js"></script>
  15 + <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
  16 + <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
  17 + <script src="node_modules/ladda/dist/spin.min.js"></script>
  18 + <script src="node_modules/ladda/dist/ladda.min.js"></script>
  19 + <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
  20 + <script src="node_modules/foca-filtros/dist/foca-filtros.min.js"></script>
  21 +
  22 + <!-- BUILD -->
  23 + <script src="src/js/app.js"></script>
  24 + <script src="src/js/controller.js"></script>
  25 + <script src="src/js/service.js"></script>
  26 +
  27 + <!-- /BUILD -->
  28 +
  29 + <!-- CONFIG PARA DEVELOP -->
  30 + <script src="src/etc/develop.js"></script>
  31 + <script type="text/javascript">
  32 + angular.module('focaModalCobranza')
  33 + .controller('controller', [
  34 + '$scope',
  35 + '$uibModal',
  36 + '$timeout',
  37 + function($scope, $uibModal, $timeout) {
  38 + openModal();
  39 +
  40 + function openModal() {
  41 + var modalInstance = $uibModal.open(
  42 + {
  43 + ariaLabelledBy: 'Busqueda de Cobranza',
  44 + templateUrl: 'src/views/foca-modal-cobranza.html',
  45 + controller: 'focaModalCobranzaController',
  46 + size: 'lg',
  47 + resolve: {
  48 + parametroCobranza: {
  49 + idLista: -1,
  50 + cotizacion: 1,
  51 + simbolo:'$'
  52 + }
  53 + }
  54 + }
  55 + );
  56 +
  57 + modalInstance.result.then(
  58 + function (selectedItem) {
  59 + console.info(selectedItem);
  60 + $timeout(openModal, 500);
  61 + }, function () {
  62 + console.info('modal-component dismissed at: ' + new Date());
  63 + $timeout(openModal, 500);
  64 + }
  65 + );
  66 + }
  67 + }
  68 + ]);
  69 + </script>
  70 + </head>
  71 + <body ng-controller="controller">
  72 + </body>
  73 +</html>
... ... @@ -0,0 +1,42 @@
  1 +{
  2 + "name": "foca-modal-cobranza",
  3 + "version": "0.0.1",
  4 + "description": "foca-modal-cobranza",
  5 + "main": "index.js",
  6 + "scripts": {
  7 + "test": "echo \"Error: no test specified\" && exit 1"
  8 + },
  9 + "repository": {
  10 + "type": "git",
  11 + "url": "git@debonline.dyndns.org:npm/foca-modal-cobranza.git"
  12 + },
  13 + "author": "Foca Software",
  14 + "license": "ISC",
  15 + "devDependencies": {
  16 + "angular": "^1.7.5",
  17 + "angular-ladda": "^0.4.3",
  18 + "angular-route": "^1.7.5",
  19 + "bootstrap": "^4.1.3",
  20 + "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas",
  21 + "foca-filtros": "git+ssh://git@git.focasoftware.com:npm/foca-filtros",
  22 + "font-awesome": "^4.7.0",
  23 + "gulp": "^3.9.1",
  24 + "gulp-angular-templatecache": "^2.2.5",
  25 + "gulp-clean": "^0.4.0",
  26 + "gulp-concat": "^2.6.1",
  27 + "gulp-connect": "^5.7.0",
  28 + "gulp-htmlmin": "^5.0.1",
  29 + "gulp-jshint": "^2.1.0",
  30 + "gulp-rename": "^1.4.0",
  31 + "gulp-replace": "^1.0.0",
  32 + "gulp-sequence": "^1.0.0",
  33 + "gulp-uglify": "^3.0.1",
  34 + "gulp-uglify-es": "^1.0.4",
  35 + "jquery": "^3.3.1",
  36 + "jshint": "^2.9.7",
  37 + "ladda": "^1.0.6",
  38 + "pre-commit": "^1.2.2",
  39 + "pump": "^3.0.0",
  40 + "ui-bootstrap4": "^3.0.5"
  41 + }
  42 +}
src/etc/develop.js.ejemplo
Diff comments   View file @ a56a016
... ... @@ -0,0 +1,4 @@
  1 +angular.module('focaModalCobranza')
  2 + .constant("API_ENDPOINT", {
  3 + 'URL': '//127.0.0.1:9000'
  4 + });
... ... @@ -0,0 +1,6 @@
  1 +angular.module('focaModalCobranza', [
  2 + 'ui.bootstrap',
  3 + 'focaDirectivas',
  4 + 'focaFiltros',
  5 + 'angular-ladda'
  6 +]);
src/js/controller.js
Diff comments   View file @ a56a016
... ... @@ -0,0 +1,192 @@
  1 +angular.module('focaModalCobranza')
  2 + .controller('focaModalCobranzaController',
  3 + [
  4 + '$timeout',
  5 + '$filter',
  6 + '$scope',
  7 + '$uibModalInstance',
  8 + 'focaModalCobranzaService',
  9 + function($timeout, $filter, $scope, $uibModalInstance, focaModalCobranzaService) {
  10 + var fecha = new Date();
  11 + $scope.fechaHasta = new Date();
  12 + $scope.fechaDesde = new Date(fecha.setMonth(fecha.getMonth() - 1));
  13 + $scope.filters = '';
  14 + $scope.cobranzas = [];
  15 + $scope.primerBusqueda = false;
  16 + $scope.searchLoading = false;
  17 + // pagination
  18 + $scope.numPerPage = 10;
  19 + $scope.currentPage = 1;
  20 + $scope.filteredCobranzas = [];
  21 + $scope.currentPageCobranzas = [];
  22 + $scope.selectedCobranza = -1;
  23 +
  24 + //METODOS
  25 + $scope.busquedaPress = function(key) {
  26 + if (key === 13) {
  27 + //TODO Validaciones con alertas de foca
  28 + if(!$scope.fechaDesde) {
  29 + alert('INGRESE FECHA DESDE');
  30 + return;
  31 + }
  32 + if(!$scope.fechaHasta) {
  33 + alert('INGRESE FECHA HASTA');
  34 + return;
  35 + }
  36 + if($scope.fechaDesde > $scope.fechaHasta) {
  37 + alert('La fecha desde no puede ser mayor a la fecha hasta');
  38 + return;
  39 + }
  40 + $scope.searchLoading = true;
  41 + //TODO: usar filtros en vez de toISOString
  42 + focaModalCobranzaService
  43 + .getCobranzas($scope.fechaDesde.toISOString().split('.')[0],
  44 + $scope.fechaHasta.toISOString().split('.')[0])
  45 + .then(llenarDatos);
  46 + }
  47 + };
  48 + function llenarDatos(res) {
  49 + $scope.cobranzas = [];
  50 + $scope.filteredCobranzas = [];
  51 + $scope.currentPageCobranzas = [];
  52 + $scope.selectedCobranza = -1;
  53 + $scope.searchLoading = false;
  54 + $scope.primerBusqueda = true;
  55 + $scope.cobranzas = res.data;
  56 + $scope.search(true);
  57 + primera();
  58 + }
  59 + $scope.search = function(pressed) {
  60 + if($scope.cobranzas.length > 0) {
  61 + $scope.filteredCobranzas = $filter('filter')(
  62 + $scope.cobranzas,
  63 + {$: $scope.filters}
  64 + );
  65 +
  66 + if(pressed && $scope.filteredCobranzas.length === 0){
  67 + $timeout(function() {
  68 + angular.element('#search')[0].focus();
  69 + $scope.filters = '';
  70 + });
  71 + }
  72 +
  73 + $scope.lastPage = Math.ceil(
  74 + $scope.filteredCobranzas.length / $scope.numPerPage
  75 + );
  76 +
  77 + $scope.resetPage();
  78 + }
  79 + };
  80 +
  81 + $scope.resetPage = function() {
  82 + $scope.currentPage = 1;
  83 + $scope.selectPage(1);
  84 + };
  85 +
  86 + $scope.selectPage = function(page) {
  87 + var start = (page - 1) * $scope.numPerPage;
  88 + var end = start + $scope.numPerPage;
  89 + $scope.paginas = [];
  90 + $scope.paginas = calcularPages(page);
  91 + $scope.currentPageCobranzas = $scope.filteredCobranzas.slice(start, end);
  92 + $scope.currentPage = page;
  93 + };
  94 +
  95 + $scope.select = function(cobranza) {
  96 + $uibModalInstance.close(cobranza);
  97 + };
  98 +
  99 + $scope.cancel = function() {
  100 + $uibModalInstance.dismiss('cancel');
  101 + };
  102 +
  103 + $scope.busquedaDown = function(key) {
  104 + if (key === 40) {
  105 + primera(key);
  106 + }
  107 + };
  108 +
  109 + $scope.itemCobranza = function(key) {
  110 + if (key === 38) {
  111 + anterior(key);
  112 + }
  113 +
  114 + if (key === 40) {
  115 + siguiente(key);
  116 + }
  117 +
  118 + if (key === 37) {
  119 + retrocederPagina();
  120 + }
  121 +
  122 + if (key === 39) {
  123 + avanzarPagina();
  124 + }
  125 + };
  126 +
  127 + function calcularPages(paginaActual) {
  128 + var paginas = [];
  129 + paginas.push(paginaActual);
  130 +
  131 + if (paginaActual - 1 > 1) {
  132 +
  133 + paginas.unshift(paginaActual - 1);
  134 + if (paginaActual - 2 > 1) {
  135 + paginas.unshift(paginaActual - 2);
  136 + }
  137 + }
  138 +
  139 + if (paginaActual + 1 < $scope.lastPage) {
  140 + paginas.push(paginaActual + 1);
  141 + if (paginaActual + 2 < $scope.lastPage) {
  142 + paginas.push(paginaActual + 2);
  143 + }
  144 + }
  145 +
  146 + if (paginaActual !== 1) {
  147 + paginas.unshift(1);
  148 + }
  149 +
  150 + if (paginaActual !== $scope.lastPage) {
  151 + paginas.push($scope.lastPage);
  152 + }
  153 +
  154 + return paginas;
  155 + }
  156 +
  157 + function primera() {
  158 + $scope.selectedCobranza = 0;
  159 + }
  160 +
  161 + function anterior() {
  162 + if ($scope.selectedCobranza === 0 && $scope.currentPage > 1) {
  163 + retrocederPagina();
  164 + } else {
  165 + $scope.selectedCobranza--;
  166 + }
  167 + }
  168 +
  169 + function siguiente() {
  170 + if ($scope.selectedCobranza < $scope.currentPageCobranzas.length - 1 ) {
  171 + $scope.selectedCobranza++;
  172 + } else {
  173 + avanzarPagina();
  174 + }
  175 + }
  176 +
  177 + function retrocederPagina() {
  178 + if ($scope.currentPage > 1) {
  179 + $scope.selectPage($scope.currentPage - 1);
  180 + $scope.selectedCobranza = $scope.numPerPage - 1;
  181 + }
  182 + }
  183 +
  184 + function avanzarPagina() {
  185 + if ($scope.currentPage < $scope.lastPage) {
  186 + $scope.selectPage($scope.currentPage + 1);
  187 + $scope.selectedCobranza = 0;
  188 + }
  189 + }
  190 + }
  191 + ]
  192 + );
... ... @@ -0,0 +1,13 @@
  1 +angular.module('focaModalCobranza')
  2 + .service('focaModalCobranzaService', [
  3 + '$http',
  4 + 'API_ENDPOINT',
  5 + function($http, API_ENDPOINT) {
  6 + return {
  7 + getCobranzas: function(fechaDesde, fechaHasta) {
  8 + return $http.get(API_ENDPOINT.URL + '/recibo/listar/' + fechaDesde + '/' +
  9 + fechaHasta);
  10 + }
  11 + };
  12 + }
  13 + ]);
src/views/foca-modal-cobranza.html
Diff comments   View file @ a56a016
... ... @@ -0,0 +1,149 @@
  1 +<div class="modal-header py-1">
  2 + <div class="row w-100">
  3 + <div class="col-lg-6">
  4 + <h5 class="modal-title my-1">Búsqueda de Cobranza</h5>
  5 + </div>
  6 + <div class="input-group col-lg-6 pr-0 my-2">
  7 + <input
  8 + ladda="searchLoading"
  9 + type="text"
  10 + class="form-control form-control-sm"
  11 + placeholder="Razón social"
  12 + ng-model="filters"
  13 + ng-change="search()"
  14 + ng-keydown="busquedaDown($event.keyCode)"
  15 + ng-keypress="busquedaPress($event.keyCode)"
  16 + foca-focus="selectedCobranza == -1"
  17 + ng-focus="selectedCobranza = -1"
  18 + id="search"
  19 + teclado-virtual
  20 + >
  21 + <div class="input-group-append">
  22 + <button
  23 + ladda="searchLoading"
  24 + class="btn btn-outline-secondary"
  25 + type="button"
  26 + ng-click="busquedaPress(13)"
  27 + >
  28 + <i class="fa fa-search" aria-hidden="true"></i>
  29 + </button>
  30 + </div>
  31 + </div>
  32 + </div>
  33 +
  34 +</div>
  35 +<div class="modal-body" id="modal-body">
  36 + <div class="input-group row">
  37 + <small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>
  38 + <div class="col-md-4 col-8 input-group mb-2">
  39 + <div class="input-group-prepend">
  40 + <div class="input-group-text form-control-sm">
  41 + <i class="fa fa-calendar"></i>
  42 + </div>
  43 + </div>
  44 + <input
  45 + class="form-control form-control-sm"
  46 + id="inlineFormInputGroup"
  47 + ladda="searchLoading"
  48 + type="date"
  49 + ng-model="fechaDesde"
  50 + hasta-hoy
  51 + ng-required="true"
  52 + />
  53 + </div>
  54 + <small class="col-md-2 col-4 text-left my-1">Fecha Hasta</small>
  55 + <div class="col-md-4 col-8 input-group mb-2">
  56 + <div class="input-group-prepend">
  57 + <div class="input-group-text form-control-sm">
  58 + <i class="fa fa-calendar"></i>
  59 + </div>
  60 + </div>
  61 + <input
  62 + class="form-control form-control-sm"
  63 + id="inlineFormInputGroup"
  64 + ladda="searchLoading"
  65 + type="date"
  66 + ng-model="fechaHasta"
  67 + ng-required="true"
  68 + hasta-hoy
  69 + />
  70 + </div>
  71 + </div>
  72 + <table ng-show="primerBusqueda" class="table table-striped table-sm">
  73 + <thead>
  74 + <tr>
  75 + <th>Fecha</th>
  76 + <th>Cliente</th>
  77 + <th>Comprobante</th>
  78 + <th></th>
  79 + </tr>
  80 + </thead>
  81 + <tbody>
  82 + <tr ng-show="currentPageCobranzas.length == 0 && primerBusqueda">
  83 + <td colspan="5">
  84 + No se encontraron resultados.
  85 + </td>
  86 + </tr>
  87 + <tr class="selectable"
  88 + ng-repeat="(key, cobranza) in currentPageCobranzas"
  89 + ng-click="select(cobranza)">
  90 + <td ng-bind="cobranza.fecha | date : 'dd/MM/yyyy'"></td>
  91 + <td ng-bind="cobranza.cliente.NOM"></td>
  92 + <td ng-bind="[cobranza.puntoVenta, cobranza.numeroRecibo] | comprobante"></td>
  93 + <td>
  94 + <button
  95 + type="button"
  96 + class="btn btn-xs p-1 float-right"
  97 + ng-class="{
  98 + 'btn-secondary': selectedCobranza != key,
  99 + 'btn-primary': selectedCobranza == key
  100 + }"
  101 + foca-focus="selectedCobranza == {{key}}"
  102 + ng-keydown="itemCobranza($event.keyCode)"
  103 + >
  104 + <i class="fa fa-circle-thin" aria-hidden="true"></i>
  105 + </button>
  106 + </td>
  107 + </tr>
  108 + </tbody>
  109 + </table>
  110 +</div>
  111 +<div class="modal-footer py-1">
  112 + <nav ng-show="currentPageCobranzas.length > 0 && primerBusqueda" class="mr-auto">
  113 + <ul class="pagination pagination-sm justify-content mb-0">
  114 + <li class="page-item" ng-class="{'disabled': currentPage == 1}">
  115 + <a
  116 + class="page-link"
  117 + href="javascript:void();"
  118 + ng-click="selectPage(currentPage - 1)"
  119 + >
  120 + <span aria-hidden="true">&laquo;</span>
  121 + <span class="sr-only">Anterior</span>
  122 + </a>
  123 + </li>
  124 + <li
  125 + class="page-item"
  126 + ng-repeat="pagina in paginas"
  127 + ng-class="{'active': pagina == currentPage}"
  128 + >
  129 + <a
  130 + class="page-link"
  131 + href="javascript:void();"
  132 + ng-click="selectPage(pagina)"
  133 + ng-bind="pagina"
  134 + ></a>
  135 + </li>
  136 + <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
  137 + <a
  138 + class="page-link"
  139 + href="javascript:void();"
  140 + ng-click="selectPage(currentPage + 1)"
  141 + >
  142 + <span aria-hidden="true">&raquo;</span>
  143 + <span class="sr-only">Siguiente</span>
  144 + </a>
  145 + </li>
  146 + </ul>
  147 + </nav>
  148 + <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
  149 +</div>