Angular5 & qdt-components

This is a simple Angular 5 template that was created by the Angular CLI.

It uses the Helpdesk App.

Clear Selections
  • SELECTIONS:
  • None
Loading...

High Priority Cases

Medium Priority Cases

Low Priority Cases

Loading...
Loading...
dashboard.component.html

            
    <div class="row">
        <div class="col-md-12 text-right">
            <qdt-component [Component]="'QdtButton'" [props]="btn1props"></qdt-component>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <qdt-component [Component]="'QdtSelectionToolbar'"></qdt-component>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <qdt-component [Component]="'QdtViz'" [props]="viz3props"></qdt-component>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-center">
            <h4>High Priority Cases</h4>
            <h2><qdt-component [Component]="'QdtKpi'" [props]="kpi1props"></qdt-component></h2>
        </div>
        <div class="col-md-4 text-center">
            <h4>Medium Priority Cases</h4>
            <h2><qdt-component [Component]="'QdtKpi'" [props]="kpi2props"></qdt-component></h2>
        </div>
        <div class="col-md-4 text-center">
            <h4>Low Priority Cases</h4>
            <h2><qdt-component [Component]="'QdtKpi'" [props]="kpi3props"></qdt-component></h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <qdt-component [Component]="'QdtViz'" [props]="viz1props"></qdt-component>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <qdt-component [Component]="'QdtViz'" [props]="viz2props"></qdt-component>
        </div>
    </div>
            
        
dashboard.component.ts

            
    btn1props = {title:'Clear Selections', type:'clearSelections'};
    viz1props = {id: 'a5e0f12c-38f5-4da9-8f3f-0e4566b28398', height:'300px'};
    viz2props = {id: '298bbd6d-f23d-4469-94a2-df243d680e0c', height:'300px'};
    viz3props = {id: 'ycppXj', height:'200px'};
    kpi1props = {cols: [null,"=Count( {$<Priority={'High'}, Status -={'Closed'} >} Distinct %CaseId )"]};
    kpi2props = {cols: [null,"=Count( {$<Priority={'Medium'}, Status -={'Closed'} >} Distinct %CaseId )"]};
    kpi3props = {cols: [null,"=Count( {$<Priority={'Low'}, Status -={'Closed'} >} Distinct %CaseId )"]};