import { Component , Input , OnDestroy , OnInit } from '@angular/core' ; import { Column , Sort , SortDirection } from '../../../../layout/table/table.types' ; import { User } from '../../../models/user' ; import { ReplaySubject } from 'rxjs' ; import { CollectionParameters } from '../../../../services/models/api-parameter' ; import { takeUntil } from 'rxjs/operators' ; import { APIGetMultiResponse } from '../../../../services/models/api-response' ; import { UserService } from '../../../services/user.service' ; @ Component ( { selector : 'cmdb-user-table-list' , templateUrl : './user-table-list.component.html' , styleUrls : [ './user-table-list.component.scss' ] } ) export class UserTableListComponent implements OnInit , OnDestroy { private private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Collection params
     */ public params : CollectionParameters = { filter : undefined , limit : 10 , sort : 'public_id' , order : 1 , page : 1 } ; public columns : Array < Column > = [ ] ; public totalUsers : number ; @ Input ( 'filter' ) public set Filter ( filter ) { this . params . filter = filter ; } /**
     * Table loading?
     */ public loading : boolean = false ; /**
     * Default sort parameter
     */ public sort : Sort = { name : 'public_id' , order : SortDirection . DESCENDING } as Sort ; /**
     * Users
     */ public users : Array < User > = [ ] ; constructor ( private userService ) { } public ngOnInit ( ) { this . columns = [ { display : 'Public ID' , name : 'public_id' , data : 'public_id' , searchable : true , sortable : true } , { display : 'Username' , name : 'user_name' , data : 'user_name' , searchable : true , sortable : true } , { display : 'Firstname' , name : 'first_name' , data : 'first_name' , searchable : true , sortable : true } , { display : 'Lastname' , name : 'last_name' , data : 'last_name' , searchable : true , sortable : true } ] as Array < Column > ; this . loadUsersFromApi ( ) ; } private loadUsersFromApi ( ) { this . loading = true ; this . userService . getUsers ( this . params ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( response ) => { this . users = response . results as Array < User > ; this . totalUsers = response . total ; this . loading = false ; } ) ; } param page public onPageChange ( page ) { this . params . page = page ; this . loadUsersFromApi ( ) ; } param limit public onPageSizeChange ( limit ) { this . params . limit = limit ; this . loadUsersFromApi ( ) ; } param sort public onSortChange ( sort ) { this . sort = sort ; this . params . sort = sort . name ; this . params . order = sort . order ; this . loadUsersFromApi ( ) ; } /**
     * On destroying the group component,
     * auto unsubscribe the api subscriptions.
     */ public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }