Merge branch 'feature/viewer-attachment' of bitbucket.org:equilibriumito/gabinete-digital-fo into feature/viewer-attachment

src/app/app-routing.module.ts

@@ -305,6 +305,10 @@ const routes = [
   {
     path: 'view-document-second-options',
     loadChildren: () => import('./modals/view-document-second-options/view-document-second-options.module').then( m => m.ViewDocumentSecondOptionsPageModule)
+  },
+  {
+    path: 'crop-image',
+    loadChildren: () => import('./modals/crop-image/crop-image.module').then( m => m.CropImagePageModule)
   }
 
  /*

src/app/app.module.ts

@@ -93,6 +93,7 @@ import { InputFilterDirective } from './services/directives/input-filter.directi
 import { VisibilityDirective } from './services/directives/visibility.directive';
 import { DeplomaOptionsPageModule } from './shared/popover/deploma-options/deploma-options.module';
 import { DiplomaOptionsPage } from './shared/popover/deploma-options/deploma-options.page';
+import { ImageCropperModule } from 'ngx-image-cropper';
 // import { ServiceWorkerModule } from '@angular/service-worker';
 // import { AngularFireModule } from '@angular/fire';
 // import { AngularFireMessagingModule } from '@angular/fire/messaging';
@@ -176,6 +177,7 @@ import { FirebaseX } from '@ionic-native/firebase-x/ngx'; */
     // options
     DeplomaOptionsPageModule,
     CreateProcessPageModule,
+    ImageCropperModule
   ],
   entryComponents: [
     DiplomaOptionsPage,

src/app/modals/crop-image/crop-image-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CropImagePage } from './crop-image.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: CropImagePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class CropImagePageRoutingModule {}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { CropImagePageRoutingModule } from './crop-image-routing.module';
+
+import { CropImagePage } from './crop-image.page';
+import { ImageCropperModule } from 'ngx-image-cropper';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    CropImagePageRoutingModule,
+    ImageCropperModule
+  ],
+  declarations: [CropImagePage]
+})
+export class CropImagePageModule {}

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

@@ -0,0 +1,43 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>cropImage</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+
+  <div style="height: 100%; width: 100%;">
+    <image-cropper
+    [imageBase64]="this.base64ToCroppe"
+    [maintainAspectRatio]="true"
+    [aspectRatio]="1 / 1"
+    format="jpeg"
+    allowMoveImage="true"
+    (imageCropped)="imageCropped($event)"
+    (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.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { CropImagePage } from './crop-image.page';
+
+describe('CropImagePage', () => {
+  let component: CropImagePage;
+  let fixture: ComponentFixture<CropImagePage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CropImagePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CropImagePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,60 @@
+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({
+  selector: 'app-crop-image',
+  templateUrl: './crop-image.page.html',
+  styleUrls: ['./crop-image.page.scss'],
+})
+export class CropImagePage implements OnInit {
+
+  imageChangedEvent: any = '';
+  croppedImage: any = '';
+  @ViewChild('cropper') cropper: ImageCropperComponent;
+  capturedImage: any = "";
+  base64ToCroppe = "";
+
+  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 {
+    this.imageChangedEvent = event;
+  }
+  imageCropped(event: ImageCroppedEvent) {
+  this.croppedImage = event.base64;
+  
+  console.log('Croped image',event)
+  console.log('Croped image 22',this.croppedImage)
+  // event.blob can be used to upload the cropped image
+  }
+
+  imageLoaded($event){
+
+  }
+
+  loadImageFailed() {
+    console.log('cropp iage faile')
+  }
+
+  save() {
+    this.modalController.dismiss({
+      base64ToCroppe: this.croppedImage
+    });
+  }
+
+  cancel() {
+    this.modalController.dismiss()
+  }
+
+}

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

@@ -34,7 +34,7 @@
           <div class="d-flex">
             <div *ngFor="let seleted of PublicationFromMvService.form.Files.slice(0, displayLimit), let i = index"  lot="start" class="mr-10">
 
-              <div class="text-center cursor-pointer"  (click)="deleteFromSeletedContent(i)" style="font-weight: 700;color: #c63527;">
+              <div class="text-center cursor-pointer"  (click)="deleteFromSeletedContent(i)" style="font-weight: 700;color: #c63527; text-align-last: right;">
                 X
               </div>
 
@@ -50,7 +50,7 @@
 
               <ion-img *ngIf="checkFileType.checkFileType(seleted.FileExtension) == 'image'" [(ngModel)]="capturedImage"
                 name="image" ngDefaultControl [src]="seleted.url"
-                (click)="imageSize(capturedImage)"  style="height: 69px;"></ion-img>
+                (click)="imageSize(capturedImage)"  style="height: 69px; width: 69px;"></ion-img>
 
               <video *ngIf="checkFileType.checkFileType(seleted.FileExtension)  == 'video'" width="70" height="70"
                 controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline">

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,
@@ -160,7 +161,7 @@ export class NewPublicationPage implements OnInit {
         )
       })
 
-      for(const files of newFiles) {
+      for (const files of newFiles) {
         this.PublicationFromMvService.form.Files.push(files)
       }
     }
@@ -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)
-
-
-    });
 
   }
 
