import { Component , Input , OnDestroy , OnInit , TemplateRef , ViewChild } from '@angular/core' ; import { ReplaySubject } from 'rxjs' ; import { CollectionParameters } from '../../../../services/models/api-parameter' ; import { Column , Sort , SortDirection } from '../../../../layout/table/table.types' ; import { takeUntil } from 'rxjs/operators' ; import { APIGetMultiResponse } from '../../../../services/models/api-response' ; import { GroupService } from '../../../services/group.service' ; import { Group } from 'src/app/management/models/group' ; @ Component ( { selector : 'cmdb-group-table-list' , templateUrl : './group-table-list.component.html' , styleUrls : [ './group-table-list.component.scss' ] } ) export class GroupTableListComponent implements OnInit , OnDestroy { private private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Table Template: Group users column.
     */ @ ViewChild ( 'usersTemplate' , { static : true } ) public usersTemplate : TemplateRef < any > ; /**
     * Collection params
     */ public params : CollectionParameters = { filter : undefined , limit : 10 , sort : 'public_id' , order : 1 , page : 1 } ; public columns : Array < Column > = [ ] ; public totalGroups : 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 ; /**
     * Groups
     */ public groups : Array < Group > = [ ] ; constructor ( private groupService ) { } public ngOnInit ( ) { this . columns = [ { display : 'Public ID' , name : 'public_id' , data : 'public_id' , searchable : true , sortable : true } , { display : 'Name' , name : 'name' , data : 'name' , searchable : true , sortable : true } , { display : 'Label' , name : 'label' , data : 'label' , searchable : true , sortable : true } , { display : 'Users' , name : 'users' , data : 'public_id' , searchable : false , sortable : false , fixed : true , template : this . usersTemplate , cssClasses : [ 'text-center' ] } ] as Array < Column > ; this . loadGroupsFromApi ( ) ; } private loadGroupsFromApi ( ) { this . loading = true ; this . groupService . getGroups ( this . params ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( response ) => { this . groups = response . results as Array < Group > ; this . totalGroups = response . total ; this . loading = false ; } ) ; } param page public onPageChange ( page ) { this . params . page = page ; this . loadGroupsFromApi ( ) ; } param limit public onPageSizeChange ( limit ) { this . params . limit = limit ; this . loadGroupsFromApi ( ) ; } param sort public onSortChange ( sort ) { this . sort = sort ; this . params . sort = sort . name ; this . params . order = sort . order ; this . loadGroupsFromApi ( ) ; } /**
     * On destroying the group component,
     * auto unsubscribe the api subscriptions.
     */ public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }