import { Component , OnInit , OnDestroy , ViewChild , TemplateRef } from '@angular/core' ; import { Router } from '@angular/router' ; import { ReplaySubject } from 'rxjs' ; import { takeUntil } from 'rxjs/operators' ; import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' ; import { DocTemplate } from '../models/cmdb-doctemplate' ; import { APIGetMultiResponse } from '../../services/models/api-response' ; import { Column , Sort , SortDirection } from '../../layout/table/table.types' ; import { DocapiService } from '../docapi.service' ; import { ToastService } from '../../layout/toast/toast.service' ; import { NgbModal } from '@ng-bootstrap/ng-bootstrap' ; import { CollectionParameters } from '../../services/models/api-parameter' ; import { GeneralModalComponent } from '../../layout/helpers/modals/general-modal/general-modal.component' ; @ Component ( { selector : 'cmdb-docapi-settings-list' , templateUrl : './docapi-list.component.html' , styleUrls : [ './docapi-list.component.scss' ] } ) export class DocapiListComponent implements OnInit , OnDestroy { public subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; public messageBlock : string = 'DocAPI is an interface for generating PDF documents out of CMDB data. A user can design a\n' + 'Document Template in the frontend. Each Document Template consists of a Template Type, Template\n' + 'Content and Template Styling. The Template Type defines the kind of the template. For example the Object Template type\n' + 'generates documents for single CMDB objects. Each Template Type may have its own configuration settings. For Object\n' + 'Templates, an object type needs to be configured. In the Template Content section, the document itself can be designed\n' + ' with an WYSIWYG editor. Depending on the chosen Template Type, template variables can be used at all places of the\n' + ' document. These variables will then be replaced when rendering the document for a specific object.' ; /**
     * Table Template: actions column.
     */ @ ViewChild ( 'actionsTemplate' , { static : true } ) actionsTemplate : TemplateRef < any > ; /**
     * Table Template: add button.
     */ @ ViewChild ( 'addButton' , { static : true } ) addButton : TemplateRef < any > ; private modalRef : NgbModalRef ; /**
     * Current template collection
     */ public templates : Array < DocTemplate > = [ ] ; public templateAPIResponse : APIGetMultiResponse < DocTemplate > ; public totalTemplates : number = 0 ; /**
     * Table columns definition.
     */ public columns : Array < Column > ; /**
     * Table selection enabled.
     */ public selectEnabled : boolean = false ; /**
     * Begin with first page.
     */ public readonly initPage : number = 1 ; public page : number = this . initPage ; private private readonly initLimit : number = 10 ; public limit : number = this . initLimit ; /**
     * Filter query from the table search input.
     */ public filter : string ; /**
     * Default sort filter.
     */ public sort : Sort = { name : 'public_id' , order : SortDirection . DESCENDING } as Sort ; /**
     * Loading indicator.
     */ public loading : boolean = false ; constructor ( private docapiService , private router , private toast , private modalService ) { } public ngOnInit ( ) { this . columns = [ { display : 'Public ID' , name : 'public_id' , data : 'public_id' , searchable : true , sortable : true } , { display : 'Label' , name : 'label' , data : 'label' , searchable : true , sortable : true } , { display : 'Actions' , name : 'actions' , searchable : false , sortable : false , fixed : true , template : this . actionsTemplate , cssClasses : [ 'text-center' ] , cellClasses : [ 'actions-buttons' ] } , ] as Array < Column > ; this . loadTemplatesFromAPI ( ) ; } private private loadTemplatesFromAPI ( ) { this . loading = true ; let query ; if ( this . filter ) { query = [ ] ; const or = [ ] ; const searchableColumns = this . columns . filter ( c => c . searchable ) ; 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' } } } ) ; or . push ( { public_id : { $elemMatch : { value : { $regex : String ( this . filter ) , $options : 'ismx' } } } } ) ; query . push ( { $match : { $or : or } } ) ; } const params = { filter : query , limit : this . limit , sort : this . sort . name , order : this . sort . order , page : this . page } ; this . docapiService . getDocTemplateList ( params ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( apiResponse ) => { this . templateAPIResponse = apiResponse ; this . templates = apiResponse . results as Array < DocTemplate > ; this . totalTemplates = apiResponse . total ; this . loading = false ; } ) ; } public delDocTemplate ( publicId ) { this . modalRef = this . modalService . open ( GeneralModalComponent ) ; this . modalRef . componentInstance . title = 'Delete Document Template' ; this . modalRef . componentInstance . modalMessage = 'Are you sure you want to delete this Document Template?' ; this . modalRef . componentInstance . buttonDeny = 'Cancel' ; this . modalRef . componentInstance . buttonAccept = 'Delete' ; this . modalRef . result . then ( ( result ) => { if ( result ) { this . docapiService . deleteDocTemplate ( publicId ) . subscribe ( resp => console . log ( resp ) , error => { } , ( ) => this . loadTemplatesFromAPI ( ) ) ; } } ) ; } param sort public onSortChange ( sort ) { this . sort = sort ; this . loadTemplatesFromAPI ( ) ; } param page public onPageChange ( page ) { this . page = page ; this . loadTemplatesFromAPI ( ) ; } param limit public onPageSizeChange ( limit ) { this . limit = limit ; this . loadTemplatesFromAPI ( ) ; } param search public onSearchChange ( search ) { if ( search ) { this . filter = search ; } else { this . filter = undefined ; } this . loadTemplatesFromAPI ( ) ; } public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; if ( this . modalRef ) { this . modalRef . close ( ) ; } } public showAlert ( ) { $ ( '#infobox' ) . show ( ) ; } }