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

UI In PD Team and dashboard

Browse Source
This commit is contained in:
saravanakumarkandasami 2018-10-22 17:58:32 +05:30
parent b9453e4c50
commit b044631e0f
8 changed files with 113 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
ng6-seed/src/app/dashboard/dashboard.component.html
View File

@ -21,51 +21,43 @@
<mat-card> <mat-card>
<mat-card-title>Full</mat-card-title> <mat-card-title>Full</mat-card-title>
<mat-card-subtitle></mat-card-subtitle> <mat-card-subtitle></mat-card-subtitle>
<hr> <hr>
<mat-card-content>
<mat-card-content> <mat-card-content>
<div class="w-100 h-300px"> <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> </ngx-charts-gauge>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap"> <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
<mat-card> <mat-card>
<mat-card-title>Smart</mat-card-title> <mat-card-title>Smart</mat-card-title>
<mat-card-subtitle></mat-card-subtitle> <mat-card-subtitle></mat-card-subtitle>
<hr> <hr>
<mat-card-content>
<mat-card-content> <mat-card-content>
<div class="w-100 h-300px"> <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> </ngx-charts-gauge>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
<div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap"> <div fxFlex.gt-sm="33.33%" fxFlex="100" class="m-gap">
<mat-card> <mat-card>
<mat-card-title>Tele</mat-card-title> <mat-card-title>Tele</mat-card-title>
<mat-card-subtitle></mat-card-subtitle> <mat-card-subtitle></mat-card-subtitle>
<hr> <hr>
<mat-card-content>
<mat-card-content> <mat-card-content>
<div class="w-100 h-300px"> <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> </ngx-charts-gauge>
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card-content>
</mat-card> </mat-card>
</div> </div>
</div> </div>
@ -81,7 +73,7 @@
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd"> <ng-template let-item let-last="last" ngFor [ngForOf]="lenderpd">
<mat-list-item> <mat-list-item>
<h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3> <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> </mat-list-item>
</ng-template> </ng-template>
</mat-list> </mat-list>
@ -96,7 +88,7 @@
<ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd"> <ng-template let-item let-last="last" ngFor [ngForOf]="citywisepd">
<mat-list-item> <mat-list-item>
<h3 mat-line> {{item.cityname}} </h3> <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> </mat-list-item>
</ng-template> </ng-template>
</mat-list> </mat-list>

67
ng6-seed/src/app/dashboard/dashboard.component.ts
View File

