Skip to content

Commit

Permalink
User profile image is called in loop
Browse files Browse the repository at this point in the history
  • Loading branch information
Nicola Lanzilotto committed Mar 7, 2024
1 parent 5bd2c08 commit 35d4c0e
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 28 deletions.
4 changes: 2 additions & 2 deletions src/app/components/sidebar-user-details/sidebar-user-details.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/sidebar-user-details/sidebar-user-details.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
21 changes: 19 additions & 2 deletions src/app/components/sidebar/sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
51 changes: 28 additions & 23 deletions src/app/components/sidebar/sidebar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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')
}
Expand Down Expand Up @@ -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)
}
}
});
Expand All @@ -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 {

Expand All @@ -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)
// }



Expand Down

0 comments on commit 35d4c0e

Please sign in to comment.