Merge branch 'dev' into feature-websockets-status

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

@@ -3,19 +3,15 @@
 </app-page-header>
 
 <div class='row'>
-  <div class="col-lg">
-    <app-widget-frame title="Saved views" *ngIf="savedViews.length == 0">
-      <p class="card-text">This space is reserved to display your saved views. Go to your documents and save a view
-        to have it displayed
-        here!</p>
-    </app-widget-frame>
+  <div class="col-lg-8">
+    <app-welcome-widget *ngIf="savedViews.length == 0"></app-welcome-widget>
 
     <ng-container *ngFor="let v of savedViews">
       <app-saved-view-widget [savedView]="v"></app-saved-view-widget>
     </ng-container>
 
   </div>
-  <div class="col-lg">
+  <div class="col-lg-4">
 
     <app-statistics-widget></app-statistics-widget>
 

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -1,6 +1,9 @@
 <app-widget-frame [title]="savedView.title">
 
-  <table class="table table-sm table-hover table-borderless">
+  <a header-buttons [routerLink]="" (click)="showAll()">Show all</a>
+
+
+  <table content class="table table-sm table-hover table-borderless">
     <thead>
       <tr>
         <th>Created</th>
@@ -10,7 +13,7 @@
     <tbody>
       <tr *ngFor="let doc of documents" routerLink="/documents/{{doc.id}}">
         <td>{{doc.created | date}}</td>
-        <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags" class="ml-1"></app-tag>
+        <td>{{doc.title}}<app-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ml-1"></app-tag>
       </tr>
     </tbody>
   </table>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts

@@ -1,7 +1,9 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { PaperlessDocument } from 'src/app/data/paperless-document';
 import { SavedViewConfig } from 'src/app/data/saved-view-config';
+import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { ConsumerStatusService } from 'src/app/services/consumer-status.service';
 import { DocumentService } from 'src/app/services/rest/document.service';
 
@@ -12,7 +14,11 @@ import { DocumentService } from 'src/app/services/rest/document.service';
 })
 export class SavedViewWidgetComponent implements OnInit {
 
-  constructor(private documentService: DocumentService, private consumerStatusService: ConsumerStatusService) { }
+  constructor(
+    private documentService: DocumentService,
+    private router: Router,
+    private list: DocumentListViewService,
+    private consumerStatusService: ConsumerStatusService) { }
 
   @Input()
   savedView: SavedViewConfig
@@ -38,4 +44,9 @@ export class SavedViewWidgetComponent implements OnInit {
     })
   }
 
+  showAll() {
+    this.list.load(this.savedView)
+    this.router.navigate(["documents"])
+  }
+
 }

src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html

@@ -1,4 +1,6 @@
 <app-widget-frame title="Statistics">
-  <p class="card-text">Documents in inbox: {{statistics.documents_inbox}}</p>
-  <p class="card-text">Total documents: {{statistics.documents_total}}</p>
+  <ng-container content>
+    <p class="card-text">Documents in inbox: {{statistics.documents_inbox}}</p>
+    <p class="card-text">Total documents: {{statistics.documents_total}}</p>
+  </ng-container>
 </app-widget-frame>

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -1,6 +1,6 @@
 <app-widget-frame title="Upload new documents">
 
-  <form>
+  <form content>
     <ngx-file-drop 
       dropZoneLabel="Drop documents here or" (onFileDrop)="dropped($event)"
       (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)"

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -16,26 +16,31 @@ export class UploadFileWidgetComponent implements OnInit {
   }
 
   public fileOver(event){
-    console.log(event);
   }
- 
+
   public fileLeave(event){
-    console.log(event);
   }
- 
+
   public dropped(files: NgxFileDropEntry[]) {
     for (const droppedFile of files) {
       if (droppedFile.fileEntry.isFile) {
         const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
-        console.log(fileEntry)
         fileEntry.file((file: File) => {
-          console.log(file)
           const formData = new FormData()
           formData.append('document', file, file.name)
           this.documentService.uploadDocument(formData).subscribe(result => {
-            this.toastService.showInfo("The document has been uploaded and will be processed by the consumer shortly.")
+            this.toastService.showInfo(The document has been uploaded and will be processed by the consumer shortly.")
           }, error => {
-            this.toastService.showError("An error has occured while uploading the document. Sorry!")
+            switch (error.status) {
+              case 400: {
+                this.toastService.showError(`There was an error while uploading the document: ${error.error.document}`)
+                break;
+              }
+              default: {
+                this.toastService.showError("An error has occured while uploading the document. Sorry!")
+                break;
+              }
+            }
           })
         });
       }

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.html

@@ -0,0 +1,16 @@
+<app-widget-frame title="First steps">
+
+  <ng-container content>
+    <img src="assets/save-filter.png" class="float-right">
+    <p>Paperless is running! :)</p>
+    <p>You can start uploading documents by dropping them in the file upload box to the right or by dropping them in the configured consumption folder and they'll start showing up in the documents list.
+      After you've added some metadata to your documents, use the filtering mechanisms of paperless to create custom views (such as 'Recently added', 'Tagged TODO') and have them displayed on the dashboard instead of this message.</p>
+    <p>Paperless offers some more features that try to make your life easier, such as:</p>
+    <ul>
+      <li>Once you've got a couple documents in paperless and added metadata to them, paperless can assign that metadata to new documents automatically.</li>
+      <li>You can configure paperless to read your mails and add documents from attached files.</li>
+    </ul>
+    <p>Consult the documentation on how to use these features. The section on basic usage also has some information on how to use paperless in general.</p>
+  </ng-container>
+
+</app-widget-frame>

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.spec.ts

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

src-ui/src/app/components/dashboard/widgets/welcome-widget/welcome-widget.component.ts

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

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,8 +1,12 @@
 <div class="card mb-3 shadow">
   <div class="card-header">
-    <h5 class="card-title mb-0">{{title}}</h5>
+    <div class="d-flex justify-content-between align-items-center">
+      <h5 class="card-title mb-0">{{title}}</h5>
+      <ng-content select ="[header-buttons]"></ng-content>
+    </div>
+    
   </div>
   <div class="card-body text-dark">
-    <ng-content></ng-content>
+    <ng-content select ="[content]"></ng-content>
   </div>
 </div>