From 7906d8fef15ec985d066e5022120c55448592d36 Mon Sep 17 00:00:00 2001
From: jonaswinkler <jonas.winkler@jpwinkler.de>
Date: Sun, 13 Dec 2020 14:10:55 +0100
Subject: [PATCH] selection for small cards

---
 .../document-card-small.component.html            | 10 +++++-----
 .../document-card-small.component.scss            | 11 +++++++++++
 .../document-card-small.component.ts              | 15 ++++++++++++++-
 .../document-list/document-list.component.html    |  2 +-
 src-ui/src/theme.scss                             |  1 +
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 6909a24fb..b78fedfe3 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,12 +1,12 @@
 <div class="col p-2 h-100 document-card" style="width: 16rem;">
-  <div class="card h-100 shadow-sm">
-    <div class="border-bottom">
-      <img class="card-img doc-img" [src]="getThumbUrl()">
+  <div class="card h-100 shadow-sm" [class.card-selected]="selected">
+    <div class="border-bottom" [class.doc-img-background-selected]="selected">
+      <img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected">
 
       <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}}" [(ngModel)]="selected">
-          <label class="custom-control-label" for="smallCardCheck{{document.id}}">L</label>
+          <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>
 
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index ba7190615..36db2203c 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -1,7 +1,10 @@
+@import "/src/theme";
+
 .doc-img {
   object-fit: cover;
   object-position: top;
   height: 200px;
+  mix-blend-mode: multiply;
 }
 
 .document-card-check {
@@ -10,4 +13,12 @@
 
 .document-card:hover .document-card-check {
   display: block;
+}
+
+.card-selected {
+  border-color: $primary;
+}
+
+.doc-img-background-selected {
+  background-color: $primaryFaded;
 }
\ No newline at end of file
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
index 037c02cf0..5d664697b 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.ts
@@ -13,7 +13,20 @@ export class DocumentCardSmallComponent implements OnInit {
 
   constructor(private documentService: DocumentService) { }
 
-  selected = false
+  _selected = false
+
+  get selected() {
+    return this._selected
+  }
+
+  @Input()
+  set selected(value: boolean) {
+    this._selected = value
+    this.selectedChange.emit(value)
+  }
+
+  @Output()
+  selectedChange = new EventEmitter<boolean>()
 
   @Input()
   document: PaperlessDocument
diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html
index a87a89bbf..0c3674421 100644
--- a/src-ui/src/app/components/document-list/document-list.component.html
+++ b/src-ui/src/app/components/document-list/document-list.component.html
@@ -155,5 +155,5 @@
 
 
 <div class=" m-n2 row" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [document]="d" *ngFor="let d of list.documents" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)"></app-document-card-small>    
+  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents" (clickTag)="filterByTag($event)" (clickCorrespondent)="filterByCorrespondent($event)"></app-document-card-small>    
 </div>
diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 88f3ae30f..df2aea003 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -1,5 +1,6 @@
 $paperless-green: #17541f;
 $primary: #17541f;
+$primaryFaded: #d1ddd2;
 
 $theme-colors: (
   "primary": $primary