added selection to the large cards

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html

@@ -1,7 +1,15 @@
-<div class="card mb-3 bg-light shadow-sm">
+<div class="card mb-3 bg-light shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable">
   <div class="row no-gutters">
-    <div class="col-md-2 d-none d-lg-block">
+    <div class="col-md-2 d-none d-lg-block doc-img-background" [class.doc-img-background-selected]="selected">
-      <img [src]="getThumbUrl()" class="card-img doc-img border-right">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right" (click)="selected = selectable ? !selected : false">
+
+      <div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
+        <div class="custom-control custom-checkbox">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked">
+          <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
+        </div>
+      </div>
+
     </div>
     <div class="col">
       <div class="card-body">

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss

@@ -1,5 +1,6 @@
+@import "/src/theme";
+
 .result-content {
-  color: darkgray;
   overflow-wrap: anywhere;
 }
 
@@ -8,7 +9,7 @@
   object-position: top;
   height: 100%;
   position: absolute;
-
+  mix-blend-mode: multiply;
 }
 
 .search-score-bar {
@@ -16,3 +17,23 @@
   height: 5px;
   margin-top: 2px;
 }
+
+.document-card-check {
+  display: none
+}
+
+.document-card:hover .document-card-check {
+  display: block;
+}
+
+.card-selected {
+  border-color: $primary;
+}
+
+.doc-img-background {
+  background-color: white;
+}
+
+.doc-img-background-selected {
+  background-color: $primaryFaded;
+}

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts

@@ -12,6 +12,25 @@ export class DocumentCardLargeComponent implements OnInit {
 
   constructor(private documentService: DocumentService, private sanitizer: DomSanitizer) { }
 
+  _selected = false
+
+  get selected() {
+    return this._selected
+  }
+
+  @Input()
+  set selected(value: boolean) {
+    this._selected = value
+    this.selectedChange.emit(value)
+  }
+
+  @Output()
+  selectedChange = new EventEmitter<boolean>()
+
+  get selectable() {
+    return this.selectedChange.observers.length > 0
+  }
+
   @Input()
   moreLikeThis: boolean = false
 

src-ui/src/app/components/document-list/document-list.component.html

@@ -97,7 +97,7 @@
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">
-  <app-document-card-large *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
+  <app-document-card-large [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"   *ngFor="let d of list.documents" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
   </app-document-card-large>
 </div>