Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2020-03-03 19:18:27 +05:30
parent 8161c92950
commit 0a86178d21
31 changed files with 526 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ng6-seed/src/app/_guard/token.interceptor.ts
View File

@ -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(
catchError(this.handleError<any>('role', []))
)
return next.handle(requests).pipe(tap((event:HttpEvent<any>)=>{
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();
}
}

6
ng6-seed/src/app/app.module.ts
View File

@ -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]

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

@ -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">

6
ng6-seed/src/app/layouts/http-loader/http-loader.component.html Normal file
View File

@ -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>

34
ng6-seed/src/app/layouts/http-loader/http-loader.component.scss Normal file
View File

@ -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%;}
}

25
ng6-seed/src/app/layouts/http-loader/http-loader.component.spec.ts Normal file
View File

@ -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();
});
});

29
ng6-seed/src/app/layouts/http-loader/http-loader.component.ts Normal file
View File

@ -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();
}
}

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

@ -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>
<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="PdListData.length" [pageIndex]="pageIndex"
<div [hidden]="recordStatus">
<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>

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

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

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

@ -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 => {

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

@ -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" >
@ -125,9 +125,14 @@
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
</mat-card-content>
<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="completedPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
<div [hidden]="recordStatus">
<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>

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

@ -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.dataSourceTab4.data = [];
this.recordStatus=true;
}
},error => {
this.errorMessage.push(error);

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

@ -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>
<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="progressPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
<div [hidden]="recordStatus">
<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>

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

@ -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.dataSourceTab2.data = [];
this.recordStatus=true;
}
},error => {
this.errorMessage.push(error);

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

@ -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>
<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="qcCompletedPdListData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
<div [hidden]="recordStatus">
<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>

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

@ -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.dataSourceTab5.data = [];
this.recordStatus = true
}
},error => {
this.errorMessage.push(error);

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

@ -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>

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

@ -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.dataSourceTab3.data = [];
this.recordStatus = true
}
},error => {
this.errorMessage.push(error);

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

@ -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,

78
ng6-seed/src/app/sales-pd/sales-pd-list/advance-filter/advance-filter.component.html Normal file
View File

@ -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>

0
ng6-seed/src/app/sales-pd/sales-pd-list/advance-filter/advance-filter.component.scss Normal file
View File

25
ng6-seed/src/app/sales-pd/sales-pd-list/advance-filter/advance-filter.component.spec.ts Normal file
View File

@ -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();
});
});

119
ng6-seed/src/app/sales-pd/sales-pd-list/advance-filter/advance-filter.component.ts Normal file
View File

@ -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);
}
}

83
ng6-seed/src/app/sales-pd/sales-pd-list/sales-pd.component.html
View File

@ -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"> -->
<!-- <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-card-content [hidden]="salesPdData.length == 0" >
<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-table [dataSource]="dataSourceTab4" matSort *ngIf="salesPdData.length > 0" >
<ng-container matColumnDef="SalesPdId">
@ -152,9 +86,12 @@
</mat-table>
<mat-paginator *ngIf="!recordStatus" #paginator [length]="salesPdData.length" [pageIndex]="pageIndex" [pageSize]="pageSize"
[pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator>
</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>

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

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

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

@ -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(

3
ng6-seed/src/app/sales-pd/sales-pd.module.ts
View File

@ -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 { }

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

@ -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})
}
}

12
ng6-seed/src/app/shared/loaderService/loader.service.spec.ts Normal file
View File

@ -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();
});
});

19
ng6-seed/src/app/shared/loaderService/loader.service.ts Normal file
View File

@ -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 });
}
}

3
ng6-seed/src/environments/environment.ts
View File

@ -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',