diff --git a/src/app/shared/components/filters-list/filters-list.component.ts b/src/app/shared/components/filters-list/filters-list.component.ts index 75e7d82ce3..069b7344fe 100644 --- a/src/app/shared/components/filters-list/filters-list.component.ts +++ b/src/app/shared/components/filters-list/filters-list.component.ts @@ -2,7 +2,7 @@ import { SetWithDisabilityOption } from './../../store/filter.actions'; import { Component, Input, OnDestroy, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms'; import { Store, Select } from '@ngxs/store'; -import { Subject} from 'rxjs'; +import { Subject } from 'rxjs'; import { debounceTime, distinctUntilChanged, skip, takeUntil } from 'rxjs/operators'; import { FilterChange, FilterClear, SetClosedRecruitment, SetOpenRecruitment } from '../../store/filter.actions'; import { FilterState } from '../../store/filter.state'; @@ -16,12 +16,12 @@ export class FiltersListComponent implements OnInit, OnDestroy { @Select(FilterState.filterList) @Input() set filtersList(filters) { - const {withDisabilityOption,ageFilter,categoryCheckBox,priceFilter,workingHours} = filters + const { withDisabilityOption, ageFilter, categoryCheckBox, priceFilter, workingHours } = filters; this.priceFilter = priceFilter; this.workingHours = workingHours; this.categoryCheckBox = categoryCheckBox; this.ageFilter = ageFilter; - this.WithDisabilityOptionControl.setValue(withDisabilityOption,{emitEvent:false}) + this.WithDisabilityOptionControl.setValue(withDisabilityOption, { emitEvent: false }); }; public priceFilter; @@ -29,7 +29,6 @@ export class FiltersListComponent implements OnInit, OnDestroy { public categoryCheckBox; public ageFilter; - OpenRecruitmentControl = new FormControl(false); ClosedRecruitmentControl = new FormControl(false); WithDisabilityOptionControl = new FormControl(false); diff --git a/src/app/shared/components/filters-list/price-filter/price-filter.component.html b/src/app/shared/components/filters-list/price-filter/price-filter.component.html index 1115e7039c..e78c5f4852 100644 --- a/src/app/shared/components/filters-list/price-filter/price-filter.component.html +++ b/src/app/shared/components/filters-list/price-filter/price-filter.component.html @@ -1,9 +1,12 @@

Вартість

-
- Безкоштовно -
+
+ Безкоштовно + Платні + +
-
+

Від

-
+

До

-
- +
+
-
+
\ No newline at end of file diff --git a/src/app/shared/components/filters-list/price-filter/price-filter.component.scss b/src/app/shared/components/filters-list/price-filter/price-filter.component.scss index 7b07a000a7..7ba3f46046 100644 --- a/src/app/shared/components/filters-list/price-filter/price-filter.component.scss +++ b/src/app/shared/components/filters-list/price-filter/price-filter.component.scss @@ -58,6 +58,11 @@ .input-wrapper{ margin-top: 13px; margin-bottom: 0 !important; + &-disable{ + opacity: 0.5; + cursor: initial; + color:#FFFFFF; + } } ::ng-deep .mat-form-field-underline { display: none; diff --git a/src/app/shared/components/filters-list/price-filter/price-filter.component.ts b/src/app/shared/components/filters-list/price-filter/price-filter.component.ts index 6466e3a911..9c4605b730 100644 --- a/src/app/shared/components/filters-list/price-filter/price-filter.component.ts +++ b/src/app/shared/components/filters-list/price-filter/price-filter.component.ts @@ -1,12 +1,11 @@ -import { element } from 'protractor'; import { Options } from '@angular-slider/ngx-slider'; import { Component, Input, OnDestroy, OnInit } from '@angular/core'; -import { FormBuilder, FormControl, FormGroup, Validators, } from '@angular/forms'; -import { Select, Store } from '@ngxs/store'; -import { Observable, Subject } from 'rxjs'; -import { debounceTime, distinctUntilChanged, filter, skip, takeUntil } from 'rxjs/operators'; +import { FormControl, Validators, } from '@angular/forms'; +import { Store } from '@ngxs/store'; +import { Subject } from 'rxjs'; +import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'; import { Constants } from 'src/app/shared/constants/constants'; -import { SetIsFree, SetMaxPrice, SetMinPrice } from 'src/app/shared/store/filter.actions'; +import { SetIsFree, SetIsPaid, SetMaxPrice, SetMinPrice } from 'src/app/shared/store/filter.actions'; @Component({ selector: 'app-price-filter', @@ -17,21 +16,25 @@ export class PriceFilterComponent implements OnInit, OnDestroy { @Input() set priceFilter(filter) { - const {minPrice,maxPrice,isFree} = filter; - this.minPriceControl.setValue(minPrice,{emitEvent: false}); + const { minPrice, maxPrice, isFree, isPaid } = filter; + this.minPriceControl.setValue(minPrice, { emitEvent: false }); this.minValue = minPrice; - this.maxPriceControl.setValue(maxPrice,{emitEvent: false}); + this.maxPriceControl.setValue(maxPrice, { emitEvent: false }); this.maxValue = maxPrice; - this.isFreeControl.setValue(isFree,{emitEvent: false}); + this.isFreeControl.setValue(isFree, { emitEvent: false }); + this.isPaidControl.setValue(isPaid, { emitEvent: false }); }; readonly constants: typeof Constants = Constants; isFreeControl = new FormControl(false); - maxPriceControl = new FormControl(0, [Validators.maxLength(4)]); - minPriceControl = new FormControl(0, [Validators.maxLength(4)]); - minValue = 0; - maxValue = 0; + isPaidControl = new FormControl(false); + + minPriceControl = new FormControl(Constants.MIN_PRICE, [Validators.maxLength(4)]); + maxPriceControl = new FormControl(Constants.MAX_PRICE, [Validators.maxLength(4)]); + + minValue = Constants.MIN_PRICE; + maxValue = Constants.MAX_PRICE; options: Options = { floor: Constants.MIN_PRICE, ceil: Constants.MAX_PRICE, @@ -45,7 +48,19 @@ export class PriceFilterComponent implements OnInit, OnDestroy { */ ngOnInit(): void { - this.isFreeControl.valueChanges.subscribe((val: boolean) => this.store.dispatch(new SetIsFree(val))); + this.isFreeControl.valueChanges + .pipe( + takeUntil(this.destroy$), + debounceTime(300), + distinctUntilChanged(), + ).subscribe((val: boolean) => this.store.dispatch(new SetIsFree(val))); + + this.isPaidControl.valueChanges + .pipe( + takeUntil(this.destroy$), + debounceTime(300), + distinctUntilChanged(), + ).subscribe((val: boolean) => this.store.dispatch(new SetIsPaid(val))); this.minPriceControl.valueChanges .pipe( @@ -53,7 +68,7 @@ export class PriceFilterComponent implements OnInit, OnDestroy { debounceTime(300), distinctUntilChanged(), ).subscribe((val: number) => { - !val && this.isFreeControl.setValue(!!val); + !this.isPaidControl.value && this.isPaidControl.setValue(true); this.store.dispatch(new SetMinPrice(val)); }); @@ -63,14 +78,12 @@ export class PriceFilterComponent implements OnInit, OnDestroy { debounceTime(300), distinctUntilChanged() ).subscribe((val: number) => { - + !this.isPaidControl.value && this.isPaidControl.setValue(true); this.store.dispatch(new SetMaxPrice(val)); }); } - - priceHandler(e) { e.pointerType && this.maxPriceControl.setValue(e.highValue); !e.pointerType && this.minPriceControl.setValue(e.value); diff --git a/src/app/shared/constants/constants.ts b/src/app/shared/constants/constants.ts index 756b723f77..2f2095a786 100644 --- a/src/app/shared/constants/constants.ts +++ b/src/app/shared/constants/constants.ts @@ -11,7 +11,7 @@ export class Constants { static readonly CLASS_AMOUNT_MAX = 7; static readonly AGE_MIN = 0; static readonly AGE_MAX = 18; - static readonly MIN_PRICE = 0; + static readonly MIN_PRICE = 1; static readonly MAX_PRICE = 10000; static readonly MIN_TIME = '00:00'; static readonly MAX_TIME = '23:59'; diff --git a/src/app/shared/services/workshops/app-workshop/app-workshops.service.ts b/src/app/shared/services/workshops/app-workshop/app-workshops.service.ts index f31a0d3af4..10ea737799 100644 --- a/src/app/shared/services/workshops/app-workshop/app-workshops.service.ts +++ b/src/app/shared/services/workshops/app-workshop/app-workshops.service.ts @@ -26,12 +26,17 @@ export class AppWorkshopsService { params = params.set('Longitude', filters.city.longitude.toString()); } - if (filters.maxPrice) { - params = params.set('MaxPrice', filters.maxPrice.toString()); + if (filters.isFree) { + params = params.set('IsFree', 'true'); } - if (filters.minPrice) { - params = params.set('MinPrice', filters.minPrice.toString()); + if (filters.isPaid) { + params = this.setIsPaid(filters, params); + } + + if ((filters.isFree && filters.isPaid) || (!filters.isFree && !filters.isPaid)) { + params = params.set('IsFree', 'true'); + params = this.setIsPaid(filters, params); } if (filters.searchQuery) { @@ -58,7 +63,7 @@ export class AppWorkshopsService { filters.workingDays.forEach((day: string) => params = params.append('Workdays', day)); } - if (filters.isFree || !filters.minAge) { + if (filters.isFree || !filters.minPrice) { params = params.set('IsFree', 'true'); } @@ -89,6 +94,20 @@ export class AppWorkshopsService { return params; } + /** + * This method applied min and max price filter options + */ + private setIsPaid(filters: FilterStateModel, params: HttpParams): HttpParams { + if (filters.maxPrice) { + params = params.set('MaxPrice', filters.maxPrice.toString()); + } + + if (filters.minPrice) { + params = params.set('MinPrice', filters.minPrice.toString()); + } + return params; + } + /** * This method get workshops with applied filter options */ diff --git a/src/app/shared/store/filter.actions.ts b/src/app/shared/store/filter.actions.ts index 3ade5f2b2e..31bb189621 100644 --- a/src/app/shared/store/filter.actions.ts +++ b/src/app/shared/store/filter.actions.ts @@ -37,6 +37,11 @@ export class SetIsFree { static readonly type = '[filter] Set Is Free type of payment'; constructor(public payload: boolean) { } } + +export class SetIsPaid { + static readonly type = '[filter] Set Is Paid type of payment'; + constructor(public payload: boolean) { } +} export class SetMinPrice { static readonly type = '[filter] Set Min Price'; constructor(public payload: number) { } diff --git a/src/app/shared/store/filter.state.ts b/src/app/shared/store/filter.state.ts index c75772dec9..1ac9d4b7c8 100644 --- a/src/app/shared/store/filter.state.ts +++ b/src/app/shared/store/filter.state.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import { State, Action, StateContext, Selector } from '@ngxs/store'; import { tap } from 'rxjs/operators'; +import { Constants } from '../constants/constants'; import { Direction } from '../models/category.model'; import { City } from '../models/city.model'; import { PaginationElement } from '../models/paginationElement.model'; @@ -29,7 +30,8 @@ import { ConfirmCity, CleanCity, FilterClear, - SetFirstPage + SetFirstPage, + SetIsPaid } from './filter.actions'; export interface FilterStateModel { @@ -40,6 +42,7 @@ export interface FilterStateModel { startTime: string; endTime: string; isFree: boolean; + isPaid: boolean; maxPrice: number; minPrice: number; isOpenRecruitment: boolean; @@ -64,8 +67,9 @@ export interface FilterStateModel { endTime: null, workingDays: [], isFree: false, - maxPrice: 0, - minPrice: 0, + isPaid: false, + maxPrice: Constants.MAX_PRICE, + minPrice: Constants.MIN_PRICE, isOpenRecruitment: false, isClosedRecruitment: false, city: undefined, @@ -117,15 +121,16 @@ export class FilterState { @Selector() static filterList(state: FilterStateModel): any { - const {withDisabilityOption,minAge,maxAge,directions,minPrice,maxPrice,isFree,workingDays,startTime,endTime,currentPage,order} = state + const { withDisabilityOption, minAge, maxAge, directions, minPrice, maxPrice, isFree, isPaid, workingDays, startTime, endTime, currentPage, order } = state return { withDisabilityOption, categoryCheckBox: directions, - ageFilter: {minAge,maxAge}, + ageFilter: { minAge, maxAge }, priceFilter: { minPrice, maxPrice, - isFree + isFree, + isPaid }, workingHours: { workingDays, @@ -194,6 +199,11 @@ export class FilterState { patchState({ isFree: payload }); dispatch(new FilterChange()); } + @Action(SetIsPaid) + setIsPaid({ patchState, dispatch }: StateContext, { payload }: SetIsPaid) { + patchState({ isPaid: payload }); + dispatch(new FilterChange()); + } @Action(SetMinPrice) setMinPrice({ patchState, dispatch }: StateContext, { payload }: SetMinPrice) { @@ -273,14 +283,14 @@ export class FilterState { @Action(SetFirstPage) setFirstPage({ patchState }: StateContext) { - patchState({ currentPage: {element: 1,isActive: true} }); + patchState({ currentPage: { element: 1, isActive: true } }); } @Action(FilterChange) filterChange({ }: StateContext, { }: FilterChange) { } @Action(FilterClear) - FilterClear({ patchState }: StateContext, { }: FilterChange) { + FilterClear({ patchState }: StateContext, { }: FilterChange) { patchState({ directions: [], maxAge: null, @@ -289,8 +299,9 @@ export class FilterState { endTime: null, workingDays: [], isFree: false, - maxPrice: 0, - minPrice: 0, + isPaid: false, + maxPrice: Constants.MAX_PRICE, + minPrice: Constants.MIN_PRICE, isOpenRecruitment: false, isClosedRecruitment: false, searchQuery: '', @@ -299,6 +310,7 @@ export class FilterState { currentPage: { element: 1, isActive: true - }}); + } + }); } } diff --git a/src/app/shell/main/main.component.scss b/src/app/shell/main/main.component.scss index 6817f6bb4a..eae85c01af 100644 --- a/src/app/shell/main/main.component.scss +++ b/src/app/shell/main/main.component.scss @@ -80,10 +80,13 @@ app-footer { visibility: visible; position: static; } -} - -@media (max-width: 415px) { - .main_title { + .main_title, .main_link { font-size: 16px !important; } -} + .main-header{ + padding: 0 1rem; + h3{ + width: 50%; + } + } +} \ No newline at end of file diff --git a/src/app/shell/personal-cabinet/provider/create-provider/create-provider.component.html b/src/app/shell/personal-cabinet/provider/create-provider/create-provider.component.html index e68c44d16f..d5ad66e21d 100644 --- a/src/app/shell/personal-cabinet/provider/create-provider/create-provider.component.html +++ b/src/app/shell/personal-cabinet/provider/create-provider/create-provider.component.html @@ -36,37 +36,6 @@

{{(editMode) ? 'РЕДАГУВАТИ ЗАКЛАД' : '

- -

Опис

diff --git a/src/app/shell/shell.component.scss b/src/app/shell/shell.component.scss index 72e94b04b2..b43ab7b98e 100644 --- a/src/app/shell/shell.component.scss +++ b/src/app/shell/shell.component.scss @@ -4,6 +4,6 @@ section { @media(max-width: 780px) { section { - padding: 0 1rem; + padding: 0; } }