import { Component , EventEmitter , Input , OnDestroy , OnInit , Output , TemplateRef , ViewChild } from '@angular/core' ; import { CmdbLog } from '../../../../framework/models/cmdb-log' ; import { Column , Sort , SortDirection , TableState , TableStatePayload } from '../../../../layout/table/table.types' ; import { CollectionParameters } from '../../../../services/models/api-parameter' ; import { LogService } from '../../../../framework/services/log.service' ; import { APIGetMultiResponse } from '../../../../services/models/api-response' ; import { DatePipe } from '@angular/common' ; import { TableComponent } from '../../../../layout/table/table.component' ; import { BehaviorSubject , ReplaySubject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { ActivatedRoute , Data , Router } from '@angular/router' ; import { UserSetting } from '../../../../management/user-settings/models/user-setting' ; import { convertResourceURL , UserSettingsService } from '../../../../management/user-settings/services/user-settings.service' ; import { FileSaverService } from 'ngx-filesaver' ; import { FileService } from '../../../../export/export.service' ; import { UserSettingsDBService } from '../../../../management/user-settings/services/user-settings-db.service' ; @ Component ( { selector : 'cmdb-deactivate-tab' , templateUrl : './deactivate-tab.component.html' , styleUrls : [ './deactivate-tab.component.scss' ] } ) export class DeactivateTabComponent implements OnInit , OnDestroy { @ Output ( ) deleteEmitter = new EventEmitter < number > ( ) ; @ Output ( ) cleanUpEmitter = new EventEmitter < number [ ] > ( ) ; /**
     * Component un-subscriber.
     */ private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Table component.
     */ @ ViewChild ( TableComponent ) objectsTableComponent : TableComponent < CmdbLog > ; @ ViewChild ( 'dateTemplate' , { static : true } ) dateTemplate : TemplateRef < any > ; @ ViewChild ( 'actionTemplate' , { static : true } ) actionTemplate : TemplateRef < any > ; @ ViewChild ( 'dataTemplate' , { static : true } ) dataTemplate : TemplateRef < any > ; @ ViewChild ( 'changeTemplate' , { static : true } ) changeTemplate : TemplateRef < any > ; @ ViewChild ( 'userTemplate' , { static : true } ) userTemplate : TemplateRef < any > ; @ Input ( ) set reloadLogs ( value ) { if ( value ) { this . resetCollectionParameters ( ) ; this . loadDeActivated ( ) ; } } public filter : string ; public deActiveLogList : CmdbLog [ ] = [ ] ; public columns : Array < Column > ; public sort : Sort = { name : 'date' , order : SortDirection . DESCENDING } as Sort ; public selectedLogIDs : Array < number > = [ ] ; private readonly initLimit : number = 10 ; public limit : number = this . initLimit ; public readonly initPage : number = 1 ; public page : number = this . initPage ; public total : number = 0 ; public loading : boolean = false ; public apiParameters : CollectionParameters = { limit : 10 , sort : 'log_time' , order : - 1 , page : 1 } ; /**
     * The Id used for the table
     */ public id : string = 'object-deactivate-log-list-table' ; public tableStateSubject : BehaviorSubject < TableState > = new BehaviorSubject < TableState > ( undefined ) ; public tableStates : Array < TableState > = [ ] ; public get tableState ( ) : TableState { return this . tableStateSubject . getValue ( ) as TableState ; } constructor ( private logService , private datePipe , private fileSaverService , private fileService , private route , private router , private userSettingsService , private indexDB ) { this . route . data . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( data ) => { if ( data . userSetting ) { const userSettingPayloads = ( data . userSetting as UserSetting < TableStatePayload > ) . payloads . find ( payloads => payloads . id === this . id ) ; this . tableStates = userSettingPayloads . tableStates ; this . tableStateSubject . next ( userSettingPayloads . currentState ) ; } else { this . tableStates = [ ] ; this . tableStateSubject . next ( undefined ) ; const statePayload = new TableStatePayload ( this . id , [ ] ) ; const resource = convertResourceURL ( this . router . url . toString ( ) ) ; const userSetting = this . userSettingsService . createUserSetting < TableStatePayload > ( resource , [ statePayload ] ) ; this . indexDB . addSetting ( userSetting ) ; } } ) ; } public ngOnInit ( ) { this . resetCollectionParameters ( ) ; this . setColumns ( ) ; this . initTable ( ) ; this . loadDeActivated ( ) ; } private loadDeActivated ( ) { const filter = JSON . stringify ( this . filterBuilder ( ) ) ; this . apiParameters = { filter , limit : this . limit , sort : this . sort . name , order : this . sort . order , page : this . page } ; this . logService . getLogsWithNotExistingObject ( this . apiParameters ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( apiResponse ) => { this . deActiveLogList = apiResponse . results ; this . total = apiResponse . total ; } ) ; } /**
     * Initialize table state
     */ private initTable ( ) { if ( this . tableState ) { this . sort = this . tableState . sort ; this . limit = this . tableState . pageSize ; this . page = this . tableState . page ; } } private resetCollectionParameters ( ) { this . apiParameters = { limit : 10 , sort : 'date' , order : - 1 , page : 1 } ; } private setColumns ( ) { const columns = [ ] ; columns . push ( { display : 'Log ID' , name : 'public_id' , data : 'public_id' , sortable : true , searchable : true , fixed : true , template : this . dataTemplate , } as unknown as Column ) ; columns . push ( { display : 'Object ID' , name : 'object_id' , data : 'object_id' , sortable : true , searchable : true , fixed : true , template : this . dataTemplate , } as unknown as Column ) ; columns . push ( { display : 'Action' , name : 'action_name' , data : 'action_name' , sortable : true , searchable : true , fixed : true , template : this . dataTemplate , cssClasses : [ 'text-center' ] , style : { width : '6em' } } as unknown as Column ) ; columns . push ( { display : 'Changes' , name : 'changes' , sortable : true , searchable : false , fixed : true , template : this . changeTemplate , } as unknown as Column ) ; columns . push ( { display : 'Comment' , name : 'comment' , data : 'comment' , sortable : true , searchable : false , fixed : true , template : this . dataTemplate , } as unknown as Column ) ; columns . push ( { display : 'Author' , data : 'author_name' , name : 'author_name' , sortable : true , searchable : true , fixed : true , template : this . userTemplate , cssClasses : [ 'text-center' ] , style : { width : '6em' } } as unknown as Column ) ; columns . push ( { display : 'Version' , name : 'version' , data : 'version' , sortable : true , searchable : true , fixed : true , template : this . dataTemplate , cssClasses : [ 'text-center' ] , style : { width : '6em' } } as unknown as Column ) ; columns . push ( { display : 'Log Time' , name : 'log_time' , data : 'log_time' , sortable : true , template : this . dateTemplate , searchable : false , } as Column ) ; columns . push ( { display : 'Actions' , name : 'actions' , data : 'public_id' , sortable : false , searchable : false , fixed : true , template : this . actionTemplate , cssClasses : [ 'text-center' ] , style : { width : '6em' } } as unknown as Column ) ; this . columns = columns ; } public onPageChange ( page ) { this . page = page ; this . loadDeActivated ( ) ; } public onPageSizeChange ( limit ) { this . limit = limit ; this . loadDeActivated ( ) ; } public onSortChange ( sort ) { this . sort = sort ; this . loadDeActivated ( ) ; } public onSearchChange ( search ) { if ( search ) { this . filter = search ; } else { this . filter = undefined ; } this . loadDeActivated ( ) ; } public onSelectedChange ( selectedItems ) { this . selectedLogIDs = selectedItems . map ( m => m . public_id ) ; } public filterBuilder ( ) { const query = [ ] ; if ( this . filter ) { const searchableColumns = this . columns . filter ( c => c . searchable ) ; const or = [ ] ; for ( const column of searchableColumns ) { const regex = { } ; regex [ column . name ] = { $regex : String ( this . filter ) , $options : 'ismx' } ; or . push ( regex ) ; } query . push ( { $addFields : { public_id : { $toString : '$public_id' } } } ) ; query . push ( { $match : { $and : [ { log_type : 'CmdbObjectLog' } , { $or : or } ] } } ) ; } else { query . push ( { $match : { log_type : 'CmdbObjectLog' } } ) ; } return query ; } param state public onStateSelect ( state ) { this . tableStateSubject . next ( state ) ; this . page = this . tableState . page ; this . limit = this . tableState . pageSize ; this . sort = this . tableState . sort ; this . loadDeActivated ( ) ; } /**
     * On table State change.
     * Update state.
     */ public onStateChange ( state ) { this . tableStateSubject . next ( state ) ; } /**
     * On table State change.
     * Update state.
     */ public onStateReset ( ) { this . sort = { name : 'public_id' , order : SortDirection . DESCENDING } as Sort ; this . limit = this . initLimit ; this . page = this . initPage ; this . loadDeActivated ( ) ; } public cleanup ( ) { this . cleanUpEmitter . emit ( this . selectedLogIDs ) ; this . objectsTableComponent . selectedItems = [ ] ; this . selectedLogIDs = [ ] ; } public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }