Communication: Add undo button when deleting posts

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

@@ -6,8 +6,10 @@
         [isCommunicationPage]="isCommunicationPage"
         [lastReadDate]="lastReadDate"
         [hasChannelModerationRights]="hasChannelModerationRights"
+        [isDeleted]="isDeleted"
+        (isDeleteEvent)="onDeleteEvent(true)"
     />
-    @if (!createAnswerPostModal.isInputOpen) {
+    @if (!isDeleted && !createAnswerPostModal.isInputOpen) {
         <div class="answer-post-content-margin">
             <jhi-posting-content
                 [content]="posting.content"
@@ -19,18 +21,28 @@
                 (channelReferenceClicked)="channelReferenceClicked.emit($event)"
             />
         </div>
+    } @else if (isDeleted) {
+        <span class="d-inline-flex align-items-center">
+            <span class="text-secondary" jhiTranslate="artemisApp.metis.post.deletedContent" [translateValues]="{ progress: deleteTimerInSeconds }"></span>
+            <button class="btn btn-outline-primary btn-sm ms-2 position-relative">
+                <span class="post-delete-button-label" jhiTranslate="artemisApp.metis.post.undoDelete" (click)="onDeleteEvent(false)"></span>
+                <span class="post-delete-button-background"></span>
+            </button>
+        </span>
     }
     <div class="answer-post-content-margin">
         <ng-container #createEditAnswerPostContainer />
     </div>
-    <div class="answer-post-content-margin">
-        <jhi-answer-post-footer
-            [isReadOnlyMode]="isReadOnlyMode"
-            [posting]="posting"
-            [isLastAnswer]="isLastAnswer"
-            [isThreadSidebar]="isThreadSidebar"
-            (openPostingCreateEditModal)="openPostingCreateEditModal.emit()"
-        />
-    </div>
+    @if (!isDeleted) {
+        <div class="answer-post-content-margin" @fade>
+            <jhi-answer-post-footer
+                [isReadOnlyMode]="isReadOnlyMode"
+                [posting]="posting"
+                [isLastAnswer]="isLastAnswer"
+                [isThreadSidebar]="isThreadSidebar"
+                (openPostingCreateEditModal)="openPostingCreateEditModal.emit()"
+            />
+        </div>
+    }
 </div>
 <jhi-answer-post-create-edit-modal #createAnswerPostModal [posting]="posting" [createEditAnswerPostContainerRef]="containerRef" />

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

@@ -2,19 +2,27 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, ViewCh
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import { PostingDirective } from 'app/shared/metis/posting.directive';
 import dayjs from 'dayjs/esm';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 @Component({
     selector: 'jhi-answer-post',
     templateUrl: './answer-post.component.html',
     styleUrls: ['./answer-post.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [
+        trigger('fade', [
+            transition(':enter', [style({ opacity: 0 }), animate('300ms ease-in', style({ opacity: 1 }))]),
+            transition(':leave', [animate('300ms ease-out', style({ opacity: 0 }))]),
+        ]),
+    ],
 })
 export class AnswerPostComponent extends PostingDirective<AnswerPost> {
     @Input() lastReadDate?: dayjs.Dayjs;
     @Input() isLastAnswer: boolean;
     @Output() openPostingCreateEditModal = new EventEmitter<void>();
     @Output() userReferenceClicked = new EventEmitter<string>();
     @Output() channelReferenceClicked = new EventEmitter<number>();
+    isAnswerPost = true;
 
     @Input()
     isReadOnlyMode = false;

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

@@ -4,10 +4,12 @@
             [previewMode]="previewMode"
             [readOnlyMode]="readOnlyMode"
             [posting]="posting"
+            [isDeleted]="isDeleted"
             [isCommunicationPage]="isCommunicationPage"
             [hasChannelModerationRights]="hasChannelModerationRights"
             (isModalOpen)="displayInlineInput = true"
             [lastReadDate]="lastReadDate"
+            (isDeleteEvent)="onDeleteEvent(true)"
         />
     </div>
     <div class="align-items-center post-content-margin">
@@ -49,7 +51,7 @@
                     </span>
                 }
             </div>
-            @if (!displayInlineInput) {
+            @if (!isDeleted && !displayInlineInput) {
                 <jhi-posting-content
                     [previewMode]="previewMode"
                     [content]="posting.content"
@@ -60,30 +62,40 @@
                     (userReferenceClicked)="onUserReferenceClicked($event)"
                     (channelReferenceClicked)="onChannelReferenceClicked($event)"
                 />
+            } @else if (isDeleted) {
+                <span class="d-inline-flex align-items-center">
+                    <span class="text-secondary" jhiTranslate="artemisApp.metis.post.deletedContent" [translateValues]="{ progress: deleteTimerInSeconds }"></span>
+                    <button class="btn btn-outline-primary btn-sm ms-2 position-relative">
+                        <span class="post-delete-button-label" jhiTranslate="artemisApp.metis.post.undoDelete" (click)="onDeleteEvent(false)"></span>
+                        <span class="post-delete-button-background"></span>
+                    </button>
+                </span>
             }
         </div>
     </div>
-    @if (displayInlineInput && !readOnlyMode) {
+    @if (!isDeleted && displayInlineInput && !readOnlyMode) {
         <div class="post-content-margin">
             <jhi-message-inline-input [posting]="posting" (isModalOpen)="displayInlineInput = false" />
         </div>
     }
-    <div class="post-content-margin me-0 mt-2 justify-content-between" [ngClass]="{ 'mb-2': previewMode }">
-        <!-- Post reactions -->
-        @if (!previewMode) {
-            <jhi-post-reactions-bar
-                [lastReadDate]="lastReadDate"
-                [readOnlyMode]="readOnlyMode"
-                [posting]="posting"
-                [(showAnswers)]="showAnswers"
-                [sortedAnswerPosts]="sortedAnswerPosts"
-                [isCommunicationPage]="isCommunicationPage"
-                [isThreadSidebar]="isThreadSidebar"
-                (openPostingCreateEditModal)="openCreateAnswerPostModal()"
-                (openThread)="openThread.emit()"
-            />
-        }
-    </div>
+    @if (!isDeleted) {
+        <div class="post-content-margin me-0 mt-2 justify-content-between" [ngClass]="{ 'mb-2': previewMode }" @fade>
+            <!-- Post reactions -->
+            @if (!previewMode) {
+                <jhi-post-reactions-bar
+                    [lastReadDate]="lastReadDate"
+                    [readOnlyMode]="readOnlyMode"
+                    [posting]="posting"
+                    [(showAnswers)]="showAnswers"
+                    [sortedAnswerPosts]="sortedAnswerPosts"
+                    [isCommunicationPage]="isCommunicationPage"
+                    [isThreadSidebar]="isThreadSidebar"
+                    (openPostingCreateEditModal)="openCreateAnswerPostModal()"
+                    (openThread)="openThread.emit()"
+                />
+            }
+        </div>
+    }
 </div>
 <jhi-post-footer
     #postFooter

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

@@ -1,5 +1,7 @@
 @import 'src/main/webapp/app/shared/metis/metis.component';
 
+$delete-delay-duration: 6s;
+
 .linked-context-information,
 .context-information,
 .post-title {
@@ -14,3 +16,29 @@
 .reference-hash {
     color: inherit;
 }
+
+@import 'src/main/webapp/content/scss/artemis-variables';
+
+.post-delete-button-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 0;
+    background-color: rgba($primary, 0.3);
+    animation: increaseWidth $delete-delay-duration forwards linear;
+}
+
+.post-delete-button-label {
+    position: relative;
+    z-index: 1;
+}
+
+@keyframes increaseWidth {
+    from {
+        width: 0;
+    }
+    to {
+        width: 100%;
+    }
+}

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

@@ -1,19 +1,6 @@
-import {
-    AfterContentChecked,
-    ChangeDetectionStrategy,
-    ChangeDetectorRef,
-    Component,
-    EventEmitter,
-    Input,
-    OnChanges,
-    OnInit,
-    Output,
-    ViewChild,
-    ViewContainerRef,
-} from '@angular/core';
+import { AfterContentChecked, ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild, ViewContainerRef } from '@angular/core';
 import { Post } from 'app/entities/metis/post.model';
 import { PostingDirective } from 'app/shared/metis/posting.directive';
-import { MetisService } from 'app/shared/metis/metis.service';
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { ContextInformation, DisplayPriority, PageType, RouteComponents } from '../metis.util';
 import { faBullhorn, faCheckSquare } from '@fortawesome/free-solid-svg-icons';
@@ -26,12 +13,19 @@ import { MetisConversationService } from 'app/shared/metis/metis-conversation.se
 import { getAsChannelDTO } from 'app/entities/metis/conversation/channel.model';
 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';
 
 @Component({
     selector: 'jhi-post',
     templateUrl: './post.component.html',
     styleUrls: ['./post.component.scss', './../metis.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [
+        trigger('fade', [
+            transition(':enter', [style({ opacity: 0 }), animate('300ms ease-in', style({ opacity: 1 }))]),
+            transition(':leave', [animate('300ms ease-out', style({ opacity: 0 }))]),
+        ]),
+    ],
 })
 export class PostComponent extends PostingDirective<Post> implements OnInit, OnChanges, AfterContentChecked {
     @Input() lastReadDate?: dayjs.Dayjs;
@@ -64,8 +58,6 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
     faCheckSquare = faCheckSquare;
 
     constructor(
-        private metisService: MetisService,
-        protected changeDetector: ChangeDetectorRef,
         private oneToOneChatService: OneToOneChatService,
         private metisConversationService: MetisConversationService,
         private router: Router,

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

@@ -11,6 +11,7 @@
                     [authorName]="posting.author?.name"
                     [imageUrl]="posting.author?.imageUrl"
                     [isEditable]="currentUser !== undefined && posting.author.id === currentUser.id"
+                    [isGray]="isDeleted()"
                 >
                 </jhi-profile-picture>
                 <span class="fs-small d-inline-flex flex-column align-items-start">
@@ -37,48 +38,49 @@
             <span jhiTranslate="global.generic.new" class="badge bg-secondary hideAfter5Seconds"></span>
         }
     </div>
-
-    <div class="d-flex gap-2">
-        @if (mayEditOrDelete) {
-            <fa-icon
-                size="xs"
-                class="editIcon clickable icon"
-                [ngbTooltip]="'artemisApp.metis.editPosting' | artemisTranslate"
-                [icon]="faPencilAlt"
-                (click)="openPostingCreateEditModal.emit()"
-            />
-        }
-        @if (mayEditOrDelete) {
-            <jhi-confirm-icon
-                iconSize="xs"
-                (confirmEvent)="deletePosting()"
-                [ngClass]="'deleteIcon clickable icon'"
-                [initialTooltip]="'artemisApp.metis.deleteAnswer' | artemisTranslate"
-                [confirmTooltip]="'artemisApp.metis.confirmDeleteAnswer' | artemisTranslate"
-            />
-        }
-        @if (!isAnswerOfAnnouncement) {
-            <div id="toggleElement" class="resolve" [ngClass]="isAtLeastTutorInCourse || isAuthorOfOriginalPost ? 'clickable' : ''" (click)="toggleResolvesPost()">
-                @if (posting.resolvesPost) {
-                    <div>
-                        <fa-icon
-                            class="resolved"
-                            [icon]="faCheck"
-                            [ngbTooltip]="
-                                isAtLeastTutorInCourse || isAuthorOfOriginalPost
-                                    ? ('artemisApp.metis.unmarkAsResolvingAnswerTooltip' | artemisTranslate)
-                                    : ('artemisApp.metis.resolvingAnswerTooltip' | artemisTranslate)
-                            "
-                        />
-                    </div>
-                } @else {
-                    @if (isAtLeastTutorInCourse || isAuthorOfOriginalPost) {
+    @if (!isDeleted()) {
+        <div class="d-flex gap-2">
+            @if (mayEditOrDelete) {
+                <fa-icon
+                    size="xs"
+                    class="editIcon clickable icon"
+                    [ngbTooltip]="'artemisApp.metis.editPosting' | artemisTranslate"
+                    [icon]="faPencilAlt"
+                    (click)="openPostingCreateEditModal.emit()"
+                />
+            }
+            @if (mayEditOrDelete) {
+                <jhi-confirm-icon
+                    iconSize="xs"
+                    (confirmEvent)="deletePosting()"
+                    [ngClass]="'deleteIcon clickable icon'"
+                    [initialTooltip]="'artemisApp.metis.deleteAnswer' | artemisTranslate"
+                    [confirmTooltip]="'artemisApp.metis.confirmDeleteAnswer' | artemisTranslate"
+                />
+            }
+            @if (!isAnswerOfAnnouncement) {
+                <div id="toggleElement" class="resolve" [ngClass]="isAtLeastTutorInCourse || isAuthorOfOriginalPost ? 'clickable' : ''" (click)="toggleResolvesPost()">
+                    @if (posting.resolvesPost) {
                         <div>
-                            <fa-icon class="icon notResolved" [icon]="faCheck" [ngbTooltip]="'artemisApp.metis.markAsResolvingAnswerTooltip' | artemisTranslate" />
+                            <fa-icon
+                                class="resolved"
+                                [icon]="faCheck"
+                                [ngbTooltip]="
+                                    isAtLeastTutorInCourse || isAuthorOfOriginalPost
+                                        ? ('artemisApp.metis.unmarkAsResolvingAnswerTooltip' | artemisTranslate)
+                                        : ('artemisApp.metis.resolvingAnswerTooltip' | artemisTranslate)
+                                "
+                            />
                         </div>
+                    } @else {
+                        @if (isAtLeastTutorInCourse || isAuthorOfOriginalPost) {
+                            <div>
+                                <fa-icon class="icon notResolved" [icon]="faCheck" [ngbTooltip]="'artemisApp.metis.markAsResolvingAnswerTooltip' | artemisTranslate" />
+                            </div>
+                        }
                     }
-                }
-            </div>
-        }
-    </div>
+                </div>
+            }
+        </div>
+    }
 </div>

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

@@ -50,7 +50,7 @@ export class AnswerPostHeaderComponent extends PostingHeaderDirective<AnswerPost
      * invokes the metis service to delete an answer post
      */
     deletePosting(): void {
-        this.metisService.deleteAnswerPost(this.posting);
+        this.isDeleteEvent.emit(true);
     }
 
     /**