Implementaiton of preview tab.

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

@@ -26,4 +26,9 @@ export class PublicationRestService {
     params = params.set('query', searchCriteria);
     return lastValueFrom(this.httpClient.get<Publication[]>('/api/publications', { params }));
   }
+
+  preview(publicationText: string): Promise<string> {
+    const request = { text: publicationText };
+    return lastValueFrom(this.httpClient.post<string>('/api/publications/preview', request));
+  }
 }

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

@@ -8,7 +8,7 @@
                 <h1>Modification de l'article {{ publication.title }}</h1>
             </header>
 
-            <mat-tab-group dynamicHeight>
+            <mat-tab-group dynamicHeight (selectedIndexChange)="onTabChange($event)">
                 <mat-tab label="Edition">
                     <div class="form-content">
                         <div class="first-part">
@@ -66,7 +66,19 @@
                 </mat-tab>
 
                 <mat-tab label="Previewing">
-
+                    <div class="preview">
+                        @if ((isPreviewing$ | async) === true) {
+                            <h2>Preview is loading...</h2>
+                            <mat-spinner></mat-spinner>
+                        } @else {
+                            <img class="illustration" src="/pictures/{{ publication.illustrationId }}" />
+                            <header>
+                                <h1>{{ publication.title }}</h1>
+                                <h2>{{ publication.description }}</h2>
+                            </header>
+                            <main [innerHTML]="publication.parsedText"></main>
+                        }
+                    </div>
                 </mat-tab>
             </mat-tab-group>
             <footer>

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

@@ -11,7 +11,7 @@
         border-radius: .5em;    
         box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
 
-        header {
+        & > header {
             padding: 2em;
             background-color: #3f51b5;
             color: white;
@@ -144,4 +144,39 @@ button, a.button {
             cursor: pointer;
         }
     }
+}
+
+.preview {
+    display: flex;
+    flex-direction: column;
+    max-height: 80vh;
+    overflow-y: auto;
+    align-items: center;
+
+    .illustration {
+        height: 12em;
+        object-fit: cover;
+        transition: height .2s ease-in-out;
+
+        @media screen and (min-width: 450px) {
+            height: 15em;
+        }
+
+        @media screen and (min-width: 600px) {
+            height: 20em;
+        }
+
+        @media screen and (min-width: 750px) {
+            height: 25em;
+        }
+    }
+
+    header {
+        padding: 2em;
+    }
+
+    main {
+        padding: 2em;
+        text-align: justify;
+    }
 }

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

@@ -54,6 +54,10 @@ export class PublicationEditionComponent implements OnInit, OnDestroy {
   get isSaving$(): Observable<boolean> {
     return this.publicationEditionService.isSaving$;
   }
+  
+  get isPreviewing$(): Observable<boolean> {
+    return this.publicationEditionService.isPreviewing$;
+  }
 
   ngOnInit(): void {
     ['title', 'description', 'text'].forEach(fieldName => {
@@ -135,6 +139,11 @@ export class PublicationEditionComponent implements OnInit, OnDestroy {
       console.log(`cursor position updated: [${positionStart}, ${positionEnd}] (${selectedCharacterCount})`);
       this.publicationEditionService.editCursorPosition(positionStart, positionEnd);
     }
+  }
 
+  onTabChange(tabSelectedIndex: number): void {
+    if (tabSelectedIndex === 1) {
+      this.publicationEditionService.loadPreview();
+    }
   }
 }

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

@@ -64,6 +64,7 @@ export class PublicationEditionService implements OnDestroy {
     private stateSubject = new BehaviorSubject<PublicationEditionState>(copy(DEFAULT_STATE));
     private subscriptions: Subscription[] = [];
     private isSavingSubject = new BehaviorSubject<boolean>(false);
+    private isPreviewingSubject = new BehaviorSubject<boolean>(false);
 
     ngOnDestroy(): void {
         this.subscriptions.forEach(subscription => subscription.unsubscribe());
@@ -85,6 +86,10 @@ export class PublicationEditionService implements OnDestroy {
         return this.isSavingSubject.asObservable();
     }
 
+    get isPreviewing$(): Observable<boolean> {
+        return this.isPreviewingSubject.asObservable();
+    }
+
     get state$(): Observable<PublicationEditionState> {
         return this.stateSubject.asObservable();
     }
@@ -262,4 +267,19 @@ export class PublicationEditionService implements OnDestroy {
             })
             .finally(() => this.isSavingSubject.next(false));
     }
+
+    loadPreview(): void {
+        const state = this._state;
+
+        this.isPreviewingSubject.next(true);
+        this.publicationRestService.preview(state.publication.text)
+            .then(parsedText => {
+                state.publication.parsedText = parsedText;
+                this._save(state);
+            })
+            .catch(error => {
+                console.error(error);
+            })
+            .finally(() => this.isPreviewingSubject.next(false));
+    }
 }

frontend/src/styles.scss

@@ -8,3 +8,7 @@ body {
     display: flex;
     flex-direction: column;
 }
+
+img {
+	max-width: 100%;
+}