Search setting upgrade

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

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();
   });

packages/context/src/lib/context-manager/context-edit/context-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
 
 import { Context } from '../shared/context.interface';
 
@@ -13,10 +13,15 @@ export class ContextEditComponent {
   }
   set context(value: Context) {
     this._context = value;
+    this.refresh();
   }
   private _context: Context;
 
   @Output() submitForm: EventEmitter<any> = new EventEmitter();
 
-  constructor() {}
+  constructor(private cd: ChangeDetectorRef) {}
+
+  refresh() {
+    this.cd.detectChanges();
+  }
 }

packages/context/src/lib/context-manager/context-form/context-form.component.scss

@@ -1,3 +1,7 @@
+form {
+  margin: 0 10px;
+}
+
 .full-width {
   width: 100%;
 }

packages/context/src/lib/context-manager/shared/context.service.ts

@@ -372,7 +372,7 @@ export class ContextService {
       context.layers.push(opts);
     }
 
-    context.tools = this.tools.map(tool => String(tool.id));
+    context.tools = this.tools.map(tool => {id: String(tool.id)});
 
     return context;
   }

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);
-  }
-
 }

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

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

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();
+  });
+});

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

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]

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 {

packages/integration/src/lib/context/context-editor-tool/context-editor-tool.component.ts

@@ -11,6 +11,4 @@ import { ToolComponent } from '@igo2/common';
   selector: 'igo-context-editor-tool',
   templateUrl: './context-editor-tool.component.html'
 })
-export class ContextEditorToolComponent {
-  constructor() {}
-}
+export class ContextEditorToolComponent {}

packages/integration/src/lib/context/context-manager-tool/context-manager-tool.component.ts

@@ -22,6 +22,6 @@ export class ContextManagerToolComponent {
   }
 
   managePermissions() {
-    this.toolState.toolbox.activateTool('permissionsContextManager');
+    this.toolState.toolbox.activateTool('contextPermissionManager');
   }
 }

packages/integration/src/lib/context/context-permission-manager-tool/context-permission-manager-tool.component.ts

@@ -1,4 +1,4 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ToolComponent } from '@igo2/common';
 
@@ -11,6 +11,4 @@ import { ToolComponent } from '@igo2/common';
   selector: 'igo-context-permission-manager-tool',
   templateUrl: './context-permission-manager-tool.component.html'
 })
-export class ContextPermissionManagerToolComponent {
-  constructor() {}
-}
+export class ContextPermissionManagerToolComponent {}