Skip to content

Commit

Permalink
add inject and signals
Browse files Browse the repository at this point in the history
  • Loading branch information
@asliayk
asliayk committed Dec 9, 2024
1 parent 9672a77 commit 43d71ed
Show file tree
Hide file tree
Showing 14 changed files with 168 additions and 153 deletions.
2 changes: 1 addition & 1 deletion ...onversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html
View file
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
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
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 { canChangeChannelProperties, canChangeGroupChatProperties } from 'app/sh
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 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
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 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
}

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

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

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

this.groupChatService
.update(this.course.id!, groupChat.id!, updateDTO)
.update(this.course()?.id!, groupChat.id!, updateDTO)
.pipe(
map((res: HttpResponse<GroupChatDTO>) => res.body),
takeUntil(this.ngUnsubscribe),
Expand All @@ -192,7 +191,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
const updateDTO = new ChannelDTO();
updateDTO[propertyName] = updateValue;
this.channelService
.update(this.course.id!, channel.id!, updateDTO)
.update(this.course()?.id!, channel.id!, updateDTO)
.pipe(
map((res: HttpResponse<ChannelDTO>) => res.body),
takeUntil(this.ngUnsubscribe),
Expand All @@ -209,4 +208,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
},
});
}

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
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" />
}
{{ 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
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 { canGrantChannelModeratorRole, canRemoveUsersFromConversation, canRevoke
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 @@ import { catchError } from 'rxjs/operators';
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 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
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;
}
});
}
Expand All @@ -117,7 +109,7 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {

openGrantChannelModeratorRoleDialog(event: MouseEvent) {
event.stopPropagation();
const channel = getAsChannelDTO(this.activeConversation);
const channel = getAsChannelDTO(this.activeConversation()!);
if (!channel) {
return;
}
Expand All @@ -131,13 +123,13 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
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!]);
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 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
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!]);
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 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
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!]);
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 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
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!]);
this.openConfirmationDialog(translationKeys, translationParams, confirmedCallback);
}

Expand Down Expand Up @@ -235,9 +227,9 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
}

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 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
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

0 comments on commit 43d71ed

Please sign in to comment.