Eric Fernandez / foca-modal-detalles

Download as
Browse Code »

Commit b3cb5ed9bf6c66e97cdd8a6ca0aafd25d2665275

Authored by Jose Pinto
2 parents bad1ea0f4a c0576cccfa
Exists in master

Merge branch 'master' into 'master' 

Master(efernandez)

See merge request !2
Showing 3 changed files   Show diff stats
1 { 1 {
2 "name": "foca-modal-detalles", 2 "name": "foca-modal-detalles",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal de carga de detalles", 4 "description": "Modal de carga de detalles",
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1", 7 "test": "echo \"Error: no test specified\" && exit 1",
8 "gulp-pre-commit": "gulp pre-commit", 8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify", 9 "compile": "gulp uglify",
10 "postinstall": "npm run compile && gulp clean-post-install", 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+http://git.focasoftware.com/npm/foca-directivas.git" 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+http://git.focasoftware.com/npm/foca-directivas.git"
12 }, 12 },
13 "pre-commit": [ 13 "pre-commit": [
14 "gulp-pre-commit" 14 "gulp-pre-commit"
15 ], 15 ],
16 "repository": { 16 "repository": {
17 "type": "git", 17 "type": "git",
18 "url": "http://git.focasoftware.com/npm/foca-modal-detalles.git" 18 "url": "http://git.focasoftware.com/npm/foca-modal-detalles.git"
19 }, 19 },
20 "author": "Foca Software", 20 "author": "Foca Software",
21 "license": "ISC", 21 "license": "ISC",
22 "devDependencies": { 22 "devDependencies": {
23 "angular": "^1.7.5", 23 "angular": "^1.7.7",
24 "bootstrap": "^4.1.3", 24 "bootstrap": "^4.3.1",
25 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git", 25 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
26 "font-awesome": "^4.7.0", 26 "font-awesome": "^4.7.0",
27 "gulp": "^3.9.1", 27 "gulp": "^3.9.1",
28 "gulp-angular-templatecache": "^2.2.5", 28 "gulp-angular-templatecache": "^2.2.6",
29 "gulp-clean": "^0.4.0", 29 "gulp-clean": "^0.4.0",
30 "gulp-concat": "^2.6.1", 30 "gulp-concat": "^2.6.1",
31 "gulp-connect": "^5.6.1", 31 "gulp-connect": "^5.7.0",
32 "gulp-htmlmin": "^5.0.1", 32 "gulp-htmlmin": "^5.0.1",
33 "gulp-jshint": "^2.1.0", 33 "gulp-jshint": "^2.1.0",
34 "gulp-rename": "^1.4.0", 34 "gulp-rename": "^1.4.0",
35 "gulp-replace": "^1.0.0", 35 "gulp-replace": "^1.0.0",
36 "gulp-uglify": "^3.0.1", 36 "gulp-uglify": "^3.0.1",
37 "jquery": "^3.3.1", 37 "jquery": "^3.3.1",
38 "jshint": "^2.9.6", 38 "jshint": "^2.10.1",
39 "pump": "^3.0.0", 39 "pump": "^3.0.0",
40 "ui-bootstrap4": "^3.0.5" 40 "ui-bootstrap4": "^3.0.6"
41 } 41 }
42 } 42 }
43 43
src/js/controller.js
Diff comments   View file @ b3cb5ed
1 angular.module('focaModalDetalles') 1 angular.module('focaModalDetalles')
2 .controller('focaModalDetallesController', 2 .controller('focaModalDetallesController',
3 [ 3 [
4 '$scope', 4 '$scope',
5 '$uibModalInstance', 5 '$uibModalInstance',
6 'focaModalService', 6 'focaModalService',
7 'APP',
8 '$timeout',
7 'sugerido', 9 'sugerido',
8 function($scope, $uibModalInstance, focaModalService, sugerido) { 10 function($scope, $uibModalInstance, focaModalService, APP, $timeout, sugerido) {
11 $scope.mobile = APP === 'cobranza';
9 $scope.files = []; 12 $scope.files = [];
10 $scope.importe = Math.abs(sugerido); 13 $scope.importe = Math.abs(sugerido);
11 14
12 $scope.$watch('files', function() { 15 $scope.$watch('files', function() {
13 validarExtSize(); 16 validarExtSize();
14 }); 17 });
15 18
16 $scope.eliminarImg = function(key) { 19 $scope.eliminarImg = function(key) {
17 $scope.files.splice(key, 1); 20 $scope.files.splice(key, 1);
18 }; 21 };
19 22
20 $scope.cancel = function() { 23 $scope.cancel = function() {
21 $uibModalInstance.dismiss('cancel'); 24 $uibModalInstance.dismiss('cancel');
22 }; 25 };
26
23 $scope.aceptar = function() { 27 $scope.aceptar = function() {
24 $uibModalInstance.close({ 28 $uibModalInstance.close({
25 observacion: $scope.observaciones, 29 observacion: $scope.observaciones,
26 monto: $scope.importe, 30 monto: $scope.importe,
27 imgs: $scope.files 31 imgs: $scope.files
28 }); 32 });
29 }; 33 };
30 34
35 $scope.seleccionarFoto = function() {
36 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
37 var options = setOptions(srcType);
38 navigator.camera.getPicture(cameraSuccess, cameraError, options);
39 };
40
41 $scope.tomarFoto = function() {
42 navigator.camera.getPicture(cameraSuccess, cameraError,
43 {
44 destinationType: Camera.DestinationType.DATA_URL,
45 quality: 100
46 });
47 };
48
49 function cameraSuccess(imageBase64) {
50
51 var fecha = new Date();
52 var size = (imageBase64.length * (3/4));
53
54 var imagen = {
55 name: 'imagen_' + fecha.getTime() + '.jpg',
56 size: size,
57 base64: imageBase64,
58 };
59 $timeout(function() {
60 $scope.files.push(imagen);
61 });
62 }
63 function cameraError(err) {
64 console.log(err);
65 }
66 function setOptions(srcType) {
67 var options = {
68 // Some common settings are 20, 50, and 100
69 quality: 100,
70 destinationType: Camera.DestinationType.DATA_URL,
71 sourceType: srcType,
72 encodingType: Camera.EncodingType.JPEG,
73 mediaType: Camera.MediaType.PICTURE,
74 allowEdit: true,
75 correctOrientation: true
76 };
77 return options;
78 }
79
31 function validarExtSize() { 80 function validarExtSize() {
32 var totalSize = 0; 81 var totalSize = 0;
33 var invalidExt = false; 82 var invalidExt = false;
34 $scope.files.forEach(function(file) { 83 $scope.files.forEach(function(file) {
35 //CONVIERTO BYTES A MB 84 //CONVIERTO BYTES A MB
36 totalSize += file.size / 1000000; 85 totalSize += file.size / 1000000;
37 var fileExt = file.name.split('.').pop(); 86 var fileExt = file.name.split('.').pop();
38 87
39 if(fileExt != 'jpg' && fileExt != 'png') { 88 if(fileExt != 'jpg' && fileExt != 'png') {
40 invalidExt = true; 89 invalidExt = true;
41 } 90 }
42 }); 91 });
43 92
44 if (totalSize > 150) { 93 if (totalSize > 150) {
45 focaModalService.alert('El/los archivo/s exceden la capacidad máxima'); 94 focaModalService.alert('El/los archivo/s exceden la capacidad máxima');
46 $scope.files = []; 95 $scope.files = [];
47 } else if (invalidExt) { 96 } else if (invalidExt) {
48 focaModalService.alert('Ha ingresado un archivo con extensión inválida'); 97 focaModalService.alert('Ha ingresado un archivo con extensión inválida');
49 $scope.files = []; 98 $scope.files = [];
50 } 99 }
51 } 100 }
52 } 101 }
53 ] 102 ]
54 ); 103 );
55 104
src/views/modal-detalles.html
Diff comments   View file @ b3cb5ed
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Ingrese detalles</h3> 2 <h3 class="modal-title">Ingrese detalles</h3>
3 </div> 3 </div>
4 <div class="modal-body" id="modal-body"> 4 <div class="modal-body" id="modal-body">
5 <form name="formObservaciones"> 5 <form name="formObservaciones">
6 <div class="row"> 6 <div class="row">
7 <div class="col-12 col-md-2 mb-3"> 7 <div class="col-12 col-md-2 mb-3">
8 <label class="form-control-sm p-0">Observaciones:</label> 8 <label class="form-control-sm p-0">Observaciones:</label>
9 </div> 9 </div>
10 <div class="col-12 col-md-10 mb-3"> 10 <div class="col-12 col-md-10 mb-3">
11 <textarea 11 <textarea
12 teclado-virtual 12 teclado-virtual
13 rows="5" 13 rows="5"
14 ng-model="observaciones" 14 ng-model="observaciones"
15 class="form-control form-control-sm" 15 class="form-control form-control-sm"
16 foca-focus="focused == 9" 16 foca-focus="focused == 9"
17 ng-focus="focused = 9" 17 ng-focus="focused = 9"
18 ng-required="true"></textarea> 18 ng-required="true"></textarea>
19 </div> 19 </div>
20 <div class="col-12 col-md-2"> 20 <div class="col-12 col-md-2">
21 <label class="form-control-sm p-0">Monto cubierto:</label> 21 <label class="form-control-sm p-0">Monto cubierto:</label>
22 </div> 22 </div>
23 <div class="col-6 col-md-5 input-group mb-2"> 23 <div class="col-12 col-md-5 input-group mb-2">
24 <div class="input-group-prepend"> 24 <div class="input-group-prepend">
25 <div class="input-group-text form-control form-control-sm">$</div> 25 <div class="input-group-text form-control form-control-sm">$</div>
26 </div> 26 </div>
27 <input 27 <input
28 foca-tipo-input 28 foca-tipo-input
29 teclado-virtual 29 teclado-virtual
30 class="form-control form-control-sm" 30 class="form-control form-control-sm"
31 placeholder="Importe" 31 placeholder="Importe"
32 ng-model="importe" 32 ng-model="importe"
33 ng-keypress="next($event.keyCode)" 33 ng-keypress="next($event.keyCode)"
34 ng-required="true" 34 ng-required="true"
35 foca-focus="focused == 6" 35 foca-focus="focused == 6"
36 ng-focus="focused = 6"/> 36 ng-focus="focused = 6"/>
37 </div> 37 </div>
38 <div class="col-md-5"> 38 <div class="col-md-5" ng-if="!mobile">
39 <input 39 <input
40 type="file" 40 type="file"
41 class="form-control-file" 41 class="form-control-file"
42 ng-file-model="files" 42 ng-file-model="files"
43 multiple 43 multiple
44 accept=".jpg,.png"> 44 accept=".jpg,.png">
45 <small>Solo .jpg y .png - Tamaño máximo 150mb</small> 45 <small>Solo .jpg y .png - Tamaño máximo 150mb</small>
46 </div> 46 </div>
47 <div class="col-6 mb-2" ng-if="mobile">
48 <button
49 type="button"
50 ng-if="mobile"
51 class="form-control form-control-sm"
52 ng-click="seleccionarFoto()">
53 Seleccione imagen</button>
54 </div>
55 <div class="col-6 mb-2" ng-if="mobile">
56 <button
57 type="button"
58 ng-if="mobile"
59 class="form-control form-control-sm"
60 ng-click="tomarFoto()">
61 Tome imagen
62 </button>
63 </div>
64 <div class="col-12" ng-if="mobile">
65 <small>Solo .jpg y .png - Tamaño máximo 150mb</small>
66 </div>
47 </div> 67 </div>
48 </form> 68 </form>
49 <div class="row"> 69 <div class="row" ng-if="!mobile">
50 <div class="col-md-3" ng-repeat="(key, file) in files"> 70 <div class="col-md-3" ng-repeat="(key, file) in files">
51 <img ng-src="{{file.url}}" alt="" class="col-md-12 p-0"> 71 <img ng-src="{{file.url}}" alt="" class="col-md-12 p-0">
52 <button 72 <button
53 type="button" 73 type="button"
54 class="btn btn-delete-image btn-danger rounded-circle position-absolute p-0" 74 class="btn btn-delete-image btn-danger rounded-circle position-absolute p-0"
55 title="Eliminar" 75 title="Eliminar"
56 ng-click="eliminarImg(key)"> 76 ng-click="eliminarImg(key)">
57 <i class="fa fa-times" aria-hidden="true"></i> 77 <i class="fa fa-times" aria-hidden="true"></i>
58 </button> 78 </button>
59 </div> 79 </div>
60 </div> 80 </div>
81 <div class="row" ng-if="mobile">
82 <div class="col-12 d-flex justify-content-between" ng-repeat="(key, file) in files">
83 <strong ng-bind="file.name"></strong>
84 <button
85 type="button"
86 class="btn p-0"
87 title="Eliminar"
88 ng-click="eliminarImg(key)">
89 <i class="fa fa-times" aria-hidden="true"></i>
90 </button>
91 </div>
92 </div>
61 </div> 93 </div>
62 <div class="modal-footer"> 94 <div class="modal-footer">
63 <button 95 <button
64 class="btn btn-primary" 96 class="btn btn-primary"
65 type="button" 97 type="button"
66 ng-click="aceptar()" 98 ng-click="aceptar()"
67 ng-disabled="!formObservaciones.$valid" 99 ng-disabled="!formObservaciones.$valid"
68 >Aceptar</button> 100 >Aceptar</button>
69 <button 101 <button
70 class="btn btn-secondary" 102 class="btn btn-secondary"
71 type="button" 103 type="button"
72 ng-click="cancel()" 104 ng-click="cancel()"
73 >Cancelar</button> 105 >Cancelar</button>
74 </div> 106 </div>
75 107