Feature/lytvynets

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';

src/app/header/header.component.html

@@ -23,6 +23,7 @@ <h2 class="header_descr">
     Понад 500 найрізноманітніших гуртків
   </h2>
   <div class="header_search">
+    <mat-icon> place</mat-icon>
     <app-city-filter class="header_city"></app-city-filter>
     <app-searchbar class="header_bar"></app-searchbar>
   </div>

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

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

@@ -0,0 +1,14 @@
+<form class="search-city">
+  <mat-form-field appearance="none">
+    <input type="text"
+      matInput
+      [formControl]="cityControl"
+      [matAutocomplete]="auto"
+      >
+    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onSelect($event)">
+      <mat-option [disabled]= "noCity" *ngFor="let city of filteredCities$ | async" [value]="city">
+          {{city}}
+      </mat-option>
+    </mat-autocomplete>
+  </mat-form-field>
+</form>

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

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<CityAutocompleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CityAutocompleteComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CityAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<boolean> = new Subject<boolean>();
+
+  @Output() selectedCity = new EventEmitter();
+
+  @Select(MetaDataState.filteredCities)
+  filteredCities$: Observable<string[]>;
+
+
+  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();
+  }
+
+}

src/app/shared/components/create-teacher/create-teacher.component.html

@@ -1,6 +1,10 @@
 <div class="container" fxLayout="column" fxLayoutAlign="center">
   <ng-container> 
-    <app-teacher-form *ngFor="let form of TeacherFormArray.controls" [TeacherFormGroup]="form" [index]="TeacherFormArray.controls.indexOf(form)"  (deleteForm)="onDeleteForm($event)">
+    <app-teacher-form *ngFor="let form of TeacherFormArray.controls"
+      [TeacherFormGroup]="form" 
+      [index]="TeacherFormArray.controls.indexOf(form)"
+      [teacherAmount]="TeacherFormArray.controls.length"  
+      (deleteForm)="onDeleteForm($event)">
     </app-teacher-form> 
   </ng-container>
   <button class="btn" mat-button (click)="onAddTeacher()"><mat-icon class="mat-icon-add">add</mat-icon>Додати ще одного викладача</button>

src/app/shared/components/create-teacher/teacher-form/teacher-form.component.html

@@ -1,4 +1,4 @@
-<form [formGroup]="TeacherFormGroup" fxLayout='column' fxLayoutAlign='center space-between' class="form-form">
+<form [formGroup]="TeacherFormGroup" fxLayout='column' fxLayoutAlign='center space-between' [ngClass]="(teacherAmount>1) ? 'form-border' : ''">
   <ng-template matStepLabel>Опис</ng-template>
 
   <label class="form-label">Фото викладача
@@ -23,15 +23,18 @@
   </mat-form-field>
 
   <label class="form-label">Дата народження<span class="form-required">*</span></label>
-  <mat-form-field>
-    <input matInput class="form-input form-input-date" type="date" placeholder="01.01.2021" formControlName="birthDay" required>
+  <mat-form-field class="form-input form-input_date" >
+    <input matInput [matDatepicker]="picker" formControlName="birthDay" required >
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
   </mat-form-field>
 
   <label class="form-label">Опис</label>
   <mat-form-field>
     <textarea matInput class="form-textarea" placeholder="Максимум 500 символів" formControlName="description"></textarea>
   </mat-form-field>
 </form>
-<div class="form-border" fxLayout='row' fxLayoutAlign='center'>
+
+<div fxLayout='row' fxLayoutAlign='center'>
   <button class="btn-reset" type="reset" mat-button (click)="onDeleteTeacher()"><mat-icon class="mat-icon-delete">delete</mat-icon>Вилучити дані про викладача</button>
 </div>

src/app/shared/components/create-teacher/teacher-form/teacher-form.component.scss

@@ -19,7 +19,7 @@
     border-radius: 21px;
     padding:0.5rem;
 
-    &-date{
+    &_date{
       max-width: 30%;
     }
   }

