Link value component

projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.html

@@ -1,5 +1,6 @@
 <div>
   <span [ngSwitch]="displayValue.type">
+
     <kui-text-value-as-string #displayVal *ngSwitchCase="constants.TextValue" [mode]="mode"
       [displayValue]="displayValue"></kui-text-value-as-string>
     <kui-int-value #displayVal *ngSwitchCase="constants.IntValue" [mode]="mode" [displayValue]="displayValue">
@@ -16,6 +17,8 @@
     </kui-interval-value>
     <kui-time-value #displayVal *ngSwitchCase="constants.TimeValue" [mode]="mode" [displayValue]="displayValue">
     </kui-time-value>
+    <kui-link-value #displayVal *ngSwitchCase="constants.LinkValue" [mode]="mode" [displayValue]="displayValue"
+                    [parentResource]="parentResource" [propType]="displayValue.property"></kui-link-value>
   </span>
 </div>
 <div>

projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.spec.ts

@@ -29,7 +29,18 @@ class TestTextValueAsStringComponent {
 
   @Input() displayValue;
 }
+@Component({
+  selector: `kui-link-value`,
+  template: ``
+})
+class TestLinkValueComponent {
 
+  @Input() mode;
+
+  @Input() displayValue;
+  @Input() parentResource;
+  @Input() propType;
+}
 @Component({
   selector: `kui-uri-value`,
   template: ``
@@ -203,6 +214,7 @@ describe('DisplayEditComponent', () => {
         TestHostDisplayValueComponent,
         TestTextValueAsStringComponent,
         TestIntValueComponent,
+        TestLinkValueComponent,
         TestIntervalValueComponent,
         TestBooleanValueComponent,
         TestUriValueComponent,
@@ -315,7 +327,8 @@ describe('DisplayEditComponent', () => {
       expect(valuesSpy.v2.values.updateValue).toHaveBeenCalledTimes(1);
 
       expect(valuesSpy.v2.values.getValue).toHaveBeenCalledTimes(1);
-      expect(valuesSpy.v2.values.getValue).toHaveBeenCalledWith(testHostComponent.readResource.id, testHostComponent.readValue.uuid);
+      expect(valuesSpy.v2.values.getValue).toHaveBeenCalledWith(testHostComponent.readResource.id,
+        testHostComponent.displayEditValueComponent.displayValue.uuid);
 
       expect(testHostComponent.displayEditValueComponent.displayValue.id).toEqual('newID');
       expect(testHostComponent.displayEditValueComponent.mode).toEqual('read');

projects/knora-ui/src/lib/viewer/operations/display-edit/display-edit.component.ts

@@ -67,15 +67,12 @@ export class DisplayEditComponent implements OnInit {
       updateRes.type = this.parentResource.type;
       updateRes.property = this.displayValue.property;
       updateRes.value = updatedVal;
-
       this.knoraApiConnection.v2.values.updateValue(updateRes as UpdateResource<UpdateValue>).pipe(
         mergeMap((res: WriteValueResponse) => {
-          // console.log(res);
-          return this.knoraApiConnection.v2.values.getValue(this.parentResource.id, this.displayValue.uuid);
+          return this.knoraApiConnection.v2.values.getValue(this.parentResource.id, res.uuid);
         })
       ).subscribe(
         (res2: ReadResource) => {
-          // console.log(res2);
           this.displayValue = res2.getValues(this.displayValue.property)[0];
           this.mode = 'read';
         }

projects/knora-ui/src/lib/viewer/values/decimal-value/decimal-value.component.spec.ts

@@ -62,7 +62,7 @@ describe('DecimalValueComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ 
+      declarations: [
         DecimalValueComponent,
         TestHostDisplayValueComponent,
         TestHostCreateValueComponent

projects/knora-ui/src/lib/viewer/values/link-value/link-value.component.html

@@ -0,0 +1,14 @@
+<span [formGroup]="form">
+  <mat-form-field class="example-full-width linkValue-field">
+        <input [formControlName]="'linkValue'" type="text" placeholder="Link value" aria-label="resource" matInput [matAutocomplete]="auto" [readonly]="mode === 'read'">
+
+        <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayResource">
+          <mat-option *ngFor="let res of resources" [value]="res">
+              {{res?.label}}
+          </mat-option>
+        </mat-autocomplete>
+    </mat-form-field>
+    <mat-form-field class="large-field comment-field">
+        <input matInput [formControlName]="'comment'" class="comment" placeholder="Comment" type="text" [readonly]="mode === 'read'">
+    </mat-form-field>
+</span>

projects/knora-ui/src/lib/viewer/values/link-value/link-value.component.scss

@@ -0,0 +1,9 @@
+.comment-field {
+  display: block;
+  max-width: 250px;
+}
+.linkValue-field {
+  display: block;
+  max-width: 250px;
+
+}