Scroll plus button into view if necessary after creating new relation

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.component.ts

@@ -1,6 +1,7 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { AfterViewChecked, Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
 import { isEmpty } from 'tsfun';
-import { Relation, Resource } from 'idai-field-core';
+import { Relation, Resource, Document } from 'idai-field-core';
+import { AngularUtility } from '../../../../angular/angular-utility';
 
 
 /**
@@ -10,26 +11,52 @@ import { Relation, Resource } from 'idai-field-core';
     selector: 'relation-picker-group',
     templateUrl: './relation-picker-group.html'
 })
-export class RelationPickerGroupComponent implements OnChanges {
+export class RelationPickerGroupComponent implements OnChanges, AfterViewChecked {
 
     @Input() resource: Resource;
     @Input() relationDefinition: Relation;
 
+    @ViewChild('plusButton') plusButtonElement: ElementRef;
+
     public relations: any;
 
+    private creating: boolean = false;
+    private autoScroll: boolean = false;
+
 
     public ngOnChanges() {
 
         if (this.resource) this.relations = this.resource.relations;
     }
 
 
-    public createRelation() {
+    public async ngAfterViewChecked() {
+
+        if (this.autoScroll && this.plusButtonElement) {
+            await AngularUtility.refresh();
+            this.plusButtonElement.nativeElement.scrollIntoViewIfNeeded(false);
+            this.autoScroll = false;
+        }
+    }
+
+
+    public onTargetSelected(target: Document) {
+
+        if (this.creating) {
+            this.creating = false;
+            if (target) this.autoScroll = true;
+        }
+    }
+
+
+    public async createRelation() {
 
         if (!this.relations[this.relationDefinition.name])
             this.relations[this.relationDefinition.name] = [];
 
         this.relations[this.relationDefinition.name].push('');
+
+        this.creating = true;
     }
 
 
@@ -42,7 +69,7 @@ export class RelationPickerGroupComponent implements OnChanges {
     }
 
 
-    public isPlusButtonVisible(): boolean {
+    public isPlusButtonAvailable(): boolean {
 
         return !this.relations[this.relationDefinition.name]
             || isEmpty(this.relations[this.relationDefinition.name])

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.html

@@ -1,14 +1,15 @@
 <div *ngFor="let relation of relations[relationDefinition.name]; let i = index">
     <relation-picker [resource]="resource"
                      [relationDefinition]="relationDefinition"
-                     [relationIndex]="i"></relation-picker>
+                     [relationIndex]="i"
+                     (onTargetSelected)="onTargetSelected($event)"></relation-picker>
 </div>
 
-<div *ngIf="isPlusButtonVisible()"
+<div *ngIf="isPlusButtonAvailable()"
+     #plusButton
      class="circular-button add-relation"
      [class.with-margin]="relations[relationDefinition.name]?.length > 0"
      type="button"
      (click)="createRelation()">+</div>
-<div *ngIf="!isPlusButtonVisible() && relations[relationDefinition.name]?.length > 1"
+<div *ngIf="!isPlusButtonAvailable() && relations[relationDefinition.name]?.length > 1"
      class="relation-picker-group-space"></div>
-

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.scss

@@ -22,6 +22,7 @@ relation-picker-group {
     color: #555 !important;
     box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.14) !important;
     user-select: none;
+    scroll-margin: 10px;
 
     &.with-margin {
       margin-top: 5px;

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { isUndefinedOrEmpty } from 'tsfun';
 import { Document, Datastore, Resource, Relation, Labels, ProjectConfiguration } from 'idai-field-core';
 import { getSuggestions } from './get-suggestions';
@@ -22,6 +22,8 @@ export class RelationPickerComponent implements OnChanges {
     @Input() relationDefinition: Relation;
     @Input() relationIndex: number;
 
+    @Output() onTargetSelected: EventEmitter<Document|undefined> = new EventEmitter<Document|undefined>();
+
     public availableTargets: Array<Document>;
     public selectedTarget: Document|undefined;
     public disabled: boolean = false;
@@ -54,9 +56,9 @@ export class RelationPickerComponent implements OnChanges {
     }
 
 
-    public onTargetSelected(targetId: string) {
+    public selectTarget(targetId: string) {
 
-        const target: Document = targetId
+        const target: Document|undefined = targetId
             ? this.availableTargets.find(t => t.resource.id === targetId)
             : undefined;
 
@@ -65,13 +67,16 @@ export class RelationPickerComponent implements OnChanges {
         } else {
             this.deleteRelation();
         }
+
+        this.onTargetSelected.emit(target);
     }
 
 
     public async onBlur() {
 
         await this.updateSelectedTarget();
         if (!this.selectedTarget) this.deleteRelation();
+        this.onTargetSelected.emit();
     }
 
 

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker.html

@@ -4,7 +4,7 @@
                            [values]="getAvailableTargetIds()"
                            [getLabel]="getTargetLabel"
                            [initiallyOpened]="true"
-                           (onValueSelected)="onTargetSelected($event)"
+                           (onValueSelected)="selectTarget($event)"
                            (onBlur)="onBlur()"
                            (onScrollToEnd)="loadNextChunk()"
                            (onSearchTermChanged)="search($event)"></searchable-select>