@ -20,11 +20,12 @@ export class DashboardComponent {
public colorScheme = { public colorScheme = {
domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653'] domain: ['#673ab7', '#f44336', '#009688 ', '#2196f3', '#234278 ', '#2a1653']
}; };
public autoScale = true; public autoScale = false;
constructor() { constructor() {
} }
single: Object[] = [ //Full Pd Data
full: Object[] = [
{ {
name: 'Triggered', name: 'Triggered',
value: 45 value: 45
@ -50,22 +51,79 @@ export class DashboardComponent {
value: 81 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 // //Lender wise PD Triggered
lenderpd: Object[] = [{ lenderpd: Object[] = [{
lendername:'ICICI', lendername:'ICICI',
billingaddr:'Bangalore', billingaddr:'Bangalore',
fullpd:'9', fullpd:'19',
smartpd:'6', smartpd:'6',
telepd:'10',
}, { }, {
lendername:'IOB', lendername:'IOB',
billingaddr:'Chennai', billingaddr:'Chennai',
fullpd:'10', fullpd:'10',
smartpd:'5', smartpd:'5',
telepd:'7',
}, { }, {
lendername:'SBI', lendername:'SBI',
billingaddr:'Pune', billingaddr:'Pune',
fullpd:'16', fullpd:'16',
smartpd:'3', smartpd:'3',
telepd:'33',
}, ]; }, ];
@ -74,14 +132,17 @@ export class DashboardComponent {
cityname: 'Bangalore', cityname: 'Bangalore',
fullpd:'45', fullpd:'45',
smartpd:'17', smartpd:'17',
telepd:'10',
}, { }, {
cityname: 'Chennai', cityname: 'Chennai',
fullpd:'33', fullpd:'33',
smartpd:'16', smartpd:'16',
telepd:'8',
}, { }, {
cityname: 'Salem', cityname: 'Salem',
fullpd:'22', fullpd:'22',
smartpd:'12', smartpd:'12',
telepd:'2',
} ]; } ];
// //Same status // //Same status

15
ng6-seed/src/app/settings/masters/component/company/company.component.html
View File

@ -1,6 +1,6 @@
<mat-card>
<mat-card-content> <mat-card-content>
<h2> Company &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h2>
<form [formGroup]="_companyForm" (submit)="onSubmit()"> <form [formGroup]="_companyForm" (submit)="onSubmit()">
<div class="form-group"> <div class="form-group">
@ -16,21 +16,21 @@
<div class="ml-xs mr-xs"> <div class="ml-xs mr-xs">
<mat-form-field style="width: 100%"> <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-error *ngIf="!_companyForm.controls['addressline1'].valid && _companyForm.controls['addressline1'].touched" class="mat-text-warn">You must include a addressline1.</mat-error> -->
</mat-form-field> </mat-form-field>
</div> </div>
<div class="ml-xs mr-xs"> <div class="ml-xs mr-xs">
<mat-form-field style="width: 100%"> <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-error *ngIf="!_companyForm.controls['addressline2'].valid && _companyForm.controls['addressline2'].touched" class="mat-text-warn">You must include a Name.</mat-error> -->
</mat-form-field> </mat-form-field>
</div> </div>
<div class="ml-xs mr-xs"> <div class="ml-xs mr-xs">
<mat-form-field style="width: 100%"> <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-error *ngIf="!_companyForm.controls['addressline3'].valid && _companyForm.controls['addressline3'].touched" class="mat-text-warn">You must include a Name.</mat-error> -->
</mat-form-field> </mat-form-field>
</div> </div>
@ -48,7 +48,7 @@
<div class="ml-xs mr-xs"> <div class="ml-xs mr-xs">
<mat-form-field style="width: 100%"> <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-option *ngFor="let sd of stateDatas" [value]="sd.state_id">{{ sd.name }}</mat-option>
</mat-select> </mat-select>
<!-- <mat-error *ngIf="!_companyForm.controls['state'].valid && _companyForm.controls['state'].touched" class="mat-text-warn">You must Pickup a State.</mat-error> --> <!-- <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"> <div class="ml-xs mr-xs">
<mat-form-field style="width: 100%"> <mat-form-field style="width: 100%">
<input matInput type="text" placeholder="Pin code" required formControlName="pincode"> <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'].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'].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> <!-- <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> </div>
</form> </form>
</mat-card-content> </mat-card-content>
</mat-card>
<notifier-container></notifier-container> <notifier-container></notifier-container>

11
ng6-seed/src/app/settings/pd-team/pd-team-add/pd-team-add.component.html
View File

@ -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-error *ngIf="!_pdTeamForm.controls['fk_city'].valid && _pdTeamForm.controls['fk_city'].touched" class="mat-text-warn">City Name Requried.</mat-error>
</mat-form-field> </mat-form-field>
<span fxFlex="0 1 auto" class="ml-xs"> <span fxFlex="0 1 auto" class="ml-xs">
<h6> The Selected Cities are., </h6>
<ul *ngFor="let data of selectedCityDatas"> <ul *ngFor="let data of selectedCityDatas">
<h6> The Selected Cities are., </h6>
<li>{{data}}</li> <li>{{data}}</li>
</ul> </ul>
</span> </span>
@ -46,7 +47,7 @@
</div> </div>
<h6>Products</h6><hr><br> <h6>Products</h6> <hr> <br>
<div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start"> <div fxLayout="row wrap" fxLayoutGap="32px" fxLayoutAlign="flex-start">
<mat-form-field fxFlex="0 1 auto" class="ml-xs"> <mat-form-field fxFlex="0 1 auto" class="ml-xs">
<mat-select placeholder="Product" required formControlName="fk_product" multiple> <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-error *ngIf="!_pdTeamForm.controls['fk_product'].valid && _pdTeamForm.controls['fk_product'].touched" class="mat-text-warn">Product Name Requried.</mat-error>
</mat-form-field> </mat-form-field>
<span fxFlex="0 1 auto" class="ml-xs"> <span fxFlex="0 1 auto" class="ml-xs">
<h6> The Selected Products are., </h6>
<ul *ngFor="let data of selectedProductDatas"> <ul *ngFor="let data of selectedProductDatas">
<h6> The Selected Products are., </h6>
<li>{{data}}</li> <li>{{data}}</li>
</ul> </ul>
</span> </span>
@ -75,8 +77,9 @@
</mat-form-field> </mat-form-field>
<span fxFlex="0 1 auto" class="ml-xs"> <span fxFlex="0 1 auto" class="ml-xs">
<h6> The Selected Customer segment are., </h6>
<ul *ngFor="let data of selectedSegmentDatas"> <ul *ngFor="let data of selectedSegmentDatas">
<h6> The Selected Customer segment are., </h6>
<li>{{data}}</li> <li>{{data}}</li>
</ul> </ul>
</span> </span>

9
ng6-seed/src/app/settings/pd-team/pd-team-edit/pd-team-edit.component.html
View File

@ -33,8 +33,9 @@
<mat-error *ngIf="submitted && f.fk_city.hasError('required')" class="mat-text-warn">You must Select Cities.</mat-error> <mat-error *ngIf="submitted && f.fk_city.hasError('required')" class="mat-text-warn">You must Select Cities.</mat-error>
</mat-form-field> </mat-form-field>
<span fxFlex="0 1 auto" class="ml-xs"> <span fxFlex="0 1 auto" class="ml-xs">
<h6> The Selected Cities are., </h6>
<ul *ngFor="let data of selectedCityDatas"> <ul *ngFor="let data of selectedCityDatas">
<h6> The Selected Cities are., </h6>
<li>{{data}}</li> <li>{{data}}</li>
</ul> </ul>
</span> </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-error *ngIf="submitted && f.fk_product.hasError('required')" class="mat-text-warn">You must Select Product.</mat-error>
</mat-form-field> </mat-form-field>
<span fxFlex="0 1 auto" class="ml-xs"> <span fxFlex="0 1 auto" class="ml-xs">
<h6> The Selected Products are., </h6>
<ul *ngFor="let data of selectedProductDatas"> <ul *ngFor="let data of selectedProductDatas">
<h6> The Selected Products are., </h6>
<li>{{data}}</li> <li>{{data}}</li>
</ul> </ul>
</span> </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-error *ngIf="submitted && f.fk_customer_segment.hasError('required')" class="mat-text-warn">You must Select Customer Segment.</mat-error>
</mat-form-field> </mat-form-field>
<span fxFlex="0 1 auto" class="ml-xs"> <span fxFlex="0 1 auto" class="ml-xs">
<h6> The Selected Customer segment are., </h6>
<ul *ngFor="let data of selectedSegmentDatas"> <ul *ngFor="let data of selectedSegmentDatas">
<h6> The Selected Customer segment are., </h6>
<li>{{data}}</li> <li>{{data}}</li>
</ul> </ul>
</span> </span>

21
ng6-seed/src/app/template/questions/list/list.component.html
View File

@ -1,12 +1,13 @@
<div> <div>
<mat-card> <mat-card>
<mat-card class="mat-elevation-z1"> <div fxLayout="row" fxLayoutAlign="start center" class="mb-1">
<div style="margin: 6px; padding: 4px;"> <div class="ml-xs mr-xs" style="width: 30%;">
<div class="p_title" style="font-size: 16px; font-style: bold;">Questions Master</div> <mat-card-title><span> Questions Master</span></mat-card-title>
<div class="sub_title" style="font-size: 11px;">List of Questions</div> </div>
</div> </div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none"> <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutAlign="center none">
<div fxFlex="80%">
<div fxflexoffset="30%" fxFlex="40%">
<form [formGroup]="filterFormGroupCtrl"> <form [formGroup]="filterFormGroupCtrl">
<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;"> <div fxLayout="row" fxLayout.xs="column" fxLayoutWrap fxLayoutGap="0.5px" fxLayoutAlign="start none" style="padding: 6px;">
@ -19,12 +20,12 @@
</div> </div>
</form> </form>
</div> </div>
<div fxFlex="20%"> <div fxFlex="30%" style="text-align:right">
<button mat-stroked-button color="primary" (click)="addNewQuestion()">Add Questions</button> <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>
</div> </div>
<!--</mat-card-content>--> <!--</mat-card-content>-->
</mat-card>
<ng-container *ngIf="productList.length > 0"> <ng-container *ngIf="productList.length > 0">
<div style="padding: 0 12px;"> <div style="padding: 0 12px;">

4
ng6-seed/src/app/template/questions/list/list.component.scss
View File

@ -15,7 +15,9 @@
font-size: 14px; font-size: 14px;
// width: 100%; // width: 100%;
} }
.mat-card-title{
font-size:24px !important;
}
.mat-table { .mat-table {
overflow: auto; overflow: auto;
max-height: 500px; max-height: 500px;

6
ng6-seed/src/index.html
View File

@ -121,11 +121,11 @@
transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1);
} }
} }
.mat-cell{ .mat-cell,.mat-form-field{
font-size:1.2em !important; font-size:1.2rem !important;
} }
.mat-header-cell{ .mat-header-cell{
font-size:1.2em !important; font-size:1.2rem !important;
font-weight:800 !important; font-weight:800 !important;
} }