Fairoj : Sales PD List modified

This commit is contained in:
venbatechnologies@gmail.com 2019-12-23 12:05:46 +05:30
parent 2d0c79e91d
commit 1205b5a033
10 changed files with 182 additions and 152 deletions

View File

@ -54,6 +54,7 @@ export class TokenInterceptor implements HttpInterceptor{
private handleError<T> (operation = 'operation', result?: T) { private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => { return (error: any): Observable<T> => {
if(error instanceof HttpErrorResponse){ if(error instanceof HttpErrorResponse){
console.log("Error from interceptor >>>",error)
console.error("Error: " + error.status); console.error("Error: " + error.status);
if(error.status == 401){ if(error.status == 401){
localStorage.clear(); localStorage.clear();

View File

@ -23,6 +23,7 @@ mat-card .child_mat_card > mat-card {
box-shadow: $base-card-box-shadow; box-shadow: $base-card-box-shadow;
transform: scale(0.95); transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s; transition: box-shadow 0.5s, transform 0.5s;
border: 1px solid lavender;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
// background-color: #e00201 !important; // background-color: #e00201 !important;

View File

@ -72,6 +72,7 @@ mat-card .child_mat_card > mat-card {
box-shadow: $base-card-box-shadow; box-shadow: $base-card-box-shadow;
transform: scale(0.95); transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s; transition: box-shadow 0.5s, transform 0.5s;
border: 1px solid lavender;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
// background-color: #e00201 !important; // background-color: #e00201 !important;

View File

@ -72,6 +72,7 @@ mat-card .child_mat_card > mat-card {
box-shadow: $base-card-box-shadow; box-shadow: $base-card-box-shadow;
transform: scale(0.95); transform: scale(0.95);
transition: box-shadow 0.5s, transform 0.5s; transition: box-shadow 0.5s, transform 0.5s;
border: 1px solid lavender;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
// background-color: #e00201 !important; // background-color: #e00201 !important;

View File

@ -1,148 +1,154 @@
<mat-card class="p-2" style="box-shadow: 0 0 1px rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.15) !important"> <mat-card class="p-2" style="box-shadow: 0 0 1px rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.15) !important">
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="50" class="pb-0 text-sm-left"> <div fxFlex="50" class="pb-0 text-sm-left">
<mat-form-field dividerColor="primary" style="width: 50%;"> <mat-form-field dividerColor="primary" style="width: 50%;">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field> </mat-form-field>
</div>
</div> </div>
<mat-tab-group class="mt-1"> </div>
<mat-tab> <mat-tab-group class="mt-1">
<ng-template mat-tab-label>Sales PD</ng-template> <mat-tab>
<mat-card-content> <ng-template mat-tab-label>Sales PD</ng-template>
<mat-expansion-panel [(expanded)]="xpandStatus"> <mat-card-content>
<mat-expansion-panel-header> <!-- <mat-expansion-panel [(expanded)]="xpandStatus"> -->
<mat-panel-title class="text-xs-left"> <!-- <mat-expansion-panel-header>
<!-- <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6> --> <mat-panel-title class="text-xs-left">
<mat-toolbar-row> <h6 class="mt-0"><mat-icon>filter_list</mat-icon> Filter</h6>
<mat-icon>filter_list</mat-icon> <mat-toolbar-row>
<span class="toolbar-space"></span> <mat-icon>filter_list</mat-icon>
<span>Advance Filter</span> <span class="toolbar-space"></span>
</mat-toolbar-row> <span>Advance Filter</span>
</mat-panel-title> </mat-toolbar-row>
</mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header> -->
<!-- <mat-list class="m-gap p-gap"> <!-- <mat-list class="m-gap p-gap">
<div [formGroup]="searchForm"> <div [formGroup]="searchForm">
<mat-form-field style="width:30%"> <mat-form-field style="width:30%">
<mat-select multiple formControlName="pd_type" placeholder="PD Type"> <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-option *ngFor="let type of PDType" [value]="type.pd_type_id">{{type.type_name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> &nbsp; &nbsp; </mat-form-field> &nbsp; &nbsp;
<mat-form-field style="width:30%"> <mat-form-field style="width:30%">
<input matInput [max]="todaydate" [matDatepicker]="picker" (blur)="checkDate($event)" formControlName="pd_from_date" placeholder="Choose a From date"> <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-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker> <mat-datepicker #picker></mat-datepicker>
</mat-form-field> &nbsp; &nbsp; </mat-form-field> &nbsp; &nbsp;
<mat-form-field style="width:30%"> <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"> <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-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker #picker1></mat-datepicker> <mat-datepicker #picker1></mat-datepicker>
</mat-form-field> </mat-form-field>
<mat-form-field style="width:30%"> <mat-form-field style="width:30%">
<mat-select multiple formControlName="pd_products" placeholder="Products"> <mat-select multiple formControlName="pd_products" placeholder="Products">
<mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option> <mat-option *ngFor="let pro of PRODUCTS" [value]="pro.product_id">{{pro.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> &nbsp; &nbsp; </mat-form-field> &nbsp; &nbsp;
<mat-form-field style="width:30%"> <mat-form-field style="width:30%">
<mat-select multiple formControlName="pd_city" placeholder="City"> <mat-select multiple formControlName="pd_city" placeholder="City">
<mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option> <mat-option *ngFor="let city of CITY" [value]="city.city_id">{{city.name}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> &nbsp; &nbsp; </mat-form-field> &nbsp; &nbsp;
<mat-form-field style="width:30%"> <mat-form-field style="width:30%">
<mat-select multiple formControlName="pd_lender" placeholder="Lender Name"> <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-option *ngFor="let ent of ENTITY" [value]="ent.entity_id">{{ent.full_name}}</mat-option>
</mat-select> </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> </mat-form-field>
<mat-form-field style="width:30%"> <div align="right">
<input matInput type="text" formControlName="pd_name" placeholder="Applicant Name"> <button type="button" mat-raised-button mat-icon-button (click)="onReset()"
</mat-form-field> &nbsp; &nbsp; matTooltip="Reset" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary">
<mat-form-field style="width:30%"> <mat-icon>settings_backup_restore</mat-icon>
<input matInput type="text" formControlName="pd_applicant_id" placeholder="Applicant Id"> </button>
</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()" <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"> matTooltip="Search" matTooltipPosition="above" class="mr-1 mb-1 hover-icon" color="primary" type="button">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</mat-list> --> </mat-list> -->
</mat-expansion-panel> <!-- </mat-expansion-panel> -->
<br/> <!-- <br/> -->
<mat-table [dataSource]="dataSourceTab4" matSort *ngIf="salesPdData.length > 0" > <mat-table [dataSource]="dataSourceTab4" matSort *ngIf="salesPdData.length > 0" >
<ng-container matColumnDef="SalesPdId"> <ng-container matColumnDef="SalesPdId">
<mat-cell class="cell" *matCellDef="let details;"> <mat-cell class="cell" *matCellDef="let details;" fxFlex.xs="7" fxFlex.sm="7" fxFlex.md="7" fxFlex.lg="7" fxFlex.xl="10">
<small mat-line>{{details.sales_pd_id}}</small> <small mat-line>{{details.sales_pd_id}}</small>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="SalesPdSno"> <ng-container matColumnDef="SalesPdSno">
<mat-cell class="cell" *matCellDef="let details;"> <mat-cell fxFlex.xs="15" fxFlex.sm="15" fxFlex.md="15" fxFlex.lg="16" fxFlex.xl="15" class="cell" *matCellDef="let details;" style="color:rgb(224, 2, 1);font-weight: bold;text-align: left" >
<small mat-line>{{details.sales_pd_sno}}</small> <small mat-line>{{details.sales_pd_sno}}</small>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="Applicant Name"> <ng-container matColumnDef="Applicant Name">
<mat-cell class="cell" *matCellDef="let details;"> <mat-cell class="cell" *matCellDef="let details;" fxFlex.xs="20" fxFlex.sm="17" fxFlex.md="18" fxFlex.lg="20" fxFlex.xl="18">
<span *ngIf="!details.applicant_name" mat-line> <span *ngIf="!details.applicant_name" mat-line>
<small>--</small> <small>--</small>
</span> </span>
<span *ngIf="details.applicant_name" mat-line> <span *ngIf="details.applicant_name" mat-line>
<b>{{details.applicant_name}}</b> <b>{{details.applicant_name}}</b>
</span> </span><br>
<span class="fontsize"> {{details.applicant_id}}</span> <span class="fontsize" mat-line> {{details.applicant_id}}</span>
</mat-cell> </mat-cell>
</ng-container>
<ng-container matColumnDef="Short Name">
<mat-cell class="cell" *matCellDef="let details" fxLayoutAlign="center start" fxFlex.xs="9" fxFlex.sm="9" fxFlex.md="9" fxFlex.lg="9">
<span style="font-weight:500"> <small mat-line>{{details.short_name}}</small></span><br/>
<span style="text-align: center;font-weight:400;font-size: 17px;"> <small mat-line>{{details.abbr}}</small></span>
</mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="Short Name"> <ng-container matColumnDef="Officer Name">
<mat-cell class="cell" *matCellDef="let details"> <mat-cell fxFlex.xs="10" fxFlex.sm="10" fxFlex.md="10" fxFlex.lg="13" class="cell" *matCellDef="let details;" fxLayoutAlign="center start">
<small mat-line>{{details.short_name}}</small>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Abbr">
<mat-cell class="cell" *matCellDef="let details;">
<small mat-line>{{details.abbr}}</small>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Officer Name">
<mat-cell class="cell center" *matCellDef="let details;">
<span *ngIf="!details.officer_name" mat-line> <span *ngIf="!details.officer_name" mat-line>
<small>--</small> <small>--</small>
</span> </span>
<span *ngIf="details.applicant_name" mat-line> <span *ngIf="details.officer_name" mat-line>
<small mat-line>{{details.officer_name}}</small> <small mat-line >{{details.officer_name}}</small>
</span> </span>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<ng-container matColumnDef="Create On"> <ng-container matColumnDef="status">
<mat-cell class="cell center" *matCellDef="let details;"> <mat-cell fxFlex.xs="10" fxFlex.sm="15" fxFlex.md="15" fxFlex.lg="18" class="cell" *matCellDef="let details;" style="justify-content: flex-start;;text-align: center;font-weight: bold" fxLayoutAlign="start">
<small mat-line>{{details.createdon | date: 'dd/MM/yyyy'}}</small> <span *ngIf="!details.status" mat-line>
</mat-cell> <small>--</small>
</ng-container> </span>
<ng-container matColumnDef="Action"> <span *ngIf="details.status" mat-line>
<mat-cell class="cell center" *matCellDef="let details;"> <small mat-line [ngStyle]="{'color':details.status == 'COMPLETED' ? 'green' :'orange'}">{{details.status}}</small>
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PDF Download" </span>
matTooltipPosition="above" color="primary" (click)="salesPDpdf(details.sales_pd_id)"><mat-icon>file_download</mat-icon></button> </mat-cell>
</mat-cell> </ng-container>
</ng-container> <ng-container matColumnDef="Create On">
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;"> <mat-cell class="cell" *matCellDef="let details;" fxFlex.xs="10" fxFlex.sm="15" fxFlex.md="15" fxFlex.lg="10" fxLayoutAlign="center end">
</mat-row> <small mat-line>{{details.createdon | date: 'dd/MM/yyyy'}}</small>
</mat-table> </mat-cell>
</ng-container>
<ng-container matColumnDef="Action">
<mat-cell class="cell" *matCellDef="let details;" style="justify-content: flex-start">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PDF Download" [disabled]="details.status != 'COMPLETED'"
matTooltipPosition="above" color="primary" (click)="salesPDpdf(details.sales_pd_id)"><mat-icon>file_download</mat-icon></button>
</mat-cell>
</ng-container>
<mat-row style="align-items: normal !important;" *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
</mat-card-content> </mat-card-content>
<mat-paginator *ngIf="!recordStatus" #paginator class="mat-elevation-z1" [length]="salesPdData.length" [pageIndex]="pageIndex" [pageSize]="pageSize" <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> [pageSizeOptions]="[5, 10, 25,50, 100]" (page)="pageEvent = $event; pageChange($event)" showFirstLastButtons>
</mat-paginator> </mat-paginator>
</mat-tab> </mat-tab>
</mat-tab-group> </mat-tab-group>
</mat-card> </mat-card>

View File

@ -4,7 +4,7 @@
} }
.cell{ .cell{
display:inline !important; display:inline !important;
text-align: center !important; // text-align: center !important;
} }
.cellhide{ .cellhide{
display: none !important; display: none !important;

View File

@ -1,6 +1,7 @@
import { Component, OnInit, ViewChild } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource, PageEvent } from '@angular/material'; import { MatTableDataSource, MatPaginator, MatSort, PageEvent } from '@angular/material';
import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service'; import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.service';
import { UserService } from 'app/settings/service/user.service';
@Component({ @Component({
selector: 'app-sales-pd', selector: 'app-sales-pd',
@ -8,11 +9,10 @@ import { PdTrigerService } from 'app/personal-discussion/pd-service/pd-triger.se
styleUrls: ['./sales-pd.component.scss'] styleUrls: ['./sales-pd.component.scss']
}) })
export class SalesPdComponent implements OnInit { export class SalesPdComponent implements OnInit {
public dataLengthTab4: number; public dataLengthTab4: number;
public dataSourceTab4 = new MatTableDataSource(); public dataSourceTab4 = new MatTableDataSource();
displayedColumns = ['SalesPdId','SalesPdSno','Applicant Name','Short Name','Abbr','Officer Name','Create On','Action']; displayedColumns = ['SalesPdId','SalesPdSno','Applicant Name','Short Name','Officer Name','status','Create On','Action'];
@ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; @ViewChild(MatSort) sort: MatSort;
@ -33,7 +33,7 @@ export class SalesPdComponent implements OnInit {
pageEvent: PageEvent; pageEvent: PageEvent;
todaydate:Date = new Date(); todaydate:Date = new Date();
constructor(private _pdSales: PdTrigerService) { } constructor(private _pdSales: PdTrigerService,private userService:UserService) { }
ngOnInit() { ngOnInit() {
this.loadSalesPDDetails(); this.loadSalesPDDetails();
@ -94,5 +94,4 @@ export class SalesPdComponent implements OnInit {
applyFilter(filterValue: string) { applyFilter(filterValue: string) {
this.dataSourceTab4.filter = filterValue.trim().toLowerCase(); this.dataSourceTab4.filter = filterValue.trim().toLowerCase();
} }
} }

View File

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

View File

@ -0,0 +1,9 @@
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class SalesPdService {
constructor() { }
}

View File

@ -189,8 +189,8 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
position: relative; position: relative;
padding: 2rem; padding: 1.5rem;
margin-bottom: 2rem; // margin-bottom: 2rem;
} }
@media(max-width:991px) { @media(max-width:991px) {
@ -356,7 +356,7 @@
visibility: visible; visibility: visible;
} }
.mat-list-item>.mat-list-item-content>a>.menu-caret, .mat-list-item>.mat-list-item-content>a>.menu-caret,
.mat-list-item>.mat-list-item-content>a>[fxflex], .mat-list-item>.mat-list-item-content>a>[fxflex]
{ {
display: none; display: none;
} }