Skip to content

Commit

Permalink
feat(search): add Searchsource settings (#370)
Browse files Browse the repository at this point in the history
* issue #349

* add setting nominatim

* ajout de conf pour les services, stop propagation click, fix lint

* ajout d'une distance pour la recherche

* ajout traduction setting

* typing and dusting

* feat(geo.search) new compoenent search-settings

* style(geo.search.search-selector) lint

* style(geo.search.search-selector) moved to search-setting

* style(geo.search) improve code
  • Loading branch information
matrottier authored and mbarbeau committed Jul 25, 2019
1 parent 5ff9239 commit 0a01898
Show file tree
Hide file tree
Showing 19 changed files with 549 additions and 32 deletions.
2 changes: 1 addition & 1 deletion demo/src/app/geo/search/search.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -205,7 +205,7 @@ export class AppSearchComponent implements OnInit, OnDestroy {

onSearchCoordinate() {
this.searchStore.clear();
const results = this.searchService.reverseSearch(this.lonlat);
const results = this.searchService.reverseSearch(this.lonlat, {distance: 100});

for (const i in results) {
if (results.length > 0) {
Expand Down
12 changes: 8 additions & 4 deletions packages/geo/src/lib/search/search-bar/search-bar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,14 @@
*ngIf="!empty">
<mat-icon svgIcon="close"></mat-icon>
</button>

<igo-search-selector
[searchTypes]="searchTypes"
(change)="onSearchTypeChange($event)">
</igo-search-selector>

<igo-search-settings></igo-search-settings>
</div>

<igo-search-selector
[searchTypes]="searchTypes"
(change)="onSearchTypeChange($event)">
</igo-search-selector>

</div>
19 changes: 12 additions & 7 deletions packages/geo/src/lib/search/search-bar/search-bar.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
:host ::ng-deep div.mat-form-field-infix {
left: $igo-padding;
right: $igo-padding;
padding: 0 0 12px 0 !important;
padding: 0 0 12px 0 !important;
}

:host ::ng-deep div.mat-form-field-underline {
Expand All @@ -25,6 +25,8 @@
.igo-search-bar-container {
position: relative;
width: 100%;
display: inline-flex;
overflow: hidden;
}

.igo-search-bar-container > mat-form-field {
Expand All @@ -36,12 +38,12 @@
}

.search-bar-buttons {
position: absolute;
right: 40px;
position: relative;
right: 0px;
display: inline-flex;
top: 0;
& > button:nth-child(2)::before {
content: '';
position: absolute;
left: 0px;
top: 5px;
border-right: 1px solid #ddd;
Expand All @@ -50,10 +52,13 @@
}

igo-search-selector {
display: inline-block;
background-color: #fff;
position: absolute;
right: 0;
top: 0;
border-radius: 0;
}

igo-search-settings {
background-color: #fff;
top: 0;
border-radius: 0;
}
5 changes: 3 additions & 2 deletions packages/geo/src/lib/search/search-bar/search-bar.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
import { IgoLanguageModule } from '@igo2/core';

import { IgoSearchSelectorModule } from '../search-selector/search-selector.module';
import { IgoSearchSettingsModule } from '../search-settings/search-settings.module';
import { SearchBarComponent } from './search-bar.component';
import { SearchUrlParamDirective } from './search-url-param.directive';

Expand All @@ -33,11 +34,11 @@ import { SearchUrlParamDirective } from './search-url-param.directive';
MatFormFieldModule,
MatInputModule,
IgoLanguageModule,
IgoSearchSelectorModule
IgoSearchSelectorModule,
IgoSearchSettingsModule
],
exports: [
SearchBarComponent,
SearchBarComponent
],
declarations: [
SearchBarComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<mat-menu
#searchSelectorMenu="matMenu"
class="no-border-radius"
overlapTrigger="false"
xPosition="before"
yPosition="above">
<mat-radio-group
Expand All @@ -25,4 +24,5 @@
</mat-radio-button>
</mat-radio-group>
</mat-menu>

</div>
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {

import { SEARCH_TYPES } from '../shared/search.enums';
import { SearchSourceService } from '../shared/search-source.service';
import { SearchSource } from '../shared/sources/source';

/**
* This component allows a user to select a search type yo enable. In it's
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<div class="igo-search-settings">

<button
mat-icon-button
class="igo-search-settings-button"
color="primary"
tooltip-position="below"
matTooltipShowDelay="500"
[matTooltip]="'igo.geo.search.menu.tooltip' | translate"
[matMenuTriggerFor]="searchSettingsMenu">
<mat-icon svgIcon="settings"></mat-icon>
</button>
<mat-menu
#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"
>
<ng-container *ngFor="let setting of source.settings">
<button
mat-menu-item
[matMenuTriggerFor]="test_sub_menu">
{{'igo.geo.search.searchSources.settings.'+ setting.title | translate}}
</button>
<mat-menu #test_sub_menu="matMenu"
[ngSwitch]="setting.type"
xPosition="before"
yPosition="above">
<span *ngSwitchCase="'radiobutton'">
<mat-radio-group
class="igo-search-settings-radio-group"
[value]="setting">
<mat-radio-button *ngFor="let settingValue of setting.values"
[value]="settingValue"
[checked]="settingValue.enabled"
(click)="$event.stopPropagation()"
(change)="settingsValueCheckedRadioButton($event, source, setting, settingValue)">
{{settingValue.title}}
</mat-radio-button>
</mat-radio-group>
</span>
<span *ngSwitchCase="'checkbox'">
<mat-checkbox class="igo-search-settings-radio-group"
class="mat-menu-item"
[checked]="settingValue.enabled"
[value]="setting"
(click)="$event.stopPropagation()"
(change)="settingsValueCheckedCheckbox($event, source, setting, settingValue)"
*ngFor="let settingValue of setting.values">{{settingValue.title}}
</mat-checkbox>
</span>
</mat-menu>
</ng-container>
</mat-menu>
</ng-container>
</mat-menu>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
@import '../../../../../core/src/style/partial/core.variables';

.igo-search-settings-button ::ng-deep div.mat-button-ripple-round {
border-radius: 0;
}

.igo-search-settings-radio-group {
display: inline-flex;
flex-direction: column;
}

.igo-search-settings-radio-group mat-radio-button {
margin: $igo-margin;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { SearchSettingsComponent } from './search-settings.component';

describe('SearchSettingsComponent', () => {
let component: SearchSettingsComponent;
let fixture: ComponentFixture<SearchSettingsComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SearchSettingsComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(SearchSettingsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import {MatCheckboxChange, MatRadioChange } from '@angular/material';

import {
Component,
Input,
Output,
EventEmitter,
OnInit,
ChangeDetectionStrategy
} from '@angular/core';

import { SearchSourceService } from '../shared/search-source.service';
import { SearchSource } from '../shared/sources/source';
import { SearchSourceSettings, SettingOptions } from '../shared/sources/source.interfaces';

/**
* This component allows a user to select a search type yo enable. In it's
* current version, only one search type can be selected at once (radio). If
* this component were to support more than one search source enabled (checkbox),
* the searchbar component would require a small change to it's
* placeholder getter. The search source service already supports having
* more than one search source enabled.
*/
@Component({
selector: 'igo-search-settings',
templateUrl: './search-settings.component.html',
styleUrls: ['./search-settings.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchSettingsComponent {

/**
* Event emitted when the enabled search type changes
*/
@Output() change = new EventEmitter<string>();

constructor(private searchSourceService: SearchSourceService) {}

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

}
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SearchSettingsComponent } from './search-settings.component';
import {
MatTooltipModule,
MatIconModule,
MatButtonModule,
MatMenuModule,
MatRadioModule,
MatCheckboxModule
} from '@angular/material';

import { IgoLanguageModule } from '@igo2/core';

import { IgoSearchSelectorModule } from '../search-selector/search-selector.module';

/**
* @ignore
*/
@NgModule({
declarations: [SearchSettingsComponent],
imports: [
CommonModule,
MatTooltipModule,
MatIconModule,
MatButtonModule,
MatMenuModule,
MatRadioModule,
MatCheckboxModule,
IgoSearchSelectorModule,
IgoLanguageModule
],
exports: [SearchSettingsComponent]
})
export class IgoSearchSettingsModule { }
7 changes: 5 additions & 2 deletions packages/geo/src/lib/search/search.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,21 @@ import { provideDefaultCoordinatesSearchResultFormatter } from './shared/sources
import { IgoSearchBarModule } from './search-bar/search-bar.module';
import { IgoSearchSelectorModule } from './search-selector/search-selector.module';
import { IgoSearchResultsModule } from './search-results/search-results.module';
import { IgoSearchSettingsModule } from './search-settings/search-settings.module';

@NgModule({
imports: [
CommonModule,
IgoSearchBarModule,
IgoSearchSelectorModule,
IgoSearchResultsModule
IgoSearchResultsModule,
IgoSearchSettingsModule
],
exports: [
IgoSearchBarModule,
IgoSearchSelectorModule,
IgoSearchResultsModule
IgoSearchResultsModule,
IgoSearchSettingsModule
],
declarations: []
})
Expand Down
5 changes: 5 additions & 0 deletions packages/geo/src/lib/search/shared/search-source.service.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { SearchSource } from './sources/source';
import { SearchSourceSettings } from './sources/source.interfaces';

/**
* Service where all available search sources are registered.
Expand Down Expand Up @@ -39,4 +40,8 @@ export class SearchSourceService {
}
});
}

setParamFromSetting(source: SearchSource, setting: SearchSourceSettings) {
source.setParamFromSetting(setting);
}
}
Loading

0 comments on commit 0a01898

Please sign in to comment.