@@ -268,15 +242,15 @@ export class NewPublicationPage implements OnInit {
         this.filesSizeSum = this.filesSizeSum + element.size
         // element.size
         try {
-        if (this.platform.is('ios')) {
+          if (this.platform.is('ios')) {
-          this.recordevideoIos(element.fullPath, element)
+            this.recordevideoIos(element.fullPath, element)
-        } else {
+          } else {
-          this.recordVideoAndroid(element.fullPath, element)
+            this.recordVideoAndroid(element.fullPath, element)
-        }
+          }
 
-      } catch (e) {
+        } catch (e) {
-        console.error('Unable to write file', e);
+          console.error('Unable to write file', e);
-      }
+        }
 
 
       });
@@ -286,36 +260,36 @@ export class NewPublicationPage implements OnInit {
   }
 
   async loadVideo() {
-    const result = await FilePicker.pickMedia ({ multiple: true, });
+    const result = await FilePicker.pickMedia({ multiple: true, });
     console.log(result.files)
     result.files.forEach(async element => {
       this.filesSizeSum = this.filesSizeSum + element.size
       if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
         console.log('pass size verificartion')
         if (this.checkFileType.checkFileType(element.mimeType) == 'video' && this.platform.is('ios')) {
-           let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl)
+          let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl)
-           try {
+          try {
             this.recordevideoIos(resultUrl, element)
           } catch (error) {
             console.log('upload video error: ', error)
           }
         } else if (this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
           let resultUrl = decodeURIComponent(element.path);
-           console.log('pass type verification ', resultUrl)
+          console.log('pass type verification ', resultUrl)
-            try {
+          try {
-              this.loadVideoAndroid(resultUrl,element)
+            this.loadVideoAndroid(resultUrl, element)
-            } catch (error) {
+          } catch (error) {
-              console.log('upload video error: ', error)
+            console.log('upload video error: ', error)
-            }
           }
-        } else {
-          if (this.PublicationFromMvService.form.Files.length === 0)
-            this.filesSizeSum = 0
-
-          this.httpErrorHandle.validationMessagge('filessize')
         }
-      });
+      } else {
-     };
+        if (this.PublicationFromMvService.form.Files.length === 0)
+          this.filesSizeSum = 0
+
+        this.httpErrorHandle.validationMessagge('filessize')
+      }
+    });
+  };
 
 
   chossePhotoOrVideo() {
@@ -676,37 +650,37 @@ export class NewPublicationPage implements OnInit {
 
       const stringGerada = this.gerarStringAleatoria();
 
-      this.videoconvertService.convertVideo(fullPath,directory.uri,stringGerada,'mp4').then(async () => {
+      this.videoconvertService.convertVideo(fullPath, directory.uri, stringGerada, 'mp4').then(async () => {
-        await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4`})
+        await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4` })
 
-        .then(async (content) => {
+          .then(async (content) => {
-          this.filecontent = true;
+            this.filecontent = true;
 
-          const file = new File([element.blob], element.name);
+            const file = new File([element.blob], element.name);
 
-          const newAttachment = new PublicationAttachmentEntity(
+            const newAttachment = new PublicationAttachmentEntity(
-            {
+              {
-              base64: 'data:video/mp4;base64,' + content.data,
+                base64: 'data:video/mp4;base64,' + content.data,
-              extension: 'mp4',
+                extension: 'mp4',
-              blobFile: file,
+                blobFile: file,
-              FileType: this.checkFileType.checkFileType('mp4') as any,
+                FileType: this.checkFileType.checkFileType('mp4') as any,
-              OriginalFileName: 'load video'
+                OriginalFileName: 'load video'
-            }
+              }
-          )
+            )
 
-          this.PublicationFromMvService.form.Files.push(newAttachment)
+            this.PublicationFromMvService.form.Files.push(newAttachment)
 
-          const deleteSecretFile = async () => {
+            const deleteSecretFile = async () => {
-            await Filesystem.deleteFile({
+              await Filesystem.deleteFile({
-              path: `${stringGerada}.mp4`,
+                path: `${stringGerada}.mp4`,
-              directory: Directory.Cache,
+                directory: Directory.Cache,
-            });
+              });
-          };
+            };
-          await deleteSecretFile().then((value) => {
+            await deleteSecretFile().then((value) => {
-            console.log('delete file',value)
+              console.log('delete file', value)
+            })
           })
-        })
+          .catch((erro) => console.error('read converted video erro ', erro));
-        .catch((erro) => console.error('read converted video erro ', erro));
       });
 
 
@@ -726,26 +700,26 @@ export class NewPublicationPage implements OnInit {
       console.log(savedFile.uri)
       Filesystem.readFile({ path: savedFile.uri })
 
-      .then(async (content) => {
+        .then(async (content) => {
 
-        this.filecontent = true;
+          this.filecontent = true;
 
-        const file = new File([element.blob], element.name);
+          const file = new File([element.blob], element.name);
-        window['a'] = element
+          window['a'] = element
-        const newAttachment = new PublicationAttachmentEntity(
+          const newAttachment = new PublicationAttachmentEntity(
-          {
+            {
-            base64: 'data:video/mp4;base64,' + content.data,
+              base64: 'data:video/mp4;base64,' + content.data,
-            extension:  'mp4',
+              extension: 'mp4',
-            blobFile: file,
+              blobFile: file,
-            FileType: this.checkFileType.checkFileType( 'mp4') as any,
+              FileType: this.checkFileType.checkFileType('mp4') as any,
-            OriginalFileName: 'load video'
+              OriginalFileName: 'load video'
-          }
+            }
-        )
+          )
-        this.PublicationFromMvService.form.Files.push(newAttachment)
+          this.PublicationFromMvService.form.Files.push(newAttachment)
 
 
-      })
+        })
-      .catch((error) => console.error('reade converted video erro ',error));
+        .catch((error) => console.error('reade converted video erro ', error));
 
     } catch (error) {
       console.log('record video android erro ', error)
@@ -759,41 +733,42 @@ export class NewPublicationPage implements OnInit {
   loadVideoAndroid(resultUrl, element) {
     Filesystem.readFile({ path: resultUrl })
 
-    .then(async (content) => {
+      .then(async (content) => {
 
-      this.filecontent = true;
+        this.filecontent = true;
 
-      if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") {
+        if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") {
 
-        const newAttachment = new PublicationAttachmentEntity(
+          const newAttachment = new PublicationAttachmentEntity(
-          {
+            {
-            base64: content.data,
+              base64: content.data,
-            extension:  this.removeTextBeforeSlash(element.mimeType, '/'),
+              extension: this.removeTextBeforeSlash(element.mimeType, '/'),
-            FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
+              FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any,
-            OriginalFileName: 'load video'
+              OriginalFileName: 'load video'
-          }
+            }
-        )
+          )
 
-        newAttachment.needUpload()
+          newAttachment.needUpload()
-        this.PublicationFromMvService.form.Files.push(newAttachment)
+          this.PublicationFromMvService.form.Files.push(newAttachment)
 
-      } else {
+        } else {
+          this.capturedImage = 'data:image/jpeg;base64,' + content.data;
+          this.showCroppModal()
+          /* const newAttachment = new PublicationAttachmentEntity(
+            {
+              base64: 'data:image/jpeg;base64,' + content.data,
+              extension: this.removeTextBeforeSlash(element.mimeType, '/'),
+              FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any,
+              OriginalFileName: 'image'
+            }
+          )
 
-        const newAttachment = new PublicationAttachmentEntity(
+          this.PublicationFromMvService.form.Files.push(newAttachment) */
-          {
+        }
-            base64: 'data:image/jpeg;base64,' + content.data,
-            extension:  this.removeTextBeforeSlash(element.mimeType, '/'),
-            FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
-            OriginalFileName: 'image'
-          }
-        )
-
-        this.PublicationFromMvService.form.Files.push(newAttachment)
-      }
 
 
-    })
+      })
-    .catch((err) => console.error(err));
+      .catch((err) => console.error(err));
 
   }
 
@@ -860,21 +835,21 @@ export class NewPublicationPage implements OnInit {
               newAttachment.needUpload()
 
               this.PublicationFromMvService.form.Files.push(newAttachment)
-            fileObject ={};
+              fileObject = {};
-            const deleteSecretFile = async () => {
+              const deleteSecretFile = async () => {
-              await Filesystem.deleteFile({
+                await Filesystem.deleteFile({
-                path: `${filename}.mp4`,
+                  path: `${filename}.mp4`,
-                directory: Directory.Cache,
+                  directory: Directory.Cache,
-              });
+                });
-            };
+              };
-            deleteSecretFile().then((value) => {
+              deleteSecretFile().then((value) => {
-              console.log('delete file',value)
+                console.log('delete file', value)
-              fileObject ={};
+                fileObject = {};
-            })
+              })
-            .catch((erro) => console.error('read converted video erro ', erro));
+                .catch((erro) => console.error('read converted video erro ', erro));
-        });
+            });
 
-      });
+        });
 
       }
     } catch (error) {
@@ -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();
+  }
+
 }
 

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

@@ -49,7 +49,7 @@
 
             <div>
 
-              <div class="text-center cursor-pointer"  (click)="deleteFromSeletedContent(i)" style="font-weight: 700;color: #c63527;">
+              <div class="text-center cursor-pointer"  (click)="deleteFromSeletedContent(i)" style="font-weight: 700;color: #c63527; text-align-last: right;">
                 X
               </div>
 
@@ -64,7 +64,7 @@
               </div>
 
               <ion-img *ngIf="checkFileType.checkFileType(seleted.FileExtension) == 'image'"
-                name="image" ngDefaultControl [src]="'data:image/jpg;base64,' + seleted.Base64" style="height: 69px;"></ion-img>
+                name="image" ngDefaultControl [src]="'data:image/jpg;base64,' + seleted.Base64" style="height: 69px; width: 69px;"></ion-img>
 
               <video class="sdf" *ngIf="checkFileType.checkFileType(seleted.FileExtension)  == 'video' && checkDesktop() == true" width="70" height="70"
                 preload="metadata" webkit-playsinline="webkit-playsinline">