add course cover images (500x500)

src/app/courses/add-courses/courses-add.component.html

@@ -55,6 +55,18 @@
           <mat-label i18n>Labels</mat-label>
           <planet-tag-input [formControl]="tags" [db]="dbName" mode="add"></planet-tag-input>
         </mat-form-field>
+        <div class="cover-field">
+          <label class="cover-label" i18n>Cover image</label>
+          <planet-file-upload
+            accept="image/*"
+            [imagePreview]="true"
+            [maxFiles]="1"
+            [typePills]="['IMG']"
+            hint="Recommended: a square image. Covers are cropped to fit." i18n-hint
+            [existingAttachments]="existingCoverAttachments"
+            (stateChange)="onCoverStateChange($event)">
+          </planet-file-upload>
+        </div>
       </form>
     </div>
     <div [ngClass]="{'steps-container': steps.length > 0 }">

src/app/courses/add-courses/courses-add.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
 import { AbstractControl, FormControl, FormGroup, NonNullableFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
-import { Subject, forkJoin, of, combineLatest, race, interval } from 'rxjs';
+import { Subject, forkJoin, of, combineLatest, race, interval, from } from 'rxjs';
 import { takeWhile, debounce, catchError, switchMap } from 'rxjs/operators';
 
+import { environment } from '../../../environments/environment';
 import { CouchService } from '../../shared/couchdb.service';
 import { CustomValidators } from '../../validators/custom-validators';
 import { ValidatorService } from '../../validators/validator.service';
@@ -30,6 +31,8 @@ import { MatAutocompleteTrigger, MatAutocomplete, MatOption } from '@angular/mat
 import { MatSelect } from '@angular/material/select';
 import { PlanetTagInputComponent } from '../../shared/forms/planet-tag-input.component';
 import { SubmitDirective } from '../../shared/submit.directive';
+import { FileUploadComponent, AttachmentInputState, ExistingAttachment } from '../../shared/forms/file-upload.component';
+import { couchAttachmentUrl, normalizeImage } from '../../shared/utils';
 
 interface CourseFormModel {
   courseTitle: FormControl<string>;
@@ -69,6 +72,7 @@ type DateValue = number | string | CouchService['datePlaceholder'];
     NgClass,
     CoursesStepComponent,
     MatButton,
+    FileUploadComponent,
     SubmitDirective
   ]
 })
@@ -81,6 +85,9 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   private stepsChange$ = new Subject<any[]>();
   private initialState = '';
   private _steps = [];
+  private preserveCoverStateUntilSubmit = false;
+  existingCoverAttachments: ExistingAttachment[] = [];
+  private coverState: AttachmentInputState = { retained: [], removed: [], added: [] };
   savedCourse: any = null;
   draftExists: boolean;
   courseForm: FormGroup<CourseFormModel>;
@@ -96,6 +103,7 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
   languageNames = languages.map(list => list.name);
   mockStep = { stepTitle: $localize`Add title`, description: '!!!' };
   @ViewChild(CoursesStepComponent) coursesStepComponent: CoursesStepComponent;
+  @ViewChild(FileUploadComponent) coverUploadComponent?: FileUploadComponent;
   get steps() {
     return this._steps;
   }
@@ -129,6 +137,8 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     const continued = this.route.snapshot.params.continue === 'true' && Object.keys(this.coursesService.course).length;
+    const continuedCourse = continued ? { ...this.coursesService.course } : null;
+    const continuedCoverState = continuedCourse?.coverState;
     forkJoin([
       this.pouchService.getDocEditing(this.dbName, this.courseId),
       this.couchService.get('courses/' + this.courseId).pipe(catchError((err) => of(err.error))),
@@ -137,6 +147,9 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
       if (saved.error !== 'not_found') {
         this.setDocumentInfo(saved);
         this.savedCourse = saved;
+        if (!continuedCoverState) {
+          this.setExistingCover(saved);
+        }
         this.pageType = 'Edit';
       } else {
         this.pageType = 'Add';
@@ -145,18 +158,21 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
       this.draftExists = draft !== undefined;
       const doc = draft === undefined ? saved : draft;
       this.setInitialTags(tags, this.documentInfo, draft);
-      if (!continued) {
+      if (continued) {
+        this.preserveCoverStateUntilSubmit = !!continuedCoverState;
+        this.setFormAndSteps(continuedCourse);
+        this.setCoverState(continuedCoverState || this.coverState);
+        this.submitAddedExam();
+      } else {
         this.setFormAndSteps({ form: doc, steps: doc.steps, tags: doc.tags, initialTags: this.coursesService.course.initialTags });
         this.setInitialState();
       }
     });
-    if (continued) {
-      this.setFormAndSteps(this.coursesService.course);
-      this.submitAddedExam();
-    }
     const returnRoute = this.router.createUrlTree([ '.', { continue: true } ], { relativeTo: this.route });
     this.coursesService.returnUrl = this.router.serializeUrl(returnRoute);
-    this.coursesService.course = { form: this.courseForm.value, steps: this.steps };
+    if (!continued) {
+      this.coursesService.course = { form: this.courseForm.value, steps: this.steps };
+    }
     this.coursesService.stepIndex = undefined;
   }
 
@@ -259,25 +275,80 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
     });
   }
 
