Merge branch 'master' of https://bitbucket.org/sriramv18/sparqsineedge

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

@@ -0,0 +1,40 @@
+<h2 mat-dialog-title class="paragraph_change">
+        <div fxFlex="70" align="left">
+                {{data.first_name}}
+        </div>
+        <div fxFlex="30" align="end">
+                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" 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="50" fxFlex.lg="60" fxFlex.xl="60">
+                    <mat-card>    
+                        <mat-card-content>
+                                    <agm-map [latitude]="lat" [longitude]="lng">
+                                        <agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.lat" [longitude]="getMap.lng"></agm-marker>
+                                    </agm-map>
+                        </mat-card-content>
+                    </mat-card>
+                </div>
+                    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="40" fxFlex.xl="40">
+                            <mat-card *ngFor="let moreDat of data.pd_details; let z=index;">
+                                    <mat-card-content>
+                                        <ol>
+                                        <li [style.color]="moreDat.pd_status=='ALLOCATED' ? allocated_color : moreDat.pd_status=='SCHEDULED' ? scheduled_color : inprogress_color">{{moreDat.pd_status | titlecase}} ( {{moreDat.applicant_name | titlecase}} )</li>
+                                        <li>{{moreDat.scheduled_on | titlecase}} </li>  
+                                        <!-- <li>{{moreDat.pd_status}}</li> -->
+                                        <li>{{moreDat.pd_type_name | titlecase}} ( Id : {{moreDat.pd_id}} ) </li>
+                                        </ol>
+                                    </mat-card-content>
+                                  </mat-card>        
+                                    
+                        </div>
+                    </div>
+</mat-dialog-content>
+<!-- <mat-dialog-actions>
+    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="right" mat-dialog-close><mat-icon>close</mat-icon></button>
+
+</mat-dialog-actions> -->

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.scss

@@ -0,0 +1,44 @@
+.paragraph_change {
+    color:  #e00201 !important;
+}
+ol {
+    list-style-type: none;
+}
+// ol li:first-child {
+//     color: #62B013;
+// }
+
+@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);
+  }
+}

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.spec.ts

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

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/allocation-view-more/allocation-view-more.component.ts

@@ -0,0 +1,48 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { GetGeometricLocationService } from './../../../location-service/get-geometric-location.service';
+
+@Component({
+  selector: 'app-allocation-view-more',
+  templateUrl: './allocation-view-more.component.html',
+  styleUrls: ['./allocation-view-more.component.scss']
+})
+export class AllocationViewMoreComponent implements OnInit {
+  lat:string
+  lng:string
+  mapDetails:any[] = [];
+  allocated_color: string = '#ffa500';
+  scheduled_color: string = '#3f51b5';
+  inprogress_color: string = '#4caf50';
+  constructor(private dialogRef: MatDialogRef<AllocationViewMoreComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any, public _geolocation: GetGeometricLocationService) {
+      //load map details
+      this.getMapViewLocations(this.data.pd_details);
+     }
+
+  ngOnInit() {
+  }
+  // get map view locations
+  getMapViewLocations(getData:any){
+    getData.forEach(element => {
+      if(element.addressline1 && element.pincode && element.state_name && element.city_name){
+        this._geolocation.findLocations(element.addressline1,element.pincode,element.state_name,element.city_name)
+      .subscribe(response => {
+          if (response.status == 'OK') {
+              this.lat = response.results[0].geometry.location.lat;
+              this.lng = response.results[0].geometry.location.lng;
+              this.mapDetails.push(response.results[0].geometry.location)
+            }
+          //  else if (response.status == 'ZERO_RESULTS') {
+          //     console.log('geocodingAPIService', 'ZERO_RESULTS', response.status);
+          // } else {
+          //     console.log('geocodingAPIService', 'Other error', response.status);
+          // }
+      });
+      }
+      
+
+    });
+  }
+
+}

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

@@ -3,12 +3,13 @@ import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/m
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotifierService } from 'angular-notifier';
 import {  MatDialog } from '@angular/material';
