Add automatic coloring of tags

Please see this as proposal on how to implement automatic/random colors
for tags while keeping the current set of hard coded colors in place (at
least in the frontend).

Bear with me as I have even less Angular knowledge than Django and just
tried to get away with as few changes as possible. :-) AIUI you want to
change to a color picking system anyways in the future, which could also
play well with this.

fixes #51

src-ui/src/app/components/common/tag/tag.component.html

@@ -1,2 +1,2 @@
-<span *ngIf="!clickable" class="badge" [style.background]="getColour().value" [style.color]="getColour().textColor">{{tag.name}}</span>
-<a [routerLink]="" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="getColour().value" [style.color]="getColour().textColor">{{tag.name}}</a>
+<span *ngIf="!clickable" class="badge" [style.background]="getColour().id" [style.color]="getColour().textColor">{{tag.name}}</span>
+<a [routerLink]="" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="getColour().id" [style.color]="getColour().textColor">{{tag.name}}</a>

src-ui/src/app/components/common/tag/tag.component.ts

@@ -23,7 +23,11 @@ export class TagComponent implements OnInit {
   }
 
   getColour() {
-    return TAG_COLOURS.find(c => c.id == this.tag.colour)
+    var color = TAG_COLOURS.find(c => c.id == this.tag.colour)
+    if (color) {
+      return color
+    }
+    return { id: this.tag.colour, name: this.tag.colour, textColor: "#ffffff" }
   }
 
 }

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

@@ -7,7 +7,7 @@
     </div>
     <div class="modal-body">
       <app-input-text title="Name" formControlName="name"></app-input-text>
-      <app-input-select title="Colour" [items]="getColours()" formControlName="colour" [textColor]="getColor(objectForm.value.colour).textColor" [backgroundColor]="getColor(objectForm.value.colour).value"></app-input-select>
+      <app-input-select title="Colour" [items]="getColours()" formControlName="colour" [textColor]="getColor(objectForm.value.colour).textColor" [backgroundColor]="getColor(objectForm.value.colour).id"></app-input-select>
       <app-input-check title="Inbox tag" formControlName="is_inbox_tag" hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
       <app-input-text title="Match" formControlName="match"></app-input-text>
       <app-input-select title="Matching algorithm" [items]="getMatchingAlgorithms()" formControlName="matching_algorithm"></app-input-select>

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

@@ -13,14 +13,14 @@ import { ToastService } from 'src/app/services/toast.service';
 })
 export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
 
-  constructor(service: TagService, activeModal: NgbActiveModal, toastService: ToastService) { 
+  constructor(service: TagService, activeModal: NgbActiveModal, toastService: ToastService) {
     super(service, activeModal, toastService, 'tag')
   }
 
   getForm(): FormGroup {
     return new FormGroup({
       name: new FormControl(''),
-      colour: new FormControl(1),
+      colour: new FormControl(''),
       is_inbox_tag: new FormControl(false),
       matching_algorithm: new FormControl(1),
       match: new FormControl(""),
@@ -32,7 +32,7 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
     return TAG_COLOURS
   }
 
-  getColor(id: number) {
+  getColor(id) {
     return TAG_COLOURS.find(c => c.id == id)
   }
 

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

@@ -23,7 +23,7 @@
     <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>
+          [style.background-color]="tag.colour">{{ getColor(tag.colour).name }}</span></td>
       <td scope="row">{{ getMatching(tag) }}</td>
       <td scope="row">{{ tag.document_count }}</td>
       <td scope="row">

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

@@ -15,10 +15,14 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> {
 
   constructor(tagService: TagService, modalService: NgbModal) {
     super(tagService, modalService, TagEditDialogComponent)
-   }
+  }
 
   getColor(id) {
-    return TAG_COLOURS.find(c => c.id == id)
+    var color = TAG_COLOURS.find(c => c.id == id)
+    if (color) {
+      return color
+    }
+    return { id: id, name: id, textColor: "#ffffff" }
   }
 
   getObjectName(object: PaperlessTag) {

src-ui/src/app/data/paperless-tag.ts

@@ -3,26 +3,27 @@ import { ObjectWithId } from './object-with-id';
 
 
 export const TAG_COLOURS = [
-    {id: 1, value: "#a6cee3", name: "Light Blue", textColor: "#000000"},
-    {id: 2, value: "#1f78b4", name: "Blue", textColor: "#ffffff"},
-    {id: 3, value: "#b2df8a", name: "Light Green", textColor: "#000000"},
-    {id: 4, value: "#33a02c", name: "Green", textColor: "#000000"},
-    {id: 5, value: "#fb9a99", name: "Light Red", textColor: "#000000"},
-    {id: 6, value: "#e31a1c", name: "Red ", textColor: "#ffffff"},
-    {id: 7, value: "#fdbf6f", name: "Light Orange", textColor: "#000000"},
-    {id: 8, value: "#ff7f00", name: "Orange", textColor: "#000000"},
-    {id: 9, value: "#cab2d6", name: "Light Violet", textColor: "#000000"},
-    {id: 10, value: "#6a3d9a", name: "Violet", textColor: "#ffffff"},
-    {id: 11, value: "#b15928", name: "Brown", textColor: "#000000"},
-    {id: 12, value: "#000000", name: "Black", textColor: "#ffffff"},
-    {id: 13, value: "#cccccc", name: "Light Grey", textColor: "#000000"}
+    { id: "", name: "Auto", textColor: "#000000" },
+    { id: "#a6cee3", name: "Light Blue", textColor: "#000000" },
+    { id: "#1f78b4", name: "Blue", textColor: "#ffffff" },
+    { id: "#b2df8a", name: "Light Green", textColor: "#000000" },
+    { id: "#33a02c", name: "Green", textColor: "#000000" },
+    { id: "#fb9a99", name: "Light Red", textColor: "#000000" },
+    { id: "#e31a1c", name: "Red ", textColor: "#ffffff" },
+    { id: "#fdbf6f", name: "Light Orange", textColor: "#000000" },
+    { id: "#ff7f00", name: "Orange", textColor: "#000000" },
+    { id: "#cab2d6", name: "Light Violet", textColor: "#000000" },
+    { id: "#6a3d9a", name: "Violet", textColor: "#ffffff" },
+    { id: "#b15928", name: "Brown", textColor: "#000000" },
+    { id: "#000000", name: "Black", textColor: "#ffffff" },
+    { id: "#cccccc", name: "Light Grey", textColor: "#000000" }
 ]
 
 export interface PaperlessTag extends MatchingModel {
 
-    colour?: number
+    colour?: string
 
     is_inbox_tag?: boolean
-  
+
     document_count?: number
 }