From e9dd86cdb3d430c129a69d444701aa95aa2270cb Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 12 Nov 2024 18:31:05 +0100
Subject: [PATCH] added profile picture

---
 .../course-users-selector.component.html      | 19 ++++++++++++++++++-
 .../course-users-selector.module.ts           |  3 ++-
 .../course-users-selector.component.spec.ts   |  5 +++--
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html b/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html
index e2bc97df120d..54f89eb434c2 100644
--- a/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html
+++ b/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.html
@@ -13,13 +13,30 @@
             [placeholder]="'artemisApp.userSelector.placeholderText' | artemisTranslate"
             [ngbTypeahead]="search"
             [inputFormatter]="usersFormatter"
-            [resultFormatter]="usersFormatter"
+            [resultTemplate]="rt"
             [editable]="false"
             [focusFirst]="false"
             (input)="onInputChange($event)"
             placement="bottom-start"
             #instance="ngbTypeahead"
         />
+        <ng-template #rt let-user="result" let-term="term">
+            <div class="d-flex align-items-center">
+                <jhi-profile-picture
+                    [imageSizeInRem]="'1.1'"
+                    [fontSizeInRem]="'0.5'"
+                    [imageId]="'sidebar-profile-picture'"
+                    [defaultPictureId]="'sidebar-default-profile-picture'"
+                    [isGray]="false"
+                    [authorId]="user.id"
+                    [authorName]="user.name"
+                    [imageUrl]="user.imageUrl"
+                    [isEditable]="false"
+                    class="me-2"
+                ></jhi-profile-picture>
+                <span>{{ getUserLabel(user) }}</span>
+            </div>
+        </ng-template>
         @if (isSearching) {
             <small class="form-text text-body-secondary" jhiTranslate="artemisApp.userSelector.searchingText"></small>
             <br />
diff --git a/src/main/webapp/app/shared/course-users-selector/course-users-selector.module.ts b/src/main/webapp/app/shared/course-users-selector/course-users-selector.module.ts
index ca44726f11bb..8c47180607d0 100644
--- a/src/main/webapp/app/shared/course-users-selector/course-users-selector.module.ts
+++ b/src/main/webapp/app/shared/course-users-selector/course-users-selector.module.ts
@@ -4,9 +4,10 @@ import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { NgModule } from '@angular/core';
 import { CourseUsersSelectorComponent } from 'app/shared/course-users-selector/course-users-selector.component';
+import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component';
 
 @NgModule({
-    imports: [CommonModule, FormsModule, ReactiveFormsModule, ArtemisSharedModule, ArtemisSharedComponentModule],
+    imports: [CommonModule, FormsModule, ReactiveFormsModule, ArtemisSharedModule, ArtemisSharedComponentModule, ProfilePictureComponent],
     exports: [CourseUsersSelectorComponent],
     declarations: [CourseUsersSelectorComponent],
 })
diff --git a/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts b/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
index ffb59f1825a3..564b10a64590 100644
--- a/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
+++ b/src/test/javascript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
@@ -6,7 +6,7 @@ import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
 import { By } from '@angular/platform-browser';
 import { of } from 'rxjs';
 import { HttpResponse } from '@angular/common/http';
-import { MockPipe, MockProvider } from 'ng-mocks';
+import { MockComponent, MockPipe, MockProvider } from 'ng-mocks';
 import { CourseManagementService } from 'app/course/manage/course-management.service';
 import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe';
 import { CourseUsersSelectorComponent, SearchRoleGroup } from 'app/shared/course-users-selector/course-users-selector.component';
@@ -14,6 +14,7 @@ import { UserPublicInfoDTO } from 'app/core/user/user.model';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { ProfilePictureComponent } from '../../../../../../main/webapp/app/shared/profile-picture/profile-picture.component';
 
 @Component({
     template: `
@@ -48,7 +49,7 @@ describe('CourseUsersSelectorComponent', () => {
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
             imports: [CommonModule, FormsModule, ReactiveFormsModule, NgbTypeaheadModule, ArtemisSharedModule, ArtemisSharedComponentModule, TranslateModule.forRoot()],
-            declarations: [CourseUsersSelectorComponent, WrapperComponent, MockPipe(ArtemisTranslatePipe)],
+            declarations: [CourseUsersSelectorComponent, WrapperComponent, MockPipe(ArtemisTranslatePipe), MockComponent(ProfilePictureComponent)],
             providers: [MockProvider(CourseManagementService)],
         }).compileComponents();
     }));