29_03

// search with "show input on search results"


search.ts

-----------------------
import {Component,OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {InqSearchComponent} from './inqsearch.component'
import {SearchService} from '../services/search.service';
import {SearchResult} from './search.result';
import {RoutingDataValue } from '../services/routingdata';
import {ReturnCodes} from '../search/returncodes.component';

// form validations and mandatory messages
import { Validators,FormControl,FormGroup,FormBuilder} from '@angular/forms';
import {Messages,Message,SelectItem} from 'primeng/primeng';
//form validations ends
@Component({
    moduleId:module.id,
    selector:'search',
    templateUrl:'search.html',
})

export class SearchComponent implements OnInit {// form validations and mandatory messages
    // form validations and mandatory messages
    msgs: Message[] = [];
    isDisplaymsg:boolean=false;
    sourcecodes: SelectItem[];

    seininputform: FormGroup;
    submitted: boolean;
    //form validations ends
    _seachinputcomponent:InqSearchComponent; //// show input on search results
    disabled: boolean = true;
    return_codes:ReturnCodes[];
    returncodes:ReturnCodes;

    toggleDisabled() {
        this.disabled = !this.disabled;
    }


    constructor(private _searchService:SearchService, private router: Router,
                private routingdatavalues:RoutingDataValue,private _fb: FormBuilder){

        this._seachinputcomponent={ // show input on search results
            ein:0,
            policynumber:'',
            seinid:'',
            firstname:'',
            lastname:'',
            dateofbirth:'',
            state:'',
            postalcode:'',
            cdbxrefid:'',
            xwkeinid:'',
            sourcecode:''
        }
        this.sourcecodes = [];
        this.sourcecodes.push({label:'Select', value:''});
        this.sourcecodes.push({label:'CS', value:'CS'});
        this.sourcecodes.push({label:'OX', value:'OX'});
        this.sourcecodes.push({label:'PA', value:'PA'});
        this.sourcecodes.push({label:'RF', value:'RF'});
        this.sourcecodes.push({label:'SH', value:'SH'});

    }
    // form validations and mandatory messages
    ngOnInit() {
        console.log('seininputform seininputform');
        // form validations and mandatory messages
        this.seininputform = this._fb.group({
            'cein': new FormControl(''),
            'cpolicynumber': new FormControl(''),
            'csourcecode': new FormControl(''),
            'cseinid': new FormControl(''),
            'cfirstname': new FormControl(''),
            'clastname': new FormControl(''),
            'cdateofbirth': new FormControl(''),
            'cstate': new FormControl(''),
            'cpostalcode': new FormControl(''),
            'ccdbxrefid': new FormControl(''),
            'cxwkeinid': new FormControl('')
        });

        console.log('routing data -->  '+JSON.stringify(this.routingdatavalues.routingDataStorage));
        if(this.routingdatavalues.routingDataStorage)
        {

           /* let body = res.json();
            console.log("Body"+body);
            return body || {};*/
            let body = this.routingdatavalues.routingDataStorage||{};
            console.log(body) ;
            this.return_codes = <ReturnCodes[]>body;
            console.log( "this.return_codes"+this.return_codes);
            console.log(this.return_codes.length)
            this.returncodes=this.return_codes[0];
            console.log(this.returncodes);
            this.msgs.push({severity: 'warn', summary: 'Failed', detail: this.returncodes.error_msg})
        }
      //  return_codes:this.routingdatavalues.routingDataStorage
       // this.msgs.push(JSON.stringify(this.routingdatavalues.routingDataStorage))
    }
    // form validations and mandatory messages
    clearvalues() {
        console.log('clearvalues search ts', this._seachinputcomponent.ein);
          this.msgs=[];
        this._seachinputcomponent.ein=0;
        this._seachinputcomponent.policynumber='';
        this._seachinputcomponent.seinid='';
        this._seachinputcomponent.firstname='';
        this._seachinputcomponent.lastname='';
        this._seachinputcomponent.dateofbirth='';
        this._seachinputcomponent.state='';
        this._seachinputcomponent.postalcode='';
        this._seachinputcomponent.cdbxrefid='';
        this._seachinputcomponent.xwkeinid='';
        this._seachinputcomponent.sourcecode='';
    }
    closeDialog(){
        this.msgs=[];
        this.isDisplaymsg=false;
    }
    searchsubmit(){
        console.log('submit search');
        this.msgs=[];
        this.routingdatavalues.routingDataStorage={
            seachinputcomponent__1 :this._seachinputcomponent // show input on search results

        }

        if(this._seachinputcomponent.policynumber =='' && this._seachinputcomponent.seinid=='' && this._seachinputcomponent.cdbxrefid=='' &&this._seachinputcomponent.xwkeinid=='')
        {
            if (this._seachinputcomponent.ein > 0) {
                console.log('navigate to search result  ');
                this.router.navigate(['/searchresult']);
            }
            else { // form validations and mandatory messages
                // login failed
                this.msgs.push({severity: 'warn', summary: 'Mandatory', detail: 'EIN ID is required'});
            } // form validations and mandatory messages
        }
        if( !(this._seachinputcomponent.ein > 0)&&  this._seachinputcomponent.seinid=='' && this._seachinputcomponent.cdbxrefid=='' &&this._seachinputcomponent.xwkeinid=='')
        {
            if (this._seachinputcomponent.policynumber!='') {
                console.log('navigate to search result  ');
                this.router.navigate(['/searchresult']);
            }
            else { // form validations and mandatory messages
                // login failed
                this.msgs.push({severity: 'warn', summary: 'Mandatory', detail: 'Policy Number is required'});
            } // form validations and mandatory messages
        }
        if( !(this._seachinputcomponent.ein > 0) &&  this._seachinputcomponent.policynumber =='' && this._seachinputcomponent.cdbxrefid=='' &&this._seachinputcomponent.xwkeinid=='')
        {
            if (this._seachinputcomponent.seinid!='') {
                console.log('navigate to search result  ');
                this.router.navigate(['/searchresult']);
            }
            else { // form validations and mandatory messages
                // login failed
                this.msgs.push({severity: 'warn', summary: 'Mandatory', detail: 'SEIN Sub ID is required'});
            } // form validations and mandatory messages
        }
        if( !(this._seachinputcomponent.ein > 0) &&  this._seachinputcomponent.seinid=='' && this._seachinputcomponent.policynumber=='' &&this._seachinputcomponent.xwkeinid=='')
        {

            if (this._seachinputcomponent.cdbxrefid!='') {
                console.log('navigate to search result  ');
                this.router.navigate(['/searchresult']);
            }
            else { // form validations and mandatory messages
                // login failed
                this.msgs.push({severity: 'warn', summary: 'Failed', detail: 'CDB Xref ID is required'});
            } // form validations and mandatory messages
        }
        if( !(this._seachinputcomponent.ein > 0) && this._seachinputcomponent.seinid=='' && this._seachinputcomponent.cdbxrefid=='' &&this._seachinputcomponent.policynumber=='')
        {
            if (this._seachinputcomponent.xwkeinid!='') {
                console.log('navigate to search result  ');
                this.router.navigate(['/searchresult']);
            }
            else { // form validations and mandatory messages
                // login failed
                this.msgs.push({severity: 'warn', summary: 'Failed', detail: 'Crosswalk EIN ID is required'});
            } // form validations and mandatory messages
        }
   if(this.msgs!=null && this.msgs.length>0){
        this.isDisplaymsg=true;
        console.log('inside is display --> '+this.isDisplaymsg);
   }   
   
    }
}


------------------
search.result.ts
-----------

import { RoutingDataValue } from '../services/routingdata';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SearchService } from '../services/search.service';
import { SearchReturn } from '../search/searchreturn.component';
import { ReturnCodes } from '../search/returncodes.component';
import {InqSearchComponent} from './inqsearch.component'

