implementing auto select

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.html

@@ -1,6 +1,6 @@
 <ds-item-type-badge [object]="dso"></ds-item-type-badge>
 <ds-truncatable [id]="dso.id">
-    <ds-person-input-suggestions [suggestions]="suggestions" (typeSuggestion)="filter($event)" [(ngModel)]="selected" (clickSuggestion)="select($event)" (submitSuggestion)="selectCustom($event)"></ds-person-input-suggestions>
+    <ds-person-input-suggestions [suggestions]="suggestions" (typeSuggestion)="filter($event)" [(ngModel)]="selectedName" (clickSuggestion)="select($event)" (submitSuggestion)="selectCustom($event)"></ds-person-input-suggestions>
     <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['person.jobTitle']).length > 0"

src/app/entity-groups/research-entities/submission/item-list-elements/person/person-search-result-list-submission-element.component.ts

@@ -10,16 +10,11 @@ import { TruncatableService } from '../../../../../shared/truncatable/truncatabl
 import { take } from 'rxjs/operators';
 import { NotificationsService } from '../../../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
-import { DsDynamicLookupRelationModalComponent } from '../../../../../shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { NameVariantModalComponent } from './name-variant-modal/name-variant-modal.component';
-import { Community } from '../../../../../core/shared/community.model';
 import { MetadataValue } from '../../../../../core/shared/metadata.models';
 import { ItemDataService } from '../../../../../core/data/item-data.service';
-
+import { SelectableListService } from '../../../../../shared/object-list/selectable-list/selectable-list.service';
-const NOTIFICATION_CONTENT_KEY = 'submission.sections.describe.relationship-lookup.name-variant.notification.content';
-const NOTIFICATION_CONFIRM_KEY = 'submission.sections.describe.relationship-lookup.name-variant.notification.confirm';
-const NOTIFICATION_DECLINE_KEY = 'submission.sections.describe.relationship-lookup.name-variant.notification.decline';
 
 @listableObjectComponent('PersonSearchResult', ViewMode.ListElement, Context.Workspace)
 @Component({
@@ -34,7 +29,7 @@ const NOTIFICATION_DECLINE_KEY = 'submission.sections.describe.relationship-look
 export class PersonSearchResultListSubmissionElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
   suggestions: string[];
   allSuggestions: string[];
-  selected: string;
+  selectedName: string;
   alternativeField = 'dc.title.alternative';
 
   constructor(protected truncatableService: TruncatableService,
@@ -42,7 +37,8 @@ export class PersonSearchResultListSubmissionElementComponent extends SearchResu
               private notificationsService: NotificationsService,
               private translateService: TranslateService,
               private modalService: NgbModal,
-              private itemDataService: ItemDataService) {
+              private itemDataService: ItemDataService,
+              private selectableListService: SelectableListService) {
     super(truncatableService);
   }
 
@@ -56,7 +52,7 @@ export class PersonSearchResultListSubmissionElementComponent extends SearchResu
     this.relationshipService.getNameVariant(this.listID, this.dso.uuid)
       .pipe(take(1))
       .subscribe((nameVariant: string) => {
-          this.selected = nameVariant || defaultValue;
+          this.selectedName = nameVariant || defaultValue;
         }
       );
   }
@@ -66,6 +62,13 @@ export class PersonSearchResultListSubmissionElementComponent extends SearchResu
   }
 
   select(value) {
+    this.selectableListService.isObjectSelected(this.listID, this.object)
+      .pipe(take(1))
+      .subscribe((selected) => {
+        if (!selected) {
+          this.selectableListService.selectSingle(this.listID, this.object);
+        }
+      });
     this.relationshipService.setNameVariant(this.listID, this.dso.uuid, value);
   }
 

src/app/shared/object-collection/shared/selectable-list-item-control.component.html

@@ -0,0 +1,12 @@
+<ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
+    <input *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+           [name]="'checkbox' + index"
+           [id]="'object' + index"
+           [ngModel]="selected$ | async"
+           (ngModelChange)="selectCheckbox($event, object)">
+    <input *ngIf="!selectionConfig.repeatable" class="form-check-input" type="radio"
+           [name]="'radio' + index"
+           [id]="'object' + index"
+           [checked]="selected$ | async"
+           (click)="selectRadio(!checked, object)">
+</ng-container>

src/app/shared/object-collection/shared/selectable-list-item-control.component.ts

