[Filter Side Nav] - refactoring and style fix (#1299)

* FIX

* Update app.component.ts

* Update category-check-box.component.html

* Update sidenav-filters.component.ts

* Update ordering.component.ts

* Update result.component.ts

* test fix

* Update filters-list.component.spec.ts

* Update price-filter.component.ts

src/app/app.component.html

@@ -5,6 +5,7 @@
     <div fxLayout="column">
       <div class="content">
         <app-sidenav [isMobileView]="isMobileView"></app-sidenav>
+        <app-sidenav-filters [isMobileView]="isMobileView"></app-sidenav-filters>
         <app-header></app-header>
         <app-shell></app-shell>
       </div>

src/app/app.component.spec.ts

@@ -18,7 +18,8 @@ describe('AppComponent', () => {
         MockHeaderComponent,
         MockShellComponent,
         MockFooterComponent,
-        MockSidenavComponent
+        MockSidenavComponent,
+        MockSidenavFilterComponent
       ],
     }).compileComponents();
   });
@@ -57,3 +58,11 @@ class MockFooterComponent{}
 class MockSidenavComponent{
   @Input() isMobileView: boolean;
 }
+
+@Component({
+  selector: 'app-sidenav-filters',
+  template: ''
+})
+class MockSidenavFilterComponent{
+  @Input() isMobileView: boolean;
+}

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

@@ -1,4 +1,4 @@
-<div class="wrapper" [ngClass]="(isMobileScreen$ | async) ? 'wrapper-full-width' : ''">
+<div [ngClass]="{'wrapper-full-width': (isMobileScreen$ | async)}">
   <p class="filter-text">Напрямки</p>
   <div class="search-bar" fxLayout="row" fxLayoutAlign="space-evenly center">
     <button mat-stroked-button>

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

