Add button to edit publications on publication view page.

frontend/src/app/pages/publication-edition/publication-edition.component.html

@@ -40,7 +40,6 @@
 
                 </mat-tab>
             </mat-tab-group>
-            
             <footer>
                 <app-submit-button label="Save" [requestPending]="(isSaving$ | async) == true"></app-submit-button>
                 <button type="button" class="secondary" (click)="goPreviousLocation()">

frontend/src/app/pages/publication-edition/publication-edition.service.ts

@@ -128,17 +128,16 @@ export class PublicationEditionService implements OnDestroy {
         const publication = this._publication;
 
         this.isSavingSubject.next(true);
-        setTimeout(() => this.isSavingSubject.next(false), 1500);
-        // this.publicationRestService.update(publication)
-        //     .then(() => {
-        //         this.snackBar.open('Publication updated succesfully!', 'Close', { duration: 5000 });
-        //         this.router.navigate(['/home']);
-        //     })
-        //     .catch(error => {
-        //         const errorMessage = 'An error occured while saving publication modifications.';
-        //         console.error(errorMessage, error);
-        //         this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
-        //     })
-        //     .finally(() => this.isSavingSubject.next(false));
+        this.publicationRestService.update(publication)
+            .then(() => {
+                this.snackBar.open('Publication updated succesfully!', 'Close', { duration: 5000 });
+                this.router.navigate(['/home']);
+            })
+            .catch(error => {
+                const errorMessage = 'An error occured while saving publication modifications.';
+                console.error(errorMessage, error);
+                this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
+            })
+            .finally(() => this.isSavingSubject.next(false));
     }
 }

frontend/src/app/pages/publication/publication.component.html

@@ -1,14 +1,17 @@
-<ng-container *ngIf="isLoading; else afterLoadingPart">
+@if (isLoading) {
     <mat-spinner></mat-spinner>
-</ng-container>
-
-<ng-template #afterLoadingPart>
-    <ng-container *ngIf="publication; else loadingFailedMessage">
+} @else {
+    @if (publication) {
         <div class="card">
             <img src="/pictures/{{ publication.illustrationId }}" />
             <header>
                 <h1>{{ publication.title }}</h1>
                 <h2>{{ publication.description }}</h2>
+                @if (isAuthorAndUserEquals) {
+                    <a [routerLink]="['edit']" class="button action" matTooltip="Click to edit the publication">
+                        <mat-icon>edit</mat-icon>
+                    </a>
+                }
             </header>
             <main [innerHTML]="publication.parsedText"></main>
             <footer>
@@ -19,11 +22,9 @@
                 </span>
             </footer>
         </div>
-    </ng-container>
-
-    <ng-template #loadingFailedMessage>
+    } @else {
         <div class="loading-failed">
             <h1>Publication failed to load...</h1>
         </div>
-    </ng-template>
-</ng-template>
+    }
+}

frontend/src/app/pages/publication/publication.component.scss

@@ -34,6 +34,7 @@ $cardBorderRadius: .5em;
 
         header {
             padding: 2em;
+            position: relative;
 
             h1 {
                 font-size: 2em;
@@ -46,6 +47,26 @@ $cardBorderRadius: .5em;
                 margin: 0;
                 font-weight: 400;
             }
+
+            a {
+                padding: .8em .8em;
+                border-radius: 10em;
+                border: none;
+                background-color: #3f51b5;
+                color: white;
+                transition: background-color .2s ease-in-out;
+                position: absolute;
+                top: -1.5em;
+                right: 3em;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                &:hover {
+                    background-color: #5b6ed8;
+                    cursor: pointer;
+                }
+            }
         }
 
         main {

frontend/src/app/pages/publication/publication.component.ts

@@ -1,26 +1,30 @@
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { PublicationRestService } from '../../core/rest-services/publications/publication.rest-service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Publication } from '../../core/rest-services/publications/model/publication';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { MatTooltip } from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
+import { MatIcon } from '@angular/material/icon';
+import { AuthenticationService } from '../../core/service/authentication.service';
 
 @Component({
   selector: 'app-publication',
   standalone: true,
-  imports: [CommonModule, MatProgressSpinner, MatTooltip],
+  imports: [CommonModule, MatProgressSpinner, MatTooltip, RouterModule, MatIcon, MatTooltipModule],
   templateUrl: './publication.component.html',
   styleUrl: './publication.component.scss'
 })
 export class PublicationComponent implements OnInit, OnDestroy {
   private activatedRoute = inject(ActivatedRoute);
+  private authenticationService = inject(AuthenticationService);
   private publicationRestService = inject(PublicationRestService);
   private paramMapSubscription?: Subscription;
   private snackBar = inject(MatSnackBar);
   isLoading: boolean = false;
+  isAuthorAndUserEquals: boolean = false;
   publication?: Publication;
 
   ngOnInit(): void {
@@ -35,6 +39,7 @@ export class PublicationComponent implements OnInit, OnDestroy {
             this.publicationRestService.getById(publicationId)
                 .then(publication => {
                   this.publication = publication;
+                  this.isAuthorAndUserEquals = this.authenticationService.getAuthenticatedUser()?.id === this.publication.author.id;
                 })
                 .catch(error => {
                   this.snackBar.open('An error occurred while loading publication...', 'Close', { duration: 5000 });
@@ -45,8 +50,6 @@ export class PublicationComponent implements OnInit, OnDestroy {
                 });
           }
         });
-
-    // this.publicationRestService.getById()
   }
 
   ngOnDestroy(): void {