Implemented basic thumbnail support for DR library

Also increased the file transfer capacity of the nginx server to 15mb

api/src/endpoint/drStory/verifiedCollection.ts

@@ -16,12 +16,14 @@ const handler =  async (req, res) => {
     {$project: {
       title: 1,
       ownerDoc: {$first: '$ownerDocArr'},
-      collections: 1
+      collections: 1,
+      thumbnail: 1,
     }},
     {$project: {
       title: 1,
       ownerRole: '$ownerDoc.role',
-      collections: 1
+      collections: 1,
+      thumbnail: 1,
     }},
     {$match: {
       ownerRole: "ADMIN"

api/src/models/drStory.ts

@@ -18,6 +18,9 @@ const DigitalReaderStory = new Schema(
       collections: {
         type: Array, // possibility for multiple dialects
       },
+      thumbnail: {
+        type: String,
+      },
       story :
         {
           content: {

ngapp/src/app/core/services/dr-story.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 //import { DigitalReaderStory } from 'app/core/models/dr-story';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { Router } from '@angular/router';
 import { AuthenticationService } from 'app/core/services/authentication.service';
@@ -9,7 +9,7 @@ import { EngagementService } from 'app/core/services/engagement.service';
 import { EventType } from 'app/core/models/event';
 import { TranslationService } from 'app/core/services/translation.service';
 import config from 'abairconfig';
-import { firstValueFrom, tap } from 'rxjs';
+import { firstValueFrom, tap, catchError } from 'rxjs';
 
 import { DigitalReaderStory } from 'app/core/models/drStory';
 
@@ -105,9 +105,18 @@ export class DigitalReaderStoryService {
     // convert the uploaded file to html
     const formData = new FormData();
     formData.append('docx', req);
+
+    //try {
     const convertedHtml = await firstValueFrom(
       this.http.post<string>(this.baseUrl + 'digitalReader/docx2html', formData)
-    );
+    ).catch((err: HttpErrorResponse) => {
+      alert(err.error)
+      alert(err)
+      //throw new Error()
+      return null;
+    });
+
+    if (!convertedHtml) return null
 
     // TODO : add html sanitisation !!*******
     // *CODE GOES HERE*
@@ -141,20 +150,26 @@ export class DigitalReaderStoryService {
     console.log(constructJSON(parsedSegmentedDoc.body))*/
 
     return parsedSegmentedDoc
+
+    /*} catch (error) {
+      alert(error.message)
+    }*/
   }
 
-  saveDRStory(title: string, /*dialects: Array<string>*/collections: Array<string>, story: Object, isPublic: Boolean) {
+  saveDRStory(title: string, /*dialects: Array<string>*/collections: Array<string>, thumbnail:string, story: Object, isPublic: Boolean) {
     const drStoryObj = {
       title: title,
       collections: collections,
+      thumbnail: thumbnail,
       //text: text,
       story: story,
       public: isPublic,
       //author: author,
       //createdWithPrompts: createdWithPrompts,
       //activeRecording: null
     };
-    console.log(drStoryObj);
+    console.log('here!')
+    console.log(drStoryObj.thumbnail);
     this.engagement.addEvent(EventType['CREATE-DR-STORY'], {storyObject: drStoryObj});
     return this.http.post<{id: string}>(this.baseUrl + 'drStory/create', drStoryObj);
   }

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.html

@@ -15,10 +15,19 @@ <h2 mat-dialog-title>{{ data.title }}</h2>
       <br>
       <div class="dialectContainer">
         <!--<mat-checkbox *ngFor="let dialect of data.data[1]" [(ngModel)]="inputs.dialects[dialectMapping[dialect]]"><div class="viewStoryBtn" >{{ dialect }}</div></mat-checkbox>-->
-        <mat-checkbox *ngFor="let collection of data.data[1]" [(ngModel)]="inputs.collections[collection]"><div class="viewStoryBtn" >{{ collection }}</div></mat-checkbox>
+        <mat-checkbox *ngFor="let collection of data.data[1]" [(ngModel)]="inputs.collections[collection]"><div class="selectionBtn" >{{ collection }}</div></mat-checkbox>
       </div>
     </div> <br>
-    {{ data.data[2][2] }}: 
+
+    {{ data.data[2][2] }}: <br>
+    <div>
+      <!--[(ngModel)]="inputs.thumbnail"-->
+      <input type="file" id="thumbnail"
+      (change)="processThumbnail($event.target.files)">
+      <label for="thumbnail" class="selectionBtn"> (Optional) Upload a .png file </label>
+      <div *ngIf="this.thumbnail" class="singleLineText"> {{ this.thumbnail.name }}</div>
+    </div> <br>
+    {{ data.data[2][3] }}: 
     <mat-checkbox [(ngModel)]="inputs.public"></mat-checkbox>
   </div>
 

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.scss

@@ -65,11 +65,25 @@ h2 {
   padding-right: 10px;
 }*/
 
-.viewStoryBtn {
+.selectionBtn {
     padding: 7px;
     background-color: var(--scealai-green);
     color: white;
     border-radius: 4px;
     text-decoration:none;
-    text-align: center;
+    text-align: center;   
+}
+
+input[type="file"] {
+  display: none;
+}
+
+.selectionBtn:hover {
+  cursor: pointer;
+}
+
+.singleLineText {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }

ngapp/src/app/dialogs/dr-story-creation-dialog/dr-story-creation-dialog.component.ts

@@ -33,6 +33,7 @@ export class DigitalReaderStoryCreationDialogComponent {
   public dialectMapping: Object;
   public collectionOptions: Array<string>;
   public inputs: Object;
+  public thumbnail: File | null = null;
 
   //pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
   copyIconClicked: boolean = false;
@@ -59,8 +60,34 @@ export class DigitalReaderStoryCreationDialogComponent {
                     donegal: false
                   },*/
                   collections: this.data.collections,
+                  thumbnail: '',
                   public: false
                 }
               }
+
+  processThumbnail(files: FileList) {
+    if (files.length>0) {
+      const tmp = files[0]
+      console.log(tmp)
+      if (tmp.type.startsWith("image/")) {
+
+        this.thumbnail = tmp;
+
+        console.log(this.thumbnail);
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          //img.src = e.target.result;
+          //console.log(e.target?.result)
+          this.inputs['thumbnail'] = e.target?.result
+        };
+        reader.readAsDataURL(tmp);
+      } else {
+        alert(this.ts.l.must_be_image)
+      }
+    } else {
+      this.thumbnail = null;
+    }
+  }
 }
 

ngapp/src/app/nav-bar/digital-reader/digital-reader.component.ts

@@ -92,14 +92,14 @@ export class DigitalReaderComponent implements OnInit {
 
   async convertDocxToHTML() {
 
-    //only for testing
     if (this.docxFile) {
         this.convertedHTMLDoc = await this.drStoryService.processUploadedFile(this.docxFile)
 
         if (this.convertedHTMLDoc instanceof Document) {
             console.log('file converted successfully!')
         } else {
-            alert('could not convert docx file')
+            this.docxFile = null
+            this.storyState = ''
         }
     }
 
@@ -118,7 +118,7 @@ export class DigitalReaderComponent implements OnInit {
           this.ts.l.enter_title,
           //this.dialectOptions,
           this.adminCollectionOptions,
-          [this.ts.l.title, this.ts.l.collections_default, this.ts.l.make_public],
+          [this.ts.l.title, this.ts.l.collections_default, this.ts.l.thumbnail, this.ts.l.make_public],
         ],
         collections: this.defaultCollectionSelections,
         userRole: this.user.role,
@@ -129,6 +129,7 @@ export class DigitalReaderComponent implements OnInit {
     });
 
     console.log(this.dialogRef)
+    console.log(this.user.role)
 
     this.dialogRef.afterClosed().subscribe(async (res: any) => {
 
@@ -166,6 +167,9 @@ export class DigitalReaderComponent implements OnInit {
           if (Array.isArray(collections) && collections.length===0 && user && user.role=='ADMIN')
             collections = ['other_stories']
 
+          let thumbnail = ''
+          if (res.thumbnail) thumbnail = res.thumbnail
+
           //if (Array.isArray(dialects) && dialects.length!==0) {
 
           this.storyState = 'processing'
@@ -189,7 +193,7 @@ export class DigitalReaderComponent implements OnInit {
 
               this.drStoryService
                   //.saveDRStory(res.title, dialects, story, res.public)
-                  .saveDRStory(res.title, collections, story, res.public)
+                  .saveDRStory(res.title, collections, thumbnail, story, res.public)
                   .subscribe({
                   next: () => {
                       console.log('a response was received')

ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.html

@@ -41,7 +41,9 @@
         </div>
 
         <div class="imgContainer">
-          <img src="assets/img/logo-S.png" class="storyImg" alt="image">
+          <!--<img src="assets/img/logo-S.png" class="storyImg" alt="image">-->
+          <!--<img [src]="story.thumbnail==''? 'assets/img/logo-S.png' : story.thumbnail" class="storyImg" alt="image">-->
+          <img [src]="story.thumbnail==''?'assets/img/logo-S.png':story.thumbnail" class="storyImg" alt="image">
         </div>
 
         <!-- title container-->

ngapp/src/app/nav-bar/dr-story-drawer/dr-story-drawer.component.scss

@@ -97,7 +97,8 @@
 
 .imgContainer {
     width: auto;
-    height: 200px;
+    //height: 200px;
+    height: 180px;
 }
 
 .storyImg {

ngapp/src/app/translation.ts

@@ -212,6 +212,12 @@ const translations = {
   collections_default: {
     ga: 'Cnuasaigh (is é "other_stories" an réamhshocrú)',
     en: 'Collections (default: "other_stories")' },
+  thumbnail: {
+    ga: 'mioníomhá',
+    en: 'thumbnail' },
+  must_be_image: {
+    ga: 'Caithfidh an comhad bheith ina íomhá (.png, .jpg, .jpeg)',
+    en: 'Uploaded file must be an image (.png, .jpg, .jpeg)'},
   /*adminStoryCollectionOpts: {
     leaving_cert_stories: {
       ga: 'Prós Comónta Ainmnithe don Ardteistiméireacht',