Development: Migrate client code for conversation detail tabs

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/conversation-detail-dialog.component.html

@@ -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" />

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.html

@@ -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
@@ -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
@@ -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
@@ -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>

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-info/conversation-info.component.ts

@@ -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';
@@ -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',
@@ -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;
             }
         }
     }
@@ -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;
         }
@@ -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;
         }
@@ -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;
         }
@@ -170,11 +169,15 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     private updateGroupChat<K extends keyof GroupChatDTO>(groupChat: GroupChatDTO, propertyName: K, updateValue: GroupChatDTO[K]) {
+        const courseId = this.course()?.id;
+        if (!courseId) {
+            return;
+        }
         const updateDTO = new GroupChatDTO();
         updateDTO[propertyName] = updateValue;
 
         this.groupChatService
-            .update(this.course.id!, groupChat.id!, updateDTO)
+            .update(courseId, groupChat.id!, updateDTO)
             .pipe(
                 map((res: HttpResponse<GroupChatDTO>) => res.body),
                 takeUntil(this.ngUnsubscribe),
@@ -189,10 +192,14 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
     }
 
     private updateChannel<K extends keyof ChannelDTO>(channel: ChannelDTO, propertyName: K, updateValue: ChannelDTO[K]) {
+        const courseId = this.course()?.id;
+        if (!courseId) {
+            return;
+        }
         const updateDTO = new ChannelDTO();
         updateDTO[propertyName] = updateValue;
         this.channelService
-            .update(this.course.id!, channel.id!, updateDTO)
+            .update(courseId, channel.id!, updateDTO)
             .pipe(
                 map((res: HttpResponse<ChannelDTO>) => res.body),
                 takeUntil(this.ngUnsubscribe),
@@ -209,4 +216,7 @@ export class ConversationInfoComponent implements OnInit, OnDestroy {
                 },
             });
     }
+
+    protected readonly ConversationDTO = ConversationDTO;
+    protected readonly ConversationUserDTO = ConversationUserDTO;
 }

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html

@@ -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
@@ -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>