import {Message,SelectItem} from 'primeng/primeng';



@Component({
    moduleId: module.id,
    selector: 'searchresult',
    templateUrl: 'searchresult.html',
})
export class SearchResult implements OnInit {
    values: string;
    isDisplayErrorDialog:boolean=false;
    errorreturn:ReturnCodes;
    searchreturn: SearchReturn;
    searchreturns: SearchReturn[] = [];
    errorReturns: ReturnCodes[] = [];
    msgs: Message[] = [];
    _seachinputcomponent:InqSearchComponent; // show input on search results

    public constructor(private _searchService: SearchService, private _routingDataValue: RoutingDataValue, private router: Router) {
        console.log('routing data --> ' + JSON.stringify(this._routingDataValue.routingDataStorage));
       // show input on search results srt 
        this._seachinputcomponent={
            ein:0,
            policynumber:'',
            seinid:'',
            firstname:'',
            lastname:'',
            dateofbirth:'',
            state:'',
            postalcode:'',
            cdbxrefid:'',
            xwkeinid:'',
            sourcecode:''
        }
        if(this._routingDataValue!=null && this._routingDataValue.routingDataStorage!=null){      

        this._seachinputcomponent= this._routingDataValue.routingDataStorage.seachinputcomponent__1;
        console.log('restttt ',this._seachinputcomponent.ein);
      //  this._seachinputcomponent.firstname = dd;
      console.log('restttt dd',this._seachinputcomponent.firstname);
        }
        //// show input on search results ends
    }
    ngOnInit() {
        console.log('ngOnInit --> ');
       this.isDisplayErrorDialog=false;
        //this.getINQSearchResult(); // it will load once htnl will be called like onload funtion
    }
    getINQSearchResult() {
        this.isDisplayErrorDialog=false;
        console.log('getINQSearchResult getINQSearchResult ');
        this._searchService.getINQSearchResult(this.values)
            .subscribe(
            searchreturn => {
                this.searchreturn = searchreturn;
                console.log('items: searchResults' + searchreturn);
                this.errorReturns = <ReturnCodes[]>this.searchreturn.return_codes;
                console.log('fff', this.errorReturns);
                // if(this.errorReturns !=null){
                //     this.errorreturn =  this.errorReturns[0];
                //     this.isDisplayErrorDialog=true;
                //      this.msgs.push({severity: 'warn', summary: 'Failed', detail: "Error Type: "+this.errorreturn.error_type+ "Error message: " + this.errorreturn.error_msg})

                // }
                if (this.errorReturns!=null && this.errorReturns.length > 0)
                    this.router.navigate(['/searchresult']);
            }
            ,
            error => {
                console.log(error);
            },
            () => console.log("Job Done Get !", this.searchreturn.return_codes)
            );
    }
    exportCSV(posttable: SearchReturn[]) {
        var mystyle = {
            headers: true,
            caption: 'My Data',
            css: '.headers {color:yellow} .cell {color:blue} .caption: {font-size:200px}'
        };
        console.log('exportCSV posttable' + posttable);
        alasql('SELECT * INTO XLSX("report.XLSX",?) FROM ?', [mystyle, posttable]);
    }

