Eric Fernandez / foca-modal-detalles

Download as
Browse Code »

Commit 48241719586e284ac1b822b98a775cf946298ba8

Authored by Eric
1 parent 81cc98782d
Exists in master

edición, precio sugerido

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