pd view map changes

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/view-pd/view-pd.component.html

@@ -93,9 +93,9 @@
                        </div>
                          <div fxLayout="row">
                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100" class="profile-center">
-                                <div fxFlex="10">
+                                <div fxFlex="10" appPdLocatedMapView [value]="master">
                                   <!-- <span><i class="fa-1x fa fa-map-marker" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i></span> -->
-                                  <span><i class="fa-1x fa fa-map-marker" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;" (click)="Maponclick(master)" matTooltip="Map View" matTooltipPosition="left"></i></span>
+                                  <span><i class="fa-1x fa fa-map-marker" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i></span>
                                 </div> 
                                 <div fxFlex="90">                        
                              <span *ngIf="master.state_name" class="hover-icon"> {{master.addressline1}},<br> {{master.city_name}},<br>{{master.state_name}}-{{master.pincode_id == 1 ? master.other_pincode : master.pincode }} </span>

ng6-seed/src/app/personal-discussion/manage-pd/manage-pd.module.ts

@@ -109,6 +109,9 @@ import { ManageOtherBusinessIncomeComponent } from './list-pd/start-pd/forms/ass
 import { GrossProfitCalculationComponent } from './list-pd/start-pd/forms/assessed-income/gross-profit-calculation/gross-profit-calculation.component';
 import { ManageDailySalesComponent } from './list-pd/start-pd/forms/assessed-income/AI-diologue/manage-daily-sales/manage-daily-sales.component';
 import { PdStatusChangeDialogueComponent } from './list-pd/pd-status-change-dialogue/pd-status-change-dialogue.component';
+import { PdLocatedMapViewDirective } from './../pd-directive/pd-located-map-view.directive';
+import { ViewLocationComponent } from './../pd-directive/view-location/view-location.component';
+
 /**
  * Custom angular notifier options
  */
