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

npm install @appcarvers/ngx-unitelist --save

To use pagination and filters of unitelist, you will also need to install few dependencies as listed below

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

Implementation

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

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

<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

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

<ngx-unite-pagination
    [totalPages] = 'userTotalPages'
    [currentPage] = 'userCurrentPage'
    (pageChanged)='checkPageChanged($event)'
> </ngx-unite-pagination>

Code in component.ts

user.component.ts

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.(#1, #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