initial work on merge tool frontend

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

@@ -11,12 +11,14 @@ import { SettingsComponent } from './components/manage/settings/settings.compone
 import { TagListComponent } from './components/manage/tag-list/tag-list.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { SearchComponent } from './components/search/search.component';
+import { SplitMergeComponent } from './components/split-merge/split-merge.component';
 
 const routes: Routes = [
   {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
   {path: '', component: AppFrameComponent, children: [
     {path: 'dashboard', component: DashboardComponent },
     {path: 'documents', component: DocumentListComponent },
+    {path: 'split_merge', component: SplitMergeComponent },
     {path: 'view/:id', component: DocumentListComponent },
     {path: 'search', component: SearchComponent },
     {path: 'documents/:id', component: DocumentDetailComponent },
@@ -26,7 +28,7 @@ const routes: Routes = [
     {path: 'correspondents', component: CorrespondentListComponent },
     {path: 'logs', component: LogsComponent },
     {path: 'settings', component: SettingsComponent },
-  ]}, 
+  ]},
 
   {path: '404', component: NotFoundComponent},
   {path: '**', redirectTo: '/404', pathMatch: 'full'}

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

@@ -65,6 +65,7 @@ import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter'
 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 localeFr from '@angular/common/locales/fr';
 import localeNl from '@angular/common/locales/nl';
@@ -135,7 +136,8 @@ registerLocaleData(localeRu)
     SafePipe,
     CustomDatePipe,
     DateComponent,
-    ColorComponent
+    ColorComponent,
+    SplitMergeComponent
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -68,6 +68,13 @@
               </svg>&nbsp;<ng-container i18n>Documents</ng-container>
             </a>
           </li>
+          <li class="nav-item" *ngIf="splitMergeToolVisible">
+            <a class="nav-link" routerLink="split_merge" routerLinkActive="active" (click)="closeMenu()">
+              <svg class="sidebaricon" fill="currentColor">
+                <use xlink:href="assets/bootstrap-icons.svg#scissors"/>
+              </svg>&nbsp;<ng-container i18n>Split & merge</ng-container>
+            </a>
+          </li>
         </ul>
 
         <h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted" *ngIf='savedViewService.sidebarViews.length > 0'>

src-ui/src/app/components/app-frame/app-frame.component.ts

@@ -10,6 +10,7 @@ import { SearchService } from 'src/app/services/rest/search.service';
 import { environment } from 'src/environments/environment';
 import { DocumentDetailComponent } from '../document-detail/document-detail.component';
 import { Meta } from '@angular/platform-browser';
+import { SplitMergeService } from 'src/app/services/split-merge.service';
 
 @Component({
   selector: 'app-app-frame',
@@ -24,7 +25,8 @@ export class AppFrameComponent implements OnInit {
     private openDocumentsService: OpenDocumentsService,
     private searchService: SearchService,
     public savedViewService: SavedViewService,
-    private meta: Meta
+    private meta: Meta,
+    private splitMergeService: SplitMergeService
     ) {
 
   }
@@ -103,6 +105,10 @@ export class AppFrameComponent implements OnInit {
     }
   }
 
+  get splitMergeToolVisible() {
+    return this.splitMergeService.hasDocuments()
+  }
+
   ngOnInit() {
   }
 

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

@@ -38,6 +38,12 @@
         </svg>&nbsp;<span class="d-none d-lg-inline" i18n>More like this</span>
     </button>
 
+    <button type="button" class="btn btn-sm btn-outline-primary mr-2" (click)="splitMerge()">
+        <svg class="buttonicon" fill="currentColor">
+            <use xlink:href="assets/bootstrap-icons.svg#scissors" />
+        </svg>&nbsp;<span class="d-none d-lg-inline" i18n>Split & merge</span>
+    </button>
+
     <button type="button" class="btn btn-sm btn-outline-primary" (click)="close()">
         <svg class="buttonicon" fill="currentColor">
             <use xlink:href="assets/bootstrap-icons.svg#x" />

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

@@ -20,6 +20,7 @@ import { ToastService } from 'src/app/services/toast.service';
 import { TextComponent } from '../common/input/text/text.component';
 import { SettingsService, SETTINGS_KEYS } from 'src/app/services/settings.service';
 import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions';
+import { SplitMergeService } from 'src/app/services/split-merge.service';
 
 @Component({
   selector: 'app-document-detail',
@@ -75,7 +76,8 @@ export class DocumentDetailComponent implements OnInit {
     private documentListViewService: DocumentListViewService,
     private documentTitlePipe: DocumentTitlePipe,
     private toastService: ToastService,
-    private settings: SettingsService) { }
+    private settings: SettingsService,
+    private splitMergeService: SplitMergeService) { }
 
   get useNativePdfViewer(): boolean {
     return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
@@ -222,6 +224,11 @@ export class DocumentDetailComponent implements OnInit {
     this.router.navigate(["search"], {queryParams: {more_like:this.document.id}})
   }
 
+  splitMerge() {
+    this.splitMergeService.addDocument(this.document)
+    this.router.navigate(["split_merge"])
+  }
+
   hasNext() {
     return this.documentListViewService.hasNext(this.documentId)
   }

src-ui/src/app/components/split-merge/split-merge.component.html

@@ -0,0 +1,2 @@
+<app-page-header i18n-title title="Split & merge documents">
+</app-page-header>

src-ui/src/app/components/split-merge/split-merge.component.spec.ts

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

src-ui/src/app/components/split-merge/split-merge.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-split-merge',
+  templateUrl: './split-merge.component.html',
+  styleUrls: ['./split-merge.component.scss']
+})
+export class SplitMergeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src-ui/src/app/services/split-merge.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SplitMergeService } from './split-merge.service';
+
+describe('SplitMergeService', () => {
+  let service: SplitMergeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SplitMergeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src-ui/src/app/services/split-merge.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { PaperlessDocument } from '../data/paperless-document';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SplitMergeService {
+
+  private documents: PaperlessDocument[] = []
+
+  constructor() { }
+
+  addDocument(document: PaperlessDocument) {
+    this.documents.push(document)
+  }
+
+  hasDocuments(): boolean {
+    return this.documents.length > 0
+  }
+}