Merge

src/app/shared/publication/new-publication/new-publication.page.html

@@ -27,8 +27,6 @@
     </div>
   </div>
 
-  <div class="container-title py-10 hide-desktop">Fotografia Anexada</div>
-
   <div class="picture d-flex pb-5 hide-desktop" *ngIf="publication.FileBase64  && capturedImage ==''">
     <div  class="post-img">
       <img src="{{publication.FileBase64}}" alt="image" >
@@ -40,18 +38,6 @@
     <div class="flex-grow-1 d-flex align-center justify-end">
       <div style="color: red;">X</div>
     </div>
-
-  </div>
-
-  <div class="ion-item-container-no-border">
-    <ion-label (click)="laodPicture()" class="cursor-pointer">
-      <div class="attach-icon">
-        <ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
-      </div>
-      <div class="attach-document cursor-pointer">
-        <ion-label>Anexar Fotografia</ion-label>
-      </div>
-    </ion-label>
   </div>
 
   <div *ngIf="capturedImage != ''" class="ion-item-container-no-border">
@@ -65,7 +51,9 @@
         <p>{{capturedImageTitle}}</p>
         <p hidden>size</p>
       </ion-label>
-      <ion-icon (click)="clear()" name="close"></ion-icon>
+      <button class="btn-no-color" (click)="clear()">
+        <ion-icon name="close"></ion-icon>
+      </button>
     </ion-item>
 
   </div>
@@ -82,7 +70,7 @@
   </div>
 
   <div class="ion-item-container-no-border hide-desktop">
-    <ion-label (click)="getPicture()" class="cursor-pointer">
+    <ion-label (click)="laodPicture()" class="cursor-pointer">
       <div class="attach-icon">
         <ion-icon src="assets/images/icons-add-photos.svg"></ion-icon>
       </div>
@@ -95,7 +83,6 @@
 
 </ion-content>
 
-
 <ion-footer class="ion-no-border">
   <ion-toolbar class="footer-toolbar width-100 px-20">
     <ion-buttons slot="start">

src/app/shared/publication/new-publication/new-publication.page.ts

@@ -4,11 +4,11 @@ import { PublicationsService } from 'src/app/services/publications.service';
 import { Publication } from 'src/app/models/publication';
 import { Image } from 'src/app/models/image';
 import { PhotoService } from 'src/app/services/photo.service';
-import { Camera, CameraOptions } from '@ionic-native/camera/ngx';
 import { ToastService } from 'src/app/services/toast.service';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { FileLoaderService } from 'src/app/services/file/file-loader.service'
 import { FileToBase64Service } from 'src/app/services/file/file-to-base64.service';
