From fb4e24a3ded36b2add93064847fcd6e7c0f0ca16 Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Mon, 21 Oct 2024 16:38:30 +0200 Subject: [PATCH 1/5] Created new component and added to user lists --- src/main/webapp/app/admin/admin.module.ts | 2 + .../user-management.component.html | 15 ++++++ .../tutorial-group-detail.component.html | 17 +++--- .../tutorial-group-detail.component.scss | 19 ------- .../tutorial-group-detail.component.ts | 6 --- .../shared/tutorial-groups-shared.module.ts | 3 +- .../course-conversations.module.ts | 2 + .../conversation-member-row.component.html | 20 +++---- .../conversation-member-row.component.scss | 19 ------- .../conversation-member-row.component.ts | 10 ++-- .../course-group/course-group.component.html | 19 +++++++ .../course-group/course-group.module.ts | 3 +- .../app/shared/metis/metis.component.scss | 46 ---------------- .../webapp/app/shared/metis/metis.module.ts | 2 + .../answer-post-header.component.html | 40 ++++---------- .../post-header/post-header.component.html | 40 ++++---------- .../posting-header.directive.ts | 6 --- .../profile-picture.component.html | 25 +++++++++ .../profile-picture.component.scss | 29 +++++++++++ .../profile-picture.component.ts | 50 ++++++++++++++++++ src/main/webapp/i18n/de/course.json | 3 +- src/main/webapp/i18n/de/user-management.json | 3 +- src/main/webapp/i18n/en/course.json | 3 +- src/main/webapp/i18n/en/user-management.json | 3 +- .../profile-picture.component.spec.ts | 52 +++++++++++++++++++ 25 files changed, 254 insertions(+), 183 deletions(-) create mode 100644 src/main/webapp/app/shared/profile-picture/profile-picture.component.html create mode 100644 src/main/webapp/app/shared/profile-picture/profile-picture.component.scss create mode 100644 src/main/webapp/app/shared/profile-picture/profile-picture.component.ts create mode 100644 src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts diff --git a/src/main/webapp/app/admin/admin.module.ts b/src/main/webapp/app/admin/admin.module.ts index 92118d36ea07..28283dd58512 100644 --- a/src/main/webapp/app/admin/admin.module.ts +++ b/src/main/webapp/app/admin/admin.module.ts @@ -47,6 +47,7 @@ import { KnowledgeAreaTreeComponent } from 'app/shared/standardized-competencies import { StandardizedCompetencyFilterComponent } from 'app/shared/standardized-competencies/standardized-competency-filter.component'; import { StandardizedCompetencyDetailComponent } from 'app/shared/standardized-competencies/standardized-competency-detail.component'; import { DeleteUsersButtonComponent } from 'app/admin/user-management/delete-users-button.component'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; const ENTITY_STATES = [...adminState]; @@ -73,6 +74,7 @@ const ENTITY_STATES = [...adminState]; StandardizedCompetencyFilterComponent, StandardizedCompetencyDetailComponent, DeleteUsersButtonComponent, + ProfilePictureComponent, ], declarations: [ AuditsComponent, diff --git a/src/main/webapp/app/admin/user-management/user-management.component.html b/src/main/webapp/app/admin/user-management/user-management.component.html index 129f30d67feb..ff9f71708500 100644 --- a/src/main/webapp/app/admin/user-management/user-management.component.html +++ b/src/main/webapp/app/admin/user-management/user-management.component.html @@ -91,6 +91,9 @@

+ + + @@ -147,6 +150,18 @@

{{ user.id }} + + + + diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html index 26607ec88597..aa3e591fcb37 100644 --- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html +++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.html @@ -10,13 +10,16 @@

{{ tutorialGroup.title }}

