adjust frontend to use the new tag color api

src-ui/package-lock.json

@@ -2035,6 +2035,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ctrl/tinycolor": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz",
+      "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ=="
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",
@@ -7895,6 +7900,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "material-colors": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
+      "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg=="
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -8333,6 +8343,16 @@
         }
       }
     },
+    "ngx-color": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-6.2.0.tgz",
+      "integrity": "sha512-n04tcMnCpOgmI24egST94YwHmnSoAxK8O1T2t3nGrTwWbvw5XBRJvImNFnoNrriBXzc4Gx4hFehH5MU8CZxp1w==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.1.6",
+        "material-colors": "^1.2.6",
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-cookie-service": {
       "version": "10.1.1",
       "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz",

src-ui/package.json

@@ -26,6 +26,7 @@
     "file-saver": "^2.0.5",
     "ng-bootstrap": "^1.6.3",
     "ng2-pdf-viewer": "^6.3.2",
+    "ngx-color": "^6.2.0",
     "ngx-cookie-service": "^10.1.1",
     "ngx-file-drop": "^10.0.0",
     "ngx-infinite-scroll": "^9.1.0",

src-ui/src/app/app.module.ts

@@ -63,6 +63,8 @@ import { DateComponent } from './components/common/input/date/date.component';
 import { ISODateTimeAdapter } from './utils/ngb-iso-date-time-adapter';
 import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter';
 import { ApiVersionInterceptor } from './interceptors/api-version.interceptor';
+import { ColorSliderModule } from 'ngx-color/slider';
+import { ColorComponent } from './components/common/input/color/color.component';
 
 import localeFr from '@angular/common/locales/fr';
 import localeNl from '@angular/common/locales/nl';
@@ -125,7 +127,8 @@ registerLocaleData(localeEnGb)
     NumberComponent,
     SafePipe,
     CustomDatePipe,
-    DateComponent
+    DateComponent,
+    ColorComponent
   ],
   imports: [
     BrowserModule,
@@ -137,7 +140,8 @@ registerLocaleData(localeEnGb)
     NgxFileDropModule,
     InfiniteScrollModule,
     PdfViewerModule,
-    NgSelectModule
+    NgSelectModule,
+    ColorSliderModule
   ],
   providers: [
     DatePipe,

src-ui/src/app/components/common/input/color/color.component.html

@@ -0,0 +1,33 @@
+<div class="form-group">
+  <label [for]="inputId">{{title}}</label>
+
+  <div class="input-group">
+      <div class="input-group-prepend">
+        <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
+      </div>
+      
+      <ng-template #popContent>
+        <div style="min-width: 200px;" class="pb-3">
+          <color-slider [color]="value" (onChangeComplete)="colorChanged($event)"></color-slider>
+        </div>
+        
+      </ng-template>
+
+      <input class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom">
+
+      <div class="input-group-append">
+        <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dice-5" viewBox="0 0 16 16">
+            <path d="M13 1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h10zM3 0a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3z"/>
+            <path d="M5.5 4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-8 0a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm4-4a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+          </svg>
+        </button>
+      </div>
+
+      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+      <div class="invalid-feedback">
+        {{error}}
+      </div>
+    </div>
+
+</div>

src-ui/src/app/components/common/input/color/color.component.spec.ts

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

src-ui/src/app/components/common/input/color/color.component.ts

@@ -0,0 +1,27 @@
+import { Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AbstractInputComponent } from '../abstract-input';
+
+@Component({
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ColorComponent),
+    multi: true
+  }],
+  selector: 'app-input-color',
+  templateUrl: './color.component.html',
+  styleUrls: ['./color.component.scss']
+})
+export class ColorComponent extends AbstractInputComponent<string> {
+
+  constructor() {
+    super()
+  }
+
+  randomize() {
+  }
+
+  colorChanged(value) {
+    this.value = value.color.hex
+  }
+}

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

