added profile picture

ls1intum · Nov 12, 2024 · e9dd86c · e9dd86c
1 parent 7876792
commit e9dd86c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 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
@@ -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
@@ -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/...cript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts b/...cript/spec/component/shared/course-users-selector/course-users-selector.component.spec.ts
@@ -6,14 +6,15 @@ 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';
 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();
     }));