-import { PdTrigerService } from '../../../pd-service/pd-triger.service';
-import { GetGeometricLocationService } from '../../../location-service/get-geometric-location.service';
-import { ListPdComponent } from '../list-pd.component';
-import { PdAllocationComponent } from '../pd-allocation/pd-allocation.component';
-import { SmartPdAllocationComponent } from '../smart-pd-allocation/smart-pd-allocation.component';
-import { SchedulePdComponent } from '../schedule-pd/schedule-pd.component';
+import { PdTrigerService } from './../../../pd-service/pd-triger.service';
+import { GetGeometricLocationService } from './../../../location-service/get-geometric-location.service';
+import { ListPdComponent } from './../list-pd.component';
+import { PdAllocationComponent } from './../pd-allocation/pd-allocation.component';
+import { SmartPdAllocationComponent } from './../smart-pd-allocation/smart-pd-allocation.component';
+import { TelePdAllocationComponent } from '././../tele-pd-allocation/tele-pd-allocation.component';
+import { SchedulePdComponent } from './../schedule-pd/schedule-pd.component';
 
 @Component({
   selector: 'app-map-pd-view',
@@ -122,9 +123,11 @@ pdList:any[] = [];
 
    // pd allocation to
    pdAllocationTo(pdData:any) {
-    if(pdData.fk_pd_type != 2){
+    if(pdData.fk_pd_type == 1){
       const dialogRef = this.dialog.open(PdAllocationComponent, {
         data: pdData,
+        width: '60%',
+        maxHeight: '60%',
         disableClose: true
       });
       dialogRef.afterClosed()
@@ -136,6 +139,8 @@ pdList:any[] = [];
     else if(pdData.fk_pd_type == 2){
       const dialogRef = this.dialog.open(SmartPdAllocationComponent, {
         data: pdData,
+        width: '60%',
+        maxHeight: '60%',
         disableClose: true
       });
       dialogRef.afterClosed()
@@ -144,6 +149,20 @@ pdList:any[] = [];
         this.loadPdDetails();
       });
     }
+    else if(pdData.fk_pd_type == 3){
+      const dialogRef = this.dialog.open(TelePdAllocationComponent, {
+        data: pdData,
+        width: '60%',
+        maxHeight: '60%',
+        disableClose: true,
+      });
+      dialogRef.afterClosed()
+      .subscribe(dataresult => {
+       // this.notifier.notify('success', 'Successfully allocated.!');
+
+       this.loadPdDetails();
+      });
+    }
    
    
   }

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

@@ -1,49 +1,62 @@
-<div style="height: 550px;">
-    <div style="text-align: right">
-        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()"><mat-icon>close</mat-icon></button>
-  
-    </div>
-  <mat-card style="width: 1000px;">
-    <mat-card-header>
-      <mat-card-title>{{pageTitle}}</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-
-    <!-- <form [formGroup]="_pdAllocationForm" (submit)="onSubmit()"> -->
-     
-        <div   *ngIf="pdOfficerList.length > 0" >
-            <div fxLayout="row wrap" fxFlex="100%">
-                <div  fxLayout="row wrap" fxFlex="22%" *ngFor="let officer of pdOfficerList; ">
-                     <mat-card fxFlex="100%">
-                               <mat-card-content style="text-align:center">
-                                    <mat-radio-button [value]="officer" (change)="selectPdOfficer(officer)"></mat-radio-button>
-                                    <img [src]="officer.profile_url ||'https://image.ibb.co/mGjZB9/usernew.png'" alt="No Image" style="border-radius:50%;width:100px;height:100px;"><br>
-                                    <span>{{officer.first_name}}</span>                                   
-                                        <br>
-                                    <span>{{officer.mobile_no}}</span><br>
-                                    <span>PD in hand - {{officer.count}}</span>
-                               </mat-card-content>                     
-                             </mat-card> 
-                           </div>
-            </div>
-            
-          
-        </div>
-        <mat-list *ngIf="pdOfficerList.length == 0">
-            <mat-list-item>
-              <p>No PD officer available.</p>
-            </mat-list-item>
-        </mat-list>
-      
-    <!-- </form> -->
-    </mat-card-content>
-    <mat-card-actions>
-        <div style="text-align:right;">
-            <button mat-raised-button mat-icon-button (click)="updatePdOfficer(selectedItem)" class="mr-1 mb-1 hover-icon" type="button"><mat-icon>save</mat-icon></button>
-          </div>
-    </mat-card-actions>
-  </mat-card>
+<h2 mat-dialog-title>
+<div fxFlex="70">
+        {{pageTitle}}
 </div>
+<div fxFlex="30" align="end">
+<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
+
+</div>
+
+</h2>
+<mat-dialog-content class="mat-typography">
+  <!-- <form [formGroup]="_pdAllocationForm" (submit)="onSubmit()"> -->
+
+            <mat-list role="list" *ngIf="pdOfficerList.length > 0">
+                       
+                            <mat-list-item role="listitem" *ngFor="let officer of pdOfficerList; let i = index">
+                                    <div fxFlex="100">
+                                    <div fxLayout="row wrap">
+                                    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
+                                            <mat-radio-button color="primary" [value]="officer" (change)="selectedItem = $event.value">
+                                                    {{officer.first_name}}
+                                                </mat-radio-button>
+                                    </div>
+                                    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
+                                            <span>{{officer.mobile_no}}</span>
+                                    </div>
+                                    <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="40" fxFlex.xl="40">
+                                                 <span class="view_more" (click)="viewMoreDetails(officer)" matTooltip="View More" matTooltipPosition="right">PD in hand - {{officer.count}}</span>
+                                                 
+                                    </div>
+                                </div>
+
+                                </div>
+                                
+                                </mat-list-item>
+                    
+                </mat-list>
+                <mat-list *ngIf="pdOfficerList.length == 0">
+                                <mat-list-item>
+                                  <p>No PD officer available.</p>
+                                </mat-list-item>
+                            </mat-list>
+                
+          
+        <!-- </form> -->
+</mat-dialog-content>
+
+<mat-dialog-actions >
+        <div fxFlex="50" align="left">
+                <p *ngIf="selectedItem">PD Officer: {{selectedItem.first_name}}</p>
+        </div>
+    <div fxFlex="50" align="right">
+            <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
+            <button mat-raised-button mat-icon-button (click)="updatePdOfficer(selectedItem)" class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="below"><mat-icon>save</mat-icon></button>
+    </div>               
+        
+</mat-dialog-actions>
+
+
 <notifier-container></notifier-container>
 
 

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.scss

@@ -1,3 +1,14 @@
 .example-full-width{
     width: 100%;
-}
+}
+.view_more {
+    cursor: pointer;
+    color: #e00201 !important;
+    // text-decoration-line: underline;
+    // text-decoration-style: dotted;
+    // font-weight: bold;
+
+}
+.text_change {
+    color:  #e00201 !important;
+}

ng6-seed/src/app/personal-discussion/manage-pd/list-pd/pd-allocation/pd-allocation.component.ts

@@ -1,8 +1,9 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angular/material';
 import { FormBuilder, FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
 import { NotifierService } from 'angular-notifier';
 import { PdTrigerService } from '../../../pd-service/pd-triger.service';
+import { AllocationViewMoreComponent } from './../allocation-view-more/allocation-view-more.component';
 
 @Component({
   selector: 'app-pd-allocation',
@@ -17,10 +18,11 @@ export class PdAllocationComponent implements OnInit {
   notifier : NotifierService;
   selectedItem:any;
   isDisabled: boolean;
+ 
   constructor( notifier: NotifierService,
     private _fb: FormBuilder,
     private dialogRef: MatDialogRef<PdAllocationComponent>,
-    private _pd: PdTrigerService,
+    private _pd: PdTrigerService, private dialog: MatDialog,
     @Inject(MAT_DIALOG_DATA) public data: any) { 
     this.notifier=notifier;
   }
@@ -48,23 +50,16 @@ export class PdAllocationComponent implements OnInit {
         }
   }, error => this.errorMessage = <any> error);
     
-  }
-  // select pd officer list
-  selectPdOfficer(selected:any){
-    this.isDisabled=false;
-    this.selectedItem=selected;
-   // this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
-
   }
   /** To update pd officer*/
-  updatePdOfficer(allocateDate:any) {
-    if(this.isDisabled){
+  updatePdOfficer(allocateDetails:any) {
+    if(!allocateDetails){
       this.notifier.notify('warning', 'Please Choose PD Officer.!');
     }
      else {
       let updateData =  {
         "pd_id":this.data.pd_id,
-        "fk_pd_allocated_to":allocateDate.fk_user_id,
+        "fk_pd_allocated_to":allocateDetails.fk_user_id,
       }
       this._pd.updatePdOfficer(updateData).subscribe(
         result => {
@@ -87,4 +82,23 @@ export class PdAllocationComponent implements OnInit {
     closeAllocationComponent(): void {
       this.dialogRef.close();
     }
+   // pd officer view more 
+   viewMoreDetails(details:any){
+     if(Number(details.count) > 0) {
+      const dialogSchedule = this.dialog.open(AllocationViewMoreComponent, {
+        data: details,
+        disableClose: true,
+        position: { right: '0'},
+        width:'80%',
+        // hasBackdrop:false
+      });
+      // dialogSchedule.afterClosed()
+      // .subscribe(dataresult => {
+      // });
+     }
+     else {
+      this.notifier.notify('warning', 'No PD In Hand');
+
+     }   
+}
 }

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

@@ -1,121 +1,102 @@
-<div style="max-height: 550px;">
-  <div style="text-align: right">
-      <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()"><mat-icon>close</mat-icon></button>
-
-  </div>
-    
-    <mat-card style="width: 1000px; padding: 2px;" [style.display]="showFirstCard ? 'block' : 'none'">
-      <mat-card-header>
-        <mat-card-title>{{pageTitle}}</mat-card-title>
-      </mat-card-header>
-      <mat-card-content>
-  
-      <!-- <form [formGroup]="_pdAllocationForm" (submit)="onSubmit()"> -->
-          <div   *ngIf="pdCentralOfficerList.length > 0" >
-            <div fxLayout="row wrap" fxFlex="100%">
-                <div  fxLayout="row wrap" fxFlex="22%" *ngFor="let officer of pdCentralOfficerList; ">
-                    <!-- <p><mat-radio-button [value]="officer" (change)="selectPdOfficer(officer)"></mat-radio-button>
-                         {{officer.first_name}}
-                       </p>
-                       <p style="padding-left: 8%;">
-                           <span matBadge="{{officer.allocated}}" matBadgeOverlap="false" matBadgeColor="accent">Allocated</span>
-                         </p>
-                         <p style="padding-left: 8%;">
-                             <span matBadge="{{officer.scheduled}}" matBadgeOverlap="false" >Scheduled</span>
-                           </p>
-                           <p style="padding-left: 8%;">
-                               <span matBadge="{{officer.inprogress}}" matBadgeOverlap="false" matBadgeColor="warn">Inprogress</span>
-                             </p>
-                           -->
-                          
-                             <mat-card fxFlex="100%">
-                               <mat-card-content style="text-align:center">
-                                    <mat-radio-button [value]="officer" (change)="selectPdOfficer(officer)"></mat-radio-button>
-                                    <img [src]="officer.profile_url ||'https://image.ibb.co/mGjZB9/usernew.png'" alt="No Image" style="border-radius:50%;width:100px;height:100px;"><br>
-                                    <span>{{officer.first_name}}</span>                                   
-                                        <br>
-                                    <span>{{officer.mobile_no}}</span> <br>
-                                    <span>PD in hand - {{officer.count}}</span>                                   
-                               </mat-card-content>                     
-                             </mat-card> 
-                           </div>
-            </div>
-          </div>
-          <mat-list *ngIf="pdCentralOfficerList.length == 0">
-              <mat-list-item>
-                <p>No executive available.</p>
-              </mat-list-item>
-          </mat-list>
+<h2 mat-dialog-title>
+        <div fxFlex="70">
+                {{pageTitle}}
+        </div>
+        <div fxFlex="30" align="end">
+        <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="closeAllocationComponent()" matTooltip="Close" matTooltipPosition="below"><mat-icon>close</mat-icon></button>
         
-      <!-- </form> -->
-      </mat-card-content>
-      <mat-card-actions>
-          <div style="text-align:right;">
-              <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" [disabled]="selectedItem.length==0" (click)="getSecondCard()"><mat-icon>arrow_forward</mat-icon></button>
+        </div>
+        
+        </h2>
+        <mat-dialog-content class="mat-typography">
+          <!-- <form [formGroup]="_pdAllocationForm" (submit)="onSubmit()"> -->
+                    <!-- This Container for central pd officer -->
+            <div *ngIf="showFirstCard">
+                            <mat-list role="list" *ngIf="pdCentralOfficerList.length > 0">
+                               
+                                    <mat-list-item role="listitem" *ngFor="let officer of pdCentralOfficerList; let i = index">
+                                            <div fxFlex="100">
+                                            <div fxLayout="row wrap">
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
+                                                    <mat-radio-button color="primary" [checked]="checkFirstItem==officer.fk_user_id" [value]="officer" (change)="selectedCentralItem = $event.value">
+                                                            {{officer.first_name}}
+                                                        </mat-radio-button>
+                                            </div>
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
+                                                    <span>{{officer.mobile_no}}</span>
+                                            </div>
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="40" fxFlex.xl="40">
+                                                         <span class="view_more" (click)="viewMoreDetails(officer)" matTooltip="View More" matTooltipPosition="right">PD in hand - {{officer.count}}</span>
+                                                         
+                                            </div>
+                                        </div>
+        
+                                        </div>
+                                        
+                                        </mat-list-item>
+                            
+                        </mat-list>
+                        <mat-list *ngIf="pdCentralOfficerList.length == 0">
+                                        <mat-list-item>
+                                          <p>No central officer available.</p>
+                                        </mat-list-item>
+                                    </mat-list>
+                    </div>
+                    <!-- end -->
+                    <!-- this container for executive pd officer -->
+                    <div *ngIf="showSecondCard">
+                            <mat-list role="list" *ngIf="pdExcutiveList.length > 0">
+                                    <mat-list-item role="listitem" *ngFor="let excutive of pdExcutiveList; let e = index">
+                                            <div fxFlex="100">
+                                            <div fxLayout="row wrap">
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
+                                                    <mat-radio-button color="primary" [checked]="checkSecondItem==excutive.fk_user_id" [value]="excutive" (change)="selectedExcutiveItem = $event.value">
+                                                            {{excutive.first_name}}
+                                                        </mat-radio-button>
+                                            </div>
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="30" fxFlex.lg="30" fxFlex.xl="30">
+                                                    <span>{{excutive.mobile_no}}</span>
+                                            </div>
+                                            <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="40" fxFlex.xl="40">
+                                                         <span class="view_more" (click)="viewMoreDetails(excutive)" matTooltip="View More" matTooltipPosition="right">PD in hand - {{excutive.count}}</span>
+                                                         
+                                            </div>
+                                        </div>
+        
+                                        </div>
+                                        
+                                        </mat-list-item>
+                            
+                        </mat-list>
+                        <mat-list *ngIf="pdExcutiveList.length == 0">
+                                        <mat-list-item>
+                                          <p>No executive available.</p>
+                                        </mat-list-item>
+                                    </mat-list>
+                    </div>
+                    <!-- end -->
 
-          </div>
-      </mat-card-actions>
-    </mat-card>
-    <mat-card style="width: 580px; padding: 2px;" [style.display]="showSecondCard ? 'block' : 'none'">
-        <mat-card-header>
-          <mat-card-title>{{pageTitle2}}</mat-card-title>
-        </mat-card-header>
-        <mat-card-content>
-            
-                <div   *ngIf="pdExcutiveList.length > 0" >
-                        <div fxLayout="row wrap" fxFlex="100%">
-                            <div  fxLayout="row wrap" fxFlex="22%" *ngFor="let excutive of pdExcutiveList">
-                                <mat-card fxFlex="100%">
-                                <mat-card-content style="text-align:center">
-                                <mat-radio-button [value]="excutive" (change)="selectExcutiveOfficer(excutive)"></mat-radio-button>
-                                    <img [src]="excutive.profile_url ||'https://image.ibb.co/mGjZB9/usernew.png'" alt="No Image" style="border-radius:50%;width:100px;height:100px;"><br>
-                                    <span>{{excutive.first_name}}</span>                                   
-                                        <br>
-                                    <span>{{excutive.mobile_no}}</span>  <br>
-                                    <span>PD in hand - {{excutive.count}}</span>                                 
-                                </mat-card-content>                     
-                                </mat-card> 
-                            </div>
-                        </div>
-                </div>    
-            <!----<mat-list *ngIf="pdExcutiveList.length > 0">
-                <mat-radio-group>
-                <mat-list-item *ngFor="let excutive of pdExcutiveList">
-                  <p><mat-radio-button [value]="excutive" (change)="selectExcutiveOfficer(excutive)"></mat-radio-button>
-                      {{excutive.first_name}}
-                    </p>
-                    <p style="padding-left: 8%;">
-                        <span matBadge="{{excutive.allocated}}" matBadgeOverlap="false" matBadgeColor="accent">Allocated</span>
-                      </p>
-                      <p style="padding-left: 8%;">
-                          <span matBadge="{{excutive.scheduled}}" matBadgeOverlap="false" >Scheduled</span>
-                        </p>
-                        <p style="padding-left: 8%;">
-                            <span matBadge="{{excutive.inprogress}}" matBadgeOverlap="false" matBadgeColor="warn">Inprogress</span>
-                          </p>
+ 
                         
-                </mat-list-item>
-              </mat-radio-group>
-              </mat-list> -->
-              <mat-list *ngIf="pdExcutiveList.length == 0">
-                  <mat-list-item>
-                    <p>No central officer available.</p>
-                  </mat-list-item>
-              </mat-list>
-
-          
-        <!-- </form> -->
-        </mat-card-content>
-        <mat-card-actions>
-            <div style="text-align:right;">
-                <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" [disabled]="selectedItem.length==0" (click)="getFirstCard()"><mat-icon>arrow_back</mat-icon></button>
-                <button mat-raised-button mat-icon-button (click)="updateAllocation(selectedItem,selectedItem1)" [disabled]="selectedItem.length==0 || selectedItem1.length==0" class="mr-1 mb-1 hover-icon" type="button"><mat-icon>save</mat-icon></button>
-
-            </div>
-        </mat-card-actions>
-      </mat-card>
-  </div>
-  <notifier-container></notifier-container>
+                  
+                <!-- </form> -->
+        </mat-dialog-content>
+        
+        <mat-dialog-actions >
+                <div fxFlex="50" align="left">
+                        <p *ngIf="selectedCentralItem">Central Officer: {{selectedCentralItem.first_name | titlecase }}</p>
+                        <p *ngIf="selectedExcutiveItem">Executive: {{selectedExcutiveItem.first_name | titlecase}}</p>
+                </div>
+            <div fxFlex="50" align="end">
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="getSecondCard()" matTooltip="Next" matTooltipPosition="below" *ngIf="showFirstCard"><mat-icon>arrow_forward</mat-icon></button>
+                    <button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="getFirstCard()" *ngIf="showSecondCard" matTooltip="Back" matTooltipPosition="below"><mat-icon>arrow_back</mat-icon></button>
+                    <button mat-raised-button mat-icon-button (click)="updateAllocation(selectedCentralItem,selectedExcutiveItem)" class="mr-1 mb-1 hover-icon" type="button" matTooltip="Allocate" matTooltipPosition="below" *ngIf="showSecondCard"><mat-icon>save</mat-icon></button>
+            </div>               
+                
+        </mat-dialog-actions>
+        
+        
+        <notifier-container></notifier-container>