diff --git a/ui/src/app/edit-provider/editor.module.ts b/ui/src/app/edit-provider/editor.module.ts index 21941f1ab..5fe9cb0b1 100644 --- a/ui/src/app/edit-provider/editor.module.ts +++ b/ui/src/app/edit-provider/editor.module.ts @@ -21,6 +21,7 @@ import { WizardNavComponent } from './component/wizard-nav.component'; import { WizardEffects } from './effect/wizard.effect'; import { EditorEffects } from './effect/editor.effect'; import { ValidFormIconComponent } from './component/valid-form-icon.component'; +import { SharedModule } from '../shared/shared.module'; export const routes: Routes = [ { @@ -73,7 +74,8 @@ export const routes: Routes = [ NgbDropdownModule, StoreModule.forFeature('edit-provider', reducers), EffectsModule.forFeature([WizardEffects, EditorEffects]), - RouterModule.forChild(routes) + RouterModule.forChild(routes), + SharedModule ], providers: [] }) diff --git a/ui/src/app/metadata-filter/component/search-dialog.component.html b/ui/src/app/metadata-filter/component/search-dialog.component.html index 11c25219b..447f7312e 100644 --- a/ui/src/app/metadata-filter/component/search-dialog.component.html +++ b/ui/src/app/metadata-filter/component/search-dialog.component.html @@ -32,7 +32,8 @@

