Add support for selecting related records using modal

- Set record clicked in RecordListModal as the selected field
- Replace currently selected item
-- Display chip for new record

core/app/fields/relate/templates/edit/relate.component.spec.ts

@@ -1,5 +1,5 @@
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {Field} from '@app-common/record/field.model';
 import {Record} from '@app-common/record/record.model';
 import {RouterTestingModule} from '@angular/router/testing';
@@ -24,12 +24,14 @@ import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-n
 import {moduleNameMapperMock} from '@services/navigation/module-name-mapper/module-name-mapper.service.spec.mock';
 import {waitUntil} from '@app-common/testing/utils.spec';
 import {RecordListModalModule} from '@containers/record-list-modal/components/record-list-modal/record-list-modal.module';
+import {RelateEditFieldComponent} from '@fields/relate/templates/edit/relate.component';
 
 @Component({
     selector: 'relate-edit-field-test-host-component',
-    template: '<scrm-relate-edit [field]="field" [record]="record"></scrm-relate-edit>'
+    template: '<scrm-relate-edit #relate [field]="field" [record]="record"></scrm-relate-edit>'
 })
 class RelateEditFieldTestHostComponent {
+    @ViewChild('relate') relate: RelateEditFieldComponent;
     field: Field = {
         type: 'relate',
         value: 'Related Account',

core/app/fields/relate/templates/edit/relate.component.ts

@@ -8,6 +8,8 @@ import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-n
 import {ButtonInterface} from '@app-common/components/button/button.model';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {RecordListModalComponent} from '@containers/record-list-modal/components/record-list-modal/record-list-modal.component';
+import {Record} from '@app-common/record/record.model';
+import {RecordListModalResult} from '@containers/record-list-modal/components/record-list-modal/record-list-modal.model';
 
 @Component({
     selector: 'scrm-relate-edit',
@@ -19,6 +21,15 @@ export class RelateEditFieldComponent extends BaseRelateComponent {
     @ViewChild('tag') tag: TagInputComponent;
     selectButton: ButtonInterface;
 
+    /**
+     * Constructor
+     *
+     * @param {object} languages service
+     * @param {object} typeFormatter service
+     * @param {object} relateService service
+     * @param {object} moduleNameMapper service
+     * @param {object} modalService service
+     */
     constructor(
         protected languages: LanguageStore,
         protected typeFormatter: DataTypeFormatter,
@@ -37,10 +48,18 @@ export class RelateEditFieldComponent extends BaseRelateComponent {
         } as ButtonInterface;
     }
 
+    /**
+     * On init handler
+     */
     ngOnInit(): void {
         super.ngOnInit();
     }
 
+    /**
+     * Handle newly added item
+     *
+     * @param {object} item added
+     */
     onAdd(item): void {
 
         if (item) {
@@ -55,6 +74,9 @@ export class RelateEditFieldComponent extends BaseRelateComponent {
         return;
     }
 
+    /**
+     * Handle item removal
+     */
     onRemove(): void {
         this.setValue('', '');
         this.selectedValues = [];
@@ -64,6 +86,12 @@ export class RelateEditFieldComponent extends BaseRelateComponent {
         }, 200);
     }
 
+    /**
+     * Set value on field
+     *
+     * @param {string} id to set
+     * @param {string} relateValue to set
+     */
     protected setValue(id: string, relateValue: string): void {
         const relate = this.buildRelate(id, relateValue);
         this.field.value = relateValue;
@@ -72,9 +100,57 @@ export class RelateEditFieldComponent extends BaseRelateComponent {
         this.field.formControl.markAsDirty();
     }
 
+    /**
+     * Show record selection modal
+     */
     protected showSelectModal(): void {
         const modal = this.modalService.open(RecordListModalComponent, {size: 'xl', scrollable: true});
 
         modal.componentInstance.module = this.getRelatedModule();
+
+        modal.result.then((data: RecordListModalResult) => {
+
+            if (!data || !data.selection || !data.selection.selected) {
+                return;
+            }
+
+            const record = this.getSelectedRecord(data);
+            this.setItem(record);
+        });
+    }
+
+    /**
+     * Get Selected Record
+     *
+     * @param {object} data RecordListModalResult
+     * @returns {object} Record
+     */
+    protected getSelectedRecord(data: RecordListModalResult): Record {
+        let id = '';
+        Object.keys(data.selection.selected).some(selected => {
+            id = selected;
+            return true;
+        });
+
+        let record: Record = null;
+
+        data.records.some(rec => {
+            if (rec && rec.id === id) {
+                record = rec;
+                return true;
+            }
+        });
+
+        return record;
+    }
+
+    /**
+     * Set the record as the selected item
+     *
+     * @param {object} record to set
+     */
+    protected setItem(record: Record): void {
+        this.tag.writeValue([record.attributes]);
+        this.onAdd(record.attributes);
     }
 }