diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ac5a23628a..a8b02403c1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,7 @@ import { FilterState } from './shared/store/filter.state'; import { NgxsModule } from '@ngxs/store'; import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin'; import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin'; -import { environment } from 'src/environments/environment'; +import { environment } from './../environments/environment'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ShellComponent } from './shell/shell.component'; diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 28d81cde43..4bac8915f0 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -23,6 +23,7 @@

Понад 500 найрізноманітніших гуртків

+ place
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index d32c600fd8..b009968d82 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -88,6 +88,12 @@ &_city { border-right: 1px solid #E3E3E3; + width: 143px; + } +} +@media(max-width: 411px){ + .header_city{ + width: 60px; } } diff --git a/src/app/shared/components/city-autocomplete/city-autocomplete.component.html b/src/app/shared/components/city-autocomplete/city-autocomplete.component.html new file mode 100644 index 0000000000..015240b360 --- /dev/null +++ b/src/app/shared/components/city-autocomplete/city-autocomplete.component.html @@ -0,0 +1,14 @@ +
+ + + + + {{city}} + + + +
\ No newline at end of file diff --git a/src/app/shared/components/city-autocomplete/city-autocomplete.component.scss b/src/app/shared/components/city-autocomplete/city-autocomplete.component.scss new file mode 100644 index 0000000000..5e2ffe3468 --- /dev/null +++ b/src/app/shared/components/city-autocomplete/city-autocomplete.component.scss @@ -0,0 +1,13 @@ +:host ::ng-deep .mat-form-field-wrapper{ + padding: 0; + } + :host ::ng-deep .mat-form-field-infix{ + border: none; + } + .search-city{ + display: flex; + flex-direction: row; + align-items: center; + height: 100%; + } + \ No newline at end of file diff --git a/src/app/shared/components/city-autocomplete/city-autocomplete.component.spec.ts b/src/app/shared/components/city-autocomplete/city-autocomplete.component.spec.ts new file mode 100644 index 0000000000..b547c91336 --- /dev/null +++ b/src/app/shared/components/city-autocomplete/city-autocomplete.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CityAutocompleteComponent } from './city-autocomplete.component'; + +describe('CityAutocompleteComponent', () => { + let component: CityAutocompleteComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CityAutocompleteComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CityAutocompleteComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/city-autocomplete/city-autocomplete.component.ts b/src/app/shared/components/city-autocomplete/city-autocomplete.component.ts new file mode 100644 index 0000000000..ca461f2a84 --- /dev/null +++ b/src/app/shared/components/city-autocomplete/city-autocomplete.component.ts @@ -0,0 +1,83 @@ +import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { FormControl } from '@angular/forms'; +import { Select, Store } from '@ngxs/store'; +import { Observable, Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, map, startWith, takeUntil } from 'rxjs/operators'; +import { MetaDataState } from '../../store/meta-data.state'; +import { CityList } from '../../store/meta-data.actions'; +import { CityFilterService } from '../../services/filters-services/city-filter/city-filter.service'; +import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete'; + +@Component({ + selector: 'app-city-autocomplete', + templateUrl: './city-autocomplete.component.html', + styleUrls: ['./city-autocomplete.component.scss'] +}) +export class CityAutocompleteComponent implements OnInit { + + city:string; + cityControl = new FormControl(); + cities: string[] = []; + noCity: boolean=false; + destroy$: Subject = new Subject(); + + @Output() selectedCity = new EventEmitter(); + + @Select(MetaDataState.filteredCities) + filteredCities$: Observable; + + + constructor(public filterCityService: CityFilterService, public store: Store) { } + ngOnInit(): void { + this.filterCityService.fetchCities() + .subscribe((data)=>{ + this.cities=data; + }) + + this.cityControl.valueChanges + .pipe( + takeUntil(this.destroy$), + debounceTime(300), + distinctUntilChanged(), + startWith(''), + ).subscribe(value => { + if (value) { + this.store.dispatch(new CityList(this._filter(value))); + }else{ + this.store.dispatch(new CityList([])); + }; + }); + } + /** + * This method filters the list of all cities according to the value of input; + * If the input value does not match with options + * the further selection is disabled and a user receive "Такого міста немає" + * @param string value + * @returns string[] + */ + private _filter(value: string): string[] { + const filterValue = value.toLowerCase(); + let filteredCities = this.cities.filter(city => city.toLowerCase().startsWith(filterValue)); + if(filteredCities.length===0){ + this.noCity=true; + return ["Такого міста немає"] + }else{ + this.noCity=false; + return filteredCities; + } + } + /** + * This method selects an option from the list of filtered cities as a chosen city + * and pass this value to teh parent component + * @param MatAutocompleteSelectedEvent value + */ + onSelect(event: MatAutocompleteSelectedEvent): void { + this.selectedCity.emit(event.option.value); + } + + ngOnDestroy() { + this.destroy$.next(true); + this.destroy$.unsubscribe(); + } + +} diff --git a/src/app/shared/components/create-teacher/create-teacher.component.html b/src/app/shared/components/create-teacher/create-teacher.component.html index a93406ba8e..19410faf58 100644 --- a/src/app/shared/components/create-teacher/create-teacher.component.html +++ b/src/app/shared/components/create-teacher/create-teacher.component.html @@ -1,6 +1,10 @@
- + diff --git a/src/app/shared/components/create-teacher/teacher-form/teacher-form.component.html b/src/app/shared/components/create-teacher/teacher-form/teacher-form.component.html index 7c0f013226..6efe1cf060 100644 --- a/src/app/shared/components/create-teacher/teacher-form/teacher-form.component.html +++ b/src/app/shared/components/create-teacher/teacher-form/teacher-form.component.html @@ -1,4 +1,4 @@ -
+ Опис