Merge branch 'developer' of https://bitbucket.org/equilibriumito/gabinete-digital into developer

src/app/pages/chat/chat.module.ts

@@ -29,6 +29,7 @@ import { HeaderPageModule } from 'src/app/shared/header/header.module';
 import { NewEventPageModule } from 'src/app/shared/agenda/new-event/new-event.module';
 import { AttendeeModalPageModule } from 'src/app/shared/event/attendee-modal/attendee-modal.module';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ImageCropperModule } from 'ngx-image-cropper';
 
 @NgModule({
   imports: [
@@ -48,6 +49,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     GroupContactsPageModule,
     EmptyChatPageModule,
     NewEventPageModule,
+    ImageCropperModule,
     AttendeeModalPageModule,
   ],
   declarations: [

src/app/pages/chat/chat.page.html

@@ -97,8 +97,6 @@
                       <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
                       <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group._id != idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40.svg"></ion-icon>
                       <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && group._id == idSelected " class="icon" slot="start" src="assets/images/theme/gov/icons-chat-group-chat-40-hover.svg"></ion-icon>
-
-
                     </div>
                     <div
                      (click)="openGroupMessagesPage(group._id)" class="item-content flex-grow-1 cursor-pointer">
@@ -125,6 +123,7 @@
                     </div>
                   </div>
               </ion-item-sliding>
+            
           </ion-list>
         </div>
        <!--  <button (click)="sendMsg()" style="height: 41px;">Send message</button> -->

src/app/pages/chat/chat.page.ts

@@ -32,6 +32,7 @@ import { ThemeService } from 'src/app/services/theme.service'
 import { DataService } from 'src/app/services/data.service';
 
 
+
 @Component({
   selector: 'app-chat',
   templateUrl: './chat.page.html',
@@ -119,6 +120,7 @@ export class ChatPage implements OnInit {
     public ThemeService: ThemeService,
     private dataService:DataService,
     private router: Router,
+   
     ){
       this.loggedUserChat = authService.ValidatedUserChat['data'];
       this.headers = new HttpHeaders();
@@ -549,4 +551,10 @@ hideRefreshButton(){
     modal.onDidDismiss();
   }
 
-}
+//   this.crop.crop('path/to/image.jpg', {quality: 75})
+//   .then(
+//     newImage => console.log('new image path is: ' + newImage),
+//     error => console.error('Error cropping image', error)
+//   );
+
+ }

src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html

@@ -29,9 +29,6 @@
       </ion-refresher-content>
     </ion-refresher>
 
-
-
-
   <div class="main-content">
     <div *ngIf="members">
       <ion-label class="members-label">Contactos selecção:</ion-label>

src/app/pages/chat/group-messages/group-messages.module.ts

@@ -13,6 +13,8 @@ import { ChatPopoverPageModule } from 'src/app/shared/popover/chat-popover/chat-
 import { BtnModalDismissPageModule } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.module';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import { AngularCropperjsModule } from 'angular-cropperjs';
 
 @NgModule({
   imports: [
@@ -24,6 +26,9 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     GroupMessagesPageRoutingModule,
     ChatPopoverPageModule,
     BtnModalDismissPageModule,
+    ImageCropperModule,
+    AngularCropperjsModule
+
   ],
   declarations: [GroupMessagesPage]
 })

src/app/pages/chat/group-messages/group-messages.page.html

@@ -57,7 +57,7 @@
       <ion-label>A conversa original mantêm-se como chat individual</ion-label>
     </div>
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -66,7 +66,7 @@
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
-              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" >
               <div>
                 <div>
                   <div class="file">
@@ -90,7 +90,9 @@
                   </div>
                 </div>
               </div>
+              
             </div>
+            
           </div>
           {{last ? scrollToBottom() : ''}}
         </div>
@@ -152,4 +154,5 @@
       </button>
     </div>
   </div>
+
 </ion-footer>

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -278,3 +278,36 @@
  }
 
 }
+.preview-slides {
+  margin-top: 20%;
+  background: #e6e6e6;
+ 
+  img {
+      padding-top: 20px;
+      padding-bottom: 20px;
+  }
+}
+
+.transparent-modal {
+    .modal-wrapper {
+        --background: rgba(44, 39, 45, 0.2);
+    }
+}
+
+
+.image-slide,
+.image-card {
+    overflow: visible;
+}
+ 
+.image-card {
+    z-index: 9;
+}
+ 
+.backdrop {
+    height: 200%;
+    width: 100%;
+    background: black;
+    position: absolute;
+    z-index: 10;
+}

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, } from '@angular/core';
-import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, ChangeDetectorRef, } from '@angular/core';
+import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -20,6 +20,7 @@ import { NewEventPage } from '../../agenda/new-event/new-event.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 @Component({
   selector: 'app-group-messages',
