Development: Combine post and answer post reactions bars in communica…

…tion mode client code (#10224)

src/main/webapp/app/overview/course-conversations/other/channel-icon/channel-icon.component.html

@@ -1,14 +1,14 @@
 <ng-container>
-    @if (isArchived) {
+    @if (isArchived()) {
         <fa-icon [icon]="faBoxArchive" size="xs" />
     }
-    @if (isPublic) {
+    @if (isPublic()) {
         <fa-icon [icon]="faHashtag" size="xs" />
     }
-    @if (!isPublic) {
+    @if (!isPublic()) {
         <fa-icon [icon]="faLock" size="xs" />
     }
-    @if (isAnnouncementChannel) {
+    @if (isAnnouncementChannel()) {
         <fa-icon [icon]="faBullhorn" size="xs" />
     }
 </ng-container>

src/main/webapp/app/overview/course-conversations/other/channel-icon/channel-icon.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { faBoxArchive, faBullhorn, faHashtag, faLock } from '@fortawesome/free-solid-svg-icons';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 
@@ -8,17 +8,13 @@ import { FaIconComponent } from '@fortawesome/angular-fontawesome';
     imports: [FaIconComponent],
 })
 export class ChannelIconComponent {
-    @Input()
-    isPublic = true;
+    isPublic = input<boolean>(true);
+    isArchived = input<boolean>(false);
+    isAnnouncementChannel = input<boolean>(false);
 
-    @Input()
-    isArchived = false;
-
-    @Input()
-    isAnnouncementChannel = false;
     // icons
-    faHashtag = faHashtag;
-    faLock = faLock;
-    faBoxArchive = faBoxArchive;
-    faBullhorn = faBullhorn;
+    readonly faHashtag = faHashtag;
+    readonly faLock = faLock;
+    readonly faBoxArchive = faBoxArchive;
+    readonly faBullhorn = faBullhorn;
 }

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

@@ -44,7 +44,7 @@
                     (channelReferenceClicked)="channelReferenceClicked.emit($event)"
                 />
                 <div class="post-content-padding hover-actions">
-                    <jhi-answer-post-reactions-bar
+                    <jhi-posting-reactions-bar
                         [isReadOnlyMode]="isReadOnlyMode"
                         [posting]="posting"
                         [isLastAnswer]="isLastAnswer"
@@ -65,7 +65,7 @@
     </div>
     @if (!isDeleted) {
         <div class="post-content-padding post-reactions-bar" [ngClass]="{ 'is-saved': posting.isSaved && isConsecutive() }" @fade>
-            <jhi-answer-post-reactions-bar
+            <jhi-posting-reactions-bar
                 [isReadOnlyMode]="isReadOnlyMode"
                 [posting]="posting"
                 [isLastAnswer]="isLastAnswer"

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

@@ -22,7 +22,6 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { Reaction } from 'app/entities/metis/reaction.model';
 import { faBookmark, faPencilAlt, faSmile, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { DOCUMENT, NgClass, NgStyle } from '@angular/common';
-import { AnswerPostReactionsBarComponent } from 'app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateDirective } from '../../language/translate.directive';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
@@ -33,6 +32,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { EmojiPickerComponent } from '../emoji/emoji-picker.component';
 import { ArtemisDatePipe } from 'app/shared/pipes/artemis-date.pipe';
 import { captureException } from '@sentry/angular';
+import { PostingReactionsBarComponent } from 'app/shared/metis/posting-reactions-bar/posting-reactions-bar.component';
 
 @Component({
     selector: 'jhi-answer-post',
@@ -52,7 +52,7 @@ import { captureException } from '@sentry/angular';
         NgbTooltip,
         PostingHeaderComponent,
         PostingContentComponent,
-        AnswerPostReactionsBarComponent,
+        PostingReactionsBarComponent,
         AnswerPostCreateEditModalComponent,
         NgStyle,
         CdkOverlayOrigin,
@@ -77,7 +77,7 @@ export class AnswerPostComponent extends PostingDirective<AnswerPost> implements
 
     // ng-container to render answerPostCreateEditModalComponent
     @ViewChild('createEditAnswerPostContainer', { read: ViewContainerRef }) containerRef: ViewContainerRef;
-    @ViewChild(AnswerPostReactionsBarComponent) private reactionsBarComponent!: AnswerPostReactionsBarComponent;
+    @ViewChild(PostingReactionsBarComponent) protected reactionsBarComponent!: PostingReactionsBarComponent<AnswerPost>;
 
     // Icons
     faBookmark = faBookmark;

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

@@ -92,9 +92,9 @@
                         <div class="hover-actions" [ngClass]="{ 'mb-2': previewMode }">
                             @if (!previewMode) {
                                 <!-- Post reactions (that appear when post is hovered) -->
-                                <jhi-post-reactions-bar
+                                <jhi-posting-reactions-bar
                                     [lastReadDate]="lastReadDate"
-                                    [readOnlyMode]="readOnlyMode"
+                                    [isReadOnlyMode]="readOnlyMode"
                                     [previewMode]="previewMode"
                                     [posting]="posting"
                                     [(showAnswers)]="showAnswers"
@@ -126,9 +126,9 @@
         <div class="post-content-padding justify-content-between post-reactions-bar" [ngClass]="{ 'mb-2': previewMode, 'is-saved': posting.isSaved && isConsecutive() }">
             <!-- Post reactions -->
             @if (!previewMode) {
-                <jhi-post-reactions-bar
+                <jhi-posting-reactions-bar
                     [lastReadDate]="lastReadDate"
-                    [readOnlyMode]="readOnlyMode"
+                    [isReadOnlyMode]="readOnlyMode"
                     [previewMode]="previewMode"
                     [posting]="posting"
                     [(showAnswers)]="showAnswers"

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

@@ -29,7 +29,7 @@ import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import { AnswerPostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { PostCreateEditModalComponent } from 'app/shared/metis/posting-create-edit-modal/post-create-edit-modal/post-create-edit-modal.component';
-import { PostReactionsBarComponent } from 'app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component';
+import { PostingReactionsBarComponent } from 'app/shared/metis/posting-reactions-bar/posting-reactions-bar.component';
 import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { DOCUMENT, NgClass, NgStyle } from '@angular/common';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
@@ -62,7 +62,7 @@ import { ArtemisTranslatePipe } from '../../pipes/artemis-translate.pipe';
         RouterLinkActive,
         RouterLink,
         PostingContentComponent,
-        PostReactionsBarComponent,
+        PostingReactionsBarComponent,
         MessageInlineInputComponent,
         PostingFooterComponent,
         NgStyle,
@@ -94,7 +94,7 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
     @ViewChild('createEditAnswerPostContainer', { read: ViewContainerRef }) containerRef: ViewContainerRef;
     @ViewChild('postFooter') postFooterComponent: PostingFooterComponent;
     @ViewChild('emojiPickerTrigger') emojiPickerTrigger!: CdkOverlayOrigin;
-    @ViewChild(PostReactionsBarComponent) protected reactionsBarComponent!: PostReactionsBarComponent;
+    @ViewChild(PostingReactionsBarComponent) protected reactionsBarComponent!: PostingReactionsBarComponent<Post>;
 
     static activeDropdownPost: PostComponent | undefined = undefined;