diff --git a/.gitignore b/.gitignore index 3a766638..ed7a826c 100644 --- a/.gitignore +++ b/.gitignore @@ -19,6 +19,7 @@ coverage/ .c9/ *.launch .settings/ +ng-pipes.iml # misc /.sass-cache diff --git a/README.md b/README.md index 0558457e..1120d775 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ -# Angular Pipes -[![npm](https://img.shields.io/npm/v/ng2-pipes.svg?style=flat-square)](https://www.npmjs.com/package/ng2-pipes) [![Travis](https://img.shields.io/travis/danrevah/ng-pipes.svg?style=flat-square)](https://travis-ci.org/danrevah/ng-pipes) [![Coveralls](https://img.shields.io/coveralls/danrevah/ng-pipes.svg?style=flat-square)](https://coveralls.io/github/danrevah/ng-pipes?branch=master) [![npm](https://img.shields.io/npm/dt/ng2-pipes.svg?style=flat-square)](https://www.npmjs.com/package/ng2-pipes) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/danrevah/ng-pipes/blob/master/LICENSE.md) +# ngx-pipes +[![npm](https://img.shields.io/npm/v/ngx-pipes.svg?style=flat-square)](https://www.npmjs.com/package/ngx-pipes) [![Travis](https://img.shields.io/travis/danrevah/ngx-pipes.svg?style=flat-square)](https://travis-ci.org/danrevah/ngx-pipes) [![Coveralls](https://img.shields.io/coveralls/danrevah/ngx-pipes.svg?style=flat-square)](https://coveralls.io/github/danrevah/ngx-pipes?branch=master) [![npm](https://img.shields.io/npm/dt/ng2-pipes.svg?style=flat-square)](https://www.npmjs.com/package/ng2-pipes) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/danrevah/ng-pipes/blob/master/LICENSE.md) -> Useful pipes for Angular 2+ with no external dependencies! +> Useful pipes for Angular 2 and beyond with no external dependencies! ## Table of contents @@ -55,6 +55,7 @@ - [Math](#math) - [min](#min) - [max](#max) + - [sum](#sum) - [percentage](#percentage) - [ceil](#ceil) - [floor](#floor) @@ -88,13 +89,13 @@ 1. Use npm to install the package ```terminal - $ npm install ng2-pipes --save + $ npm install ngx-pipes --save ``` 2. You could either add into your module `imports` the `NgPipesModule` in order to add all of the pipes, Or add a specific module such as `NgArrayPipesModule`, `NgObjectPipesModule`, `NgStringPipesModule`, `NgMathPipesModule` or `NgBooleanPipesModule`. ```typescript - import {NgPipesModule} from 'ng2-pipes'; + import {NgPipesModule} from 'ngx-pipes'; @NgModule({ // ... @@ -108,7 +109,7 @@ 3. Pipes are also injectable and can be used in Components / Services / etc.. ```typescript - import {ReversePipe} from 'ng2-pipes/src/app/pipes/array/reverse'; + import {ReversePipe} from 'ngx-pipes/src/app/pipes/array/reverse'; @Component({ // .. diff --git a/package.json b/package.json index 33a58043..94d2669e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "ng2-pipes", - "version": "1.1.0", + "name": "ngx-pipes", + "version": "1.1.3", "author": "Dan Revah", "description": "Useful angular2 pipes", "license": "MIT", @@ -27,7 +27,7 @@ ], "repository": { "type": "git", - "url": "https://github.com/danrevah/ng-pipes.git" + "url": "https://github.com/danrevah/ngx-pipes.git" }, "devDependencies": { "@angular/common": "^2.1.0", diff --git a/src/app/pipes/array/filter-by.spec.ts b/src/app/pipes/array/filter-by.spec.ts new file mode 100644 index 00000000..79aec1e3 --- /dev/null +++ b/src/app/pipes/array/filter-by.spec.ts @@ -0,0 +1,62 @@ +import {FilterByPipe} from './filter-by'; + +describe('FilterByPipe', () => { + let pipe: FilterByPipe; + + const users = [ + {id: 1, first_name: 'John', last_name: 'Doe', work: { title: 'Software Engineer', company: 'Foo Tech', previous_company: 'Unknown' }}, + {id: 2, first_name: 'Jane', last_name: 'West', work: { title: 'Designer', company: 'AAA Solutions', previous_company: 'Unknown' }}, + {id: 3, first_name: 'Bruce', last_name: 'John', work: { title: 'Software Engineer', company: 'Bar Tech', previous_company: 'Unknown' }}, + {id: 4, first_name: 'William', last_name: 'Cent', work: { title: 'Designer', company: 'Foo Tech', previous_company: 'Bar Tech' }} + ]; + + beforeEach(() => { + pipe = new FilterByPipe(); + }); + + it('should not do anything in-case of not an array', () => { + expect(pipe.transform('foo', [''], '')).toEqual('foo'); + expect(pipe.transform(null, [''], '')).toEqual(null); + expect(pipe.transform(undefined, [''], '')).toEqual(undefined); + expect(pipe.transform(42, [''], '')).toEqual(42); + expect(pipe.transform({foo: 1, bar: 2}, [''], '')).toEqual({foo: 1, bar: 2}); + }); + + it('should filter by single field with a single result', () => { + const filtered = pipe.transform(users, ['id'], 1); + + expect(filtered.length).toEqual(1); + expect(filtered[0]).toEqual(users[0]); + }); + + it('should filter by multiple fields with a two result', () => { + const filtered = pipe.transform(users, ['first_name', 'last_name'], 'John'); + + expect(filtered.length).toEqual(2); + expect(filtered[0]).toEqual(users[0]); + expect(filtered[1]).toEqual(users[2]); + }); + + it('should filter by nested field with a single result', () => { + const filtered = pipe.transform(users, ['work.company'], 'Bar Tech'); + + expect(filtered.length).toEqual(1); + expect(filtered[0]).toEqual(users[2]); + }); + + it('should filter by nested field with a multiple result', () => { + const filtered = pipe.transform(users, ['work.title'], 'Designer'); + + expect(filtered.length).toEqual(2); + expect(filtered[0]).toEqual(users[1]); + expect(filtered[1]).toEqual(users[3]); + }); + + it('should filter by multiple nested field with a multiple result', () => { + const filtered = pipe.transform(users, ['work.company', 'work.previous_company'], 'Bar Tech'); + + expect(filtered.length).toEqual(2); + expect(filtered[0]).toEqual(users[2]); + expect(filtered[1]).toEqual(users[3]); + }); +}); diff --git a/src/app/pipes/array/filter-by.ts b/src/app/pipes/array/filter-by.ts new file mode 100644 index 00000000..03ebc9d9 --- /dev/null +++ b/src/app/pipes/array/filter-by.ts @@ -0,0 +1,18 @@ +import {PipeTransform, Pipe} from '@angular/core'; +import GeneralHelper from '../helpers/helpers'; + +@Pipe({name: 'filterBy'}) +export class FilterByPipe implements PipeTransform { + + transform(arr: any, props: Array, search: any): any[] { + if (!Array.isArray(arr)) { + return arr; + } + + return arr.filter((obj) => { + return props.some((prop) => + search === GeneralHelper.extractDeepPropertyByMapKey(obj, prop) + ); + }); + } +} diff --git a/src/app/pipes/array/index.ts b/src/app/pipes/array/index.ts index 89291a9c..8cf2e1b3 100644 --- a/src/app/pipes/array/index.ts +++ b/src/app/pipes/array/index.ts @@ -1,25 +1,26 @@ -import { DiffPipe } from './diff'; -import { InitialPipe } from './initial'; -import { FlattenPipe } from './flatten'; -import { IntersectionPipe } from './intersection'; -import { ReversePipe } from './reverse'; -import { TailPipe } from './tail'; -import { TrurthifyPipe } from './truthify'; -import { UnionPipe } from './union'; -import { UniquePipe } from './unique'; -import { WithoutPipe } from './without'; -import { PluckPipe } from './pluck'; -import { ShufflePipe } from './shuffle'; -import { EveryPipe } from './every'; -import { SomePipe } from './some'; -import { SamplePipe } from './sample'; -import { GroupByPipe } from './group-by'; -import { NgModule } from '@angular/core'; +import {DiffPipe} from './diff'; +import {InitialPipe} from './initial'; +import {FlattenPipe} from './flatten'; +import {IntersectionPipe} from './intersection'; +import {ReversePipe} from './reverse'; +import {TailPipe} from './tail'; +import {TrurthifyPipe} from './truthify'; +import {UnionPipe} from './union'; +import {UniquePipe} from './unique'; +import {WithoutPipe} from './without'; +import {PluckPipe} from './pluck'; +import {ShufflePipe} from './shuffle'; +import {EveryPipe} from './every'; +import {SomePipe} from './some'; +import {SamplePipe} from './sample'; +import {GroupByPipe} from './group-by'; +import {FilterByPipe} from './filter-by'; +import {NgModule} from '@angular/core'; const ARRAY_PIPES = [ DiffPipe, FlattenPipe, InitialPipe, IntersectionPipe, ReversePipe, TailPipe, TrurthifyPipe, UnionPipe, UniquePipe, WithoutPipe, PluckPipe, ShufflePipe, - EveryPipe, SomePipe, SamplePipe, GroupByPipe + EveryPipe, SomePipe, SamplePipe, GroupByPipe, FilterByPipe ]; @NgModule({ @@ -27,7 +28,8 @@ const ARRAY_PIPES = [ imports: [], exports: ARRAY_PIPES }) -export class NgArrayPipesModule {} +export class NgArrayPipesModule { +} export * from './diff'; export * from './initial'; @@ -45,3 +47,4 @@ export * from './every'; export * from './some'; export * from './sample'; export * from './group-by'; +export * from './filter-by';