From 0b03781940d6eb1214ca305085ec9fb36591e46b Mon Sep 17 00:00:00 2001
From: Tobias Schweizer <tobiasschweizer@users.noreply.github.com>
Date: Tue, 15 Jun 2021 17:02:31 +0200
Subject: [PATCH] feat(viewer): make hex code display optional for color value
 (DSP-1667) (#303)

* feat(viewer): make hex code display optional for color value

* feat(viewer): make hex code display optional for color value
---
 .../color-value/color-value.component.html    |  5 +-
 .../color-value/color-value.component.scss    |  5 +-
 .../color-value/color-value.component.spec.ts | 72 +++++++++++++++++--
 .../color-value/color-value.component.ts      |  6 ++
 4 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.html b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.html
index 9579c332b..923fa8a6d 100644
--- a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.html
+++ b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.html
@@ -1,8 +1,7 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-    <div class="color-preview"
-        [style.color]="textColor"
+    <div class="rm-value"
         [style.background-color]="valueFormControl.value">
-        <span class="rm-value">{{ valueFormControl.value }}</span>
+        <span *ngIf="showHexCode" class="hexcode" [style.color]="textColor">{{ valueFormControl.value }}</span>
     </div>
     <span class="rm-comment" *ngIf="shouldShowComment">
         {{ commentFormControl.value }}
diff --git a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.scss b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.scss
index f5df3a5f3..7fd481269 100644
--- a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.scss
+++ b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.scss
@@ -15,10 +15,11 @@
   }
 }
 
-.color-preview {
+.rm-value {
   border: 1px solid rgba(33,33,33,.5);
   border-radius: 4px;
   padding: 3px 12px;
-  margin: 6px 0;
+  margin: 6px 0 10px 0 !important;
   width: 6em;
+  min-height: 8px;
 }
diff --git a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.spec.ts b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.spec.ts
index dd59432a3..10c729d2c 100644
--- a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.spec.ts
+++ b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.spec.ts
@@ -70,7 +70,7 @@ class TestColorPickerComponent implements ControlValueAccessor, MatFormFieldCont
  */
 @Component({
   template: `
-    <dsp-color-value #colorVal [displayValue]="displayColorVal" [mode]="mode"></dsp-color-value>`
+      <dsp-color-value #colorVal [displayValue]="displayColorVal" [mode]="mode" [showHexCode]="showColorHex"></dsp-color-value>`
 })
 class TestHostDisplayValueComponent implements OnInit {
 
@@ -80,6 +80,8 @@ class TestHostDisplayValueComponent implements OnInit {
 
   mode: 'read' | 'update' | 'create' | 'search';
 
+  showColorHex = false;
+
   ngOnInit() {
 
     MockResource.getTestThing().subscribe(res => {
@@ -159,7 +161,7 @@ describe('ColorValueComponent', () => {
       valueReadModeNativeElement = valueReadModeDebugElement.nativeElement;
     });
 
-    it('should display an existing value', () => {
+    it('should display an existing value without a hex color code', () => {
 
       expect(testHostComponent.colorValueComponent.displayValue.color).toEqual('#ff3333');
 
@@ -167,7 +169,27 @@ describe('ColorValueComponent', () => {
 
       expect(testHostComponent.colorValueComponent.mode).toEqual('read');
 
-      expect(valueReadModeNativeElement.innerText).toEqual('#ff3333');
+      expect(valueReadModeNativeElement.style.backgroundColor).not.toBeUndefined();
+
+      expect(valueReadModeNativeElement.innerText).toEqual('');
+
+    });
+
+    it('should display an existing value with a hex color code', () => {
+
+       testHostComponent.showColorHex = true;
+
+       testHostFixture.detectChanges();
+
+       expect(testHostComponent.colorValueComponent.displayValue.color).toEqual('#ff3333');
+
+       expect(testHostComponent.colorValueComponent.form.valid).toBeTruthy();
+
+       expect(testHostComponent.colorValueComponent.mode).toEqual('read');
+
+       expect(valueReadModeNativeElement.style.backgroundColor).not.toBeUndefined();
+
+       expect(valueReadModeNativeElement.innerText).toEqual('#ff3333');
 
     });
 
@@ -301,12 +323,54 @@ describe('ColorValueComponent', () => {
 
       testHostFixture.detectChanges();
 
-      expect(valueReadModeNativeElement.innerText).toEqual('#d8d8d8');
+      expect(valueReadModeNativeElement.style.backgroundColor).not.toBeUndefined();
+
+      expect(valueReadModeNativeElement.innerText).toEqual('');
 
       expect(testHostComponent.colorValueComponent.form.valid).toBeTruthy();
 
     });
 
+    it('should set a new display value not showing the hex color code', () => {
+
+        const newColor = new ReadColorValue();
+
+        newColor.color = '#d8d8d8';
+        newColor.id = 'updatedId';
+
+        testHostComponent.displayColorVal = newColor;
+
+        testHostFixture.detectChanges();
+
+        expect(valueReadModeNativeElement.style.backgroundColor).not.toBeUndefined();
+
+        expect(valueReadModeNativeElement.innerText).toEqual('');
+
+        expect(testHostComponent.colorValueComponent.form.valid).toBeTruthy();
+
+    });
+
+    it('should set a new display value showing the hex color code', () => {
+
+        testHostComponent.showColorHex = true;
+
+        const newColor = new ReadColorValue();
+
+        newColor.color = '#d8d8d8';
+        newColor.id = 'updatedId';
+
+        testHostComponent.displayColorVal = newColor;
+
+        testHostFixture.detectChanges();
+
+        expect(valueReadModeNativeElement.style.backgroundColor).not.toBeUndefined();
+
+        expect(valueReadModeNativeElement.innerText).toEqual('#d8d8d8');
+
+        expect(testHostComponent.colorValueComponent.form.valid).toBeTruthy();
+
+      });
+
     it('should unsubscribe when destroyed', () => {
       expect(testHostComponent.colorValueComponent.valueChangesSubscription.closed).toBeFalsy();
 
diff --git a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.ts b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.ts
index 01c4c0375..7d782202d 100644
--- a/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.ts
+++ b/projects/dsp-ui/src/lib/viewer/values/color-value/color-value.component.ts
@@ -21,6 +21,8 @@ export class ColorValueComponent extends BaseValueComponent implements OnInit, O
 
     @Input() displayValue?: ReadColorValue;
 
+    @Input() showHexCode = false;
+
     valueFormControl: FormControl;
     commentFormControl: FormControl;
     form: FormGroup;
@@ -71,6 +73,10 @@ export class ColorValueComponent extends BaseValueComponent implements OnInit, O
 
     ngOnChanges(changes: SimpleChanges): void {
         this.resetFormControl();
+
+        if (this.showHexCode && this.valueFormControl !== undefined) {
+            this.textColor = this.getTextColor(this.valueFormControl.value);
+        }
     }
 
     // unsubscribe when the object is destroyed to prevent memory leaks