@appcarvers/ngx-unitelist/readme.md

This library is for Angular (2+) projects to build a list from passed data and provide pagination and filters and their callbacks after proper configuration.

# ngx-unitelist
 
This library is for Angular (2+) projects to build a list from passed data and provide pagination and filters and their callbacks after proper configuration.

## Installing

```shell
npm install @appcarvers/ngx-unitelist --save
```
To use pagination and filters of unitelist, you will also need to install few dependencies as listed below

```shell
npm install ngx-bootstrap --save
npm install ng2-select --save
```


## Implementation

Simply first import the module in your app.module.ts as shown below

```typescript
import { UniteModule } from '@appcarvers/ngx-unitelist/unite.module';
imports : [UniteModule]
```

Now, pass proper configuration so as to render pagination, filters, table-view. You will also get various callback like pageChanged and filterChanged so that you can update the data based on changes.

## Displying complete uniteList i.e. with pagination, filters, table
### Code in component.html

user.component.html
```html
<ngx-unite-sort [sortDataArray]='userSortArray' sortCoverClass='my-sorting-class' (sortChanged)='updateSort($event)'></ngx-unite-sort>
<ngx-unite-list
    [data]="usersData"
    [tableHeaders] = 'usersHeaders'
    [totalPages] = 'userTotalPages'
    [currentPage] = 'userCurrentPage'
    [filters] = 'userFilters'
    [searchBox] = 'true'
    (pageChanged)='checkPageChanged($event)'
    (filterChanged)='jobsFilterChanged($event)'
    (searchInput)='jobsSearched($event)'
    table-class='table-bordered table'
    filter-class='my-col col-xs-2'
    filter-cover-class='my-filters'
> </ngx-unite-list>
```
### Code in component.ts

user.component.ts
```typescript
import { Component, OnInit } from '@angular/core';
import { FakedataService } from '../fakedata.service';

@Component({
selector: 'app-userlist',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.css'],
providers : [FakedataService]
})
export class UserlistComponent implements OnInit {

    usersData;
    usersHeaders;
    userTotalPages;
    userCurrentPage;
    userFilters;
    userSortArray;

    constructor(private _fService : FakedataService) { }

    ngOnInit() {
        this.userSortArray = [
                            {name : 'sort-1', label : 'Sort 1 new'},
                            {name : 'sort-2', label : 'Sort 2 new'},
                            {name : 'sort-3', label : 'Sort 3 new'},
                            {name : 'sort-4', label : 'Sort 4 new'},
                          ];

        this.usersHeaders = [
                                {label : "Id", identifier : ['id']},
                                {label : "Name", identifierCombo : [['first_name'],['last_name']]},
                                {label : "Avatar", identifier : ['avatar'], displayType : 'image'}
                            ];

        this.userFilters =  [
                                {
                                    label     : 'Filter 1',
                                    name  : 'filter-1',
                                    options   : [{id: 'a', text: 'Alpha'},{id: 'b', text: 'Beta'},{id: 'c', text: 'Gamma'},]
                                },
                                {
                                    label : 'Filter 2',
                                    name : 'filter-2',
                                    options : [{id: 'a', text: 'xyz'},{id: 'b', text: 'abc'},{id: 'c', text: 'syz'},]
                                } 
                            ];

        this.loadUsers();
    }

    loadUsers(pageNo? : number){
        this._fService.getUsers(pageNo).subscribe(usersData => {
        this.usersData      = usersData['data'];
        this.userTotalPages = usersData['total_pages'];
        this.userCurrentPage = usersData['page'];
        console.log(usersData);
        });
    }

    checkPageChanged(e){
        if(typeof e.newPage === 'number')
        {
            this.loadUsers(e.newPage);
        }
    }

    checkFilterChanged(e){
        console.log('filter changed event captuire ', e);
    }

    updateSort(e){
        console.log("change event ", e);
    }
}

```


## Displying Pagination separately without unitelist or filters
### Code in component.html

user.component.html
```html
<ngx-unite-pagination
    [totalPages] = 'userTotalPages'
    [currentPage] = 'userCurrentPage'
    (pageChanged)='checkPageChanged($event)'
> </ngx-unite-pagination>
```
### Code in component.ts

user.component.ts
```typescript
import { Component, OnInit } from '@angular/core';
import { FakedataService } from '../fakedata.service';

@Component({
selector: 'app-userlist',
templateUrl: './userlist.component.html',
styleUrls: ['./userlist.component.css'],
providers : [FakedataService]
})
export class UserlistComponent implements OnInit {

    userTotalPages;
    userCurrentPage;

    constructor(private _fService : FakedataService) { }

    ngOnInit() {
        this.loadUsers();
    }

    loadUsers(pageNo? : number){
        this._fService.getUsers(pageNo).subscribe(usersData => {
            this.userTotalPages = usersData['total_pages'];
            this.userCurrentPage = usersData['page'];
            console.log(usersData);
        });
    }

    checkPageChanged(e){
        if(typeof e.newPage === 'number')
        {
            this.loadUsers(e.newPage);
        }
    }

}

```

## Releases
### v.0.1.10
  - Documentation for UnitSort updated

### v.0.1.9
  - UnitSort compoment to give power for sorting
  - Flexibility to provide custom class to filter cover div 

### v.0.1.8
  - Pagination bug fixes.(https://github.com/appcarvers/ngx-unite-list/issues/1, https://github.com/appcarvers/ngx-unite-list/issues/4)

### v.0.1.7
  - Added Cancel button for date filters.

### v.0.1.6
  - Pagination bug fixes.

### v.0.1.5
  - Pagination page-numbers are now limited to display only 10 pages at once if there are more.
  - Pagination : First, previous, next, last buttons will now update the pagenumber out of box.

### v.0.1.4
  - Bug Fixes

### v.0.1.3
  - Bug Fixes

### v.0.1.2
  - Seperate attribute to assign class for search-box viz. **searchbox-class**.
  - Removed margin from pagination.


### Docs in progress