Eric Fernandez / foca-modal-detalles

Download as
Browse Code »

Commit b8262d7287d42b987b5a2f4795d50dcb89eb9e30

Authored by Jose Pinto
1 parent b3cb5ed9bf
Exists in master

fix bug mostrar imagenes

Showing 2 changed files with 17 additions and 18 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ b8262d7
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', 7 'APP',
8 '$timeout', 8 '$timeout',
9 'sugerido', 9 'sugerido',
10 function($scope, $uibModalInstance, focaModalService, APP, $timeout, sugerido) { 10 function($scope, $uibModalInstance, focaModalService, APP, $timeout, sugerido) {
11 $scope.mobile = APP === 'cobranza'; 11 $scope.mobile = APP === 'cobranza';
12 $scope.files = []; 12 $scope.detalles = {
13 $scope.importe = Math.abs(sugerido); 13 files: [],
14 observaciones: '',
15 importe: Math.abs(sugerido) || 0
16 };
14 17
15 $scope.$watch('files', function() { 18 $scope.$watch('detalles.files', function() {
16 validarExtSize(); 19 validarExtSize();
17 }); 20 });
18 21
19 $scope.eliminarImg = function(key) { 22 $scope.eliminarImg = function(key) {
20 $scope.files.splice(key, 1); 23 $scope.detalles.files.splice(key, 1);
21 }; 24 };
22 25
23 $scope.cancel = function() { 26 $scope.cancel = function() {
24 $uibModalInstance.dismiss('cancel'); 27 $uibModalInstance.dismiss('cancel');
25 }; 28 };
26 29
27 $scope.aceptar = function() { 30 $scope.aceptar = function() {
28 $uibModalInstance.close({ 31 $uibModalInstance.close($scope.detalles);
29 observacion: $scope.observaciones,
30 monto: $scope.importe,
31 imgs: $scope.files
32 });
33 }; 32 };
34 33
35 $scope.seleccionarFoto = function() { 34 $scope.seleccionarFoto = function() {
36 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM; 35 var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
37 var options = setOptions(srcType); 36 var options = setOptions(srcType);
38 navigator.camera.getPicture(cameraSuccess, cameraError, options); 37 navigator.camera.getPicture(cameraSuccess, cameraError, options);
39 }; 38 };
40 39
41 $scope.tomarFoto = function() { 40 $scope.tomarFoto = function() {
42 navigator.camera.getPicture(cameraSuccess, cameraError, 41 navigator.camera.getPicture(cameraSuccess, cameraError,
43 { 42 {
44 destinationType: Camera.DestinationType.DATA_URL, 43 destinationType: Camera.DestinationType.DATA_URL,
45 quality: 100 44 quality: 100
46 }); 45 });
47 }; 46 };
48 47
49 function cameraSuccess(imageBase64) { 48 function cameraSuccess(imageBase64) {
50 49
51 var fecha = new Date(); 50 var fecha = new Date();
52 var size = (imageBase64.length * (3/4)); 51 var size = (imageBase64.length * (3/4));
53 52
54 var imagen = { 53 var imagen = {
55 name: 'imagen_' + fecha.getTime() + '.jpg', 54 name: 'imagen_' + fecha.getTime() + '.jpg',
56 size: size, 55 size: size,
57 base64: imageBase64, 56 base64: imageBase64,
58 }; 57 };
59 $timeout(function() { 58 $timeout(function() {
60 $scope.files.push(imagen); 59 $scope.detalles.files.push(imagen);
61 }); 60 });
62 } 61 }
63 function cameraError(err) { 62 function cameraError(err) {
64 console.log(err); 63 console.log(err);
65 } 64 }
66 function setOptions(srcType) { 65 function setOptions(srcType) {
67 var options = { 66 var options = {
68 // Some common settings are 20, 50, and 100 67 // Some common settings are 20, 50, and 100
69 quality: 100, 68 quality: 100,
70 destinationType: Camera.DestinationType.DATA_URL, 69 destinationType: Camera.DestinationType.DATA_URL,
71 sourceType: srcType, 70 sourceType: srcType,
72 encodingType: Camera.EncodingType.JPEG, 71 encodingType: Camera.EncodingType.JPEG,
73 mediaType: Camera.MediaType.PICTURE, 72 mediaType: Camera.MediaType.PICTURE,
74 allowEdit: true, 73 allowEdit: true,
75 correctOrientation: true 74 correctOrientation: true
76 }; 75 };
77 return options; 76 return options;
78 } 77 }
79 78
80 function validarExtSize() { 79 function validarExtSize() {
81 var totalSize = 0; 80 var totalSize = 0;
82 var invalidExt = false; 81 var invalidExt = false;
83 $scope.files.forEach(function(file) { 82 $scope.detalles.files.forEach(function(file) {
84 //CONVIERTO BYTES A MB 83 //CONVIERTO BYTES A MB
85 totalSize += file.size / 1000000; 84 totalSize += file.size / 1000000;
86 var fileExt = file.name.split('.').pop(); 85 var fileExt = file.name.split('.').pop();
87 86
88 if(fileExt != 'jpg' && fileExt != 'png') { 87 if(fileExt != 'jpg' && fileExt != 'png') {
89 invalidExt = true; 88 invalidExt = true;
90 } 89 }
91 }); 90 });
92 91
93 if (totalSize > 150) { 92 if (totalSize > 150) {
94 focaModalService.alert('El/los archivo/s exceden la capacidad máxima'); 93 focaModalService.alert('El/los archivo/s exceden la capacidad máxima');
95 $scope.files = []; 94 $scope.detalles.files = [];
96 } else if (invalidExt) { 95 } else if (invalidExt) {
97 focaModalService.alert('Ha ingresado un archivo con extensión inválida'); 96 focaModalService.alert('Ha ingresado un archivo con extensión inválida');
98 $scope.files = []; 97 $scope.detalles.files = [];
99 } 98 }
100 } 99 }
101 } 100 }
src/views/modal-detalles.html
Diff comments   View file @ b8262d7
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="detalles.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-12 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="detalles.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" ng-if="!mobile"> 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="detalles.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"> 47 <div class="col-6 mb-2" ng-if="mobile">
48 <button 48 <button
49 type="button" 49 type="button"
50 ng-if="mobile" 50 ng-if="mobile"
51 class="form-control form-control-sm" 51 class="form-control form-control-sm"
52 ng-click="seleccionarFoto()"> 52 ng-click="seleccionarFoto()">
53 Seleccione imagen</button> 53 Seleccione imagen</button>
54 </div> 54 </div>
55 <div class="col-6 mb-2" ng-if="mobile"> 55 <div class="col-6 mb-2" ng-if="mobile">
56 <button 56 <button
57 type="button" 57 type="button"
58 ng-if="mobile" 58 ng-if="mobile"
59 class="form-control form-control-sm" 59 class="form-control form-control-sm"
60 ng-click="tomarFoto()"> 60 ng-click="tomarFoto()">
61 Tome imagen 61 Tome imagen
62 </button> 62 </button>
63 </div> 63 </div>
64 <div class="col-12" ng-if="mobile"> 64 <div class="col-12" ng-if="mobile">
65 <small>Solo .jpg y .png - Tamaño máximo 150mb</small> 65 <small>Solo .jpg y .png - Tamaño máximo 150mb</small>
66 </div> 66 </div>
67 </div> 67 </div>
68 </form> 68 </form>
69 <div class="row" ng-if="!mobile"> 69 <div class="row" ng-if="!mobile">
70 <div class="col-md-3" ng-repeat="(key, file) in files"> 70 <div class="col-md-3" ng-repeat="(key, file) in detalles.files">
71 <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">
72 <button 72 <button
73 type="button" 73 type="button"
74 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"
75 title="Eliminar" 75 title="Eliminar"
76 ng-click="eliminarImg(key)"> 76 ng-click="eliminarImg(key)">
77 <i class="fa fa-times" aria-hidden="true"></i> 77 <i class="fa fa-times" aria-hidden="true"></i>
78 </button> 78 </button>
79 </div> 79 </div>
80 </div> 80 </div>
81 <div class="row" ng-if="mobile"> 81 <div class="row" ng-if="mobile">
82 <div class="col-12 d-flex justify-content-between" ng-repeat="(key, file) in files"> 82 <div class="col-12 d-flex justify-content-between" ng-repeat="(key, file) in detalles.files">
83 <strong ng-bind="file.name"></strong> 83 <strong ng-bind="file.name"></strong>
84 <button 84 <button
85 type="button" 85 type="button"
86 class="btn p-0" 86 class="btn p-0"
87 title="Eliminar" 87 title="Eliminar"
88 ng-click="eliminarImg(key)"> 88 ng-click="eliminarImg(key)">
89 <i class="fa fa-times" aria-hidden="true"></i> 89 <i class="fa fa-times" aria-hidden="true"></i>
90 </button> 90 </button>
91 </div> 91 </div>
92 </div> 92 </div>
93 </div> 93 </div>
94 <div class="modal-footer"> 94 <div class="modal-footer">
95 <button 95 <button
96 class="btn btn-primary" 96 class="btn btn-primary"
97 type="button" 97 type="button"
98 ng-click="aceptar()" 98 ng-click="aceptar()"
99 ng-disabled="!formObservaciones.$valid" 99 ng-disabled="!formObservaciones.$valid"
100 >Aceptar</button> 100 >Aceptar</button>
101 <button 101 <button
102 class="btn btn-secondary" 102 class="btn btn-secondary"
103 type="button" 103 type="button"
104 ng-click="cancel()" 104 ng-click="cancel()"
105 >Cancelar</button> 105 >Cancelar</button>
106 </div> 106 </div>
107 107