diff --git a/core/app/fields/relate/templates/edit/relate.component.html b/core/app/fields/relate/templates/edit/relate.component.html
index 3ce20d492..232ff2177 100644
--- a/core/app/fields/relate/templates/edit/relate.component.html
+++ b/core/app/fields/relate/templates/edit/relate.component.html
@@ -1,23 +1,31 @@
-
-
-
-
+
diff --git a/core/app/fields/relate/templates/edit/relate.component.spec.ts b/core/app/fields/relate/templates/edit/relate.component.spec.ts
index 6abe18975..e989b0d6e 100644
--- a/core/app/fields/relate/templates/edit/relate.component.spec.ts
+++ b/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();
+ });
+
});
diff --git a/core/app/fields/relate/templates/edit/relate.component.ts b/core/app/fields/relate/templates/edit/relate.component.ts
index a1db6f7ae..135e7df6d 100644
--- a/core/app/fields/relate/templates/edit/relate.component.ts
+++ b/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();
+ }
}
diff --git a/core/app/fields/relate/templates/edit/relate.module.ts b/core/app/fields/relate/templates/edit/relate.module.ts
index 9c1e6199a..045e2a9cb 100644
--- a/core/app/fields/relate/templates/edit/relate.module.ts
+++ b/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 {
diff --git a/core/app/themes/suite8/css/components/_button.scss b/core/app/themes/suite8/css/components/_button.scss
index f09b726d2..c9a7abd3b 100644
--- a/core/app/themes/suite8/css/components/_button.scss
+++ b/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;
+}
diff --git a/core/app/themes/suite8/css/layout/_modal.scss b/core/app/themes/suite8/css/layout/_modal.scss
index 21515768b..f95b6657c 100644
--- a/core/app/themes/suite8/css/layout/_modal.scss
+++ b/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;
-}
\ No newline at end of file
+}