    redirectHome(){
        this.msgs=[];
         console.log('redirectHome' );
         this.router.navigate(['/dashboard']);
    }
}
--------------------------
searchresult.html
-------------------

<dashboard></dashboard>
<!-- show input on search results-->
<p-panel [style]="{'margin-bottom':'20px'}">
 <div  class="ui-grid ui-grid-responsive ui-grid-pad">
<input pInputText type="text"  *ngIf="_seachinputcomponent.ein" style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.ein"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.firstname"    style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.firstname"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.policynumber"   style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.policynumber"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.lastname"   style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.lastname"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.dateofbirth"   style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.dateofbirth"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.state"   style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.state"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.firstname"   style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.firstname"/>
<input pInputText type="text"  *ngIf="_seachinputcomponent.firstname"   style="background-color:#ff8c18" [(ngModel)]="_seachinputcomponent.firstname"/>
 </div>
<!-- show input on search results-->

<p-dialog header="Error Response" [(visible)]="isDisplayErrorDialog" styleClass="ui-dialog-titlebar-close">
    <p-messages [value]="msgs"></p-messages>
    <div class="ui-grid-col-6">
        <button pButton type="text" (click)="redirectHome()" label="Home" class="ui-button-warning"></button>
    </div>
</p-dialog>
<p-dataTable [value]="errorReturns" [rows]="3" [paginator]="true" [pageLinks]="6" [responsive]="true" scrollHeight="400px"
    scrollable="true" [stacked]="stacked">
    <p-header>Search Result</p-header>
    <p-column field="error_type" header="Name"></p-column>
    <p-column field="error_cd" header="Email"></p-column>
    </p-dataTable>

    <button (click)="exportCSV(searchResults)">Export table to Excel</button>

 </p-panel> <!-- show input on search results-->
 
 
 
 
 
 
 
 
 
 ==========================================================================================
 
 search.html with two cloumn in a row
 
 =============================
 
 
<div class="ui-g"  style="background-color: #aaa">
    <div class="ui-g-12 ui-md-6 ui-lg-3">EIN*:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"> <input pInputText type="text" formControlName="cein"   [(ngModel)]="_seachinputcomponent.ein"/></div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">First Name:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cfirstname"   [(ngModel)]="_seachinputcomponent.firstname"/></div>
     <div class="ui-g-12 ui-md-6 ui-lg-3">Policy Number*</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cpolicynumber"    [(ngModel)]="_seachinputcomponent.policynumber" /></div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">Last Name*:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="clastname"   [(ngModel)]="_seachinputcomponent.lastname"/></div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">SEIN Sub ID*:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cseinid"     [(ngModel)]="_seachinputcomponent.seinid" /></div>
    <div class="ui-g-12 ui-md-6 ui-lg-3">Date of Birth:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cdateofbirth"     [(ngModel)]="_seachinputcomponent.dateofbirth" /></div>
   <div class="ui-g-12 ui-md-6 ui-lg-3">CDB Xref ID*:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="ccdbxrefid"    [(ngModel)]="_seachinputcomponent.cdbxrefid" /></div>
   <div class="ui-g-12 ui-md-6 ui-lg-3">State:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cstate"    [(ngModel)]="_seachinputcomponent.state" /></div>
   <div class="ui-g-12 ui-md-6 ui-lg-3">Crosswalk EIN ID*:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cxwkeinid"     [(ngModel)]="_seachinputcomponent.xwkeinid" /></div>
   <div class="ui-g-12 ui-md-6 ui-lg-3">Postal Code:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cpostalcode"    [(ngModel)]="_seachinputcomponent.postalcode" /></div>
   <div class="ui-g-12 ui-md-6 ui-lg-3">Source Code*:</div>
    <div class="ui-g-12 ui-md-6 ui-lg-3"><input pInputText type="text" formControlName="cpostalcode"    [(ngModel)]="_seachinputcomponent.postalcode" /></div>
  
</div>
================================================================