diff --git a/src/app/shared/components/categories-dropdown/categories-dropdown.component.html b/src/app/shared/components/categories-dropdown/categories-dropdown.component.html new file mode 100644 index 0000000000..3e362e8854 --- /dev/null +++ b/src/app/shared/components/categories-dropdown/categories-dropdown.component.html @@ -0,0 +1,5 @@ + +Оберіть гуртки + + {{category.title}} + diff --git a/src/app/shared/components/hobby-select/category-select.component.scss b/src/app/shared/components/categories-dropdown/categories-dropdown.component.scss similarity index 100% rename from src/app/shared/components/hobby-select/category-select.component.scss rename to src/app/shared/components/categories-dropdown/categories-dropdown.component.scss diff --git a/src/app/shared/components/categories-dropdown/categories-dropdown.component.spec.ts b/src/app/shared/components/categories-dropdown/categories-dropdown.component.spec.ts new file mode 100644 index 0000000000..236365c857 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CategoriesDropdownComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CategoriesDropdownComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/categories-dropdown/categories-dropdown.component.ts b/src/app/shared/components/categories-dropdown/categories-dropdown.component.ts new file mode 100644 index 0000000000..a45d1f9db9 --- /dev/null +++ b/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(); + @Select(ProviderState.workshopsList) + $categoriesList: Observable; + 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); + } +} diff --git a/src/app/shared/components/hobby-select/category-select.component.html b/src/app/shared/components/category-select/category-select.component.html similarity index 100% rename from src/app/shared/components/hobby-select/category-select.component.html rename to src/app/shared/components/category-select/category-select.component.html diff --git a/src/app/shared/components/category-select/category-select.component.scss b/src/app/shared/components/category-select/category-select.component.scss new file mode 100644 index 0000000000..8e9d4d721c --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/app/shared/components/hobby-select/category-select.component.spec.ts b/src/app/shared/components/category-select/category-select.component.spec.ts similarity index 93% rename from src/app/shared/components/hobby-select/category-select.component.spec.ts rename to src/app/shared/components/category-select/category-select.component.spec.ts index 3719373491..e9f7867aa9 100644 --- a/src/app/shared/components/hobby-select/category-select.component.spec.ts +++ b/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; diff --git a/src/app/shared/components/hobby-select/category-select.component.ts b/src/app/shared/components/category-select/category-select.component.ts similarity index 100% rename from src/app/shared/components/hobby-select/category-select.component.ts rename to src/app/shared/components/category-select/category-select.component.ts diff --git a/src/app/shared/components/hobby-select/mock.ts b/src/app/shared/components/hobby-select/mock.ts deleted file mode 100644 index 933dfbc30f..0000000000 --- a/src/app/shared/components/hobby-select/mock.ts +++ /dev/null @@ -1,61 +0,0 @@ -import iData from '../../models/direction-data.model'; - -const data: iData[] = [ - { - direction: 'Музика', - faculty: [ - { name: 'Народних інструментів', - study: ['Клас бандури', 'Клас Цимбал', 'Клас Домри'] - }, - { name: 'Духових та ударних інструментів', - study: ['Клас Труби', 'Клас Скрипки', 'Клас Арфи'] - } - ] - }, - { - direction: 'Співи', - faculty: [ - { name: 'Хорового мистецтва', - study: ['Клас Хорового співу'] - }, - { name: 'Сольного співу', - study: ['Клас Естрадного співу', 'Клас Народного співу', 'Клас Академічного співу'] - } - ] - }, - { - direction: 'Малювання', - faculty: [ - { name: 'Художнього мистецтва', - study: ['Клас Ліплення', 'Клас Малювання (рисунок, живопис)'] - } - ] - }, - { - direction: 'Рукоділля', - faculty: [ - { name: 'Декоративного мистецтва', - study: ['Клас Вишивки', 'Клас Витинанки', 'Клас Ткацтва'] - }, - { name: 'Танці', - study: ['Клас Народно-сценічного танцю', 'Клас Бального танцю', 'Клас Класичного танцю'] - } - ] - }, - { - direction: 'Театр, цирк та кіно', - faculty: [ - { name: 'Кіно та мультимедії', - study: ['Клас Кіномистецтва', 'Клас Мультимедіа', 'Клас Анімації'] - }, - { name: 'Циркового мистецтво', - study: ['Цирковий клас'] - }, - { name: 'Театральне', - study: ['Клас Театру', 'Клас Музичного театру'] - } - ] - } -]; - -export default data; diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 006c795f5d..7b36fd3f9a 100644 --- a/src/app/shared/shared.module.ts +++ b/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 { } diff --git a/src/app/shared/store/filter.actions.ts b/src/app/shared/store/filter.actions.ts index 692141a11f..6fdc6a6216 100644 --- a/src/app/shared/store/filter.actions.ts +++ b/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'; } diff --git a/src/app/shared/store/provider.state.ts b/src/app/shared/store/provider.state.ts index f80e3bfa6d..97fa6ff56a 100644 --- a/src/app/shared/store/provider.state.ts +++ b/src/app/shared/store/provider.state.ts @@ -9,12 +9,13 @@ 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[]; } @@ -22,6 +23,7 @@ export interface ProviderStateModel { name: 'provider', defaults: { workshopsList: [], + filteredWorkshopsList: [], applicationsList: Application[''] } }) @@ -57,7 +59,10 @@ export class ProviderState { patchState({ applicationsList }) ) } - + @Action(SetFilteredWorkshops) + setFilteredWorkshops({ patchState }: StateContext, { payload }: SetFilteredWorkshops) { + patchState({ filteredWorkshopsList: payload }); + } @Action(CreateWorkshop) createWorkshop({ dispatch }: StateContext, { payload }: CreateWorkshop) { dispatch(new ToggleLoading(true));