Development: Migrate client code for posting header and footer components

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

@@ -9,9 +9,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,8 +8,7 @@ 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/post-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';
@@ -68,8 +67,7 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
     ],
     declarations: [
         PostingThreadComponent,
-        PostHeaderComponent,
-        AnswerPostHeaderComponent,
+        PostingHeaderComponent,
         PostCreateEditModalComponent,
         PostTagSelectorComponent,
         PostFooterComponent,
@@ -93,8 +91,7 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
     ],
     exports: [
         PostingThreadComponent,
-        PostHeaderComponent,
-        AnswerPostHeaderComponent,
+        PostingHeaderComponent,
         PostCreateEditModalComponent,
         PostTagSelectorComponent,
         AnswerPostCreateEditModalComponent,

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

@@ -9,7 +9,7 @@
     }
     @if (!isConsecutive()) {
         <div class="ps-3">
-            <jhi-post-header
+            <jhi-posting-header
                 [previewMode]="previewMode"
                 [readOnlyMode]="readOnlyMode"
                 [posting]="posting"

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

@@ -1,4 +1,4 @@
-@if (showAnswers) {
+@if (showAnswers()) {
     <div class="d-flex align-items-center mt-2">
         <div class="fs-x-small fw-900 me-2">
             {{
@@ -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

@@ -1,25 +1,12 @@
-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;
@@ -31,19 +18,22 @@ interface PostGroup {
     templateUrl: './post-footer.component.html',
     styleUrls: ['./post-footer.component.scss'],
 })
-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 PostFooterComponent 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 +44,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 +80,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 +156,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 {