Fairoj : PD Limit changed to 10 days and sales pd advanced filter implemented

ng6-seed/src/app/_guard/token.interceptor.ts

@@ -4,7 +4,8 @@ import {
   HttpHandler,
   HttpEvent,
   HttpInterceptor,
-  HttpHeaders
+  HttpHeaders,
+  HttpResponse
 } from '@angular/common/http';
 // import { AuthGuard } from './auth.guard';
 import { Observable,  of  } from 'rxjs';
@@ -15,16 +16,18 @@ import { HttpErrorResponse } from "@angular/common/http";
 
 import { CognitoService } from '../AwsService/cognito.service';
 import {environment} from '../../environments/environment'
+import { LoaderService } from 'app/shared/loaderService/loader.service';
 
 @Injectable()
 export class TokenInterceptor implements HttpInterceptor{
-  constructor( private router: Router,public shared:CognitoService) {}
+  constructor( private router: Router,public shared:CognitoService,private loaderService:LoaderService) {}
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     // request = request.clone({
     //   setHeaders: {
     //     Authorization: `${this.auth.getToken()}`
     //   }
     // });
+    this.showLoader();
     let token:any = this.shared.getAccessToken() ||"";
     //console.log(token);
          let requests = request.clone({
@@ -34,9 +37,15 @@ export class TokenInterceptor implements HttpInterceptor{
                     'Token': token.getIdToken().getJwtToken()
                 })    
         });
-    return next.handle(requests).pipe(
+        return next.handle(requests).pipe(tap((event:HttpEvent<any>)=>{
-        catchError(this.handleError<any>('role', []))
+            if (event instanceof HttpResponse) {
-      )
+              this.onEnd();
+            }
+          },
+            (err: any) => {
+              this.onEnd();
+              this.handleError<any>('role',err);
+          }));
   }
 
   private handleError<T> (operation = 'operation', result?: T) {
@@ -51,4 +60,13 @@ export class TokenInterceptor implements HttpInterceptor{
       }
     };
   }
+  private onEnd(): void {
+      this.hideLoader();
+    }
+    private showLoader(): void {
+      this.loaderService.show();
+    }
+    private hideLoader(): void {
+      this.loaderService.hide();
+    }
 }

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

@@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpModule, Http } from '@angular/http';
 import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS} from '@angular/common/http';
 
@@ -46,6 +46,9 @@ import { RoleMenuItemsPipe } from './layouts/role-menu-items.pipe';
 import { ResizableModule } from 'angular-resizable-element';
 import { SalesPdComponent } from './sales-pd/sales-pd.component';
 import { PdTrigerService } from './personal-discussion/pd-service/pd-triger.service';
+import { LoaderService } from './shared/loaderService/loader.service';
+import { HttpLoaderComponent } from './layouts/http-loader/http-loader.component';
+import { AdvanceFilterComponent } from './sales-pd/advance-filter/advance-filter.component';
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http);
 }
@@ -64,6 +67,8 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     AdminLayoutComponent,
     AuthLayoutComponent,
     NewPasswordDialog,ForgotPass,ChangePasswordDialog, RoleMenuItemsPipe, SalesPdComponent,
