Merged in bugfix/SHIBUI-293 (pull request #31)

Reorganized code to support shared pipe (highlight)

* Reorganized code to support shared pipe

* Fixed tests

Approved-by: Ryan Mathis <rmathis@unicon.net>

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: []
 })

ui/src/app/metadata-filter/component/search-dialog.component.html

@@ -32,7 +32,8 @@ <h4 class="modal-title">
                 class="list-group-item list-group-item-action p-1"
                 [class.active]="item === selected"
                 (click)="select($event, item)"
-                role="menuitem">{{ item }}</a>
+                role="menuitem"
+                [innerHTML]="item | highlight:this.form.get('search').value"></a>
         </div>
     </div>
     <div class="modal-footer">

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<SearchDialogComponent>;
@@ -21,6 +22,7 @@ describe('Search Dialog', () => {
                 StoreModule.forRoot({
                     'metadata-filter': combineReducers(fromFilter.reducers),
                 }),
+                SharedModule
             ],
             declarations: [
                 SearchDialogComponent

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<NewFilterComponent>;
@@ -28,7 +29,8 @@ describe('New Metadata Filter Page', () => {
                 }),
                 ReactiveFormsModule,
                 ProviderEditorFormModule,
-                NgbPopoverModule
+                NgbPopoverModule,
+                SharedModule
             ],
             declarations: [NewFilterComponent],
         });

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: []
 })

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: `<descriptor-info-form [provider]="provider"></descriptor-info-form>`
@@ -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);

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: `<relying-party-form [provider]="provider"></relying-party-form>`
@@ -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);

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: []
 })

ui/src/app/widget/autocomplete/autocomplete.component.html → 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 }}
-        </li>
+            [attr.aria-selected]="state.currentState.focused === i"
+            [innerHTML]="option | highlight:this.input.value"></li>
         <li class="dropdown-item dropdown-item-noresults" *ngIf="matches.length === 0 && !processing">
             {{ noneFoundText }}
         </li>

ui/src/app/widget/autocomplete/autocomplete.component.spec.ts → 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();
     });

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) => `<span class="font-weight-bold">${match}</span>`)
+        );
+    }
+}

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