- Vicoders Angular Common Module
- Install
- How to use
- Pipes
- hasItem
- isArray
- length
- orderBy
- sumBy
- timeFormat
- Directives
- custom-selection
- length-aware-paginator
- per-page
- search-form
- sort-by-field
- Use Activity Log Component

Vicoders Angular Common Module

Install

Download package form npm

``
yarn add @vicoders/angular
`

or

`
npm install @vicoders/angular
`

How to use

$3

@NgModule({
declarations: [AppComponent],
imports: [PipesModule]
})
export class YourModule {}
`

#### hasItem
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
`

`html


#### isArray
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
`

`html


#### length
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
`

`html


#### orderBy
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
`

`html


#### sumBy
`javascript
export class Component {
public products = [
{
id: 1,
name: 'Laptop',
price: 2000
},
{
id: 2,
name: 'Mobile',
price: 1000
}
];
}
`

`html


#### timeFormat
`javascript
export class Component {
public birth_date = '2018-01-30';
}
`

`html


@NgModule({
declarations: [AppComponent],
imports: [DirectivesModule]
})
export class YourModule {}
`

#### custom-selection
`javascript
export class Component {
public UserStatus = [
{
label: 'Pending',
value: 1
},
{
label: 'Activated',
value: 2
},
{
label: 'Banned',
value: 3
},
{
label: 'Deleted',
value: 4
}
];

public users = [
{
id: 1,
name: 'Andy',
status: 1
},
{
id: 1,
name: 'John',
status: 2
}
];

changeUserStatus(user) {
console.log('changeUserStatus ', user);
}
}
`

`html


#### length-aware-paginator
`javascript
import { ApiService } from '../../../api/api.service';
import { HttpClient, HttpParams } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import User from '../../../models/User';
import LengthAwarePaginator from '../../../models/LengthAwarePaginator';

export class Component {
public fetched = false;
public pagination;

constructor(private router: Router, private api: ApiService, private http: HttpClient) {
const url = 'https://vinaco.local/api/admin/users';
this.getUsers(url, { per_page: 2, page: 1 }).subscribe(
response => {
this.fetched = true;
this.pagination = response.pagination;
},
error => {
throw error;
}
);
}

getUsers(url, params: {}) {
const queryParams = new HttpParams({ fromObject: params });
return this.http.get(url, { params: queryParams }).pipe(
map(result =>
_.assign(
{},
{
items: (result as any).data.map(item => new User(item)),
pagination: new LengthAwarePaginator((result as any).meta.pagination)
}
)
),
catchError(error => {
throw error;
})
);
}
}
`

`html

`

#### per-page
`html

`

#### search-form
`html

`

#### sort-by-field
`javascript
export class Component {
public users = [
{
id: 1,
name: 'Tony'
},
{
id: 1,
name: 'John'
}
]
}
`

`html


`javascript
import { VicodersActivityLogModule } from "@vicoders/angular";

@NgModule({
declarations: [AppComponent],
imports: [VicodersActivityLogModule]
})
export class YourModule {}
`

`javascript
export class Component {
public activity_logs = {
fetched: true,
items: [
{
id: 1,
event: 'UserCreated',
description: 'Người dùng đăng nhập với email: admin@vicoders.com',
timestamps: {
created_at: {
date: '2018-12-11 10:15:02.000000',
timezone: 'UTC',
timezone_type: 3
}
}
},
{
id: 2,
event: 'UserLoggedIn',
description: 'Người dùng đăng nhập với email: admin@vicoders.com',
timestamps: {
created_at: {
date: '2018-12-11 10:15:02.000000',
timezone: 'UTC',
timezone_type: 3
}
}
}
]
};
}
`

`html
[(activity_log_data)]="activity_logs"
>
``