@kovalenko/base-filter NPM

BaseFilter

Install

npm i @kovalenko/base-filter

Setup

add import to polyfills.ts

import 'reflect-metadata';

Usage

Class `BaseFilter`

Protected static properties

string

class MyFilter extends BaseFilter {
  protected static readonly key = 't';
}

number[]

Constructor

number

Observable

Public properties

Observable

number

Public methods

Protected methods

Decorators

class MyFilter extends BaseFilter {
  protected static readonly key = 't';
}

https://path/to?param=true becomes {param: true}

https://path/to?param=test becomes {param: ['test']}

https://path/to?date=2020-10-10 becomes {param: Moment}

Class `QsHttpParams`

Class extending @angular/common/http/HttpParams to pass filter into angular http client.

this.http.get('api/v1/test', {params: new QsHttpParams(filter.toJSON())});

Example

Filter

import {BaseFilter} from '@kovalenko/base-filter';

export class TestFilter extends BaseFilter {
  @FilterProperty()
  title?: string;

  @FilterProperty()
  @TransformBoolean()
  hasParticipants?: boolean;

  @Type(() => Number)
  @TransformArray()
  @FilterProperty()
  campaign?: number[];

  @TransformMoment()
  @TransformArray()
  @FilterProperty((v: moment.Moment[]) => v?.map(ts => ts.format('YYYY-MM')))
  submittedAtFrom?: moment.Moment[];
}

Service

import type {TestFilter} from './test-filter';
import {QsHttpParams} from '@kovalenko/base-filter';

@Injectable()
export class PersonService {

  constructor(
    private http: HttpClient,
  ) { }

  list(flt: TestFilter): Observable<any> {
    return this.http.get('api/v1/test', {
      params: new QsHttpParams(flt.toJSON()),
    });
  }
}

Component

import {ActivatedRoute} from '@angular/router';
import {PersonService} from './person.service';
import {TestFilter} from './test-filter';

@Component({
  selector: 'some-component',
  template: 'hi',
})
export class ApplicationListComponent implements OnInit, OnDestroy {
  loading = false;

  filter = new TestFilter(100, this.route.queryParams);

  constructor(
    private route: ActivatedRoute,
    private personService: PersonService,
  ) { }

  ngOnInit(): void {
    this.filter.updated$.pipe(
      skip(1),
    ).subscribe(f => {
      this.router.navigate([], {
        queryParams: f.toQueryParams(),
        relativeTo: this.route,
        queryParamsHandling: 'merge',
      });
    });

    this.filter.query$.pipe(
      tap(() => this.loading = true),
      switchMap(f => this.personService.list(f)),
    ).subscribe();
  }
}