From fa5df5d28ed3bcfa008690532eefbdbf399b1183 Mon Sep 17 00:00:00 2001 From: Jonas Winkler Date: Sun, 22 Nov 2020 22:35:39 +0100 Subject: [PATCH] modular dashboard --- src-ui/src/app/app.module.ts | 10 ++- .../dashboard/dashboard.component.html | 73 +++---------------- .../dashboard/dashboard.component.ts | 57 +-------------- .../saved-view-widget.component.html | 18 +++++ .../saved-view-widget.component.scss | 0 .../saved-view-widget.component.spec.ts | 25 +++++++ .../saved-view-widget.component.ts | 26 +++++++ .../statistics-widget.component.html | 4 + .../statistics-widget.component.scss | 0 .../statistics-widget.component.spec.ts | 25 +++++++ .../statistics-widget.component.ts | 33 +++++++++ .../upload-file-widget.component.html | 15 ++++ .../upload-file-widget.component.scss | 0 .../upload-file-widget.component.spec.ts | 25 +++++++ .../upload-file-widget.component.ts | 44 +++++++++++ .../widget-frame/widget-frame.component.html | 8 ++ .../widget-frame/widget-frame.component.scss | 0 .../widget-frame.component.spec.ts | 25 +++++++ .../widget-frame/widget-frame.component.ts | 18 +++++ 19 files changed, 288 insertions(+), 118 deletions(-) create mode 100644 src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html create mode 100644 src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss create mode 100644 src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html create mode 100644 src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss create mode 100644 src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html create mode 100644 src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss create mode 100644 src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html create mode 100644 src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss create mode 100644 src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts create mode 100644 src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 014279cc5..3ccb1c5f1 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -41,6 +41,10 @@ import { TagsComponent } from './components/common/input/tags/tags.component'; import { SortableDirective } from './directives/sortable.directive'; import { CookieService } from 'ngx-cookie-service'; import { CsrfInterceptor } from './interceptors/csrf.interceptor'; +import { SavedViewWidgetComponent } from './components/dashboard/widgets/saved-view-widget/saved-view-widget.component'; +import { StatisticsWidgetComponent } from './components/dashboard/widgets/statistics-widget/statistics-widget.component'; +import { UploadFileWidgetComponent } from './components/dashboard/widgets/upload-file-widget/upload-file-widget.component'; +import { WidgetFrameComponent } from './components/dashboard/widgets/widget-frame/widget-frame.component'; @NgModule({ declarations: [ @@ -74,7 +78,11 @@ import { CsrfInterceptor } from './interceptors/csrf.interceptor'; SaveViewConfigDialogComponent, DateTimeComponent, TagsComponent, - SortableDirective + SortableDirective, + SavedViewWidgetComponent, + StatisticsWidgetComponent, + UploadFileWidgetComponent, + WidgetFrameComponent ], imports: [ BrowserModule, diff --git a/src-ui/src/app/components/dashboard/dashboard.component.html b/src-ui/src/app/components/dashboard/dashboard.component.html index 7e1db5792..c24d633a9 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.html +++ b/src-ui/src/app/components/dashboard/dashboard.component.html @@ -4,77 +4,22 @@
- - -
-
-
{{v.viewConfig.title}}
-
-
- - - - - - - - - - - - - -
CreatedTitle
{{doc.created | date}}{{doc.title}} -
-
-
- - -
-
-
Saved views
-
-
-

This space is reserved to display your saved views. Go to your documents and save a view - to have it displayed - here!

-
-
+ +

This space is reserved to display your saved views. Go to your documents and save a view + to have it displayed + here!

+ + +
-
-
-
Statistics
-
-
-

Documents in inbox: {{statistics.documents_inbox}}

-

Total documents: {{statistics.documents_total}}

-
-
+ -
-
-
Upload new documents
-
-
-
- - - -
-
-
+
\ No newline at end of file diff --git a/src-ui/src/app/components/dashboard/dashboard.component.ts b/src-ui/src/app/components/dashboard/dashboard.component.ts index 5bedf6389..aa2426179 100644 --- a/src-ui/src/app/components/dashboard/dashboard.component.ts +++ b/src-ui/src/app/components/dashboard/dashboard.component.ts @@ -1,16 +1,6 @@ -import { HttpClient } from '@angular/common/http'; import { Component, OnInit } from '@angular/core'; -import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; -import { Observable } from 'rxjs'; -import { DocumentService } from 'src/app/services/rest/document.service'; import { SavedViewConfigService } from 'src/app/services/saved-view-config.service'; -import { Toast, ToastService } from 'src/app/services/toast.service'; -import { environment } from 'src/environments/environment'; -export interface Statistics { - documents_total?: number - documents_inbox?: number -} @Component({ selector: 'app-dashboard', @@ -19,53 +9,14 @@ export interface Statistics { }) export class DashboardComponent implements OnInit { - constructor(private documentService: DocumentService, private toastService: ToastService, - public savedViewConfigService: SavedViewConfigService, private http: HttpClient) { } + constructor( + public savedViewConfigService: SavedViewConfigService) { } - savedDashboardViews = [] - statistics: Statistics = {} + savedViews = [] ngOnInit(): void { - this.savedViewConfigService.getDashboardConfigs().forEach(config => { - this.documentService.list(1,10,config.sortField,config.sortDirection,config.filterRules).subscribe(result => { - this.savedDashboardViews.push({viewConfig: config, documents: result.results}) - }) - }) - this.getStatistics().subscribe(statistics => { - this.statistics = statistics - }) + this.savedViews = this.savedViewConfigService.getDashboardConfigs() } - getStatistics(): Observable { - return this.http.get(`${environment.apiBaseUrl}statistics/`) - } - - - 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.showToast(Toast.make("Information", "The document has been uploaded and will be processed by the consumer shortly.")) - }, error => { - this.toastService.showToast(Toast.makeError("An error has occured while uploading the document. Sorry!")) - }) - }); - } - } - } } diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html new file mode 100644 index 000000000..712e4dec7 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + +
CreatedTitle
{{doc.created | date}}{{doc.title}} +
+ + \ No newline at end of file diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts new file mode 100644 index 000000000..f0095b618 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SavedViewWidgetComponent } from './saved-view-widget.component'; + +describe('SavedViewWidgetComponent', () => { + let component: SavedViewWidgetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ SavedViewWidgetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SavedViewWidgetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts new file mode 100644 index 000000000..9b124715f --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.ts @@ -0,0 +1,26 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { PaperlessDocument } from 'src/app/data/paperless-document'; +import { SavedViewConfig } from 'src/app/data/saved-view-config'; +import { DocumentService } from 'src/app/services/rest/document.service'; + +@Component({ + selector: 'app-saved-view-widget', + templateUrl: './saved-view-widget.component.html', + styleUrls: ['./saved-view-widget.component.scss'] +}) +export class SavedViewWidgetComponent implements OnInit { + + constructor(private documentService: DocumentService) { } + + @Input() + savedView: SavedViewConfig + + documents: PaperlessDocument[] = [] + + ngOnInit(): void { + this.documentService.list(1,10,this.savedView.sortField,this.savedView.sortDirection,this.savedView.filterRules).subscribe(result => { + this.documents = result.results + }) + } + +} diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html new file mode 100644 index 000000000..693935290 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.html @@ -0,0 +1,4 @@ + +

Documents in inbox: {{statistics.documents_inbox}}

+

Total documents: {{statistics.documents_total}}

+ \ No newline at end of file diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts new file mode 100644 index 000000000..e8e44ca54 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { StatisticsWidgetComponent } from './statistics-widget.component'; + +describe('StatisticsWidgetComponent', () => { + let component: StatisticsWidgetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ StatisticsWidgetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(StatisticsWidgetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts new file mode 100644 index 000000000..73eee698c --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/statistics-widget/statistics-widget.component.ts @@ -0,0 +1,33 @@ +import { HttpClient } from '@angular/common/http'; +import { Component, OnInit } from '@angular/core'; +import { Observable } from 'rxjs'; +import { environment } from 'src/environments/environment'; + +export interface Statistics { + documents_total?: number + documents_inbox?: number +} + + +@Component({ + selector: 'app-statistics-widget', + templateUrl: './statistics-widget.component.html', + styleUrls: ['./statistics-widget.component.scss'] +}) +export class StatisticsWidgetComponent implements OnInit { + + constructor(private http: HttpClient) { } + + statistics: Statistics = {} + + getStatistics(): Observable { + return this.http.get(`${environment.apiBaseUrl}statistics/`) + } + + ngOnInit(): void { + this.getStatistics().subscribe(statistics => { + this.statistics = statistics + }) + } + +} diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html new file mode 100644 index 000000000..fa7faab31 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html @@ -0,0 +1,15 @@ + + +
+ + + +
+ \ No newline at end of file diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts new file mode 100644 index 000000000..88e8efa2e --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UploadFileWidgetComponent } from './upload-file-widget.component'; + +describe('UploadFileWidgetComponent', () => { + let component: UploadFileWidgetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ UploadFileWidgetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(UploadFileWidgetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts new file mode 100644 index 000000000..a95d5f4db --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; +import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop'; +import { DocumentService } from 'src/app/services/rest/document.service'; +import { Toast, ToastService } from 'src/app/services/toast.service'; + +@Component({ + selector: 'app-upload-file-widget', + templateUrl: './upload-file-widget.component.html', + styleUrls: ['./upload-file-widget.component.scss'] +}) +export class UploadFileWidgetComponent implements OnInit { + + constructor(private documentService: DocumentService, private toastService: ToastService) { } + + ngOnInit(): void { + } + + 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.showToast(Toast.make("Information", "The document has been uploaded and will be processed by the consumer shortly.")) + }, error => { + this.toastService.showToast(Toast.makeError("An error has occured while uploading the document. Sorry!")) + }) + }); + } + } + } +} diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html new file mode 100644 index 000000000..3d45ae6fb --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html @@ -0,0 +1,8 @@ +
+
+
{{title}}
+
+
+ +
+
\ No newline at end of file diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts new file mode 100644 index 000000000..ea1696750 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WidgetFrameComponent } from './widget-frame.component'; + +describe('WidgetFrameComponent', () => { + let component: WidgetFrameComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ WidgetFrameComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(WidgetFrameComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts new file mode 100644 index 000000000..38d6b0023 --- /dev/null +++ b/src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts @@ -0,0 +1,18 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-widget-frame', + templateUrl: './widget-frame.component.html', + styleUrls: ['./widget-frame.component.scss'] +}) +export class WidgetFrameComponent implements OnInit { + + constructor() { } + + @Input() + title: string + + ngOnInit(): void { + } + +}