@@ -0,0 +1,75 @@
+import { Component, ComponentFactoryResolver, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ListableObject } from './listable-object.model';
+import { SelectableListService } from '../../object-list/selectable-list/selectable-list.service';
+import { map, take } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+
+@Component({
+  selector: 'ds-selectable-list-item-control',
+  // styleUrls: ['./selectable-list-item-control.component.scss'],
+  templateUrl: './selectable-list-item-control.component.html'
+})
+/**
+ * Component for determining what component to use depending on the item's relationship type (relationship.type)
+ */
+export class SelectableListItemControlComponent implements OnInit {
+  /**
+   * The item or metadata to determine the component for
+   */
+  @Input() object: ListableObject;
+
+
+  @Input() selectionConfig: { repeatable: boolean, listId: string };
+
+  /**
+   * Index of the control in the list
+   */
+  @Input() index: number;
+
+  @Output() deselectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+
+  selected$: Observable<boolean>;
+  constructor(private selectionService: SelectableListService) {
+  }
+
+  /**
+   * Setup the dynamic child component
+   */
+  ngOnInit(): void {
+    this.selected$ = this.selectionService?.isObjectSelected(this.selectionConfig.listId, this.object);
+    this.selected$.subscribe((selected: ListableObject) => {
+
+    })
+  }
+
+  selectCheckbox(value: boolean, object: ListableObject) {
+    if (value) {
+      this.selectionService.selectSingle(this.selectionConfig.listId, object);
+      this.selectObject.emit(object);
+    } else {
+      this.selectionService.deselectSingle(this.selectionConfig.listId, object);
+      this.deselectObject.emit(object);
+    }
+  }
+
+  selectRadio(value: boolean, object: ListableObject) {
+    const selected$ = this.selectionService.getSelectableList(this.selectionConfig.listId);
+    selected$.pipe(
+      take(1),
+      map((selected) => selected ? selected.selection : [])
+    ).subscribe((selection) => {
+      // First deselect any existing selections, this is a radio button
+      selection.forEach((selectedObject) => {
+        this.selectionService.deselectSingle(this.selectionConfig.listId, selectedObject);
+        this.deselectObject.emit(selectedObject);
+      });
+      if (value) {
+        this.selectionService.selectSingle(this.selectionConfig.listId, object);
+        this.selectObject.emit(object);
+      }
+    });
+  }
+}

src/app/shared/object-list/object-list.component.html

@@ -13,20 +13,14 @@
     <ul *ngIf="objects?.hasSucceeded" class="list-unstyled" [ngClass]="{'ml-4': selectable}">
         <li *ngFor="let object of objects?.payload?.page; let i = index; let last = last" class="mt-4 mb-4" [class.border-bottom]="hasBorder && !last">
           <span *ngIf="selectable">
-                <ng-container *ngVar="selectionService?.isObjectSelected(selectionConfig?.listId, object) | async as checked">
+                   <ds-selectable-list-item-control [index]="i"
-                    <input *ngIf="selectionConfig.repeatable" class="form-check-input" type="checkbox"
+                                                    [object]="object"
-                           [name]="'checkbox' + i"
+                                                    [selectionConfig]="selectionConfig"
-                           [id]="'object'+i"
+                                                    (deselectObject)="deselectObject.emit($event)"
-                           [checked]="checked"
+                                                    (selectObject)="selectObject.emit($event)"></ds-selectable-list-item-control>
-                           (change)="selectCheckbox(!checked, object)">
-                    <input *ngIf="!selectionConfig.repeatable" class="form-check-input" type="radio"
-                           [name]="'radio' + i"
-                           [id]="'object'+i"
-                           [checked]="checked"
-                           (click)="selectRadio(!checked, object)">
-                </ng-container>
               </span>
-            <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [index]="i" [context]="context" [linkType]="linkType" [listID]="selectionConfig?.listId"></ds-listable-object-component-loader>
+            <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [index]="i" [context]="context" [linkType]="linkType"
+                                                 [listID]="selectionConfig?.listId"></ds-listable-object-component-loader>
         </li>
     </ul>
 </ds-pagination>

src/app/shared/object-list/object-list.component.ts

@@ -180,31 +180,5 @@ export class ObjectListComponent {
     this.paginationChange.emit(event);
   }
 
-  selectCheckbox(value: boolean, object: ListableObject) {
-    if (value) {
-      this.selectionService.selectSingle(this.selectionConfig.listId, object);
-      this.selectObject.emit(object);
-    } else {
-      this.selectionService.deselectSingle(this.selectionConfig.listId, object);
-      this.deselectObject.emit(object);
-    }
-  }
 
-  selectRadio(value: boolean, object: ListableObject) {
-    const selected$ = this.selectionService.getSelectableList(this.selectionConfig.listId);
-    selected$.pipe(
-      take(1),
-      map((selected) => selected ? selected.selection : [])
-    ).subscribe((selection) => {
-      // First deselect any existing selections, this is a radio button
-      selection.forEach((selectedObject) => {
-        this.selectionService.deselectSingle(this.selectionConfig.listId, selectedObject);
-        this.deselectObject.emit(selectedObject);
-      });
-      if (value) {
-        this.selectionService.selectSingle(this.selectionConfig.listId, object);
-        this.selectObject.emit(object);
-      }
-    });
-  }
 }

src/app/shared/shared.module.ts

@@ -169,6 +169,7 @@ import { ListableObjectDirective } from './object-collection/shared/listable-obj
 import { SearchLabelComponent } from './search/search-labels/search-label/search-label.component';
 import { ItemMetadataRepresentationListElementComponent } from './object-list/metadata-representation-list-element/item/item-metadata-representation-list-element.component';
 import { MetadataRepresentationListComponent } from '../+item-page/simple/metadata-representation-list/metadata-representation-list.component';
+import { SelectableListItemControlComponent } from './object-collection/shared/selectable-list-item-control.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -321,6 +322,7 @@ const COMPONENTS = [
   ItemSelectComponent,
   CollectionSelectComponent,
   MetadataRepresentationLoaderComponent,
+  SelectableListItemControlComponent
 ];
 
 const ENTRY_COMPONENTS = [