crop add to web

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

@@ -24,7 +24,8 @@
   <button (click)="cancel()">Cancelar</button>
  </div> -->
 
- <ion-footer class="ion-no-border">
+</ion-content>
+<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()">
@@ -39,5 +40,3 @@
 
   </ion-toolbar>
 </ion-footer>
-
-</ion-content>

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

@@ -19,7 +19,7 @@ import { CMAPIService } from '../../repository/CMAPI/cmapi.service';
 import { environment } from 'src/environments/environment';
 import { CaptureImageOptions, MediaCapture } from '@awesome-cordova-plugins/media-capture/ngx';
 import { Directory, Filesystem, FilesystemDirectory } from '@capacitor/filesystem';
-import { Platform } from '@ionic/angular';
+import { ModalController, Platform } from '@ionic/angular';
 import { PublicationAttachmentEntity } from '../upload/upload-streaming.service';
 import { VideoconvertService } from 'src/app/services/videoconvert.service';
 import { PublicationHolderService } from 'src/app/services/publication/publication-holder.service'
@@ -86,7 +86,8 @@ export class NewPublicationPage implements OnInit {
     private LakefsRepositoryService: LakefsRepositoryService,
     private SocketConnectionMCRService: SocketConnectionMCRService,
     private videoconvertService: VideoconvertService,
-    public UploadStreamingService: UploadStreamingService
+    public UploadStreamingService: UploadStreamingService,
+    private modalController: ModalController,
   ) {
     this.publicationTitle = 'Nova Publicação';
     this.PublicationFromMvService.clear()
@@ -163,8 +164,9 @@ export class NewPublicationPage implements OnInit {
     this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
     this.capturedImageTitle = 'foto';
 
+    this.showCroppModal()
     /* if(validation.isOk) { */
-    const compressedImage = await this.compressImageBase64(
+    /* const compressedImage = await this.compressImageBase64(
       this.capturedImage,
       800, // maxWidth
       800, // maxHeight
@@ -183,7 +185,7 @@ export class NewPublicationPage implements OnInit {
         }
       )
       this.PublicationFromMvService.form.Files.push(newAttachment)
-    });
+    }); */
   }
 
   async laodPicture() {
@@ -233,13 +235,23 @@ export class NewPublicationPage implements OnInit {
 
     result.files.forEach(async blobFile => {
       console.log(blobFile)
-      if (this.checkFileType.checkFileType(blobFile.mimeType) == 'image' || this.checkFileType.checkFileType(blobFile.mimeType) == 'video') {
+      if (this.checkFileType.checkFileType(blobFile.mimeType) == 'image') {
 
         this.convertBlobToBase64(blobFile.blob).then((value: string) => {
 
           this.filesSizeSum = this.filesSizeSum + blobFile.size
-          if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
+            this.capturedImage = this.removeTextBeforeSlash(value, ','),
+            this.showCroppModal();
+            this.filecontent = true;
 
+        }).catch((erro) => {
+          console.log(erro)
+        })
+      } else if (this.checkFileType.checkFileType(blobFile.mimeType) == 'video'){
+        this.convertBlobToBase64(blobFile.blob).then((value: string) => {
+
+          this.filesSizeSum = this.filesSizeSum + blobFile.size
+  
             const FileExtension = this.removeTextBeforeSlash(blobFile.mimeType, '/')
 
             const file = new File([blobFile.blob], blobFile.name);
@@ -254,21 +266,13 @@ export class NewPublicationPage implements OnInit {
               }
             )
 
-
-
             newAttachment.needUpload()
             this.PublicationFromMvService.form.Files.push(newAttachment)
             this.filecontent = true;
-
-          } else {
-            if (this.PublicationFromMvService.form.Files.length === 0)
-              this.filesSizeSum = 0
-
-            this.httpErroHandle.validationMessagge('filessize');
-          }
         }).catch((erro) => {
           console.log(erro)
         })
+        
       } else {
         this.httpErroHandle.validationMessagge('filetype');
       }
@@ -286,8 +290,22 @@ export class NewPublicationPage implements OnInit {
     result.files.forEach(element => {
 
       this.filesSizeSum = this.filesSizeSum + element.size
-      if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
-        if (this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
+        if (this.checkFileType.checkFileType(element.mimeType) == 'image') {
+          let resultUrl = decodeURIComponent(element.path);
+          try {
+            Filesystem.readFile({ path: resultUrl })
+
+              .then(async (content) => {
+                console.log(result)
+                this.capturedImage = 'data:image/jpeg;base64,'+content.data
+                this.showCroppModal()
+              })
+              .catch((err) => console.error(err));
+          } catch (error) {
+            console.log('upload video error: ', error)
+          }
+
+        } else if (this.checkFileType.checkFileType(element.mimeType) == 'video'){
           let resultUrl = decodeURIComponent(element.path);
           try {
             Filesystem.readFile({ path: resultUrl })
@@ -311,13 +329,9 @@ export class NewPublicationPage implements OnInit {
             console.log('upload video error: ', error)
           }
 
+        } else {
+          this.httpErroHandle.validationMessagge('filetype');
         }
-      } else {
-        if (this.PublicationFromMvService.form.Files.length === 0)
-          this.filesSizeSum = 0
-
-        this.httpErrorHandle.validationMessagge('filessize')
-      }
     });
   };
 
@@ -746,12 +760,46 @@ console.log(stringGerada);
 
   return stringAleatoria;
 }
+
+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();
+}
 }
 
 
 
 import { Observable, of, Subject } from 'rxjs';
 import { tap, switchMap, delay, map } from 'rxjs/operators';
+import { CropImagePage } from 'src/app/modals/crop-image/crop-image.page';
 
 function shareResponse<T>(): MethodDecorator {
   return function (

src/environments/environment.ts

@@ -4,4 +4,4 @@ import { environment as oaprDev } from './suport/oapr'
 import { DevDev } from './suport/dev'
 
 
-export const environment: Environment = oaprDev
+export const environment: Environment = DevDev