UI In PD Team and dashboard
This commit is contained in:
saravanakumarkandasami
parent
b9453e4c50
commit
b044631e0f
@ -21,51 +21,43 @@
|
||||
<mat-card>
|
||||
<mat-card-title>Full</mat-card-title>
|
||||
<mat-card-subtitle></mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
|
||||
<ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
|
||||
<ngx-charts-gauge [scheme]="colorScheme" [results]="full" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
|
||||
</ngx-charts-gauge>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
|
||||
<mat-card>
|
||||
<mat-card-title>Smart</mat-card-title>
|
||||
<mat-card-subtitle></mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<hr>
|
||||
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
|
||||
<ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
|
||||
<ngx-charts-gauge [scheme]="colorScheme" [results]="smart" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
|
||||
</ngx-charts-gauge>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
|
||||
<mat-card>
|
||||
<mat-card-title>Tele</mat-card-title>
|
||||
<mat-card-subtitle></mat-card-subtitle>
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
|
||||
<hr>
|
||||
<mat-card-content>
|
||||
<div class="w-100 h-300px">
|
||||
|
||||
<ngx-charts-gauge [scheme]="colorScheme" [results]="single" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
|
||||
<ngx-charts-gauge [scheme]="colorScheme" [results]="tele" [min]="0" [max]="100" [angleSpan]="240" [startAngle]="-120" [units]="'PD'" [bigSegments]="10" [smallSegments]="5" >
|
||||
</ngx-charts-gauge>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,7 +73,7 @@
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} </p>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
@ -96,7 +88,7 @@
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.cityname}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} </p>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}}</p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
|
||||
@ -20,11 +20,12 @@ export class DashboardComponent {
|
||||
public colorScheme = {
|
||||
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
|
||||
};
|
||||
public autoScale = true;
|
||||
public autoScale = false;
|
||||
constructor() {
|
||||
|
||||
}
|
||||
single: Object[] = [
|
||||
//Full Pd Data
|
||||
full: Object[] = [
|
||||
{
|
||||
name: 'Triggered',
|
||||
value: 45
|
||||
@ -50,22 +51,79 @@ export class DashboardComponent {
|
||||
value: 81
|
||||
}
|
||||
];
|
||||
//smart PD data
|
||||
smart: Object[] = [
|
||||
{
|
||||
name: 'Triggered',
|
||||
value: 65
|
||||
},
|
||||
{
|
||||
name: 'Allocated',
|
||||
value: 20
|
||||
},
|
||||
{
|
||||
name: 'Scheduled',
|
||||
value: 80
|
||||
},
|
||||
{
|
||||
name: 'InProgress',
|
||||
value: 60
|
||||
},
|
||||
{
|
||||
name: 'Completed',
|
||||
value: 26
|
||||
},
|
||||
{
|
||||
name: 'QC Completed',
|
||||
value: 51
|
||||
}
|
||||
];
|
||||
//Tele PD Data
|
||||
tele: Object[] = [
|
||||
{
|
||||
name: 'Triggered',
|
||||
value: 95
|
||||
},
|
||||
{
|
||||
name: 'Allocated',
|
||||
value: 59
|
||||
},
|
||||
{
|
||||
name: 'Scheduled',
|
||||
value: 45
|
||||
},
|
||||
{
|
||||
name: 'InProgress',
|
||||
value: 25
|
||||
},
|
||||
{
|
||||
name: 'Completed',
|
||||
value: 36
|
||||
},
|
||||
{
|
||||
name: 'QC Completed',
|
||||
value: 49
|
||||
}
|
||||
];
|
||||
// //Lender wise PD Triggered
|
||||
lenderpd: Object[] = [{
|
||||
lendername:'ICICI',
|
||||
billingaddr:'Bangalore',
|
||||
fullpd:'9',
|
||||
fullpd:'19',
|
||||
smartpd:'6',
|
||||
telepd:'10',
|
||||
}, {
|
||||
lendername:'IOB',
|
||||
billingaddr:'Chennai',
|
||||
fullpd:'10',
|
||||
smartpd:'5',
|
||||
telepd:'7',
|
||||
}, {
|
||||
lendername:'SBI',
|
||||
billingaddr:'Pune',
|
||||
fullpd:'16',
|
||||
smartpd:'3',
|
||||
telepd:'33',
|
||||
}, ];
|
||||
|
||||
|
||||
@ -74,14 +132,17 @@ export class DashboardComponent {
|
||||
cityname: 'Bangalore',
|
||||
fullpd:'45',
|
||||
smartpd:'17',
|
||||
telepd:'10',
|
||||
}, {
|
||||
cityname: 'Chennai',
|
||||
fullpd:'33',
|
||||
smartpd:'16',
|
||||
telepd:'8',
|
||||
}, {
|
||||
cityname: 'Salem',
|
||||
fullpd:'22',
|
||||
smartpd:'12',
|
||||
telepd:'2',
|
||||
} ];
|
||||
|
||||
// //Same status
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<mat-card>
|
||||
<mat-card-content>
|
||||
<h2> Company </h2>
|
||||
|
||||
|
||||
<form [formGroup]="_companyForm" (submit)="onSubmit()">
|
||||
|
||||
<div class="form-group">
|
||||
@ -16,21 +16,21 @@
|
||||
|
||||
<div class="ml-xs mr-xs">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="text" placeholder="Addressline1" required formControlName="addressline1">
|
||||
<input matInput type="text" placeholder="Address line 1" required formControlName="addressline1">
|
||||
<!-- <mat-error *ngIf="!_companyForm.controls['addressline1'].valid && _companyForm.controls['addressline1'].touched" class="mat-text-warn">You must include a addressline1.</mat-error> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="ml-xs mr-xs">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="text" placeholder="Addressline2" formControlName="addressline2">
|
||||
<input matInput type="text" placeholder="Address line 2" formControlName="addressline2">
|
||||
<!-- <mat-error *ngIf="!_companyForm.controls['addressline2'].valid && _companyForm.controls['addressline2'].touched" class="mat-text-warn">You must include a Name.</mat-error> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="ml-xs mr-xs">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="text" placeholder="Addressline3" formControlName="addressline3">
|
||||
<input matInput type="text" placeholder="Address line 3" formControlName="addressline3">
|
||||
<!-- <mat-error *ngIf="!_companyForm.controls['addressline3'].valid && _companyForm.controls['addressline3'].touched" class="mat-text-warn">You must include a Name.</mat-error> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -48,7 +48,7 @@
|
||||
|
||||
<div class="ml-xs mr-xs">
|
||||
<mat-form-field style="width: 100%">
|
||||
<mat-select placeholder="State" formControlName="state" [disabled]="true">
|
||||
<mat-select placeholder="State" formControlName="state" >
|
||||
<mat-option *ngFor="let sd of stateDatas" [value]="sd.state_id">{{ sd.name }}</mat-option>
|
||||
</mat-select>
|
||||
<!-- <mat-error *ngIf="!_companyForm.controls['state'].valid && _companyForm.controls['state'].touched" class="mat-text-warn">You must Pickup a State.</mat-error> -->
|
||||
@ -58,7 +58,7 @@
|
||||
<div class="ml-xs mr-xs">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput type="text" placeholder="Pin code" required formControlName="pincode">
|
||||
<mat-hint>pincode should be in 6 digit format</mat-hint>
|
||||
<mat-hint>Pincode should be in 6 digit format</mat-hint>
|
||||
<!-- <mat-error *ngIf="_companyForm.controls['pincode'].hasError('required') && _companyForm.controls['pincode'].touched" class="mat-text-warn">You must include phone number.</mat-error> -->
|
||||
<!-- <mat-error *ngIf="!_companyForm.controls['pincode'].valid && _companyForm.controls['pincode'].touched" class="mat-text-warn">You must include a pincode number.</mat-error> -->
|
||||
<!-- <mat-error *ngIf="_companyForm.controls['pincode'].hasError('minlength') && _companyForm.controls['pincode'].touched" class="mat-text-warn">Your pincode must be at least 5 characters long.</mat-error>
|
||||
@ -79,4 +79,5 @@
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<notifier-container></notifier-container>
|
||||
@ -36,8 +36,9 @@
|
||||
<mat-error *ngIf="!_pdTeamForm.controls['fk_city'].valid && _pdTeamForm.controls['fk_city'].touched" class="mat-text-warn">City Name Requried.</mat-error>
|
||||
</mat-form-field>
|
||||
<span fxFlex="0 1 auto" class="ml-xs">
|
||||
<h6> The Selected Cities are., </h6>
|
||||
|
||||
<ul *ngFor="let data of selectedCityDatas">
|
||||
<h6> The Selected Cities are., </h6>
|
||||
<li>{{data}}</li>
|
||||
</ul>
|
||||
</span>
|
||||
@ -46,7 +47,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
<h6>Products</h6><hr><br>
|
||||
<h6>Products</h6> <hr> <br>
|
||||
<div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start">
|
||||
<mat-form-field fxFlex="0 1 auto" class="ml-xs">
|
||||
<mat-select placeholder="Product" required formControlName="fk_product" multiple>
|
||||
@ -56,8 +57,9 @@
|
||||
<mat-error *ngIf="!_pdTeamForm.controls['fk_product'].valid && _pdTeamForm.controls['fk_product'].touched" class="mat-text-warn">Product Name Requried.</mat-error>
|
||||
</mat-form-field>
|
||||
<span fxFlex="0 1 auto" class="ml-xs">
|
||||
<h6> The Selected Products are., </h6>
|
||||
|
||||
<ul *ngFor="let data of selectedProductDatas">
|
||||
<h6> The Selected Products are., </h6>
|
||||
<li>{{data}}</li>
|
||||
</ul>
|
||||
</span>
|
||||
@ -75,8 +77,9 @@
|
||||
|
||||
</mat-form-field>
|
||||
<span fxFlex="0 1 auto" class="ml-xs">
|
||||
<h6> The Selected Customer segment are., </h6>
|
||||
|
||||
<ul *ngFor="let data of selectedSegmentDatas">
|
||||
<h6> The Selected Customer segment are., </h6>
|
||||
<li>{{data}}</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
@ -33,8 +33,9 @@
|
||||
<mat-error *ngIf="submitted && f.fk_city.hasError('required')" class="mat-text-warn">You must Select Cities.</mat-error>
|
||||
</mat-form-field>
|
||||
<span fxFlex="0 1 auto" class="ml-xs">
|
||||
<h6> The Selected Cities are., </h6>
|
||||
|
||||
<ul *ngFor="let data of selectedCityDatas">
|
||||
<h6> The Selected Cities are., </h6>
|
||||
<li>{{data}}</li>
|
||||
</ul>
|
||||
</span>
|
||||
@ -52,8 +53,9 @@
|
||||
<mat-error *ngIf="submitted && f.fk_product.hasError('required')" class="mat-text-warn">You must Select Product.</mat-error>
|
||||
</mat-form-field>
|
||||
<span fxFlex="0 1 auto" class="ml-xs">
|
||||
<h6> The Selected Products are., </h6>
|
||||
|
||||
<ul *ngFor="let data of selectedProductDatas">
|
||||
<h6> The Selected Products are., </h6>
|
||||
<li>{{data}}</li>
|
||||
</ul>
|
||||
</span>
|
||||
@ -69,8 +71,9 @@
|
||||
<mat-error *ngIf="submitted && f.fk_customer_segment.hasError('required')" class="mat-text-warn">You must Select Customer Segment.</mat-error>
|
||||
</mat-form-field>
|
||||
<span fxFlex="0 1 auto" class="ml-xs">
|
||||
<h6> The Selected Customer segment are., </h6>
|
||||
|
||||
<ul *ngFor="let data of selectedSegmentDatas">
|
||||
<h6> The Selected Customer segment are., </h6>
|
||||
<li>{{data}}</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
<div>
|
||||
<mat-card>
|
||||
<mat-card class="mat-elevation-z1">
|
||||
<div style="margin: 6px; padding: 4px;">
|
||||
<div class="p_title" style="font-size: 16px; font-style: bold;">Questions Master</div>
|
||||
<div class="sub_title" style="font-size: 11px;">List of Questions</div>
|
||||
</div>
|
||||
<mat-card>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
|
||||
<div class="ml-xs mr-xs" style="width: 30%;">
|
||||
<mat-card-title><span> Questions Master</span></mat-card-title>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
|
||||
<div fxFlex="80%">
|
||||
|
||||
<div fxflexoffset="30%" fxFlex="40%">
|
||||
<form [formGroup]="filterFormGroupCtrl">
|
||||
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
|
||||
|
||||
@ -19,12 +20,12 @@
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div fxFlex="20%">
|
||||
<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button>
|
||||
<div fxFlex="30%" style="text-align:right">
|
||||
<button mat-fab class="mr-1 mb-1" color="primary" (click)="addNewQuestion()" matTooltip="Add Questions" matTooltipPosition="above"><mat-icon>add</mat-icon></button>
|
||||
</div>
|
||||
</div>
|
||||
<!--</mat-card-content>-->
|
||||
</mat-card>
|
||||
|
||||
|
||||
<ng-container *ngIf="productList.length > 0">
|
||||
<div style="padding: 0 12px;">
|
||||
|
||||
@ -15,7 +15,9 @@
|
||||
font-size: 14px;
|
||||
// width: 100%;
|
||||
}
|
||||
|
||||
.mat-card-title{
|
||||
font-size:24px !important;
|
||||
}
|
||||
.mat-table {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
|
||||
@ -121,11 +121,11 @@
|
||||
transform: scale3D(0, 0, 1);
|
||||
}
|
||||
}
|
||||
.mat-cell{
|
||||
font-size:1.2em !important;
|
||||
.mat-cell,.mat-form-field{
|
||||
font-size:1.2rem !important;
|
||||
}
|
||||
.mat-header-cell{
|
||||
font-size:1.2em !important;
|
||||
font-size:1.2rem !important;
|
||||
font-weight:800 !important;
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user