From 66fe821b049857bfa2e6f04667fe69a992e7c67c Mon Sep 17 00:00:00 2001
From: jonaswinkler <17569239+jonaswinkler@users.noreply.github.com>
Date: Thu, 25 Feb 2021 22:43:45 +0100
Subject: [PATCH] color picker fixes, random default color

---
 .../common/input/color/color.component.html        | 14 +++++++-------
 .../common/input/color/color.component.ts          |  5 ++++-
 .../tag-edit-dialog/tag-edit-dialog.component.ts   |  3 ++-
 src-ui/src/app/utils/color.ts                      | 12 ++++++++++++
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 src-ui/src/app/utils/color.ts

diff --git a/src-ui/src/app/components/common/input/color/color.component.html b/src-ui/src/app/components/common/input/color/color.component.html
index c39c41d8f..ca4a0e281 100644
--- a/src-ui/src/app/components/common/input/color/color.component.html
+++ b/src-ui/src/app/components/common/input/color/color.component.html
@@ -1,14 +1,14 @@
 <div class="form-group">
   <label [for]="inputId">{{title}}</label>
 
-  <div class="input-group">
+  <div class="input-group" [class.is-invalid]="error">
       <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>
+          <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
         </div>
         
       </ng-template>
@@ -24,10 +24,10 @@
         </button>
       </div>
 
-      <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
-      <div class="invalid-feedback">
-        {{error}}
-      </div>
-    </div>
 
+    </div>
+    <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
+    <div class="invalid-feedback">
+      {{error}}
+    </div>
 </div>
\ No newline at end of file
diff --git a/src-ui/src/app/components/common/input/color/color.component.ts b/src-ui/src/app/components/common/input/color/color.component.ts
index e75bbee16..a7f3452f2 100644
--- a/src-ui/src/app/components/common/input/color/color.component.ts
+++ b/src-ui/src/app/components/common/input/color/color.component.ts
@@ -1,5 +1,6 @@
 import { Component, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { randomColor } from 'src/app/utils/color';
 import { AbstractInputComponent } from '../abstract-input';
 
 @Component({
@@ -19,9 +20,11 @@ export class ColorComponent extends AbstractInputComponent<string> {
   }
 
   randomize() {
+    this.colorChanged(randomColor())
   }
 
   colorChanged(value) {
-    this.value = value.color.hex
+    this.value = value
+    this.onChange(value)
   }
 }
diff --git a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts
index 53cd50c45..623b033ec 100644
--- a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts
+++ b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts
@@ -5,6 +5,7 @@ import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-
 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';
+import { randomColor } from 'src/app/utils/color';
 
 @Component({
   selector: 'app-tag-edit-dialog',
@@ -28,7 +29,7 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
   getForm(): FormGroup {
     return new FormGroup({
       name: new FormControl(''),
-      color: new FormControl(''),
+      color: new FormControl(randomColor()),
       is_inbox_tag: new FormControl(false),
       matching_algorithm: new FormControl(1),
       match: new FormControl(""),
diff --git a/src-ui/src/app/utils/color.ts b/src-ui/src/app/utils/color.ts
new file mode 100644
index 000000000..bcfdef088
--- /dev/null
+++ b/src-ui/src/app/utils/color.ts
@@ -0,0 +1,12 @@
+
+  function componentToHex(c) {
+    var hex = c.toString(16);
+    return hex.length == 1 ? "0" + hex : hex;
+  }
+
+  export function randomColor() {
+    let r = Math.floor(Math.random() * 150) + 50
+    let g = Math.floor(Math.random() * 150) + 50
+    let b = Math.floor(Math.random() * 150) + 50
+    return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
+  }
\ No newline at end of file