Feature: merge tool UI

src-ui/package.json

@@ -28,6 +28,7 @@
     "ng2-pdf-viewer": "^6.3.2",
     "ngx-color": "^6.2.0",
     "ngx-cookie-service": "^10.1.1",
+    "ngx-drag-drop": "^2.0.0",
     "ngx-file-drop": "^10.0.0",
     "ngx-infinite-scroll": "^9.1.0",
     "rxjs": "~6.6.0",

src-ui/src/app/app.module.ts

@@ -35,6 +35,7 @@ import { DocumentCardSmallComponent } from './components/document-list/document-
 import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { TextComponent } from './components/common/input/text/text.component';
+import { InputDebounceComponent } from './components/common/input/debounce/input-debounce.component';
 import { SelectComponent } from './components/common/input/select/select.component';
 import { CheckComponent } from './components/common/input/check/check.component';
 import { SaveViewConfigDialogComponent } from './components/document-list/save-view-config-dialog/save-view-config-dialog.component';
@@ -66,6 +67,9 @@ import { ApiVersionInterceptor } from './interceptors/api-version.interceptor';
 import { ColorSliderModule } from 'ngx-color/slider';
 import { ColorComponent } from './components/common/input/color/color.component';
 import { SplitMergeComponent } from './components/split-merge/split-merge.component';
+import { DndModule } from 'ngx-drag-drop';
+import { DocumentChooserComponent } from './components/common/document-chooser/document-chooser.component';
+import { PageChooserComponent } from './components/common/page-chooser/page-chooser.component';
 
 import localeFr from '@angular/common/locales/fr';
 import localeNl from '@angular/common/locales/nl';
@@ -120,6 +124,7 @@ registerLocaleData(localeEs)
     DocumentCardSmallComponent,
     BulkEditorComponent,
     TextComponent,
+    InputDebounceComponent,
     SelectComponent,
     CheckComponent,
     SaveViewConfigDialogComponent,
@@ -142,7 +147,9 @@ registerLocaleData(localeEs)
     DateComponent,
     ColorComponent,
     DocumentAsnComponent,
