Skip to content

Commit

Permalink
ref(mat): refactor de vistas y estilos
Browse files Browse the repository at this point in the history
  • Loading branch information
negro89 committed Mar 10, 2023
1 parent 041dba9 commit 778668e
Show file tree
Hide file tree
Showing 16 changed files with 331 additions and 265 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,45 +9,73 @@
</ion-header>

<ion-content *ngIf="authProvider.user" class="dark" padding>

<!-- VISTA DE CONFIRMACION FINAL DEL COMPROBANTE -->
<ng-container *ngIf="documentoPreview && !editar && !inProgress" (click)="editarFoto()">
<ion-grid>
<ion-row>
<ion-col>
<p>Confirme si el archivo es correcto. Si no es asi, puede editarlo.</p>
</ion-col>
</ion-row>

<img [src]="documentoPreview" id="{{ file.ext !== 'pdf' ? 'imagen-previa' : 'pdf-vista-previa' }}" />
<p *ngIf="file.ext === 'pdf'" class="ion-text-center mb-1">Sin previsualización</p>

<ion-row>
<ion-col col-6>
<ion-button color="warning" expand="block" (click)="editarFoto()">
Editar
</ion-button>
</ion-col>
<ion-col col-6>
<ion-button color="success" expand="block" (click)="confirmarComprobante()">
Confirmar
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>

<div class="no-item" *ngIf="inProgress">
<ads-icon icon="ball-triangle"></ads-icon>
</div>
<div>
<div *ngIf="!inProgress" class="content-title">
<button class="outline circular mt-4">
<ion-icon class="content-icon" name="cloud-upload-outline" (click)="upload.click()"></ion-icon>

<!-- VISTA EDICION -->
<ng-container *ngIf="editar">
<!-- ADJUNTAR COMPROBANTE -->
<ion-grid>
<ion-row>
<ion-col>
<p>Presione la imagen para adjuntar el comprobante de pago desde su celular o el botón <b>TOMAR
FOTO</b> para encender la cámara.
</p>
</ion-col>
</ion-row>
</ion-grid>

<div class="content-title">
<button class="outline circular" (click)="upload.click()">
<ion-icon class="content-icon" name="cloud-upload-outline"></ion-icon>
</button>
<input id="fileupload" type="file" (change)="changeListener($event)" style="display:none;" #upload>
Adjuntar comprobante de pago
</div>

<div *ngIf="files.length" class="img-wrapper">
<div *ngIf="files[0].loading">
<ads-icon icon="ball-triangle"></ads-icon>
</div>
<div *ngIf="!files[0].loading">
<div class="close-icon" (click)="remove()">
<ion-icon name="close"></ion-icon>
</div>
<div *ngIf="files[0].ext !== 'pdf'">
<img [src]="files[0].file" class="img-fluid" width="80" height="104" alt="">
</div>
<div *ngIf="files[0].ext === 'pdf'">
<img src="assets/img/pdf.png" width="80" height="104" class="img-fluid" alt="">
</div>
</div>
</div>

<ion-grid *ngIf="!inProgress">
<!-- TOMAR FOTO -->
<ion-grid>
<ion-row>
<ion-col>
<ion-button name="adjuntar" shape="round" color="success" size="medium" expand="block"
[disabled]="files.length === 0" (click)="confirmarComprobante()">
<ion-label>Confirmar</ion-label>
<ion-col col-6>
<ion-button color="danger" expand="block" [disabled]="true" (click)="cancelarEdicion()">
Cancelar
</ion-button>
</ion-col>
<ion-col col-6>
<ion-button color="primary" expand="block" (click)="hacerFoto()">
<ion-icon name="camera"></ion-icon>Tomar foto
</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</div>

</ng-container>
</ion-content>
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,20 @@
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 2rem;
margin-bottom: 3rem;
}

#imagen-previa {
width: 200px !important;
display: block;
margin: 0 auto 1rem;
}

#pdf-vista-previa {
width: 80px !important;
display: block;
margin: 1rem auto;
}

.cuerpo {
Expand Down
70 changes: 50 additions & 20 deletions src/app/pages/profesional/mis-matriculas/comprobante-profesional.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { ProfesionalProvider } from 'src/providers/profesional';
import { ToastProvider } from 'src/providers/toast';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest } from '@angular/common/http';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
selector: 'app-comprobante-profesional',
Expand All @@ -16,31 +17,59 @@ import { HttpClient, HttpEventType, HttpHeaders, HttpRequest } from '@angular/co

