feat(search): Search setting upgrade (#375)

* style(geo.search.search-selector) useless line * feat(geo.search.search-setting) enable/disable search source with checkbox * fix(context): fix minors issues context module * test(geo.search.search-settings) fix test * style(geo.search.search-settings) useless code * style(geo.search.search-selector) useless line * feat(geo.search.search-setting) enable/disable search source with checkbox * test(geo.search.search-settings) fix test * style(geo.search.search-settings) useless code * fix (geo.search.source.ilayer) get title when language service not loaded * style (geo.search.search-settings) de-hardcode xposition menu
infra-geo-ouverte · Aug 7, 2019 · 67074c6 · 67074c6
1 parent 1466996
commit 67074c6
Show file tree

Hide file tree

Showing 9 changed files with 170 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -142,6 +142,7 @@
     "tsickle": "0.34.2",
     "tslint": "^5.12.1",
     "typescript": "~3.2.4",
-    "wait-on": "^3.2.0"
+    "wait-on": "^3.2.0",
+    "@ngx-translate/http-loader": "^4.0.0"
   }
 }
diff --git a/packages/common/src/lib/list/list.component.spec.ts b/packages/common/src/lib/list/list.component.spec.ts
@@ -1,25 +1,68 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgoLanguageModule } from '@igo2/core';
+import { SearchSettingsComponent } from './search-settings.component';
+import { CommonModule } from '@angular/common';
+import {
+  MatTooltipModule,
+  MatIconModule,
+  MatButtonModule,
+  MatMenuModule,
+  MatRadioModule,
+  MatCheckboxModule
+} from '@angular/material';
 
-import { MatListModule } from '@angular/material';
+import { SearchSourceService } from '../shared/search-source.service';
+import { provideDefaultIChercheSearchResultFormatter } from '../shared/sources/icherche.providers';
+import { provideDefaultCoordinatesSearchResultFormatter } from '../shared/sources/coordinates.providers';
+import { SearchSource } from '../shared/sources/source';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
 
-import { ListComponent } from './list.component';
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient);
+}
 
