import { Component , Input , OnDestroy , OnInit , TemplateRef , ViewChild } from '@angular/core' ; import { CollectionParameters } from '../../../../services/models/api-parameter' ; import { ReplaySubject } from 'rxjs' ; import { Column , Sort , SortDirection } from '../../../../layout/table/table.types' ; import { CmdbLink } from '../../../models/cmdb-link' ; import { APIGetMultiResponse } from '../../../../services/models/api-response' ; import { LinkService } from '../../../services/link.service' ; import { takeUntil } from 'rxjs/operators' ; import { DatePipe } from '@angular/common' ; import { AccessControlList } from '../../../../acl/acl.types' ; import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' ; import { NgbModal } from '@ng-bootstrap/ng-bootstrap' ; import { ToastService } from '../../../../layout/toast/toast.service' ; import { ObjectLinkAddModalComponent } from '../../modals/object-link-add-modal/object-link-add-modal.component' ; import { RenderResult } from '../../../models/cmdb-render' ; import { ObjectLinkDeleteModalComponent } from '../../modals/object-link-delete-modal/object-link-delete-modal.component' ; @ Component ( { selector : 'cmdb-object-links-table' , templateUrl : './object-links-table.component.html' , styleUrls : [ './object-links-table.component.scss' ] } ) export class ObjectLinksTableComponent implements OnInit , OnDestroy { /**
     * Global un-subscriber for http calls to the rest backend.
     */ private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * Table Template: Link partner column.
     */ @ ViewChild ( 'partnerTemplate' , { static : true } ) partnerTemplate : TemplateRef < any > ; /**
     * Table Template: Link action column.
     */ @ ViewChild ( 'actionTemplate' , { static : true } ) actionTemplate : TemplateRef < any > ; /**
     * Table Custom Template: Link add button.
     */ @ ViewChild ( 'addButtonTemplate' , { static : true } ) addButtonTemplate : TemplateRef < any > ; public objectID : number ; public object : RenderResult ; @ Input ( 'object' ) public set Object ( obj ) { this . objectID = obj . object_information . object_id ; this . object = obj ; this . loadLinksFromAPI ( ) ; } @ Input ( ) public acl : AccessControlList ; private modalRef : NgbModalRef ; /**
     * Table columns definition.
     */ public columns : Array < Column > ; public links : Array < CmdbLink > = [ ] ; public linksAPIResponse : APIGetMultiResponse < CmdbLink > ; public totalLinks : number = 0 ; private private readonly initLimit : number = 10 ; public limit : number = this . initLimit ; /**
     * Begin with first page.
     */ public readonly initPage : number = 1 ; public page : number = this . initPage ; /**
     * Default sort filter.
     */ public sort : Sort = { name : 'public_id' , order : SortDirection . DESCENDING } as Sort ; /**
     * Loading indicator.
     */ public loading : boolean = false ; constructor ( private linkService , private modalService , private toast ) { } public ngOnInit ( ) { this . columns = [ { display : 'Public ID' , name : 'public_id' , data : 'public_id' , sortable : true } , { display : 'Linked object' , name : 'partner' , template : this . partnerTemplate , sortable : false , } , { display : 'Creation Time' , name : 'creation_time' , data : 'creation_time' , sortable : true , searchable : false , render ( data ) { const date = new Date ( data ) ; return new DatePipe ( 'en-US' ) . transform ( date , 'dd/MM/yyyy - hh:mm:ss' ) . toString ( ) ; } } , { display : 'Actions' , name : 'actions' , template : this . actionTemplate , sortable : false , fixed : true , cssClasses : [ 'text-center' ] , cellClasses : [ 'actions-buttons' ] , style : { width : '6rem' } } , ] as Array < Column > ; } param sort public onSortChange ( sort ) { this . sort = sort ; this . loadLinksFromAPI ( ) ; } param page public onPageChange ( page ) { this . page = page ; this . loadLinksFromAPI ( ) ; } param limit public onPageSizeChange ( limit ) { this . limit = limit ; this . loadLinksFromAPI ( ) ; } private private loadLinksFromAPI ( ) { this . loading = true ; const params = { filter : undefined , limit : this . limit , sort : this . sort . name , order : this . sort . order , page : this . page } ; this . linkService . getPartnerLinks ( this . objectID , params ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( apiResponse ) => { this . linksAPIResponse = apiResponse ; this . links = apiResponse . results as Array < CmdbLink > ; this . totalLinks = apiResponse . total ; this . loading = false ; } ) ; } public onShowAddModal ( ) { this . modalRef = this . modalService . open ( ObjectLinkAddModalComponent ) ; this . modalRef . componentInstance . primaryRenderResult = this . object ; this . modalRef . result . then ( ( formData ) => { this . linkService . postLink ( formData ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( ) => { this . toast . success ( `Object #${ formData . primary } linked with #${ formData . secondary }.` ) ; this . loadLinksFromAPI ( ) ; } , ( e ) => { this . toast . error ( `${ e . message }` ) ; } ) ; } ) ; } public onShowDeleteModal ( link ) { this . modalRef = this . modalService . open ( ObjectLinkDeleteModalComponent ) ; this . modalRef . componentInstance . publicID = link . public_id ; this . modalRef . componentInstance . closeEmitter . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( closeResponse ) => { if ( closeResponse === 'deleted' ) { this . loadLinksFromAPI ( ) ; } } ) ; } /**
     * Unsubscribe all on component destroy.
     */ public ngOnDestroy ( ) { if ( this . modalRef ) { this . modalRef . close ( ) ; } this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }