mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-07-28 18:24:38 -05:00
added paperless ui
This commit is contained in:
Jonas Winkler
@@ -0,0 +1,124 @@
|
||||
<app-page-header [(title)]="title">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger mr-2" (click)="delete()">
|
||||
<svg class="buttonicon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#trash" />
|
||||
</svg>
|
||||
Delete
|
||||
</button>
|
||||
<a [href]="downloadUrl" class="btn btn-sm btn-outline-secondary mr-2">
|
||||
<svg class="buttonicon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#download" />
|
||||
</svg>
|
||||
Download
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary" (click)="close()">
|
||||
<svg class="buttonicon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#x" />
|
||||
</svg>
|
||||
Close
|
||||
</button>
|
||||
</app-page-header>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xl">
|
||||
<form [formGroup]='documentForm' (ngSubmit)="save()">
|
||||
<div class="form-group">
|
||||
<label for="title">Title</label>
|
||||
<input type="text" class="form-control" id="title" formControlName='title'>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="archive_serial_number">Archive Serial Number</label>
|
||||
<input type="number" class="form-control" id="archive_serial_number"
|
||||
formControlName='archive_serial_number'>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col">
|
||||
<label for="created_date">Date created</label>
|
||||
<input type="date" class="form-control" id="created_date" formControlName='created_date'>
|
||||
</div>
|
||||
<div class="form-group col">
|
||||
<label for="created_time">Time created</label>
|
||||
<input type="time" class="form-control" id="created_time" formControlName='created_time'>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="content">Content</label>
|
||||
<textarea class="form-control" id="content" rows="5" formControlName='content'></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="correspondent">Correspondent</label>
|
||||
<div class="input-group">
|
||||
<select class="form-control" id="correspondent" formControlName="correspondent_id">
|
||||
<option [ngValue]="null">---</option>
|
||||
<option *ngFor='let c of correspondents' [ngValue]="c.id">{{c.name}}</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" (click)="createCorrespondent()">
|
||||
<svg class="buttonicon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#plus" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="document_type">Document Type</label>
|
||||
<div class="input-group">
|
||||
<select class="form-control" id="document_type" formControlName="document_type_id">
|
||||
<option [ngValue]="null">---</option>
|
||||
<option *ngFor="let dt of documentTypes" [ngValue]="dt.id">{{dt.name}}</option>
|
||||
</select>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" (click)="createDocumentType()">
|
||||
<svg class="buttonicon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#plus" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleFormControlTextarea1">Tags</label>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="form-control">
|
||||
<span *ngFor="let tag of documentForm.value.tags">
|
||||
<app-tag [tag]="tag" [clickable]="true" (click)="removeTag(tag)"></app-tag>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="input-group-append" ngbDropdown>
|
||||
<button class="btn btn-outline-secondary" type="button" ngbDropdownToggle></button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
|
||||
<button type="button" *ngFor="let tag of tags" ngbDropdownItem (click)="addTag(tag)">
|
||||
<app-tag [tag]="tag"></app-tag>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-outline-secondary" type="button" (click)="createTag()">
|
||||
<svg class="buttonicon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#plus" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn btn-outline-primary" (click)="saveEditNext()" *ngIf="hasNext()">Save & edit next</button>
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-xl">
|
||||
<object [data]="previewUrl | safe" type="application/pdf" width="100%" height="100%">
|
||||
<p>Your browser does not support PDFs.
|
||||
<a href="previewUrl">Download the PDF</a>.</p>
|
||||
</object>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DocumentDetailComponent } from './document-detail.component';
|
||||
|
||||
describe('DocumentDetailComponent', () => {
|
||||
let component: DocumentDetailComponent;
|
||||
let fixture: ComponentFixture<DocumentDetailComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ DocumentDetailComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DocumentDetailComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,177 @@
|
||||
import { DatePipe } from '@angular/common';
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
||||
import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
|
||||
import { PaperlessDocument } from 'src/app/data/paperless-document';
|
||||
import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
|
||||
import { PaperlessTag } from 'src/app/data/paperless-tag';
|
||||
import { DocumentListViewService } from 'src/app/services/document-list-view.service';
|
||||
import { OpenDocumentsService } from 'src/app/services/open-documents.service';
|
||||
import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
|
||||
import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
|
||||
import { DocumentService } from 'src/app/services/rest/document.service';
|
||||
import { TagService } from 'src/app/services/rest/tag.service';
|
||||
import { DeleteDialogComponent } from '../common/delete-dialog/delete-dialog.component';
|
||||
import { CorrespondentEditDialogComponent } from '../manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component';
|
||||
import { DocumentTypeEditDialogComponent } from '../manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component';
|
||||
import { TagEditDialogComponent } from '../manage/tag-list/tag-edit-dialog/tag-edit-dialog.component';
|
||||
@Component({
|
||||
selector: 'app-document-detail',
|
||||
templateUrl: './document-detail.component.html',
|
||||
styleUrls: ['./document-detail.component.css']
|
||||
})
|
||||
export class DocumentDetailComponent implements OnInit {
|
||||
|
||||
documentId: number
|
||||
document: PaperlessDocument
|
||||
title: string
|
||||
previewUrl: string
|
||||
downloadUrl: string
|
||||
|
||||
correspondents: PaperlessCorrespondent[]
|
||||
documentTypes: PaperlessDocumentType[]
|
||||
tags: PaperlessTag[]
|
||||
|
||||
documentForm: FormGroup = new FormGroup({
|
||||
title: new FormControl(''),
|
||||
content: new FormControl(''),
|
||||
created_date: new FormControl(),
|
||||
created_time: new FormControl(),
|
||||
correspondent_id: new FormControl(),
|
||||
document_type_id: new FormControl(),
|
||||
archive_serial_number: new FormControl(),
|
||||
tags: new FormControl([])
|
||||
})
|
||||
|
||||
constructor(
|
||||
private documentsService: DocumentService,
|
||||
private route: ActivatedRoute,
|
||||
private correspondentService: CorrespondentService,
|
||||
private documentTypeService: DocumentTypeService,
|
||||
private tagService: TagService,
|
||||
private datePipe: DatePipe,
|
||||
private router: Router,
|
||||
private modalService: NgbModal,
|
||||
private openDocumentService: OpenDocumentsService,
|
||||
private documentListViewService: DocumentListViewService) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.correspondentService.list().subscribe(result => this.correspondents = result.results)
|
||||
this.documentTypeService.list().subscribe(result => this.documentTypes = result.results)
|
||||
this.tagService.list().subscribe(result => this.tags = result.results)
|
||||
|
||||
this.route.paramMap.subscribe(paramMap => {
|
||||
this.documentId = +paramMap.get('id')
|
||||
this.previewUrl = this.documentsService.getPreviewUrl(this.documentId)
|
||||
this.downloadUrl = this.documentsService.getDownloadUrl(this.documentId)
|
||||
this.documentsService.get(this.documentId).subscribe(doc => {
|
||||
this.openDocumentService.openDocument(doc)
|
||||
this.document = doc
|
||||
this.title = doc.title
|
||||
this.documentForm.patchValue(doc)
|
||||
this.documentForm.get('created_date').patchValue(this.datePipe.transform(doc.created, 'yyyy-MM-dd'))
|
||||
this.documentForm.get('created_time').patchValue(this.datePipe.transform(doc.created, 'HH:mm:ss'))
|
||||
}, error => {this.router.navigate(['404'])})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
createTag() {
|
||||
var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
|
||||
modal.componentInstance.dialogMode = 'create'
|
||||
modal.componentInstance.success.subscribe(newTag => {
|
||||
this.tagService.list().subscribe(tags => {
|
||||
this.tags = tags.results
|
||||
this.documentForm.get('tags_id').value.push(newTag.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
createDocumentType() {
|
||||
var modal = this.modalService.open(DocumentTypeEditDialogComponent, {backdrop: 'static'})
|
||||
modal.componentInstance.dialogMode = 'create'
|
||||
modal.componentInstance.success.subscribe(newDocumentType => {
|
||||
this.documentTypeService.list().subscribe(documentTypes => {
|
||||
this.documentTypes = documentTypes.results
|
||||
this.documentForm.get('document_type_id').setValue(newDocumentType.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
createCorrespondent() {
|
||||
var modal = this.modalService.open(CorrespondentEditDialogComponent, {backdrop: 'static'})
|
||||
modal.componentInstance.dialogMode = 'create'
|
||||
modal.componentInstance.success.subscribe(newCorrespondent => {
|
||||
this.correspondentService.list().subscribe(correspondents => {
|
||||
this.correspondents = correspondents.results
|
||||
this.documentForm.get('correspondent_id').setValue(newCorrespondent.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
getTag(id: number): PaperlessTag {
|
||||
return this.tags.find(tag => tag.id == id)
|
||||
}
|
||||
|
||||
getColour(id: number) {
|
||||
return PaperlessTag.COLOURS.find(c => c.id == this.getTag(id).colour)
|
||||
}
|
||||
|
||||
addTag(id: number) {
|
||||
if (this.documentForm.value.tags.indexOf(id) == -1) {
|
||||
this.documentForm.value.tags.push(id)
|
||||
}
|
||||
}
|
||||
|
||||
removeTag(id: number) {
|
||||
var index = this.documentForm.value.tags.indexOf(id)
|
||||
if (index > -1) {
|
||||
this.documentForm.value.tags.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
save() {
|
||||
var newDocument = Object.assign(Object.assign({}, this.document), this.documentForm.value)
|
||||
console.log(this.document)
|
||||
console.log(newDocument)
|
||||
this.documentsService.update(newDocument).subscribe(result => {
|
||||
this.close()
|
||||
})
|
||||
}
|
||||
|
||||
saveEditNext() {
|
||||
var newDocument = Object.assign(Object.assign({}, this.document), this.documentForm.value)
|
||||
this.documentsService.update(newDocument).subscribe(result => {
|
||||
this.documentListViewService.getNext(this.document.id).subscribe(nextDocId => {
|
||||
if (nextDocId) {
|
||||
this.openDocumentService.closeDocument(this.document)
|
||||
this.router.navigate(['documents', nextDocId])
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
close() {
|
||||
this.openDocumentService.closeDocument(this.document)
|
||||
this.router.navigate(['documents'])
|
||||
}
|
||||
|
||||
delete() {
|
||||
let modal = this.modalService.open(DeleteDialogComponent, {backdrop: 'static'})
|
||||
modal.componentInstance.message = `Do you really want to delete document '${this.document.title}'?`
|
||||
modal.componentInstance.message2 = `The files for this document will be deleted permanently. This operation cannot be undone.`
|
||||
modal.componentInstance.deleteClicked.subscribe(() => {
|
||||
this.documentsService.delete(this.document).subscribe(() => {
|
||||
modal.close()
|
||||
this.close()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
hasNext() {
|
||||
return this.documentListViewService.hasNext(this.documentId)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user