feat(MOBILE): completa flujo para subir comprobante de pago

package.json

@@ -72,7 +72,7 @@
         "@ionic-native/barcode-scanner": "^5.29.0",
         "@ionic-native/base64": "^5.29.0",
         "@ionic-native/call-number": "^5.36.0",
-        "@ionic-native/camera": "5.0.2",
+        "@ionic-native/camera": "^5.36.0",
         "@ionic-native/core": "^5.0.0",
         "@ionic-native/device": "^5.29.0",
         "@ionic-native/diagnostic": "^5.29.0",

src/app/pages/profesional/mis-matriculas/comprobante-profesional.html

@@ -25,7 +25,7 @@
                 <ads-icon icon="ball-triangle"></ads-icon>
             </div>
             <div *ngIf="!files[0].loading">
-                <div class="close-icon" (click)="remove(i)">
+                <div class="close-icon" (click)="remove()">
                     <ion-icon name="close"></ion-icon>
                 </div>
                 <div *ngIf="files[0].ext !== 'pdf'">

src/app/pages/profesional/mis-matriculas/comprobante-profesional.ts

@@ -1,12 +1,12 @@
-import { AfterViewInit, Component, ElementRef, NgZone, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import { Component, NgZone, OnInit, QueryList, ViewChildren } from '@angular/core';
 import { AuthProvider } from 'src/providers/auth/auth';
-import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { ENV } from 'src/environments/environment';
 // providers
 import { ProfesionalProvider } from 'src/providers/profesional';
 import { ToastProvider } from 'src/providers/toast';
-import { FormBuilder, Validators } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
-import { Platform } from '@ionic/angular';
+import { HttpClient, HttpEventType, HttpHeaders, HttpRequest } from '@angular/common/http';
 
 @Component({
     selector: 'app-comprobante-profesional',
@@ -22,13 +22,18 @@ export class ComprobanteProfesionalPage implements OnInit {
     extension = ['jpg', 'jpeg', 'pdf'];
     files: any[] = [];
     editar = false;
+    tipoDocumento = null;
+    status;
+    body;
 
     constructor(
         private toast: ToastProvider,
         private zone: NgZone,
+        private route: Router,
         public authProvider: AuthProvider,
         private profesionalProvider: ProfesionalProvider,
-        public sanitizer: DomSanitizer) {
+        public sanitizer: DomSanitizer,
+        private http: HttpClient) {
     }
 
     ngOnInit() {
@@ -38,15 +43,18 @@ export class ComprobanteProfesionalPage implements OnInit {
         this.validado = true;
     }
 
-    fileExtension(file) {
-        // tslint:disable-next-line: no-bitwise
-        return file.slice((file.lastIndexOf('.') - 1 >>> 0) + 2);
+    getExtension(file) {
+        if (file.lastIndexOf('.') >= 0) {
+            return file.slice((file.lastIndexOf('.') + 1));
+        } else {
+            return '';
+        }
     }
 
     changeListener($event) {
         const file = $event.target;
         if (file) {
-            const ext = this.fileExtension(file.value).toLowerCase();
+            const ext = this.getExtension(file.files[0].name).toLowerCase();
             if (this.extension.indexOf(ext) >= 0) {
                 this.getBase64(file.files[0]).then((base64File: string) => {
                     (this.childsComponents.first as any).nativeElement.value = '';
@@ -67,9 +75,25 @@ export class ComprobanteProfesionalPage implements OnInit {
                     });
 
                 });
+
+                this.portFile(file.files[0]).subscribe(event => {
+                    if (event.type === HttpEventType.UploadProgress) {
+                        this.inProgress = true;
+                    }
+
+                    if (event.type === HttpEventType.Response) {
+                        this.inProgress = false;
+                        this.status = event.status;
+                        this.body = JSON.parse(event.body as string);
+                        this.body.ext = ext;
+                    }
+                }, (error) => {
+                    this.inProgress = true;
+                });
             } else {
                 this.toast.danger('TIPO DE ARCHIVO INVALIDO');
             }
+
         }
     }
 
@@ -82,12 +106,50 @@ export class ComprobanteProfesionalPage implements OnInit {
         });
     }
 
-    remove(i) {
-        this.files.splice(i, 1);
+    portFile(file: File) {
+        const formdata: FormData = new FormData();
+        formdata.append('file', file);
+
+        const headers: HttpHeaders = new HttpHeaders({
+            Authorization: 'JWT ' + this.authProvider.token
+        });
+
+        const req = new HttpRequest('POST', `${ENV.API_URL}drive`, formdata, {
+            reportProgress: true,
+            responseType: 'text',
+            headers
+        });
+        return this.http.request(req);
+    }
+
+    remove() {
+        this.files.splice(0, 1);
     }
 
     confirmarComprobante() {
-        this.toast.success('La renovación de la matrícula ha iniciado correctamente');
+        this.tipoDocumento = {
+            label: 'Comprobante de pago'
+        };
+        if (this.status === 200) {
+            const archivos = {
+                id: this.body.id,
+                extension: this.body.ext
+            };
+            const doc = {
+                fecha: new Date(),
+                tipo: this.tipoDocumento,
+                archivo: archivos
+            };
+            const cambio = {
+                op: 'updateDocumentos',
+                data: doc
+            };
+
+            this.profesionalProvider.patchProfesional(this.authProvider.user.profesionalId, cambio).then((data) => {
+                this.toast.success('La renovación de la matrícula ha iniciado correctamente');
+                this.route.navigate(['home']);
+            });
+        }
     }
 
 }

src/app/pages/profesional/mis-matriculas/datos-profesional.html

@@ -71,8 +71,8 @@
                 </ion-item>
                 <ion-item>
                     <ion-label color="secondary">Provincia</ion-label>
-                    <ion-select (ionChange)="onSelectProvincia('real')" [(ngModel)]="provinciaReal" name="provinciaReal"
-                                [selectedText]="provinciaName">
+                    <ion-select (ionChange)="onSelectProvincia('real')" [(ngModel)]="provinciaReal"
+                                name="provinciaReal">
                         <ion-select-option *ngFor="let provincia of provincias" [value]="provincia">
                             {{provincia.nombre}}
                         </ion-select-option>
@@ -124,7 +124,7 @@
                 <ion-item>
                     <ion-label color="secondary">Provincia</ion-label>
                     <ion-select (ionChange)="onSelectProvincia('legal')" [(ngModel)]="provinciaLegal"
-                                name="provinciaLegal" [selectedText]="provinciaName">
+                                name="provinciaLegal">
                         <ion-select-option *ngFor="let provincia of provincias" [value]="provincia">
                             {{provincia.nombre}}
                         </ion-select-option>
@@ -178,7 +178,7 @@
                 <ion-item>
                     <ion-label color="secondary">Provincia</ion-label>
                     <ion-select (ionChange)="onSelectProvincia('profesional')" [(ngModel)]="provinciaProfesional"
-                                name="provinciaProfesional" [selectedText]="provinciaName">
+                                name="provinciaProfesional">
                         <ion-select-option *ngFor="let provincia of provincias" [value]="provincia">
                             {{provincia.nombre}}
                         </ion-select-option>

src/app/pages/profesional/mis-matriculas/datos-profesional.ts

@@ -3,9 +3,7 @@ import { AuthProvider } from 'src/providers/auth/auth';
 import { ActivatedRoute, Router } from '@angular/router';
 // providers
 import { ProfesionalProvider } from 'src/providers/profesional';
-import * as moment from 'moment';
 import { ToastProvider } from 'src/providers/toast';
-import { FormBuilder, Validators } from '@angular/forms';
 
 @Component({
     selector: 'app-datos-profesional',
@@ -57,7 +55,11 @@ export class DatosProfesionalPage implements OnInit {
             let profesionalId;
             profesionalId = this.authProvider.user.profesionalId;
 
-            this.profesionalProvider.validarProfesional({ documento: this.datos.documento, sexo: this.datos.sexo.toLowerCase(), nombre: this.datos.nombre, apellido: this.datos.apellido, fechaNacimiento: this.datos.fechaNacimiento }).then((data: any) => {
+            this.profesionalProvider.validarProfesional({
+                documento: this.datos.documento, sexo: this.datos.sexo.toLowerCase(),
+                nombre: this.datos.nombre, apellido: this.datos.apellido,
+                fechaNacimiento: this.datos.fechaNacimiento
+            }).then((data: any) => {
                 if (data.profesional) {
                     this.profesional = data.profesional;
 
@@ -127,13 +129,16 @@ export class DatosProfesionalPage implements OnInit {
         this.profesionalProvider.getProvincias().then((data: any) => {
             this.provincias = data;
             if (tipo === 'real') {
-                this.provinciaReal = this.provincias.find(item => item._id === this.profesional.domicilios[0].ubicacion.provincia._id);
+                const idDomicilioReal = this.profesional.domicilios[0].ubicacion.provincia._id;
+                this.provinciaReal = this.provincias.find(item => item._id === idDomicilioReal);
                 this.loadLocalidades(this.provinciaReal, 'real');
             } else if (tipo === 'legal') {
-                this.provinciaLegal = this.provincias.find(item => item._id === this.profesional.domicilios[1].ubicacion.provincia._id);
+                const idDomicilioLegal = this.profesional.domicilios[1].ubicacion.provincia._id;
+                this.provinciaLegal = this.provincias.find(item => item._id === idDomicilioLegal);
                 this.loadLocalidades(this.provinciaLegal, 'legal');
             } else {
-                this.provinciaProfesional = this.provincias.find(item => item._id === this.profesional.domicilios[2].ubicacion.provincia._id);
+                const idDomicilioProfesional = this.profesional.domicilios[2].ubicacion.provincia._id;
+                this.provinciaProfesional = this.provincias.find(item => item._id === idDomicilioProfesional);
                 this.loadLocalidades(this.provinciaProfesional, 'profesional');
             }
         });
@@ -144,17 +149,20 @@ export class DatosProfesionalPage implements OnInit {
             this.localidades = data;
 
             if (tipo === 'real') {
-                this.localidadReal = this.localidades.find(item => item._id === this.profesional.domicilios[0].ubicacion.localidad._id);
+                const idLocalidadReal = this.profesional.domicilios[0].ubicacion.localidad._id;
+                this.localidadReal = this.localidades.find(item => item._id === idLocalidadReal);
                 this.editarDomReal = true;
                 this.editarDomLegal = false;
                 this.editarDomProfesional = false;
             } else if (tipo === 'legal') {
-                this.localidadLegal = this.localidades.find(item => item._id === this.profesional.domicilios[1].ubicacion.localidad._id);
+                const idLocalidadLegal = this.profesional.domicilios[1].ubicacion.localidad._id;
+                this.localidadLegal = this.localidades.find(item => item._id === idLocalidadLegal);
                 this.editarDomReal = false;
                 this.editarDomLegal = true;
                 this.editarDomProfesional = false;
             } else {
-                this.localidadProfesional = this.localidades.find(item => item._id === this.profesional.domicilios[2].ubicacion.localidad._id);
+                const idLocalidadProfesional = this.profesional.domicilios[2].ubicacion.localidad._id;
+                this.localidadProfesional = this.localidades.find(item => item._id === idLocalidadProfesional);
                 this.editarDomReal = false;
                 this.editarDomLegal = false;
                 this.editarDomProfesional = true;
@@ -176,22 +184,23 @@ export class DatosProfesionalPage implements OnInit {
             this.codigoPostalProfesional = this.profesional.domicilios[2].codigoPostal;
             this.loadProvincias('profesional');
         }
-
     }
 
     guardarDomicilio(tipo) {
         if (tipo === 'real') {
-            if (this.direccionReal !== "" && this.codigoPostalReal !== "" && this.localidadReal && this.provinciaReal) {
+            if (this.direccionReal !== '' && this.codigoPostalReal !== ''
+                && this.localidadReal && this.provinciaReal) {
                 this.editarDomReal = false;
                 this.profesional.domicilios[0].valor = this.direccionReal;
-                this.profesional.domicilios[0].codigoPostal = this.codigoPostalReal
+                this.profesional.domicilios[0].codigoPostal = this.codigoPostalReal;
                 this.profesional.domicilios[0].ubicacion.provincia = this.provinciaReal;
                 this.profesional.domicilios[0].ubicacion.localidad = this.localidadReal;
             } else {
                 this.toast.danger('Falta completar datos del domicilio real');
             }
         } else if (tipo === 'legal') {
-            if (this.direccionLegal !== "" && this.codigoPostalLegal !== "" && this.localidadLegal && this.provinciaLegal) {
+            if (this.direccionLegal !== '' && this.codigoPostalLegal !== '' &&
+                this.localidadLegal && this.provinciaLegal) {
                 this.editarDomLegal = false;
                 this.profesional.domicilios[1].valor = this.direccionLegal;
                 this.profesional.domicilios[1].codigoPostal = this.codigoPostalLegal;
@@ -201,7 +210,8 @@ export class DatosProfesionalPage implements OnInit {
                 this.toast.danger('Falta completar datos del domicilio legal');
             }
         } else {
-            if (this.direccionProfesional !== "" && this.codigoPostalProfesional !== "" && this.localidadProfesional && this.provinciaProfesional) {
+            if (this.direccionProfesional !== '' && this.codigoPostalProfesional !== '' &&
+                this.localidadProfesional && this.provinciaProfesional) {
                 this.editarDomProfesional = false;
                 this.profesional.domicilios[2].valor = this.direccionProfesional;
                 this.profesional.domicilios[2].codigoPostal = this.codigoPostalProfesional;
@@ -235,7 +245,3 @@ export class DatosProfesionalPage implements OnInit {
         }
     }
 }
-
-
-
-

src/app/pages/profesional/mis-matriculas/firma-profesional.ts

@@ -4,8 +4,6 @@ import { Router } from '@angular/router';
 // providers
 import { ProfesionalProvider } from 'src/providers/profesional';
 import { ToastProvider } from 'src/providers/toast';
-import { FormBuilder } from '@angular/forms';
-
 import SignaturePad from 'signature_pad';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -51,15 +49,15 @@ export class FirmaProfesionalPage implements OnInit {
         setTimeout(() => {
             this.signaturePad = new SignaturePad(this.canvasEl.nativeElement, {
                 backgroundColor: 'rgb(255, 255, 255)',
-                'velocityFilterWeight': 0.9
+                velocityFilterWeight: 0.9
             });
         }, 500);
     }
 
     confirmarFirma() {
 
         if (this.base64Data) {
-            let strImage = this.base64Data.replace(/^data:image\/[a-z]+;base64,/, "");
+            const strImage = this.base64Data.replace(/^data:image\/[a-z]+;base64,/, '');
 
             const firmaProfesional = {
                 firmaP: strImage,
@@ -85,7 +83,7 @@ export class FirmaProfesionalPage implements OnInit {
     }
 
     savePad() {
-        this.base64Data = this.signaturePad.toDataURL("image/jpeg", 0.5);
+        this.base64Data = this.signaturePad.toDataURL('image/jpeg', 0.5);
         this.urlFirma = this.sanitizer.bypassSecurityTrustResourceUrl(this.base64Data);
         this.editar = false;
     }

src/app/pages/profesional/mis-matriculas/foto-profesional.ts

@@ -82,7 +82,7 @@ export class FotoProfesionalPage implements OnInit {
     confirmarFoto() {
 
         if (this.fotoPreview) {
-            let strImage = this.foto.replace(/^data:image\/[a-z]+;base64,/, "");
+            const strImage = this.foto.replace(/^data:image\/[a-z]+;base64,/, '');
 
             const imagenPro = {
                 img: strImage,

src/app/pages/profesional/mis-matriculas/mis-matriculas-detalle.html

@@ -33,11 +33,9 @@
                                 </span>
                                 <span *ngIf="estadoMatricula() === 'suspendida'"
                                       class="badge badge-warning">Suspendida</span>
-                                <span *ngIf="estadoMatricula() === 'papelesVerificados' || estadoMatricula() === 'papelesSinVerificar'"
+                                <span *ngIf="estadoMatricula() === 'papelesVerificados' || estadoMatricula() === 'EnTramite'"
                                       class="badge badge-{{estadoMatricula() === 'papelesVerificados' ? 'success' : 'warning' }}">
-                                    {{estadoMatricula() === 'papelesVerificados'?'Papeles verificados': 'Papeles
-                                    sin
-                                    verificar'}}
+                                    {{estadoMatricula() === 'papelesVerificados'?'Papeles verificados': 'En trámite'}}
                                 </span>
                                 <span *ngIf="!formacionGrado.matriculacion" class="badge badge-danger">No
                                     posee</span>
@@ -67,7 +65,7 @@
         <ion-item lines="none">
             <button *ngIf="estadoMatricula() === 'vigente' || estadoMatricula() === 'vencida'"
                     class="md rounded block success" (click)="irInstrucciones()">Renovar Matrícula</button>
-            <button *ngIf="estadoMatricula() === 'papelesVerificados' || estadoMatricula() === 'papelesSinVerificar' || estadoMatricula() === 'suspendida'"
+            <button *ngIf="estadoMatricula() === 'papelesVerificados' || estadoMatricula() === 'EnTramite' || estadoMatricula() === 'suspendida'"
                     class="md rounded block secondary">Renovar Matrícula</button>
         </ion-item>
         <ion-item lines="none">

src/app/pages/profesional/mis-matriculas/mis-matriculas-detalle.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AuthProvider } from 'src/providers/auth/auth';
 import { ActivatedRoute, Router } from '@angular/router';
 
@@ -58,20 +58,19 @@ export class MisMatriculasDetallePage implements OnInit {
             if (formacionGrado.papelesVerificados) {
                 return 'papelesVerificados';
             } else {
-                return 'papelesSinVerificar';
+                return 'EnTramite';
             }
         }
     }
 
     irInstrucciones() {
-        /* this.route.navigate(['/profesional/renovar-instrucciones'], {}); */
         this.instruccionesModal();
     }
 
     private async instruccionesModal() {
         const confirm = await this.alertController.create({
             header: '¿Qué necesito para renovar una matrícula?',
-            message: '<ul>' + '<li>DNI en mano para escanear</li><li>Cámara frontal habilitada</li><li>Comprobante de pago en pdf o imágen</li>' + '</ul>',
+            message: '<ul>' + '<li>DNI en mano para escanear</li><li>Cámara frontal habilitada</li><li>Comprobante de pago en pdf o imágen</li><li>Conexión de internet</li>' + '</ul>',
             buttons: [
                 {
                     text: 'Renovar matrícula',