Feature / #164 add requests filtering by direction

src/app/shared/components/categories-dropdown/categories-dropdown.component.html

@@ -0,0 +1,5 @@
+
+<mat-label>Оберіть гуртки</mat-label>
+<mat-select class="custom-select" [formControl]="selectedCategories" multiple >
+  <mat-option *ngFor="let category of categoriesList" [value]="category.id">{{category.title}}</mat-option>
+</mat-select>

src/app/shared/components/categories-dropdown/categories-dropdown.component.spec.ts

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

src/app/shared/components/categories-dropdown/categories-dropdown.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import { Select, Store } from '@ngxs/store';
+import {  FormControl } from '@angular/forms';
+import { ProviderState } from '../../../shared/store/provider.state';
+import { Observable } from 'rxjs';
+import { Workshop } from '../../models/workshop.model';
+import { GetWorkshops, SetFilteredWorkshops } from '../../store/filter.actions';
+import { uniqBy } from 'lodash';
+
+@Component({
+  selector: 'app-categories-dropdown',
+  templateUrl: './categories-dropdown.component.html',
+  styleUrls: ['./categories-dropdown.component.scss']
+})
+export class CategoriesDropdownComponent implements OnInit {
+  @Output() categoriesSelect = new EventEmitter<FormControl>();
+  @Select(ProviderState.workshopsList)
+  $categoriesList: Observable<Workshop[]>;
+  public categoriesList: Workshop[];
+  selectedCategories = new FormControl([]);
+
+  constructor(private store: Store) { }
+
+  ngOnInit(): void {
+    this.store.dispatch(new GetWorkshops());
+    this.$categoriesList.subscribe((data: Workshop[]) => {
+      this.categoriesList = data && data.length > 0 ? uniqBy(data, 'id') : [];
+      this.store.dispatch(new SetFilteredWorkshops(this.categoriesList));
+    });
+    this.categoriesSelect.emit(this.selectedCategories);
+  }
+}

src/app/shared/components/category-select/category-select.component.scss

@@ -0,0 +1,6 @@
+.custom-select {
+  border: 1px solid #E3E3E3;
+  box-sizing: border-box;
+  border-radius: 21px;
+  padding: 0.5rem;
+}

src/app/shared/components/hobby-select/category-select.component.spec.ts → src/app/shared/components/category-select/category-select.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CategorySelectComponent } from './category-select.component';
 
-describe('HobbySelectComponent', () => {
+describe('CategorySelectComponentt', () => {
   let component: CategorySelectComponent;
   let fixture: ComponentFixture<CategorySelectComponent>;
 

src/app/shared/shared.module.ts

@@ -15,12 +15,14 @@ import { TeacherCardComponent } from './components/teacher-card/teacher-card.com
 import { CategoryCardComponent } from './components/category-card/category-card.component';
 import { CreateTeacherComponent } from './components/create-teacher/create-teacher.component';
 import { TeacherFormComponent } from './components/create-teacher/teacher-form/teacher-form.component';
-import { CategorySelectComponent } from './components/hobby-select/category-select.component';
+import { CategorySelectComponent } from './components/category-select/category-select.component';
 import { CityAutocompleteComponent } from './components/city-autocomplete/city-autocomplete.component';
 import { MinMaxDirective } from './directives/min-max.directive';
 import { ImageFormControlComponent } from './components/image-form-control/image-form-control.component';
 import { ApplicationFilterPipe } from './pipes/application-filter.pipe';
 import { ApplicationSortPipe } from './pipes/application-sort.pipe';
+import { CategoriesDropdownComponent } from './components/categories-dropdown/categories-dropdown.component';
+
 @NgModule({
   declarations: [
     FiltersListComponent,
@@ -39,7 +41,8 @@ import { ApplicationSortPipe } from './pipes/application-sort.pipe';
     MinMaxDirective,
     ImageFormControlComponent,
     ApplicationFilterPipe,
-    ApplicationSortPipe
+    ApplicationSortPipe,
+    CategoriesDropdownComponent
   ],
   imports: [
     MaterialModule,
@@ -65,7 +68,8 @@ import { ApplicationSortPipe } from './pipes/application-sort.pipe';
     MinMaxDirective,
     ImageFormControlComponent,
     ApplicationFilterPipe,
-    ApplicationSortPipe
+    ApplicationSortPipe,
+    CategoriesDropdownComponent
   ]
 })
 export class SharedModule { }

src/app/shared/store/filter.actions.ts

@@ -1,4 +1,5 @@
 import { City } from "../models/city.model";
+import { Workshop } from "../models/workshop.model";
 
 export class setMinAge {
   static readonly type = '[filter] Set Min Age';
@@ -27,6 +28,10 @@ export class SetCategory {
 export class GetWorkshops {
   static readonly type = '[filter] Get Workshops';
 }
+export class SetFilteredWorkshops {
+  static readonly type = '[filter] Set Filtered Workshops';
+  constructor(public payload: Workshop[]) { }
+}
 export class GetPopWorkshops {
   static readonly type = '[filter] Get 4 Most Popular Workshop Cards';
 }

src/app/shared/store/provider.state.ts

@@ -9,19 +9,21 @@ import { Workshop } from '../models/workshop.model';
 import { ApplicationsService } from '../services/applications/applications.service';
 import { ChildCardService } from '../services/child-cards/child-cards.service';
 import { ProviderWorkshopsService } from '../services/workshops/provider-workshops/provider-workshops';
+import { GetWorkshops, SetFilteredWorkshops } from './filter.actions';
 import { ToggleLoading } from './app.actions';
-import { GetWorkshops } from './filter.actions';
 import { CreateWorkshop, GetApplications, OnCreateWorkshopFail, OnCreateWorkshopSuccess } from './provider.actions';
 
 export interface ProviderStateModel {
   workshopsList: Workshop[];
+  filteredWorkshopsList: Workshop[];
   applicationsList: Application[];
 }
 
 @State<ProviderStateModel>({
   name: 'provider',
   defaults: {
     workshopsList: [],
+    filteredWorkshopsList: [],
     applicationsList: Application['']
   }
 })
@@ -57,7 +59,10 @@ export class ProviderState {
         patchState({ applicationsList })
     )
   }
-
+  @Action(SetFilteredWorkshops)
+  setFilteredWorkshops({ patchState }: StateContext<ProviderStateModel>, { payload }: SetFilteredWorkshops) {
+    patchState({ filteredWorkshopsList: payload });
+  }
   @Action(CreateWorkshop)
   createWorkshop({ dispatch }: StateContext<ProviderStateModel>, { payload }: CreateWorkshop) {
     dispatch(new ToggleLoading(true));