From b0cc42fddd8578fdadd8a4816787a73260d7c338 Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry@protonmail.com>
Date: Wed, 4 Sep 2024 10:26:47 +0200
Subject: [PATCH] Implementaiton of preview tab.

---
 .../publication/PublicationUseCases.java      |  4 ++
 .../publication/PublicationController.java    |  6 +++
 .../model/PreviewContentRequest.java          |  5 +++
 .../publications/publication.rest-service.ts  |  5 +++
 .../publication-edition.component.html        | 16 +++++++-
 .../publication-edition.component.scss        | 37 ++++++++++++++++++-
 .../publication-edition.component.ts          |  9 +++++
 .../publication-edition.service.ts            | 20 ++++++++++
 frontend/src/styles.scss                      |  4 ++
 9 files changed, 103 insertions(+), 3 deletions(-)
 create mode 100644 backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/PreviewContentRequest.java

diff --git a/backend/codiki-application/src/main/java/org/codiki/application/publication/PublicationUseCases.java b/backend/codiki-application/src/main/java/org/codiki/application/publication/PublicationUseCases.java
index 6795986..655015e 100644
--- a/backend/codiki-application/src/main/java/org/codiki/application/publication/PublicationUseCases.java
+++ b/backend/codiki-application/src/main/java/org/codiki/application/publication/PublicationUseCases.java
@@ -195,4 +195,8 @@ public class PublicationUseCases {
     public List<Publication> getLatest() {
         return publicationPort.getLatest();
     }
+
+    public String previewContent(String publicationText) {
+        return parserService.parse(publicationText);
+    }
 }
diff --git a/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/PublicationController.java b/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/PublicationController.java
index dbeb1fc..7dd9560 100644
--- a/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/PublicationController.java
+++ b/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/PublicationController.java
@@ -11,6 +11,7 @@ import org.codiki.domain.publication.exception.NoPublicationSearchResultExceptio
 import org.codiki.domain.publication.exception.PublicationNotFoundException;
 import org.codiki.domain.publication.model.Publication;
 import org.codiki.domain.publication.model.PublicationEditionRequest;
+import org.codiki.exposition.publication.model.PreviewContentRequest;
 import org.codiki.exposition.publication.model.PublicationDto;
 import org.codiki.exposition.publication.model.PublicationEditionRequestDto;
 import org.springframework.web.bind.annotation.DeleteMapping;
@@ -91,4 +92,9 @@ public class PublicationController {
 
         return publications;
     }
+
+    @PostMapping("/preview")
+    public String previewPublicationContent(@RequestBody PreviewContentRequest request) {
+        return publicationUseCases.previewContent(request.text());
+    }
 }
diff --git a/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/PreviewContentRequest.java b/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/PreviewContentRequest.java
new file mode 100644
index 0000000..0db7814
--- /dev/null
+++ b/backend/codiki-exposition/src/main/java/org/codiki/exposition/publication/model/PreviewContentRequest.java
@@ -0,0 +1,5 @@
+package org.codiki.exposition.publication.model;
+
+public record PreviewContentRequest(
+        String text
+) {}
diff --git a/frontend/src/app/core/rest-services/publications/publication.rest-service.ts b/frontend/src/app/core/rest-services/publications/publication.rest-service.ts
index 20925f3..8c47858 100644
--- a/frontend/src/app/core/rest-services/publications/publication.rest-service.ts
+++ b/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));
+  }
 }
diff --git a/frontend/src/app/pages/publication-edition/publication-edition.component.html b/frontend/src/app/pages/publication-edition/publication-edition.component.html
index 1dffaa9..242b1f8 100644
--- a/frontend/src/app/pages/publication-edition/publication-edition.component.html
+++ b/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>
diff --git a/frontend/src/app/pages/publication-edition/publication-edition.component.scss b/frontend/src/app/pages/publication-edition/publication-edition.component.scss
index ca7e2e2..6256654 100644
--- a/frontend/src/app/pages/publication-edition/publication-edition.component.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/app/pages/publication-edition/publication-edition.component.ts b/frontend/src/app/pages/publication-edition/publication-edition.component.ts
index 2219c26..2300241 100644
--- a/frontend/src/app/pages/publication-edition/publication-edition.component.ts
+++ b/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();
+    }
   }
 }
\ No newline at end of file
diff --git a/frontend/src/app/pages/publication-edition/publication-edition.service.ts b/frontend/src/app/pages/publication-edition/publication-edition.service.ts
index a1b2b58..4237efb 100644
--- a/frontend/src/app/pages/publication-edition/publication-edition.service.ts
+++ b/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));
+    }
 }
\ No newline at end of file
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 0837fd5..a8021ad 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -8,3 +8,7 @@ body {
     display: flex;
     flex-direction: column;
 }
+
+img {
+	max-width: 100%;
+}
\ No newline at end of file