src/app/shared/components/create-teacher/teacher-form/teacher-form.component.ts

@@ -13,6 +13,7 @@ export class TeacherFormComponent implements OnInit {
 
   @Input() TeacherFormGroup: FormGroup;
   @Input() index: number;
+  @Input()  teacherAmount: number;
   @Output() deleteForm = new EventEmitter();
 
   ngOnInit(): void {

src/app/shared/components/filters-list/city-filter/city-filter.component.html

@@ -1,15 +1 @@
-<form class="search-city">
-  <mat-icon> place</mat-icon>
-  <mat-form-field appearance="none">
-    <input type="text" class="filter--metaData-city"
-      matInput
-      [formControl]="cityControl"
-      [matAutocomplete]="auto"
-      >
-    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="onSelect($event)">
-      <mat-option [disabled]= "noCity" *ngFor="let city of filteredCities$ | async" [value]="city">
-          {{city}}
-      </mat-option>
-    </mat-autocomplete>
-  </mat-form-field>
-</form>
+<app-city-autocomplete (selectedCity)="onSelectedCity($event)"></app-city-autocomplete>

src/app/shared/components/filters-list/city-filter/city-filter.component.scss

@@ -1,21 +0,0 @@
-: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%;
-}
-.mat-form-field{
-  width: 143px;
-}
-@media(max-width: 411px){
-  .mat-form-field{
-    width: 60px;
-  }
-
-}

src/app/shared/components/filters-list/city-filter/city-filter.component.spec.ts

@@ -1,57 +1,25 @@
-// import { ComponentFixture, TestBed } from '@angular/core/testing';
-// import { MatFormFieldModule } from '@angular/material/form-field';
-// import { CityFilterComponent } from './city-filter.component';
-// import { MatAutocompleteModule } from '@angular/material/autocomplete';
-// import { MatIconModule } from '@angular/material/icon';
-// import { ReactiveFormsModule } from '@angular/forms';
-// import { MatInputModule } from '@angular/material/input';
-// import { NgxsModule, Store } from '@ngxs/store';
-// import { MetaDataState } from '../../../../shared/store/meta-data.state';
-// import { FilterState } from '../../../../shared/store/filter.state';
-// import { CityFilterService } from '../../../../shared/filters-services/city-filter.service';
-// import { Injectable } from '@angular/core';
-// import { CommonModule } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-// describe('CityFilterComponent', () => {
-//   let component: CityFilterComponent;
-//   let fixture: ComponentFixture<CityFilterComponent>;
+import { CityFilterComponent } from './city-filter.component';
 
-//   beforeEach(async () => {
-//     await TestBed.configureTestingModule({
-//       imports: [
-//         MatFormFieldModule,
-//         MatAutocompleteModule,
-//         MatIconModule,
-//         ReactiveFormsModule,
-//         MatInputModule,
-//         CommonModule
-//         //NgxsModule.forRoot([MetaDataState, FilterState]),
-
-//       ],
-//       declarations: [ CityFilterComponent],
-//       providers:[
-//         {provide: CityFilterService, useClass: MockCityFilterService},
-//         {provide: Store, useClass: MockStore}
-//       ]
-//     })
-//     .compileComponents();
-//   });
+describe('CityFilterComponent', () => {
+  let component: CityFilterComponent;
+  let fixture: ComponentFixture<CityFilterComponent>;
 
-//   beforeEach(() => {
-//     fixture = TestBed.createComponent(CityFilterComponent);
-//     component = fixture.componentInstance;
-//     fixture.detectChanges();
-//   });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CityFilterComponent ]
+    })
+    .compileComponents();
+  });
 
-//   it('should create', () => {
-//     expect(component).toBeTruthy();
-//   });
-// });
-// @Injectable({
-//   providedIn: 'root'
-// })
-// class MockCityFilterService{} 
-// @Injectable({
-//   providedIn: 'root'
-// })
-// class MockStore{} 
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CityFilterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});