Development: Migrate client code for posting header and footer components

src/main/webapp/app/shared/metis/answer-post/answer-post.component.html

@@ -18,9 +18,9 @@
     }
     @if (!isConsecutive()) {
         <div class="ps-3">
-            <jhi-answer-post-header
+            <jhi-posting-header
                 [posting]="posting"
-                [isReadOnlyMode]="isReadOnlyMode"
+                [readOnlyMode]="isReadOnlyMode"
                 [isCommunicationPage]="isCommunicationPage"
                 [lastReadDate]="lastReadDate"
                 [isDeleted]="isDeleted"

src/main/webapp/app/shared/metis/metis.module.ts

@@ -8,11 +8,10 @@ import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
 import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown-editor.module';
 import { PostingButtonComponent } from 'app/shared/metis/posting-button/posting-button.component';
 import { PostingMarkdownEditorComponent } from 'app/shared/metis/posting-markdown-editor/posting-markdown-editor.component';
-import { AnswerPostHeaderComponent } from 'app/shared/metis/posting-header/answer-post-header/answer-post-header.component';
-import { PostHeaderComponent } from 'app/shared/metis/posting-header/post-header/post-header.component';
+import { PostingHeaderComponent } from 'app/shared/metis/posting-header/posting-header.component';
 import { AnswerPostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component';
 import { PostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component';
-import { PostFooterComponent } from 'app/shared/metis/posting-footer/post-footer/post-footer.component';
+import { PostingFooterComponent } from 'app/shared/metis/posting-footer/posting-footer.component';
 import { PostTagSelectorComponent } from 'app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-tag-selector/post-tag-selector.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
@@ -70,11 +69,10 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
     ],
     declarations: [
         PostingThreadComponent,
-        PostHeaderComponent,
-        AnswerPostHeaderComponent,
+        PostingHeaderComponent,
         PostCreateEditModalComponent,
         PostTagSelectorComponent,
-        PostFooterComponent,
+        PostingFooterComponent,
         AnswerPostCreateEditModalComponent,
         PostingButtonComponent,
         PostingMarkdownEditorComponent,
@@ -93,12 +91,11 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
     ],
     exports: [
         PostingThreadComponent,
-        PostHeaderComponent,
-        AnswerPostHeaderComponent,
+        PostingHeaderComponent,
         PostCreateEditModalComponent,
         PostTagSelectorComponent,
         AnswerPostCreateEditModalComponent,
-        PostFooterComponent,
+        PostingFooterComponent,
         PostingButtonComponent,
         PostingMarkdownEditorComponent,
         PostComponent,

src/main/webapp/app/shared/metis/post/post.component.html

@@ -17,7 +17,7 @@
     }
     @if (!isConsecutive()) {
         <div class="ps-3">
-            <jhi-post-header
+            <jhi-posting-header
                 [previewMode]="previewMode"
                 [readOnlyMode]="readOnlyMode"
                 [posting]="posting"
@@ -147,7 +147,7 @@
         </div>
     }
 </div>
-<jhi-post-footer
+<jhi-posting-footer
     #postFooter
     [readOnlyMode]="readOnlyMode"
     [modalRef]="modalRef"

src/main/webapp/app/shared/metis/post/post.component.ts

@@ -22,7 +22,7 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { ContextInformation, DisplayPriority, PageType, RouteComponents } from '../metis.util';
 import { faBookmark, faBullhorn, faCheckSquare, faComments, faPencilAlt, faSmile, faThumbtack, faTrash } from '@fortawesome/free-solid-svg-icons';
 import dayjs from 'dayjs/esm';
-import { PostFooterComponent } from 'app/shared/metis/posting-footer/post-footer/post-footer.component';
+import { PostingFooterComponent } from 'app/shared/metis/posting-footer/posting-footer.component';
 import { isCommunicationEnabled } from 'app/entities/course.model';
 import { getAsChannelDTO } from 'app/entities/metis/conversation/channel.model';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
@@ -57,7 +57,7 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
     @ViewChild('createAnswerPostModal') createAnswerPostModalComponent: AnswerPostCreateEditModalComponent;
     @ViewChild('createEditModal') createEditModal!: PostCreateEditModalComponent;
     @ViewChild('createEditAnswerPostContainer', { read: ViewContainerRef }) containerRef: ViewContainerRef;
-    @ViewChild('postFooter') postFooterComponent: PostFooterComponent;
+    @ViewChild('postFooter') postFooterComponent: PostingFooterComponent;
     showReactionSelector = false;
     @ViewChild('emojiPickerTrigger') emojiPickerTrigger!: CdkOverlayOrigin;
     static activeDropdownPost: PostComponent | null = null;

src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.html → src/main/webapp/app/shared/metis/posting-footer/posting-footer.component.html

@@ -1,10 +1,10 @@
-@if (showAnswers) {
+@if (showAnswers()) {
     <div class="d-flex align-items-center mt-2">
         <div class="fs-x-small fw-900 me-2">
             {{
-                sortedAnswerPosts.length === 1
+                sortedAnswerPosts().length === 1
                     ? ('artemisApp.metis.singleAnswer' | artemisTranslate)
-                    : ('artemisApp.metis.multipleAnswers' | artemisTranslate: { number: sortedAnswerPosts.length })
+                    : ('artemisApp.metis.multipleAnswers' | artemisTranslate: { number: sortedAnswerPosts().length })
             }}
         </div>
         <div class="flex-grow-1">
@@ -15,17 +15,17 @@
         @for (group of groupedAnswerPosts; track trackGroupByFn($index, group)) {
             @for (answerPost of group.posts; track trackPostByFn($index, answerPost)) {
                 <jhi-answer-post
-                    [lastReadDate]="lastReadDate"
-                    [isReadOnlyMode]="readOnlyMode"
+                    [lastReadDate]="lastReadDate()"
+                    [isReadOnlyMode]="readOnlyMode()"
                     [posting]="answerPost"
                     [isConsecutive]="answerPost.isConsecutive || false"
                     [isLastAnswer]="isLastPost(group, answerPost)"
-                    [isCommunicationPage]="isCommunicationPage"
-                    [isThreadSidebar]="isThreadSidebar"
+                    [isCommunicationPage]="isCommunicationPage()"
+                    [isThreadSidebar]="isThreadSidebar()"
                     (openPostingCreateEditModal)="createAnswerPostModal.open()"
                     (userReferenceClicked)="userReferenceClicked.emit($event)"
                     (channelReferenceClicked)="channelReferenceClicked.emit($event)"
-                    [hasChannelModerationRights]="hasChannelModerationRights"
+                    [hasChannelModerationRights]="hasChannelModerationRights()"
                 />
             }
         }
@@ -38,6 +38,6 @@
         #createAnswerPostModal
         [posting]="createdAnswerPost"
         [createEditAnswerPostContainerRef]="containerRef"
-        (onCreate)="createdAnswerPost = createEmptyAnswerPost(); showAnswers = true"
+        (onCreate)="createdAnswerPost = createEmptyAnswerPost(); showAnswers()"
     />
 </div>

src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.ts → src/main/webapp/app/shared/metis/posting-footer/posting-footer.component.ts

@@ -1,49 +1,38 @@
-import {
-    AfterContentChecked,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnDestroy,
-    OnInit,
-    Output,
-    SimpleChanges,
-    ViewChild,
-    ViewContainerRef,
-} from '@angular/core';
-import { PostingFooterDirective } from 'app/shared/metis/posting-footer/posting-footer.directive';
+import { AfterContentChecked, ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild, ViewContainerRef, inject, input, output } from '@angular/core';
 import { Post } from 'app/entities/metis/post.model';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { AnswerPostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import dayjs from 'dayjs/esm';
 import { User } from 'app/core/user/user.model';
+import { Posting } from 'app/entities/metis/posting.model';
 
 interface PostGroup {
     author: User | undefined;
     posts: AnswerPost[];
 }
 
 @Component({
-    selector: 'jhi-post-footer',
-    templateUrl: './post-footer.component.html',
-    styleUrls: ['./post-footer.component.scss'],
+    selector: 'jhi-posting-footer',
+    templateUrl: './posting-footer.component.html',
 })
-export class PostFooterComponent extends PostingFooterDirective<Post> implements OnInit, OnDestroy, AfterContentChecked, OnChanges {
-    @Input() lastReadDate?: dayjs.Dayjs;
-    @Input() readOnlyMode = false;
-    @Input() previewMode = false;
-    @Input() modalRef?: NgbModalRef;
-    @Input() hasChannelModerationRights = false;
-    @Input() showAnswers = false;
-    @Input() isCommunicationPage = false;
-    @Input() sortedAnswerPosts: AnswerPost[] = [];
-
-    @Output() openThread = new EventEmitter<void>();
-    @Output() userReferenceClicked = new EventEmitter<string>();
-    @Output() channelReferenceClicked = new EventEmitter<number>();
+export class PostingFooterComponent implements OnInit, OnDestroy, AfterContentChecked, OnChanges {
+    lastReadDate = input<dayjs.Dayjs | undefined>();
+    readOnlyMode = input<boolean>(false);
+    previewMode = input<boolean>(false);
+    modalRef = input<NgbModalRef | undefined>();
+    hasChannelModerationRights = input<boolean>(false);
+    showAnswers = input<boolean>(false);
+    isCommunicationPage = input<boolean>(false);
+    sortedAnswerPosts = input<AnswerPost[]>([]);
+    isThreadSidebar = input<boolean>(false);
+    posting = input<Posting>();
+
+    // Output Signals
+    openThread = output<void>();
+    userReferenceClicked = output<string>();
+    channelReferenceClicked = output<number>();
 
     @ViewChild(AnswerPostCreateEditModalComponent) answerPostCreateEditModal?: AnswerPostCreateEditModalComponent;
     @ViewChild('createEditAnswerPostContainer', { read: ViewContainerRef }) containerRef!: ViewContainerRef;
@@ -54,12 +43,8 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
     courseId!: number;
     groupedAnswerPosts: PostGroup[] = [];
 
-    constructor(
-        private metisService: MetisService,
-        protected changeDetector: ChangeDetectorRef,
-    ) {
-        super();
-    }
+    protected metisService: MetisService = inject(MetisService);
+    protected changeDetector: ChangeDetectorRef = inject(ChangeDetectorRef);
 
     ngOnInit(): void {
         this.courseId = this.metisService.getCourse().id!;
@@ -94,26 +79,26 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
     createEmptyAnswerPost(): AnswerPost {
         const answerPost = new AnswerPost();
         answerPost.content = '';
-        answerPost.post = this.posting;
+        answerPost.post = this.posting();
         answerPost.resolvesPost = this.isAtLeastTutorInCourse;
         return answerPost;
     }
 
     groupAnswerPosts(): void {
-        if (!this.sortedAnswerPosts || this.sortedAnswerPosts.length === 0) {
+        if (!this.sortedAnswerPosts() || this.sortedAnswerPosts().length === 0) {
             this.groupedAnswerPosts = [];
             return;
         }
 
-        this.sortedAnswerPosts = this.sortedAnswerPosts
+        const sortedAnswerPosts = this.sortedAnswerPosts()
             .slice()
             .reverse()
             .map((post) => {
                 (post as any).creationDateDayjs = post.creationDate ? dayjs(post.creationDate) : undefined;
                 return post;
             });
 
-        const sortedPosts = this.sortedAnswerPosts.sort((a, b) => {
+        const sortedPosts = sortedAnswerPosts.sort((a, b) => {
             const aDate = (a as any).creationDateDayjs;
             const bDate = (b as any).creationDateDayjs;
             return aDate?.valueOf() - bDate?.valueOf();
@@ -170,14 +155,14 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
      * Open create answer modal
      */
     openCreateAnswerPostModal() {
-        this.createAnswerPostModalComponent.open();
+        this.createAnswerPostModalComponent?.open();
     }
 
     /**
      * Close create answer modal
      */
     closeCreateAnswerPostModal() {
-        this.createAnswerPostModalComponent.close();
+        this.createAnswerPostModalComponent?.close();
     }
 
     protected postsTrackByFn(index: number, post: Post): number {