@@ -1,21 +1,20 @@
-.wrapper{
-  width: 70%;
-}
 .wrapper-full-width {
   width: 100%;
 }
 .search-bar {
-background: #FFFFFF;
-border: 1px solid #FFFFFF;
-box-sizing: border-box;
-border-radius: 60px;
-margin: 1rem 0;
-box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
+  background: #FFFFFF;
+  border: 1px solid #FFFFFF;
+  box-sizing: border-box;
+  border-radius: 60px;
+  box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.08);
+  margin: 1rem 0.5rem;
 }
 .list-wrapper{
   max-height: 200px;
+  width: 80%;
   overflow: auto;
   position:relative;
+  margin: 0 0.5rem;
 }
 .list {
   list-style-type: none;

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

@@ -1,19 +1,19 @@
-<div class="filters-wrapper">
+<div [ngClass]="isMobileView ?  'side-nav-filter' : 'filters-wrapper'">
   <div fxLayout="row" fxLayoutAlign="space-between">
     <button mat-raised-button class="resetFilter" (click)="onFilterReset()">
       <mat-icon class="matFilter">delete_forever</mat-icon>
       Очистити фільтри
     </button>
-    <ng-container *ngIf="isMobileScreen$ | async">
+    <ng-container *ngIf="isMobileView">
       <button mat-button (click)="changeView()">
         <mat-icon>close</mat-icon>
       </button>
     </ng-container>
   </div>
-  <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>
+  <app-category-check-box [categoryCheckBox]="filterList.categoryCheckBox"></app-category-check-box>
+  <app-age-filter [ageFilter]="filterList.ageFilter"></app-age-filter>
+  <app-working-hours [workingHours]="filterList.workingHours"></app-working-hours>
+  <app-price-filter [priceFilter]="filterList.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.scss

@@ -1,12 +1,15 @@
 .filters-wrapper{
   width: 302px;
 }
+.side-nav-filter {
+  width: 100%;
+}
 .search-bar {
-background: #FFFFFF;
-padding:0 1rem;
-border: 1px solid #FFFFFF;
-box-sizing: border-box;
-border-radius: 60px;
+  background: #FFFFFF;
+  padding:0 1rem;
+  border: 1px solid #FFFFFF;
+  box-sizing: border-box;
+  border-radius: 60px;
 }
 .list {
   list-style-type: none;

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

@@ -36,7 +36,6 @@ describe('FiltersListComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(FiltersListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
   it('should create', () => {

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

@@ -2,75 +2,59 @@ 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 { Observable, Subject} from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FilterChange, FilterClear, SetClosedRecruitment, SetOpenRecruitment } from '../../store/filter.actions';
 import { FilterState } from '../../store/filter.state';
-import { AppState } from '../../store/app.state';
 import { FiltersSidenavToggle } from '../../store/navigation.actions';
 @Component({
   selector: 'app-filters-list',
   templateUrl: './filters-list.component.html',
-  styleUrls: ['./filters-list.component.scss']
+  styleUrls: ['./filters-list.component.scss'],
 })
 export class FiltersListComponent implements OnInit, OnDestroy {
-
-  @Select(AppState.isMobileScreen)
-  isMobileScreen$: Observable<boolean>;
   @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 });
-  };
+  filterList$: Observable<any>;
+  filterList;
 
-  public priceFilter;
-  public workingHours;
-  public categoryCheckBox;
-  public ageFilter;
+  @Input() isMobileView: boolean;
 
   OpenRecruitmentControl = new FormControl(false);
   ClosedRecruitmentControl = new FormControl(false);
   WithDisabilityOptionControl = new FormControl(false);
-
   destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(private store: Store) { }
+  constructor(private store: Store) {}
 
   ngOnInit(): void {
+    this.filterList$.pipe(takeUntil(this.destroy$)).subscribe(filterList => {
+      this.filterList = filterList;
+      this.WithDisabilityOptionControl.setValue(filterList.withDisabilityOption, { emitEvent: false });
+    });
 
     this.OpenRecruitmentControl.valueChanges
-      .pipe(
-        takeUntil(this.destroy$),
-      ).subscribe((val: boolean) => this.store.dispatch(new SetOpenRecruitment(val)));
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((val: boolean) => this.store.dispatch(new SetOpenRecruitment(val)));
 
     this.ClosedRecruitmentControl.valueChanges
-      .pipe(
-        takeUntil(this.destroy$),
-      ).subscribe((val: boolean) => this.store.dispatch(new SetClosedRecruitment(val)));
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((val: boolean) => this.store.dispatch(new SetClosedRecruitment(val)));
 
     this.WithDisabilityOptionControl.valueChanges
-      .pipe(
-        takeUntil(this.destroy$),
-      ).subscribe((val: boolean) => this.store.dispatch(new SetWithDisabilityOption(val)));
-
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((val: boolean) => this.store.dispatch(new SetWithDisabilityOption(val)));
   }
 
   changeView(): void {
     this.store.dispatch(new FiltersSidenavToggle());
   }
 
   onFilterReset(): void {
-    this.store.dispatch([new FilterClear(), new FilterChange()])
+    this.store.dispatch([new FilterClear(), new FilterChange()]);
   }
 
   ngOnDestroy(): void {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();
   }
-
 }

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

@@ -60,8 +60,14 @@ export class PriceFilterComponent implements OnInit, OnDestroy {
         debounceTime(300),
         distinctUntilChanged(),
       ).subscribe((val: boolean) => {
-        this.store.dispatch(new SetIsPaid(val));
         const func = val ? 'enable' : 'disable';
+        if(!val) {
+          this.store.dispatch([
+            new SetMinPrice(ValidationConstants.MIN_PRICE),
+            new SetMaxPrice(ValidationConstants.MAX_PRICE)
+          ]);
+        }
+        this.store.dispatch(new SetIsPaid(val));
         this.minPriceControl[func]();
         this.maxPriceControl[func]();
         this.options = this.getSliderOprions(!val)

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

@@ -1,3 +1,3 @@
-<mat-drawer class="mobile-sidenav" mode="side" [(opened)]="visibleFiltersSidenav" *ngIf="isMobileView">
-  <app-filters-list [filtersList]="filtersList"></app-filters-list>
+<mat-drawer class="mobile-sidenav" mode="side" *ngIf="isMobileView" [(opened)]="visibleFiltersSidenav">
+  <app-filters-list [isMobileView]="isMobileView"></app-filters-list>
 </mat-drawer>

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

@@ -35,5 +35,5 @@ describe('SidenavFiltersComponent', () => {
   template: ''
 })
 class MockFiltersListComponent {
-  @Input() filtersList;
+  @Input() isMobileView;
 }

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Select, Store } from '@ngxs/store';
+import { Select } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { NavigationState } from 'src/app/shared/store/navigation.state';
@@ -10,20 +10,17 @@ import { NavigationState } from 'src/app/shared/store/navigation.state';
   styleUrls: ['./sidenav-filters.component.scss']
 })
 export class SidenavFiltersComponent implements OnInit {
-
-  @Input() isMobileView: boolean;
-  @Input() filtersList;
-
   @Select(NavigationState.filtersSidenavOpenTrue)
   filtersSidenavOpenTrue$: Observable<boolean>;
-
   visibleFiltersSidenav: boolean;
+
+  @Input() isMobileView: boolean;
+
   destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(public store: Store) { }
+  constructor() { }
 
-  ngOnInit(): void {
-
+  ngOnInit(): void {    
     this.filtersSidenavOpenTrue$
       .pipe(takeUntil(this.destroy$))
       .subscribe(visible => this.visibleFiltersSidenav = visible);
@@ -33,5 +30,4 @@ export class SidenavFiltersComponent implements OnInit {
     this.destroy$.next(true);
     this.destroy$.unsubscribe();
   }
-
 }

src/app/shell/result/ordering/ordering.component.ts

@@ -1,40 +1,37 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { MatSelectChange } from '@angular/material/select';
-import { Actions, Store } from '@ngxs/store';
+import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { Constants } from 'src/app/shared/constants/constants';
 import { Ordering } from 'src/app/shared/enum/ordering';
 import { SetOrder } from 'src/app/shared/store/filter.actions';
+import { FilterState } from 'src/app/shared/store/filter.state';
 
 @Component({
   selector: 'app-ordering',
   templateUrl: './ordering.component.html',
-  styleUrls: ['./ordering.component.scss']
+  styleUrls: ['./ordering.component.scss'],
 })
-
 export class OrderingComponent implements OnInit {
+  readonly ordering = Ordering;
 
-  @Input()
-  set order(rating) {
-    this.orderFormControl.setValue(rating, {emitEvent: false});
-  };
-
-  readonly ordering: typeof Ordering = Ordering;
+  @Select(FilterState.filterList)
+  filterList$: Observable<any>;
 
-  selectedOption: string;
   orderFormControl = new FormControl();
   destroy$: Subject<boolean> = new Subject<boolean>();
-  constructor(private store: Store) { }
 
-  ngOnInit(): void {
+  constructor(private store: Store) {}
 
+  ngOnInit(): void {
+    this.filterList$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(filters => this.orderFormControl.setValue(filters.order, { emitEvent: false }));
   }
 
   OnSelectOption(event: MatSelectChange): void {
-    this.selectedOption = event.value;
-    this.store.dispatch(new SetOrder(this.selectedOption))
+    this.store.dispatch(new SetOrder(event.value));
   }
 
   ngOnDestroy() {