diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html index 90b2559fa81a..e4cd32cdbecb 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.html +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.html @@ -29,10 +29,14 @@ [itemSelected]="conversationSelected" [courseId]="course.id" [sidebarData]="sidebarData" - (onPlusPressed)="onAccordionPlusButtonPressed($event)" + (onCreateChannelPressed)="openCreateChannelDialog()" + (onBrowsePressed)="openChannelOverviewDialog()" + (onDirectChatPressed)="openCreateOneToOneChatDialog()" + (onGroupChatPressed)="openCreateGroupChatDialog()" [showAddOption]="CHANNEL_TYPE_SHOW_ADD_OPTION" [channelTypeIcon]="CHANNEL_TYPE_ICON" [collapseState]="DEFAULT_COLLAPSE_STATE" + [inCommunication]="true" /> @if (course && !activeConversation && isCodeOfConductPresented) { diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts index 2d56484f8a46..da7dd332f047 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.ts @@ -1,12 +1,12 @@ -import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model'; import { Post } from 'app/entities/metis/post.model'; import { ActivatedRoute, Router } from '@angular/router'; import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; -import { EMPTY, Subject, Subscription, from, take, takeUntil } from 'rxjs'; -import { catchError } from 'rxjs/operators'; +import { EMPTY, Observable, Subject, Subscription, from, take, takeUntil } from 'rxjs'; +import { catchError, debounceTime, distinctUntilChanged } from 'rxjs/operators'; import { MetisConversationService } from 'app/shared/metis/metis-conversation.service'; -import { ChannelSubType, getAsChannelDTO } from 'app/entities/metis/conversation/channel.model'; +import { ChannelDTO, ChannelSubType, getAsChannelDTO } from 'app/entities/metis/conversation/channel.model'; import { MetisService } from 'app/shared/metis/metis.service'; import { Course, isMessagingEnabled } from 'app/entities/course.model'; import { PageType, SortDirection } from 'app/shared/metis/metis.util'; @@ -16,11 +16,12 @@ import { CourseWideSearchComponent, CourseWideSearchConfig } from 'app/overview/ import { AccordionGroups, ChannelAccordionShowAdd, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarData } from 'app/types/sidebar'; import { CourseOverviewService } from 'app/overview/course-overview.service'; import { GroupChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component'; -import { defaultFirstLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util'; +import { defaultFirstLayerDialogOptions, defaultSecondLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util'; import { UserPublicInfoDTO } from 'app/core/user/user.model'; import { OneToOneChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component'; -import { ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component'; +import { ChannelAction, ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component'; import { ProfileService } from 'app/shared/layouts/profiles/profile.service'; +import { ChannelsCreateDialogComponent } from 'app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component'; const DEFAULT_CHANNEL_GROUPS: AccordionGroups = { favoriteChannels: { entityData: [] }, @@ -114,7 +115,9 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { faFilter = faFilter; faSearch = faSearch; - // MetisConversationService is created in course overview, so we can use it here + createChannelFn?: (channel: ChannelDTO) => Observable; + channelActions$ = new EventEmitter(); + constructor( private router: Router, private activatedRoute: ActivatedRoute, @@ -162,6 +165,16 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { this.isServiceSetUp = true; this.isLoading = false; } + this.channelActions$ + .pipe( + debounceTime(500), + distinctUntilChanged((prev, curr) => prev.action === curr.action && prev.channel.id === curr.channel.id), + takeUntil(this.ngUnsubscribe), + ) + .subscribe((channelAction) => { + this.performChannelAction(channelAction); + }); + this.createChannelFn = (channel: ChannelDTO) => this.metisConversationService.createChannel(channel); }); this.profileSubscription = this.profileService.getProfileInfo()?.subscribe((profileInfo) => { @@ -170,6 +183,21 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { }); } + performChannelAction(channelAction: ChannelAction) { + if (this.createChannelFn) { + this.createChannelFn(channelAction.channel) + .pipe(takeUntil(this.ngUnsubscribe)) + .subscribe({ + complete: () => { + this.prepareSidebarData(); + }, + error: (error) => { + console.error('Error creating channel:', error); + }, + }); + } + } + subscribeToQueryParameter() { this.activatedRoute.queryParams.pipe(take(1), takeUntil(this.ngUnsubscribe)).subscribe((queryParams) => { if (queryParams.conversationId) { @@ -270,8 +298,8 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { storageId: 'conversation', groupedData: this.accordionConversationGroups, ungroupedData: this.sidebarConversations, - showAccordionAddOption: true, showAccordionLeadingIcon: true, + messagingEnabled: isMessagingEnabled(this.course), }; } @@ -284,16 +312,6 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { this.courseOverviewService.setSidebarCollapseState('conversation', this.isCollapsed); } - onAccordionPlusButtonPressed(chatType: string) { - if (chatType === 'groupChats') { - this.openCreateGroupChatDialog(); - } else if (chatType === 'directMessages') { - this.openCreateOneToOneChatDialog(); - } else { - this.openChannelOverviewDialog(chatType); - } - } - openCreateGroupChatDialog() { const modalRef: NgbModalRef = this.modalService.open(GroupChatCreateDialogComponent, defaultFirstLayerDialogOptions); modalRef.componentInstance.course = this.course; @@ -332,8 +350,22 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { }); } - openChannelOverviewDialog(groupKey: string) { - const subType = this.getChannelSubType(groupKey); + openCreateChannelDialog() { + const modalRef: NgbModalRef = this.modalService.open(ChannelsCreateDialogComponent, defaultSecondLayerDialogOptions); + modalRef.componentInstance.course = this.course; + modalRef.componentInstance.initialize(); + from(modalRef.result) + .pipe( + catchError(() => EMPTY), + takeUntil(this.ngUnsubscribe), + ) + .subscribe((channel: ChannelDTO) => { + this.channelActions$.emit({ action: 'create', channel }); + }); + } + + openChannelOverviewDialog() { + const subType = null; const modalRef: NgbModalRef = this.modalService.open(ChannelsOverviewDialogComponent, defaultFirstLayerDialogOptions); modalRef.componentInstance.course = this.course; modalRef.componentInstance.createChannelFn = subType === ChannelSubType.GENERAL ? this.metisConversationService.createChannel : undefined; @@ -363,22 +395,6 @@ export class CourseConversationsComponent implements OnInit, OnDestroy { }); } - getChannelSubType(groupKey: string) { - if (groupKey === 'exerciseChannels') { - return ChannelSubType.EXERCISE; - } - if (groupKey === 'generalChannels') { - return ChannelSubType.GENERAL; - } - if (groupKey === 'lectureChannels') { - return ChannelSubType.LECTURE; - } - if (groupKey === 'examChannels') { - return ChannelSubType.EXAM; - } - return ChannelSubType.GENERAL; - } - toggleChannelSearch() { this.channelSearchCollapsed = !this.channelSearchCollapsed; } diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html index cd5b295812a3..e7c6413b8b22 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html +++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component.html @@ -1,5 +1,5 @@ @if (isInitialized) { -
+

- {{ 'artemisApp.dialogs.channelOverview.title.' + channelSubType | artemisTranslate: { courseTitle: course.title } }} + {{ 'artemisApp.dialogs.channelOverview.title' | artemisTranslate: { courseTitle: course.title } }}

@if (channels && channels.length > 0) { -
+
    @for (channel of channels; track channels.indexOf(channel)) { @@ -22,36 +22,6 @@

} - @if (otherChannels && otherChannels.length > 0) { -
-
- - -
-
-
-
    - @for (channel of otherChannels; track otherChannels.indexOf(channel)) { -
  • - -
    • - } -
-
-
-
- } -
-
- @if (createChannelFn && canCreateChannel(course)) { - - }
} diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.scss b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.scss index f4e1f58d30ed..e5be0b4fb1d2 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.scss +++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.scss @@ -11,6 +11,7 @@ .list-group-item { overflow: hidden; + padding: 0; } .other-channels { diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.ts index 046f49428f99..deb055e00a5e 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.ts +++ b/src/main/webapp/app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.ts @@ -1,19 +1,15 @@ import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { EMPTY, Observable, Subject, debounceTime, distinctUntilChanged, finalize, from, map, takeUntil } from 'rxjs'; +import { Observable, Subject, debounceTime, distinctUntilChanged, finalize, map, takeUntil } from 'rxjs'; import { faChevronRight } from '@fortawesome/free-solid-svg-icons'; - import { HttpErrorResponse, HttpResponse } from '@angular/common/http'; import { onError } from 'app/shared/util/global.utils'; import { AlertService } from 'app/core/util/alert.service'; -import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { ChannelService } from 'app/shared/metis/conversations/channel.service'; import { ChannelDTO, ChannelSubType } from 'app/entities/metis/conversation/channel.model'; import { Course } from 'app/entities/course.model'; -import { ChannelsCreateDialogComponent } from 'app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component'; import { canCreateChannel } from 'app/shared/metis/conversations/conversation-permissions.utils'; import { AbstractDialogComponent } from 'app/overview/course-conversations/dialogs/abstract-dialog.component'; -import { defaultSecondLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util'; -import { catchError } from 'rxjs/operators'; export type ChannelActionType = 'register' | 'deregister' | 'view' | 'create'; export type ChannelAction = { @@ -44,12 +40,10 @@ export class ChannelsOverviewDialogComponent extends AbstractDialogComponent imp channelModificationPerformed = false; isLoading = false; channels: ChannelDTO[] = []; - otherChannels: ChannelDTO[] = []; isInitialized = false; faChevronRight = faChevronRight; - otherChannelsAreCollapsed = true; initialize() { super.initialize(['course', 'channelSubType']); @@ -61,7 +55,6 @@ export class ChannelsOverviewDialogComponent extends AbstractDialogComponent imp constructor( private channelService: ChannelService, private alertService: AlertService, - private modalService: NgbModal, activeModal: NgbActiveModal, ) { @@ -114,18 +107,6 @@ export class ChannelsOverviewDialogComponent extends AbstractDialogComponent imp case 'view': this.close([channelAction.channel, this.channelModificationPerformed]); break; - case 'create': - if (this.createChannelFn) { - this.createChannelFn(channelAction.channel) - .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe({ - complete: () => { - this.loadChannelsOfCourse(); - this.channelModificationPerformed = true; - }, - }); - } - break; } } @@ -142,8 +123,7 @@ export class ChannelsOverviewDialogComponent extends AbstractDialogComponent imp ) .subscribe({ next: (channels: ChannelDTO[]) => { - this.channels = channels?.filter((channel) => channel.subType === this.channelSubType) ?? []; - this.otherChannels = channels?.filter((channel) => channel.subType !== this.channelSubType) ?? []; + this.channels = channels; this.noOfChannels = this.channels.length; }, error: (errorResponse: HttpErrorResponse) => { @@ -151,19 +131,4 @@ export class ChannelsOverviewDialogComponent extends AbstractDialogComponent imp }, }); } - - openCreateChannelDialog(event: MouseEvent) { - event.stopPropagation(); - const modalRef: NgbModalRef = this.modalService.open(ChannelsCreateDialogComponent, defaultSecondLayerDialogOptions); - modalRef.componentInstance.course = this.course; - modalRef.componentInstance.initialize(); - from(modalRef.result) - .pipe( - catchError(() => EMPTY), - takeUntil(this.ngUnsubscribe), - ) - .subscribe((channel: ChannelDTO) => { - this.channelActions$.next({ action: 'create', channel }); - }); - } } diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html index 752c1e385261..f7f5d5aa0f5a 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.html @@ -46,7 +46,7 @@ (delete)="deleteChannel()" [dialogError]="dialogError$" > - +

} diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts index 64cb3410ae78..9a9b9b56bb6e 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts +++ b/src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-settings/conversation-settings.component.ts @@ -9,7 +9,7 @@ import { onError } from 'app/shared/util/global.utils'; import { EMPTY, Subject, from, takeUntil } from 'rxjs'; import { HttpErrorResponse } from '@angular/common/http'; import { AlertService } from 'app/core/util/alert.service'; -import { faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faTrash } from '@fortawesome/free-solid-svg-icons'; import { canChangeChannelArchivalState, canDeleteChannel, canLeaveConversation } from 'app/shared/metis/conversations/conversation-permissions.utils'; import { GroupChatService } from 'app/shared/metis/conversations/group-chat.service'; import { isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model'; @@ -42,7 +42,7 @@ export class ConversationSettingsComponent implements OnInit, OnDestroy { private dialogErrorSource = new Subject(); dialogError$ = this.dialogErrorSource.asObservable(); - faTimes = faTimes; + readonly faTrash = faTrash; conversationAsChannel: ChannelDTO | undefined; canLeaveConversation: boolean; diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html index d8e0e8a5aa1a..b84a700f6e35 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html +++ b/src/main/webapp/app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component.html @@ -1,5 +1,5 @@ @if (isInitialized) { -
+

diff --git a/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html b/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html index cbe9bcfbf6bb..6e0626903103 100644 --- a/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html +++ b/src/main/webapp/app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component.html @@ -1,5 +1,5 @@ @if (isInitialized) { -
+

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 78e11295962c..e2bc97df120d 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 @@ -16,6 +16,7 @@ [resultFormatter]="usersFormatter" [editable]="false" [focusFirst]="false" + (input)="onInputChange($event)" placement="bottom-start" #instance="ngbTypeahead" /> diff --git a/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.ts b/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.ts index 41be4d993b3c..ad8fc16d851f 100644 --- a/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.ts +++ b/src/main/webapp/app/shared/course-users-selector/course-users-selector.component.ts @@ -121,6 +121,14 @@ export class CourseUsersSelectorComponent implements ControlValueAccessor, OnIni this.onChange(this.selectedUsers); } + onInputChange(event: Event): void { + const value = (event.target as HTMLInputElement).value; + // If the input value has fewer than 3 characters, close the suggestion popup + if (value.length < 3) { + this.typeAheadInstance.dismissPopup(); + } + } + onFilterChange() { this.typeAheadInstance?.dismissPopup(); this.searchInput.nativeElement.dispatchEvent(new Event('input')); diff --git a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.html b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.html deleted file mode 100644 index 5b240eab45c3..000000000000 --- a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.html +++ /dev/null @@ -1,3 +0,0 @@ - diff --git a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss deleted file mode 100644 index a9acacbbb52e..000000000000 --- a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -.dropdown-toggle::after { - display: none; -} - -.sidebar-button { - border: 0; - - &:hover { - background-color: var(--transparent); - color: var(--link-item-color); - } -} diff --git a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.ts b/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.ts deleted file mode 100644 index f8001221c8b6..000000000000 --- a/src/main/webapp/app/shared/sidebar/accordion-add-options/accordion-add-options.component.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Component, Input } from '@angular/core'; -import { faPlus } from '@fortawesome/free-solid-svg-icons'; -import { SidebarEventService } from 'app/shared/sidebar/sidebar-event.service'; - -@Component({ - selector: 'jhi-accordion-add-options', - templateUrl: './accordion-add-options.component.html', - styleUrl: './accordion-add-options.component.scss', -}) -export class AccordionAddOptionsComponent { - @Input() groupKey: string; - faPlus = faPlus; - - constructor(private sidebarEventService: SidebarEventService) {} - - onPlusPressed(event: MouseEvent) { - event.stopPropagation(); - this.sidebarEventService.emitSidebarAccordionPlusClickedEvent(this.groupKey); - } -} diff --git a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html index bb8af797054e..16eb4bc62671 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html @@ -1,46 +1,44 @@ @for (groupKey of Object.keys(groupedData); track groupKey; let i = $index) { -
-
-
- @if (showLeadingIcon) { - - } - {{ 'artemisApp.courseOverview.sidebar.' + groupKey | artemisTranslate | titlecase }} - ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }}) -
-
- - + @if ((groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length) { +
+
+
+ @if (showLeadingIcon) { + + } + {{ 'artemisApp.courseOverview.sidebar.' + groupKey | artemisTranslate | titlecase }} + ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }}) +
+
+ +
-
- @if ((groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length) { -
-
- @for (sidebarItem of groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue; let last = $last; track sidebarItem) { -
- -
-
- } -
- @if (!collapseState[groupKey]) { + @if ((groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length) {
+
+ @for (sidebarItem of groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue; let last = $last; track sidebarItem) { +
+ +
+
+ } +
+ @if (!collapseState[groupKey]) { +
+ } } - } -
+
+ } } diff --git a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts index 5cd59c0d3b8e..9f185af2da2d 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core'; import { faChevronRight, faFile } from '@fortawesome/free-solid-svg-icons'; -import { AccordionGroups, ChannelAccordionShowAdd, ChannelGroupCategory, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarTypes } from 'app/types/sidebar'; +import { AccordionGroups, ChannelTypeIcons, CollapseState, SidebarCardElement, SidebarTypes } from 'app/types/sidebar'; import { Params } from '@angular/router'; @Component({ @@ -20,8 +20,6 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { @Input() courseId?: number; @Input() itemSelected?: boolean; @Input() showLeadingIcon = false; - @Input() showAddOptions = false; - @Input() showAddOption?: ChannelAccordionShowAdd; @Input() channelTypeIcon?: ChannelTypeIcons; @Input() collapseState: CollapseState; @Input() isFilterActive: boolean = false; @@ -72,11 +70,4 @@ export class SidebarAccordionComponent implements OnChanges, OnInit { this.collapseState[groupCategoryKey] = !this.collapseState[groupCategoryKey]; sessionStorage.setItem('sidebar.accordion.collapseState.' + this.storageId + '.byCourse.' + this.courseId, JSON.stringify(this.collapseState)); } - - getGroupKey(groupKey: string): boolean { - if (!this.showAddOption) { - return false; - } - return this.showAddOption[groupKey as ChannelGroupCategory]; - } } diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts index 0db256223fe5..4f68c0108e99 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-item/sidebar-card-item.component.ts @@ -9,4 +9,5 @@ import { SidebarCardElement, SidebarTypes } from 'app/types/sidebar'; export class SidebarCardItemComponent { @Input() sidebarItem: SidebarCardElement; @Input() sidebarType?: SidebarTypes; + @Input() groupKey?: string; } diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html index 6f5f92481893..264f9815cfa4 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.html @@ -5,5 +5,6 @@ (click)="emitStoreAndRefresh(sidebarItem.id)" [routerLinkActive]="'bg-selected border-selected'" > - + +
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.ts index 40afd9615c37..1422a0ad4efc 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-large/sidebar-card-large.component.ts @@ -13,6 +13,8 @@ export class SidebarCardLargeComponent { @Input({ required: true }) sidebarItem: SidebarCardElement; @Input() sidebarType?: SidebarTypes; @Input() itemSelected?: boolean; + /** Key used for grouping or categorizing sidebar items */ + @Input() groupKey?: string; constructor( private sidebarEventService: SidebarEventService, private router: Router, diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html index 4421540aa874..f01572634bde 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html @@ -5,7 +5,7 @@ [ngClass]="{ 'bg-selected border-selected': itemSelected }" (click)="emitPageChangeForExam()" > - +

} @else {
- +
} diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.ts index facce881ecdc..05596e471937 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.ts @@ -16,6 +16,8 @@ export class SidebarCardMediumComponent { @Input() sidebarType?: SidebarTypes; @Input() itemSelected?: boolean; @Output() pageChange = new EventEmitter(); + /** Key used for grouping or categorizing sidebar items */ + @Input() groupKey?: string; constructor( private sidebarEventService: SidebarEventService, diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html index bd01046f17d2..fee876319491 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.html @@ -10,7 +10,7 @@ [routerLinkActive]="'bg-selected border-selected'" >
- +
@if (sidebarItem.conversation) {
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.ts b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.ts index 68dc7bbb75f5..319763c19970 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-card-small/sidebar-card-small.component.ts @@ -16,6 +16,8 @@ export class SidebarCardSmallComponent { @Input({ required: true }) sidebarItem: SidebarCardElement; @Input() sidebarType?: SidebarTypes; @Input() itemSelected?: boolean; + /** Key used for grouping or categorizing sidebar items */ + @Input() groupKey?: string; constructor( private sidebarEventService: SidebarEventService, diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card.directive.ts b/src/main/webapp/app/shared/sidebar/sidebar-card.directive.ts index d197f711bc6b..dc248d99d527 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-card.directive.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-card.directive.ts @@ -13,6 +13,7 @@ export class SidebarCardDirective implements OnInit, OnDestroy { @Input() sidebarItem: SidebarCardElement; @Input() sidebarType?: SidebarTypes; @Input() itemSelected?: boolean; + @Input() groupKey?: string; @Output() onUpdateSidebar = new EventEmitter(); @@ -42,12 +43,32 @@ export class SidebarCardDirective implements OnInit, OnDestroy { private assignAttributes() { if (this.componentRef) { + if (this.groupKey !== undefined) { + this.componentRef.instance.groupKey = this.groupKey; + } + this.componentRef.instance.itemSelected = this.itemSelected; this.componentRef.instance.sidebarType = this.sidebarType; this.componentRef.instance.sidebarItem = this.sidebarItem; + this.componentRef.instance.sidebarItem.title = this.removeChannelPrefix(this.sidebarItem.title); + if (this.size == 'S') { this.componentRef.instance.onUpdateSidebar = this.onUpdateSidebar; } } } + + removeChannelPrefix(name: string): string { + const prefixes = ['exercise-', 'lecture-', 'exam-']; + const channelTypes = ['exerciseChannels', 'lectureChannels', 'examChannels']; + + if (channelTypes.includes(this.groupKey)) { + prefixes.forEach((prefix) => { + if (name?.startsWith(prefix)) { + name = name.substring(prefix.length); + } + }); + } + return name; + } } diff --git a/src/main/webapp/app/shared/sidebar/sidebar-event.service.ts b/src/main/webapp/app/shared/sidebar/sidebar-event.service.ts index b383a1847516..2db0f5fabfc4 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar-event.service.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar-event.service.ts @@ -4,7 +4,6 @@ import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class SidebarEventService { private sidebarCardClickedEvent = new BehaviorSubject(null); - private sidebarAccordionPlusClickedEvent = new BehaviorSubject(null); emitSidebarCardEvent(itemId: string | number) { this.sidebarCardClickedEvent.next(itemId); @@ -17,13 +16,4 @@ export class SidebarEventService { sidebarCardEventListener() { return this.sidebarCardClickedEvent.asObservable(); } - - emitSidebarAccordionPlusClickedEvent(groupkey: string) { - this.sidebarAccordionPlusClickedEvent.next(groupkey); - this.sidebarAccordionPlusClickedEvent.next(null); - } - - sidebarAccordionPlusClickedEventListener() { - return this.sidebarAccordionPlusClickedEvent.asObservable(); - } } diff --git a/src/main/webapp/app/shared/sidebar/sidebar.component.html b/src/main/webapp/app/shared/sidebar/sidebar.component.html index a70e2a9e604f..ea806fa17e2a 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.component.html +++ b/src/main/webapp/app/shared/sidebar/sidebar.component.html @@ -3,8 +3,8 @@
@if (searchFieldEnabled) { -
- +
+ @if (showFilter) {
@@ -17,8 +17,38 @@
} + + @if (inCommunication()) { +
+ + +
+ @if (sidebarData.messagingEnabled) { + + + } + + +
+
+ }
} + @if (!sidebarData?.ungroupedData || !(sidebarData?.ungroupedData | searchFilter: ['title', 'type'] : searchValue)?.length) {
(); @Output() onUpdateSidebar = new EventEmitter(); - @Output() onPlusPressed = new EventEmitter(); + onDirectChatPressed = output(); + onGroupChatPressed = output(); + onBrowsePressed = output(); + onCreateChannelPressed = output(); @Input() searchFieldEnabled: boolean = true; @Input() sidebarData: SidebarData; @Input() courseId?: number; @@ -33,7 +36,7 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit { @Input() channelTypeIcon?: ChannelTypeIcons; @Input() collapseState: CollapseState; @Input() showFilter: boolean = false; - + inCommunication = input(false); searchValue = ''; isCollapsed: boolean = false; @@ -42,7 +45,6 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit { paramSubscription?: Subscription; profileSubscription?: Subscription; sidebarEventSubscription?: Subscription; - sidebarAccordionEventSubscription?: Subscription; routeParams: Params; isProduction = true; @@ -52,6 +54,11 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit { readonly faFilter = faFilter; readonly faFilterCurrentlyApplied = faFilterCircleXmark; + readonly faUser = faUser; + readonly faUsers = faUsers; + readonly faPlusCircle = faPlusCircle; + readonly faSearch = faSearch; + readonly faHashtag = faHashtag; sidebarDataBeforeFiltering: SidebarData; @@ -65,6 +72,22 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit { private modalService: NgbModal, ) {} + createNewChannel() { + this.onCreateChannelPressed.emit(); + } + + browseChannels() { + this.onBrowsePressed.emit(); + } + + createDirectChat() { + this.onDirectChatPressed.emit(); + } + + createGroupChat() { + this.onGroupChatPressed.emit(); + } + ngOnInit(): void { this.profileSubscription = this.profileService.getProfileInfo()?.subscribe((profileInfo) => { this.isProduction = profileInfo?.inProduction; @@ -84,17 +107,6 @@ export class SidebarComponent implements OnDestroy, OnChanges, OnInit { } } }); - - this.sidebarAccordionEventSubscription = this.sidebarEventService - .sidebarAccordionPlusClickedEventListener() - .pipe( - distinctUntilChanged(), // This ensures the function is only called when the actual value changes - ) - .subscribe((groupKey) => { - if (groupKey) { - this.onPlusPressed.emit(groupKey); - } - }); } ngOnChanges() { diff --git a/src/main/webapp/app/shared/sidebar/sidebar.module.ts b/src/main/webapp/app/shared/sidebar/sidebar.module.ts index fdb5efb40bff..5a6ca727a8b5 100644 --- a/src/main/webapp/app/shared/sidebar/sidebar.module.ts +++ b/src/main/webapp/app/shared/sidebar/sidebar.module.ts @@ -14,7 +14,6 @@ import { ArtemisSharedCommonModule } from '../shared-common.module'; import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module'; import { SidebarCardDirective } from 'app/shared/sidebar/sidebar-card.directive'; import { ConversationOptionsComponent } from 'app/shared/sidebar/conversation-options/conversation-options.component'; -import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component'; import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module'; import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component'; @@ -39,8 +38,7 @@ import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.co SidebarCardItemComponent, SidebarComponent, ConversationOptionsComponent, - AccordionAddOptionsComponent, ], - exports: [SidebarComponent, SidebarCardSmallComponent, SidebarCardMediumComponent, SidebarCardLargeComponent, ConversationOptionsComponent, AccordionAddOptionsComponent], + exports: [SidebarComponent, SidebarCardSmallComponent, SidebarCardMediumComponent, SidebarCardLargeComponent, ConversationOptionsComponent], }) export class ArtemisSidebarModule {} diff --git a/src/main/webapp/app/types/sidebar.ts b/src/main/webapp/app/types/sidebar.ts index cdaae8d3b99f..11575cf18592 100644 --- a/src/main/webapp/app/types/sidebar.ts +++ b/src/main/webapp/app/types/sidebar.ts @@ -32,8 +32,8 @@ export interface SidebarData { groupedData?: AccordionGroups; ungroupedData?: SidebarCardElement[]; storageId?: string; - showAccordionAddOption?: boolean; showAccordionLeadingIcon?: boolean; + messagingEnabled?: boolean; } export interface SidebarCardElement { diff --git a/src/main/webapp/i18n/de/conversation.json b/src/main/webapp/i18n/de/conversation.json index 7a07b66d408b..1e35654026e4 100644 --- a/src/main/webapp/i18n/de/conversation.json +++ b/src/main/webapp/i18n/de/conversation.json @@ -192,12 +192,7 @@ } }, "channelOverview": { - "title": { - "general": "Alle allgemeinen Kanäle im Kurs {{ courseTitle }}", - "exercise": "Alle Aufgabenkanäle im Kurs {{ courseTitle }}", - "lecture": "Alle Vorlesungskanäle im Kurs {{ courseTitle }}", - "exam": "Alle Klausurkanäle im Kurs {{ courseTitle }}" - }, + "title": "Alle Kanäle im Kurs {{ courseTitle }}", "otherChannels": "Andere Kanäle", "createChannelButton": "Erstelle einen neuen Kanal", "channelItem": { diff --git a/src/main/webapp/i18n/de/student-dashboard.json b/src/main/webapp/i18n/de/student-dashboard.json index 1150bfc8c7f2..a14592b067dc 100644 --- a/src/main/webapp/i18n/de/student-dashboard.json +++ b/src/main/webapp/i18n/de/student-dashboard.json @@ -70,6 +70,8 @@ "examChannels": "Klausuren", "createChannel": "Kanal erstellen", "browseChannels": "Kanäle durchsuchen", + "createGroupChat": "Gruppenchat erstellen", + "createDirectChat": "Direkt-Chat erstellen", "groupChats": "Gruppenchats", "directMessages": "Direktnachrichten", "filterConversationPlaceholder": "Konversationen filtern" diff --git a/src/main/webapp/i18n/en/conversation.json b/src/main/webapp/i18n/en/conversation.json index 8ed306cca8f4..93c350bf4c55 100644 --- a/src/main/webapp/i18n/en/conversation.json +++ b/src/main/webapp/i18n/en/conversation.json @@ -192,12 +192,7 @@ } }, "channelOverview": { - "title": { - "general": "All General Channels in course {{ courseTitle }}", - "exercise": "All Exercise Channels in course {{ courseTitle }}", - "lecture": "All Lecture Channels in course {{ courseTitle }}", - "exam": "All Exam Channels in course {{ courseTitle }}" - }, + "title": "All Channels in course {{ courseTitle }}", "otherChannels": "Other Channels", "createChannelButton": "Create a new channel", "channelItem": { diff --git a/src/main/webapp/i18n/en/student-dashboard.json b/src/main/webapp/i18n/en/student-dashboard.json index 9a4d7690a9f5..58b2effd112c 100644 --- a/src/main/webapp/i18n/en/student-dashboard.json +++ b/src/main/webapp/i18n/en/student-dashboard.json @@ -70,6 +70,8 @@ "examChannels": "Exams", "createChannel": "Create channel", "browseChannels": "Browse channels", + "createGroupChat": "Create group chat", + "createDirectChat": "Create direct chat", "groupChats": "Group Chats", "directMessages": "Direct Messages", "filterConversationPlaceholder": "Filter conversations" diff --git a/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts index c67649159a60..71a9eaef676c 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/course-conversations.component.spec.ts @@ -1,6 +1,5 @@ import { CourseConversationsComponent } from 'app/overview/course-conversations/course-conversations.component'; import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing'; -import { Type } from '@angular/core'; import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model'; import { generateExampleChannelDTO, generateExampleGroupChatDTO, generateOneToOneChatDTO } from './helpers/conversationExampleModels'; import { MockComponent, MockPipe, MockProvider } from 'ng-mocks'; @@ -29,20 +28,17 @@ import { DocumentationButtonComponent } from 'app/shared/components/documentatio import { getElement } from '../../../helpers/utils/general.utils'; import { SidebarComponent } from 'app/shared/sidebar/sidebar.component'; import { CourseOverviewService } from 'app/overview/course-overview.service'; -import { ChannelSubType } from 'app/entities/metis/conversation/channel.model'; -import { UserPublicInfoDTO } from 'app/core/user/user.model'; import { GroupChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/group-chat-create-dialog/group-chat-create-dialog.component'; -import { AbstractDialogComponent } from 'app/overview/course-conversations/dialogs/abstract-dialog.component'; -import { defaultFirstLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util'; import { NgbCollapseMocksModule } from '../../../helpers/mocks/directive/ngbCollapseMocks.module'; import { NgbTooltipMocksModule } from '../../../helpers/mocks/directive/ngbTooltipMocks.module'; import { SidebarEventService } from 'app/shared/sidebar/sidebar-event.service'; -import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component'; import { SidebarAccordionComponent } from 'app/shared/sidebar/sidebar-accordion/sidebar-accordion.component'; import { GroupChatDTO } from 'app/entities/metis/conversation/group-chat.model'; import { OneToOneChatCreateDialogComponent } from 'app/overview/course-conversations/dialogs/one-to-one-chat-create-dialog/one-to-one-chat-create-dialog.component'; -import { ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component'; +import { ChannelAction, ChannelsOverviewDialogComponent } from 'app/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component'; import { ProfileService } from 'app/shared/layouts/profiles/profile.service'; +import { ChannelsCreateDialogComponent } from 'app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component'; +import { ChannelDTO } from 'app/entities/metis/conversation/channel.model'; const examples: (ConversationDTO | undefined)[] = [undefined, generateOneToOneChatDTO({}), generateExampleGroupChatDTO({}), generateExampleChannelDTO({})]; @@ -56,8 +52,8 @@ examples.forEach((activeConversation) => { let postsSubject: BehaviorSubject; let acceptCodeOfConductSpy: jest.SpyInstance; let setActiveConversationSpy: jest.SpyInstance; - let sidebarEventService: SidebarEventService; let metisConversationService: MetisConversationService; + let modalService: NgbModal; beforeEach(waitForAsync(() => { queryParamsSubject = new BehaviorSubject(convertToParamMap({})); @@ -73,7 +69,6 @@ examples.forEach((activeConversation) => { MockComponent(ButtonComponent), MockComponent(SidebarComponent), MockComponent(CourseWideSearchComponent), - MockComponent(AccordionAddOptionsComponent), MockComponent(SidebarAccordionComponent), MockPipe(ArtemisTranslatePipe), MockPipe(HtmlForMarkdownPipe), @@ -112,7 +107,6 @@ examples.forEach((activeConversation) => { }, }); - sidebarEventService = TestBed.inject(SidebarEventService); metisConversationService = TestBed.inject(MetisConversationService); Object.defineProperty(metisConversationService, 'isServiceSetup$', { get: () => new BehaviorSubject(true).asObservable() }); @@ -135,12 +129,10 @@ examples.forEach((activeConversation) => { postsSubject = new BehaviorSubject([]); jest.spyOn(metisConversationService, 'course', 'get').mockReturnValue(course); jest.spyOn(metisConversationService, 'activeConversation$', 'get').mockReturnValue(new BehaviorSubject(activeConversation).asObservable()); - jest.spyOn(sidebarEventService, 'emitSidebarAccordionPlusClickedEvent').mockImplementation((groupKey: string) => { - component.onAccordionPlusButtonPressed(groupKey); - }); setActiveConversationSpy = jest.spyOn(metisConversationService, 'setActiveConversation'); acceptCodeOfConductSpy = jest.spyOn(metisConversationService, 'acceptCodeOfConduct'); jest.spyOn(metisService, 'posts', 'get').mockReturnValue(postsSubject.asObservable()); + modalService = TestBed.inject(NgbModal); })); afterEach(() => { @@ -155,6 +147,57 @@ examples.forEach((activeConversation) => { expect(component.activeConversation).toEqual(activeConversation); }); + describe('Dialog Opening', () => { + const expectedResults = [undefined, true]; + const mockModalRef: Partial = { + componentInstance: { + course: {}, + initialize: jest.fn(), + }, + }; + + beforeEach(() => { + // Set a mock course with id 1 + component.course = { id: 1 } as Course; + }); + + it('should open the group chat creation dialog', fakeAsync(() => { + mockModalRef.result = Promise.resolve(undefined); + const spy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as NgbModalRef); + component.openCreateGroupChatDialog(); + tick(); + expect(spy).toHaveBeenCalledExactlyOnceWith(GroupChatCreateDialogComponent, expect.anything()); + })); + + it('should open the one-to-one chat creation dialog', fakeAsync(() => { + const spy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as NgbModalRef); + component.openCreateOneToOneChatDialog(); + tick(); + expect(spy).toHaveBeenCalledExactlyOnceWith(OneToOneChatCreateDialogComponent, expect.anything()); + })); + + it('should open the channel overview dialog', fakeAsync(() => { + mockModalRef.result = Promise.resolve(expectedResults); + const spy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as NgbModalRef); + component.openChannelOverviewDialog(); + tick(); + expect(spy).toHaveBeenCalledExactlyOnceWith(ChannelsOverviewDialogComponent, expect.anything()); + expect(mockModalRef.componentInstance.initialize).toHaveBeenCalled(); + })); + + it('should open the create channel dialog when onCreateChannelPressed is called', fakeAsync(() => { + mockModalRef.result = Promise.resolve(expectedResults); + const spy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as NgbModalRef); + + component.openCreateChannelDialog(); + tick(); + + expect(spy).toHaveBeenCalledExactlyOnceWith(ChannelsCreateDialogComponent, expect.anything()); + expect(mockModalRef.componentInstance.course).toEqual(course); + expect(mockModalRef.componentInstance.initialize).toHaveBeenCalled(); + })); + }); + it('should update thread in post', fakeAsync(() => { fixture.detectChanges(); component.postInThread = { id: 1, content: 'loremIpsum' } as Post; @@ -245,101 +288,70 @@ examples.forEach((activeConversation) => { expect(setActiveConversationSpy).toHaveBeenCalled(); }); - it('getChannelSubType method should return correct SubType', () => { - expect(component.getChannelSubType('exerciseChannels')).toEqual(ChannelSubType.EXERCISE); - expect(component.getChannelSubType('examChannels')).toEqual(ChannelSubType.EXAM); - expect(component.getChannelSubType('generalChannels')).toEqual(ChannelSubType.GENERAL); - expect(component.getChannelSubType('lectureChannels')).toEqual(ChannelSubType.LECTURE); - }); + describe('performChannelAction', () => { + let channelAction: ChannelAction; + let channel: ChannelDTO; - it('onAccordionPlusButtonPressed method should call openCreateGroupChatDialog when groupKey is groupChats', () => { - const createGroupChatSpy = jest.spyOn(component, 'openCreateGroupChatDialog').mockImplementation(); - component.onAccordionPlusButtonPressed('groupChats'); - expect(createGroupChatSpy).toHaveBeenCalled(); - }); + beforeEach(() => { + channel = new ChannelDTO(); + channel.id = 123; + channel.name = 'Test Channel'; - it('onAccordionPlusButtonPressed method should call openCreateOneToOneChatDialog when groupKey is directMessages', () => { - const createDirectMessageSpy = jest.spyOn(component, 'openCreateOneToOneChatDialog').mockImplementation(); - component.onAccordionPlusButtonPressed('directMessages'); - expect(createDirectMessageSpy).toHaveBeenCalled(); - }); + channelAction = { + action: 'create', + channel, + }; - it('onAccordionPlusButtonPressed method should call openChannelOverviewDialog when groupKey is any channelType', () => { - const openChannelOverviewDialogSpy = jest.spyOn(component, 'openChannelOverviewDialog').mockImplementation(); - component.onAccordionPlusButtonPressed('generalChannels'); - expect(openChannelOverviewDialogSpy).toHaveBeenCalledWith('generalChannels'); - component.onAccordionPlusButtonPressed('examChannels'); - expect(openChannelOverviewDialogSpy).toHaveBeenCalledWith('examChannels'); - component.onAccordionPlusButtonPressed('lectureChannels'); - expect(openChannelOverviewDialogSpy).toHaveBeenCalledWith('lectureChannels'); - component.onAccordionPlusButtonPressed('exerciseChannels'); - expect(openChannelOverviewDialogSpy).toHaveBeenCalledWith('exerciseChannels'); - component.onAccordionPlusButtonPressed('randomInputShouldAddedToGeneralChannels'); - expect(openChannelOverviewDialogSpy).toHaveBeenCalledWith('generalChannels'); - }); + component.createChannelFn = undefined; + component.ngOnInit(); - it('should open create group chat dialog when button is pressed', fakeAsync(() => { - const createGroupChatSpy = jest.spyOn(metisConversationService, 'createGroupChat').mockReturnValue(EMPTY); - createConversationDialogTest([new UserPublicInfoDTO()], GroupChatCreateDialogComponent, 'groupChats'); - fixture.whenStable().then(() => { - expect(createGroupChatSpy).toHaveBeenCalledOnce(); + component.createChannelFn = jest.fn().mockReturnValue(EMPTY); + jest.spyOn(component, 'prepareSidebarData').mockImplementation(); }); - })); - it('should open one to one chat dialog when button is pressed', fakeAsync(() => { - const createOneToOneChatSpy = jest.spyOn(metisConversationService, 'createOneToOneChat').mockReturnValue(EMPTY); - const chatPartner = new UserPublicInfoDTO(); - chatPartner.login = 'test'; - createConversationDialogTest(chatPartner, OneToOneChatCreateDialogComponent, 'directMessages'); - fixture.whenStable().then(() => { - expect(createOneToOneChatSpy).toHaveBeenCalledOnce(); + it('should call createChannelFn with the provided channel', () => { + component.performChannelAction(channelAction); + expect(component.createChannelFn).toHaveBeenCalledWith(channel); }); - })); - it('should open channel overview dialog when button is pressed', fakeAsync(() => { - fixture.detectChanges(); - tick(301); - const modalService = TestBed.inject(NgbModal); - const mockModalRef = { - componentInstance: { - course: undefined, - createChannelFn: undefined, - initialize: () => {}, - }, - result: Promise.resolve([new GroupChatDTO(), true]), - }; - const openDialogSpy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as unknown as NgbModalRef); - component.onAccordionPlusButtonPressed('generalChannels'); + it('should call prepareSidebarData on successful completion', () => { + component.createChannelFn = jest.fn().mockReturnValue({ + pipe: () => ({ + subscribe: ({ complete }: any) => { + complete(); + }, + }), + }); - tick(301); - fixture.whenStable().then(() => { - expect(openDialogSpy).toHaveBeenCalledOnce(); - expect(openDialogSpy).toHaveBeenCalledWith(ChannelsOverviewDialogComponent, defaultFirstLayerDialogOptions); - expect(mockModalRef.componentInstance.course).toEqual(course); + component.performChannelAction(channelAction); + expect(component.prepareSidebarData).toHaveBeenCalled(); }); - })); - function createConversationDialogTest(modalReturnValue: any, dialog: Type, channelType: string) { - fixture.detectChanges(); - tick(301); - const modalService = TestBed.inject(NgbModal); - const mockModalRef = { - componentInstance: { - course: undefined, - initialize: () => {}, - }, - result: Promise.resolve(modalReturnValue), - }; - const openDialogSpy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as unknown as NgbModalRef); - fixture.detectChanges(); + it('should log an error if createChannelFn throws an error', () => { + const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(); - sidebarEventService.emitSidebarAccordionPlusClickedEvent(channelType); - tick(301); - fixture.whenStable().then(() => { - expect(openDialogSpy).toHaveBeenCalledOnce(); - expect(openDialogSpy).toHaveBeenCalledWith(dialog, defaultFirstLayerDialogOptions); - expect(mockModalRef.componentInstance.course).toEqual(course); + component.createChannelFn = jest.fn().mockReturnValue({ + pipe: () => ({ + subscribe: ({ error }: any) => { + error('Test Error'); + }, + }), + }); + + component.performChannelAction(channelAction); + expect(consoleErrorSpy).toHaveBeenCalledWith('Error creating channel:', 'Test Error'); + + consoleErrorSpy.mockRestore(); + }); + + it('should not call createChannelFn or prepareSidebarData if createChannelFn is undefined', () => { + component.createChannelFn = undefined; + const prepareSidebarDataSpy = jest.spyOn(component, 'prepareSidebarData'); + component.performChannelAction(channelAction); + expect(component.createChannelFn).toBeUndefined(); + // Since createChannelFn is undefined, prepareSidebarData should not be called + expect(prepareSidebarDataSpy).not.toHaveBeenCalled(); }); - } + }); }); }); diff --git a/src/test/javascript/spec/component/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.spec.ts b/src/test/javascript/spec/component/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.spec.ts index ac930363fa6a..3cc001fce612 100644 --- a/src/test/javascript/spec/component/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.spec.ts +++ b/src/test/javascript/spec/component/overview/course-conversations/dialogs/channels-overview-dialog/channels-overview-dialog.component.spec.ts @@ -12,11 +12,9 @@ import { generateExampleChannelDTO } from '../../helpers/conversationExampleMode import { ChannelService } from 'app/shared/metis/conversations/channel.service'; import { ConversationService } from 'app/shared/metis/conversations/conversation.service'; import { AlertService } from 'app/core/util/alert.service'; -import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; +import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { HttpResponse } from '@angular/common/http'; import { By } from '@angular/platform-browser'; -import { ChannelsCreateDialogComponent } from 'app/overview/course-conversations/dialogs/channels-create-dialog/channels-create-dialog.component'; -import { defaultSecondLayerDialogOptions } from 'app/overview/course-conversations/other/conversation.util'; import { FaIconComponent } from '@fortawesome/angular-fontawesome'; import { NgbCollapseMocksModule } from '../../../../../helpers/mocks/directive/ngbCollapseMocks.module'; @@ -107,8 +105,7 @@ examples.forEach((exampleChannel) => { expect(component).toBeTruthy(); expect(getChannelsOfCourseSpy).toHaveBeenCalledWith(course.id); expect(getChannelsOfCourseSpy).toHaveBeenCalledOnce(); - expect(component.noOfChannels).toBe(3); - expect(component.otherChannels).toHaveLength(3); + expect(component.noOfChannels).toBe(6); expect(fixture.nativeElement.querySelectorAll('jhi-channel-item')).toHaveLength(6); expect(channelItems).toHaveLength(6); expect(channelItems[0].channel).toEqual(channelOne); @@ -156,46 +153,5 @@ examples.forEach((exampleChannel) => { expect(component.channelModificationPerformed).toBeTrue(); })); } - - it('should not show create channel button if user is missing the permission', fakeAsync(() => { - canCreateChannel.mockReturnValue(false); - fixture.detectChanges(); - expect(fixture.debugElement.nativeElement.querySelector('#createChannel')).toBeFalsy(); - })); - - if (allowChannelCreation) { - it('should open create channel dialog when button is pressed', fakeAsync(() => { - const modalService = TestBed.inject(NgbModal); - const mockModalRef = { - componentInstance: { course: undefined, initialize: () => {} }, - result: Promise.resolve(new ChannelDTO()), - }; - const openDialogSpy = jest.spyOn(modalService, 'open').mockReturnValue(mockModalRef as unknown as NgbModalRef); - fixture.detectChanges(); - - const createChannelButton = fixture.debugElement.nativeElement.querySelector('#createChannel'); - createChannelButton.click(); - tick(501); - fixture.whenStable().then(() => { - expect(openDialogSpy).toHaveBeenCalledOnce(); - expect(openDialogSpy).toHaveBeenCalledWith(ChannelsCreateDialogComponent, defaultSecondLayerDialogOptions); - expect(mockModalRef.componentInstance.course).toEqual(course); - }); - })); - } else { - it('should hide create channel button if creation is not allowed', () => { - const createChannelButton = fixture.debugElement.nativeElement.querySelector('#createChannel'); - expect(createChannelButton).toBeNull(); - }); - } - - it('should toggle other channels on click', () => { - expect(component.otherChannelsAreCollapsed).toBeTrue(); - - const otherChannels = fixture.debugElement.nativeElement.querySelector('.other-channels'); - otherChannels.click(); - - expect(component.otherChannelsAreCollapsed).toBeFalse(); - }); }); }); diff --git a/src/test/javascript/spec/component/shared/sidebar/accordion-add-options.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/accordion-add-options.component.spec.ts deleted file mode 100644 index 3bd63df2e611..000000000000 --- a/src/test/javascript/spec/component/shared/sidebar/accordion-add-options.component.spec.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; -import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component'; -import { MockComponent, MockProvider } from 'ng-mocks'; -import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; -import { FaIconComponent } from '@fortawesome/angular-fontawesome'; -import { NgbCollapseMocksModule } from '../../../helpers/mocks/directive/ngbCollapseMocks.module'; -import { NgbTooltipMocksModule } from '../../../helpers/mocks/directive/ngbTooltipMocks.module'; -import { SidebarEventService } from 'app/shared/sidebar/sidebar-event.service'; - -describe('AccordionAddOptionsComponent', () => { - let component: AccordionAddOptionsComponent; - let fixture: ComponentFixture; - let sidebarEventService: SidebarEventService; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [NgbCollapseMocksModule, NgbTooltipMocksModule], - declarations: [AccordionAddOptionsComponent, MockComponent(FaIconComponent)], - providers: [MockProvider(NgbModal), MockProvider(SidebarEventService)], - }).compileComponents(); - - sidebarEventService = TestBed.inject(SidebarEventService); - fixture = TestBed.createComponent(AccordionAddOptionsComponent); - component = fixture.componentInstance; - - jest.spyOn(sidebarEventService, 'emitSidebarAccordionPlusClickedEvent').mockImplementation(() => {}); - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - it('should call emitSidebarAccordionPlusClickedEvent when button is pressed', fakeAsync(() => { - component.groupKey = 'test'; - fixture.detectChanges(); - const emitSidebarAccordionPlusClickedEventSpy = jest.spyOn(sidebarEventService, 'emitSidebarAccordionPlusClickedEvent'); - - const dialogOpenButton = fixture.debugElement.nativeElement.querySelector('#plusButton-test'); - dialogOpenButton.click(); - tick(301); - - expect(emitSidebarAccordionPlusClickedEventSpy).toHaveBeenCalledWith('test'); - })); -}); diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts index 68eddc94218d..39d8e23eb473 100644 --- a/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts +++ b/src/test/javascript/spec/component/shared/sidebar/sidebar-accordion.component.spec.ts @@ -8,16 +8,14 @@ import { SearchFilterPipe } from 'app/shared/pipes/search-filter.pipe'; import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component'; import { ArtemisTranslatePipe } from 'app/shared/pipes/artemis-translate.pipe'; import { MockComponent, MockModule, MockPipe } from 'ng-mocks'; -import { DebugElement } from '@angular/core'; -import { By } from '@angular/platform-browser'; import { NgbCollapseModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap'; import { RouterModule } from '@angular/router'; -import { AccordionAddOptionsComponent } from 'app/shared/sidebar/accordion-add-options/accordion-add-options.component'; +import { DebugElement } from '@angular/core'; +import { By } from '@angular/platform-browser'; describe('SidebarAccordionComponent', () => { let component: SidebarAccordionComponent; let fixture: ComponentFixture; - let debugElement: DebugElement; beforeEach(() => { TestBed.configureTestingModule({ @@ -25,7 +23,6 @@ describe('SidebarAccordionComponent', () => { declarations: [ SidebarAccordionComponent, SidebarCardMediumComponent, - MockComponent(AccordionAddOptionsComponent), SidebarCardItemComponent, SidebarCardDirective, SearchFilterPipe, @@ -39,7 +36,6 @@ describe('SidebarAccordionComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(SidebarAccordionComponent); component = fixture.componentInstance; - debugElement = fixture.debugElement; component.groupedData = { current: { @@ -73,11 +69,19 @@ describe('SidebarAccordionComponent', () => { }); it('should toggle collapse state when group header is clicked', () => { - const groupHeader = debugElement.query(By.css('#test-accordion-item-header-current')); - groupHeader.triggerEventHandler('click', null); + const groupKey = 'current'; + const initialCollapseState = component.collapseState[groupKey]; + + component.searchValue = ''; fixture.detectChanges(); - expect(component.collapseState['current']).toBeTrue(); + const headerElement: DebugElement = fixture.debugElement.query(By.css('#test-accordion-item-header-' + groupKey)); + expect(headerElement).toBeTruthy(); + + headerElement.triggerEventHandler('click', null); + fixture.detectChanges(); + + expect(component.collapseState[groupKey]).toBe(!initialCollapseState); }); it('should call expandAll when searchValue changes to a non-empty string', () => { @@ -122,18 +126,17 @@ describe('SidebarAccordionComponent', () => { component.ngOnChanges(); fixture.detectChanges(); - const expectedDisplayedDiv = 2; - const expectedHiddenDiv = 0; - const elementIdDisplayedDiv = `#test-accordion-item-container-${expectedDisplayedDiv}`; - const elementIdHiddenDiv = `#test-accordion-item-container-${expectedHiddenDiv}`; + const displayedDivIndex = 2; + const elementIdDisplayedDiv = `#test-accordion-item-container-${displayedDivIndex}`; const itemDisplayedDiv: HTMLElement = fixture.nativeElement.querySelector(elementIdDisplayedDiv); - const itemHiddeniv: HTMLElement = fixture.nativeElement.querySelector(elementIdHiddenDiv); - // Check if the div exists and has the 'd-none' class - expect(itemDisplayedDiv).toBeTruthy(); // Ensure the element is found + expect(itemDisplayedDiv).toBeTruthy(); expect(itemDisplayedDiv.classList.contains('d-none')).toBeFalse(); - expect(itemHiddeniv).toBeTruthy(); // Ensure the element is found - expect(itemHiddeniv.classList.contains('d-none')).toBeTrue(); + + const elementIdHiddenDiv = `#test-accordion-item-container-0`; + const itemHiddenDiv: HTMLElement = fixture.nativeElement.querySelector(elementIdHiddenDiv); + + expect(itemHiddenDiv).toBeNull(); }); it('should expand the group containing the selected item', () => { diff --git a/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts b/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts index 55ad12ae7776..77008de55231 100644 --- a/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts +++ b/src/test/javascript/spec/component/shared/sidebar/sidebar.component.spec.ts @@ -173,6 +173,44 @@ describe('SidebarComponent', () => { }); }); + describe('Chat and Channel Creation Methods', () => { + beforeEach(() => { + fixture.detectChanges(); + }); + + it('should emit onDirectChatPressed and set showChatDropdown to false when createDirectChat is called', () => { + jest.spyOn(component.onDirectChatPressed, 'emit'); + + component.createDirectChat(); + + expect(component.onDirectChatPressed.emit).toHaveBeenCalledOnce(); + }); + + it('should emit onGroupChatPressed and set showChatDropdown to false when createGroupChat is called', () => { + jest.spyOn(component.onGroupChatPressed, 'emit'); + + component.createGroupChat(); + + expect(component.onGroupChatPressed.emit).toHaveBeenCalledOnce(); + }); + + it('should emit onBrowsePressed and set showChannelDropdown to false when browseChannels is called', () => { + jest.spyOn(component.onBrowsePressed, 'emit'); + + component.browseChannels(); + + expect(component.onBrowsePressed.emit).toHaveBeenCalledOnce(); + }); + + it('should emit onCreateChannelPressed and set showChannelDropdown to false when createNewChannel is called', () => { + jest.spyOn(component.onCreateChannelPressed, 'emit'); + + component.createNewChannel(); + + expect(component.onCreateChannelPressed.emit).toHaveBeenCalledOnce(); + }); + }); + describe('openFilterExercisesDialog', () => { it('should subscribe to filterApplied from modal', () => { const filterAppliedEmitter = new EventEmitter(); diff --git a/src/test/javascript/spec/directive/sidebar-card.directive.spec.ts b/src/test/javascript/spec/directive/sidebar-card.directive.spec.ts index d23d8c1f7f5a..6c47b36f7b9a 100644 --- a/src/test/javascript/spec/directive/sidebar-card.directive.spec.ts +++ b/src/test/javascript/spec/directive/sidebar-card.directive.spec.ts @@ -72,6 +72,9 @@ describe('SidebarCardDirective', () => { it('should create SidebarCardSmallComponent when size is "S"', () => { const createComponentSpy = jest.spyOn(component.directive.viewContainerRef, 'createComponent'); component.size = 'S'; + component.directive.sidebarItem = { title: 'exercise-TestTitle', id: '1', size: 'S' }; + component.directive.groupKey = 'exerciseChannels'; + fixture.detectChanges(); component.directive.ngOnInit(); @@ -81,6 +84,8 @@ describe('SidebarCardDirective', () => { it('should create SidebarCardSmallComponent when size is "M"', () => { const createComponentSpy = jest.spyOn(component.directive.viewContainerRef, 'createComponent'); component.size = 'M'; + component.directive.sidebarItem = { title: 'exercise-TestTitle', id: '1', size: 'M' }; + component.directive.groupKey = 'exerciseChannels'; fixture.detectChanges(); component.directive.ngOnInit(); @@ -90,9 +95,67 @@ describe('SidebarCardDirective', () => { it('should create SidebarCardSmallComponent when size is "L"', () => { const createComponentSpy = jest.spyOn(component.directive.viewContainerRef, 'createComponent'); component.size = 'L'; + component.directive.sidebarItem = { title: 'exercise-TestTitle', id: '1', size: 'L' }; + component.directive.groupKey = 'exerciseChannels'; fixture.detectChanges(); component.directive.ngOnInit(); expect(createComponentSpy).toHaveBeenCalledWith(SidebarCardLargeComponent); }); + + it('should remove the correct prefix from the name when groupKey is in channelTypes', () => { + const prefixes = ['exercise-', 'lecture-', 'exam-']; + const channelTypes = ['exerciseChannels', 'lectureChannels', 'examChannels']; + + for (let i = 0; i < prefixes.length; i++) { + const prefix = prefixes[i]; + const groupKey = channelTypes[i]; + const nameWithPrefix = prefix + 'TestName'; + + component.directive.groupKey = groupKey; + const result = component.directive.removeChannelPrefix(nameWithPrefix); + + expect(result).toBe('TestName'); + } + }); + + it('should not remove the prefix if groupKey is not in channelTypes', () => { + const nameWithPrefix = 'exercise-TestName'; + component.directive.groupKey = 'otherGroup'; + const result = component.directive.removeChannelPrefix(nameWithPrefix); + + expect(result).toBe(nameWithPrefix); + }); + + it('should not remove the prefix if name does not start with any of the prefixes', () => { + const nameWithoutPrefix = 'TestName'; + component.directive.groupKey = 'exerciseChannels'; + const result = component.directive.removeChannelPrefix(nameWithoutPrefix); + + expect(result).toBe(nameWithoutPrefix); + }); + + it('should handle empty name input', () => { + const emptyName = ''; + component.directive.groupKey = 'exerciseChannels'; + const result = component.directive.removeChannelPrefix(emptyName); + + expect(result).toBe(''); + }); + + it('should handle undefined name input', () => { + const undefinedName = undefined as unknown as string; + component.directive.groupKey = 'exerciseChannels'; + const result = component.directive.removeChannelPrefix(undefinedName); + + expect(result).toBe(undefinedName); + }); + + it('should handle null name input', () => { + const nullName = null as unknown as string; + component.directive.groupKey = 'exerciseChannels'; + const result = component.directive.removeChannelPrefix(nullName); + + expect(result).toBe(nullName); + }); });