class="list-group-item list-group-item-action p-1" [class.active]="item === selected" (click)="select($event, item)" - role="menuitem">{{ item }} + role="menuitem" + [innerHTML]="item | highlight:this.form.get('search').value">
diff --git a/ui/src/app/metadata-filter/component/search-dialog.component.spec.ts b/ui/src/app/metadata-filter/component/search-dialog.component.spec.ts index 9d3d7d9e8..617a4c302 100644 --- a/ui/src/app/metadata-filter/component/search-dialog.component.spec.ts +++ b/ui/src/app/metadata-filter/component/search-dialog.component.spec.ts @@ -5,6 +5,7 @@ import { StoreModule, Store, combineReducers } from '@ngrx/store'; import { SearchDialogComponent } from './search-dialog.component'; import { NgbActiveModalStub } from '../../../testing/modal.stub'; import * as fromFilter from '../reducer'; +import { SharedModule } from '../../shared/shared.module'; describe('Search Dialog', () => { let fixture: ComponentFixture; @@ -21,6 +22,7 @@ describe('Search Dialog', () => { StoreModule.forRoot({ 'metadata-filter': combineReducers(fromFilter.reducers), }), + SharedModule ], declarations: [ SearchDialogComponent diff --git a/ui/src/app/metadata-filter/container/new-filter.component.spec.ts b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts index 2c0653760..1786ada5f 100644 --- a/ui/src/app/metadata-filter/container/new-filter.component.spec.ts +++ b/ui/src/app/metadata-filter/container/new-filter.component.spec.ts @@ -7,6 +7,7 @@ import { ProviderEditorFormModule } from '../../metadata-provider/component'; import { ProviderStatusEmitter, ProviderValueEmitter } from '../../metadata-provider/service/provider-change-emitter.service'; import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap'; import { NavigatorService } from '../../core/service/navigator.service'; +import { SharedModule } from '../../shared/shared.module'; describe('New Metadata Filter Page', () => { let fixture: ComponentFixture; @@ -28,7 +29,8 @@ describe('New Metadata Filter Page', () => { }), ReactiveFormsModule, ProviderEditorFormModule, - NgbPopoverModule + NgbPopoverModule, + SharedModule ], declarations: [NewFilterComponent], }); diff --git a/ui/src/app/metadata-filter/filter.module.ts b/ui/src/app/metadata-filter/filter.module.ts index 7eac3f9b5..fad0b9c2f 100644 --- a/ui/src/app/metadata-filter/filter.module.ts +++ b/ui/src/app/metadata-filter/filter.module.ts @@ -12,6 +12,7 @@ import { ProviderEditorFormModule } from '../metadata-provider/component'; import { FilterEffects } from './effect/filter.effect'; import { NgbPopoverModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'; import { SearchDialogComponent } from './component/search-dialog.component'; +import { SharedModule } from '../shared/shared.module'; export const routes: Routes = [ { @@ -38,7 +39,8 @@ export const routes: Routes = [ RouterModule.forChild(routes), ProviderEditorFormModule, NgbPopoverModule, - NgbModalModule + NgbModalModule, + SharedModule ], providers: [] }) diff --git a/ui/src/app/metadata-provider/component/forms/descriptor-info-form.component.spec.ts b/ui/src/app/metadata-provider/component/forms/descriptor-info-form.component.spec.ts index 7153ba3db..7edbd112e 100644 --- a/ui/src/app/metadata-provider/component/forms/descriptor-info-form.component.spec.ts +++ b/ui/src/app/metadata-provider/component/forms/descriptor-info-form.component.spec.ts @@ -9,10 +9,9 @@ import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/p import { ListValuesService } from '../../service/list-values.service'; import { EntityDescriptor } from '../../model/entity-descriptor'; import { DescriptorInfoFormComponent } from './descriptor-info-form.component'; -import { AutoCompleteComponent } from '../../../widget/autocomplete/autocomplete.component'; import * as stubs from '../../../../testing/provider.stub'; -import { ValidationClassDirective } from '../../../widget/validation/validation-class.directive'; +import { SharedModule } from '../../../shared/shared.module'; @Component({ template: `` @@ -59,13 +58,12 @@ describe('Descriptor Info Form Component', () => { StoreModule.forRoot({ 'providers': combineReducers(fromProviders.reducers), }), - NgbPopoverModule + NgbPopoverModule, + SharedModule ], declarations: [ DescriptorInfoFormComponent, - AutoCompleteComponent, - TestHostComponent, - ValidationClassDirective + TestHostComponent ], }); store = TestBed.get(Store); diff --git a/ui/src/app/metadata-provider/component/forms/relying-party-form.component.spec.ts b/ui/src/app/metadata-provider/component/forms/relying-party-form.component.spec.ts index 09dbffd0b..88b396847 100644 --- a/ui/src/app/metadata-provider/component/forms/relying-party-form.component.spec.ts +++ b/ui/src/app/metadata-provider/component/forms/relying-party-form.component.spec.ts @@ -9,10 +9,9 @@ import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/p import { ListValuesService } from '../../service/list-values.service'; import { EntityDescriptor } from '../../model/entity-descriptor'; import { RelyingPartyFormComponent } from './relying-party-form.component'; -import { AutoCompleteComponent } from '../../../widget/autocomplete/autocomplete.component'; import * as stubs from '../../../../testing/provider.stub'; -import { ValidationClassDirective } from '../../../widget/validation/validation-class.directive'; +import { SharedModule } from '../../../shared/shared.module'; @Component({ template: `` @@ -59,13 +58,12 @@ describe('Relying Party Form Component', () => { StoreModule.forRoot({ 'providers': combineReducers(fromProviders.reducers), }), - NgbPopoverModule + NgbPopoverModule, + SharedModule ], declarations: [ RelyingPartyFormComponent, - AutoCompleteComponent, - TestHostComponent, - ValidationClassDirective + TestHostComponent ], }); store = TestBed.get(Store); diff --git a/ui/src/app/metadata-provider/component/index.ts b/ui/src/app/metadata-provider/component/index.ts index fc840918a..c8c3b4878 100644 --- a/ui/src/app/metadata-provider/component/index.ts +++ b/ui/src/app/metadata-provider/component/index.ts @@ -20,11 +20,7 @@ import { ProviderFormFragmentComponent } from './forms/provider-form-fragment.co import { InfoLabelDirective } from '../directive/info-label.directive'; import { InputDefaultsDirective } from '../directive/input-defaults.directive'; import { I18nTextComponent } from './i18n-text.component'; - -import { ValidationClassDirective } from '../../widget/validation/validation-class.directive'; -import { AutoCompleteComponent } from '../../widget/autocomplete/autocomplete.component'; - - +import { SharedModule } from '../../shared/shared.module'; export const COMPONENTS = [ AdvancedInfoFormComponent, @@ -37,28 +33,29 @@ export const COMPONENTS = [ RelyingPartyFormComponent, AttributeReleaseFormComponent, FinishFormComponent, - ProviderFormFragmentComponent, - AutoCompleteComponent + ProviderFormFragmentComponent ]; export const declarations = [ ...COMPONENTS, InfoLabelDirective, InputDefaultsDirective, - ValidationClassDirective, I18nTextComponent ]; @NgModule({ declarations: declarations, entryComponents: COMPONENTS, - exports: declarations, + exports: [ + ...declarations + ], imports: [ CommonModule, ReactiveFormsModule, RouterModule, NgbPopoverModule, - NgbModalModule + NgbModalModule, + SharedModule ], providers: [] }) diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html similarity index 96% rename from ui/src/app/widget/autocomplete/autocomplete.component.html rename to ui/src/app/shared/autocomplete/autocomplete.component.html index ff40b01f2..8bc6c4954 100644 --- a/ui/src/app/widget/autocomplete/autocomplete.component.html +++ b/ui/src/app/shared/autocomplete/autocomplete.component.html @@ -30,9 +30,8 @@ (mouseout)="handleOptionMouseOut()" role="option" tabIndex="-1" - [attr.aria-selected]="state.currentState.focused === i"> - {{ option }} - + [attr.aria-selected]="state.currentState.focused === i" + [innerHTML]="option | highlight:this.input.value">
  • {{ noneFoundText }}
    • diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.scss b/ui/src/app/shared/autocomplete/autocomplete.component.scss similarity index 100% rename from ui/src/app/widget/autocomplete/autocomplete.component.scss rename to ui/src/app/shared/autocomplete/autocomplete.component.scss diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.spec.ts b/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts similarity index 99% rename from ui/src/app/widget/autocomplete/autocomplete.component.spec.ts rename to ui/src/app/shared/autocomplete/autocomplete.component.spec.ts index 650124d96..4d17cd599 100644 --- a/ui/src/app/widget/autocomplete/autocomplete.component.spec.ts +++ b/ui/src/app/shared/autocomplete/autocomplete.component.spec.ts @@ -7,6 +7,7 @@ import { NgbPopoverModule, NgbPopoverConfig } from '@ng-bootstrap/ng-bootstrap/p import { AutoCompleteComponent } from './autocomplete.component'; import { NavigatorService } from '../../core/service/navigator.service'; import { ValidationClassDirective } from '../validation/validation-class.directive'; +import { HighlightPipe } from '../pipe/highlight.pipe'; const iPodAgent = `Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) @@ -75,7 +76,8 @@ describe('AutoComplete Input Component', () => { declarations: [ AutoCompleteComponent, TestHostComponent, - ValidationClassDirective + ValidationClassDirective, + HighlightPipe ], }).compileComponents(); }); diff --git a/ui/src/app/widget/autocomplete/autocomplete.component.ts b/ui/src/app/shared/autocomplete/autocomplete.component.ts similarity index 100% rename from ui/src/app/widget/autocomplete/autocomplete.component.ts rename to ui/src/app/shared/autocomplete/autocomplete.component.ts diff --git a/ui/src/app/widget/autocomplete/autocomplete.model.spec.ts b/ui/src/app/shared/autocomplete/autocomplete.model.spec.ts similarity index 100% rename from ui/src/app/widget/autocomplete/autocomplete.model.spec.ts rename to ui/src/app/shared/autocomplete/autocomplete.model.spec.ts diff --git a/ui/src/app/widget/autocomplete/autocomplete.model.ts b/ui/src/app/shared/autocomplete/autocomplete.model.ts similarity index 100% rename from ui/src/app/widget/autocomplete/autocomplete.model.ts rename to ui/src/app/shared/autocomplete/autocomplete.model.ts diff --git a/ui/src/app/widget/autocomplete/keys.service.ts b/ui/src/app/shared/autocomplete/keys.service.ts similarity index 100% rename from ui/src/app/widget/autocomplete/keys.service.ts rename to ui/src/app/shared/autocomplete/keys.service.ts diff --git a/ui/src/app/shared/pipe/highlight.pipe.ts b/ui/src/app/shared/pipe/highlight.pipe.ts new file mode 100644 index 000000000..e3b20b10c --- /dev/null +++ b/ui/src/app/shared/pipe/highlight.pipe.ts @@ -0,0 +1,20 @@ +import { PipeTransform, Pipe } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; + +@Pipe({ name: 'highlight' }) +export class HighlightPipe implements PipeTransform { + constructor(public sanitizer: DomSanitizer) {} + transform(value: string, query: string): SafeHtml { + if (!query || !value) { + return value; + } + let pattern = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); + pattern = pattern.split(' ').filter((t) => { + return t.length > 0; + }).join('|'); + const regex = new RegExp(pattern, 'gi'); + return this.sanitizer.bypassSecurityTrustHtml( + value.replace(regex, (match) => `${match}`) + ); + } +} diff --git a/ui/src/app/shared/shared.module.ts b/ui/src/app/shared/shared.module.ts new file mode 100644 index 000000000..d6a0436aa --- /dev/null +++ b/ui/src/app/shared/shared.module.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { HighlightPipe } from './pipe/highlight.pipe'; +import { AutoCompleteComponent } from './autocomplete/autocomplete.component'; +import { ValidationClassDirective } from './validation/validation-class.directive'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + ReactiveFormsModule + ], + declarations: [ + HighlightPipe, + AutoCompleteComponent, + ValidationClassDirective + ], + exports: [ + HighlightPipe, + AutoCompleteComponent, + CommonModule, + ReactiveFormsModule, + FormsModule + ] +}) +export class SharedModule { } diff --git a/ui/src/app/widget/validation/validation-class.directive.spec.ts b/ui/src/app/shared/validation/validation-class.directive.spec.ts similarity index 100% rename from ui/src/app/widget/validation/validation-class.directive.spec.ts rename to ui/src/app/shared/validation/validation-class.directive.spec.ts diff --git a/ui/src/app/widget/validation/validation-class.directive.ts b/ui/src/app/shared/validation/validation-class.directive.ts similarity index 100% rename from ui/src/app/widget/validation/validation-class.directive.ts rename to ui/src/app/shared/validation/validation-class.directive.ts