resetFilter529 (#596)

src/app/shared/components/category-card/category-card.component.ts

@@ -22,7 +22,6 @@ export class CategoryCardComponent implements OnInit {
   }
 
   selectDirection(direction: Direction): void {
-    location.hash = '?param=' + direction.id + '-' + direction.description + '-' + direction.title;
     this.store.dispatch(new SetDirections([direction]));
   }
   /**

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

@@ -17,4 +17,4 @@
         [max]="constants.MAX_PRICE">
     </div>
   </mat-form-field>
-</div>
+</div>

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

@@ -6,7 +6,6 @@ import { MatInputModule } from '@angular/material/input';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MinMaxDirective } from 'src/app/shared/directives/min-max.directive';
-import { of } from 'rxjs';
 
 describe('AgeFilterComponent', () => {
   let component: AgeFilterComponent;
@@ -31,7 +30,6 @@ describe('AgeFilterComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AgeFilterComponent);
     component = fixture.componentInstance;
-    component.resetFilter$ = of()
     fixture.detectChanges();
   });
 

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

@@ -1,10 +1,11 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { Store } from '@ngxs/store';
+import { Select, Store } from '@ngxs/store';
 import { Constants } from 'src/app/shared/constants/constants';
 import { FormControl } from '@angular/forms';
 import { debounceTime, distinctUntilChanged, filter, takeUntil, skip } from 'rxjs/operators';
-import { Subject } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { SetMaxAge, SetMinAge } from 'src/app/shared/store/filter.actions';
+import { FilterState } from 'src/app/shared/store/filter.state';
 
 @Component({
   selector: 'app-age-filter',
@@ -13,8 +14,18 @@ import { SetMaxAge, SetMinAge } from 'src/app/shared/store/filter.actions';
 })
 export class AgeFilterComponent implements OnInit, OnDestroy {
 
+  // @Select(FilterState.ageFilter)
+  // ageFilter$: Observable<any>;
+
+
   readonly constants: typeof Constants = Constants;
-  @Input() resetFilter$;
+  @Input()
+  set ageFilter(filter) {
+    const {minAge,maxAge} = filter
+    this.minAgeFormControl.setValue(minAge,{emitEvent: false});
+    this.maxAgeFormControl.setValue(maxAge,{emitEvent: false});
+  }
+
   minAgeFormControl = new FormControl('');
   maxAgeFormControl = new FormControl('');
   destroy$: Subject<boolean> = new Subject<boolean>();
@@ -25,22 +36,15 @@ export class AgeFilterComponent implements OnInit, OnDestroy {
 
     this.minAgeFormControl.valueChanges.pipe(
       takeUntil(this.destroy$),
-      debounceTime(300),
+      debounceTime(400),
       distinctUntilChanged()
     ).subscribe((age: number) => this.store.dispatch(new SetMinAge(age)));
 
     this.maxAgeFormControl.valueChanges.pipe(
       takeUntil(this.destroy$),
-      debounceTime(300),
+      debounceTime(400),
       distinctUntilChanged()
     ).subscribe((age: number) => this.store.dispatch(new SetMaxAge(age)));
-
-    this.resetFilter$.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(() => {
-        this.maxAgeFormControl.setValue(0);
-        this.minAgeFormControl.setValue(0);
-    })
   }
 
   ngOnDestroy(): void {

src/app/shared/components/filters-list/category-check-box/category-check-box.component.spec.ts

@@ -7,7 +7,6 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { of } from 'rxjs';
 
 describe('CategoryCheckBoxComponent', () => {
   let component: CategoryCheckBoxComponent;
@@ -32,7 +31,6 @@ describe('CategoryCheckBoxComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(CategoryCheckBoxComponent);
     component = fixture.componentInstance;
-    component.resetFilter$ = of()
     fixture.detectChanges();
   });
 

src/app/shared/components/filters-list/category-check-box/category-check-box.component.ts

@@ -22,7 +22,10 @@ export class CategoryCheckBoxComponent implements OnInit, OnDestroy {
   @Select(FilterState.directions)
   filterDirections$: Observable<Direction[]>;
 
-  @Input() resetFilter$: Observable<void>;
+  @Input()
+  set categoryCheckBox(filter) {
+    this.selectedDirections = filter;
+  };
 
   destroy$: Subject<boolean> = new Subject<boolean>();
 
@@ -35,24 +38,13 @@ export class CategoryCheckBoxComponent implements OnInit, OnDestroy {
   constructor(private store: Store) { }
 
   ngOnInit(): void {
+
     this.store.dispatch(new GetDirections());
 
     this.directions$.pipe(
       takeUntil(this.destroy$),
     ).subscribe(directions => this.allDirections = directions);
 
-    this.filterDirections$.pipe(
-      takeUntil(this.destroy$),
-    ).subscribe(directions => {
-      this.selectedDirections = directions});
-
-    this.resetFilter$.pipe(
-      takeUntil(this.destroy$)
-      ).subscribe(() => {
-          this.selectedDirections = [];
-          this.store.dispatch(new SetDirections(this.selectedDirections));
-    })
-
     this.directionSearch.valueChanges
       .pipe(
         takeUntil(this.destroy$),

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

@@ -1,9 +1,9 @@
 <div class="filters-wrapper">
   <button mat-raised-button class="resetFilter" (click)="onFilterReset()">Очистити Фільтри</button>
-  <app-category-check-box [resetFilter$]="resetFilter$"></app-category-check-box>
-  <app-age-filter [resetFilter$]="resetFilter$"></app-age-filter>
-  <app-working-hours [resetFilter$]="resetFilter$"></app-working-hours>
-  <app-price-filter [resetFilter$]="resetFilter$"></app-price-filter>
+  <app-category-check-box [categoryCheckBox]="categoryCheckBox"></app-category-check-box>
+  <app-age-filter [ageFilter]="ageFilter"></app-age-filter>
+  <app-working-hours [workingHours]="workingHours"></app-working-hours>
+  <app-price-filter [priceFilter]="priceFilter"></app-price-filter>
   <!-- <div class="check-boxes" fxLayout="column" fxLayoutAlign="start">
     <p class=" filter-text">Набір</p>
     <mat-checkbox color="primary" [formControl]="OpenRecruitmentControl">

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

@@ -35,7 +35,6 @@ describe('FiltersListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(FiltersListComponent);
     component = fixture.componentInstance;
-    component.resetFilter$ = of()
     fixture.detectChanges();
   });
 
@@ -55,31 +54,31 @@ class MockCityFilterComponent {}
   template: ''
 })
 class MockCategoryCheckBoxComponent {
-  @Input() resetFilter$: Observable<void>;
+  @Input() categoryCheckBox: {};
 }
 
 @Component({
   selector: 'app-age-filter',
   template: ''
 })
 class MockAgeFilterComponent {
-  @Input() resetFilter$: Observable<void>;
+  @Input() ageFilter: {};
 }
 
 @Component({
   selector: 'app-working-hours',
   template: ''
 })
 class MockWorkingHoursComponent {
-  @Input() resetFilter$: Observable<void>;
+  @Input() workingHours: {};
 }
 
 @Component({
   selector: 'app-price-filter',
   template: ''
 })
 class MockPriceFilterComponent {
-  @Input() resetFilter$: Observable<void>;
+  @Input() priceFilter: {};
 }
 
 

src/app/shared/components/filters-list/filters-list.component.ts

@@ -1,23 +1,42 @@
+import { SetWithDisabilityOption } from './../../store/filter.actions';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Store, Action, Actions, ofAction } from '@ngxs/store';
-import { Subject, Observable, of, BehaviorSubject } from 'rxjs';
+import { Store, Select } from '@ngxs/store';
+import { Subject} from 'rxjs';
 import { debounceTime, distinctUntilChanged, skip, takeUntil } from 'rxjs/operators';
-import { FilterChange, FilterReset, SetClosedRecruitment, SetOpenRecruitment, SetWithDisabilityOption } from '../../store/filter.actions';
+import { FilterChange, FilterClear, SetClosedRecruitment, SetOpenRecruitment } from '../../store/filter.actions';
+import { FilterState } from '../../store/filter.state';
 @Component({
   selector: 'app-filters-list',
   templateUrl: './filters-list.component.html',
   styleUrls: ['./filters-list.component.scss']
 })
 export class FiltersListComponent implements OnInit, OnDestroy {
-  @Input() resetFilter$: Observable<void>
+
+  @Select(FilterState.filterList)
+  @Input()
+  set filtersList(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})
+  };
+
+  public priceFilter;
+  public workingHours;
+  public categoryCheckBox;
+  public ageFilter;
+
+
   OpenRecruitmentControl = new FormControl(false);
   ClosedRecruitmentControl = new FormControl(false);
   WithDisabilityOptionControl = new FormControl(false);
 
   destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(private store: Store, private actions$: Actions) { }
+  constructor(private store: Store) { }
 
   ngOnInit(): void {
 
@@ -36,17 +55,10 @@ export class FiltersListComponent implements OnInit, OnDestroy {
         takeUntil(this.destroy$),
       ).subscribe((val: boolean) => this.store.dispatch(new SetWithDisabilityOption(val)));
 
-    this.resetFilter$
-      .pipe(
-        takeUntil(this.destroy$)
-    ).subscribe(() => {
-        this.WithDisabilityOptionControl.reset();
-    })
-
   }
 
   onFilterReset() {
-    this.store.dispatch([new FilterReset(), new FilterChange()])
+    this.store.dispatch([new FilterClear(), new FilterChange()])
   }
 
   ngOnDestroy(): void {

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

@@ -23,8 +23,8 @@
     </mat-form-field>
   </div>
   <div class="filter-slider" fxLayout='column' fxLayoutAlign='space-between' fxLayoutGap='1rem'>
-    <ngx-slider (valueChange)="minPriceControl.setValue($event)" (highValueChange)="maxPriceControl.setValue($event)"
+    <ngx-slider (userChange)="priceHandler($event)"
       [(value)]="minValue" [(highValue)]="maxValue" [options]="options">
     </ngx-slider>
   </div>
-</div>
+</div>

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

@@ -8,7 +8,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MinMaxDirective } from 'src/app/shared/directives/min-max.directive';
-import { of } from 'rxjs';
+
 
 describe('PriceFilterComponent', () => {
   let component: PriceFilterComponent;
@@ -36,7 +36,6 @@ describe('PriceFilterComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PriceFilterComponent);
     component = fixture.componentInstance;
-    component.resetFilter$ = of()
     fixture.detectChanges();
   });
 

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

@@ -1,18 +1,28 @@
+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 { Store } from '@ngxs/store';
-import { Subject } from 'rxjs';
+import { Select, Store } from '@ngxs/store';
+import { Observable, Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, filter, skip, takeUntil } from 'rxjs/operators';
 import { Constants } from 'src/app/shared/constants/constants';
 import { SetIsFree, SetMaxPrice, SetMinPrice } from 'src/app/shared/store/filter.actions';
+
 @Component({
   selector: 'app-price-filter',
   templateUrl: './price-filter.component.html',
   styleUrls: ['./price-filter.component.scss']
 })
 export class PriceFilterComponent implements OnInit, OnDestroy {
-  @Input() resetFilter$
+
+  @Input()
+  set priceFilter(filter) {
+    let {minPrice,maxPrice,isFree} = filter;
+    this.minPriceControl.setValue(minPrice,{emitEvent: false});
+    this.maxPriceControl.setValue(maxPrice,{emitEvent: false});
+    this.isFreeControl.setValue(isFree,{emitEvent: false});
+  };
+
   readonly constants: typeof Constants = Constants;
 
   isFreeControl = new FormControl(false);
@@ -33,24 +43,15 @@ export class PriceFilterComponent implements OnInit, OnDestroy {
    */
   ngOnInit(): void {
 
-    this.resetFilter$.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(() => {
-        this.maxPriceControl.setValue(0);
-        this.minPriceControl.setValue(0);
-        this.isFreeControl.reset();
-        this.minValue = 0;
-        this.maxValue= 0;
-    })
-
     this.isFreeControl.valueChanges.subscribe((val: boolean) => this.store.dispatch(new SetIsFree(val)));
+
     this.minPriceControl.valueChanges
       .pipe(
         takeUntil(this.destroy$),
         debounceTime(300),
         distinctUntilChanged(),
       ).subscribe((val: number) => {
-        val ? this.minValue = val : this.isFreeControl.setValue(!!this.minValue);
+        val ?  val : this.isFreeControl.setValue(!!this.minValue);
         this.store.dispatch(new SetMinPrice(val));
       });
 
@@ -60,9 +61,17 @@ export class PriceFilterComponent implements OnInit, OnDestroy {
         debounceTime(300),
         distinctUntilChanged()
       ).subscribe((val: number) => {
-        this.maxValue = val;
+
         this.store.dispatch(new SetMaxPrice(val));
       });
+
+  }
+
+
+
+  priceHandler(e) {
+    this.minPriceControl.setValue(e.value);
+    this.maxPriceControl.setValue(e.highValue);
   }
 
   ngOnDestroy(): void {

src/app/shared/components/filters-list/working-hours/working-hours.component.spec.ts

@@ -9,7 +9,6 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { NgxMatTimepickerModule } from 'ngx-mat-timepicker';
 import { MatButtonModule } from '@angular/material/button';
 import { MaterialModule } from 'src/app/shared/modules/material.module';
-import { of } from 'rxjs';
 
 describe('WorkingHoursComponent', () => {
   let component: WorkingHoursComponent;
@@ -38,7 +37,6 @@ describe('WorkingHoursComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(WorkingHoursComponent);
     component = fixture.componentInstance;
-    component.resetFilter$ = of()
     fixture.detectChanges();
   });