From 35d4c0eeba2c2b094ce819cb461f1fca9a515343 Mon Sep 17 00:00:00 2001
From: Nicola Lanzilotto <nicola@tiledesk.com>
Date: Thu, 7 Mar 2024 16:15:49 +0100
Subject: [PATCH] User profile image is called in loop

---
 .../sidebar-user-details.component.html       |  4 +-
 .../sidebar-user-details.component.scss       |  2 +-
 .../components/sidebar/sidebar.component.html | 21 +++++++-
 .../components/sidebar/sidebar.component.ts   | 51 ++++++++++---------
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/app/components/sidebar-user-details/sidebar-user-details.component.html b/src/app/components/sidebar-user-details/sidebar-user-details.component.html
index 6685b902668d..f336b78fdf07 100755
--- a/src/app/components/sidebar-user-details/sidebar-user-details.component.html
+++ b/src/app/components/sidebar-user-details/sidebar-user-details.component.html
@@ -60,11 +60,11 @@
     </div>
 
 
-    <!-- <div class="camera-on-hover" (click)="goToUserProfile()">
+    <div class="camera-on-hover" (click)="goToUserProfile()">
         <i class="material-icons is-over-camera">
             camera_alt
         </i>
-    </div> -->
+    </div>
 
     <div class="user-details-fullname">
         <h3> {{ user?.firstname }} {{ user?.lastname }} </h3>
