Fairoj : Sales PD Advanced Filter option, Loader for every HTTP Request and PD List Limit note in all list screen

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, throwError } from 'rxjs';
@@ -14,16 +15,18 @@ import { HttpErrorResponse } from "@angular/common/http";
 import { CognitoService } from '../AwsService/cognito.service';
 //environment
 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({
@@ -32,9 +35,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.handleError<any>('role',err);
+        this.onEnd();
+    }));
   }
 
   // private handleError<T> (operation = 'operation', result?: T) {
@@ -54,6 +63,7 @@ export class TokenInterceptor implements HttpInterceptor{
   private handleError<T> (operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
       if(error instanceof HttpErrorResponse){
+        // this.onEnd();
         console.log("Error from interceptor >>>",error)
         console.error("Error: " + error.status);
         if(error.status == 401){
@@ -91,4 +101,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

@@ -56,6 +56,8 @@ import { environment } from '../environments/environment';
 import { AsyncPipe } from '../../node_modules/@angular/common';
 // import { SalesPdComponent } from './sales-pd/sales-pd.component';
 import { PdTrigerService } from './personal-discussion/pd-service/pd-triger.service';
+import { HttpLoaderComponent } from './layouts/http-loader/http-loader.component';
+import { LoaderService } from './shared/loaderService/loader.service';
 
 
 export function HttpLoaderFactory(http: HttpClient) {
@@ -75,7 +77,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     AppComponent,
     AdminLayoutComponent,
     AuthLayoutComponent,
-    NewPasswordDialog,ForgotPass,ChangePasswordDialog, RoleMenuItemsPipe
+    NewPasswordDialog,ForgotPass,ChangePasswordDialog, RoleMenuItemsPipe, HttpLoaderComponent
   ],
   imports: [
     BrowserModule,
@@ -130,7 +132,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
       useClass: TokenInterceptor,
       multi: true
     },
-    MessagingService, AsyncPipe
+    MessagingService, AsyncPipe,LoaderService
   ],
   entryComponents: [NewPasswordDialog,ForgotPass,ChangePasswordDialog],
   bootstrap: [AppComponent]

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

@@ -347,6 +347,7 @@
         </mat-menu>
          </div>
      </mat-toolbar>
+     <app-http-loader></app-http-loader>
      <!--<div class="horizontal-menu text-center">
         <nav>
            <ul class="main-h-list">
@@ -375,6 +376,7 @@
         </nav>
      </div>-->
      <div class="body-container">
+        
         <router-outlet></router-outlet>
      </div>
      <mat-sidenav #end position="end"  mode="over" opened="false">

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

@@ -5,7 +5,7 @@
                 <mat-toolbar-row>
                             <mat-icon>filter_list</mat-icon>
                             <span class="toolbar-space"></span>
-                            <span>Advance Filter</span>
+                            <span>Advanced Filter</span>
                     </mat-toolbar-row>    
             </mat-panel-title>
 
@@ -78,7 +78,7 @@
         </mat-list>
 
     </mat-expansion-panel>
-    <br/>
+    <p class="note" *ngIf="dataSourceTab1.data.length > 0">Showing data for last 10 days. Showing data for last 10 days. To see older records, please use advanced filter</p>
     <mat-table [dataSource]="dataSourceTab1" matSort *ngIf="PdListData.length > 0">
 
         <ng-container matColumnDef="PDType">
@@ -156,8 +156,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

@@ -19,3 +19,10 @@
     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

@@ -91,6 +91,7 @@ export class AllPdComponent implements OnInit, OnChanges {
             this.PdListData = data.records;
             this.dataLengthTab1 = data.records.length;
             this.dataSourceTab1.data = this.PdListData;
+            this.recordStatus=false;
           }
           else{
             this.PdListData=[];
@@ -201,11 +202,13 @@ export class AllPdComponent implements OnInit, OnChanges {
             this.dataSourceTab1.data = res['records'];   
             // console.log('records',res['records']);
             this.dataSourceTab1.paginator = this.paginator;
+            this.recordStatus=false;
         }else{
            this.notifier.notify('warning', 'No Records Found !');
            this.dataSourceTab1.paginator['length'] = 0;
            this.dataSourceTab1.paginator['pageIndex'] = 0;
            this.dataSourceTab1.data = [];           
+           this.recordStatus=true;
           //  console.log('records-records',res['records']);
         }
       },error => {

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

@@ -7,7 +7,7 @@
                    <mat-toolbar-row>
                         <mat-icon>filter_list</mat-icon>
                         <span class="toolbar-space"></span>
-                        <span>Advance Filter</span>
+                        <span>Advanced Filter</span>
                     </mat-toolbar-row>    
                   </mat-panel-title>
                 
@@ -73,7 +73,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
-              <br/>
+              <p class="note" *ngIf="!recordStatus">Showing data for last 10 days. Showing data for last 10 days. To see older records, please use advanced filter</p>
 
         <mat-table [dataSource]="dataSourceTab4" matSort *ngIf="completedPdListData.length > 0" >
     
@@ -127,7 +127,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.ts

@@ -93,6 +93,7 @@ export class CompletedPdComponent implements OnInit, OnChanges {
             this.completedPdListData = data.records;
             this.dataLengthTab4 = data.records.length;
             this.dataSourceTab4.data = this.completedPdListData;
+            this.recordStatus=false;
           }
           else{
             this.completedPdListData=[];
@@ -215,12 +216,14 @@ export class CompletedPdComponent implements OnInit, OnChanges {
         {
             this.dataSourceTab4 = res['records'];
             this.dataSourceTab4.paginator = this.paginator;
+            this.recordStatus=false;
         }else{
           this.notifier.notify('warning', 'No Records Found !');
           
           this.dataSourceTab4.paginator['length'] = 0;
           this.dataSourceTab4.paginator['pageIndex'] = 0;
           this.dataSourceTab4.data = [];    
+          this.recordStatus=true;       
        }
      },error => {
        this.errorMessage.push(error);

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

@@ -6,7 +6,7 @@
                    <mat-toolbar-row>
                         <mat-icon>filter_list</mat-icon>
                         <span class="toolbar-space"></span>
-                        <span>Advance Filter</span>
+                        <span>Advanced Filter</span>
                     </mat-toolbar-row>    
                   </mat-panel-title>
                 
@@ -72,7 +72,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
-              <br/>
+              <p class="note" *ngIf="!recordStatus">Showing data for last 10 days. Showing data for last 10 days. To see older records, please use advanced filter</p>
         <mat-table [dataSource]="dataSourceTab2" matSort *ngIf="progressPdListData.length > 0" >
             <ng-container matColumnDef="PDType">
                 <mat-cell fxFlex.xs="20" fxFlex.sm="15" fxFlex.md="13" fxFlex.lg="16" fxFlex.xl="13" class="cell" *matCellDef="let details;" style="justify-content:flex-end">
@@ -121,7 +121,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.ts

@@ -88,6 +88,7 @@ export class InprogressPdComponent implements OnInit, OnChanges {
             this.progressPdListData = data.records;
             this.dataLengthTab2 = data.records.length;
             this.dataSourceTab2.data = this.progressPdListData;
+            this.recordStatus=false;
           }else{
             this.progressPdListData =[];
             this.dataSourceTab2 = null;
@@ -206,11 +207,13 @@ export class InprogressPdComponent implements OnInit, OnChanges {
         {
             this.dataSourceTab2 = res['records'];
             this.dataSourceTab2.paginator = this.paginator;
+            this.recordStatus=false;
         }else{
           this.notifier.notify('warning', 'No Records Found !');
           this.dataSourceTab2.paginator['length'] = 0;
            this.dataSourceTab2.paginator['pageIndex'] = 0;
            this.dataSourceTab2.data = [];   
+           this.recordStatus=true;        
        }
      },error => {
        this.errorMessage.push(error);

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

@@ -6,7 +6,7 @@
                    <mat-toolbar-row>
                         <mat-icon>filter_list</mat-icon>
                         <span class="toolbar-space"></span>
-                        <span>Advance Filter</span>
+                        <span>Advanced Filter</span>
                     </mat-toolbar-row>    
                   </mat-panel-title>
                 
@@ -74,7 +74,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
-              <br/>
+              <p class="note" *ngIf="!recordStatus">Showing data for last 10 days. Showing data for last 10 days. To see older records, please use advanced filter</p>
   <mat-table [dataSource]="dataSourceTab5" matSort *ngIf="qcCompletedPdListData.length > 0" >
         <ng-container matColumnDef="PDType">
             <mat-cell fxFlex.xs="20" fxFlex.sm="15" fxFlex.md="13" fxFlex.lg="16" fxFlex.xl="13" class="cell" *matCellDef="let details;" style="justify-content:flex-end">
@@ -124,7 +124,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.ts

@@ -94,6 +94,7 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
             this.qcCompletedPdListData = data.records;
             this.dataLengthTab5 = data.records.length;
             this.dataSourceTab5.data = this.qcCompletedPdListData;
+            this.recordStatus = false
           }
           else {
             this.qcCompletedPdListData = [];
@@ -193,11 +194,13 @@ export class QcCompletedPdComponent implements OnInit, OnChanges {
       if (res['dataStatus'] == true) {
         this.dataSourceTab5 = res['records'];
         this.dataSourceTab5.paginator = this.paginator;
+        this.recordStatus = false
       }else{
           this.notifier.notify('warning', 'No Records Found !');
           this.dataSourceTab5.paginator['length'] = 0;
           this.dataSourceTab5.paginator['pageIndex'] = 0;
           this.dataSourceTab5.data = [];     
+          this.recordStatus = true      
        }
      },error => {
        this.errorMessage.push(error);

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

@@ -6,7 +6,7 @@
                     <mat-toolbar-row>
                         <mat-icon>filter_list</mat-icon>
                         <span class="toolbar-space"></span>
-                        <span>Advance Filter</span>
+                        <span>Advanced Filter</span>
                     </mat-toolbar-row>    
                   </mat-panel-title>
                 
@@ -72,7 +72,7 @@
                   </mat-list>
                
               </mat-expansion-panel>
-              <br/>
+              <p class="note" *ngIf="!recordStatus">Showing data for last 10 days. Showing data for last 10 days. To see older records, please use advanced filter</p>
         <mat-table [dataSource]="dataSourceTab3" matSort *ngIf="scheduledPdListData.length > 0" >
                 <ng-container matColumnDef="PDType">
                     <mat-cell fxFlex.xs="20" fxFlex.sm="15" fxFlex.md="13" fxFlex.lg="16" fxFlex.xl="13" class="cell" *matCellDef="let details;" style="justify-content:flex-end">
@@ -124,8 +124,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"
       [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.ts

@@ -93,6 +93,7 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
             this.scheduledPdListData = data.records;
             this.dataLengthTab3 = data.records.length;
             this.dataSourceTab3.data = this.scheduledPdListData;
+            this.recordStatus = false   
           }
           else{
             this.scheduledPdListData=[];
@@ -206,11 +207,13 @@ export class ScheduledPdComponent implements OnInit, OnChanges {
         {
             this.dataSourceTab3 = res['records'];
             this.dataSourceTab3.paginator = this.paginator;
+            this.recordStatus = 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      
        }
      },error => {
        this.errorMessage.push(error);

ng6-seed/src/app/sales-pd/material_modules/material.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatIconModule, MatInputModule, MatTableModule, MatListModule, MatToolbarModule, MatFormFieldModule, MatTabsModule, MatCardModule, MatPaginatorModule, MatButtonModule, MatExpansionModule, MatProgressBarModule, MatProgressSpinnerModule, MatDatepickerModule } from '@angular/material';
+import { MatIconModule, MatInputModule, MatTableModule, MatListModule, MatToolbarModule, MatFormFieldModule, MatTabsModule, MatCardModule, MatPaginatorModule, MatButtonModule, MatExpansionModule, MatProgressBarModule, MatProgressSpinnerModule, MatDatepickerModule, MatSelectModule } from '@angular/material';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatTableExporterModule } from 'mat-table-exporter';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
@@ -51,6 +51,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
   imports: [
     CommonModule,
     MatInputModule,
+    MatSelectModule,
     MatIconModule,
     MatTableModule,
     MatListModule,
@@ -72,6 +73,7 @@ const pdCustomNotifierOptions: NotifierOptions = {
   exports:[
     CommonModule,
     MatInputModule,
+    MatSelectModule,
     MatIconModule,
     MatTableModule,
     MatListModule,

ng6-seed/src/app/sales-pd/sales-pd-list/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/sales-pd-list/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/sales-pd-list/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 'app/sales-pd/services/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-list/sales-pd.component.html

@@ -13,80 +13,14 @@
             </mat-form-field>
       </div>
     </div>
-
+    <app-advance-filter [drop_down_datas]="filter_drop_down_data" (filteredlistData)="filteredDataSource($event)" 
+    (resetFilter)= "loadSalesPDDetails()"></app-advance-filter>
 <!-- <mat-tab-group class="mt-1">
    <mat-tab> -->
       <!-- <ng-template mat-tab-label>Sales PD</ng-template>  -->
+     
     <mat-card-content [hidden]="salesPdData.length == 0" >
-          <!-- <mat-expansion-panel  [(expanded)]="xpandStatus"> -->
+            <p class="note" *ngIf="salesPdData.length > 0">Showing data for last 10 days. Showing data for last 10 days. To see older records, please use advanced filter</p>
-              <!-- <mat-expansion-panel-header>
-                <mat-panel-title class="text-xs-left">
-                 <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
-                 <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">
@@ -154,7 +88,10 @@
        [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
      </mat-paginator>
   </mat-card-content>
-
+  <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> 

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

@@ -25,3 +25,10 @@
     color: black;
     cursor: pointer;
 }
+p.note {
+    // float: right;
+    text-align: right;
+    font-size: 12px;
+    color: grey;
+    font-weight: bold;
+}

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

@@ -33,6 +33,7 @@ export class SalesPdComponent implements OnInit {
   pageSize = 10;
   pageEvent: PageEvent;
   todaydate:Date = new Date();
+  filter_drop_down_data: any;
 
   constructor(private _pdSales: PdTrigerService,private userService:UserService) { }
 
@@ -49,8 +50,42 @@ export class SalesPdComponent implements OnInit {
       data => {
         if (data.status == 200) {
           this.salesPdData = data.records;
+          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);
+          }
           this.dataLengthTab4 = data.records.length;
           this.dataSourceTab4.data = this.salesPdData;
+          this.recordStatus=false
         }
         else{
           this.salesPdData=[];
@@ -66,6 +101,21 @@ export class SalesPdComponent implements OnInit {
       });    
   }
 
+  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
+  }
+  else{
+    this.salesPdData=[];
+    this.dataLengthTab4= null;
+    this.recordStatus=true;
+  }
+  }
+
   salesPDpdf(pdfdetail){
     this._pdSales.getSalesPdpdf(pdfdetail)
     .subscribe(

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

@@ -6,6 +6,7 @@ import { SalesPdComponent } from './sales-pd-list/sales-pd.component';
 import { MaterialModule } from './material_modules/material.module';
 import { MisReportsComponent } from './mis-reports/mis-reports.component';
 import { MAT_DATE_LOCALE } from '@angular/material';
+import { AdvanceFilterComponent } from './sales-pd-list/advance-filter/advance-filter.component';
 
 @NgModule({
   imports: [
@@ -13,7 +14,7 @@ import { MAT_DATE_LOCALE } from '@angular/material';
     SalesPdRoutingModule,
     MaterialModule
   ],
-  declarations: [SalesPdComponent, MisReportsComponent],
+  declarations: [SalesPdComponent, MisReportsComponent, AdvanceFilterComponent],
   providers:[{ provide: MAT_DATE_LOCALE, useValue: 'en-GB' }]
 })
 export class SalesPdModule { }

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

@@ -18,5 +18,8 @@ export class SalesPdService {
     return this._http.post(api_url+'salesPDMisReport',params)
   }
 
+  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

@@ -12,7 +12,8 @@ export const environment = {
 
   // apiEndpoint: 'https://demo.pdgenie.com/sparqtest/api/',
   // apiEndpoint: 'https://demo.pdgenie.com/sparqapi/api/',
-  apiEndpoint:'https://apitest.pdgenie.com/sparqapi/api/',
+  // apiEndpoint:'https://apitest.pdgenie.com/sparqapi/api/',
+  apiEndpoint:'http://localhost/sineEdge/sparqapi/api/',
 
   authorization: 'sparqvenba2018',