added croppe to new publications on mobile

src/app/modals/crop-image/crop-image.page.html

@@ -6,9 +6,9 @@
 
 <ion-content>
 
- <!--  <div style="height: 100%; width: 100%;">
+  <div style="height: 100%; width: 100%;">
     <image-cropper
-    [imageBase64]="this.capturedImage"
+    [imageBase64]="this.base64ToCroppe"
     [maintainAspectRatio]="true"
     [aspectRatio]="1 / 1"
     format="jpeg"
@@ -17,6 +17,27 @@
     (imageLoaded)="imageLoaded($event)"
     (loadImageFailed)="loadImageFailed()"
   ></image-cropper>
+  </div>
+
+<!--  <div>
+  <button (click)="save()">Salvar</button>
+  <button (click)="cancel()">Cancelar</button>
  </div> -->
 
+ <ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar">
+    <ion-buttons slot="start">
+      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Gravar</ion-label>
+      </button>
+    </ion-buttons>
+    <ion-buttons slot="end">
+      <button class="btn-cancel" fill="clear" color="#061b52" (click)="cancel()">
+        <ion-label>Cancelar</ion-label>
+      </button>
+    </ion-buttons>
+
+  </ion-toolbar>
+</ion-footer>
+
 </ion-content>

src/app/modals/crop-image/crop-image.page.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { NavParams } from '@ionic/angular';
 import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
 
 @Component({
@@ -12,10 +14,18 @@ export class CropImagePage implements OnInit {
   croppedImage: any = '';
   @ViewChild('cropper') cropper: ImageCropperComponent;
   capturedImage: any = "";
+  base64ToCroppe = "";
 
-  constructor() { }
+  constructor(
+    private navParams: NavParams,
+    private modalController: ModalController,
+  ) { 
+    this.base64ToCroppe = this.navParams.get('base64ToCroppe')
+    console.log('To cropp',this.base64ToCroppe)
+  }
 
   ngOnInit() {
+    console.log('To cropp',this.base64ToCroppe)
   }
 
   fileChangeEvent(event: any): void {
@@ -28,19 +38,23 @@ export class CropImagePage implements OnInit {
   console.log('Croped image 22',this.croppedImage)
   // event.blob can be used to upload the cropped image
   }
-/*   cropperReady() {
+
-    if(this.croppedImage != '')
+  imageLoaded($event){
-    var fileObject = {
+
-      FileBase64: this.croppedImage,
+  }
-      FileExtension: 'jpeg',
+
-      OriginalFileName: 'image',
+  loadImageFailed() {
-      FileSize: this.fileSizeToMB(this.croppedImage.length)
+    console.log('cropp iage faile')
-    }
+  }
-    this.seletedContent.push(fileObject)
+
-      return true
+  save() {
-  }
+    this.modalController.dismiss({
-  loadImageFailed() {
+      base64ToCroppe: this.croppedImage
-    // show message
+    });
-  } */
+  }
+
+  cancel() {
+    this.modalController.dismiss()
+  }
 
 }

src/app/pages/publications/new-publication/new-publication.page.ts

@@ -37,6 +37,7 @@ import { VideoconvertService } from 'src/app/services/videoconvert.service'
 import { PublicationAttachmentEntity } from 'src/app/shared/publication/upload/upload-streaming.service';
 import { PublicationFromMvService } from "src/app/shared/publication/upload/publication-from-mv.service"
 import { File } from '../../../models/chatMethod';
+import { CropImagePage } from 'src/app/modals/crop-image/crop-image.page';
 
 const config = {
   quality: 0.5,
@@ -203,36 +204,9 @@ export class NewPublicationPage implements OnInit {
       resultType: CameraResultType.Base64,
       source: CameraSource.Camera
     });
-
-    console.log(capturedImage)
-
-
     this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
     this.capturedImageTitle = 'foto';
-
+    this.showCroppModal();
-    const compressedImage = await this.compressImageBase64(
-      this.capturedImage,
-      800, // maxWidth
-      800, // maxHeight
-      0.9  // quality
-    ).then((picture) => {
-      console.log('take picture', this.removeTextBeforeSlash(picture, ','),)
-      this.filecontent = true;
-      this.photoOrVideo = false;
-
-      const newAttachment = new PublicationAttachmentEntity(
-        {
-          base64: this.removeTextBeforeSlash(picture, ','),
-          extension: capturedImage.format,
-          OriginalFileName: "image",
-          FileType: 'image'
-        }
-      )
-
-      this.PublicationFromMvService.form.Files.push(newAttachment)
-
-
-    });
 
   }
 
@@ -778,8 +752,9 @@ export class NewPublicationPage implements OnInit {
           this.PublicationFromMvService.form.Files.push(newAttachment)
 
         } else {
-
+          this.capturedImage = 'data:image/jpeg;base64,' + content.data;
-        const newAttachment = new PublicationAttachmentEntity(
+          this.showCroppModal()
+          /* const newAttachment = new PublicationAttachmentEntity(
             {
               base64: 'data:image/jpeg;base64,' + content.data,
               extension: this.removeTextBeforeSlash(element.mimeType, '/'),
@@ -788,7 +763,7 @@ export class NewPublicationPage implements OnInit {
             }
           )
 
-        this.PublicationFromMvService.form.Files.push(newAttachment)
+          this.PublicationFromMvService.form.Files.push(newAttachment) */
         }
 
 
@@ -915,5 +890,38 @@ export class NewPublicationPage implements OnInit {
 
   }
 
+  async showCroppModal() {
+    const modal = await this.modalController.create({
+      component: CropImagePage,
+      componentProps: {
+        base64ToCroppe: this.capturedImage
+      },
+      cssClass: 'modal modal-desktop'
+    });
+
+    modal.onDidDismiss().then((res) => {
+      if (res) {
+        this.capturedImage = res.data
+        this.filecontent = true;
+        this.photoOrVideo = false;
+
+        const newAttachment = new PublicationAttachmentEntity(
+          {
+            base64: res.data.base64ToCroppe,
+            extension: 'jpeg',
+            OriginalFileName: "image",
+            FileType: 'image'
+          }
+        )
+
+        this.PublicationFromMvService.form.Files.push(newAttachment)
+      }
+    }, (error) => {
+      console.log(error)
+    });
+
+    await modal.present();
+  }
+
 }