+    HttpLoaderComponent,
+    AdvanceFilterComponent
   ],
   imports: [
     BrowserModule,
@@ -89,6 +94,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     MatFormFieldModule,
     HttpClientModule,
     ResizableModule,
+    ReactiveFormsModule,
     TranslateModule.forRoot({
         loader: {
             provide: TranslateLoader,
@@ -105,7 +111,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     },
     AwsService,AuthGuard,
     TranslateService,
-    PdTrigerService,
+    PdTrigerService,LoaderService,
     // {
     //    provide: PERFECT_SCROLLBAR_CONFIG,
     //    useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG

ng6-seed/src/app/layouts/admin/admin-layout.component.html

@@ -339,6 +339,7 @@
            </ul>
         </nav>
      </div>-->
+     <app-http-loader></app-http-loader>
      <div class="body-container">
         <router-outlet></router-outlet>
      </div>

ng6-seed/src/app/layouts/http-loader/http-loader.component.html

@@ -0,0 +1,6 @@
+<div [class.hidden]="!show">
+  <div class="loader-overlay">
+    <!-- <div *ngIf="show" class="loader"></div> -->
+    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
+  </div>
+</div>

ng6-seed/src/app/layouts/http-loader/http-loader.component.scss

@@ -0,0 +1,34 @@
+.hidden {
+    visibility: hidden;
+  }
+  .loader-overlay {
+    position: absolute;
+    width: 100%;
+    z-index: 500000;
+    top: 0;
+  }
+  // .loader {
+  //   height: 4px;
+  //   width: 100%;
+  //   position: relative;
+  //   overflow: hidden;
+  //   background-color: #FFF;
+  // }
+  // .loader:before {
+  //   display: block;
+  //   position: absolute;
+  //   content: "";
+  //   left: -200px;
+  //   width: 200px;
+  //   height: 4px;
+  //   background-color: red;
+  //   animation: loading 2s linear infinite;
+  // }
+  // @keyframes loading {
+  //   from {left: -200px; width: 30%;}
+  //   50% {width: 30%;}
+  //   70% {width: 70%;}
+  //   80% {left: 50%;}
+  //   95% {left: 120%;}
+  //   to {left: 100%;}
+  // }

ng6-seed/src/app/layouts/http-loader/http-loader.component.spec.ts

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

ng6-seed/src/app/layouts/http-loader/http-loader.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { LoaderService } from 'app/shared/loaderService/loader.service';
+import { Subscription } from 'rxjs';
+export interface LoaderState {
+  show: boolean;
+}
+@Component({
+  selector: 'app-http-loader',
+  templateUrl: './http-loader.component.html',
+  styleUrls: ['./http-loader.component.scss']
+})
+export class HttpLoaderComponent implements OnInit {
+  show = false;
+  private subscription: Subscription;
+
+  constructor( private loaderService: LoaderService) { }
+
+  ngOnInit() {
+    this.subscription = this.loaderService.loaderState
+    .subscribe((state: LoaderState) => {
+      this.show = state.show;
+    });
+  }
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+
+}

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

@@ -70,6 +70,8 @@
         </mat-list>
 
     </mat-expansion-panel>
+   
+    <p class="note" *ngIf="!recordStatus && limitMsg">Showing data for last 10 days. To see older records, please use advanced filter</p>
     <br/>
     <mat-table [dataSource]="dataSourceTab1" matSort *ngIf="PdListData.length > 0">
 
@@ -147,8 +149,13 @@
     </ng-template> -->
 
 </mat-card-content>
-
+<div [hidden]="recordStatus">
-<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="PdListData.length" [pageIndex]="pageIndex"
+<mat-paginator  #paginator class="mat-elevation-z1" [length]="PdListData.length" [pageIndex]="pageIndex"
     [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
 </mat-paginator>
+</div>
+<mat-card-content *ngIf="recordStatus">
+        <h5 align="center" style="font-weight: bold;
+        color: brown;">Showing data for last 10 days. To see older records, please use advanced filter</h5>
+    </mat-card-content>
 <notifier-container></notifier-container>

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

@@ -18,4 +18,12 @@
 .toolbar-space {
     flex: 0.01 0 auto;
 }
+p.note {
+    // float: right;
+    text-align: right;
+    font-size: 12px;
+    color: grey;
+    font-weight: bold;
+}
+
   

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

@@ -49,6 +49,7 @@ export class AllPdComponent implements OnInit, OnChanges {
   pageEvent: PageEvent;
   todaydate:Date = new Date();
   user_role_name: string;
+  limitMsg: boolean = false;
   constructor(private _pd: PdTrigerService,private _fb:FormBuilder,notifier: NotifierService,private userService:UserService) { 
         this.notifier = notifier;
        
@@ -108,11 +109,14 @@ console.log(this.displayedColumns)
             this.PdListData = data.records;
             this.dataLengthTab1 = data.records.length;
             this.dataSourceTab1.data = this.PdListData;
+            this.recordStatus=false;
+            this.limitMsg = true
           }
           else{
             this.PdListData=[];
-            this.dataSourceTab1 = null;
+            this.dataSourceTab1.data = [];
             this.recordStatus=true;
+            this.limitMsg = false
           }
         }
         // , error => {this.errorMessage = <any> error});
@@ -214,16 +218,23 @@ console.log(this.displayedColumns)
     this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res=>
     {
         this.xpandStatus = false;
-        if(res['dataStatus']==true)
+        console.log("Res",res['dataStatus'])
+        if(res['dataStatus'])
         {
+          this.PdListData = res['records'];
             this.dataSourceTab1.data = res['records'];   
             // console.log('records',res['records']);
             this.dataSourceTab1.paginator = this.paginator;
+            this.recordStatus=false
+            this.limitMsg = false
         }else{
            this.notifier.notify('warning', 'No Records Found !');
            this.dataSourceTab1.paginator['length'] = 0;
            this.dataSourceTab1.paginator['pageIndex'] = 0;
            this.dataSourceTab1.data = []; 
+           this.PdListData = [];          
+           this.recordStatus = true;
+          this.limitMsg = false
           //  console.log('records-records',res['records']);
         }
       },error => {

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

@@ -70,8 +70,8 @@
                   </mat-list>
                
               </mat-expansion-panel>
+              <p class="note" *ngIf="!recordStatus && limitMsg">Showing data for last 10 days. To see older records, please use advanced filter</p>
               <br/>
-
         <mat-table [dataSource]="dataSourceTab4" matSort *ngIf="completedPdListData.length > 0" >
     
                 <ng-container matColumnDef="PDType">
@@ -120,7 +120,12 @@
          </mat-table>
          
     </mat-card-content>
-
+    <div [hidden]="recordStatus">
-      <mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="completedPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+      <mat-paginator  #paginator class="mat-elevation-z1" [length]="completedPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
       [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
     </mat-paginator>      
+</div>
+<mat-card-content *ngIf="recordStatus">
+        <h5 align="center" style="font-weight: bold;
+        color: brown;">Showing data for last 10 days. To see older records, please use advanced filter</h5>
+    </mat-card-content>

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

@@ -17,3 +17,11 @@
 .toolbar-space {
     flex: 0.01 0 auto;
 }
+p.note {
+    // float: right;
+    text-align: right;
+    font-size: 12px;
+    color: grey;
+    font-weight: bold;
+}
+

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

@@ -48,6 +48,7 @@ export class CompletedPdComponent implements OnInit, OnChanges {
   pageEvent: PageEvent;
   todaydate:Date = new Date();
   user_role_name: string;
+  limitMsg: boolean = false;
 
   constructor(private _pd: PdTrigerService,public _fb:FormBuilder,notifier: NotifierService,private userService:UserService) { 
     this.notifier = notifier;
@@ -104,11 +105,15 @@ public LenderRoleID : any = localStorage.getItem('LenderRoleID');
             this.completedPdListData = data.records;
             this.dataLengthTab4 = data.records.length;
             this.dataSourceTab4.data = this.completedPdListData;
+            this.recordStatus = false
+            this.limitMsg = true
           }
           else{
+            this.dataSourceTab4.data =[]
             this.completedPdListData=[];
             this.dataLengthTab4= null;
             this.recordStatus=true;
+            this.limitMsg = false
           }
         }
         // , error => this.errorMessage = <any> error);
@@ -221,14 +226,18 @@ public LenderRoleID : any = localStorage.getItem('LenderRoleID');
         
         if(res['dataStatus']==true)
         {
-            this.dataSourceTab4 = res['records'];
+          this.completedPdListData=res['records'];
+            this.dataSourceTab4.data = res['records'];
             this.dataSourceTab4.paginator = this.paginator;
+            this.recordStatus=false;
+            this.limitMsg = false
         }else{
           this.notifier.notify('warning', 'No Records Found !');
-          
+          this.recordStatus=true;
           this.dataSourceTab4.paginator['length'] = 0;
           this.dataSourceTab4.paginator['pageIndex'] = 0;
           this.dataSourceTab4.data = [];   
+          this.limitMsg = false        
        }
      },error => {
        this.errorMessage.push(error);

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

@@ -69,6 +69,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
+              <p class="note" *ngIf="!recordStatus && limitMsg">Showing data for last 10 days. To see older records, please use advanced filter</p>
               <br/>
         <mat-table [dataSource]="dataSourceTab2" matSort *ngIf="progressPdListData.length > 0" >
             <ng-container matColumnDef="PDType">
@@ -116,7 +117,12 @@
          </mat-table>
          
     </mat-card-content>
-
+    <div [hidden]="recordStatus">
-      <mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="progressPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+      <mat-paginator  #paginator class="mat-elevation-z1" [length]="progressPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
       [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
     </mat-paginator>      
+</div>
+<mat-card-content *ngIf="recordStatus">
+        <h5 align="center" style="font-weight: bold;
+        color: brown;">Showing data for last 10 days. To see older records, please use advanced filter</h5>
+    </mat-card-content>

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

@@ -17,3 +17,10 @@
 .toolbar-space {
     flex: 0.01 0 auto;
 }
+p.note {
+    // float: right;
+    text-align: right;
+    font-size: 12px;
+    color: grey;
+    font-weight: bold;
+}

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

@@ -46,6 +46,7 @@ export class InprogressPdComponent implements OnInit, OnChanges {
   pageEvent: PageEvent;
   searchForm:FormGroup;
   user_role_name: string;
+  limitMsg: boolean = false;
   constructor(private _pd: PdTrigerService,public _fb:FormBuilder,notifier: NotifierService,private userService:UserService) { 
     this.notifier = notifier;
 
@@ -99,10 +100,14 @@ public LenderRoleID : string = localStorage.getItem('LenderRoleID');
             this.progressPdListData = data.records;
             this.dataLengthTab2 = data.records.length;
             this.dataSourceTab2.data = this.progressPdListData;
+            this.recordStatus=false
+            this.limitMsg = true
           }else{
             this.progressPdListData =[];
-            this.dataSourceTab2 = null;
+            this.progressPdListData = [];
+            this.dataSourceTab2.data = [];
             this.recordStatus=true;
+            this.limitMsg = false
           }
      },error => {
        this.errorMessage.push(error);
@@ -210,13 +215,19 @@ public LenderRoleID : string = localStorage.getItem('LenderRoleID');
         this.xpandStatus = false;
         if(res['dataStatus']==true)
         {
-            this.dataSourceTab2 = res['records'];
+            this.progressPdListData = res['records'];
+            this.dataSourceTab2.data = res['records'];
             this.dataSourceTab2.paginator = this.paginator;
+            this.recordStatus=false
+            this.limitMsg = false
         }else{
           this.notifier.notify('warning', 'No Records Found !');
           this.dataSourceTab2.paginator['length'] = 0;
            this.dataSourceTab2.paginator['pageIndex'] = 0;
            this.dataSourceTab2.data = [];  
+           this.progressPdListData = [];
+           this.recordStatus=true   
+           this.limitMsg = false      
        }
      },error => {
        this.errorMessage.push(error);

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

@@ -71,6 +71,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
+              <p class="note" *ngIf="!recordStatus && limitMsg">Showing data for last 10 days. To see older records, please use advanced filter</p>
               <br/>
   <mat-table [dataSource]="dataSourceTab5" matSort *ngIf="qcCompletedPdListData.length > 0" >
         <ng-container matColumnDef="PDType">
@@ -118,7 +119,12 @@
    </mat-table>
    
 </mat-card-content>
-
+<div [hidden]="recordStatus">
-<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="qcCompletedPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+<mat-paginator  #paginator class="mat-elevation-z1" [length]="qcCompletedPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
 [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
 </mat-paginator>      
+</div>
+<mat-card-content *ngIf="recordStatus">
+        <h5 align="center" style="font-weight: bold;
+        color: brown;">Showing data for last 10 days. To see older records, please use advanced filter</h5>
+    </mat-card-content>

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

@@ -17,3 +17,10 @@
 .toolbar-space {
     flex: 0.01 0 auto;
 }
+p.note {
+    // float: right;
+    text-align: right;
+    font-size: 12px;
+    color: grey;
+    font-weight: bold;
+}

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

@@ -47,6 +47,7 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
   pageSize = 10;
   pageEvent: PageEvent;
   user_role_name: string;
+  limitMsg: boolean = false;
 
   constructor(private _pd: PdTrigerService, public _fb: FormBuilder,notifier: NotifierService,private userService:UserService) { 
     this.notifier = notifier;
@@ -106,11 +107,15 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
             this.qcCompletedPdListData = data.records;
             this.dataLengthTab5 = data.records.length;
             this.dataSourceTab5.data = this.qcCompletedPdListData;
+            this.recordStatus = false
+            this.limitMsg = true
           }
           else {
             this.qcCompletedPdListData = [];
+            this.dataSourceTab5.data = []
             this.dataLengthTab5 = null;
             this.recordStatus = true;
+            this.limitMsg = false
           }
         }
         // , error => this.errorMessage = <any>error);
@@ -199,13 +204,19 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
     this._pd.overAllSearchFormDetails(this.searchForm.value).subscribe(res => {
       this.xpandStatus = false;
       if (res['dataStatus'] == true) {
-        this.dataSourceTab5 = res['records'];
+        this.qcCompletedPdListData = res['records'];
+        this.dataSourceTab5.data = res['records'];
         this.dataSourceTab5.paginator = this.paginator;
+        this.recordStatus = false;
+        this.limitMsg = false
       }else{
+        this.qcCompletedPdListData = []
           this.notifier.notify('warning', 'No Records Found !');
           this.dataSourceTab5.paginator['length'] = 0;
           this.dataSourceTab5.paginator['pageIndex'] = 0;
           this.dataSourceTab5.data = [];        
+          this.recordStatus = true;   
+          this.limitMsg = false
        }
      },error => {
        this.errorMessage.push(error);

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

@@ -69,6 +69,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
+              <p class="note" *ngIf="!recordStatus && limitMsg">Showing data for last 10 days. To see older records, please use advanced filter</p>
               <br/>
         <mat-table [dataSource]="dataSourceTab3" matSort *ngIf="scheduledPdListData.length > 0" >
                 <ng-container matColumnDef="PDType">
@@ -119,8 +120,13 @@
          </mat-table>
          
     </mat-card-content>
-
+    <div [hidden]="recordStatus">
-      <mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="scheduledPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
+      <mat-paginator #paginator class="mat-elevation-z1" [length]="scheduledPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
       [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
     </mat-paginator>      
 
+</div>
+<mat-card-content *ngIf="recordStatus">
+        <h5 align="center" style="font-weight: bold;
+        color: brown;">Showing data for last 10 days. To see older records, please use advanced filter</h5>
+    </mat-card-content>

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

@@ -17,3 +17,10 @@
 .toolbar-space {
     flex: 0.01 0 auto;
 }
+p.note {
+    // float: right;
+    text-align: right;
+    font-size: 12px;
+    color: grey;
+    font-weight: bold;
+}

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

@@ -46,6 +46,7 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
   pageSize = 10;
   pageEvent: PageEvent;
   user_role_name: string;
+  limitMsg: boolean = false;
 
   constructor(private _pd: PdTrigerService,public _fb:FormBuilder,notifier: NotifierService,private userService:UserService) { 
     this.notifier = notifier;
@@ -104,11 +105,15 @@ public LenderRoleID : any = localStorage.getItem('LenderRoleID');
             this.scheduledPdListData = data.records;
             this.dataLengthTab3 = data.records.length;
             this.dataSourceTab3.data = this.scheduledPdListData;
+            this.recordStatus =false
+            this.limitMsg = true
           }
           else{
             this.scheduledPdListData=[];
             this.dataLengthTab3 = null;
+            this.dataSourceTab3.data = []
             this.recordStatus=true;
+            this.limitMsg = false
           }
         }
         // , error => this.errorMessage = <any> error);
@@ -217,11 +222,17 @@ public LenderRoleID : any = localStorage.getItem('LenderRoleID');
         {
             this.dataSourceTab3 = res['records'];
             this.dataSourceTab3.paginator = this.paginator;
+            this.scheduledPdListData = res['records'];
+            this.recordStatus = false;
+            this.limitMsg = false
         }else{
           this.notifier.notify('warning', 'No Records Found !');
           this.dataSourceTab3.paginator['length'] = 0;
           this.dataSourceTab3.paginator['pageIndex'] = 0;
           this.dataSourceTab3.data = [];   
+          this.recordStatus = true;
+          this.scheduledPdListData = []     
+          this.limitMsg = false   
        }
      },error => {
        this.errorMessage.push(error);

ng6-seed/src/app/sales-pd/advance-filter/advance-filter.component.html

@@ -0,0 +1,78 @@
+<!-- <p>
+  advance-filter works!
+</p> -->
+<mat-expansion-panel [(expanded)]="xpandStatus">
+  <mat-expansion-panel-header>
+    <mat-panel-title class="text-xs-left">
+      <mat-toolbar-row>
+        <mat-icon>filter_list</mat-icon>
+        <span class="toolbar-space"></span>
+        <span>Advanced Filter</span>
+      </mat-toolbar-row>
+    </mat-panel-title>
+
+  </mat-expansion-panel-header>
+  <mat-list class="m-gap p-gap" >
+    <div [formGroup]="searchForm" fxLayout="row wrap" fxFlex="100%" fxLayoutGap="35px" fxLayoutAlign="flex-start stretch">
+      <mat-form-field style="width: 20%">
+        <mat-select multiple formControlName="pd_status" placeholder="PD Status">
+          <mat-option *ngFor="let status of pdStatus" [value]="status">{{status}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field> 
+      <mat-form-field style="width:20%">
+        <input matInput [matDatepicker]="picker"  [max]="todaydate"
+          formControlName="pd_from_date" placeholder="Choose a From date">
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker #picker></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field style="width:20%">
+        <input matInput [matDatepicker]="picker1" [min]="searchForm.get('pd_from_date').value" [max]="todaydate"
+          formControlName="pd_to_date" placeholder="Choose a To date">
+        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
+        <mat-datepicker #picker1></mat-datepicker>
+      </mat-form-field>
+      <mat-form-field style="width:20%">
+        <mat-select multiple formControlName="pd_products" placeholder="Products">
+          <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.abbr}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <!-- <mat-form-field style="width:30%">
+              <mat-select multiple formControlName="pd_city" placeholder="City">
+                  <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
+              </mat-select>
+          </mat-form-field> &nbsp; &nbsp; -->
+      <mat-form-field style="width:30%">
+        <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
+          <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field style="width:30%">
+        <input matInput type="text" formControlName="pd_applicant_name" placeholder="Company/Firm Name">
+      </mat-form-field> 
+      <mat-form-field style="width: 30%">
+        <input matInput type="text" formControlName="pd_officer" placeholder="PD Officer Name">
+      </mat-form-field>
+      <!-- <div fxLayout="row wrap">
+                  <div fxFlex.xs="100%" fxFlex.sm="100%" fxFlex="45%">
+                      <mat-checkbox class="example-margin" color="primary" formControlName="is_include_archived">Include Archived</mat-checkbox>
+                  </div>
+              </div> --> </div>
+            </mat-list>
+      <div align="right" fxLayout="row" fxLayoutAlign="flex-end">
+
+        <button type="button" mat-raised-button mat-icon-button (click)="onReset()" matTooltip="Reset"
+          matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
+          <mat-icon>settings_backup_restore</mat-icon>
+        </button>
+
+        <button type="button" mat-raised-button mat-icon-button (click)="searchItem()" matTooltip="Search"
+          matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
+          <mat-icon>search</mat-icon>
+        </button>
+
+     
+    </div>
+  
+
+</mat-expansion-panel>

ng6-seed/src/app/sales-pd/advance-filter/advance-filter.component.spec.ts

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

ng6-seed/src/app/sales-pd/advance-filter/advance-filter.component.ts

@@ -0,0 +1,119 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
+import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
+import { DatePipe } from '@angular/common';
+import { SalesPdService } from '../sales-pd.service';
+
+
+@Component({
+  selector: 'app-advance-filter',
+  templateUrl: './advance-filter.component.html',
+  styleUrls: ['./advance-filter.component.scss']
+})
+export class AdvanceFilterComponent implements OnInit {
+  searchForm:FormGroup;
+  todaydate: any;
+  pdStatus: any=[];
+  // pdStatus_all: any=[];
+  ENTITY: any =[];
+  @Input()drop_down_datas
+  @Output() filteredlistData = new EventEmitter();
+  @Output() resetFilter = new EventEmitter();
+  PRODUCTS: any =[];
+  xpandStatus:boolean=false;
+  pipe=new DatePipe('en-US');
+  constructor(private _fb:FormBuilder,private _pd:PdTrigerService,private salesPDService:SalesPdService) {
+    this.todaydate = new Date();
+    this.getDropdown();
+   }
+
+  ngOnInit() {
+    this.searchForm=this._fb.group({
+      pd_status:[''],
+      pd_from_date:[''],
+      pd_to_date:[''],
+      pd_products:[''],
+      pd_lender:[''],
+      pd_applicant_name:[''],
+      pd_officer:[''],
+    })
+    console.log(this.drop_down_datas)
+  }
+  getDropdown(){
+    // this._pd.getAllMasterDatas('PDSTATUS').subscribe(res=>
+    //   {
+    //     if(res.dataStatus==true)
+    //     {
+    //       this.pdStatus_all = res.records.filter(status=>status.isactive==1);
+    //     }
+    //   });
+      this._pd.getAllMasterDatas('ENTITY').subscribe(res=>
+        {
+          if(res.dataStatus==true)
+          {
+            this.ENTITY = res.records.filter(ent=>ent.isactive==1);
+          }
+        });
+        this._pd.getAllMasterDatas('PRODUCTS').subscribe(res=>
+          {
+            if(res.dataStatus==true)
+            {
+              this.PRODUCTS = res.records.filter(pro=>pro.isactive==1);
+            }
+          });
+
+  }
+  ngOnChanges(){
+    console.log(this.drop_down_datas)
+    if(this.drop_down_datas != undefined){
+      this.pdStatus=this.drop_down_datas.pd_status
+      if(this.ENTITY.length != 0) {
+        this.entityCheck()
+      }
+      else{
+        setTimeout(()=>{this.entityCheck()},500)
+      }
+      if(this.PRODUCTS.length != 0) {
+        this.productCheck()
+      }
+      else{
+        setTimeout(()=>{this.productCheck()},500)
+      }
+    }
+  }
+  productCheck(){
+    this.PRODUCTS=this.PRODUCTS.filter(val=>{
+      if(this.drop_down_datas.product_ids.filter(dp=>dp == val.product_id).length > 0){
+        return val
+      }
+    })
+  }
+  entityCheck(){
+    this.ENTITY=this.ENTITY.filter(val=>{
+      if(this.drop_down_datas.lender_ids.filter(dp=>dp == val.entity_id).length > 0){
+        return val
+      }
+    })
+  }
+  searchItem(){
+    this.searchForm.value.pd_from_date = this.pipe.transform(this.searchForm.value.pd_from_date,'yyyy-MM-dd');
+    this.searchForm.value.pd_to_date = this.pipe.transform(this.searchForm.value.pd_to_date,'yyyy-MM-dd');
+    // console.log(JSON.stringifythis.searchForm.value);
+    this.xpandStatus=true;
+    this.salesPDService.advancedFilter(this.searchForm.value).subscribe(res=>{
+      if(res.dataStatus){
+        console.log(res);
+        this.filteredlistData.emit(res);
+        this.xpandStatus=false
+      }
+      else{
+        this.filteredlistData.emit(res)
+      }
+    })
+  }
+  onReset(){
+    this.searchForm.reset();
+    this.xpandStatus=false
+    this.resetFilter.emit(true);
+  }
+}

ng6-seed/src/app/sales-pd/sales-pd.component.html

@@ -10,75 +10,10 @@
    <mat-tab>
       <ng-template mat-tab-label>Sales PD</ng-template> 
       <mat-card-content>
-          <!-- <mat-expansion-panel  [(expanded)]="xpandStatus"> -->
+            <app-advance-filter [drop_down_datas]="filter_drop_down_data" (filteredlistData)="filteredDataSource($event)" 
-              <!-- <mat-expansion-panel-header>
+            (resetFilter)= "loadSalesPDDetails()"></app-advance-filter>
-                <mat-panel-title class="text-xs-left">
+        <p class="note" *ngIf="!recordStatus && limitMsg">Showing data for last 10 days. To see older records, please use advanced filter</p>
-                 <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
+        <br/>
-                 <mat-toolbar-row>
-                      <mat-icon>filter_list</mat-icon>
-                      <span class="toolbar-space"></span>
-                      <span>Advance Filter</span>
-                  </mat-toolbar-row>    
-                </mat-panel-title>
-              
-              </mat-expansion-panel-header> -->
-              <!-- <mat-list class="m-gap p-gap">
-                      <div [formGroup]="searchForm">
-                              <mat-form-field style="width:30%">
-                                      <mat-select multiple formControlName="pd_type" placeholder="PD Type">
-                                          <mat-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
-                                      </mat-select>
-                                  </mat-form-field> &nbsp; &nbsp;
-                                  <mat-form-field style="width:30%">
-                                      <input matInput [max]="todaydate" [matDatepicker]="picker" (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date">
-                                      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                                      <mat-datepicker #picker></mat-datepicker>
-                                  </mat-form-field> &nbsp; &nbsp;
-                                  <mat-form-field style="width:30%">
-                                      <input matInput [max]="todaydate" [matDatepicker]="picker1" [min]="searchForm.get('pd_from_date').value" formControlName="pd_to_date" placeholder="Choose a To date">
-                                      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
-                                      <mat-datepicker #picker1></mat-datepicker>
-                                  </mat-form-field>
-                                  <mat-form-field style="width:30%">
-                                      <mat-select multiple formControlName="pd_products" placeholder="Products">
-                                          <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
-                                      </mat-select>
-                                  </mat-form-field> &nbsp; &nbsp;
-                                  <mat-form-field style="width:30%">
-                                      <mat-select multiple formControlName="pd_city" placeholder="City">
-                                          <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
-                                      </mat-select>
-                                  </mat-form-field> &nbsp; &nbsp;
-                                  <mat-form-field style="width:30%">
-                                          <mat-select multiple formControlName="pd_lender" placeholder="Lender Name">
-                                                  <mat-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
-                                              </mat-select>
-                                        </mat-form-field> 
-                                      <mat-form-field style="width:30%">
-                                          <input matInput type="text" formControlName="pd_name" placeholder="Applicant Name">
-                                      </mat-form-field> &nbsp; &nbsp;
-                                      <mat-form-field style="width:30%">
-                                              <input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id">
-                                          </mat-form-field>&nbsp; &nbsp;
-                                          <mat-form-field style="width: 30%">
-                                              <input matInput type="text" formControlName="pd_officer" placeholder="PD Officer Name" >
-                                          </mat-form-field>
-                                          <div align="right">
-                                                  <button type="button" mat-raised-button mat-icon-button (click)="onReset()" 
-                                                  matTooltip="Reset" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
-                                                      <mat-icon>settings_backup_restore</mat-icon>
-                                                  </button>        
-                                                  
-                                              <button type="button" mat-raised-button mat-icon-button (click)="searchItem()"
-                                              matTooltip="Search"  matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
-                                                  <mat-icon>search</mat-icon>
-                                              </button> 
-                                          </div>
-                            </div>
-                </mat-list> -->
-             
-            <!-- </mat-expansion-panel> -->
-            <!-- <br/> -->
           <mat-table [dataSource]="dataSourceTab4" matSort *ngIf="salesPdData.length > 0" >
            
               <ng-container matColumnDef="SalesPdId">
@@ -148,7 +83,10 @@
     <mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="salesPdData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
     [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
   </mat-paginator> 
-      
+  <mat-card-content *ngIf="recordStatus">
+           <h5 align="center" style="font-weight: bold;
+           color: brown;">Showing data for last 10 days. To see older records, please use advanced filter</h5>
+       </mat-card-content>
    </mat-tab> 
 </mat-tab-group>
 </mat-card>

ng6-seed/src/app/sales-pd/sales-pd.component.scss

@@ -18,3 +18,11 @@
 .toolbar-space {
     flex: 0.01 0 auto;
 }
+p.note {
+        // float: right;
+        text-align: right;
+        font-size: 12px;
+        color: grey;
+        font-weight: bold;
+    }
+    

ng6-seed/src/app/sales-pd/sales-pd.component.ts

@@ -32,6 +32,8 @@ export class SalesPdComponent implements OnInit {
   pageSize = 10;
   pageEvent: PageEvent;
   todaydate:Date = new Date();
+  filter_drop_down_data:any;
+  limitMsg: boolean = false;
 
   constructor(private _pdSales: PdTrigerService,private userService:UserService) { }
 
@@ -50,11 +52,47 @@ export class SalesPdComponent implements OnInit {
           this.salesPdData = data.records;
           this.dataLengthTab4 = data.records.length;
           this.dataSourceTab4.data = this.salesPdData;
+          this.recordStatus=false
+          this.limitMsg = true   
+          if(this.salesPdData.length > 0){
+                       let products=[]
+                       let lenders=[]
+                       let pd_status=[]
+                       this.salesPdData.map(val=>{
+                         if(products.length > 0 ){
+                           if(products.filter(pro=>pro == val.product_id).length == 0 ){
+                           products.push(val.product_id)
+                           }
+                         }
+                         else{
+                           products.push(val.product_id)
+                         }
+                         if(lenders.length > 0 ){
+                           if(lenders.filter(pro=>pro == val.lender_id).length == 0 ){
+                             lenders.push(val.lender_id)
+                           }
+                         }
+                         else{
+                           lenders.push(val.lender_id)
+                         }
+                         if(pd_status.length > 0 ){
+                           if(pd_status.filter(pro=>pro == val.status).length == 0 ){
+                             pd_status.push(val.status)
+                           }
+                         }
+                         else{
+                           pd_status.push(val.status)
+                         }
+                       })
+                         this.filter_drop_down_data={product_ids:products,lender_ids:lenders,pd_status:pd_status}            
+                       // console.log(this.filter_drop_down_data);
+                     }
         }
         else{
           this.salesPdData=[];
           this.dataLengthTab4= null;
           this.recordStatus=true;
+          this.limitMsg = false   
         }
       }
       // , error => this.errorMessage = <any> error);
@@ -64,6 +102,22 @@ export class SalesPdComponent implements OnInit {
         alert(error.html_format);
       });    
   }
+  filteredDataSource(data){
+      console.log("From Parent",data);
+      if(data.dataStatus){
+        this.salesPdData=data.records
+      this.dataLengthTab4 = data.records.length;
+      this.dataSourceTab4.data = this.salesPdData;
+      this.recordStatus=false
+      this.limitMsg = false   
+    }
+    else{
+      this.salesPdData=[];
+      this.dataLengthTab4= null;
+      this.recordStatus=true;
+      this.limitMsg = false   
+    }
+    }
 
   salesPDpdf(pdfdetail){
     this._pdSales.getSalesPdpdf(pdfdetail)

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

@@ -1,9 +1,17 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from 'environments/environment';
 
+const api_url = environment.apiEndpoint;
 @Injectable({
   providedIn: 'root'
 })
+
 export class SalesPdService {
 
-  constructor() { }
+  constructor(private _http:HttpClient) { }
+  advancedFilter(params): Observable<any>{
+     return this._http.post(api_url+'filterSalesPDList',{"records":params})
+    }
 }

ng6-seed/src/app/shared/loaderService/loader.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LoaderService } from './loader.service';
+
+describe('LoaderService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LoaderService = TestBed.get(LoaderService);
+    expect(service).toBeTruthy();
+  });
+});

ng6-seed/src/app/shared/loaderService/loader.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+export interface LoaderState {
+  show: boolean;
+}
+@Injectable({
+  providedIn: 'root'
+})
+export class LoaderService {
+  private loaderSubject = new Subject<LoaderState>();
+  loaderState = this.loaderSubject.asObservable();
+  constructor() { }
+  show() {
+    this.loaderSubject.next(<LoaderState>{ show: true });
+  }
+  hide() {
+    this.loaderSubject.next(<LoaderState>{ show: false });
+  }
+}

ng6-seed/src/environments/environment.ts

@@ -8,7 +8,7 @@ export const environment = {
   
   environmentName: 'Development Environment',//Localhost Environment.
 
-  // apiEndpoint: 'https://demo.pdgenie.com/sparqtest/api/',
+  // apiEndpoint: 'https://apitest.pdgenie.com/sparqtest/api/',
   apiEndpoint: ' https://apitest.pdgenie.com/sparqapi/api/',
 
   authorization: 'sparqvenba2018',