improve profile reactiveness and action page performance

src/app/modals/profile/edit-profile/edit-profile.module.ts

@@ -8,12 +8,26 @@ import { EditProfilePageRoutingModule } from './edit-profile-routing.module';
 
 import { EditProfilePage } from './edit-profile.page';
 
+
+
+
+import {MatMenuModule} from '@angular/material/menu';
+import {MatButtonModule} from '@angular/material/button';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+import {MatIconModule} from '@angular/material/icon';
+
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    EditProfilePageRoutingModule
+    EditProfilePageRoutingModule,
+
+    FontAwesomeModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatIconModule,
   ],
   declarations: [EditProfilePage]
 })

src/app/modals/profile/edit-profile/edit-profile.page.html

@@ -58,39 +58,46 @@
       </div>
 
       <div>
-        <div class="d-flex align-center flex-column" (click)="takePicture()">
+        <div class="d-flex justify-center align-center " >
+          <div mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+            <div class="d-flex align-center flex-column" >
 
-          <div *ngIf="profilePicture == '' ">
-            <img
+              <div *ngIf="profilePictureSubject == undefined ">
+                <img
 
-              class="profile-pic" src="assets/images/theme/gov/icons-profile.svg">
+                  class="profile-pic" src="assets/images/theme/gov/icons-profile.svg">
 
-            <!-- <img *ngIf="SessionStore.user.RoleDescription == 'Presidente da República' " class="profile-pic"
-              src='assets/images/presidente.png'>
-            <img *ngIf="SessionStore.user.RoleDescription == 'Ministro e Director do Gabinete do PR' "
-              class="profile-pic" src='assets/images/ministro.png'>
-            <img *ngIf="SessionStore.user.RoleDescription == 'Secretário Geral' " class="profile-pic"
-              src='assets/images/secretaria_geral.png'> -->
-          </div>
-
-          <div *ngIf="profilePicture != '' ">
-            <img class="profile-pic" src={{profilePicture}}>
-          </div>
-
-
-
-          <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="profile-pic"
-            src="assets/images/icons-default-profile.svg"></ion-icon>
-          <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="profile-pic"
-            src="assets/images/theme/gov/icons-profile.svg"></ion-icon>
-          <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="profile-pic"
-            src="assets/images/theme/{{ThemeService.currentTheme}}/icons-profile.svg"></ion-icon> -->
-          <div
-            style="background: black;width: 50px;height: 50px;position: relative;top: -33px;left: 38px;border-radius: 55px;overflow: hidden;border: 5px solid white;">
-            <img src="assets/images/camera.png">
+                <!-- <img *ngIf="SessionStore.user.RoleDescription == 'Presidente da República' " class="profile-pic"
+                  src='assets/images/presidente.png'>
+                <img *ngIf="SessionStore.user.RoleDescription == 'Ministro e Director do Gabinete do PR' "
+                  class="profile-pic" src='assets/images/ministro.png'>
+                <img *ngIf="SessionStore.user.RoleDescription == 'Secretário Geral' " class="profile-pic"
+                  src='assets/images/secretaria_geral.png'> -->
+              </div>
+
+              <div *ngIf="(profilePictureSubject | async) as calendarData">
+                <img class="profile-pic" src={{calendarData.base64}}>
+              </div>
+
+
+              <div
+                *ngIf="camecaIcons"
+                style="background: black;width: 50px;height: 50px;position: relative;margin-top: -33px;left: 38px;border-radius: 55px;overflow: hidden;border: 5px solid white;">
+                <img src="assets/images/camera.png">
+              </div>
+            </div>
           </div>
+          <mat-menu #menu="matMenu">
+            <button (click)="uploadPicture(CameraSource.Camera)"  mat-menu-item>
+              <span>take picture</span>
+            </button>
+            <button (click)="uploadPicture(CameraSource.Photos)" mat-menu-item >
+              <span>Ficheiro</span>
+            </button>
+          </mat-menu>
         </div>
 
+
       </div>
 
       <div class="profile-info">

src/app/modals/profile/edit-profile/edit-profile.page.ts

@@ -6,12 +6,16 @@ import { SessionStore } from 'src/app/store/session.service';
 import { environment } from 'src/environments/environment';
 import { BackgroundService } from 'src/app/services/background.service';
 import { ThemeService } from 'src/app/services/theme.service';
-import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
-import { Filesystem, Directory } from '@capacitor/filesystem';
-import { File } from '@awesome-cordova-plugins/file/ngx';
+import { CameraSource } from '@capacitor/camera';
 import { StorageService } from 'src/app/services/storage.service';
