Convert selection functions on cards to toggling, let service handle setting selected

Also because we need to capture mouseevents

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

@@ -1,11 +1,11 @@
 <div class="card mb-3 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 doc-img-background rounded-left" [class.doc-img-background-selected]="selected">
-      <img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="setSelected(selectable ? !selected : false)">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left" (click)="toggleSelected.emit($event)">
 
       <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)="setSelected($event.target.checked)">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="toggleSelected.emit($event)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>

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

@@ -15,16 +15,11 @@ export class DocumentCardLargeComponent implements OnInit {
   @Input()
   selected = false
 
-  setSelected(value: boolean) {
-    this.selected = value
-    this.selectedChange.emit(value)
-  }
-
   @Output()
-  selectedChange = new EventEmitter<boolean>()
+  toggleSelected = new EventEmitter()
 
   get selectable() {
-    return this.selectedChange.observers.length > 0
+    return this.toggleSelected.observers.length > 0
   }
 
   @Input()

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

@@ -1,11 +1,11 @@
 <div class="col p-2 h-100">
   <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
     <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
-      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="setSelected(!selected)">
+      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="toggleSelected.emit($event)">
 
       <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
         <div class="custom-control custom-checkbox">
-          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="setSelected($event.target.checked)">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="toggleSelected.emit($event)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>

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

@@ -15,13 +15,8 @@ export class DocumentCardSmallComponent implements OnInit {
   @Input()
   selected = false
   
-  setSelected(value: boolean) {
-    this.selected = value
-    this.selectedChange.emit(value)
-  }
-
   @Output()
-  selectedChange = new EventEmitter<boolean>()
+  toggleSelected = new EventEmitter()
 
   @Input()
   document: PaperlessDocument

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

@@ -90,7 +90,7 @@
 </div>
 
 <div *ngIf="displayMode == 'largeCards'">
-  <app-document-card-large [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"   *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
+  <app-document-card-large [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" *ngFor="let d of list.documents; trackBy: trackByDocumentId" [document]="d" [details]="d.content" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)">
   </app-document-card-large>
 </div>
 
@@ -138,7 +138,7 @@
     <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
       <td>
         <div class="custom-control custom-checkbox">
-          <input type="checkbox" class="custom-control-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (change)="list.setSelected(d, $event.target.checked)">
+          <input type="checkbox" class="custom-control-input" id="docCheck{{d.id}}" [checked]="list.isSelected(d)" (click)="toggleSelected(d, $event)">
           <label class="custom-control-label" for="docCheck{{d.id}}"></label>
         </div>
       </td>
@@ -170,5 +170,5 @@
 </table>
 
 <div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
-  <app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
+  <app-document-card-small [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)"  [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
 </div>

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

@@ -160,6 +160,10 @@ export class DocumentListComponent implements OnInit {
     this.filterRulesModified = modified
   }
 
+  toggleSelected(document: PaperlessDocument, event: Event): void {
+    this.list.toggleSelected(document)
+  }
+
   clickTag(tagID: number) {
     this.list.selectNone()
     setTimeout(() => {

src-ui/src/app/services/document-list-view.service.ts

@@ -255,6 +255,9 @@ export class DocumentListViewService {
     } else if (!value) {
       this.selected.delete(d.id)
     }
+  toggleSelected(d: PaperlessDocument): void {
+    if (this.selected.has(d.id)) this.selected.delete(d.id)
+    else this.selected.add(d.id)
   }
 
   constructor(private documentService: DocumentService, private settings: SettingsService, private router: Router) {