aodb/app/flight-detail/transactions/transaction-list.ts

import {controller, directive} from '../../infrastructure/Dectorators/Components';
import {Mod} from './transaction.mod';
import {ITransactionService, ITransactionDetail, ITransactionConfig, ITransactionListRequest} from '../services/transactionService';
import * as InformationService from '../services/flightInformationService';
import {IFlightDetail} from '../../core/service/flightService';

export interface TransactionListParams extends ng.ui.IStateParamsService {
    flightId: string;
    transaction:any;
    tranAccessModel: InformationService.IUserAccessModel;
}


@controller(Mod, 'transactionListController', ['transactionService', '$stateParams', '$state', '$rootScope', 'chromaState'])
export class Controller {
    public static NO_TRANSACTIONS = 'This flight has no transactions';
    public transactions: Array<ITransactionDetail>;
    public message: string;
    public request: ITransactionListRequest;
    public flightId: string;
    public model: IFlightDetail;
    public columnConfig: Array<ITransactionConfig>;
    public signalRInitiated: boolean;
    public status: string;
    public loading: boolean = true;

    constructor(private transactionService: ITransactionService,
                private $stateParams: TransactionListParams,
                private $state: ng.ui.IStateService,
                private $rootScope: ng.IScope) {
        this.load();
    }

    public load() : void {
        this.status = 'loadingAddPage';
        this.transactionService.getTransactionConfig(this.model.Id, this.model.PhysFlightId)
            .then((colConfig) => {
                this.status = 'awaitingAdd';
                this.transactionService.getTransactions(this.model.Id, this.model.PhysFlightId)
                    .then((transactions) => this.onTransactionsLoad(transactions, colConfig));
            });
    }

    private setupSignalRHandler = () => {
        this.$rootScope.$on('recieveHandlingTransactionAdd', (event, args) => {
            this.load();
            console.log('transaction received in transaction list view with Id ' + args.message.TransactionId);
        });

        this.$rootScope.$on('recieveHandlingTransactionCancelled', (event, args) => {
            if (this.transactions.length > 0) {
                var matchedTransaction = this.transactions.filter(item => item.Id.indexOf(args.message.TransactionId) !== -1)[0];
                if (matchedTransaction) {
                    matchedTransaction.Cancelled = true;
                    this.load();
                }
            }
            console.log('transaction cancelled in transaction list view with Id ' + args.message.TransactionId);
        });
    }



    private onTransactionsLoad(transactions: any, colConfig): void {
        this.transactions = transactions;
        this.columnConfig = colConfig;

        this.loading = false;

        if (this.signalRInitiated !== true) {
            this.setupSignalRHandler();
            this.signalRInitiated = true;
        }

        if (!this.transactions || this.transactions.length === 0) {
            this.message = Controller.NO_TRANSACTIONS;
        }

    }

    public showTransactionDetail(transaction: ITransactionDetail) {
        if (this.columnConfig !== null) {
            this.$state.go('chroma.flight-detail.transaction-detail', {
                transaction: transaction,
                tranAccess: this.$stateParams.tranAccessModel,
                columnConfig: this.columnConfig
            });
        } else {
            console.log('columnConfig is null');
        }
    }

    public showAddTransaction() {
        if (this.columnConfig != null) {
            this.$state.go('chroma.flight-detail.transaction-detail', {
                transaction: undefined,
                tranAccess: this.$stateParams.tranAccessModel,
                columnConfig: this.columnConfig
            });
        } else {
            console.log('columnConfig is null');
        }
    }
}

@directive(Mod, 'chromaTransactionList', ['$stateParams'])
export class Directive implements ng.IDirective {
    controller: string = Controller.$componentName;
    controllerAs: string = 'vm';
    templateUrl: string = 'app/flight-detail/transactions/transaction-list.tpl.html';
    restrict: string = 'E';
    replace: boolean = false;
    bindToController: boolean = true;
    scope: any = {
        model: '='
    };
}