+import { Camera,  CameraResultType, CameraSource, Photo} from '@capacitor/camera';
 @Component({
   selector: 'app-new-publication',
   templateUrl: './new-publication.page.html',
@@ -38,16 +38,16 @@ export class NewPublicationPage implements OnInit {
   @Output() openPublicationDetails = new EventEmitter<any>();
   @Output() goBackToViewPublications = new EventEmitter<any>();
   @Output()  goBacktoPublicationDetails = new EventEmitter<any>();
-  
+
   guestPicture:any;
 
-  capturedImage:any;
+  capturedImage:any = '';
   capturedImageTitle:any;
+  photos: any[] = [];
 
   constructor(
     public photoService: PhotoService,
     private publications: PublicationsService,
-    private camera: Camera,
     private toastService: ToastService,
     private fileLoaderService: FileLoaderService,
     private fileToBase64Service: FileToBase64Service
@@ -60,11 +60,11 @@ export class NewPublicationPage implements OnInit {
       this.getPublicationDetail();
     }
     this.setTitle();
-    this.clear();
-    this.takePicture();
+    //this.clear();
+    //this.takePicture();
   }
 
-  getPublicationDetail() { 
+  getPublicationDetail() {
     this.showLoader = true;
     //console.log(this.publicationId);
     /* console.log(this.folderId); */
@@ -88,30 +88,60 @@ export class NewPublicationPage implements OnInit {
   }
 
 
-  takePicture() {
-    const options: CameraOptions = {
+  async takePicture() {
+    const capturedImage = await Camera.getPhoto({
       quality: 90,
-      destinationType: this.camera.DestinationType.DATA_URL,
-      encodingType: this.camera.EncodingType.JPEG,
-      mediaType: this.camera.MediaType.PICTURE,
-      targetWidth: 720,
-      targetHeight: 720,
+      // allowEditing: true,
+      resultType: CameraResultType.Uri,
+      source: CameraSource.Camera
+    });
+    const response = await fetch(capturedImage.webPath!);
+    const blob = await response.blob();
+
+      this.photos.unshift({
+        filepath: "soon...",
+        webviewPath: capturedImage.webPath
+      });
+      this.capturedImage = await this.convertBlobToBase64(blob);
+      this.capturedImageTitle = new Date().getTime() + '.jpeg';
+      //console.log(this.capturedImage);
     }
 
-    this.camera.getPicture(options).then((imageData) => {
-
-     this.capturedImage = imageData;
-     this.capturedImageTitle = new Date().getTime() + '.jpeg';
-    }, (err) => {
-     console.log(err);
+    convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => {
+      const reader = new FileReader;
+      reader.onerror = reject;
+      reader.onload = () => {
+          resolve(reader.result);
+      };
+      reader.readAsDataURL(blob);
     });
-  }
 
-  laodPicture() {
+    async laodPicture() {
+      const capturedImage = await Camera.getPhoto({
+        resultType: CameraResultType.Uri,
+        source: CameraSource.Photos,
+        quality: 90,
+        width: 1080,
+        height: 720,
+      });
+
+      const response = await fetch(capturedImage.webPath!);
+      const blob = await response.blob();
+
+      this.photos.unshift({
+        filepath: "soon...",
+        webviewPath: capturedImage.webPath
+      });
+
+      this.capturedImage = await this.convertBlobToBase64(blob);
+      this.capturedImageTitle = new Date().getTime() + '.jpeg';
+    }
+
+  /* laodPicture() {
     const input = this.fileLoaderService.createInput({
       accept: ['image/apng', 'image/jpeg', 'image/png']
     })
-    
+
     input.onchange = async () => {
       const file = this.fileLoaderService.getFirstFile(input)
 
@@ -119,8 +149,7 @@ export class NewPublicationPage implements OnInit {
       this.capturedImage = imageData;
       this.capturedImageTitle = file.name
     };
-
-  }
+  } */
 
 
   runValidation() {
@@ -199,15 +228,16 @@ export class NewPublicationPage implements OnInit {
         try {
           console.log(this.publication);
           await this.publications.UpdatePublication(this.publication.ProcessId, this.publication).toPromise()
+
           this.toastService._successMessage()
-  
+
           this.goBack();
         } catch (error) {
           this.toastService._badRequest()
         }     finally {
           loader.remove()
         }
-        
+
       } else {
         this.publication = {
           DateIndex: this.publication.DateIndex,
@@ -252,7 +282,7 @@ export class NewPublicationPage implements OnInit {
         FileBase64: this.capturedImage,
         FileExtension: 'jpeg',
       }
-      
+
       const loader = this.toastService.loading()
 
       try {
@@ -270,34 +300,14 @@ export class NewPublicationPage implements OnInit {
     }
   }
 
-  getPicture() {
-    const options: CameraOptions = {
-      quality: 90,
-      sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
-      destinationType: this.camera.DestinationType.DATA_URL,
-      encodingType: this.camera.EncodingType.JPEG,
-      mediaType: this.camera.MediaType.PICTURE,
-      targetWidth: 720,
-      targetHeight: 720,
-    }
-
-    this.camera.getPicture(options).then((imageData) => {
-      // imageData is either a base64 encoded string or a file URI
-      // If it's base64 (DATA_URL):
-      let base64Image = 'data:image/jpeg;base64,' + imageData;
-      this.capturedImage = imageData;
-      this.capturedImageTitle = new Date().getTime() + '.jpeg';
-    }, (err) => {
-      /* console.log(err); */
-    });
-  }
-
   close(){
     this.goBack();
   }
+
   clear(){
     this.capturedImage = '';
   }
+  
   setTitle(){
     if(this.publicationType == '1') {
       this.publicationTitle = 'Nova Publicação Rápida';
@@ -312,14 +322,14 @@ export class NewPublicationPage implements OnInit {
   }
 
   async goBack(){
-    
+
     if(this.publicationType == '2'){
       this.goBackToViewPublications.emit();
     } else {
       this.goBackToViewPublications.emit();
       //this.goBacktoPublicationDetails.emit();
     }
-   
+
   }
 
 }