@@ -1,2 +1,2 @@
-<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>
+<span *ngIf="!clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</span>
+<a [routerLink]="" [title]="linkTitle" *ngIf="clickable" class="badge" [style.background]="tag.color" [style.color]="tag.text_color">{{tag.name}}</a>

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
 
 @Component({
   selector: 'app-tag',
@@ -22,12 +22,4 @@ export class TagComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  getColour() {
-    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

@@ -8,15 +8,7 @@
     <div class="modal-body">
       <app-input-text i18n-title title="Name" formControlName="name" [error]="error?.name"></app-input-text>
 
-
-      <div class="form-group paperless-input-select">
-        <label for="colour" i18n>Color</label>
-        <ng-select name="colour" formControlName="colour" [items]="getColours()" bindValue="id" bindLabel="name" [clearable]="false">
-          <ng-template ng-option-tmp ng-label-tmp let-item="item">
-            <span class="badge" [style.background]="item.id" [style.color]="item.textColor">{{item.name}}</span>
-          </ng-template>
-        </ng-select>
-      </div>
+      <app-input-color i18n-title title="Color" formControlName="color" [error]="error?.color"></app-input-color>
 
       <app-input-check i18n-title title="Inbox tag" formControlName="is_inbox_tag" i18n-hint hint="Inbox tags are automatically assigned to all consumed documents."></app-input-check>
       <app-input-select i18n-title 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

@@ -2,7 +2,7 @@ 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 { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
+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';
 
@@ -28,7 +28,7 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
   getForm(): FormGroup {
     return new FormGroup({
       name: new FormControl(''),
-      colour: new FormControl(''),
+      color: new FormControl(''),
       is_inbox_tag: new FormControl(false),
       matching_algorithm: new FormControl(1),
       match: new FormControl(""),
@@ -36,12 +36,4 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
     })
   }
 
-  getColours() {
-    return TAG_COLOURS
-  }
-
-  getColor(id) {
-    return TAG_COLOURS.find(c => c.id == id)
-  }
-
 }

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

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

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { FILTER_HAS_TAG } from 'src/app/data/filter-rule-type';
-import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag';
+import { PaperlessTag } from 'src/app/data/paperless-tag';
 import { DocumentListViewService } from 'src/app/services/document-list-view.service';
 import { TagService } from 'src/app/services/rest/tag.service';
 import { ToastService } from 'src/app/services/toast.service';
@@ -22,14 +22,6 @@ export class TagListComponent extends GenericListComponent<PaperlessTag> {
     super(tagService, modalService, TagEditDialogComponent, toastService)
   }
 
-  getColor(id) {
-    var color = TAG_COLOURS.find(c => c.id == id)
-    if (color) {
-      return color
-    }
-    return { id: id, name: id, textColor: "#ffffff" }
-  }
-
   getDeleteMessage(object: PaperlessTag) {
     return $localize`Do you really want to delete the tag "${object.name}"?`
   }

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

@@ -1,27 +1,10 @@
-import { MatchingModel } from './matching-model';
-import { ObjectWithId } from './object-with-id';
-
-
-export const TAG_COLOURS = [
-    { id: "", name: "Auto", textColor: "#000000" },
-    { id: "#a6cee3", name: $localize`Light blue`, textColor: "#000000" },
-    { id: "#1f78b4", name: $localize`Blue`, textColor: "#ffffff" },
-    { id: "#b2df8a", name: $localize`Light green`, textColor: "#000000" },
-    { id: "#33a02c", name: $localize`Green`, textColor: "#ffffff" },
-    { id: "#fb9a99", name: $localize`Light red`, textColor: "#000000" },
-    { id: "#e31a1c", name: $localize`Red `, textColor: "#ffffff" },
-    { id: "#fdbf6f", name: $localize`Light orange`, textColor: "#000000" },
-    { id: "#ff7f00", name: $localize`Orange`, textColor: "#000000" },
-    { id: "#cab2d6", name: $localize`Light violet`, textColor: "#000000" },
-    { id: "#6a3d9a", name: $localize`Violet`, textColor: "#ffffff" },
-    { id: "#b15928", name: $localize`Brown`, textColor: "#ffffff" },
-    { id: "#000000", name: $localize`Black`, textColor: "#ffffff" },
-    { id: "#cccccc", name: $localize`Light grey`, textColor: "#000000" }
-]
+import { MatchingModel } from "./matching-model";
 
 export interface PaperlessTag extends MatchingModel {
 
-    colour?: string
+    color?: string
+
+    text_color?: string
 
     is_inbox_tag?: boolean
 

src-ui/src/environments/environment.prod.ts

@@ -1,7 +1,7 @@
 export const environment = {
   production: true,
   apiBaseUrl: "/api/",
-  apiVersion: "1",
+  apiVersion: "2",
   appTitle: "Paperless-ng",
   version: "1.2.1",
   webSocketHost: window.location.host,

src-ui/src/environments/environment.ts

@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
   apiBaseUrl: "http://localhost:8000/api/",
-  apiVersion: "1",
+  apiVersion: "2",
   appTitle: "Paperless-ng",
   version: "DEVELOPMENT",
   webSocketHost: "localhost:8000",