added paperless ui

src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.html

@@ -0,0 +1,23 @@
+<form [formGroup]="objectForm" class="needs-validation" novalidate (ngSubmit)="save()">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+    <button type="button" class="close" aria-label="Close" (click)="cancel()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <div class="form-group">
+      <label for="name">Name</label>
+      <input id="name" class="form-control" formControlName="name" required ngbAutofocus>
+    </div>
+    <div class="form-group form-check">
+      <input type="checkbox" class="form-check-input" id="automatic_classification"
+        formControlName="automatic_classification">
+      <label class="form-check-label" for="automatic_classification">Automatic Classification</label>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
+    <button type="submit" class="btn btn-primary">Save</button>
+  </div>
+</form>

src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.spec.ts

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

src-ui/src/app/components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component';
+import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+  selector: 'app-correspondent-edit-dialog',
+  templateUrl: './correspondent-edit-dialog.component.html',
+  styleUrls: ['./correspondent-edit-dialog.component.css']
+})
+export class CorrespondentEditDialogComponent extends EditDialogComponent<PaperlessCorrespondent> {
+
+  constructor(service: CorrespondentService, activeModal: NgbActiveModal, toastService: ToastService) {
+    super(service, activeModal, toastService, 'correspondent')
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      automatic_classification: new FormControl(true)
+    })
+  }  
+
+}

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html

@@ -0,0 +1,33 @@
+<app-page-header title="Correspondents">
+  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
+    Create
+  </button>
+</app-page-header>
+
+<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+
+<table class="table table-striped">
+    <thead>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">Automatic Classification</th>
+      <th scope="col">Document count</th>
+      <th scope="col">Last correspondence</th>
+      <th scope="col">Actions</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let correspondent of data">
+      <td scope="row">{{ correspondent.name }}</td>
+      <td scope="row">{{ correspondent.automatic_classification }}</td>
+      <td scope="row">{{ correspondent.document_count }}</td>
+      <td scope="row">{{ correspondent.last_correspondence | date }}</td>
+        <td scope="row">
+          <div class="btn-group">
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">Edit</button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">Delete</button>
+        </div>
+        </td>
+    </tr>
+    </tbody>
+  </table>

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.spec.ts

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

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
+import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
+import { GenericListComponent } from '../generic-list/generic-list.component';
+import { CorrespondentEditDialogComponent } from './correspondent-edit-dialog/correspondent-edit-dialog.component';
+
+@Component({
+  selector: 'app-correspondent-list',
+  templateUrl: './correspondent-list.component.html',
+  styleUrls: ['./correspondent-list.component.css']
+})
+export class CorrespondentListComponent extends GenericListComponent<PaperlessCorrespondent> {
+
+  constructor(correspondentsService: CorrespondentService,
+    modalService: NgbModal) { 
+      super(correspondentsService,modalService,CorrespondentEditDialogComponent)
+    }
+
+}

src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.html

@@ -0,0 +1,23 @@
+<form [formGroup]="objectForm" class="needs-validation" novalidate (ngSubmit)="save()">
+    <div class="modal-header">
+      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+      <button type="button" class="close" aria-label="Close" (click)="cancel()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="name">Name</label>
+        <input id="name" class="form-control" formControlName="name" required ngbAutofocus>
+      </div>
+      <div class="form-group form-check">
+        <input type="checkbox" class="form-check-input" id="automatic_classification"
+          formControlName="automatic_classification">
+        <label class="form-check-label" for="automatic_classification">Automatic Classification</label>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
+      <button type="submit" class="btn btn-primary">Save</button>
+    </div>
+  </form>

src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.spec.ts

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

src-ui/src/app/components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component';
+import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+  selector: 'app-document-type-edit-dialog',
+  templateUrl: './document-type-edit-dialog.component.html',
+  styleUrls: ['./document-type-edit-dialog.component.css']
+})
+export class DocumentTypeEditDialogComponent extends EditDialogComponent<PaperlessDocumentType> {
+
+  constructor(service: DocumentTypeService, activeModal: NgbActiveModal, toastService: ToastService) { 
+    super(service, activeModal, toastService, 'document type')
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      automatic_classification: new FormControl(true)
+    })
+  }
+
+}

src-ui/src/app/components/manage/document-type-list/document-type-list.component.html

