Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Development: Migrate client code for conversation detail tabs #9973

Merged
merged 4 commits into from
Dec 14, 2024
Merged

Development: Migrate client code for conversation detail tabs #9973

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
43d71ed
add inject and signals
asliayk Dec 9, 2024
5123fee
Merge branch 'develop' into chore/conversation-detail-tabs-migration
asliayk Dec 9, 2024
a75f02c
refactor
asliayk Dec 9, 2024
087351f
Merge remote-tracking branch 'origin/chore/conversation-detail-tabs-m…
asliayk Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...onversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ <h4 class="modal-title">
<div class="modal-body">
@switch (selectedTab) {
@case (Tabs.MEMBERS) {
<jhi-conversation-members [course]="course" [activeConversation]="activeConversation" (changesPerformed)="changesWerePerformed = true" />
<jhi-conversation-members [course]="course" [activeConversationInput]="activeConversation" (changesPerformed)="changesWerePerformed = true" />
}
@case (Tabs.INFO) {
<jhi-conversation-info [activeConversation]="activeConversation" [course]="course" (changesPerformed)="changesWerePerformed = true" />
Expand Down
14 changes: 7 additions & 7 deletions ...ialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@if (activeConversation && course) {
@if (activeConversation() && course()) {
<div class="container-fluid conversation-info">
<div class="row info-container">
<!-- Name (Only for Channels and Group Chats)-->
@if (getAsChannelOrGroupChat(activeConversation); as channelOrGroupChat) {
@if (getAsChannelOrGroupChat(activeConversation()); as channelOrGroupChat) {
<div id="name-section" class="col-12 info-section" [class.interactive]="!readOnlyMode">
<div class="form-floating">
<textarea
Expand All @@ -29,7 +29,7 @@
</div>
}
<!-- Topic (Only for Channels)-->
@if (getAsChannel(activeConversation); as channel) {
@if (getAsChannel(activeConversation()); as channel) {
<div id="topic-section" class="col-12 info-section" [class.interactive]="!readOnlyMode">
<div class="form-floating">
<textarea
Expand All @@ -53,7 +53,7 @@
</div>
}
<!-- Description (Only for Channels)-->
@if (getAsChannel(activeConversation); as channel) {
@if (getAsChannel(activeConversation()); as channel) {
<div id="description-section" class="col-12 info-section" [class.interactive]="!readOnlyMode">
<div class="form-floating">
<textarea
Expand Down Expand Up @@ -82,15 +82,15 @@
<h6 jhiTranslate="artemisApp.dialogs.conversationDetail.infoTab.moreInfo"></h6>
</div>
<ul>
@if (activeConversation.creator) {
@if (activeConversation()?.creator) {
<li>
{{ 'artemisApp.dialogs.conversationDetail.infoTab.createdBy' | artemisTranslate }}:
{{ activeConversation.creator ? getUserLabel(activeConversation.creator) : '' }}
{{ getCreator() ? getUserLabel(getCreator()!) : '' }}
</li>
}
<li>
{{ 'artemisApp.dialogs.conversationDetail.infoTab.createdOn' | artemisTranslate }}:
{{ activeConversation.creationDate ? (activeConversation.creationDate | artemisDate) : '' }}
{{ activeConversation()!.creationDate ? (activeConversation()!.creationDate | artemisDate) : '' }}
</li>
</ul>
</div>
Expand Down
44 changes: 23 additions & 21 deletions .../dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Component, OnDestroy, OnInit, inject, input, output } from '@angular/core';
import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
import { ChannelDTO, getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
import { defaultSecondLayerDialogOptions, getUserLabel } from 'app/overview/course-conversations/other/conversation.util';
Expand All @@ -19,6 +19,7 @@
import { GroupChatDTO, 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 { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';

@Component({
selector: 'jhi-conversation-info',
Expand All @@ -39,27 +40,25 @@
return getAsChannelDTO(conversation) || getAsGroupChatDTO(conversation);
}

@Input()
activeConversation: ConversationDTO;
getCreator(): ConversationUserDTO | null {
return this.activeConversation()?.creator as ConversationUserDTO | null;
}

@Input()
course: Course;
activeConversation = input.required<ConversationDTO>();
course = input<Course>();
changesPerformed = output<void>();

@Output()
changesPerformed = new EventEmitter<void>();
private channelService = inject(ChannelService);
private groupChatService = inject(GroupChatService);
private modalService = inject(NgbModal);
private alertService = inject(AlertService);

readOnlyMode = false;
constructor(
private channelService: ChannelService,
private groupChatService: GroupChatService,
private modalService: NgbModal,
private alertService: AlertService,
) {}

ngOnInit(): void {
if (this.activeConversation) {
if (getAsChannelDTO(this.activeConversation)) {
this.readOnlyMode = !!getAsChannelDTO(this.activeConversation)?.isArchived;
if (this.activeConversation()) {
if (getAsChannelDTO(this.activeConversation())) {
this.readOnlyMode = !!getAsChannelDTO(this.activeConversation())?.isArchived;
}
}
}
Expand All @@ -74,7 +73,7 @@
}

openEditNameModal(event: MouseEvent) {
const channelOrGroupChat = this.getAsChannelOrGroupChat(this.activeConversation);
const channelOrGroupChat = this.getAsChannelOrGroupChat(this.activeConversation()!);
if (!channelOrGroupChat) {
return;
}
Expand All @@ -93,7 +92,7 @@
}

openEditTopicModal(event: MouseEvent) {
const channel = getAsChannelDTO(this.activeConversation);
const channel = getAsChannelDTO(this.activeConversation());
if (!channel) {
return;
}
Expand All @@ -112,7 +111,7 @@
}

openDescriptionTopicModal(event: MouseEvent) {
const channel = getAsChannelDTO(this.activeConversation);
const channel = getAsChannelDTO(this.activeConversation());
if (!channel) {
return;
}
Expand Down Expand Up @@ -174,7 +173,7 @@
updateDTO[propertyName] = updateValue;

this.groupChatService
.update(this.course.id!, groupChat.id!, updateDTO)
.update(this.course()?.id!, groupChat.id!, updateDTO)

Check warning on line 176 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
asliayk marked this conversation as resolved.
Show resolved Hide resolved
.pipe(
map((res: HttpResponse<GroupChatDTO>) => res.body),
takeUntil(this.ngUnsubscribe),
Expand All @@ -192,7 +191,7 @@
const updateDTO = new ChannelDTO();
updateDTO[propertyName] = updateValue;
this.channelService
.update(this.course.id!, channel.id!, updateDTO)
.update(this.course()?.id!, channel.id!, updateDTO)

Check warning on line 194 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
.pipe(
map((res: HttpResponse<ChannelDTO>) => res.body),
takeUntil(this.ngUnsubscribe),
Expand All @@ -209,4 +208,7 @@
},
});
}

protected readonly ConversationDTO = ConversationDTO;
protected readonly ConversationUserDTO = ConversationUserDTO;
}
6 changes: 3 additions & 3 deletions .../tabs/conversation-members/conversation-member-row/conversation-member-row.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@if (activeConversation && course) {
@if (activeConversation() && course()) {
<div class="d-flex justify-content-between align-items-center conversation-member-row" (mouseleave)="$event.stopPropagation(); userDropdown.close()">
<span class="d-inline-block">
<jhi-profile-picture
Expand All @@ -11,11 +11,11 @@
[imageUrl]="userImageUrl"
>
</jhi-profile-picture>
@if (isChannel(activeConversation) && conversationMember?.isChannelModerator) {
@if (isChannel(activeConversation()!) && conversationMember()?.isChannelModerator) {
<fa-icon [icon]="faUserGear" [ngbTooltip]="'artemisApp.dialogs.conversationDetail.memberTab.memberRow.channelModeratorTooltip' | artemisTranslate" />
asliayk marked this conversation as resolved.
Show resolved Hide resolved
}
{{ userLabel }}
@if (!conversationMember.isStudent) {
@if (!conversationMember()?.isStudent) {
<fa-icon class="ms-1 text-secondary" [icon]="userIcon" [ngbTooltip]="userTooltip" />
}
</span>
Expand Down
82 changes: 37 additions & 45 deletions ...og/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
import { Component, HostBinding, OnDestroy, OnInit, inject, input, output } from '@angular/core';
import { faEllipsis, faUser, faUserCheck, faUserGear, faUserGraduate } from '@fortawesome/free-solid-svg-icons';
import { User } from 'app/core/user/user.model';
import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
Expand All @@ -10,7 +10,7 @@
import { defaultSecondLayerDialogOptions, getUserLabel } from 'app/overview/course-conversations/other/conversation.util';
import { ConversationUserDTO } from 'app/entities/metis/conversation/conversation-user-dto.model';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
import { ChannelDTO, getAsChannelDTO, isChannelDTO } from 'app/entities/metis/conversation/channel.model';
import { TranslateService } from '@ngx-translate/core';
import { GenericConfirmationDialogComponent } from 'app/overview/course-conversations/dialogs/generic-confirmation-dialog/generic-confirmation-dialog.component';
import { onError } from 'app/shared/util/global.utils';
Expand All @@ -30,17 +30,10 @@
export class ConversationMemberRowComponent implements OnInit, OnDestroy {
private ngUnsubscribe = new Subject<void>();

@Input()
activeConversation: ConversationDTO;

@Input()
course: Course;

@Output()
changePerformed: EventEmitter<void> = new EventEmitter<void>();

@Input()
conversationMember: ConversationUserDTO;
activeConversation = input<ConversationDTO>();
course = input<Course>();
changePerformed = output<void>();
conversationMember = input<ConversationUserDTO>();

idOfLoggedInUser: number;

Expand Down Expand Up @@ -71,40 +64,39 @@
canGrantChannelModeratorRole = canGrantChannelModeratorRole;
canRevokeChannelModeratorRole = canRevokeChannelModeratorRole;
canRemoveUsersFromConversation = canRemoveUsersFromConversation;
constructor(
private accountService: AccountService,
private modalService: NgbModal,
private translateService: TranslateService,
private channelService: ChannelService,
private groupChatService: GroupChatService,
private alertService: AlertService,
) {}

private accountService = inject(AccountService);
private modalService = inject(NgbModal);
private translateService = inject(TranslateService);
private channelService = inject(ChannelService);
private groupChatService = inject(GroupChatService);
private alertService = inject(AlertService);

ngOnInit(): void {
if (this.conversationMember && this.activeConversation) {
if (this.conversationMember() && this.activeConversation()) {
this.accountService.identity().then((loggedInUser: User) => {
this.idOfLoggedInUser = loggedInUser.id!;
if (this.conversationMember.id === this.idOfLoggedInUser) {
if (this.conversationMember()?.id === this.idOfLoggedInUser) {
this.isCurrentUser = true;
}
if (this.conversationMember.id === this.activeConversation?.creator?.id) {
if (this.conversationMember()?.id === this.activeConversation()?.creator?.id) {
this.isCreator = true;
}

this.userImageUrl = this.conversationMember.imageUrl;
this.userId = this.conversationMember.id;
this.userName = this.conversationMember.name;
this.userLabel = getUserLabel(this.conversationMember);
this.userImageUrl = this.conversationMember()?.imageUrl;
this.userId = this.conversationMember()?.id;
this.userName = this.conversationMember()?.name;
this.userLabel = getUserLabel(this.conversationMember()!);
this.setUserAuthorityIconAndTooltip();
// the creator of a channel can not be removed from the channel
this.canBeRemovedFromConversation = !this.isCurrentUser && this.canRemoveUsersFromConversation(this.activeConversation);
if (isChannelDTO(this.activeConversation)) {
this.canBeRemovedFromConversation = !this.isCurrentUser && this.canRemoveUsersFromConversation(this.activeConversation()!);
if (isChannelDTO(this.activeConversation()!)) {
// the creator of a channel can not be removed from the channel
this.canBeRemovedFromConversation = this.canBeRemovedFromConversation && !this.isCreator && !this.activeConversation.isCourseWide;
this.canBeGrantedChannelModeratorRole = this.canGrantChannelModeratorRole(this.activeConversation) && !this.conversationMember.isChannelModerator;
this.canBeRemovedFromConversation = this.canBeRemovedFromConversation && !this.isCreator && !(this.activeConversation() as ChannelDTO)!.isCourseWide;
this.canBeGrantedChannelModeratorRole = this.canGrantChannelModeratorRole(this.activeConversation()!) && !this.conversationMember()?.isChannelModerator;
// the creator of a channel cannot be revoked the channel moderator role
this.canBeRevokedChannelModeratorRole =
this.canRevokeChannelModeratorRole(this.activeConversation) && !this.isCreator && !!this.conversationMember.isChannelModerator;
this.canRevokeChannelModeratorRole(this.activeConversation()!) && !this.isCreator && !!this.conversationMember()?.isChannelModerator;
}
});
}
asliayk marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -117,7 +109,7 @@

openGrantChannelModeratorRoleDialog(event: MouseEvent) {
event.stopPropagation();
const channel = getAsChannelDTO(this.activeConversation);
const channel = getAsChannelDTO(this.activeConversation()!);
if (!channel) {
return;
}
Expand All @@ -131,13 +123,13 @@
channelName: channel.name!,
userName: this.userLabel,
};
const confirmedCallback = () => this.channelService.grantChannelModeratorRole(this.course.id!, channel.id!, [this.conversationMember.login!]);
const confirmedCallback = () => this.channelService.grantChannelModeratorRole(this.course()?.id!, channel.id!, [this.conversationMember()?.login!]);

Check warning on line 126 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong

Check warning on line 126 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
asliayk marked this conversation as resolved.
Show resolved Hide resolved
this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
}

openRevokeChannelModeratorRoleDialog(event: MouseEvent) {
event.stopPropagation();
const channel = getAsChannelDTO(this.activeConversation);
const channel = getAsChannelDTO(this.activeConversation()!);
if (!channel) {
return;
}
Expand All @@ -151,13 +143,13 @@
channelName: channel.name!,
userName: this.userLabel,
};
const confirmedCallback = () => this.channelService.revokeChannelModeratorRole(this.course.id!, channel.id!, [this.conversationMember.login!]);
const confirmedCallback = () => this.channelService.revokeChannelModeratorRole(this.course()?.id!, channel.id!, [this.conversationMember()?.login!]);

Check warning on line 146 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong

Check warning on line 146 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
}

openRemoveFromChannelDialog(event: MouseEvent) {
event.stopPropagation();
const channel = getAsChannelDTO(this.activeConversation);
const channel = getAsChannelDTO(this.activeConversation()!);
if (!channel) {
return;
}
Expand All @@ -182,13 +174,13 @@
userName: this.userLabel,
channelName: channel.name!,
};
const confirmedCallback = () => this.channelService.deregisterUsersFromChannel(this.course.id!, this.activeConversation.id!, [this.conversationMember.login!]);
const confirmedCallback = () => this.channelService.deregisterUsersFromChannel(this.course()?.id!, this.activeConversation()?.id!, [this.conversationMember()?.login!]);

Check warning on line 177 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong

Check warning on line 177 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong

Check warning on line 177 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
}

openRemoveFromGroupChatDialog(event: MouseEvent) {
event.stopPropagation();
const groupChat = getAsGroupChatDTO(this.activeConversation);
const groupChat = getAsGroupChatDTO(this.activeConversation()!);
if (!groupChat) {
return;
}
Expand All @@ -201,7 +193,7 @@
const translationParams = {
userName: this.userLabel,
};
const confirmedCallback = () => this.groupChatService.removeUsersFromGroupChat(this.course.id!, this.activeConversation.id!, [this.conversationMember.login!]);
const confirmedCallback = () => this.groupChatService.removeUsersFromGroupChat(this.course()?.id!, this.activeConversation()?.id!, [this.conversationMember()?.login!]);

Check warning on line 196 in src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

View workflow job for this annotation

GitHub Actions / client-style 

Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong
this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
}

Expand Down Expand Up @@ -235,9 +227,9 @@
}

openRemoveFromConversationDialog(event: MouseEvent) {
if (isChannelDTO(this.activeConversation)) {
if (isChannelDTO(this.activeConversation()!)) {
this.openRemoveFromChannelDialog(event);
} else if (isGroupChatDTO(this.activeConversation)) {
} else if (isGroupChatDTO(this.activeConversation()!)) {
this.openRemoveFromGroupChatDialog(event);
} else {
throw new Error('Unsupported conversation type');
Expand All @@ -247,10 +239,10 @@
setUserAuthorityIconAndTooltip(): void {
const toolTipTranslationPath = 'artemisApp.metis.userAuthorityTooltips.';
// highest authority is displayed
if (this.conversationMember.isInstructor) {
if (this.conversationMember()?.isInstructor) {
this.userIcon = faUserGraduate;
this.userTooltip = this.translateService.instant(toolTipTranslationPath + 'instructor');
} else if (this.conversationMember.isEditor || this.conversationMember.isTeachingAssistant) {
} else if (this.conversationMember()?.isEditor || this.conversationMember()?.isTeachingAssistant) {
this.userIcon = faUserCheck;
this.userTooltip = this.translateService.instant(toolTipTranslationPath + 'tutor');
} else {
Expand Down
Loading
Loading