fix: avatar image not updated (#4425)

Author: mbechev

examples-standalone/coffee-warehouse/src/app/app.module.ts

@@ -31,6 +31,7 @@ import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import { NotificationModule } from '@progress/kendo-angular-notification';
 import { IconsModule } from "@progress/kendo-angular-icons";
 import { MessageService } from '@progress/kendo-angular-l10n';
+import { ProfileImageService } from './services/profile-image.service';
 
 const drawerRoutes = [
     { path: '', component: TeamComponent },
@@ -84,7 +85,8 @@ import '@progress/kendo-angular-intl/locales/fr/all';
     ],
     providers: [
         { provide: MessageService, useClass: CustomMessagesService },
-        { provide: LOCALE_ID, useValue: 'en-US' }
+        { provide: LOCALE_ID, useValue: 'en-US' },
+        ProfileImageService
     ],
     bootstrap: [AppComponent]
 })

examples-standalone/coffee-warehouse/src/app/components/planning/cards/card.component.ts

@@ -13,9 +13,12 @@ export class CardComponent {
     @Output() public toggleEvents: EventEmitter<Employee> = new EventEmitter();
 
     public cards: Employee[] = employees.slice(1, 6);
-
     public images = images;
 
+    ngOnInit(){
+        this.cards.map(card=>card.selected = false)
+    }
+
     public setCardColor(card: Employee): string | undefined {
         const currentTeam: Team | undefined = teams.find((team: Team) => team.teamID === card.teamId);
         return currentTeam?.teamColor;

examples-standalone/coffee-warehouse/src/app/components/profile/profile.component.html

@@ -5,7 +5,7 @@
                 <fieldset class="k-form-fieldset">
                     <kendo-formfield orientation="horizontal">
                         <label class="k-label">
-                            <kendo-avatar imageSrc="assets/user.jpg" width="80px" height="80px" shape="circle"> </kendo-avatar>
+                            <kendo-avatar [imageSrc]="profileImage" width="80px" height="80px" shape="circle"> </kendo-avatar>
                         </label>
                         <kendo-fileselect
                             (select)="selectAvatar($event)"

examples-standalone/coffee-warehouse/src/app/components/profile/profile.component.ts

@@ -1,26 +1,26 @@
 import { AfterViewInit, Component } from '@angular/core';
 import { Validators, FormGroup, FormControl } from '@angular/forms';
 
-
 import { SelectEvent, FileRestrictions } from '@progress/kendo-angular-upload';
 import { MessageService } from '@progress/kendo-angular-l10n';
 import { NotificationService } from '@progress/kendo-angular-notification';
 import { countries } from '../../resources/countries';
 import { FormModel } from '../../models/form.model';
 import { CustomMessagesService } from '../../services/custom-messages.service';
+import { ProfileImageService } from '../../services/profile-image.service';
 
 @Component({
     selector: 'app-profile-component',
     templateUrl: './profile.component.html'
 })
-export class ProfileComponent implements AfterViewInit {
+export class ProfileComponent {
     public formGroup: FormGroup = new FormGroup({});
     public countries = countries;
     public phoneNumberMask = '(+9) 0000-000-00-00';
+    public profileImage: string = '';
     public fileRestrictions: FileRestrictions = {
         allowedExtensions: ['.png', '.jpeg', '.jpg']
     };
-    public avatars?: NodeList;
 
     public formValue: FormModel | null = {
         avatar: [''],
@@ -36,12 +36,13 @@ export class ProfileComponent implements AfterViewInit {
 
     public customMsgService: CustomMessagesService;
 
-    constructor(public msgService: MessageService, private notificationService: NotificationService) {
+    constructor(
+        public msgService: MessageService,
+        private notificationService: NotificationService,
+        private profileService: ProfileImageService
+    ) {
         this.setFormValues();
         this.customMsgService = this.msgService as CustomMessagesService;
-    }
-
-    ngAfterViewInit() {
         this.setAvatar();
     }
 
@@ -64,12 +65,14 @@ export class ProfileComponent implements AfterViewInit {
         });
     }
 
-    public setAvatar() {
-        this.avatars = document.querySelectorAll('.k-avatar .k-avatar-image');
+    public setAvatar(): void {
         const avatarImg = localStorage.getItem('avatar');
         if (avatarImg) {
-            this.avatars.forEach((avatar: any) => {
-                avatar.style['background-image'] = `url("${avatarImg}")`;
+            this.profileImage = avatarImg;
+            this.profileService.updateProfileImage(avatarImg);
+        } else {
+            this.profileService.profileImage$.subscribe((image: string) => {
+                this.profileImage = image;
             });
         }
     }
@@ -95,20 +98,17 @@ export class ProfileComponent implements AfterViewInit {
     }
 
     public isFileAllowed(file: any): boolean {
-        return <boolean>this.fileRestrictions.allowedExtensions?.includes(file.extension);
+        return <boolean>this.fileRestrictions.allowedExtensions?.includes(file.extension.toLowerCase());
     }
 
     public selectAvatar(ev: SelectEvent): void {
-
-        const avatars = this.avatars;
         const reader = new FileReader();
         const file = ev.files[0];
         if (file.rawFile && this.isFileAllowed(file)) {
-            reader.onloadend = function () {
-                avatars?.forEach((avatar: any) => {
-                    avatar.style['background-image'] = `url("${this.result}")`;
-                    localStorage.setItem('avatar', (<string>this.result).toString());
-                });
+            reader.onloadend = () => {
+                this.profileImage = reader.result as string;
+                this.profileService.updateProfileImage(this.profileImage);
+                localStorage.setItem('avatar', this.profileImage);
             };
             reader.readAsDataURL(file.rawFile);
         }

examples-standalone/coffee-warehouse/src/app/header/header.commponent.html

@@ -40,6 +40,6 @@ <h2 *ngIf="selectedPage">{{ this.customMsgService.translate(selectedPage.toLower
             </kendo-dropdownlist>
         </div>
 
-        <kendo-avatar imageSrc="assets/user.jpg" shape="circle"> </kendo-avatar>
+        <kendo-avatar [imageSrc]="profileImage" shape="circle"> </kendo-avatar>
     </div>
 </div>

examples-standalone/coffee-warehouse/src/app/header/header.component.ts

@@ -4,6 +4,8 @@ import { MessageService } from '@progress/kendo-angular-l10n';
 import { CustomMessagesService } from '../services/custom-messages.service';
 import { SVGIcon, menuIcon, paletteIcon } from '@progress/kendo-svg-icons';
 import { locales } from '../resources/locales';
+import { profileBase64 } from '../resources/profile-base64';
+import { ProfileImageService } from '../services/profile-image.service';
 
 @Component({
     selector: 'app-header-component',
@@ -35,16 +37,30 @@ export class HeaderComponent {
         }
     ];
     public selectedTheme = this.themes[0];
+    public profileImage: string = '';
+
+    constructor(
+        public messages: MessageService,
+        @Inject(LOCALE_ID) public localeId: string,
+        public intlService: IntlService,
+        private profileService: ProfileImageService
+    ) {
+        this.setProfileImage();
 
-    constructor(public messages: MessageService, @Inject(LOCALE_ID) public localeId: string, public intlService: IntlService) {
         this.localeId = this.selectedLanguage.localeId;
         this.setLocale(this.localeId);
 
         this.customMsgService = this.messages as CustomMessagesService;
         this.customMsgService.language = this.selectedLanguage.localeId;
     }
 
-    public changeTheme(theme: { href: string; text: string }) {
+    public setProfileImage(): void {
+        this.profileService.profileImage$.subscribe((image: string) => {
+            this.profileImage = image;
+        });
+    }
+
+    public changeTheme(theme: { href: string; text: string }): void {
         this.selectedTheme = theme;
         const themeEl: any = document.getElementById('theme');
         themeEl.href = theme.href;

examples-standalone/coffee-warehouse/src/app/resources/profile-base64.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { profileBase64 } from '../resources/profile-base64';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProfileImageService {
+  private profileImageSubject = new BehaviorSubject<string>(profileBase64);
+  public profileImage$ = this.profileImageSubject.asObservable();
+
+  public updateProfileImage(image: string): void {
+    this.profileImageSubject.next(image);
+  }
+}