feat(viewer): make hex code display optional for color value (DSP-1667)

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 }}

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;
 }

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,15 +161,35 @@ 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');
 
       expect(testHostComponent.colorValueComponent.form.valid).toBeTruthy();
 
       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();
 

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