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 1/3] 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();
     }));

From 10df05984bf519042ad501a7acad214dc7dcd820 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Tue, 12 Nov 2024 22:43:57 +0100
Subject: [PATCH 2/3] added test

---
 .../course-users-selector.component.spec.ts          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

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 564b10a64590..f5f2329fd9cd 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
@@ -143,6 +143,18 @@ describe('CourseUsersSelectorComponent', () => {
             expect(userSelectorComponent.selectedUsers).toEqual([exampleUserPublicInfoDTO]);
             expect(fixture.debugElement.query(By.css('.delete-user'))).toBeFalsy();
         }));
+
+        it('should render profile picture for users in dropdown', fakeAsync(() => {
+            const user = generateExampleUserPublicInfoDTO({});
+            searchUsersSpy.mockReturnValue(of(new HttpResponse({ body: [user], status: 200 })));
+
+            changeInput(fixture.debugElement.nativeElement, 'test');
+            tick(1000);
+            fixture.detectChanges();
+
+            const profilePicture = fixture.debugElement.query(By.directive(MockComponent(ProfilePictureComponent)));
+            expect(profilePicture).not.toBeNull();
+        }));
     });
 
     function getNativeInput(element: HTMLElement): HTMLInputElement {

From 36a3c03b956f3160ca65f92049f7feb2427ef085 Mon Sep 17 00:00:00 2001
From: Asli Aykan <asliaykan97@gmail.com>
Date: Wed, 13 Nov 2024 13:36:04 +0100
Subject: [PATCH 3/3] refactor code according to reviews

---
 .../course-users-selector.component.html                      | 4 ++--
 .../course-users-selector.component.spec.ts                   | 2 +-
 2 files changed, 3 insertions(+), 3 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 54f89eb434c2..d3e4254e97d6 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,14 +13,14 @@
             [placeholder]="'artemisApp.userSelector.placeholderText' | artemisTranslate"
             [ngbTypeahead]="search"
             [inputFormatter]="usersFormatter"
-            [resultTemplate]="rt"
+            [resultTemplate]="resultTemplate"
             [editable]="false"
             [focusFirst]="false"
             (input)="onInputChange($event)"
             placement="bottom-start"
             #instance="ngbTypeahead"
         />
-        <ng-template #rt let-user="result" let-term="term">
+        <ng-template #resultTemplate let-user="result">
             <div class="d-flex align-items-center">
                 <jhi-profile-picture
                     [imageSizeInRem]="'1.1'"
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 f5f2329fd9cd..74693eb15ba5 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
@@ -14,7 +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';
+import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component';
 
 @Component({
     template: `