@@ -0,0 +1,32 @@
+<app-page-header title="Document types">
+  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
+    Create
+  </button>
+</app-page-header>
+
+<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()"
+  aria-label="Default pagination"></ngb-pagination>
+
+<table class="table table-striped">
+  <thead>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">Automatic Classification</th>
+      <th scope="col">Document count</th>
+      <th scope="col">Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let correspondent of data">
+      <td scope="row">{{ correspondent.name }}</td>
+      <td scope="row">{{ correspondent.automatic_classification }}</td>
+      <td scope="row">{{ correspondent.document_count }}</td>
+      <td scope="row">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(correspondent)">Edit</button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(correspondent)">Delete</button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>

src-ui/src/app/components/manage/document-type-list/document-type-list.component.spec.ts

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

src-ui/src/app/components/manage/document-type-list/document-type-list.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
+import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
+import { GenericListComponent } from '../generic-list/generic-list.component';
+import { DocumentTypeEditDialogComponent } from './document-type-edit-dialog/document-type-edit-dialog.component';
+
+@Component({
+  selector: 'app-document-type-list',
+  templateUrl: './document-type-list.component.html',
+  styleUrls: ['./document-type-list.component.css']
+})
+export class DocumentTypeListComponent extends GenericListComponent<PaperlessDocumentType> {
+
+  constructor(service: DocumentTypeService, modalService: NgbModal) {
+    super(service, modalService, DocumentTypeEditDialogComponent)
+   }
+
+}

src-ui/src/app/components/manage/generic-list/generic-list.component.spec.ts

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

src-ui/src/app/components/manage/generic-list/generic-list.component.ts

@@ -0,0 +1,62 @@
+import { Directive, OnInit } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ObjectWithId } from 'src/app/data/object-with-id';
+import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service';
+import { DeleteDialogComponent } from '../../common/delete-dialog/delete-dialog.component';
+
+@Directive()
+export abstract class GenericListComponent<T extends ObjectWithId> implements OnInit {
+  
+  constructor(
+    private service: AbstractPaperlessService<T>, 
+    private modalService: NgbModal,
+    private editDialogComponent: any) {
+    }
+
+  public data: T[] = []
+
+  public page = 1
+
+  public collectionSize = 0
+
+  ngOnInit(): void {
+    this.reloadData()
+  }
+
+  reloadData() {
+    this.service.list(this.page).subscribe(c => {
+      this.data = c.results
+      this.collectionSize = c.count
+    });
+  }
+
+  openCreateDialog() {
+    var activeModal = this.modalService.open(this.editDialogComponent, {backdrop: 'static'})
+    activeModal.componentInstance.dialogMode = 'create'
+    activeModal.componentInstance.success.subscribe(o => {
+      this.reloadData()
+    })
+  }
+
+  openEditDialog(object: T) {
+    var activeModal = this.modalService.open(this.editDialogComponent, {backdrop: 'static'})
+    activeModal.componentInstance.object = object
+    activeModal.componentInstance.dialogMode = 'edit'
+    activeModal.componentInstance.success.subscribe(o => {
+      this.reloadData()
+    })
+  }
+
+  openDeleteDialog(object: T) {
+    var activeModal = this.modalService.open(DeleteDialogComponent, {backdrop: 'static'})
+    activeModal.componentInstance.message = `Do you really want to delete ${object}?`
+    activeModal.componentInstance.message2 = "Associated documents will not be deleted."
+    activeModal.componentInstance.deleteClicked.subscribe(() => {
+      this.service.delete(object).subscribe(_ => {
+        activeModal.close()
+        this.reloadData()
+      })
+    }
+    )
+  }
+}

src-ui/src/app/components/manage/logs/logs.component.html

@@ -0,0 +1,2 @@
+<app-page-header title="Logs">
+</app-page-header>

src-ui/src/app/components/manage/logs/logs.component.spec.ts

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

src-ui/src/app/components/manage/logs/logs.component.ts

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

src-ui/src/app/components/manage/settings/settings.component.html

@@ -0,0 +1,6 @@
+<app-page-header title="Settings">
+
+</app-page-header>
+
+<p>items per page, documents per view type</p>
+

src-ui/src/app/components/manage/settings/settings.component.spec.ts

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

src-ui/src/app/components/manage/settings/settings.component.ts

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

src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html