+  onCoverStateChange(state: AttachmentInputState) {
+    if (this.preserveCoverStateUntilSubmit) {
+      return;
+    }
+    this.setCoverState(state);
+  }
+
+  setCoverState(state: AttachmentInputState) {
+    this.coverState = state;
+    this.coursesService.course = { coverState: state };
+  }
+
+  setExistingCover(course: any) {
+    const fileName = course.coverFileName;
+    const attachment = course._attachments?.[fileName];
+    this.existingCoverAttachments = fileName && attachment ? [ {
+      name: fileName,
+      contentType: attachment.content_type,
+      url: couchAttachmentUrl(environment.couchAddress, this.dbName, course._id, fileName)
+    } ] : [];
+    // Seed cover state directly so a save can't drop the cover if it fires before the upload child emits.
+    this.setCoverState({ retained: [ ...this.existingCoverAttachments ], removed: [], added: [] });
+  }
+
   updateCourse(courseInfo: FormGroup<CourseFormModel>['value'], shouldNavigate: boolean) {
     if (courseInfo.createdDate.constructor === Object) {
       courseInfo.createdDate = this.couchService.datePlaceholder;
     }
-    const newCourse = { ...this.convertMarkdownImagesText({ ...courseInfo, images: this.images }, this.steps), ...this.documentInfo };
-    this.couchService.updateDocument(
-      this.dbName, { ...newCourse, updatedDate: this.couchService.datePlaceholder }
-    ).pipe(switchMap((res: any) =>
-      forkJoin([
-        of(res),
-        this.couchService.bulkDocs(
-          'tags',
-          this.tagsService.tagBulkDocs(res.id, this.dbName, this.tags.value, this.coursesService.course.initialTags)
+    const newCourse: any = {
+      ...this.convertMarkdownImagesText({ ...courseInfo, images: this.images }, this.steps),
+      ...this.documentInfo
+    };
+    const addedCover = this.coverState?.added[0];
+    const retainedCover = this.coverState?.retained[0];
+    (addedCover ? from(normalizeImage(addedCover.file)) : of(null)).pipe(
+      switchMap(normalizedCover => {
+        if (normalizedCover) {
+          newCourse.coverFileName = normalizedCover.fileName;
+        } else if (retainedCover && this.savedCourse?._attachments?.[retainedCover.name]) {
+          // Preserve the existing attachment by sending back its stub on update.
+          newCourse.coverFileName = retainedCover.name;
+          newCourse._attachments = { [retainedCover.name]: this.savedCourse._attachments[retainedCover.name] };
+        } else {
+          delete newCourse.coverFileName;
+        }
+        return this.couchService.updateDocument(
+          this.dbName, { ...newCourse, updatedDate: this.couchService.datePlaceholder }
+        ).pipe(switchMap((res: any) =>
+          forkJoin([
+            of(res),
+            normalizedCover ?
+              this.couchService.putAttachment(
+                `${this.dbName}/${res.id}/${normalizedCover.fileName}?rev=${res.rev}`,
+                normalizedCover.file, { headers: { 'Content-Type': normalizedCover.contentType } }
+              ) :
+              of(null),
+            this.couchService.bulkDocs(
+              'tags',
+              this.tagsService.tagBulkDocs(res.id, this.dbName, this.tags.value, this.coursesService.course.initialTags)
+            )
+          ])
         )
-      ])
-    )).subscribe(([ courseRes, tagsRes ]) => {
+        );
+      })
+    ).subscribe(([ courseRes, attachmentRes ]) => {
+      // putAttachment bumps the revision, so carry its rev forward to avoid a stale _rev on the next save.
+      const savedRes = attachmentRes?.rev ?
+        { ...courseRes, rev: attachmentRes.rev, doc: { ...courseRes.doc, _rev: attachmentRes.rev } } :
+        courseRes;
       const message = (this.pageType === 'Edit' ? $localize`Edited course: ` : $localize`Added course: `) + courseInfo.courseTitle;
-      this.courseChangeComplete(message, courseRes, shouldNavigate);
+      this.courseChangeComplete(message, savedRes, shouldNavigate);
+      this.preserveCoverStateUntilSubmit = false;
     }, (err) => {
+      this.preserveCoverStateUntilSubmit = false;
       this.planetMessageService.showAlert($localize`There was an error saving this course`);
     });
   }
@@ -329,18 +400,22 @@ export class CoursesAddComponent implements OnInit, OnDestroy {
     if (!this.draftExists) {
       return;
     }
+    this.coverUploadComponent?.clear();
     if (this.savedCourse) {
       this.setFormAndSteps({
         form: this.savedCourse,
         steps: this.savedCourse.steps || [],
         tags: this.savedCourse.tags || []
       });
+      this.setExistingCover(this.savedCourse);
     } else {
       this.setFormAndSteps({
         form: { courseTitle: '', description: '', languageOfInstruction: '', gradeLevel: '', subjectLevel: '' },
         steps: [],
         tags: []
       });
+      this.existingCoverAttachments = [];
+      this.setCoverState({ retained: [], removed: [], added: [] });
     }
     this.coursesStepComponent.toList();
     this.setInitialState();

src/app/courses/add-courses/courses-add.scss

@@ -28,6 +28,18 @@
     background: v.$grey;
   }
 
+  .cover-field {
+    display: block;
+    width: 100%;
+    margin-bottom: 1rem;
+
+    .cover-label {
+      display: block;
+      margin-bottom: 0.5rem;
+      color: v.$grey-text;
+    }
+  }
+
   @media (max-width: v.$screen-md) {
     .form-spacing {
       justify-content: center;

src/app/courses/view-courses/courses-view-detail.component.html

@@ -1,3 +1,6 @@
+@if (courseDetail?.coverFileName) {
+  <img class="course-cover" [src]="coverImageUrl()" alt="Course cover" i18n-alt>
+}
 <planet-rating [rating]="courseDetail?.rating" [item]="courseDetail" [parent]="false" [ratingType]="'course'"></planet-rating>
 <p><b i18n>Subject Level:</b> <planet-language-label [options]="subjectOptions" [label]="courseDetail?.subjectLevel"></planet-language-label></p>
 <p><b i18n>Grade Level:</b> <planet-language-label [options]="gradeOptions" [label]="courseDetail?.gradeLevel"></planet-language-label></p>

src/app/courses/view-courses/courses-view-detail.component.ts

@@ -13,10 +13,20 @@ import { DatePipe } from '@angular/common';
 import { PlanetMarkdownComponent } from '../../shared/planet-markdown.component';
 import { CdkScrollable } from '@angular/cdk/scrolling';
 import { MatButton } from '@angular/material/button';
+import { environment } from '../../../environments/environment';
+import { couchAttachmentUrl } from '../../shared/utils';
 
 @Component({
   selector: 'planet-courses-detail',
   templateUrl: './courses-view-detail.component.html',
+  styles: [ `.course-cover {
+    display: block;
+    width: 180px;
+    height: 180px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+  }` ],
   imports: [PlanetRatingComponent, LanguageLabelComponent, PlanetMarkdownComponent, DatePipe]
 })
 export class CoursesViewDetailComponent implements OnChanges {
@@ -36,6 +46,13 @@ export class CoursesViewDetailComponent implements OnChanges {
   ngOnChanges() {
     this.imageSource = this.parent === true ? 'parent' : 'local';
   }
+
+  coverImageUrl() {
+    const base = this.imageSource === 'parent' ?
+      `${environment.parentProtocol}://${this.planetConfiguration.parentDomain}` :
+      environment.couchAddress;
+    return couchAttachmentUrl(base, 'courses', this.courseDetail._id, this.courseDetail.coverFileName);
+  }
 }
 
 @Component({

src/app/dashboard/dashboard-tile.component.html

@@ -27,17 +27,27 @@
           <ng-container *planetAuthorizedRoles="item.authorization || '_any'">
             <div
               class="dashboard-item"
-              [ngClass]="{'bg-grey': even, 'cursor-pointer': item.link && !recentlyDragged, 'accordion-item': isAccordionMode}"
+              [ngClass]="{
+                'bg-grey': even,
+                'cursor-pointer': item.link && !recentlyDragged,
+                'accordion-item': isAccordionMode,
+                'has-course-cover': cardType === 'myCourses' && item.coverFileName
+              }"
               [routerLink]="recentlyDragged ? null : item.link"
               [matTooltip]="item.tooltip"
               cdkDrag
               [cdkDragDisabled]="cardType==='myLife' || isAccordionMode"
               #dashboardTile
               >
+              @if (cardType === 'myCourses' && item.coverFileName) {
+                <div class="dashboard-course-cover">
+                  <img [src]="coverImageUrl(item)" alt="Course cover" i18n-alt>
+                </div>
+              }
               <p [matBadge]="item.badge" [matBadgeHidden]="item.badge===0" matBadgeOverlap="false" matBadgePosition="before">
                 {{item.firstLine}}
               </p>
-              <p class="dashboard-text" [ngStyle]="{ '-webkit-line-clamp': isAccordionMode ? 'none' : tileLines,'word-wrap': 'break-word' }">
+              <p class="dashboard-text" [ngStyle]="{ '-webkit-line-clamp': dashboardTextLines(item),'word-wrap': 'break-word' }">
                 {{(cardType === 'myLife' && isAccordionMode) ? '' : (item.title | truncateText:50)}}
               </p>
               @if (cardType!=='myLife' && !item?.canRemove) {

src/app/dashboard/dashboard-tile.component.ts

@@ -19,8 +19,10 @@ import { AuthorizedRolesDirective } from '../shared/authorized-roles.directive';
 import { MatTooltip } from '@angular/material/tooltip';
 import { MatBadge } from '@angular/material/badge';
 import { MatIconButton } from '@angular/material/button';
-import { PlanetLoadingSpinnerComponent } from '../shared/planet-loading-spinner.component';
-import { TruncateTextPipe } from '../shared/truncate-text.pipe';
+import { PlanetLoadingSpinnerComponent } from '../shared/planet-loading-spinner.component';
+import { TruncateTextPipe } from '../shared/truncate-text.pipe';
+import { environment } from '../../environments/environment';
+import { couchAttachmentUrl } from '../shared/utils';
 
 @Component({
   selector: 'planet-dashboard-tile-title',
@@ -213,7 +215,18 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
     }, 300);
   }
 
-  getRemoveTooltip(cardTitle: string): string {
-    return $localize`Remove from ${cardTitle}`;
-  }
-}
+  getRemoveTooltip(cardTitle: string): string {
+    return $localize`Remove from ${cardTitle}`;
+  }
+
+  dashboardTextLines(item: any): number | 'none' {
+    if (this.isAccordionMode) {
+      return 'none';
+    }
+    return this.cardType === 'myCourses' && item.coverFileName ? 2 : this.tileLines;
+  }
+
+  coverImageUrl(item: any): string {
+    return couchAttachmentUrl(environment.couchAddress, 'courses', item._id, item.coverFileName);
+  }
+}

src/app/dashboard/dashboard-tile.scss

@@ -69,13 +69,32 @@
             margin: 0;
           }
 
-          .dashboard-text {
-            display: -webkit-box;
-            width: calc(125px - 1rem);
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-          }
-
+          .dashboard-text {
+            display: -webkit-box;
+            width: calc(125px - 1rem);
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+
+          &.has-course-cover {
+            padding: 0.5rem;
+          }
+
+          .dashboard-course-cover {
+            display: flex;
+            justify-content: center;
+            width: 100%;
+            margin-bottom: 0.25rem;
+
+            img {
+              width: 48px;
+              height: 48px;
+              object-fit: cover;
+              border-radius: 4px;
+              border: 1px solid v.$grey;
+            }
+          }
+
         }
       }
     }