map pd view changes
This commit is contained in:
gandhimathi
parent
6a383a4cf8
commit
70df2c85df
@ -1,6 +1,6 @@
|
||||
<div align="right" *ngIf="showParentComponent">
|
||||
<button mat-fab class="mr-1 mb-1" color="primary" (click)="addPdDetails()"><mat-icon>add</mat-icon></button>
|
||||
|
||||
<button mat-fab class="mr-1 mb-1" color="accent" (click)="viewMapPdDetails()"><mat-icon>navigation</mat-icon></button>
|
||||
</div>
|
||||
<mat-card *ngIf="showParentComponent">
|
||||
<mat-tab-group>
|
||||
@ -128,4 +128,5 @@
|
||||
<app-edit-pd *ngIf="showEditComponent" [childData]="parentEditData" (loadParent)="updateParentComponent($event)"></app-edit-pd>
|
||||
<app-add-pd *ngIf="showAddComponent" (loadParent)="updateParentComponent($event)"></app-add-pd>
|
||||
<app-view-pd *ngIf="showViewComponent" [childData]="parentViewData" (loadParent)="updateParentComponent($event)"></app-view-pd>
|
||||
<app-map-pd-view *ngIf="showMapViewComponent"></app-map-pd-view>
|
||||
<notifier-container></notifier-container>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { Component, ViewChild, OnInit, ViewEncapsulation, EventEmitter, Output } from '@angular/core';
|
||||
import { PdTrigerService } from '../pd-service/pd-triger.service';
|
||||
import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
|
||||
|
||||
//import { MapPdViewComponent } from '../map-pd-view/map-pd-view.component';
|
||||
@Component({
|
||||
selector: 'app-list-pd',
|
||||
templateUrl: './list-pd.component.html',
|
||||
@ -16,6 +16,7 @@ export class ListPdComponent implements OnInit {
|
||||
showAddComponent:boolean;
|
||||
showEditComponent:boolean;
|
||||
showViewComponent:boolean;
|
||||
showMapViewComponent:boolean;
|
||||
errorMessage: any;
|
||||
public paginationList: any[] = [];
|
||||
// pagination variable details
|
||||
@ -92,6 +93,7 @@ export class ListPdComponent implements OnInit {
|
||||
this.showAddComponent=false
|
||||
this.showEditComponent=false
|
||||
this.showViewComponent=false
|
||||
this.showMapViewComponent=false
|
||||
this._pd.getPdDetails()
|
||||
.subscribe(
|
||||
data => {
|
||||
@ -130,6 +132,12 @@ export class ListPdComponent implements OnInit {
|
||||
this.showViewComponent=!this.showViewComponent
|
||||
this.parentViewData=editID
|
||||
}
|
||||
viewMapPdDetails(){
|
||||
this.showParentComponent=false
|
||||
this.showAddComponent=false
|
||||
this.showEditComponent=false
|
||||
this.showMapViewComponent=!this.showMapViewComponent;
|
||||
}
|
||||
updateParentComponent(event:string) {
|
||||
this.showParentComponent=!this.showParentComponent
|
||||
if(event=='1'){
|
||||
@ -158,6 +166,8 @@ export class ListPdComponent implements OnInit {
|
||||
}
|
||||
}, error => this.errorMessage = <any> error);
|
||||
}
|
||||
|
||||
|
||||
pageChange(e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
@ -0,0 +1,213 @@
|
||||
<div fxLayout="row">
|
||||
<div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<mat-card class="mb-2" >
|
||||
<mat-card-header>
|
||||
<!-- <img mat-card-avatar src="assets/images/avatar.jpg"> -->
|
||||
<mat-card-title>Search Options</mat-card-title>
|
||||
<mat-card-subtitle>Header subtitle</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<!-- <img mat-card-image src="assets/images/coridoor.jpg"> -->
|
||||
<mat-card-content>
|
||||
<div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
|
||||
<!-- <mat-card class="mb-2" >
|
||||
<mat-card-content> -->
|
||||
<!-- <mat-list dense>
|
||||
<mat-list-item > -->
|
||||
<!-- <img mat-list-avatar src="assets/images/lime.jpg" alt=""> -->
|
||||
<!-- <h3 mat-line>Icci</h3>
|
||||
<p mat-line>9159996676</p> -->
|
||||
|
||||
<!-- <h3 mat-line>{{details.applicat_details[0].applicant_name}} </h3>
|
||||
|
||||
<p mat-line><span style="padding-right: 7%;">{{details.lender_full_name}} </span><span style="padding-right: 7%">{{details.lender_applicant_id}}</span></p>
|
||||
<p mat-line> {{details.pd_date_of_initiation}}</p> -->
|
||||
<!-- <mat-card class="mb-2" *ngFor="let details of dataSource.connect() | async">
|
||||
<mat-card-title>{{details.applicat_details[0].applicant_name}}</mat-card-title>
|
||||
<mat-card-subtitle >{{details.applicat_details[0].applicant_name}}</mat-card-subtitle>
|
||||
<mat-card-content>
|
||||
<p mat-line class="hover-icon"><i class="fa-1x fa fa-map-rupee"> </i> {{details.loan_amount}}</p>
|
||||
<p mat-line class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}/{{details.state_name}}-{{details.pincode}}</p>
|
||||
|
||||
</mat-card-content>
|
||||
<hr>
|
||||
<mat-card-actions>
|
||||
<button mat-button color="accent">Action</button>
|
||||
<button mat-button>Cancel</button>
|
||||
</mat-card-actions>
|
||||
</mat-card> -->
|
||||
<mat-expansion-panel *ngFor="let details of dataSource.connect() | async">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
<b> {{details.applicat_details[0].applicant_name}} </b>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{details.product_abbr}}/{{details.subproduct_abbr}}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<p mat-line>Lendor ID:{{details.lender_applicant_id}}</p>
|
||||
<p mat-line>Lendor Name:{{details.lender_full_name}}</p>
|
||||
<p mat-line>Date Of Initiation:{{details.pd_date_of_initiation}}</p>
|
||||
<p mat-line class="hover-icon"><i class="fa-1x fa fa-rupee"> </i>{{details.loan_amount}}
|
||||
</p>
|
||||
<p mat-line>
|
||||
<button mat-raised-button mat-button-sm mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="pdAllocationTo(master)"><mat-icon>directions_run</mat-icon></button>
|
||||
|
||||
</p>
|
||||
|
||||
|
||||
</mat-expansion-panel>
|
||||
<!-- <p mat-line><a style="padding-right: 7%;">{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}</a><a style="padding-right: 7%;"><span class="hover-icon"><i class="fa-1x fa fa-rupee"> </i>{{details.loan_amount}}</span></a><span class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}/{{details.state_name}}-{{details.pincode}}</span></p> -->
|
||||
|
||||
<!-- <mat-divider></mat-divider>
|
||||
</mat-list-item>
|
||||
|
||||
</mat-list> -->
|
||||
<mat-list *ngIf="recordStatus">
|
||||
<mat-list-item>
|
||||
<p mat-line>No Record Found ...</p>
|
||||
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<!-- </mat-card-content> -->
|
||||
<!-- <mat-card-actions *ngIf="!recordStatus"> -->
|
||||
<mat-paginator #paginator [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
|
||||
</mat-paginator>
|
||||
<!-- </mat-card-actions>
|
||||
</mat-card> -->
|
||||
</div>
|
||||
<div class="column" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="66.66" fxFlex.lg="66.66" fxFlex.xl="66.66">
|
||||
<mat-card class="mb-2">
|
||||
<agm-map [latitude]="lat" [longitude]="lng">
|
||||
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
|
||||
</agm-map>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row">
|
||||
<div align="right">
|
||||
<button mat-fab class="mr-1 mb-1" color="accent"><mat-icon>close</mat-icon></button>
|
||||
</div>
|
||||
<mat-card>
|
||||
<mat-tab-group>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>All</ng-template>
|
||||
<mat-card-content>
|
||||
<div class="card-comment-widget">
|
||||
<mat-list *ngIf="pdList.length > 0">
|
||||
<mat-list-item *ngFor="let details of dataSource.connect() | async">
|
||||
<img mat-list-avatar src="assets/images/lime.jpg" alt="">
|
||||
<!-- {{details.applicat_details[0].applicant_name}} -->
|
||||
<p mat-line>{{details.applicat_details[0].applicant_name}} </p>
|
||||
|
||||
<p mat-line><a style="padding-right: 7%;">{{details.lender_full_name}} </a><a style="padding-right: 7%">{{details.lender_applicant_id}}</a>{{details.pd_date_of_initiation}}</p>
|
||||
<p mat-line><a style="padding-right: 7%;">{{details.product_abbr}}/{{details.subproduct_abbr}}/{{details.customer_segment_abbr}}</a><a style="padding-right: 7%;"><span class="hover-icon"><i class="fa-1x fa fa-rupee"> </i>{{details.loan_amount}}</span></a><span class="hover-icon"><i class="fa-1x fa fa-map-marker"> </i> {{details.city_name}}/{{details.state_name}}-{{details.pincode}}</span></p>
|
||||
<!-- <span class="text-mat mat-text-muted">Chennai</span> -->
|
||||
|
||||
<!-- <div class="comment-time">
|
||||
<button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" type="button" color="primary" (click)="editPdDetails(details.pd_id)"><mat-icon>edit</mat-icon></button>
|
||||
|
||||
</div> -->
|
||||
<div class="comment-time">
|
||||
|
||||
<!-- <button mat-raised-button mat-icon-button mat-button-sm class="mr-1 mb-1" color="accent" type="button" (click)="viewPdDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button> -->
|
||||
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="viewPdDetails(details.pd_id)"><mat-icon>visibility</mat-icon></button>
|
||||
</div>
|
||||
|
||||
</mat-list-item>
|
||||
<hr>
|
||||
</mat-list>
|
||||
<mat-list *ngIf="recordStatus">
|
||||
<mat-list-item>
|
||||
<p mat-line>No Record Found ...</p>
|
||||
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions *ngIf="!recordStatus">
|
||||
<mat-paginator #paginator class="mat-elevation-z1" [length]="pdList.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
|
||||
[pageSizeOptions]="[5, 10, 25, 100]" (page)="pageEvent = $event; pageChange($event)">
|
||||
</mat-paginator>
|
||||
</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 </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>Scheduled </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>Completed </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-group>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -0,0 +1,34 @@
|
||||
@import "../../../assets/styles/scss/material.variables";
|
||||
|
||||
:host {
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
margin-top: -5px;
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
.sebm-google-map-container {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
$mat-toolbar-height-desktop: 64px !default;
|
||||
$mat-toolbar-height-mobile-portrait: 56px !default;
|
||||
$mat-toolbar-height-mobile-landscape: 48px !default;
|
||||
|
||||
.mat-card-top {
|
||||
margin-top: -($mat-toolbar-height-desktop);
|
||||
}
|
||||
|
||||
@media ($mat-xsmall) and (orientation: portrait) {
|
||||
.mat-card-top {
|
||||
margin-top: -($mat-toolbar-height-mobile-portrait);
|
||||
}
|
||||
}
|
||||
|
||||
@media ($mat-small) and (orientation: landscape) {
|
||||
.mat-card-top {
|
||||
margin-top: -($mat-toolbar-height-mobile-landscape);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MapPdViewComponent } from './map-pd-view.component';
|
||||
|
||||
describe('MapPdViewComponent', () => {
|
||||
let component: MapPdViewComponent;
|
||||
let fixture: ComponentFixture<MapPdViewComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MapPdViewComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MapPdViewComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,54 @@
|
||||
import { Component, ViewChild, OnInit } from '@angular/core';
|
||||
import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material';
|
||||
|
||||
import { NotifierService } from 'angular-notifier';
|
||||
import { PdTrigerService } from '../pd-service/pd-triger.service';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-map-pd-view',
|
||||
templateUrl: './map-pd-view.component.html',
|
||||
styleUrls: ['./map-pd-view.component.scss']
|
||||
})
|
||||
export class MapPdViewComponent implements OnInit {
|
||||
lat = -34.397;
|
||||
lng = 150.644;
|
||||
recordStatus: boolean;
|
||||
errorMessage: any;
|
||||
// pagination variable details
|
||||
length = 50;
|
||||
pageIndex = 0;
|
||||
pageSize = 10;
|
||||
pageEvent: PageEvent;
|
||||
// data source variable details
|
||||
pdListData = null;
|
||||
public dataLength: number;
|
||||
public dataSource = new MatTableDataSource();
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
pdList:any[] = [];
|
||||
constructor(private _pd: PdTrigerService) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.recordStatus=false
|
||||
this._pd.getPdDetails()
|
||||
.subscribe(
|
||||
data => {
|
||||
if (data.status == 200) {
|
||||
this.pdList = data.records;
|
||||
this.pdListData = data.records;
|
||||
this.dataLength = data.records.length;
|
||||
this.dataSource.data = this.pdListData;
|
||||
|
||||
}
|
||||
else{
|
||||
this.pdList=[];
|
||||
this.dataLength = null;
|
||||
this.recordStatus=true;
|
||||
}
|
||||
}, error => this.errorMessage = <any> error);
|
||||
}
|
||||
|
||||
}
|
||||
@ -8,7 +8,7 @@ import {
|
||||
MatRadioModule,
|
||||
MatButtonModule,MatTableModule,MatPaginatorModule,
|
||||
MatProgressBarModule,MatDialogModule, MatSortModule,
|
||||
MatToolbarModule,MatSelectModule, MatListModule, MatGridListModule, MatTabsModule, MatCheckboxModule, MatBadgeModule } from '@angular/material';
|
||||
MatToolbarModule,MatSelectModule, MatListModule, MatGridListModule, MatTabsModule, MatCheckboxModule, MatBadgeModule, MatExpansionModule } 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';
|
||||
@ -19,6 +19,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
|
||||
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
|
||||
import { NotifierModule, NotifierOptions } from 'angular-notifier';
|
||||
import { AgmCoreModule } from '@agm/core';
|
||||
|
||||
import 'hammerjs';
|
||||
import { PdTrigerRoutes } from './pd-triger-routing.module';
|
||||
@ -30,6 +31,7 @@ import { ViewPdComponent } from './view-pd/view-pd.component';
|
||||
import { EditPdMasterComponent } from './edit-pd-master/edit-pd-master.component';
|
||||
import { EditPdApplicantComponent } from './edit-pd-applicant/edit-pd-applicant.component';
|
||||
import { PdAllocationComponent } from './pd-allocation/pd-allocation.component';
|
||||
import { MapPdViewComponent } from './map-pd-view/map-pd-view.component';
|
||||
/**
|
||||
* Custom angular notifier options
|
||||
*/
|
||||
@ -95,9 +97,10 @@ const pdCustomNotifierOptions: NotifierOptions = {
|
||||
FileUploadModule,
|
||||
TreeModule,
|
||||
MatDialogModule,MatSortModule,
|
||||
NgxMatSelectSearchModule,MatTooltipModule,
|
||||
NgxMatSelectSearchModule,MatTooltipModule, MatExpansionModule,
|
||||
AgmCoreModule.forRoot({apiKey: 'AIzaSyBtdO5k6CRntAMJCF-H5uZjTCoSGX95cdk'}),
|
||||
],
|
||||
declarations: [AddPdComponent, ListPdComponent, EditPdComponent, ViewPdComponent, EditPdMasterComponent, EditPdApplicantComponent, PdAllocationComponent],
|
||||
declarations: [AddPdComponent, ListPdComponent, EditPdComponent, ViewPdComponent, EditPdMasterComponent, EditPdApplicantComponent, PdAllocationComponent, MapPdViewComponent],
|
||||
entryComponents:[PdAllocationComponent],
|
||||
providers: [PdTrigerService]
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user