pd changes

ng6-seed/src/app/pd-triger/add-pd/add-pd.component.html

@@ -179,7 +179,7 @@
                                                       <input type="file" title="Browse Document" (change)="fileSelectionEvent($event,d)" formControlName="documentFile">
                                         </mat-list-item>
                                         <mat-list-item>
-                                            <button mat-raised-button mat-button-sm color="accent" (click)="removeItem(d)" type="button">Remove</button>
+                                            <button mat-button color="accent" (click)="removeItem(d)" type="button">Remove</button>
                                           </mat-list-item>
                                       </mat-list>
                                     </mat-card>
@@ -187,9 +187,11 @@
                                     </div>
                                   
        </mat-card-content>
-      
+      <hr>
-       <mat-card-actions>
+       <mat-card-actions style="text-align: right">
-                <button mat-raised-button color="primary" type="submit" [disabled]="!PDtriggerForm.valid">Submit</button>
+            <button mat-button color="accent" type="button" (click)="loadPdListCompoent()">Cancel</button>
+
+                <button mat-button color="primary" type="submit" [disabled]="!PDtriggerForm.valid">Submit</button>
         </mat-card-actions>
        </form>
       </mat-card>

ng6-seed/src/app/pd-triger/add-pd/add-pd.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
 import { CustomValidators } from 'ng2-validation';
 import { PdTrigerService } from '../pd-service/pd-triger.service';
@@ -11,6 +11,8 @@ import { AwsService } from '../../AwsService/aws.service';
   encapsulation: ViewEncapsulation.None
 })
 export class AddPdComponent implements OnInit {
+  @Output() loadParent = new EventEmitter<string>();
+
   public PDtriggerForm: FormGroup;
   items: FormArray;
   CityList: any;
@@ -276,4 +278,7 @@ this._pd.getAllMasterDatas('PDTYPE')
       this._pd.addPdDetails(pd_form).subscribe();
       }
     }
+    loadPdListCompoent() {
+      this.loadParent.emit('1')
+    }
 }

ng6-seed/src/app/pd-triger/edit-pd/edit-pd.component.html

@@ -0,0 +1,11 @@
+<mat-card class="p-1"> 
+    
+    <mat-card-content>
+        {{ childData }}                      
+   </mat-card-content>
+  <hr>
+   <mat-card-actions>
+            <button mat-button color="accent" type="button" (click)="loadPdListCompoent()">Cancel</button>
+    </mat-card-actions>
+  </mat-card>
+              

