DSP-651 Geoname Value Styling

projects/dsp-ui/src/lib/viewer/values/geoname-value/geoname-value.component.html

@@ -1,9 +1,7 @@
 <span *ngIf="mode === 'read'; else showForm" class="read-mode-view">
-    <span class="rm-value">{{ valueFormControl.value }}</span>
-    <button class="more-info" mat-icon-button matSuffix (click)="openInfo()" [attr.aria-label]="'Open in geonames.org'"
-        title="Open in geonames.org">
-        <mat-icon>launch</mat-icon>
-    </button>
+    <span class="rm-value">
+        <a class="link" target="_blank" href="https://www.geonames.org/{{valueFormControl.value}}">{{ label ? label : valueFormControl.value}}</a>
+    </span>
     <span class="rm-comment" *ngIf="shouldShowComment">
         {{ commentFormControl.value }}
     </span>

projects/dsp-ui/src/lib/viewer/values/geoname-value/geoname-value.component.spec.ts

@@ -1,21 +1,21 @@
+import { Component, DebugElement, OnInit, ViewChild } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ReadGeonameValue, MockResource, UpdateGeonameValue, CreateGeonameValue } from '@dasch-swiss/dsp-js';
-import { OnInit, Component, ViewChild, DebugElement } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { By } from '@angular/platform-browser';
-import { MatIconModule } from '@angular/material/icon';
-
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { CreateGeonameValue, MockResource, ReadGeonameValue, UpdateGeonameValue } from '@dasch-swiss/dsp-js';
 import { GeonameValueComponent } from './geoname-value.component';
 
+
+
 /**
  * Test host component to simulate parent component.
  */
 @Component({
   template: `
-    <dsp-geoname-value #inputVal [displayValue]="displayInputVal" [mode]="mode"></dsp-geoname-value>`
+    <dsp-geoname-value #inputVal [displayValue]="displayInputVal" [mode]="mode" [label]="label"></dsp-geoname-value>`
 })
 class TestHostDisplayValueComponent implements OnInit {
 
@@ -25,6 +25,8 @@ class TestHostDisplayValueComponent implements OnInit {
 
   mode: 'read' | 'update' | 'create' | 'search';
 
+  label: string;
+
   ngOnInit() {
 
     MockResource.getTestthing().subscribe(res => {
@@ -85,8 +87,6 @@ describe('GeonameValueComponent', () => {
     let valueInputNativeElement;
     let valueReadModeDebugElement: DebugElement;
     let valueReadModeNativeElement;
-    let commentInputDebugElement: DebugElement;
-    let commentInputNativeElement;
 
     beforeEach(() => {
       testHostFixture = TestBed.createComponent(TestHostDisplayValueComponent);
@@ -112,8 +112,36 @@ describe('GeonameValueComponent', () => {
 
       expect(valueReadModeNativeElement.innerText).toEqual('2661604');
 
+      const anchorDebugElement = valueReadModeDebugElement.query(By.css('a'));
+      expect(anchorDebugElement.nativeElement).toBeDefined();
+
+      expect(anchorDebugElement.attributes.href).toEqual('https://www.geonames.org/2661604');
+      expect(anchorDebugElement.attributes.target).toEqual('_blank');
+
     });
 
+    it('should display an existing value with a label', () => {
+
+        testHostComponent.label = 'testlabel';
+
+        testHostFixture.detectChanges();
+
+        expect(testHostComponent.inputValueComponent.displayValue.geoname).toEqual('2661604');
+
+        expect(testHostComponent.inputValueComponent.form.valid).toBeTruthy();
+
+        expect(testHostComponent.inputValueComponent.mode).toEqual('read');
+
+        expect(valueReadModeNativeElement.innerText).toEqual('testlabel');
+
+        const anchorDebugElement = valueReadModeDebugElement.query(By.css('a'));
+        expect(anchorDebugElement.nativeElement).toBeDefined();
+
+        expect(anchorDebugElement.attributes.href).toEqual('https://www.geonames.org/2661604');
+        expect(anchorDebugElement.attributes.target).toEqual('_blank');
+
+      });
+
     it('should make an existing value editable', () => {
 
       testHostComponent.mode = 'update';

projects/dsp-ui/src/lib/viewer/values/geoname-value/geoname-value.component.ts

@@ -1,8 +1,8 @@
 import { Component, Inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { BaseValueComponent } from '../base-value.component';
-import { CreateGeonameValue, ReadGeonameValue, UpdateGeonameValue } from '@dasch-swiss/dsp-js';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { CreateGeonameValue, ReadGeonameValue, UpdateGeonameValue } from '@dasch-swiss/dsp-js';
 import { Subscription } from 'rxjs';
+import { BaseValueComponent } from '../base-value.component';
 import { CustomRegex } from '../custom-regex';
 import { ValueErrorStateMatcher } from '../value-error-state-matcher';
 
@@ -13,6 +13,7 @@ import { ValueErrorStateMatcher } from '../value-error-state-matcher';
 })
 export class GeonameValueComponent extends BaseValueComponent implements OnInit, OnChanges, OnDestroy {
     @Input() displayValue?: ReadGeonameValue;
+    @Input() label?: string;
 
     valueFormControl: FormControl;
     commentFormControl: FormControl;
@@ -105,11 +106,4 @@ export class GeonameValueComponent extends BaseValueComponent implements OnInit,
         return updatedGeonameValue;
     }
 
-    openInfo() {
-        if (this.displayValue.geoname) {
-            const url = 'https://www.geonames.org/' + this.displayValue.geoname;
-            window.open(url, '_blank');
-        }
-    }
-
 }