-describe('ListComponent', () => {
-  let component: ListComponent;
-  let fixture: ComponentFixture<ListComponent>;
+describe('SearchSettingsComponent', () => {
+  let component: SearchSettingsComponent;
+  let fixture: ComponentFixture<SearchSettingsComponent>;
 
   beforeEach(async(() => {
+
+    const spy = jasmine.createSpyObj('SearchSourceService', ['getSources']);
+
     TestBed.configureTestingModule({
       imports: [
-        MatListModule
-      ],
-      declarations: [ ListComponent ]
+        HttpClientModule,
+        TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useFactory: HttpLoaderFactory,
+                        deps: [HttpClient]
+                    }
+                }),
+        IgoLanguageModule,
+        CommonModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatRadioModule,
+        MatCheckboxModule],
+      declarations: [ SearchSettingsComponent ],
+      providers: [
+        { provide: SearchSourceService, useValue: spy },
+        provideDefaultIChercheSearchResultFormatter(),
+        provideDefaultCoordinatesSearchResultFormatter()
+      ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ListComponent);
+    fixture = TestBed.createComponent(SearchSettingsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

diff --git a/packages/geo/src/lib/search/search-selector/search-selector.component.ts b/packages/geo/src/lib/search/search-selector/search-selector.component.ts
@@ -86,46 +86,4 @@ export class SearchSelectorComponent implements OnInit {
     this.change.emit(searchType);
   }
 
-  /**
-   * Get all search sources
-   * @internal
-   */
-  getSearchSources(): SearchSource[] {
-    return this.searchSourceService.getSources();
-  }
-
-  /**
-   * Triggered when a setting is checked (checkbox style)
-   * @internal
-   */
-  settingsValueCheckedCheckbox(
-    event: MatCheckboxChange,
-    source: SearchSource,
-    setting: SearchSourceSettings,
-    settingValue: SettingOptions
-  ) {
-    settingValue.enabled = event.checked;
-    source.setParamFromSetting(setting);
-  }
-
-  /**
-   * Triggered when a setting is checked (radiobutton style)
-   * @internal
-   */
-  settingsValueCheckedRadioButton(
-    event: MatRadioChange,
-    source: SearchSource,
-    setting: SearchSourceSettings,
-    settingValue: SettingOptions
-  ) {
-    setting.values.forEach( conf => {
-      if (conf.value !== settingValue.value) {
-        conf.enabled = !event.source.checked;
-      } else {
-        conf.enabled = event.source.checked;
-      }
-    });
-    source.setParamFromSetting(setting);
-  }
-
 }
diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.html b/packages/geo/src/lib/search/search-settings/search-settings.component.html
@@ -14,14 +14,25 @@
     #searchSettingsMenu="matMenu"
     class="no-border-radius">
       <ng-container *ngFor="let source of getSearchSources()">
-        <button *ngIf="source.settings.length > 0"
-          [matMenuTriggerFor]="sub_menu"
-          mat-menu-item>{{source.title}}
-        </button>
-          <mat-menu #sub_menu="matMenu"
-            xPosition="before"
-            yPosition="above"
-          >
+        <span class="igo-search-settings-search-source">
+          <mat-checkbox
+            class="igo-search-settings-checkbox"
+            [checked]="source.enabled"
+            [value]="source"
+            (click)="$event.stopPropagation()"
+            (change)="onCheckSearchSource($event, source)">
+          </mat-checkbox>
+          <button *ngIf="source.settings.length > 0"
+            [matMenuTriggerFor]="sub_menu"
+            mat-menu-item>{{source.title}}
+          </button>
+          <button
+            mat-menu-item
+            *ngIf="source.settings.length === 0">
+            {{source.title}}
+          </button>
+        </span>
+          <mat-menu #sub_menu="matMenu">
             <ng-container *ngFor="let setting of source.settings">
               <button
                   mat-menu-item
@@ -30,7 +41,6 @@
               </button>
               <mat-menu #test_sub_menu="matMenu"
                 [ngSwitch]="setting.type"
-                xPosition="before"
                 yPosition="above">
                 <span *ngSwitchCase="'radiobutton'">
                   <mat-radio-group

diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.scss b/packages/geo/src/lib/search/search-settings/search-settings.component.scss
@@ -12,3 +12,18 @@
 .igo-search-settings-radio-group mat-radio-button {
   margin: $igo-margin;
 }
+
+.igo-search-settings-checkbox mat-radio-button {
+  display: inline-flex;
+}
+
+.igo-search-settings-search-source {
+  display: inline-flex;
+  width: 100%;
+}
+
+.igo-search-settings-search-source mat-checkbox{
+  display: inline-flex;
+  margin-left: $igo-margin;
+  margin-right: $igo-margin;
+}
diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.spec.ts b/packages/geo/src/lib/search/search-settings/search-settings.component.spec.ts
@@ -0,0 +1,73 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IgoLanguageModule } from '@igo2/core';
+import { SearchSettingsComponent } from './search-settings.component';
+import { CommonModule } from '@angular/common';
+import {
+  MatTooltipModule,
+  MatIconModule,
+  MatButtonModule,
+  MatMenuModule,
+  MatRadioModule,
+  MatCheckboxModule
+} from '@angular/material';
+
+import { SearchSourceService } from '../shared/search-source.service';
+import { provideDefaultIChercheSearchResultFormatter } from '../shared/sources/icherche.providers';
+import { provideDefaultCoordinatesSearchResultFormatter } from '../shared/sources/coordinates.providers';
+import { SearchSource } from '../shared/sources/source';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { HttpClient } from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
+// AoT requires an exported function for factories
+export function HttpLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient);
+}
+
+describe('SearchSettingsComponent', () => {
+  let component: SearchSettingsComponent;
+  let fixture: ComponentFixture<SearchSettingsComponent>;
+
+  beforeEach(async(() => {
+
+    const spy = jasmine.createSpyObj('SearchSourceService', ['getSources']);
+
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        TranslateModule.forRoot({
+                    loader: {
+                        provide: TranslateLoader,
+                        useFactory: HttpLoaderFactory,
+                        deps: [HttpClient]
+                    }
+                }),
+        IgoLanguageModule,
+        CommonModule,
+        MatTooltipModule,
+        MatIconModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatRadioModule,
+        MatCheckboxModule],
+      declarations: [ SearchSettingsComponent ],
+      providers: [
+        { provide: SearchSourceService, useValue: spy },
+        provideDefaultIChercheSearchResultFormatter(),
+        provideDefaultCoordinatesSearchResultFormatter()
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/packages/geo/src/lib/search/search-settings/search-settings.component.ts b/packages/geo/src/lib/search/search-settings/search-settings.component.ts
@@ -78,4 +78,8 @@ export class SearchSettingsComponent {
     source.setParamFromSetting(setting);
   }
 
+  onCheckSearchSource(event: MatCheckboxChange, source: SearchSource) {
+    source.enabled = event.checked;
+  }
+
 }
diff --git a/packages/geo/src/lib/search/search-settings/search-settings.module.ts b/packages/geo/src/lib/search/search-settings/search-settings.module.ts
@@ -12,8 +12,6 @@ import {
 
 import { IgoLanguageModule } from '@igo2/core';
 
-import { IgoSearchSelectorModule } from '../search-selector/search-selector.module';
-
 /**
  * @ignore
  */
@@ -27,7 +25,6 @@ import { IgoSearchSelectorModule } from '../search-selector/search-selector.modu
     MatMenuModule,
     MatRadioModule,
     MatCheckboxModule,
-    IgoSearchSelectorModule,
     IgoLanguageModule
   ],
   exports: [SearchSettingsComponent]

diff --git a/packages/geo/src/lib/search/shared/sources/ilayer.ts b/packages/geo/src/lib/search/shared/sources/ilayer.ts
@@ -1,7 +1,7 @@
 import { Injectable, Inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 
-import { Observable } from 'rxjs';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 import { LanguageService } from '@igo2/core';
@@ -23,8 +23,10 @@ export class ILayerSearchSource extends SearchSource implements TextSearch {
   static id = 'ilayer';
   static type = LAYER;
 
+  title$: BehaviorSubject<string> = new BehaviorSubject<string>('');
+
   get title(): string {
-    return this.languageService.translate.instant(this.options.title);
+    return this.title$.getValue();
   }
 
   constructor(
@@ -33,6 +35,7 @@ export class ILayerSearchSource extends SearchSource implements TextSearch {
     @Inject('options') options: ILayerSearchSourceOptions
   ) {
     super(options);
+    this.languageService.translate.get(this.options.title).subscribe(title => this.title$.next(title));
   }
 
   getId(): string {