Add BCF snapshot as cover image to WP cards

(cherry picked from commit 3eeebfb88d)

frontend/src/app/components/wp-card-view/wp-card-view.component.html

@@ -44,6 +44,8 @@
       </div>
     </wp-edit-field-group>
 
+    <img *ngIf="this.bcfSnapshotPath(wp)" [src]="this.bcfSnapshotPath(wp)" class="wp-card--cover-image">
+
     <div *ngIf="!wp.isNew"
          class="wp-card--content">
       <span [textContent]="wpTypeAttribute(wp)"

frontend/src/app/components/wp-card-view/wp-card-view.component.sass

@@ -89,3 +89,9 @@ wp-edit-field
 
 .wp-inline-create--reference-container
   margin-bottom: 3rem
+
+.wp-card--cover-image
+  display: block
+  margin: -10px -10px 10px
+  width: calc(100% + 10px + 10px)
+  max-width: calc(100% + 10px + 10px)

frontend/src/app/components/wp-card-view/wp-card-view.component.ts

@@ -33,10 +33,10 @@ import {AuthorisationService} from "core-app/modules/common/model-auth/model-aut
 import {StateService} from "@uirouter/core";
 import {States} from "core-components/states.service";
 import {RequestSwitchmap} from "core-app/helpers/rxjs/request-switchmap";
+import {PathHelperService} from "core-app/modules/common/path-helper/path-helper.service";
 import {filter} from 'rxjs/operators';
 import {CausedUpdatesService} from "core-app/modules/boards/board/caused-updates/caused-updates.service";
 
-
 @Component({
   selector: 'wp-card-view',
   styleUrls: ['./wp-card-view.component.sass'],
@@ -99,8 +99,9 @@ export class WorkPackageCardViewComponent  implements OnInit {
               readonly dragService:DragAndDropService,
               readonly reorderService:ReorderQueryService,
               readonly authorisationService:AuthorisationService,
+              readonly causedUpdates:CausedUpdatesService,
               readonly cdRef:ChangeDetectorRef,
-              readonly causedUpdates:CausedUpdatesService) {
+              readonly pathHelper:PathHelperService) {
   }
 
   ngOnInit() {
@@ -163,6 +164,15 @@ export class WorkPackageCardViewComponent  implements OnInit {
     return wp.subject;
   }
 
+  public bcfSnapshotPath(wp:WorkPackageResource) {
+    let vp = _.get(wp, 'bcf.viewpoints[0]');
+    if (vp) {
+      return this.pathHelper.attachmentDownloadPath(vp.id, vp.file_name);
+    } else {
+      return null;
+    }
+  }
+
   public cardHighlightingClass(wp:WorkPackageResource) {
     return this.cardHighlighting(wp);
   }