- @if (tutorialGroup.teachingAssistantImageUrl) { - - } @else { - {{ - tutorInitials - }} - } + +
diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.scss b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.scss index 0a2501554636..3e484a84165b 100644 --- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.scss +++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.scss @@ -1,5 +1,3 @@ -$tutor-image-size: 4.5rem; - .tutorial-group-detail { .scrollbar { position: relative; @@ -15,20 +13,3 @@ $tutor-image-size: 4.5rem; margin-bottom: -1rem; } } - -.tutorial-group-detail-tutor-image { - width: $tutor-image-size; - height: $tutor-image-size; - object-fit: cover; -} - -.tutorial-group-detail-tutor-default-image { - width: $tutor-image-size; - height: $tutor-image-size; - font-size: 2rem; - display: inline-flex; - align-items: center; - justify-content: center; - background-color: var(--gray-400); - color: var(--white); -} diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.ts b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.ts index 2d2624ac55a4..2b3adc91f4e3 100644 --- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.ts +++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-group-detail/tutorial-group-detail.component.ts @@ -9,8 +9,6 @@ import { TranslateService } from '@ngx-translate/core'; import { faCircle, faCircleInfo, faCircleXmark, faPercent, faQuestionCircle, faUserCheck } from '@fortawesome/free-solid-svg-icons'; import dayjs from 'dayjs/esm'; import { SortService } from 'app/shared/service/sort.service'; -import { getInitialsFromString } from 'app/utils/text.utils'; -import { getBackgroundColorHue } from 'app/utils/color.utils'; @Component({ selector: 'jhi-tutorial-group-detail', @@ -34,9 +32,7 @@ export class TutorialGroupDetailComponent implements OnChanges { sessions: TutorialGroupSession[] = []; - tutorInitials: string; tutorialTimeslotString: string | undefined; - tutorDefaultProfilePictureHue: string; isMessagingEnabled: boolean; utilization: number | undefined; @@ -91,8 +87,6 @@ export class TutorialGroupDetailComponent implements OnChanges { getTutorialDetail() { const tutorialGroup = this.tutorialGroup; - this.tutorDefaultProfilePictureHue = getBackgroundColorHue(tutorialGroup.teachingAssistantId ? tutorialGroup.teachingAssistantId.toString() : 'default'); - this.tutorInitials = getInitialsFromString(tutorialGroup.teachingAssistantName ?? 'NA'); this.isMessagingEnabled = isMessagingEnabled(this.course); if (tutorialGroup.averageAttendance && tutorialGroup.capacity) { this.utilization = Math.round((tutorialGroup.averageAttendance / tutorialGroup.capacity) * 100); diff --git a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-shared.module.ts b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-shared.module.ts index 072ea574195e..3c1417c6a2b6 100644 --- a/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-shared.module.ts +++ b/src/main/webapp/app/course/tutorial-groups/shared/tutorial-groups-shared.module.ts @@ -14,9 +14,10 @@ import { RemoveSecondsPipe } from 'app/course/tutorial-groups/shared/remove-seco import { MeetingPatternPipe } from 'app/course/tutorial-groups/shared/meeting-pattern.pipe'; import { DetailModule } from 'app/detail-overview-list/detail.module'; import { IconCardComponent } from 'app/shared/icon-card/icon-card.component'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; @NgModule({ - imports: [ArtemisSharedModule, RouterModule, ArtemisSidePanelModule, VerticalProgressBarModule, DetailModule, IconCardComponent], + imports: [ArtemisSharedModule, RouterModule, ArtemisSidePanelModule, VerticalProgressBarModule, DetailModule, IconCardComponent, ProfilePictureComponent], declarations: [ TutorialGroupsTableComponent, TutorialGroupDetailComponent, diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts b/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts index 0d593728c9f2..2f6e01364f58 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.module.ts @@ -31,6 +31,7 @@ import { ArtemisMarkdownModule } from 'app/shared/markdown.module'; import { CourseConversationsCodeOfConductComponent } from 'app/overview/course-conversations/code-of-conduct/course-conversations-code-of-conduct.component'; import { CourseWideSearchComponent } from 'app/overview/course-conversations/course-wide-search/course-wide-search.component'; import { ArtemisSidebarModule } from 'app/shared/sidebar/sidebar.module'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; const routes: Routes = [ { @@ -54,6 +55,7 @@ const routes: Routes = [ ArtemisSidebarModule, InfiniteScrollModule, CourseUsersSelectorModule, + ProfilePictureComponent, ], declarations: [ CourseConversationsComponent, diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html index 47eff1257e65..34454b54a61c 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html @@ -1,16 +1,16 @@ @if (activeConversation && course) {
- @if (userImageUrl) { - - } @else { - {{ userInitials }} - } + + @if (isChannel(activeConversation) && conversationMember?.isChannelModerator) { } diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.scss b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.scss index a2f66745bed6..28814b8391f5 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.scss +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.scss @@ -1,5 +1,3 @@ -$profile-picture-height: 2rem; - .conversation-member-row { min-height: 3rem; @@ -16,21 +14,4 @@ $profile-picture-height: 2rem; .dropdown-toggle::after { content: none; } - - .conversation-member-row-default-profile-picture { - font-size: 0.8rem; - display: inline-flex; - align-items: center; - justify-content: center; - } - - .conversation-member-row-profile-picture, - .conversation-member-row-default-profile-picture { - width: $profile-picture-height; - height: $profile-picture-height; - max-width: $profile-picture-height; - max-height: $profile-picture-height; - background-color: var(--gray-400); - color: var(--white); - } } diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts index 39a712c64424..da22826776da 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts @@ -20,8 +20,6 @@ import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; import { getAsGroupChatDTO, isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model'; import { GroupChatService } from 'app/shared/metis/conversations/group-chat.service'; import { catchError } from 'rxjs/operators'; -import { getBackgroundColorHue } from 'app/utils/color.utils'; -import { getInitialsFromString } from 'app/utils/text.utils'; @Component({ // eslint-disable-next-line @angular-eslint/component-selector @@ -58,9 +56,9 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy { canBeRevokedChannelModeratorRole = false; userLabel: string; + userName: string | undefined; + userId: number | undefined; userImageUrl: string | undefined; - userDefaultPictureHue: string; - userInitials: string; // icons userIcon: IconProp = faUser; userTooltip = ''; @@ -94,9 +92,9 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy { } this.userImageUrl = this.conversationMember.imageUrl; + this.userId = this.conversationMember.id; + this.userName = this.conversationMember.name; this.userLabel = getUserLabel(this.conversationMember); - this.userInitials = getInitialsFromString(this.conversationMember.name ?? 'NA'); - this.userDefaultPictureHue = getBackgroundColorHue(this.conversationMember.id ? this.conversationMember.id.toString() : 'default'); this.setUserAuthorityIconAndTooltip(); // the creator of a channel can not be removed from the channel this.canBeRemovedFromConversation = !this.isCurrentUser && this.canRemoveUsersFromConversation(this.activeConversation); diff --git a/src/main/webapp/app/shared/course-group/course-group.component.html b/src/main/webapp/app/shared/course-group/course-group.component.html index a399e667e360..bdfe9046d82f 100644 --- a/src/main/webapp/app/shared/course-group/course-group.component.html +++ b/src/main/webapp/app/shared/course-group/course-group.component.html @@ -64,6 +64,25 @@

} + + + + + + + + + + + diff --git a/src/main/webapp/app/shared/course-group/course-group.module.ts b/src/main/webapp/app/shared/course-group/course-group.module.ts index 6e25d333e3f5..0c145b7ad00c 100644 --- a/src/main/webapp/app/shared/course-group/course-group.module.ts +++ b/src/main/webapp/app/shared/course-group/course-group.module.ts @@ -5,9 +5,10 @@ import { UserImportModule } from 'app/shared/user-import/user-import.module'; import { NgxDatatableModule } from '@siemens/ngx-datatable'; import { ArtemisSharedModule } from 'app/shared/shared.module'; import { RouterModule } from '@angular/router'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; @NgModule({ - imports: [ArtemisDataTableModule, UserImportModule, NgxDatatableModule, ArtemisSharedModule, RouterModule], + imports: [ArtemisDataTableModule, UserImportModule, NgxDatatableModule, ArtemisSharedModule, RouterModule, ProfilePictureComponent], declarations: [CourseGroupComponent], exports: [CourseGroupComponent], }) diff --git a/src/main/webapp/app/shared/metis/metis.component.scss b/src/main/webapp/app/shared/metis/metis.component.scss index 50c9db5f3588..8b835a234d01 100644 --- a/src/main/webapp/app/shared/metis/metis.component.scss +++ b/src/main/webapp/app/shared/metis/metis.component.scss @@ -1,5 +1,3 @@ -$profile-picture-height: 2.15rem; - .post-result-information { font-size: small; font-style: italic; @@ -31,54 +29,10 @@ $profile-picture-height: 2.15rem; margin-left: 2.65rem; } -.post-profile-picture { - width: $profile-picture-height; - height: $profile-picture-height; - font-size: 0.9rem; - display: inline-flex; - align-items: center; - justify-content: center; - background-color: var(--gray-400); - color: var(--white); -} - -.post-profile-picture-wrap { - width: $profile-picture-height; - height: $profile-picture-height; - position: relative; -} - -.post-edit-profile-picture-overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: rgba(#000, 0.6); - opacity: 0; - color: var(--white); -} - -.post-edit-profile-picture-overlay:hover { - opacity: 1; -} - .post-authority-icon-student { display: none; } -.post-profile-picture-student { - background-color: var(--cyan); -} - -.post-profile-picture-tutor { - background-color: var(--orange); -} - -.post-profile-picture-instructor { - background-color: var(--graph-red); -} - .reference { font-weight: 200; display: inline-flex; diff --git a/src/main/webapp/app/shared/metis/metis.module.ts b/src/main/webapp/app/shared/metis/metis.module.ts index 82214acaca79..f116f5b965d0 100644 --- a/src/main/webapp/app/shared/metis/metis.module.ts +++ b/src/main/webapp/app/shared/metis/metis.module.ts @@ -42,6 +42,7 @@ import { LinkPreviewModule } from 'app/shared/link-preview/link-preview.module'; import { LinkPreviewComponent } from 'app/shared/link-preview/components/link-preview/link-preview.component'; import { LinkPreviewContainerComponent } from 'app/shared/link-preview/components/link-preview-container/link-preview-container.component'; import { MetisConversationService } from 'app/shared/metis/metis-conversation.service'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; @NgModule({ imports: [ @@ -63,6 +64,7 @@ import { MetisConversationService } from 'app/shared/metis/metis-conversation.se MatFormFieldModule, MatDialogModule, LinkPreviewModule, + ProfilePictureComponent, ], declarations: [ PostingThreadComponent, diff --git a/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html index b869f78d9258..08c7c2a410c3 100644 --- a/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html +++ b/src/main/webapp/app/shared/metis/posting-header/answer-post-header/answer-post-header.component.html @@ -2,35 +2,17 @@
@if (posting.author) { -
- @if (posting.author.imageUrl === undefined) { - {{ userProfilePictureInitials }} - } @else { - - } - @if (currentUser !== undefined && posting.author.id === currentUser.id) { - - - - } -
+ + {{ posting.author?.name }} diff --git a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html index 0470927f971e..32571009adab 100644 --- a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html +++ b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html @@ -2,35 +2,17 @@
@if (posting.author) { -
- @if (posting.author.imageUrl === undefined) { - {{ userProfilePictureInitials }} - } @else { - - } - @if (currentUser !== undefined && posting.author.id === currentUser.id) { - - - - } -
+ + {{ posting.author?.name }} diff --git a/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts b/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts index e11c4c6fb5ed..b20c051bd433 100644 --- a/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts +++ b/src/main/webapp/app/shared/metis/posting-header/posting-header.directive.ts @@ -8,8 +8,6 @@ import { faUser, faUserCheck, faUserGraduate } from '@fortawesome/free-solid-svg import { User } from 'app/core/user/user.model'; import { AccountService } from 'app/core/auth/account.service'; import { tap } from 'rxjs'; -import { getBackgroundColorHue } from 'app/utils/color.utils'; -import { getInitialsFromString } from 'app/utils/text.utils'; @Directive() export abstract class PostingHeaderDirective implements OnInit { @@ -26,8 +24,6 @@ export abstract class PostingHeaderDirective implements OnIni userAuthority: string; userRoleBadge: string; userAuthorityTooltip: string; - userProfilePictureBackgroundColor: string; - userProfilePictureInitials: string; currentUser?: User; protected constructor( @@ -81,8 +77,6 @@ export abstract class PostingHeaderDirective implements OnIni setUserAuthorityIconAndTooltip(): void { const toolTipTranslationPath = 'artemisApp.metis.userAuthorityTooltips.'; const roleBadgeTranslationPath = 'artemisApp.metis.userRoles.'; - this.userProfilePictureInitials = this.posting.author?.name === undefined ? 'NA' : getInitialsFromString(this.posting.author?.name); - this.userProfilePictureBackgroundColor = getBackgroundColorHue(this.posting.author?.id?.toString()); this.userAuthorityIcon = faUser; if (this.posting.authorRole === UserRole.USER) { this.userAuthority = 'student'; diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.html b/src/main/webapp/app/shared/profile-picture/profile-picture.component.html new file mode 100644 index 000000000000..2d08f4f7737c --- /dev/null +++ b/src/main/webapp/app/shared/profile-picture/profile-picture.component.html @@ -0,0 +1,25 @@ +
+ @if (imageUrl() === undefined) { + {{ userProfilePictureInitials }} + } @else { + + } + @if (isEditable()) { + + + + } +
diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.scss b/src/main/webapp/app/shared/profile-picture/profile-picture.component.scss new file mode 100644 index 000000000000..2cb3f625f5aa --- /dev/null +++ b/src/main/webapp/app/shared/profile-picture/profile-picture.component.scss @@ -0,0 +1,29 @@ +.profile-picture { + width: 100%; + height: 100%; + display: inline-flex; + align-items: center; + justify-content: center; + background-color: var(--gray-400); + color: var(--white); +} + +.profile-picture-wrap { + position: relative; + display: inline-block; +} + +.edit-profile-picture-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(#000, 0.6); + opacity: 0; + color: var(--white); +} + +.edit-profile-picture-overlay:hover { + opacity: 1; +} diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts new file mode 100644 index 000000000000..c50621de50e2 --- /dev/null +++ b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts @@ -0,0 +1,50 @@ +import { Component, OnChanges, OnInit, input } from '@angular/core'; +import { faCog } from '@fortawesome/free-solid-svg-icons'; +import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module'; +import { ArtemisSharedPipesModule } from 'app/shared/pipes/shared-pipes.module'; +import { getInitialsFromString } from 'app/utils/text.utils'; +import { getBackgroundColorHue } from 'app/utils/color.utils'; +import { RouterLink } from '@angular/router'; + +@Component({ + selector: 'jhi-profile-picture', + standalone: true, + templateUrl: './profile-picture.component.html', + styleUrl: './profile-picture.component.scss', + imports: [ArtemisSharedCommonModule, RouterLink, ArtemisSharedPipesModule], +}) +export class ProfilePictureComponent implements OnInit, OnChanges { + readonly imageSizeInRem = input('2.15'); + readonly fontSizeInRem = input('0.9'); + readonly authorName = input(undefined); + readonly authorId = input(undefined); + readonly imageUrl = input(undefined); + readonly imageClass = input(''); + readonly defaultPictureClass = input(''); + readonly imageId = input(''); + readonly defaultPictureId = input(''); + readonly isEditable = input(false); + + protected profilePictureBackgroundColor: string; + protected userProfilePictureInitials: string; + protected imageSize: string; + protected fontSize: string; + + // Icons + faCog = faCog; + + ngOnInit(): void { + this.updateImageData(); + } + + ngOnChanges(): void { + this.updateImageData(); + } + + private updateImageData() { + this.userProfilePictureInitials = this.authorName() === undefined ? 'NA' : getInitialsFromString(this.authorName()!); + this.profilePictureBackgroundColor = getBackgroundColorHue(this.authorId()?.toString()); + this.imageSize = this.imageSizeInRem().replaceAll('rem', '') + 'rem'; + this.fontSize = this.fontSizeInRem().replaceAll('rem', '') + 'rem'; + } +} diff --git a/src/main/webapp/i18n/de/course.json b/src/main/webapp/i18n/de/course.json index 16c8ee6ae832..af08804c31fe 100644 --- a/src/main/webapp/i18n/de/course.json +++ b/src/main/webapp/i18n/de/course.json @@ -223,7 +223,8 @@ "email": "E-Mail", "removeFromGroup": { "modalQuestion": "Soll der Login {{ title }} wirklich aus dieser Kursgruppe entfernt werden?" - } + }, + "profilePicture": "Profilbild" }, "averageScore": "Durchschnittliche Punktzahl", "releasedSoon": "Bald veröffentlicht", diff --git a/src/main/webapp/i18n/de/user-management.json b/src/main/webapp/i18n/de/user-management.json index 365abf875684..71b113c423e6 100644 --- a/src/main/webapp/i18n/de/user-management.json +++ b/src/main/webapp/i18n/de/user-management.json @@ -102,7 +102,8 @@ "search": "Suche", "loading": "Laden...", "searchError": "Der Suchbegriff muss leer oder mindestens 3 Zeichen lang sein.", - "jenkinsChange": "Die Änderung des Benutzernamens wird für dein aktuelles Setup (Jenkins) nicht unterstützt. Möglicherweise musst du den Benutzernamen in Jenkins manuell ändern.\nDu hast den Benutzer {{ oldLogin }} auf {{ newLogin }} aktualisiert." + "jenkinsChange": "Die Änderung des Benutzernamens wird für dein aktuelles Setup (Jenkins) nicht unterstützt. Möglicherweise musst du den Benutzernamen in Jenkins manuell ändern.\nDu hast den Benutzer {{ oldLogin }} auf {{ newLogin }} aktualisiert.", + "profilePicture": "Profilbild" } } } diff --git a/src/main/webapp/i18n/en/course.json b/src/main/webapp/i18n/en/course.json index d4246b664a54..3ed790c477fd 100644 --- a/src/main/webapp/i18n/en/course.json +++ b/src/main/webapp/i18n/en/course.json @@ -223,7 +223,8 @@ "email": "Email", "removeFromGroup": { "modalQuestion": "Are you sure you want to remove the user with login {{ title }} from this course group?" - } + }, + "profilePicture": "Profile Picture" }, "averageScore": "Average Score", "releasedSoon": "Released Soon", diff --git a/src/main/webapp/i18n/en/user-management.json b/src/main/webapp/i18n/en/user-management.json index 689da224ef2d..aa8f07d7eac7 100644 --- a/src/main/webapp/i18n/en/user-management.json +++ b/src/main/webapp/i18n/en/user-management.json @@ -102,7 +102,8 @@ "search": "Search", "loading": "Loading...", "searchError": "Search term must be empty or contain at least 3 characters.", - "jenkinsChange": "Changing the user's login is not supported for your current setup (Jenkins). You may have to manually update the user's login in Jenkins.\nYou changed the user {{ oldLogin }} to {{ newLogin }}." + "jenkinsChange": "Changing the user's login is not supported for your current setup (Jenkins). You may have to manually update the user's login in Jenkins.\nYou changed the user {{ oldLogin }} to {{ newLogin }}.", + "profilePicture": "Profile Picture" } } } diff --git a/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts b/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts new file mode 100644 index 000000000000..1733958f4bb5 --- /dev/null +++ b/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts @@ -0,0 +1,52 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; + +describe('ProfilePictureComponent', () => { + let component: ProfilePictureComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ProfilePictureComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(ProfilePictureComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).not.toBeNull(); + }); + + it('should update initials on change', () => { + const authorNameNew = 'Test Tester'; + const authorInitials = 'TT'; + expect((component as any).userProfilePictureInitials).not.toBe(authorInitials); + fixture.componentRef.setInput('authorName', authorNameNew); + fixture.detectChanges(); + expect((component as any).userProfilePictureInitials).toBe(authorInitials); + }); + + it('should update default image on change', () => { + const authorId = '1234'; + const hueToDetect = 'hsl(144.48424688749213, 50%, 50%)'; + expect((component as any).profilePictureBackgroundColor).not.toBe(hueToDetect); + fixture.componentRef.setInput('authorId', authorId); + fixture.detectChanges(); + expect((component as any).profilePictureBackgroundColor).toBe(hueToDetect); + }); + + it('should update image size and font size on change', () => { + const imageSize = '100'; + const fontSize = '100'; + expect((component as any).imageSize).not.toBe(imageSize + 'rem'); + expect((component as any).fontSize).not.toBe(fontSize + 'rem'); + fixture.componentRef.setInput('imageSizeInRem', imageSize); + fixture.componentRef.setInput('fontSizeInRem', fontSize); + fixture.detectChanges(); + expect((component as any).imageSize).toBe(imageSize + 'rem'); + expect((component as any).fontSize).toBe(fontSize + 'rem'); + }); +}); From 46e6fbff0dc70a004e9c7216ab1e353f9bf09240 Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Mon, 21 Oct 2024 17:18:25 +0200 Subject: [PATCH 2/5] Removed unneeded test cases and fixed test runs --- .../conversation-member-row.component.spec.ts | 9 ++------- .../discussion-section.component.spec.ts | 3 ++- .../answer-post-header.component.spec.ts | 7 ++----- .../post-header/post-header.component.spec.ts | 7 ++----- .../shared/tutorial-group-detail.component.spec.ts | 3 +++ 5 files changed, 11 insertions(+), 18 deletions(-) diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts index 133fc64978b9..1e43c269b9bf 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.spec.ts @@ -22,7 +22,7 @@ import { of } from 'rxjs'; import { isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model'; import { By } from '@angular/platform-browser'; import { NgbDropdownMocksModule } from '../../../../../../../../helpers/mocks/directive/ngbDropdownMocks.module'; -import { getElement } from '../../../../../../../../helpers/utils/general.utils'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; const memberTemplate = { id: 1, @@ -60,7 +60,7 @@ examples.forEach((activeConversation) => { beforeEach(waitForAsync(() => { TestBed.configureTestingModule({ imports: [NgbTooltipModule, NgbDropdownMocksModule], - declarations: [ConversationMemberRowComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent)], + declarations: [ConversationMemberRowComponent, MockPipe(ArtemisTranslatePipe), MockComponent(FaIconComponent), MockComponent(ProfilePictureComponent)], providers: [ MockProvider(AccountService), MockProvider(NgbModal), @@ -168,11 +168,6 @@ examples.forEach((activeConversation) => { } })); - it('should display default profile picture', () => { - fixture.detectChanges(); - expect(getElement(fixture.debugElement, '.conversation-member-row-default-profile-picture')).not.toBeNull(); - }); - function checkGrantModeratorButton(shouldExist: boolean) { const grantModeratorRoleButton = fixture.debugElement.query(By.css('.grant-moderator')); if (shouldExist) { diff --git a/src/test/javascript/spec/component/overview/discussion-section/discussion-section.component.spec.ts b/src/test/javascript/spec/component/overview/discussion-section/discussion-section.component.spec.ts index f1f6ec890ecf..262cae99dadd 100644 --- a/src/test/javascript/spec/component/overview/discussion-section/discussion-section.component.spec.ts +++ b/src/test/javascript/spec/component/overview/discussion-section/discussion-section.component.spec.ts @@ -44,6 +44,7 @@ import { MockMetisConversationService } from '../../../helpers/mocks/service/moc import { NotificationService } from 'app/shared/notification/notification.service'; import { MockNotificationService } from '../../../helpers/mocks/service/mock-notification.service'; import { provideHttpClientTesting } from '@angular/common/http/testing'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector @@ -87,7 +88,7 @@ describe('DiscussionSectionComponent', () => { useValue: new MockActivatedRoute({ postId: metisPostTechSupport.id, courseId: metisCourse.id }), }, ], - declarations: [InfiniteScrollStubDirective, MockComponent(FaIconComponent)], + declarations: [InfiniteScrollStubDirective, MockComponent(FaIconComponent), MockComponent(ProfilePictureComponent)], }) .overrideComponent(DiscussionSectionComponent, { set: { diff --git a/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts b/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts index da85a4f9318f..750274c5b685 100644 --- a/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts +++ b/src/test/javascript/spec/component/shared/metis/postings-header/answer-post-header/answer-post-header.component.spec.ts @@ -22,6 +22,7 @@ import { metisAnswerPostUser2, metisPostInChannel, metisResolvingAnswerPostUser1 import { UserRole } from 'app/shared/metis/metis.util'; import { AccountService } from 'app/core/auth/account.service'; import { MockAccountService } from '../../../../../helpers/mocks/service/mock-account.service'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; describe('AnswerPostHeaderComponent', () => { let component: AnswerPostHeaderComponent; @@ -58,6 +59,7 @@ describe('AnswerPostHeaderComponent', () => { MockComponent(PostingButtonComponent), MockComponent(FaIconComponent), MockComponent(ConfirmIconComponent), + MockComponent(ProfilePictureComponent), ], }) .compileComponents() @@ -83,11 +85,6 @@ describe('AnswerPostHeaderComponent', () => { jest.restoreAllMocks(); }); - it('should display default profile picture', () => { - fixture.detectChanges(); - expect(getElement(debugElement, '#post-default-profile-picture')).not.toBeNull(); - }); - it('should set author information correctly', () => { fixture.detectChanges(); const headerAuthorAndDate = getElement(debugElement, '#header-author-date'); diff --git a/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts b/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts index 70f3459b2f7e..8a244697b4fe 100644 --- a/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts +++ b/src/test/javascript/spec/component/shared/metis/postings-header/post-header/post-header.component.spec.ts @@ -19,6 +19,7 @@ import { UserRole } from 'app/shared/metis/metis.util'; import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; import { AccountService } from 'app/core/auth/account.service'; import { MockAccountService } from '../../../../../helpers/mocks/service/mock-account.service'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; describe('PostHeaderComponent', () => { let component: PostHeaderComponent; @@ -42,6 +43,7 @@ describe('PostHeaderComponent', () => { MockComponent(PostingMarkdownEditorComponent), MockComponent(PostingButtonComponent), MockComponent(ConfirmIconComponent), + MockComponent(ProfilePictureComponent), ], }) .compileComponents() @@ -68,11 +70,6 @@ describe('PostHeaderComponent', () => { expect(getElement(debugElement, '#today-flag')).toBeDefined(); }); - it('should display default profile picture', () => { - fixture.detectChanges(); - expect(getElement(debugElement, '#post-default-profile-picture')).not.toBeNull(); - }); - it('should display resolved icon on resolved post header', () => { component.posting = metisPostExerciseUser1; component.posting.resolved = true; diff --git a/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-detail.component.spec.ts b/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-detail.component.spec.ts index 1290e595fbd3..8ed9c3393675 100644 --- a/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-detail.component.spec.ts +++ b/src/test/javascript/spec/component/tutorial-groups/shared/tutorial-group-detail.component.spec.ts @@ -22,6 +22,7 @@ import { provideHttpClient } from '@angular/common/http'; import { RouterModule } from '@angular/router'; import { TranslateDirective } from 'app/shared/language/translate.directive'; import { IconCardComponent } from 'app/shared/icon-card/icon-card.component'; +import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-picture.component'; @Component({ selector: 'jhi-mock-header', template: '
' }) class MockHeaderComponent { @@ -69,6 +70,7 @@ describe('TutorialGroupDetailWrapperTest', () => { MockComponent(FaIconComponent), MockComponent(TutorialGroupUtilizationIndicatorComponent), MockDirective(TranslateDirective), + MockComponent(ProfilePictureComponent), ], providers: [ provideHttpClient(), @@ -119,6 +121,7 @@ describe('TutorialGroupDetailComponent', () => { MockComponent(TutorialGroupUtilizationIndicatorComponent), MockPipe(RemoveSecondsPipe), MockDirective(TranslateDirective), + MockComponent(ProfilePictureComponent), ], providers: [MockProvider(ArtemisMarkdownService), { provide: TranslateService, useClass: MockTranslateService }, MockProvider(ChangeDetectorRef)], }) From 3d3b9f16aa80cd6baf42d0873b60e1a80293afba Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Tue, 22 Oct 2024 16:50:04 +0200 Subject: [PATCH 3/5] Feedback Codebunny --- .../profile-picture/profile-picture.component.ts | 8 ++++---- .../profile-picture.component.spec.ts | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts index c50621de50e2..87e1fda2da48 100644 --- a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts +++ b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts @@ -25,10 +25,10 @@ export class ProfilePictureComponent implements OnInit, OnChanges { readonly defaultPictureId = input(''); readonly isEditable = input(false); - protected profilePictureBackgroundColor: string; - protected userProfilePictureInitials: string; - protected imageSize: string; - protected fontSize: string; + profilePictureBackgroundColor: string; + userProfilePictureInitials: string; + imageSize: string; + fontSize: string; // Icons faCog = faCog; diff --git a/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts b/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts index 1733958f4bb5..866d6b01654c 100644 --- a/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts +++ b/src/test/javascript/spec/component/shared/profile-picture/profile-picture.component.spec.ts @@ -23,30 +23,30 @@ describe('ProfilePictureComponent', () => { it('should update initials on change', () => { const authorNameNew = 'Test Tester'; const authorInitials = 'TT'; - expect((component as any).userProfilePictureInitials).not.toBe(authorInitials); + expect(component.userProfilePictureInitials).not.toBe(authorInitials); fixture.componentRef.setInput('authorName', authorNameNew); fixture.detectChanges(); - expect((component as any).userProfilePictureInitials).toBe(authorInitials); + expect(component.userProfilePictureInitials).toBe(authorInitials); }); it('should update default image on change', () => { const authorId = '1234'; const hueToDetect = 'hsl(144.48424688749213, 50%, 50%)'; - expect((component as any).profilePictureBackgroundColor).not.toBe(hueToDetect); + expect(component.profilePictureBackgroundColor).not.toBe(hueToDetect); fixture.componentRef.setInput('authorId', authorId); fixture.detectChanges(); - expect((component as any).profilePictureBackgroundColor).toBe(hueToDetect); + expect(component.profilePictureBackgroundColor).toBe(hueToDetect); }); it('should update image size and font size on change', () => { const imageSize = '100'; const fontSize = '100'; - expect((component as any).imageSize).not.toBe(imageSize + 'rem'); - expect((component as any).fontSize).not.toBe(fontSize + 'rem'); + expect(component.imageSize).not.toBe(imageSize + 'rem'); + expect(component.fontSize).not.toBe(fontSize + 'rem'); fixture.componentRef.setInput('imageSizeInRem', imageSize); fixture.componentRef.setInput('fontSizeInRem', fontSize); fixture.detectChanges(); - expect((component as any).imageSize).toBe(imageSize + 'rem'); - expect((component as any).fontSize).toBe(fontSize + 'rem'); + expect(component.imageSize).toBe(imageSize + 'rem'); + expect(component.fontSize).toBe(fontSize + 'rem'); }); }); From b5612f7895a683d2ef9321aba7168dad72595dfb Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Tue, 22 Oct 2024 16:54:35 +0200 Subject: [PATCH 4/5] More Feedback --- .../metis/posting-header/post-header/post-header.component.html | 2 +- .../app/shared/profile-picture/profile-picture.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html index 32571009adab..35985657b49a 100644 --- a/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html +++ b/src/main/webapp/app/shared/metis/posting-header/post-header/post-header.component.html @@ -10,7 +10,7 @@ [authorId]="posting.author?.id" [authorName]="posting.author?.name" [imageUrl]="posting.author?.imageUrl" - [isEditable]="currentUser !== undefined && posting.author.id === currentUser.id" + [isEditable]="currentUser !== undefined && posting.author?.id === currentUser.id" > diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts index 87e1fda2da48..e7eefad3186f 100644 --- a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts +++ b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts @@ -10,7 +10,7 @@ import { RouterLink } from '@angular/router'; selector: 'jhi-profile-picture', standalone: true, templateUrl: './profile-picture.component.html', - styleUrl: './profile-picture.component.scss', + styleUrls: ['./profile-picture.component.scss'], imports: [ArtemisSharedCommonModule, RouterLink, ArtemisSharedPipesModule], }) export class ProfilePictureComponent implements OnInit, OnChanges { From 2ea5314c1c9a2168367644fcf2f239d3ce2f9632 Mon Sep 17 00:00:00 2001 From: Paul Rangger Date: Wed, 23 Oct 2024 15:38:15 +0200 Subject: [PATCH 5/5] Feedback --- .../app/shared/profile-picture/profile-picture.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts index e7eefad3186f..5dd16a992369 100644 --- a/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts +++ b/src/main/webapp/app/shared/profile-picture/profile-picture.component.ts @@ -31,7 +31,7 @@ export class ProfilePictureComponent implements OnInit, OnChanges { fontSize: string; // Icons - faCog = faCog; + protected readonly faCog = faCog; ngOnInit(): void { this.updateImageData();