export class ComprobanteProfesionalPage implements OnInit {
@ViewChildren('upload') childsComponents: QueryList<any>;

public inProgress = true;
public profesional: any;
public validado = false;
public extension = ['jpg', 'jpeg', 'pdf'];
public files: any[] = [];
public editar = false;
public file: any;
public editar = true;
public tipoDocumento = null;
public documentoPreview = null;
private status;
private body;

constructor(
private toast: ToastProvider,
private zone: NgZone,
private router: Router,
public authProvider: AuthProvider,
private http: HttpClient,
private profesionalProvider: ProfesionalProvider,
public sanitizer: DomSanitizer,
private http: HttpClient) {
}
private camera: Camera,
public authProvider: AuthProvider,
public sanitizer: DomSanitizer
) { }

ngOnInit() {
this.inProgress = false;
this.validado = true;
}

editarFoto() {
this.editar = true;
}

cancelarEdicion() {
this.editar = false;
}

hacerFoto() {
const options: CameraOptions = {
quality: 50,
correctOrientation: true,
destinationType: this.camera.DestinationType.DATA_URL,
targetWidth: 400,
targetHeight: 600,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
cameraDirection: 0
};

this.camera.getPicture(options).then((imageData) => {
this.documentoPreview = 'data:image/jpeg;base64,' + imageData;
this.cancelarEdicion();
});
}

getExtension(file) {
if (file.lastIndexOf('.') >= 0) {
return file.slice((file.lastIndexOf('.') + 1));
Expand All @@ -57,22 +86,25 @@ export class ComprobanteProfesionalPage implements OnInit {
this.getBase64(file.files[0]).then((base64File: string) => {
(this.childsComponents.first as any).nativeElement.value = '';
let img: any;
this.documentoPreview = base64File;
if (ext === 'pdf') {
img = base64File.replace('image/*', 'application/pdf');
this.documentoPreview = "assets/img/pdf.png";
} else {
img = this.sanitizer.bypassSecurityTrustResourceUrl(base64File);
base64File = img.changingThisBreaksApplicationSecurity;
}
this.inProgress = false;
this.cancelarEdicion();

this.zone.run(() => {
this.files.push({
this.file = {
ext,
file: img,
plain64: base64File
});
this.files = [...this.files];
};
});
});

this.portFile(file.files[0]).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.inProgress = true;
Expand All @@ -90,7 +122,6 @@ export class ComprobanteProfesionalPage implements OnInit {
} else {
this.toast.danger('TIPO DE ARCHIVO INVALIDO');
}

}
}

Expand Down Expand Up @@ -119,23 +150,20 @@ export class ComprobanteProfesionalPage implements OnInit {
return this.http.request(req);
}

remove() {
this.files.splice(0, 1);
}

confirmarComprobante() {
this.tipoDocumento = {
label: 'Comprobante de pago'
};
if (this.status === 200) {
const archivos = {
const archivo = {
id: this.body.id,
extension: this.body.ext
};
const doc = {
fecha: new Date(),
tipo: this.tipoDocumento,
archivo: archivos
archivo: archivo
};
const cambio = {
op: 'updateDocumentos',
Expand All @@ -149,14 +177,17 @@ export class ComprobanteProfesionalPage implements OnInit {
if (index > -1) {
profesional.formacionGrado[index].papelesVerificados = false;
profesional.formacionGrado[index].renovacion = true;
profesional.formacionGrado[index].renovacionOnline = true;
profesional.formacionGrado[index].renovacionOnline = {
estado: 'pendiente',
fecha: new Date()
};
const data = {
op: 'updateEstadoGrado',
data: profesional.formacionGrado
};
this.profesionalProvider.patchProfesional(this.authProvider.user.profesionalId, data).then(() => {
this.toast.success('La renovación de la matrícula ha iniciado correctamente');
this.router.navigate(['home']);
this.router.navigate(['profesional/mis-matriculas']);
});
}
} else {
Expand All @@ -169,7 +200,6 @@ export class ComprobanteProfesionalPage implements OnInit {
});
}
}

}


Expand Down
Loading

0 comments on commit 778668e

Please sign in to comment.