ng6-seed/src/app/pd-triger/edit-pd/edit-pd.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditPdComponent } from './edit-pd.component';
+
+describe('EditPdComponent', () => {
+  let component: EditPdComponent;
+  let fixture: ComponentFixture<EditPdComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditPdComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditPdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng6-seed/src/app/pd-triger/edit-pd/edit-pd.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit,ViewEncapsulation, EventEmitter, Input, Output } from '@angular/core';
+import { ListPdComponent } from '../list-pd/list-pd.component';
+
+@Component({
+  selector: 'app-edit-pd',
+  templateUrl: './edit-pd.component.html',
+  styleUrls: ['./edit-pd.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class EditPdComponent implements OnInit {
+  @Input() childData: string;
+  @Output() loadParent = new EventEmitter<string>();
+  constructor() {
+   
+   }
+
+  ngOnInit() {
+  }
+  loadPdListCompoent() {
+    this.loadParent.emit('2')
+  }
+
+}

ng6-seed/src/app/pd-triger/list-pd/list-pd.component.html

@@ -0,0 +1,171 @@
+<div align="right" *ngIf="showParentComponent">
+    <button mat-button (click)="addPdDetails()" color="primary">ADD PD</button>
+  </div>
+<mat-card *ngIf="showParentComponent">
+  <mat-tab-group>
+    <mat-tab>
+      <ng-template mat-tab-label>All PD Details</ng-template>
+      <mat-card-content>
+          <div class="card-comment-widget">
+              <mat-list>
+                 <mat-list-item  *ngFor="let details of pdList">
+                    <img mat-list-avatar src="assets/images/face3.jpg" alt="">
+                    <p mat-line>{{details.applicat_details[0].applicant_name}} </p>
+                    
+                    <p mat-line>{{details.lender_applicant_id}} &nbsp;&nbsp;{{details.pd_date_of_initiation}}</p>
+                    <p mat-line>{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}&nbsp;&nbsp;<i class="fa-1x fa fa-dollar">&nbsp;</i>{{details.loan_amount}}&nbsp;&nbsp;<i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{details.state_name}}/{{details.city_name}}</p>
+                    <!-- <span class="text-mat mat-text-muted">Chennai</span> -->
+
+                   <div class="comment-time">
+                        <!-- <a> <i class="fa ic-change fa-edit fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="primary" (click)="editPdDetails(details.pd_id)"><mat-icon>edit</mat-icon></button>
+                        
+                    </div>
+                    <div class="comment-time">
+                  
+                        <!-- <a> <i class="fa ic-change fa-eye fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent"><mat-icon>visibility</mat-icon></button>
+            
+                      </div>
+                 </mat-list-item>
+                 <hr>
+                 <mat-list-item *ngFor="let details of pdList">
+                    <img mat-list-avatar src="assets/images/face3.jpg" alt="">
+                    <p mat-line>{{details.applicat_details[0].applicant_name}} </p>
+                    
+                    <p mat-line>{{details.lender_applicant_id}} &nbsp;&nbsp;{{details.pd_date_of_initiation}}</p>
+                    <p mat-line>{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}&nbsp;&nbsp;<i class="fa-1x fa fa-dollar">&nbsp;</i>{{details.loan_amount}}&nbsp;&nbsp;<i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{details.state_name}}/{{details.city_name}}</p>
+                    <!-- <span class="text-mat mat-text-muted">Chennai</span> -->
+
+                    <div class="comment-time">
+                        <!-- <a> <i class="fa ic-change fa-edit fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="primary"><mat-icon>edit</mat-icon></button>
+                        
+                    </div>
+                    <div class="comment-time">
+                  
+                        <!-- <a> <i class="fa ic-change fa-eye fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent"><mat-icon>visibility</mat-icon></button>
+            
+                      </div>
+                 </mat-list-item>
+                 <hr>
+                 <mat-list-item *ngFor="let details of pdList">
+                    <img mat-list-avatar src="assets/images/face3.jpg" alt="">
+                    <p mat-line>{{details.applicat_details[0].applicant_name}} </p>
+                    
+                    <p mat-line>{{details.lender_applicant_id}} &nbsp;&nbsp;{{details.pd_date_of_initiation}}</p>
+                    <p mat-line>{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}&nbsp;&nbsp;<i class="fa-1x fa fa-dollar">&nbsp;</i>{{details.loan_amount}}&nbsp;&nbsp;<i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{details.state_name}}/{{details.city_name}}</p>
+                    <!-- <span class="text-mat mat-text-muted">Chennai</span> -->
+
+                    <div class="comment-time">
+                        <!-- <a> <i class="fa ic-change fa-edit fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="primary"><mat-icon>edit</mat-icon></button>
+                        
+                    </div>
+                    <div class="comment-time">
+                  
+                        <!-- <a> <i class="fa ic-change fa-eye fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent"><mat-icon>visibility</mat-icon></button>
+            
+                      </div>
+                 </mat-list-item>
+                 <hr>
+                 <mat-list-item *ngFor="let details of pdList">
+                    <img mat-list-avatar src="assets/images/face3.jpg" alt="">
+                    <p mat-line>{{details.applicat_details[0].applicant_name}} </p>
+                    
+                    <p mat-line>{{details.lender_applicant_id}} &nbsp;&nbsp;{{details.pd_date_of_initiation}}</p>
+                    <p mat-line>{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}&nbsp;&nbsp;<i class="fa-1x fa fa-dollar">&nbsp;</i>{{details.loan_amount}}&nbsp;&nbsp;<i class="fa-1x fa fa-map-marker"> </i> &nbsp;{{details.state_name}}/{{details.city_name}}</p>
+                    <!-- <span class="text-mat mat-text-muted">Chennai</span> -->
+
+                    <div class="comment-time">
+                        <!-- <a> <i class="fa ic-change fa-edit fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="primary"><mat-icon>edit</mat-icon></button>
+                        
+                    </div>
+                    <div class="comment-time">
+                  
+                        <!-- <a> <i class="fa ic-change fa-eye fa-lg"></i></a>    -->
+                        <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent"><mat-icon>visibility</mat-icon></button>
+            
+                      </div>
+                 </mat-list-item>
+                 <hr>
+                
+                 
+              </mat-list>
+              
+           </div>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-button (click)="addTileCols()" color="primary">ADD COLSPAN (THREE)</button>
+      </mat-card-actions>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>Confirmed PD Details</ng-template>
+      <mat-card-content>
+        <mat-grid-list cols="2" [rowHeight]="ratio" gutterSize="4px">
+          <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'lightblue'">
+            {{tile.text}}
+          </mat-grid-tile>
+        </mat-grid-list>
+        <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
+          <mat-form-field>
+            <input matInput placeholder="Change ratio" [(ngModel)]="ratio">
+          </mat-form-field>
+        </div>
+      </mat-card-content>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>In Progress PD Details</ng-template>
+      <mat-card-content>
+        <mat-grid-list cols="2" rowHeight="fit" [gutterSize]="ratioGutter"
+                      [style.height]="fitListHeight">
+          <mat-grid-tile *ngFor="let tile of tiles" [style.background]="'#F1EBBA'">
+            {{tile.text}}
+          </mat-grid-tile>
+        </mat-grid-list>
+        <div  fxLayout="row" fxLayoutAlign="start center" class="mt-2">
+          <mat-form-field>
+            <input matInput placeholder="Change list height" [(ngModel)]="fitListHeight">
+          </mat-form-field>
+          <mat-form-field>
+            <input matInput placeholder="Change gutter" type="number" [(ngModel)]="ratioGutter">
+          </mat-form-field>
+        </div>
+      </mat-card-content>
+    </mat-tab>
+    <!-- <mat-tab>
+      <ng-template mat-tab-label>Headers</ng-template>
+      <mat-card-content class="pa-0">
+        <mat-grid-list cols="3" rowHeight="200px">
+          <mat-grid-tile *ngFor="let dog of dogs" style="background:gray">
+            <mat-grid-tile-header>
+              <mat-icon mat-grid-avatar>info_outline</mat-icon>
+              {{dog.name}}
+            </mat-grid-tile-header>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </mat-card-content>
+    </mat-tab>
+    <mat-tab>
+      <ng-template mat-tab-label>Footers</ng-template>
+      <mat-card-content class="pa-0">
+        <mat-grid-list cols="3" rowHeight="200px">
+          <mat-grid-tile *ngFor="let dog of dogs">
+            <img [alt]="dog.name" src="https://material.angularjs.org/material2_assets/ngconf/{{dog.name}}.png">
+            <mat-grid-tile-footer>
+              <h3 mat-line>{{dog.name}}</h3>
+              <span mat-line>Human: {{dog.human}}</span>
+              <mat-icon>star_border</mat-icon>
+            </mat-grid-tile-footer>
+          </mat-grid-tile>
+        </mat-grid-list>
+      </mat-card-content>
+    </mat-tab> -->
+  </mat-tab-group>
+</mat-card>
+
+<app-edit-pd *ngIf="showEditComponent" [childData]="parentEditData" (loadParent)="updateParentComponent($event)"></app-edit-pd>
+<app-add-pd *ngIf="showAddComponent" (loadParent)="updateParentComponent($event)"></app-add-pd>

