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 +}