@@ -0,0 +1,34 @@
+  <form [formGroup]="objectForm" class="needs-validation" novalidate (ngSubmit)="save()">
+    <div class="modal-header">
+      <h4 class="modal-title" id="modal-basic-title">{{getTitle()}}</h4>
+      <button type="button" class="close" aria-label="Close" (click)="cancel()">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
+    <div class="modal-body">
+      <div class="form-group">
+        <label for="name">Name</label>
+        <input id="name" class="form-control" formControlName="name" required ngbAutofocus>
+      </div>
+      <div class="form-group">
+        <label for="colour">Colour</label>
+        <select id="colour" class="form-control" required formControlName="colour" [style.color]="getColor(objectForm.value.colour).textColor" [style.background]="getColor(objectForm.value.colour).value">
+          <option *ngFor="let colour of getColours()" [ngValue]="colour.id" class="form-control">{{colour.name}}</option>
+        </select>
+      </div>
+      <div class="form-group form-check">
+        <input type="checkbox" class="form-check-input" id="is_inbox_tag"
+          formControlName="is_inbox_tag">
+        <label class="form-check-label" for="is_inbox_tag">Inbox Tag</label>
+      </div>
+      <div class="form-group form-check">
+        <input type="checkbox" class="form-check-input" id="automatic_classification"
+          formControlName="automatic_classification">
+        <label class="form-check-label" for="automatic_classification">Automatic Classification</label>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline-dark" (click)="cancel()">Cancel</button>
+      <button type="submit" class="btn btn-primary">Save</button>
+    </div>
+  </form>

src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.spec.ts

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

src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { TagService } from 'src/app/services/rest/tag.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+@Component({
+  selector: 'app-tag-edit-dialog',
+  templateUrl: './tag-edit-dialog.component.html',
+  styleUrls: ['./tag-edit-dialog.component.css']
+})
+export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
+
+  constructor(service: TagService, activeModal: NgbActiveModal, toastService: ToastService) { 
+    super(service, activeModal, toastService, 'tag')
+  }
+
+  getForm(): FormGroup {
+    return new FormGroup({
+      name: new FormControl(''),
+      colour: new FormControl(1),
+      is_inbox_tag: new FormControl(false),
+      automatic_classification: new FormControl(true)
+    })
+  }
+
+  getColours() {
+    return PaperlessTag.COLOURS
+  }
+
+  getColor(id: number) {
+    return PaperlessTag.COLOURS.find(c => c.id == id)
+  }
+
+}

src-ui/src/app/components/manage/tag-list/tag-list.component.html

@@ -0,0 +1,34 @@
+<app-page-header title="Tags">
+  <button type="button" class="btn btn-sm btn-outline-secondary" (click)="openCreateDialog()">
+    Create
+  </button>
+</app-page-header>
+  
+<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+  
+  <table class="table table-striped">
+      <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Colour</th>
+        <th scope="col">Automatic Classification</th>
+        <th scope="col">Document count</th>
+        <th scope="col">Actions</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let tag of data">
+          <td scope="row">{{ tag.name }}</td>
+          <td scope="row"><span class="badge" [style.color]="getColor(tag.colour).textColor" [style.background-color]="getColor(tag.colour).value">{{ getColor(tag.colour).name }}</span></td>
+          <td scope="row">{{ tag.automatic_classification }}</td>
+          <td scope="row">{{ tag.document_count }}</td>
+          <td scope="row">
+            <div class="btn-group">
+            <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">Edit</button>
+            <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">Delete</button>
+          </div>
+          </td>
+      </tr>
+      </tbody>
+    </table>
+  

src-ui/src/app/components/manage/tag-list/tag-list.component.spec.ts

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

src-ui/src/app/components/manage/tag-list/tag-list.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
+import { TagService } from 'src/app/services/rest/tag.service';
+import { CorrespondentEditDialogComponent } from '../correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component';
+import { GenericListComponent } from '../generic-list/generic-list.component';
+import { TagEditDialogComponent } from './tag-edit-dialog/tag-edit-dialog.component';
+
+@Component({
+  selector: 'app-tag-list',
+  templateUrl: './tag-list.component.html',
+  styleUrls: ['./tag-list.component.css']
+})
+export class TagListComponent extends GenericListComponent<PaperlessTag> {
+
+  constructor(tagService: TagService, modalService: NgbModal) {
+    super(tagService, modalService, TagEditDialogComponent)
+   }
+
+  getColor(id) {
+    return PaperlessTag.COLOURS.find(c => c.id == id)
+  }
+}