ng6-seed/src/app/pd-triger/list-pd/list-pd.component.scss

@@ -0,0 +1,5 @@
+.ic-change:hover {
+    transform: scale(1.1);
+    color: green;
+}
+

ng6-seed/src/app/pd-triger/list-pd/list-pd.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListPdComponent } from './list-pd.component';
+
+describe('ListPdComponent', () => {
+  let component: ListPdComponent;
+  let fixture: ComponentFixture<ListPdComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ListPdComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListPdComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ng6-seed/src/app/pd-triger/list-pd/list-pd.component.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
+import { PdTrigerService } from '../pd-service/pd-triger.service';
+
+@Component({
+  selector: 'app-list-pd',
+  templateUrl: './list-pd.component.html',
+  styleUrls: ['./list-pd.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class ListPdComponent implements OnInit {
+  parentEditData :string;
+  showParentComponent:boolean;
+  showAddComponent:boolean;
+  showEditComponent:boolean;
+  errorMessage: any;
+  pdList:any[];
+  tiles: any[] = [{
+    text: 'One',
+    cols: 3,
+    rows: 1,
+    color: 'lightblue'
+  }, {
+    text: 'Two',
+    cols: 1,
+    rows: 1,
+    color: 'lightgreen'
+  }, {
+    text: 'Three',
+    cols: 1,
+    rows: 1,
+    color: 'lightpink'
+  }, {
+    text: 'Four',
+    cols: 2,
+    rows: 1,
+    color: '#DDBDF1'
+  }];
+
+  dogs: Object[] = [{
+    name: 'Porter',
+    human: 'Kara'
+  }, {
+    name: 'Mal',
+    human: 'Jeremy'
+  }, {
+    name: 'Koby',
+    human: 'Igor'
+  }, {
+    name: 'Razzle',
+    human: 'Ward'
+  }, {
+    name: 'Molly',
+    human: 'Rob'
+  }, {
+    name: 'Husi',
+    human: 'Matias'
+  }];
+
+  basicRowHeight = 80;
+  fixedCols = 4;
+  fixedRowHeight = 50;
+  ratioGutter = 1;
+  fitListHeight = '400px';
+  ratio = '8:1';
+
+  addTileCols() {
+    this.tiles[2].cols++;
+  }
+  constructor(private _pd: PdTrigerService) {
+  }
+
+  ngOnInit() {
+    this.showParentComponent=true
+    this.showAddComponent=false
+    this.showEditComponent=false
+    this._pd.getPdDetails()
+    .subscribe(
+        data => {
+          if (data.status == 200) {
+            this.pdList = data.records;
+          }
+        }, error => this.errorMessage = <any> error);
+  }
+  addPdDetails(){
+    this.showParentComponent=false
+    this.showEditComponent=false
+    this.showAddComponent=!this.showAddComponent
+    
+    
+  }
+
+ editPdDetails(editID:string){
+  this.showParentComponent=false
+  this.showAddComponent=false
+  this.showEditComponent=!this.showEditComponent
+  this.parentEditData=editID
+ }
+ updateParentComponent(event:string) {
+  this.showParentComponent=!this.showParentComponent
+ if(event=='1'){
+  this.showAddComponent=!this.showAddComponent
+ }
+ else if(event=='2'){
+  this.showEditComponent=!this.showEditComponent
+ }
+  this._pd.getPdDetails()
+  .subscribe(
+      data => {
+        if (data.status == 200) {
+          this.pdList = data.records;
+        }
+      }, error => this.errorMessage = <any> error);
+}
+
+}

ng6-seed/src/app/pd-triger/pd-service/pd-triger.service.ts

@@ -38,6 +38,12 @@ export class PdTrigerService {
            catchError(this.handleError('operation', []))
          )
       }
+      getPdDetails(): Observable<any> {
+        return this._http.get<any>(this.apiUrl+"listLessPDDetails/get")
+        .pipe(
+               catchError(this.handleError('operation', []))
+             )
+          }
   
   private handleError<T>(operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {

ng6-seed/src/app/pd-triger/pd-triger-routing.module.ts

@@ -1,11 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { ListPdComponent } from './list-pd/list-pd.component';
 import { AddPdComponent } from './add-pd/add-pd.component';
 
 export const PdTrigerRoutes: Routes = [
     {
       path: '',
-      component: AddPdComponent
+      component: ListPdComponent
       // children: 
       // [{
       //    path: 'pdtriggerlist',

ng6-seed/src/app/pd-triger/pd-triger.module.ts

@@ -8,7 +8,7 @@ import {
   MatRadioModule, 
   MatButtonModule,MatTableModule,MatPaginatorModule,
   MatProgressBarModule,MatDialogModule, MatSortModule,
-  MatToolbarModule,MatSelectModule, MatListModule  } from '@angular/material';
+  MatToolbarModule,MatSelectModule, MatListModule, MatGridListModule, MatTabsModule  } from '@angular/material';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload';
@@ -22,6 +22,8 @@ import 'hammerjs';
 import { PdTrigerRoutes } from './pd-triger-routing.module';
 import { AddPdComponent } from './add-pd/add-pd.component';
 import { PdTrigerService } from './pd-service/pd-triger.service';
+import { ListPdComponent } from './list-pd/list-pd.component';
+import { EditPdComponent } from './edit-pd/edit-pd.component';
 
 @NgModule({
   imports: [
@@ -39,14 +41,14 @@ import { PdTrigerService } from './pd-service/pd-triger.service';
     FlexLayoutModule,
     NgxDatatableModule,
     FormsModule,MatSlideToggleModule,
-    MatSelectModule, MatListModule,
+    MatSelectModule, MatListModule,MatGridListModule, MatTabsModule,
     ReactiveFormsModule,
     FileUploadModule,
     TreeModule,
     MatDialogModule,
     NgxMatSelectSearchModule
   ],
-  declarations: [AddPdComponent],
+  declarations: [AddPdComponent, ListPdComponent, EditPdComponent],
   providers: [PdTrigerService]
 })
 export class PdTrigerModule { }