@@ -154,7 +157,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
 };
 
 @NgModule({
-    declarations: [RentalInfoComponent, TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent, SearchRelationPipe, DeleteRecordsCountPipe, BusinessAssetsInfoComponent, BusinessBankingDetailsComponent, SalesDetailsComponent, DailySalesDetailsComponent, SalesCalculationComponent, ManageSalesComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent],
+    declarations: [RentalInfoComponent, TelePdAllocationComponent, FinancialInfoComponent, BusinessInfoComponent, EmploymentInfoComponent, StockComponent, BankingDetailsComponent, ListPdComponent, FamilyDetailsComponent, AddressComponent, ManagePdComponent, MapPdViewComponent, AddPdComponent, ViewPdComponent, PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, InprogressPdComponent, AllPdComponent, ScheduledPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, CurrentLoanComponent, AssetsInfoComponent, LoanDetailsComponent, OtherIncomeComponent, SupplierInfoComponent, PersonalInfoComponent, LenderRepresentativeComponent, PdReportComponent, AssessedIncomeComponent, AllocationViewMoreComponent, PdRequirementComponent, GeneralInfoComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent, SearchRelationPipe, DeleteRecordsCountPipe, BusinessAssetsInfoComponent, BusinessBankingDetailsComponent, SalesDetailsComponent, DailySalesDetailsComponent, SalesCalculationComponent, ManageSalesComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent, PdLocatedMapViewDirective, ViewLocationComponent],
     imports: [
     CommonModule,
     ManagePdRoutingModule,
@@ -187,13 +190,13 @@ const pdCustomNotifierOptions: NotifierOptions = {
     AgmCoreModule.forRoot({apiKey: 'AIzaSyBtdO5k6CRntAMJCF-H5uZjTCoSGX95cdk'}),OwlDateTimeModule, 
          OwlNativeDateTimeModule,
   ],
-  exports: [PdAllocationComponent, SmartPdAllocationComponent, TelePdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, AllocationViewMoreComponent, GeneralInfoComponent, PdRequirementComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, BusinessOtherFamilyMemberComponent, BusinessInfoGroupComponent,DailySalesDetailsComponent, SalesCalculationComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent],
+  exports: [PdAllocationComponent, SmartPdAllocationComponent, TelePdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, StartPdComponent, CompletedPdComponent, QcCompletedPdComponent, ClientInfoComponent, SupplierInfoComponent, PersonalInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, AllocationViewMoreComponent, GeneralInfoComponent, PdRequirementComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, BusinessOtherFamilyMemberComponent, BusinessInfoGroupComponent,DailySalesDetailsComponent, SalesCalculationComponent, PurchaseDetailsComponent, BusinessExpenseDetailsComponent, HouseHoldDetailsComponent, OtherBusinessIncomeDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, GrossProfitCalculationComponent, ManageDailySalesComponent, PdStatusChangeDialogueComponent, ViewLocationComponent],
   providers: [PdTrigerService, GetGeometricLocationService,{provide: MAT_DATE_LOCALE, useValue: 'en-GB'},
             {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
-            {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}],
+            {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}, PdLocatedMapViewDirective],
 
   entryComponents: [PdAllocationComponent, SmartPdAllocationComponent, SchedulePdComponent, EditPdApplicantComponent, EditPdMasterComponent, TelePdAllocationComponent, AllocationViewMoreComponent, PersonalInfoComponent,BusinessAssetsInfoComponent,
-     ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent,BusinessBankingDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, ManageDailySalesComponent,PdStatusChangeDialogueComponent],
+     ClientInfoComponent, SupplierInfoComponent, CurrentLoanComponent, LoanDetailsComponent, OtherIncomeComponent, AssetsInfoComponent, AddressComponent, FamilyDetailsComponent, BankingDetailsComponent, StockComponent, EmploymentInfoComponent, BusinessInfoComponent, FinancialInfoComponent, LenderRepresentativeComponent,RentalInfoComponent, AssessedIncomeComponent, GeneralInfoComponent, PdRequirementComponent, ModelEditPdReportComponent, OtherApplicantDetailsComponent, NeighbourHoodComponent, DialogChangeCurrentVenrsion, FinalRemarksComponent, BusinessOtherFamilyMemberComponent, QcReviewComponent, BusinessInfoGroupComponent,BusinessBankingDetailsComponent, ManageSalesComponent, ManagePurchaseComponent, ManageBusinesExpenseComponent, ManageHouseHoldComponent, ManageOtherBusinessIncomeComponent, ManageDailySalesComponent,PdStatusChangeDialogueComponent, ViewLocationComponent],
 
 })
 export class ManagePdModule {

ng6-seed/src/app/personal-discussion/pd-directive/pd-located-map-view.directive.ts

@@ -0,0 +1,48 @@
+import { Directive, OnInit, ElementRef, Renderer2 ,HostListener,HostBinding,Input} from '@angular/core';
+import {  MatDialog,MatDialogRef,MAT_DIALOG_DATA } from '@angular/material';
+import { GetGeometricLocationService } from './../location-service/get-geometric-location.service';
+import { ViewLocationComponent } from './../pd-directive/view-location/view-location.component';
+
+@Directive({
+  selector: '[appPdLocatedMapView]'
+})
+export class PdLocatedMapViewDirective {
+
+  @Input() value:any;
+  @HostBinding('style.cursor') evPoint : string = 'none';
+  lat : String;
+  lang: String;
+  constructor(private elm : ElementRef , private render:Renderer2,private dialog: MatDialog, private _geolocation: GetGeometricLocationService) { }
+  ngOnInit()
+  {
+  }
+  
+  @HostListener('mouseenter') mouseover(event: Event){
+    this.evPoint = 'pointer';
+  }
+
+  @HostListener('click') onclick(event: Event)
+{
+    if(this.value.addressline1 && this.value.pincode && this.value.state_name && this.value.city_name){
+      this._geolocation.findLocations(this.value.addressline1,this.value.pincode,this.value.state_name,this.value.city_name)
+    .subscribe(response => {
+        if (response.status == 'OK') {
+            this.lat = response.results[0].geometry.location.lat;
+            this.lang = response.results[0].geometry.location.lng;
+            const dialogRef = this.dialog.open(ViewLocationComponent, {
+              data: {"lat": this.lat, "lang":this.lang},
+              disableClose: false,
+              minWidth:'30%',
+              maxWidth:'30%',
+            });
+        }
+    });
+  }
+   
+}
+@HostListener('mouseleave') mouseleave(event: Event)
+{
+  this.evPoint = 'none';
+}
+
+}

ng6-seed/src/app/personal-discussion/pd-directive/view-location/view-location.component.html

@@ -0,0 +1,26 @@
+<h2 mat-dialog-title>
+  <div fxFlex="70" align="left">
+         PD Location
+  </div>
+  <div fxFlex="30" align="end">
+          <button class="mr-1 mb-1" mat-mini-fab color="primary" type="button" mat-dialog-close><mat-icon>close</mat-icon></button>
+  </div>
+</h2>
+<mat-dialog-content>
+    <div fxLayout="row wrap">
+        <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
+            <mat-card>    
+                <mat-card-content>
+                  <agm-map [latitude]="data.lat" [longitude]="data.lang">
+                  <agm-marker [latitude]="data.lat" [longitude]="data.lang"></agm-marker>
+                  </agm-map>
+                </mat-card-content>
+              </mat-card>
+            </div>
+          </div>
+</mat-dialog-content>
+<!-- <mat-dialog-actions align="end">
+  <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above" mat-dialog-close><mat-icon>close</mat-icon></button>
+</mat-dialog-actions> -->
+
+

ng6-seed/src/app/personal-discussion/pd-directive/view-location/view-location.component.scss

@@ -0,0 +1,48 @@
+@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: 350px;
+  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);
+}
+::ng-deep .mat-dialog-container{
+    overflow: hidden;
+}
+
+@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);
+  }
+}
+::-webkit-scrollbar {
+    width: 0px;  /* remove scrollbar space */
+    background: transparent;  /* optional: just make scrollbar invisible */
+}
+/* optional: show position indicator in red */
+::-webkit-scrollbar-thumb {
+    background: #FF0000;
+}
+::ng-deep .body-container{
+  padding:0px !important;
+}

ng6-seed/src/app/personal-discussion/pd-directive/view-location/view-location.component.spec.ts

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

ng6-seed/src/app/personal-discussion/pd-directive/view-location/view-location.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input, Output, Inject } from '@angular/core';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
+
+@Component({
+  selector: 'app-view-location',
+  templateUrl: './view-location.component.html',
+  styleUrls: ['./view-location.component.scss']
+})
+export class ViewLocationComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<ViewLocationComponent>) { }
+
+  ngOnInit() {
+    console.log(this.data);
+  }
+
+}