BoxTurtlePs

0.0.7

Private/Angular/Component/List/ClientGrid/New-NgClientGridComponentTsToString.ps1

Function New-NgClientGridComponentTsToString([TableInfo]$tableInfo) {

    # local variables to make rendering easier
    [string] $serviceName = "$($tableInfo.tableLowerCamel)Service"
    [string] $serviceTypeName = "$($tableInfo.tableCapitalCamel)Service"
    [string] $dataTypeName = "$($tableInfo.tableCapitalCamel)"
    [string] $dataKebab = "$($tableInfo.tableLowerKebab)"
    [string] $primaryKeyName = "PK"
    [string] $itemUrl = "someurl"

<##########################################################################################>
return @"
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Rx';
import { GridOptions } from 'ag-grid';
import * as moment from 'moment';

import { $serviceTypeName } from '../service/$($dataKebab).service';
import { $dataTypeName } from '../model/$($dataKebab)';
import { StringService } from '../service/string.service';

@Component({
    selector: '$($dataKebab)-grid',
    templateUrl: './$($dataKebab)-grid.component.html',
    styleUrls: ['./$($dataKebab)-grid.component.css']
})
export class $($dataTypeName)GridComponent implements OnInit {
    private gridOptions: GridOptions;

    constructor(
        private $($serviceName): $serviceTypeName,
        private route: ActivatedRoute,
        private router: Router,
        private stringService: StringService
    ) {
        // Some weird thing with load order, must explicitly supply
        // services here and not rely on this.statusReportService
        this.loadGridOptions($($serviceName));
    }

    ngOnInit(): void {
        this.loadData();
    }

    loadGridOptions($($serviceName): $serviceTypeName): void {
        this.gridOptions = <GridOptions>{};
        this.gridOptions.columnDefs = [
            {
                headerName: "Server",
                field: "server",
                width: 120,
                filter: 'text',
                tooltipField: 'server',
                cellRenderer: function (params: any) {
                    // If we do a true hyperlink, then angular gets
                    // all messed up and reloads the entire SPA page.
                    // Instead, put in a dummy link, and we'll plug
                    // code later to handle the onCellClick
                    return "<a href='javascript:void(0)' >" + params.value + "</a>";
                }
            },
            {
                headerName: "Active",
                field: "active",
                width: 70
            },
            {
                headerName: "Up",
                field: "serverUp",
                width: 50
            },
            {
                headerName: "Reboot",
                field: "lastReboot",
                width: 160,
                suppressFilter: true,
                cellRenderer: function (params:any) {
                    return params.value ? moment(params.value).format("M/D/YY h:mm a") : '';
                }
            },
            {
                headerName: "Count",
                field: "fileCount",
                width: 65,
                filter: 'number',
                cellStyle: { 'text-align': 'right' }
            },
            {
                headerName: "Size",
                field: "fileSize",
                width: 100,
                cellStyle: { 'text-align': 'right' },
                cellRenderer: function (params) {
                    return Intl.NumberFormat().format(params.value);
                },
                filter: 'number',
                tooltipField: 'fileSize'
            },
            {
                headerName: "Pkg Name",
                field: "pkgName",
                width: 120,
                tooltipField: 'pkgName'
            },
            {
                headerName: "Pkg Desc",
                field: "pkgDesc",
                width: 200,
                tooltipField: 'pkgDesc'
            },
            {
                headerName: "Comments",
                field: "comments",
                width: 100,
                tooltipField: 'comments'
            },
            {
                headerName: "Status Age",
                field: "statusAge",
                suppressFilter: true,
                width: 100
            },
            {
                headerName: "Last Action",
                field: "lastAction",
                width: 100
            },
            {
                headerName: "Last Act Stat",
                field: "lastActionStatus",
                width: 100
            },
            {
                headerName: "Last Act Date",
                field: "lastActionDate",
                width: 160,
                //filter: 'date',
                suppressFilter: true,
                suppressMenu: true,
                cellRenderer: function (params) {
                    return params.value ? moment(params.value).format("M/D/YY h:mm a") : '';
                }
            },
        ];

        // The list of servers is about 200
        // and we want real time refresh,
        // and ag-grid won't let us put checkboxes
        // on an infinite scroll, so just load the
        // data direct into memory
        this.gridOptions.floatingFilter = true;
        this.gridOptions.debug = false;
        this.gridOptions.enableColResize = true;
        this.gridOptions.rowSelection = 'multiple';
        this.gridOptions.suppressRowClickSelection = true;
        this.gridOptions.rowModelType = 'normal';
        this.gridOptions.maxConcurrentDatasourceRequests = 2;
        this.gridOptions.deltaRowDataMode = true;
        this.gridOptions.getRowNodeId = function (item) {
            return item.key;
        };

        this.gridOptions.onGridReady = function (event:any) {
            $($serviceName).list().then(
                myData => {
                    event.api.setRowData(myData);
                });
        }
        // Don't do vertical scrollbars, just show everything
        this.gridOptions.domLayout = 'autoHeight';

        this.gridOptions.onCellClicked = function (params:any) {
            if (params.colDef.field == "server") {
                let angularComponent: any = params.api.gridCore.gridOptions.AngularComponent;
                angularComponent.router.navigate([``/$($itemUrl)/`${params.data.$($primaryKeyName)}``]);
            }
        };

        // Hijack GridOptions to add a pointer back to this object
        // that can be used during ag-grid callbacks.
        // Because GridOptions is strongly typed, cheat with an "any" pointer
        let thisTemp: any = this.gridOptions;
        thisTemp.AngularComponent = this;
    }

    loadData(): void {
        this.$($($serviceName)).list().then(
            myData => {
                let myApi = this.gridOptions.api;
                if (myApi) {
                    myApi.setRowData(myData);
                }
            });
    }

}

"@
<##########################################################################################>
}