navbar เเสดงชื่อผู้เข้าใช้งาน ตั้งรูป defaultกรณีที่ไม่มีรูปหรือหารูปไม่เจอ …

navbar เเสดงชื่อผู้เข้าใช้งาน ตั้งรูป defaultกรณีที่ไม่มีรูปหรือหารูปไม่เจอ  เปลี่ยนตำเเหน่งฟันเฟือง

src/app/shared/components/header/header.component.html

@@ -37,6 +37,13 @@
       <div class="header-right">
         <div class="responsive-headernav">
           <div class="header-nav-right">
+            <div class="switcher-icon">
+              <button aria-label="button" type="button"
+                class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus-visible:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
+                data-hs-overlay="#hs-overlay-switcher">
+                <i class="ri-settings-5-line header-icon animate-spin"></i>
+              </button>
+            </div>
             <div class="header-country hs-dropdown ti-dropdown hidden sm:block"
               data-hs-dropdown-placement="bottom-right">
               <button id="dropdown-flag" type="button"
@@ -666,15 +673,37 @@
             <div class="header-profile hs-dropdown ti-dropdown" data-hs-dropdown-placement="bottom-right">
               <button id="dropdown-profile" type="button"
                 class="hs-dropdown-toggle ti-dropdown-toggle gap-2 p-0 flex-shrink-0 h-8 w-8 rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10">
-                <img class="inline-block rounded-full ring-2 ring-white dark:ring-white/10"
-                  src="./assets/img/users/1.jpg" alt="Image Description" />
+                <img *ngIf="employeeProfile?.picture && employeeProfile.picture !== ''; else defaultImage"
+                    class="inline-block rounded-full ring-2 h-full !ring-transparent"
+                    [src]="employeeProfile.picture"
+                    alt="Image Description" 
+                    (error)="onImageError($event)"/>
+
+                <ng-template #defaultImage>
+                  <img
+                    class="inline-block rounded-full ring-2 h-full !ring-transparent"
+                    src="./assets/img/users/defaultperson.jpg"
+                    alt="Image Description" />
+                </ng-template>
               </button>
 
               <div class="hs-dropdown-menu ti-dropdown-menu border-0 w-[20rem]" aria-labelledby="dropdown-profile">
                 <div class="ti-dropdown-header !bg-primary flex">
                   <div class="ltr:mr-3 rtl:ml-3">
-                    <img class="avatar shadow-none rounded-full !ring-transparent" src="./assets/img/users/1.jpg"
-                      alt="profile-img" />
+                    <!-- <img class="avatar shadow-none rounded-full h-full !ring-transparent" src="./assets/img/users/profile2.jpg"
+                      alt="profile-img" /> -->
+                      <img *ngIf="employeeProfile?.picture && employeeProfile.picture !== ''; else defaultImage"
+                        class="inline-block rounded-full ring-2 h-12 w-12 !ring-transparent"
+                        [src]="employeeProfile.picture"
+                        alt="Image Description" 
+                        (error)="onImageError($event)"/>
+
+                    <ng-template #defaultImage>
+                      <img
+                        class="inline-block rounded-full ring-2 h-12 w-12 !ring-transparent"
+                        src="./assets/img/users/defaultperson.jpg"
+                        alt="Image Description" />
+                    </ng-template>
                   </div>
                   <div>
                     <p class="ti-dropdown-header-title !text-white">
@@ -716,12 +745,8 @@
                 </div>
               </div>
             </div>
-            <div class="switcher-icon">
-              <button aria-label="button" type="button"
-                class="hs-dropdown-toggle inline-flex flex-shrink-0 justify-center items-center gap-2 h-[2.375rem] w-[2.375rem] rounded-full font-medium bg-gray-100 hover:bg-gray-200 text-gray-500 align-middle focus:outline-none focus-visible:outline-none focus:ring-0 focus:ring-gray-400 focus:ring-offset-0 focus:ring-offset-white transition-all text-xs dark:bg-bgdark dark:hover:bg-black/20 dark:text-white/70 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10"
-                data-hs-overlay="#hs-overlay-switcher">
-                <i class="ri-settings-5-line header-icon animate-spin"></i>
-              </button>
+            <div class="header-name">
+              <span class="dark:text-black/30 text-black text-center"> {{this.employeeProfile.thFullName?this.employeeProfile.thFullName:''}} </span>
             </div>
           </div>
         </div>

src/app/shared/components/header/header.component.ts

@@ -132,4 +132,9 @@ export class HeaderComponent {
     const element: any = document.querySelector('.serachmodal');
     element.click();
   }
+
+  onImageError(event: Event) {
+    const target = event.target as HTMLImageElement;
+    target.src = './assets/img/users/defaultperson.jpg';
+  }
 }