Add default picture and factorization of title in publication edition.

frontend/src/app/app.routes.ts

@@ -13,6 +13,10 @@ export const routes: Routes = [
         path: 'disconnect', 
         loadComponent: () => import('./pages/disconnection/disconnection.component').then(module => module.DisconnectionComponent)
     },
+    {
+        path: 'publications/new',
+        loadChildren: () => import('./pages/publication-creation/publication-creation.routes').then(module => module.ROUTES)
+    },
     {
         path: 'publications/:publicationId',
         loadComponent: () => import('./pages/publication/publication.component').then(module => module.PublicationComponent)

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

@@ -1,6 +1,6 @@
 <form [formGroup]="publicationEditionForm" (submit)="save()" ngNativeValidate>
     <header>
-        <h1>Modification de l'article {{ publication.title }}</h1>
+        <h1>{{title}}</h1>
     </header>
 
     <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
@@ -19,7 +19,12 @@
                     </div>
 
                     <div class="picture-container">
-                        <img src="/api/pictures/{{publication.illustrationId}}" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
+                        @if (publication.illustrationId.length) {
+                            <img src="/api/pictures/{{publication.illustrationId}}" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
+                        } @else {
+                            <img src="/assets/images/default-picture.png" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
+                        }
+                        
                     </div>
                 </div>
 

frontend/src/app/components/publication-edition/publication-edition.component.ts

@@ -36,6 +36,8 @@ export class PublicationEditionComponent implements OnChanges, OnDestroy {
     @Input()
     publication!: Publication;
     @Input()
+    title!: string;
+    @Input()
     isSaving$: Observable<boolean> = of(false);
     @Output()
     publicationSave = new EventEmitter<Publication>();

frontend/src/app/core/rest-services/publications/publication.rest-service.ts

@@ -17,6 +17,10 @@ export class PublicationRestService {
     return lastValueFrom(this.httpClient.get<Publication>(`/api/publications/${publicationId}`));
   }
 
+  create(publication: Publication): Promise<void> {
+    return lastValueFrom(this.httpClient.post<void>('/api/publications', publication));
+  }
+
   update(publication: Publication): Promise<void> {
     return lastValueFrom(this.httpClient.put<void>(`/api/publications/${publication.id}`, publication));
   }

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

@@ -0,0 +1 @@
+<app-publication-edition title="Creation of a new publication" [publication]="publication" [isSaving$]="isSaving$" (publicationSave)="onPublicationSave($event)"></app-publication-edition>

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

@@ -0,0 +1,76 @@
+import { Component, inject, OnInit } from "@angular/core";
+import { PublicationEditionComponent } from "../../components/publication-edition/publication-edition.component";
+import { PublicationRestService } from "../../core/rest-services/publications/publication.rest-service";
+import { ActivatedRoute, Router } from "@angular/router";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { BehaviorSubject, Observable, Subscription } from "rxjs";
+import { Publication } from "../../core/rest-services/publications/model/publication";
+import { AuthenticationService } from "../../core/service/authentication.service";
+import { Author } from "../../core/rest-services/publications/model/author";
+import { CommonModule } from "@angular/common";
+
+@Component({
+    selector: 'app-publication-creation',
+    standalone: true,
+    templateUrl: './publication-creation.component.html',
+    styleUrl: './publication-creation.component.scss',
+    imports: [
+        CommonModule,
+        PublicationEditionComponent
+    ]
+})
+export class PublicationCreationComponent implements OnInit {
+    private readonly authenticationService = inject(AuthenticationService);
+    private readonly publicationRestService = inject(PublicationRestService);
+    private readonly router = inject(Router);
+    private readonly snackBar = inject(MatSnackBar);
+    private isSavingSubject = new BehaviorSubject<boolean>(false);
+    private subscriptions: Subscription[] = [];
+    publication!: Publication;
+
+    get isSaving$(): Observable<boolean> {
+        return this.isSavingSubject.asObservable();
+    }
+
+    ngOnInit(): void {
+        const authenticatedUser = this.authenticationService.getAuthenticatedUser();
+        if (authenticatedUser) {
+            const author: Author = {
+                id: authenticatedUser.id,
+                name: authenticatedUser.pseudo,
+                image: authenticatedUser.photoId ?? ''
+            };
+            this.publication = {
+                id: '',
+                key: '',
+                title: '',
+                text: '',
+                parsedText: '',
+                description: '',
+                creationDate: new Date(),
+                illustrationId: '',
+                categoryId: '',
+                author
+            };
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
+    }
+
+    onPublicationSave(publication: Publication): void {
+        this.isSavingSubject.next(true);
+        this.publicationRestService.create(publication)
+            .then(() => {
+                this.snackBar.open('Publication created succesfully!', 'Close', { duration: 5000 });
+                this.router.navigate(['/my-publications']);
+            })
+            .catch(error => {
+                const errorMessage = 'An error occured while saving new publication.';
+                console.error(errorMessage, error);
+                this.snackBar.open(errorMessage, 'Close', { duration: 5000 });
+            })
+            .finally(() => this.isSavingSubject.next(false));
+    }
+}

frontend/src/app/pages/publication-creation/publication-creation.routes.ts

@@ -0,0 +1,7 @@
+import { Route } from "@angular/router";
+import { authenticationGuard } from "../../core/guard/authentication.guard";
+import { PublicationCreationComponent } from "./publication-creation.component";
+
+export const ROUTES: Route[] = [
+    { path: '', component: PublicationCreationComponent, canActivate: [authenticationGuard] }
+]

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

@@ -3,7 +3,7 @@
 } 
 @else {
     @if (publication) {
-        <app-publication-edition [publication]="publication" [isSaving$]="isSaving$" (publicationSave)="onPublicationSave($event)"></app-publication-edition>
+        <app-publication-edition title="Update publication {{ publication.title }}" [publication]="publication" [isSaving$]="isSaving$" (publicationSave)="onPublicationSave($event)"></app-publication-edition>
     }
     @else {
         <div class="loading-failed">