Merge branch 'feat/address-search' into 'dev'

Feat/address search

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!55

src/app/shared/components/address-autocomplete/address-autocomplete.component.html

+<div class="search-bar">
+  <div>
+    <input
+      id="search-address"
+      type="text"
+      placeholder="ex: 20 rue du lac, Lyon"
+      (input)="onSearchChange($event.target.value)"
+      class="form-input"
+      #searchAddress
+    />
+  </div>
+  <div class="autocomplete-items">
+    <p *ngFor="let hit of data" (click)="selectedResult(hit)" class="autocomplete-item">
+      {{ parseHitToAddress(hit) }}
+    </p>
+  </div>
+</div>

src/app/shared/components/address-autocomplete/address-autocomplete.component.scss

+@import '../../../../assets/scss/color';
+
+.search-bar {
+  display: flex;
+  flex-direction: column;
+}
+.autocomplete-items {
+  border: 0.0625rem solid #d4d4d4;
+  border-top: none;
+  border-bottom: none;
+  z-index: 99;
+  background-color: #fff;
+  cursor: pointer;
+}
+.autocomplete-item {
+  margin: 0;
+  padding: 1em 0;
+}
+.autocomplete-item:hover {
+  background-color: #dee6ee;
+  cursor: pointer;
+}

src/app/shared/components/address-autocomplete/address-autocomplete.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddressAutocompleteComponent } from './address-autocomplete.component';
+
+describe('AddressAutocompleteComponent', () => {
+  let component: AddressAutocompleteComponent;
+  let fixture: ComponentFixture<AddressAutocompleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddressAutocompleteComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddressAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/address-autocomplete/address-autocomplete.component.ts

+import { Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
+import { AddressService } from '../../service/address.service';
+
+@Component({
+  selector: 'app-address-autocomplete',
+  templateUrl: './address-autocomplete.component.html',
+  styleUrls: ['./address-autocomplete.component.scss'],
+})
+export class AddressAutocompleteComponent {
+  public readonly AUTOCOMPLETE_NBR = 5;
+  public data = [];
+  @ViewChild('searchAddress', { static: true }) searchAddress: ElementRef;
+  @Output() selectedAddress: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(private addressService: AddressService) {}
+
+  public onSearchChange(searchString: string) {
+    this.addressService.searchAddress(searchString).subscribe((data) => {
+      this.data = data.hits.hits.slice(0, this.AUTOCOMPLETE_NBR);
+    });
+  }
+
+  public selectedResult(hit: any): void {
+    const value = this.parseHitToAddress(hit);
+    // Set input value
+    this.searchAddress.nativeElement.value = value;
+    // Reset autocomplete
+    this.data = [];
+    // Emit choosen value
+    this.selectedAddress.emit(value);
+  }
+
+  public parseHitToAddress(hit: any): string {
+    return `${hit._source['data-fr'].properties.numero_str} ${hit._source['data-fr'].properties.voie_str} ${hit._source['data-fr'].properties.commune_str}`;
+  }
+}

src/app/shared/components/index.ts

@@ -6,6 +6,7 @@ import { SignInModalComponent } from './signin-modal/signin-modal.component';
 import { SvgIconComponent } from './svg-icon/svg-icon.component';
 import { ValidatorFormComponent } from './validator-form/validator-form.component';
 import { CreateAccountFormComponent } from './create-account-form/create-account-form.component';
+import { AddressAutocompleteComponent } from './address-autocomplete/address-autocomplete.component';
 
 // tslint:disable-next-line: max-line-length
 export {
@@ -17,6 +18,7 @@ export {
   SignUpModalComponent,
   SignInModalComponent,
   CreateAccountFormComponent,
+  AddressAutocompleteComponent,
 };
 
 // tslint:disable-next-line:variable-name
@@ -29,4 +31,5 @@ export const SharedComponents = [
   SignUpModalComponent,
   SignInModalComponent,
   CreateAccountFormComponent,
+  AddressAutocompleteComponent,
 ];

src/app/shared/service/address.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { AddressService } from './address.service';
+
+describe('AddressService', () => {
+  let service: AddressService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AddressService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/service/address.service.ts

+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AddressService {
+  constructor(private http: HttpClient) {}
+
+  public searchAddress(searchQuery: string): Observable<any> {
+    return this.http.post<any>(`api/structures/address`, { searchQuery });
+  }
+}

src/app/shared/shared.module.ts

@@ -7,9 +7,10 @@ import { SharedComponents } from './components';
 import { SharedPipes } from './pipes';
 import { SharedDirectives } from './directives';
 import { SvgIconComponent } from './components/svg-icon/svg-icon.component';
+import { AddressAutocompleteComponent } from './components/address-autocomplete/address-autocomplete.component';
 @NgModule({
   imports: [CommonModule, RouterModule, FlexLayoutModule, ReactiveFormsModule],
-  declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives, SvgIconComponent],
+  declarations: [...SharedPipes, ...SharedComponents, ...SharedDirectives, SvgIconComponent, AddressAutocompleteComponent],
   exports: [
     ...SharedPipes,
     ...SharedComponents,

src/assets/scss/_inputs.scss

+@import './color';
+@import './shapes';
+
 @mixin input-search {
   width: 100%;
   border: none;
@@ -7,3 +10,16 @@
   outline: none;
   font-style: italic;
 }
+
+.form-input {
+  min-width: 290px;
+  background: $grey-6;
+  border: 1px solid $grey-4;
+  box-sizing: border-box;
+  border-radius: $input-radius;
+  height: 40px;
+}
+.form-input:focus {
+  border: 1px solid $blue;
+  outline: none !important;
+}

src/assets/scss/_shapes.scss

@@ -2,7 +2,7 @@
 
 $card-radius: 0.625em;
 $bouton-radius: 0.625em;
-$input-radius: 0.3125em;
+$input-radius: 4px;
 $bouton-width: 12.25em;
 $round-bouton-radius: 1.25em;
 $round-radius: 50%;

src/styles.scss

@@ -4,6 +4,7 @@
 @import 'assets/scss/color';
 @import 'assets/scss/breakpoint';
 @import 'assets/scss/icons';
+@import 'assets/scss/inputs';
 @import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
 
 html {