@@ -27,6 +28,9 @@ import { ThemeService } from 'src/app/services/theme.service'
   styleUrls: ['./group-messages.page.scss'],
 })
 export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
+
+  
+
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -75,7 +79,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileToBase64Service: FileToBase64Service,
     private fileService: FileService,
     private toastService: ToastService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -464,7 +469,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
         //this.loadPicture();
       }
       else if(res['data'] == 'add-picture'){
-        this.fileService.addPictureToChat(this.roomId);
+        this.fileService.addPictureToChatMobile(this.roomId);
         //this.loadPicture();
       }
       else if(res['data'] == 'add-document'){
@@ -580,4 +585,59 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   });
   }
 
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();         
+    }
+  }
 }
+ 
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+ 
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+ 
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+ 
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+  async openPreview(img) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: img.attachments[0].image_url,
+        username: img.u.username,
+        _updatedAt: img._updatedAt
+      }
+    });
+    modal.present();
+  }
+}
+

src/app/pages/chat/messages/messages.page.html

@@ -50,8 +50,8 @@
   </ion-refresher> -->
   <div (click)="handleClick()" class="messages" #scrollMe>
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
-    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
-      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId"  >
+      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}' (click)="openPreview(msg)">
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
@@ -60,7 +60,7 @@
           <ion-label>{{msg.msg}}</ion-label>
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments let i = index">
-              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
+              <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)">
               <div>
                 <div>
                   <div class="file">
@@ -138,6 +138,7 @@
   <button (click)="stopRecording()">Stop Recording</button> -->
   <div class="container width-100 d-flex">
     <div>
+    
       <button class="btn-no-color" (click)="openChatOptions()">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-options" src="assets/images/icons-add.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-options" src="assets/images/theme/gov/icons-add.svg"></ion-icon>
@@ -163,4 +164,5 @@
       </button>
     </div>
   </div>
+
 </ion-footer>

src/app/pages/chat/messages/messages.page.ts

@@ -1,6 +1,6 @@
-import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AfterViewChecked, AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router'
-import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { GestureController, Gesture, ModalController, NavParams, PopoverController, IonSlides } from '@ionic/angular';
 import { map } from 'rxjs/operators';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
@@ -23,6 +23,11 @@ import { ThemeService } from 'src/app/services/theme.service'
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
 import { VoiceRecorder, VoiceRecorderPlugin, RecordingData, GenericResponse, CurrentRecordingStatus } from 'capacitor-voice-recorder';
 import { Haptics, ImpactStyle } from '@capacitor/haptics';
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
+// import { SocialSharing } from '@ionic-native/social-sharing/ngx';
+//import { Share } from '@capacitor/share';
+
+const IMAGE_DIR = 'stored-images';
 
 @Component({
   selector: 'app-messages',
@@ -36,8 +41,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 /*   @ViewChild('messageContainer') messageContainer: ElementRef; */
   @ViewChild('rectangle') private rectangle: ElementRef;
 
+  canvas: any
+  ctx: any
   loggedUser: any;
-
   message = '';
   messages:any;
   userPresence='';
@@ -83,7 +89,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileService: FileService,
     private gestureController: GestureController,
     private processes: ProcessesService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef,
+    // private socialSharing: SocialSharing
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
     this.roomId = this.navParams.get('roomId');
@@ -101,6 +109,11 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
     this.loadFiles();
     VoiceRecorder.requestAudioRecordingPermission();
+    Filesystem.mkdir({
+      path: IMAGE_DIR,
+      directory: Directory.Data,
+      recursive: true
+    });
   }
 
   ngAfterViewInit() {
@@ -583,8 +596,95 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  openPreview(){
+
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();
+    }
+  }
+}
+
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+
+  async openPreview(msg) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: msg.attachments[0].image_url,
+        username: msg.u.username,
+        _updatedAt: msg._updatedAt,
+      }
+
+
+    });
+    modal.present();
+  }
+
+
+  imageSize(img){
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    canvas.width=300
+    canvas.height=234
+    ctx.drawImage(img.attachments[0].image_url, 0, 0, 300, 234);
+    document.body.appendChild(canvas);
+}
+
+getPicture(img){
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('2d');
+  canvas.width=300
+  canvas.height=234
+  ctx.drawImage(img.attachments[0].image_url, 0, 0, 300, 234);
+  document.body.appendChild(canvas);
 
   }
 
+  // async ShareEmail(msg){
+  //   // Check if sharing via email is supported
+  //   await Share.share({
+  //     title:  msg.u.username,
+  //     text:  msg._updatedAt,
+  //     url: msg.attachments[0].image_url,
+  //     dialogTitle: 'Share with buddies',
+  //   });
+  // }
 }
+
+
+