-    SplitMergeComponent
+    SplitMergeComponent,
+    DocumentChooserComponent,
+    PageChooserComponent
   ],
   imports: [
     BrowserModule,
@@ -155,7 +162,8 @@ registerLocaleData(localeEs)
     InfiniteScrollModule,
     PdfViewerModule,
     NgSelectModule,
-    ColorSliderModule
+    ColorSliderModule,
+    DndModule
   ],
   providers: [
     DatePipe,

src-ui/src/app/components/common/document-chooser/document-chooser.component.html

@@ -0,0 +1,15 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title" i18n>Choose Documents</h4>
+  <button type="button" class="close" aria-label="Close" (click)="cancelClicked()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <div class="m-n2 row row-cols-paperless-cards">
+    <app-document-card-small [simpleCard]="true" [selected]="list.isSelected(d)" (toggleSelected)="toggleSelected(d, $event)" [document]="d" *ngFor="let d of list.documents"></app-document-card-small>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-danger" (click)="cancelClicked()" i18n>Cancel</button>
+  <button type="button" class="btn btn-outline-primary" [disabled]="list.selected.size == 0" (click)="confirmClicked.emit()" i18n>Add Selected</button>
+</div>

src-ui/src/app/components/common/document-chooser/document-chooser.component.scss

@@ -0,0 +1,28 @@
+@import "/src/theme";
+
+.modal-body {
+  max-height: 70vh;
+  overflow-y: scroll;
+}
+
+$paperless-card-breakpoints: (
+  0: 2, // xs
+  768px: 3, //md
+  992px: 4, //lg
+  1200px: 5, //xl
+  1400px: 6, // xxl
+  1600px: 7,
+  1800px: 8,
+  2000px: 9
+);
+
+.row-cols-paperless-cards {
+  @each $width, $n_cols in $paperless-card-breakpoints {
+    @media(min-width: $width) {
+      > * {
+        flex: 0 0 auto;
+        width: 100% / $n_cols;
+      }
+    }
+  }
+}

src-ui/src/app/components/common/document-chooser/document-chooser.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DocumentChooserComponent } from './document-chooser.component';
+
+describe('DocumentChooserComponent', () => {
+  let component: DocumentChooserComponent;
+  let fixture: ComponentFixture<DocumentChooserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DocumentChooserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DocumentChooserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src-ui/src/app/components/common/document-chooser/document-chooser.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { PaperlessDocument } from 'src/app/data/paperless-document';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
+
+@Component({
+  selector: 'app-document-chooser',
+  templateUrl: './document-chooser.component.html',
+  styleUrls: ['./document-chooser.component.scss']
+})
+export class DocumentChooserComponent implements OnInit {
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    public list: DocumentListViewService
+  ) { }
+
+  @Output()
+  public confirmClicked = new EventEmitter()
+
+  ngOnInit(): void {
+    this.list.selectNone()
+    this.list.activateSavedView(null)
+    this.list.reload()
+  }
+
+  cancelClicked() {
+    this.list.selectNone()
+    this.activeModal.close()
+  }
+
+  toggleSelected(d: PaperlessDocument, event: MouseEvent): void {
+    if (!event.shiftKey) this.list.toggleSelected(d)
+    else this.list.selectRangeTo(d)
+  }
+}

src-ui/src/app/components/common/input/debounce/input-debounce.component.html

@@ -0,0 +1,2 @@
+<input type="text" [class]="cssClasses" [placeholder]="placeholder" [(ngModel)]="inputValue" (keyup)="keyUp($event)" />
+<span *ngIf="allowClear && inputValue?.length > 0" class="clear-wrapper" title="Clear all" (click)="clear()"><span aria-hidden="true" class="clear">×</span></span>

src-ui/src/app/components/common/input/debounce/input-debounce.component.scss

@@ -0,0 +1,23 @@
+.clear-wrapper {
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  user-select: none;
+  width: 17px;
+  color: #999;
+
+  .clear {
+    display: inline-block;
+    font-size: 18px;
+    line-height: 1;
+    pointer-events: none;
+  }
+
+  &:hover .clear {
+    color: #D0021B;
+  }
+}

src-ui/src/app/components/common/input/debounce/input-debounce.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputDebounceComponent } from './text.component';
+
+describe('InputDebounceComponent', () => {
+  let component: InputDebounceComponent;
+  let fixture: ComponentFixture<InputDebounceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InputDebounceComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputDebounceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src-ui/src/app/components/common/input/debounce/input-debounce.component.ts

@@ -0,0 +1,66 @@
+import { Component, Input, Output, ElementRef, EventEmitter } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-input-debounce',
+  templateUrl: './input-debounce.component.html',
+  styleUrls: ['./input-debounce.component.scss']
+})
+export class InputDebounceComponent {
+
+  @Input()
+  placeholder: string
+
+  @Input()
+  delay: number = 500
+
+  @Input()
+  classes: string
+
+  @Input()
+  allowClear: boolean = true
+
+  @Input()
+  set pattern(regexStr: string) {
+    this._pattern = new RegExp(regexStr)
+  }
+
+  _pattern: RegExp
+
+  @Output()
+  value: EventEmitter<string> = new EventEmitter<string>()
+
+  @Input()
+  inputValue: string;
+
+  constructor(private elementRef: ElementRef) {
+    fromEvent(elementRef.nativeElement, 'keyup').pipe(
+      map(() => this.inputValue),
+      debounceTime(this.delay),
+      distinctUntilChanged()
+    ).subscribe(input =>
+      this.value.emit(input)
+    );
+  }
+
+  keyUp(event: any) {
+    if (!this._pattern) return
+    if (event.key.length == 1 && !this._pattern.test(event.key)) { // e.g. dont do for backspace
+      // invalid character, prevent input
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      this.inputValue = this.inputValue.slice(this.inputValue.length, 1)
+    }
+  }
+
+  get cssClasses(): string {
+    return 'form-control ' + this.classes
+  }
+
+  clear() {
+    this.inputValue = ''
+    this.value.emit(this.inputValue)
+  }
+
+}

src-ui/src/app/components/common/page-chooser/page-chooser.component.html

@@ -0,0 +1,13 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}: {{document.title}}</h4>
+  <button type="button" class="close" aria-label="Close" (click)="cancelClicked()">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <pdf-viewer class="page-chooser-viewer" [class.splitting]="splitting" [src]="previewUrl" [original-size]="false" [zoom]=".25" [autoresize]="true" [show-borders]="true" [show-all]="true" [render-text-mode]="2" (page-rendered)="afterPageRendered($event)" (after-load-complete)="pdfLoaded($event)"></pdf-viewer>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-danger" (click)="cancelClicked()" i18n>Cancel</button>
+  <button type="button" class="btn btn-outline-primary" (click)="confirmClicked()" [disabled]="pages.length == 0">{{title}}</button>
+</div>