-import { AttachmentsService } from 'src/app/services/attachments.service';
-
+import { CameraService } from 'src/app/infra/camera/camera.service';
+import { ToastService } from 'src/app/services/toast.service';
+import { HttpErrorHandle } from 'src/app/services/http-error-handle.service';
+import { TracingType, XTracerAsync } from 'src/app/services/monitoring/opentelemetry/tracer';
+import { UserRepositoryService } from 'src/app/module/user/data/user-repository.service';
+import { isHttpError } from 'src/app/services/http.service';
+import { UserProfilePicture } from 'src/app/module/user/data/datasource/user-local-repository.service';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-edit-profile',
@@ -27,19 +31,28 @@ export class EditProfilePage implements OnInit {
   capturedImageTitle = '';
   profilePicture = "";
 
+  profilePictureSubject: Observable<UserProfilePicture>
+  camecaIcons = false
+
   constructor(private modalController: ModalController,
     private animationController: AnimationController,
     public platform: Platform,
     private BackgroundService: BackgroundService,
     public ThemeService: ThemeService,
-    private file: File,
     private storageService: StorageService,
-    private attachmentService: AttachmentsService
+    private CameraService: CameraService,
+    private toastService: ToastService,
+    private httpErrorHandle: HttpErrorHandle,
+    private UserRepositoryService: UserRepositoryService
 
-  ) { }
+  ) { 
+    this.profilePictureSubject = this.UserRepositoryService.getProfilePictureLive() as any
+  }
 
   ngOnInit() {
-
+    setTimeout(() => {
+      this.camecaIcons = true
+    }, 100)
     this.getProfilpictureFromStorage();
   }
   getProfilpictureFromStorage() {
@@ -54,27 +67,7 @@ export class EditProfilePage implements OnInit {
       this.profilePicture = "";
     })
   }
-  /*   getProfilpicture(guid) {
-      console.log('Get picture ', guid.path)
-      this.attachmentService.getUserProfilePhoto().subscribe(async (picture: any) => {
-  
-        console.log('Get picture ', picture)
-        this.storageService.store(this.SessionStore.user.RoleID.toString() + "guid", guid.path)
-        this.storageService.store(this.SessionStore.user.RoleID.toString(), picture).then((value) => {
-          this.profilePicture = picture
-          this.SessionStore.user.UserPhoto = picture;
-  
-  
-          console.log('picture saved')
-        }).catch((error) => {
-          console.log('picture not saved')
-        });
-  
-      }, ((error) => {
-        console.log('Error get profile picture: ', error)
-      }))
-  
-    } */
+
 
   close() {
     this.modalController.dismiss();
@@ -171,48 +164,65 @@ export class EditProfilePage implements OnInit {
     this.BackgroundService.paint();
   }
 
+  CameraSource = CameraSource
+  @XTracerAsync({name:'edit-profile/takePicture', bugPrint: true, autoFinish: false})
+  async uploadPicture(source: CameraSource, tracing?: TracingType) {
 
-  async takePicture() {
-    const capturedImage = await Camera.getPhoto({
+    const capturedImage = await this.CameraService.takePicture({
       width: 250,
       height: 250,
       quality: 100,
-      // allowEditing: true,
-      resultType: CameraResultType.Base64,
-      source: CameraSource.Camera
-    });
+      source: source
+    }, tracing)
 
-    this.capturedImage = capturedImage.base64String;
-    var object = JSON.stringify({
-      "ImageBase64": this.capturedImage
+    if(capturedImage.isOk()) {
+
+      this.capturedImage = capturedImage.value;
+      var object = {
+        "ImageBase64": this.capturedImage
+      }
+
+      tracing.addEvent('serialize image')
+
+      const guid = await this.UserRepositoryService.addUserProfilePhoto(object)
+
+      
+      if(guid.isOk()) {
+        tracing.addEvent('upload image')
+
+        const base = await this.UserRepositoryService.getUserProfilePhoto(guid.value, tracing)
+
+        if(base.isOk()) {
+          tracing.addEvent('download image')
+          this.storageService.store(this.SessionStore.user.RoleID.toString(), 'data:image/jpeg;base64,'+base.value).then((value) => {
+            tracing.addEvent('store image in')
+            this.profilePicture = 'data:image/jpeg;base64,' + base.value;
+  
+            tracing.setAttribute("picture.save", "true")
+            tracing.finish()
+          }).catch((error) => {
+            tracing.setAttribute("picture.save", "false")
+            tracing.finish()
+          });
+        } else {
+          if(!isHttpError(base.error)) {
+            this.toastService._badRequest('Pedimos desculpa mas não foi possível executar a acção. Por favor, contacte o apoio técnico.')
+          } else {
+            this.httpErrorHandle.httpStatusHandle(base.error)
+          }
+          tracing.finish()
+        }
+      } else {
+
+        if(!isHttpError(guid.error)) {
+          this.toastService._badRequest('Pedimos desculpa mas não foi possível executar a acção. Por favor, contacte o apoio técnico.')
+        } else {
+          this.httpErrorHandle.httpStatusHandle(guid.error)
+        }
+        tracing.finish()
+      }
+  
     }
-    )
-    console.log('ATTACHME ', object)
-
-    this.attachmentService.addUserProfilePhoto(object).subscribe((guid) => {
-      console.log('GUID ', guid)
-      console.log(this.SessionStore.user.RoleID.toString())
-
-      //get user profile picture base64
-      this.attachmentService.getUserProfilePhoto(guid).subscribe((base) => {
-        console.log('before picture saved',base)
-        this.storageService.store(this.SessionStore.user.RoleID.toString(), 'data:image/jpeg;base64,'+base).then((value) => {
-          this.profilePicture = 'data:image/jpeg;base64,' + base;
-
-
-          console.log('picture saved',value)
-        }).catch((error) => {
-          console.log('picture not saved')
-        });
-
-      },(error) => {
-        console.log('profile picture erro: ', error)
-      })
-
-      /* this.getProfilpicture(guid); */
-    }, ((error) => {
-      console.log('Erro Upload profile picture ', error)
-    }))
 
   }
 
@@ -268,4 +278,3 @@ export class EditProfilePage implements OnInit {
   }
 
 }
-