@appcarvers/ngx-unitelist

    0.1.10 • Public • Published

    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

    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

    Install

    npm i @appcarvers/ngx-unitelist

    DownloadsWeekly Downloads

    110

    Version

    0.1.10

    License

    LGPL-3.0

    Last publish

    Collaborators

    • syruz
    • coolbung