Add Record List Modal to relate fields

- Add select record button
-- Add button styling
-- Display button next to chip component
- Open record list modal on button click
-- Open xlarge and scrollable modal
-- Add styling to correctly display scroll
- Add jasmine / karma tests

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

@@ -1,23 +1,31 @@
-<tag-input #tag
+<div class="d-flex">
-           (onAdd)="onAdd($event)"
+    <div class="flex-grow-1">
-           (onBlur)="resetStatus()"
+        <tag-input #tag
-           (onRemove)="onRemove()"
+                   (onAdd)="onAdd($event)"
-           [(ngModel)]="selectedValues"
+                   (onBlur)="resetStatus()"
-           [class]="getInvalidClass()"
+                   (onRemove)="onRemove()"
-           [clearOnBlur]="true"
+                   [(ngModel)]="selectedValues"
-           [displayBy]="getRelateFieldName()"
+                   [class]="getInvalidClass()"
-           [inputClass]="getInvalidClass()"
+                   [clearOnBlur]="true"
-           [onTextChangeDebounce]="500"
+                   [displayBy]="getRelateFieldName()"
-           [onlyFromAutocomplete]="true"
+                   [inputClass]="getInvalidClass()"
-           [placeholder]="getPlaceholderLabel()"
+                   [onTextChangeDebounce]="500"
-           [secondaryPlaceholder]="getPlaceholderLabel()"
+                   [onlyFromAutocomplete]="true"
-           maxItems="1">
+                   [placeholder]="getPlaceholderLabel()"
-    <tag-input-dropdown [autocompleteObservable]="search"
+                   [secondaryPlaceholder]="getPlaceholderLabel()"
-                        [displayBy]="getRelateFieldName()"
+                   maxItems="1">
-                        [keepOpen]="false"
+            <tag-input-dropdown [autocompleteObservable]="search"
-                        [showDropdownIfEmpty]="true">
+                                [displayBy]="getRelateFieldName()"
-    </tag-input-dropdown>
+                                [keepOpen]="false"
-</tag-input>
+                                [showDropdownIfEmpty]="true">
+            </tag-input-dropdown>
+        </tag-input>
+    </div>
+    <div>
+        <scrm-button [config]="selectButton">
+        </scrm-button>
+    </div>
+</div>
 <small *ngIf="getMessage()" class="text-danger form-text text-muted">
     <scrm-label [labelKey]="getMessage()" [module]="module"></scrm-label>
 </small>

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

@@ -23,6 +23,7 @@ import {RelateEditFieldModule} from '@fields/relate/templates/edit/relate.module
 import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-name-mapper.service';
 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';
 
 @Component({
     selector: 'relate-edit-field-test-host-component',
@@ -37,7 +38,7 @@ class RelateEditFieldTestHostComponent {
             name: 'Related Account',
         },
         definition: {
-            module: 'accounts',
+            module: 'Accounts',
             // eslint-disable-next-line camelcase, @typescript-eslint/camelcase
             id_name: 'account_id',
             rname: 'name'
@@ -67,7 +68,8 @@ describe('RelateRecordEditFieldComponent', () => {
                 RouterTestingModule,
                 RelateEditFieldModule,
                 BrowserDynamicTestingModule,
-                NoopAnimationsModule
+                NoopAnimationsModule,
+                RecordListModalModule
             ],
             providers: [
                 {provide: UserPreferenceStore, useValue: userPreferenceStoreMock},
@@ -163,4 +165,21 @@ describe('RelateRecordEditFieldComponent', () => {
         done();
     });
 
+
+    it('should have select button', async (done) => {
+        expect(testHostComponent).toBeTruthy();
+
+        testHostFixture.detectChanges();
+
+        await testHostFixture.whenRenderingDone();
+
+        const field = testHostFixture.nativeElement.getElementsByTagName('scrm-relate-edit')[0];
+
+        const select = field.getElementsByClassName('select-button').item(0);
+
+        expect(select).toBeTruthy();
+
+        done();
+    });
+
 });

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

@@ -5,6 +5,9 @@ import {TagInputComponent} from 'ngx-chips';
 import {RelateService} from '@services/record/relate/relate.service';
 import {BaseRelateComponent} from '@fields/base/base-relate.component';
 import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-name-mapper.service';
+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';
 
 @Component({
     selector: 'scrm-relate-edit',
@@ -14,14 +17,24 @@ import {ModuleNameMapper} from '@services/navigation/module-name-mapper/module-n
 })
 export class RelateEditFieldComponent extends BaseRelateComponent {
     @ViewChild('tag') tag: TagInputComponent;
+    selectButton: ButtonInterface;
 
     constructor(
         protected languages: LanguageStore,
         protected typeFormatter: DataTypeFormatter,
         protected relateService: RelateService,
-        protected moduleNameMapper: ModuleNameMapper
+        protected moduleNameMapper: ModuleNameMapper,
+        protected modalService: NgbModal
     ) {
         super(languages, typeFormatter, relateService, moduleNameMapper);
+
+        this.selectButton = {
+            klass: ['btn', 'btn-sm', 'btn-outline-secondary', 'select-button'],
+            onClick: (): void => {
+                this.showSelectModal();
+            },
+            icon: 'cursor'
+        } as ButtonInterface;
     }
 
     ngOnInit(): void {
@@ -58,4 +71,10 @@ export class RelateEditFieldComponent extends BaseRelateComponent {
         this.field.formControl.setValue(relateValue);
         this.field.formControl.markAsDirty();
     }
+
+    protected showSelectModal(): void {
+        const modal = this.modalService.open(RecordListModalComponent, {size: 'xl', scrollable: true});
+
+        modal.componentInstance.module = this.getRelatedModule();
+    }
 }

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

@@ -6,6 +6,7 @@ import {TagInputModule} from 'ngx-chips';
 import {LabelModule} from '@components/label/label.module';
 import {FormsModule} from '@angular/forms';
 import {InlineLoadingSpinnerModule} from '@components/inline-loading-spinner/inline-loading-spinner.module';
+import {ButtonModule} from '@components/button/button.module';
 
 @NgModule({
     declarations: [RelateEditFieldComponent],
@@ -16,7 +17,8 @@ import {InlineLoadingSpinnerModule} from '@components/inline-loading-spinner/inl
         TagInputModule,
         LabelModule,
         FormsModule,
-        InlineLoadingSpinnerModule
+        InlineLoadingSpinnerModule,
+        ButtonModule
     ]
 })
 export class RelateEditFieldModule {

core/app/themes/suite8/css/components/_button.scss

@@ -345,3 +345,11 @@ button.settings-button.dropdown-toggle::after {
 .minimise-button:hover {
   fill: $midnight-grey;
 }
+
+.select-button {
+  fill: $secondary;
+}
+
+.select-button:hover {
+  fill: $white;
+}

core/app/themes/suite8/css/layout/_modal.scss

@@ -128,6 +128,10 @@
   background: $dusty-grey;
 }
 
+.modal-dialog-scrollable .modal-body {
+  max-height: calc(100vh - 6.5rem);
+}
+
 /* modal animation */
 .modal-content {
   animation-name: modal;
@@ -145,4 +149,4 @@
 
 .modal-footer {
   padding: 0;
-}
+}