diff --git a/src/app/components/sidebar-user-details/sidebar-user-details.component.scss b/src/app/components/sidebar-user-details/sidebar-user-details.component.scss
index 0225d0cadfe1..02a6d9c1ecd3 100755
--- a/src/app/components/sidebar-user-details/sidebar-user-details.component.scss
+++ b/src/app/components/sidebar-user-details/sidebar-user-details.component.scss
@@ -210,7 +210,7 @@ button.user-details-btn-close {
 .camera-on-hover {
     cursor: pointer;
     position: absolute;
-    top: 80px;
+    top: 95px;
     border-radius: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
diff --git a/src/app/components/sidebar/sidebar.component.html b/src/app/components/sidebar/sidebar.component.html
index bd55ac113eeb..8fdd9d44121a 100755
--- a/src/app/components/sidebar/sidebar.component.html
+++ b/src/app/components/sidebar/sidebar.component.html
@@ -3,9 +3,26 @@
 
   <div id="sidebaravatar-img-wpr" class="avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
     [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true }">
-    <img id="sidebaravatar-img" class="avatar"
+
+    <!-- <img id="sidebaravatar-img" class="avatar"
       *ngIf="userProfileImageExist === true || userImageHasBeenUploaded === true" [src]="getUserProfileImage()"
-      onerror="this.src='assets/img/no_image_user.png'" />
+      onerror="this.src='assets/img/no_image_user.png'" /> -->
+
+      <!-- --------------------------------------------------- -->
+      <!-- USECASE uploadEngine Firebase -->
+      <!-- --------------------------------------------------- -->
+      <img id="sidebaravatar-img" *ngIf="(userProfileImageExist === true || userImageHasBeenUploaded === true) && UPLOAD_ENGINE_IS_FIREBASE"
+        class="avatar"
+        src="https://firebasestorage.googleapis.com/v0/b/{{storageBucket}}/o/profiles%2F{{currentUserId}}%2Fphoto.jpg?alt=media&{{timeStamp}}"
+        onerror="this.src='assets/img/no_image_user.png'" />
+
+      <!-- --------------------------------------------------- -->
+      <!-- USECASE uploadEngine Native -->
+      <!-- --------------------------------------------------- -->
+      <img id="sidebaravatar-img" *ngIf="(userProfileImageExist === true || userImageHasBeenUploaded === true) && !UPLOAD_ENGINE_IS_FIREBASE"
+        class="avatar"
+        src="{{baseUrl}}images?path=uploads%2Fusers%2F{{currentUserId}}%2Fimages%2Fthumbnails_200_200-photo.jpg&{{timeStamp}}"
+        onerror="this.src='assets/img/no_image_user.png'" />
 
     <div id="sidebaravatar-no-img" class="avatar"
       *ngIf="userProfileImageExist !== true && userImageHasBeenUploaded !== true"
diff --git a/src/app/components/sidebar/sidebar.component.ts b/src/app/components/sidebar/sidebar.component.ts
index 5e5999acda99..8fff96510ee0 100755
--- a/src/app/components/sidebar/sidebar.component.ts
+++ b/src/app/components/sidebar/sidebar.component.ts
@@ -248,6 +248,8 @@ export class SidebarComponent implements OnInit, AfterViewInit {
   companySiteUrl: string;
   companyName: string;
   dialogRef: MatDialogRef<any>;
+  UPLOAD_ENGINE_IS_FIREBASE: boolean;
+
   constructor(
     private router: Router,
     public location: Location,
@@ -406,7 +408,7 @@ export class SidebarComponent implements OnInit, AfterViewInit {
 
   getLoggedUser() {
     this.auth.user_bs.subscribe((user) => {
-      // this.logger.log('[SIDEBAR] USER GET IN SIDEBAR ', user)
+      this.logger.log('[SIDEBAR] USER GET IN SIDEBAR ', user)
       this.user = user;
       if (user) {
         this.createUserAvatar(user)
@@ -477,10 +479,12 @@ export class SidebarComponent implements OnInit, AfterViewInit {
 
   getProfileImageStorage() {
     if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
+      this.UPLOAD_ENGINE_IS_FIREBASE = true
       const firebase_conf = this.appConfigService.getConfig().firebase;
       this.storageBucket = firebase_conf['storageBucket'];
       this.logger.log('[SIDEBAR] IMAGE STORAGE ', this.storageBucket, 'usecase Firebase')
     } else {
+      this.UPLOAD_ENGINE_IS_FIREBASE = false
       this.baseUrl = this.appConfigService.getConfig().SERVER_BASE_URL;
       this.logger.log('[SIDEBAR] IMAGE STORAGE ', this.storageBucket, 'usecase Native')
     }
@@ -1119,11 +1123,11 @@ export class SidebarComponent implements OnInit, AfterViewInit {
       if (this.appConfigService.getConfig().uploadEngine === 'firebase') {
         if (this.storageBucket && this.userProfileImageExist === true) {
           this.logger.log('[SIDEBAR] - USER PROFILE EXIST - BUILD userProfileImageurl');
-          this.setImageProfileUrl(this.storageBucket)
+          // this.setImageProfileUrl(this.storageBucket)
         }
       } else {
         if (this.baseUrl && this.userProfileImageExist === true) {
-          this.setImageProfileUrl_Native(this.baseUrl)
+          // this.setImageProfileUrl_Native(this.baseUrl)
         }
       }
     });
@@ -1136,10 +1140,11 @@ export class SidebarComponent implements OnInit, AfterViewInit {
       this.uploadImageService.userImageWasUploaded.subscribe((image_exist) => {
         this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE ? ', image_exist, '(usecase Firebase)');
         this.userImageHasBeenUploaded = image_exist;
-        if (this.storageBucket && this.userImageHasBeenUploaded === true) {
-          this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE - BUILD userProfileImageurl ');
-          this.setImageProfileUrl(this.storageBucket)
-        }
+        this.timeStamp = (new Date()).getTime();
+        // if (this.storageBucket && this.userImageHasBeenUploaded === true) {
+        //   this.logger.log('[SIDEBAR] - IMAGE UPLOADING IS COMPLETE - BUILD userProfileImageurl ');
+        //   this.setImageProfileUrl(this.storageBucket)
+        // }
       });
     } else {
 
@@ -1156,24 +1161,24 @@ export class SidebarComponent implements OnInit, AfterViewInit {
     }
   }
 
-  setImageProfileUrl_Native(storage) {
-    this.userProfileImageurl = storage + 'images?path=uploads%2Fusers%2F' + this.currentUserId + '%2Fimages%2Fthumbnails_200_200-photo.jpg';
-    this.logger.log('[SIDEBAR] PROFILE IMAGE (USER-PROFILE ) - userProfileImageurl ', this.userProfileImageurl);
-    this.timeStamp = (new Date()).getTime();
-  }
+  // setImageProfileUrl_Native(storage) {
+  //   this.userProfileImageurl = storage + 'images?path=uploads%2Fusers%2F' + this.currentUserId + '%2Fimages%2Fthumbnails_200_200-photo.jpg';
+  //   this.logger.log('[SIDEBAR] PROFILE IMAGE (USER-PROFILE ) - userProfileImageurl ', this.userProfileImageurl);
+  //   this.timeStamp = (new Date()).getTime();
+  // }
 
-  setImageProfileUrl(storageBucket) {
-    this.userProfileImageurl = 'https://firebasestorage.googleapis.com/v0/b/' + storageBucket + '/o/profiles%2F' + this.currentUserId + '%2Fphoto.jpg?alt=media';
-    this.timeStamp = (new Date()).getTime();
-  }
+  // setImageProfileUrl(storageBucket) {
+  //   this.userProfileImageurl = 'https://firebasestorage.googleapis.com/v0/b/' + storageBucket + '/o/profiles%2F' + this.currentUserId + '%2Fphoto.jpg?alt=media';
+  //   this.timeStamp = (new Date()).getTime();
+  // }
 
-  getUserProfileImage() {
-    if (this.timeStamp) {
-      // this.logger.log('PROFILE IMAGE (USER-PROFILE IN SIDEBAR-COMP) - getUserProfileImage ', this.userProfileImageurl);
-      return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl + '&' + this.timeStamp);
-    }
-    return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl)
-  }
+  // getUserProfileImage() {
+  //   if (this.timeStamp) {
+  //     // this.logger.log('PROFILE IMAGE (USER-PROFILE IN SIDEBAR-COMP) - getUserProfileImage ', this.userProfileImageurl);
+  //     return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl + '&' + this.timeStamp);
+  //   }
+  //   return this.sanitizer.bypassSecurityTrustUrl(this.userProfileImageurl)
+  // }