From 7cc3c739942f8eaa6f6200f8588f2384a5afc523 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 14 Jan 2021 10:56:30 -0800
Subject: [PATCH 01/12] Convert selection functions on cards to toggling, let
 service handle setting selected

Also because we need to capture mouseevents
---
 .../document-card-large.component.html                   | 4 ++--
 .../document-card-large/document-card-large.component.ts | 9 ++-------
 .../document-card-small.component.html                   | 4 ++--
 .../document-card-small/document-card-small.component.ts | 9 ++-------
 .../document-list/document-list.component.html           | 6 +++---
 .../components/document-list/document-list.component.ts  | 4 ++++
 src-ui/src/app/services/document-list-view.service.ts    | 3 +++
 7 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index 6f2742a8d..b4783ff24 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/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>
diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
index e3bd4b7f7..f8bb9f518 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.ts
+++ b/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()
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 c951bf281..192696a47 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,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>
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 ed69c5c50..5db0e30c0 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
@@ -14,14 +14,9 @@ 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
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 612238215..86aacc031 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
@@ -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>
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index fda99eb8d..1243e6e8a 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/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(() => {
diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 1bbcca38e..a852eda55 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/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) {

From e6961d52875e14cf1231e32016f95ba8789af18b Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Thu, 14 Jan 2021 14:10:23 -0800
Subject: [PATCH 02/12] Allow range selection with shift

---
 .../document-list/document-list.component.ts  |  4 +--
 .../services/document-list-view.service.ts    | 29 ++++++++++++++-----
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index 1243e6e8a..a3ec2d664 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -160,8 +160,8 @@ export class DocumentListComponent implements OnInit {
     this.filterRulesModified = modified
   }
 
-  toggleSelected(document: PaperlessDocument, event: Event): void {
-    this.list.toggleSelected(document)
+  toggleSelected(document: PaperlessDocument, event: MouseEvent): void {
+    this.list.toggleSelected(document, event.shiftKey)
   }
 
   clickTag(tagID: number) {
diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index a852eda55..407c81572 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -27,6 +27,7 @@ export class DocumentListViewService {
   currentPage = 1
   currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
   collectionSize: number
+  lastSelectedDocumentIndex: number
 
   /**
    * This is the current config for the document list. The service will always remember the last settings used for the document list.
@@ -108,6 +109,7 @@ export class DocumentListViewService {
           if (onFinish) {
             onFinish()
           }
+          this.lastSelectedDocumentIndex = null
           this.isReloading = false
         },
         error => {
@@ -218,6 +220,7 @@ export class DocumentListViewService {
 
   selectNone() {
     this.selected.clear()
+    this.lastSelectedDocumentIndex = null
   }
 
   reduceSelectionToFilter() {
@@ -249,15 +252,25 @@ export class DocumentListViewService {
     return this.selected.has(d.id)
   }
 
-  setSelected(d: PaperlessDocument, value: boolean) {
-    if (value) {
-      this.selected.add(d.id)
-    } else if (!value) {
-      this.selected.delete(d.id)
-    }
-  toggleSelected(d: PaperlessDocument): void {
-    if (this.selected.has(d.id)) this.selected.delete(d.id)
+  toggleSelected(d: PaperlessDocument, includeRange: boolean): void {
+    if (this.selected.has(d.id) && !includeRange) this.selected.delete(d.id)
     else this.selected.add(d.id)
+
+    if (includeRange && this.lastSelectedDocumentIndex !== null) {
+      const toIndex = this.documentIndexInCurrentView(d.id)
+      console.log('select from', this.lastSelectedDocumentIndex, 'to', toIndex);
+      this.documents.slice(Math.min(this.lastSelectedDocumentIndex, toIndex), Math.max(this.lastSelectedDocumentIndex, toIndex)).forEach(d => {
+        this.selected.add(d.id)
+      })
+    }
+
+    if (!includeRange || (includeRange && this.lastSelectedDocumentIndex == null)) {
+      this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
+    }
+  }
+
+  documentIndexInCurrentView(documentID: number): number {
+    return this.documents.map(d => d.id).indexOf(documentID)
   }
 
   constructor(private documentService: DocumentService, private settings: SettingsService, private router: Router) {

From 4b42c97d0a1318ab349bc32545ec3bf16eb86fda Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 01:10:01 -0800
Subject: [PATCH 03/12] Allow select anywhere in tr or card

---
 .../document-card-large.component.html               | 10 +++++-----
 .../document-card-small.component.html               | 12 ++++++------
 .../document-list/document-list.component.html       |  6 +++---
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index b4783ff24..c2ea9980b 100644
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/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="card mb-3 shadow-sm" [class.card-selected]="selected" [class.document-card]="selectable" (click)="this.toggleSelected.emit($event)">
   <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)="toggleSelected.emit($event)">
+      <img [src]="getThumbUrl()" class="card-img doc-img border-right rounded-left">
 
       <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" (click)="toggleSelected.emit($event)">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>
@@ -17,11 +17,11 @@
         <div class="d-flex justify-content-between align-items-center">
           <h5 class="card-title">
             <ng-container *ngIf="document.correspondent">
-              <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>
+              <a *ngIf="clickCorrespondent.observers.length ; else nolink" [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>
               <ng-template #nolink>{{(document.correspondent$ | async)?.name}}</ng-template>:
             </ng-container>
             {{document.title | documentTitle}}
-            <app-tag [tag]="t" linkTitle="Filter by tag" i18n-linkTitle *ngFor="let t of document.tags$ | async" class="ml-1" (click)="clickTag.emit(t.id)" [clickable]="clickTag.observers.length"></app-tag>
+            <app-tag [tag]="t" linkTitle="Filter by tag" i18n-linkTitle *ngFor="let t of document.tags$ | async" class="ml-1" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="clickTag.observers.length"></app-tag>
           </h5>
           <h5 class="card-title" *ngIf="document.archive_serial_number">#{{document.archive_serial_number}}</h5>
         </div>
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 192696a47..4f11b2a98 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,18 +1,18 @@
 <div class="col p-2 h-100">
-  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected">
+  <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected" (click)="this.toggleSelected.emit($event)">
     <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected">
-      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()" (click)="toggleSelected.emit($event)">
+      <img class="card-img doc-img rounded-top" [src]="getThumbUrl()">
 
       <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" (click)="toggleSelected.emit($event)">
+          <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (click)="this.toggleSelected.emit($event)">
           <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
         </div>
       </div>
 
       <div style="top: 0; right: 0; font-size: large" class="text-right position-absolute mr-1">
         <div *ngFor="let t of getTagsLimited$() | async">
-          <app-tag [tag]="t" (click)="clickTag.emit(t.id)" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
+          <app-tag [tag]="t" (click)="clickTag.emit(t.id);$event.stopPropagation()" [clickable]="true" linkTitle="Filter by tag" i18n-linkTitle></app-tag>
         </div>
         <div *ngIf="moreTags">
           <span class="badge badge-secondary">+ {{moreTags}}</span>
@@ -23,7 +23,7 @@
     <div class="card-body p-2">
       <p class="card-text">
         <ng-container *ngIf="document.correspondent">
-          <a [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent)" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
+          <a [routerLink]="" title="Filter by correspondent" i18n-title (click)="clickCorrespondent.emit(document.correspondent);$event.stopPropagation()" class="font-weight-bold">{{(document.correspondent$ | async)?.name}}</a>:
         </ng-container>
         {{document.title | documentTitle}} <span *ngIf="document.archive_serial_number">(#{{document.archive_serial_number}})</span>
       </p>
@@ -43,7 +43,7 @@
               <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
             </svg>
           </a>
-          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" i18n-title>
+          <a [href]="getDownloadUrl()" class="btn btn-sm btn-outline-secondary" title="Download" (click)="$event.stopPropagation()" i18n-title>
             <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
               <path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
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 86aacc031..18f39bfb5 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
@@ -135,7 +135,7 @@
       i18n>Added</th>
   </thead>
   <tbody>
-    <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" [ngClass]="list.isSelected(d) ? 'table-row-selected' : ''">
+    <tr *ngFor="let d of list.documents; trackBy: trackByDocumentId" (click)="toggleSelected(d, $event)" [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)" (click)="toggleSelected(d, $event)">
@@ -147,7 +147,7 @@
       </td>
       <td class="d-none d-md-table-cell">
         <ng-container *ngIf="d.correspondent">
-          <a [routerLink]="" (click)="clickCorrespondent(d.correspondent)" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
+          <a [routerLink]="" (click)="clickCorrespondent(d.correspondent);$event.stopPropagation()" title="Filter by correspondent">{{(d.correspondent$ | async)?.name}}</a>
         </ng-container>
       </td>
       <td>
@@ -156,7 +156,7 @@
       </td>
       <td class="d-none d-xl-table-cell">
         <ng-container *ngIf="d.document_type">
-          <a [routerLink]="" (click)="clickDocumentType(d.document_type)" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
+          <a [routerLink]="" (click)="clickDocumentType(d.document_type);$event.stopPropagation()" title="Filter by document type">{{(d.document_type$ | async)?.name}}</a>
         </ng-container>
       </td>
       <td>

From 6d786f89878f3d683778d71ce1a2e3582273f0b0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 01:11:06 -0800
Subject: [PATCH 04/12] remove log statement

---
 src-ui/src/app/services/document-list-view.service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 407c81572..13c362918 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -258,7 +258,6 @@ export class DocumentListViewService {
 
     if (includeRange && this.lastSelectedDocumentIndex !== null) {
       const toIndex = this.documentIndexInCurrentView(d.id)
-      console.log('select from', this.lastSelectedDocumentIndex, 'to', toIndex);
       this.documents.slice(Math.min(this.lastSelectedDocumentIndex, toIndex), Math.max(this.lastSelectedDocumentIndex, toIndex)).forEach(d => {
         this.selected.add(d.id)
       })

From f94da1cf2730cb520770de650ae9c21eed6f5556 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 01:54:33 -0800
Subject: [PATCH 05/12] Allow reversing selection range

---
 .../services/document-list-view.service.ts    | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 13c362918..bcfb5468f 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -28,6 +28,7 @@ export class DocumentListViewService {
   currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
   collectionSize: number
   lastSelectedDocumentIndex: number
+  lastSelectedDocumentToIndex: number
 
   /**
    * This is the current config for the document list. The service will always remember the last settings used for the document list.
@@ -109,7 +110,7 @@ export class DocumentListViewService {
           if (onFinish) {
             onFinish()
           }
-          this.lastSelectedDocumentIndex = null
+          this.lastSelectedDocumentIndex = this.lastSelectedDocumentToIndex = null
           this.isReloading = false
         },
         error => {
@@ -220,7 +221,7 @@ export class DocumentListViewService {
 
   selectNone() {
     this.selected.clear()
-    this.lastSelectedDocumentIndex = null
+    this.lastSelectedDocumentIndex = this.lastSelectedDocumentToIndex = null
   }
 
   reduceSelectionToFilter() {
@@ -253,17 +254,30 @@ export class DocumentListViewService {
   }
 
   toggleSelected(d: PaperlessDocument, includeRange: boolean): void {
-    if (this.selected.has(d.id) && !includeRange) this.selected.delete(d.id)
-    else this.selected.add(d.id)
+    if (!includeRange) {
+      // regular i.e. no shift key toggle
+      if (this.selected.has(d.id)) this.selected.delete(d.id)
+      else this.selected.add(d.id)
+    } else if (includeRange && this.lastSelectedDocumentIndex !== null) {
+      const documentToIndex = this.documentIndexInCurrentView(d.id)
+      const fromIndex = Math.min(this.lastSelectedDocumentIndex, documentToIndex)
+      const toIndex = Math.max(this.lastSelectedDocumentIndex, documentToIndex)
 
-    if (includeRange && this.lastSelectedDocumentIndex !== null) {
-      const toIndex = this.documentIndexInCurrentView(d.id)
-      this.documents.slice(Math.min(this.lastSelectedDocumentIndex, toIndex), Math.max(this.lastSelectedDocumentIndex, toIndex)).forEach(d => {
+      if ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex < this.lastSelectedDocumentIndex) ||
+          (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex > this.lastSelectedDocumentIndex)) {
+          // invert last selected
+          this.documents.slice(Math.min(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex), Math.max(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex) + 1).forEach(d => {
+            this.selected.delete(d.id)
+          })
+      }
+
+      this.documents.slice(fromIndex, toIndex + 1).forEach(d => {
         this.selected.add(d.id)
       })
+      this.lastSelectedDocumentToIndex = documentToIndex
     }
 
-    if (!includeRange || (includeRange && this.lastSelectedDocumentIndex == null)) {
+    if (!includeRange || (includeRange && this.lastSelectedDocumentIndex == null)) { // e.g. shift key but first click
       this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
     }
   }

From 48220ceeb8cdba13c81f86f3556163a44c4c3642 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 01:59:29 -0800
Subject: [PATCH 06/12] Refactor selection functions to two separate ones for
 clarity

---
 .../document-list/document-list.component.ts  |  3 ++-
 .../services/document-list-view.service.ts    | 20 +++++++++----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts
index a3ec2d664..509c0a735 100644
--- a/src-ui/src/app/components/document-list/document-list.component.ts
+++ b/src-ui/src/app/components/document-list/document-list.component.ts
@@ -161,7 +161,8 @@ export class DocumentListComponent implements OnInit {
   }
 
   toggleSelected(document: PaperlessDocument, event: MouseEvent): void {
-    this.list.toggleSelected(document, event.shiftKey)
+    if (!event.shiftKey) this.list.toggleSelected(document)
+    else this.list.selectRangeTo(document)
   }
 
   clickTag(tagID: number) {
diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index bcfb5468f..d2b9d75c2 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -253,19 +253,21 @@ export class DocumentListViewService {
     return this.selected.has(d.id)
   }
 
-  toggleSelected(d: PaperlessDocument, includeRange: boolean): void {
-    if (!includeRange) {
-      // regular i.e. no shift key toggle
-      if (this.selected.has(d.id)) this.selected.delete(d.id)
-      else this.selected.add(d.id)
-    } else if (includeRange && this.lastSelectedDocumentIndex !== null) {
+  toggleSelected(d: PaperlessDocument): void {
+    if (this.selected.has(d.id)) this.selected.delete(d.id)
+    else this.selected.add(d.id)
+    this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
+  }
+
+  selectRangeTo(d: PaperlessDocument) {
+    if (this.lastSelectedDocumentIndex !== null) {
       const documentToIndex = this.documentIndexInCurrentView(d.id)
       const fromIndex = Math.min(this.lastSelectedDocumentIndex, documentToIndex)
       const toIndex = Math.max(this.lastSelectedDocumentIndex, documentToIndex)
 
       if ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex < this.lastSelectedDocumentIndex) ||
           (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex > this.lastSelectedDocumentIndex)) {
-          // invert last selected
+          // new click is "opposite side" of anchor so we invert the old selection
           this.documents.slice(Math.min(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex), Math.max(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex) + 1).forEach(d => {
             this.selected.delete(d.id)
           })
@@ -275,9 +277,7 @@ export class DocumentListViewService {
         this.selected.add(d.id)
       })
       this.lastSelectedDocumentToIndex = documentToIndex
-    }
-
-    if (!includeRange || (includeRange && this.lastSelectedDocumentIndex == null)) { // e.g. shift key but first click
+    } else { // e.g. shift key but was first click
       this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
     }
   }

From 86376c8c5f112ce7f014f4988e3a332c7a02f993 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 02:09:13 -0800
Subject: [PATCH 07/12] Fix repeat range selections were clashing

---
 .../app/services/document-list-view.service.ts   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index d2b9d75c2..1ebf86d12 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -257,6 +257,7 @@ export class DocumentListViewService {
     if (this.selected.has(d.id)) this.selected.delete(d.id)
     else this.selected.add(d.id)
     this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
+    this.lastSelectedDocumentToIndex = null
   }
 
   selectRangeTo(d: PaperlessDocument) {
@@ -265,12 +266,15 @@ export class DocumentListViewService {
       const fromIndex = Math.min(this.lastSelectedDocumentIndex, documentToIndex)
       const toIndex = Math.max(this.lastSelectedDocumentIndex, documentToIndex)
 
-      if ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex < this.lastSelectedDocumentIndex) ||
-          (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex > this.lastSelectedDocumentIndex)) {
-          // new click is "opposite side" of anchor so we invert the old selection
-          this.documents.slice(Math.min(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex), Math.max(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex) + 1).forEach(d => {
-            this.selected.delete(d.id)
-          })
+      if (this.lastSelectedDocumentToIndex !== null &&
+          ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex < this.lastSelectedDocumentIndex) ||
+          (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex > this.lastSelectedDocumentIndex))) {
+        console.log('invert');
+
+        // new click is "opposite side" of anchor so we invert the old selection
+        this.documents.slice(Math.min(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex), Math.max(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex) + 1).forEach(d => {
+          this.selected.delete(d.id)
+        })
       }
 
       this.documents.slice(fromIndex, toIndex + 1).forEach(d => {

From 8d606b9f34ab13e38b3188e831c84c880c53fba7 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 02:13:21 -0800
Subject: [PATCH 08/12] Handle shift-clicking orignal item

---
 src-ui/src/app/services/document-list-view.service.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 1ebf86d12..c7ddbd44e 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -267,9 +267,8 @@ export class DocumentListViewService {
       const toIndex = Math.max(this.lastSelectedDocumentIndex, documentToIndex)
 
       if (this.lastSelectedDocumentToIndex !== null &&
-          ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex < this.lastSelectedDocumentIndex) ||
-          (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex > this.lastSelectedDocumentIndex))) {
-        console.log('invert');
+          ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex <= this.lastSelectedDocumentIndex) ||
+          (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex >= this.lastSelectedDocumentIndex))) {
 
         // new click is "opposite side" of anchor so we invert the old selection
         this.documents.slice(Math.min(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex), Math.max(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex) + 1).forEach(d => {
@@ -282,7 +281,7 @@ export class DocumentListViewService {
       })
       this.lastSelectedDocumentToIndex = documentToIndex
     } else { // e.g. shift key but was first click
-      this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
+      this.toggleSelected(d)
     }
   }
 

From 01cd4c7546dd645eda6b3090109a264580fcdde1 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 02:15:26 -0800
Subject: [PATCH 09/12] Refactor variable names for clarity

---
 .../services/document-list-view.service.ts    | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index c7ddbd44e..35b6296cc 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -27,8 +27,8 @@ export class DocumentListViewService {
   currentPage = 1
   currentPageSize: number = this.settings.get(SETTINGS_KEYS.DOCUMENT_LIST_SIZE)
   collectionSize: number
-  lastSelectedDocumentIndex: number
-  lastSelectedDocumentToIndex: number
+  rangeSelectionAnchorIndex: number
+  lastRangeSelectionToIndex: number
 
   /**
    * This is the current config for the document list. The service will always remember the last settings used for the document list.
@@ -110,7 +110,7 @@ export class DocumentListViewService {
           if (onFinish) {
             onFinish()
           }
-          this.lastSelectedDocumentIndex = this.lastSelectedDocumentToIndex = null
+          this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
           this.isReloading = false
         },
         error => {
@@ -221,7 +221,7 @@ export class DocumentListViewService {
 
   selectNone() {
     this.selected.clear()
-    this.lastSelectedDocumentIndex = this.lastSelectedDocumentToIndex = null
+    this.rangeSelectionAnchorIndex = this.lastRangeSelectionToIndex = null
   }
 
   reduceSelectionToFilter() {
@@ -256,22 +256,22 @@ export class DocumentListViewService {
   toggleSelected(d: PaperlessDocument): void {
     if (this.selected.has(d.id)) this.selected.delete(d.id)
     else this.selected.add(d.id)
-    this.lastSelectedDocumentIndex = this.documentIndexInCurrentView(d.id)
-    this.lastSelectedDocumentToIndex = null
+    this.rangeSelectionAnchorIndex = this.documentIndexInCurrentView(d.id)
+    this.lastRangeSelectionToIndex = null
   }
 
   selectRangeTo(d: PaperlessDocument) {
-    if (this.lastSelectedDocumentIndex !== null) {
+    if (this.rangeSelectionAnchorIndex !== null) {
       const documentToIndex = this.documentIndexInCurrentView(d.id)
-      const fromIndex = Math.min(this.lastSelectedDocumentIndex, documentToIndex)
-      const toIndex = Math.max(this.lastSelectedDocumentIndex, documentToIndex)
+      const fromIndex = Math.min(this.rangeSelectionAnchorIndex, documentToIndex)
+      const toIndex = Math.max(this.rangeSelectionAnchorIndex, documentToIndex)
 
-      if (this.lastSelectedDocumentToIndex !== null &&
-          ((this.lastSelectedDocumentToIndex > this.lastSelectedDocumentIndex && documentToIndex <= this.lastSelectedDocumentIndex) ||
-          (this.lastSelectedDocumentToIndex < this.lastSelectedDocumentIndex && documentToIndex >= this.lastSelectedDocumentIndex))) {
+      if (this.lastRangeSelectionToIndex !== null &&
+          ((this.lastRangeSelectionToIndex > this.rangeSelectionAnchorIndex && documentToIndex <= this.rangeSelectionAnchorIndex) ||
+          (this.lastRangeSelectionToIndex < this.rangeSelectionAnchorIndex && documentToIndex >= this.rangeSelectionAnchorIndex))) {
 
         // new click is "opposite side" of anchor so we invert the old selection
-        this.documents.slice(Math.min(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex), Math.max(this.lastSelectedDocumentIndex, this.lastSelectedDocumentToIndex) + 1).forEach(d => {
+        this.documents.slice(Math.min(this.rangeSelectionAnchorIndex, this.lastRangeSelectionToIndex), Math.max(this.rangeSelectionAnchorIndex, this.lastRangeSelectionToIndex) + 1).forEach(d => {
           this.selected.delete(d.id)
         })
       }
@@ -279,7 +279,7 @@ export class DocumentListViewService {
       this.documents.slice(fromIndex, toIndex + 1).forEach(d => {
         this.selected.add(d.id)
       })
-      this.lastSelectedDocumentToIndex = documentToIndex
+      this.lastRangeSelectionToIndex = documentToIndex
     } else { // e.g. shift key but was first click
       this.toggleSelected(d)
     }

From 59008ea765cbe8c69425a2add311a8a68f78b9a0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 02:22:10 -0800
Subject: [PATCH 10/12] remove new line =/

---
 src-ui/src/app/services/document-list-view.service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 35b6296cc..1fc5e09c5 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -269,7 +269,6 @@ export class DocumentListViewService {
       if (this.lastRangeSelectionToIndex !== null &&
           ((this.lastRangeSelectionToIndex > this.rangeSelectionAnchorIndex && documentToIndex <= this.rangeSelectionAnchorIndex) ||
           (this.lastRangeSelectionToIndex < this.rangeSelectionAnchorIndex && documentToIndex >= this.rangeSelectionAnchorIndex))) {
-
         // new click is "opposite side" of anchor so we invert the old selection
         this.documents.slice(Math.min(this.rangeSelectionAnchorIndex, this.lastRangeSelectionToIndex), Math.max(this.rangeSelectionAnchorIndex, this.lastRangeSelectionToIndex) + 1).forEach(d => {
           this.selected.delete(d.id)

From ef924e896b8b7740d166b4d0d27525a74e93b664 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 07:57:01 -0800
Subject: [PATCH 11/12] Fix reverting old selection in all cases by always
 doing it

---
 src-ui/src/app/services/document-list-view.service.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src-ui/src/app/services/document-list-view.service.ts b/src-ui/src/app/services/document-list-view.service.ts
index 1fc5e09c5..4eb0c276c 100644
--- a/src-ui/src/app/services/document-list-view.service.ts
+++ b/src-ui/src/app/services/document-list-view.service.ts
@@ -266,10 +266,8 @@ export class DocumentListViewService {
       const fromIndex = Math.min(this.rangeSelectionAnchorIndex, documentToIndex)
       const toIndex = Math.max(this.rangeSelectionAnchorIndex, documentToIndex)
 
-      if (this.lastRangeSelectionToIndex !== null &&
-          ((this.lastRangeSelectionToIndex > this.rangeSelectionAnchorIndex && documentToIndex <= this.rangeSelectionAnchorIndex) ||
-          (this.lastRangeSelectionToIndex < this.rangeSelectionAnchorIndex && documentToIndex >= this.rangeSelectionAnchorIndex))) {
-        // new click is "opposite side" of anchor so we invert the old selection
+      if (this.lastRangeSelectionToIndex !== null) {
+        // revert the old selection
         this.documents.slice(Math.min(this.rangeSelectionAnchorIndex, this.lastRangeSelectionToIndex), Math.max(this.rangeSelectionAnchorIndex, this.lastRangeSelectionToIndex) + 1).forEach(d => {
           this.selected.delete(d.id)
         })

From c31b6e63f5a3708bfc784f5217f3387feff48265 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Fri, 15 Jan 2021 16:13:22 -0800
Subject: [PATCH 12/12] Prevent text selection on table rows

---
 .../app/components/document-list/document-list.component.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss
index f90a94be4..28f765e29 100644
--- a/src-ui/src/app/components/document-list/document-list.component.scss
+++ b/src-ui/src/app/components/document-list/document-list.component.scss
@@ -1,5 +1,9 @@
 @import "/src/theme";
 
+tr {
+  user-select: none;
+}
+
 .table-row-selected {
   background-color: $primaryFaded;
 }