PD officer UI for Mobile View

This commit is contained in:
sriram-at-840620226347 2020-10-12 13:16:11 +05:30
parent 66bcb27c16
commit 948cb948ad
19 changed files with 69 additions and 48 deletions

View File

@ -410,7 +410,7 @@
</div>
</div>
<div fxLayout="row">
<div fxLayout="column" fxFlex="85%">
<div fxLayout="column" fxFlex="100%">
<mat-form-field appearance="fill">
<mat-label>Comment on locality</mat-label>
<mat-select formControlName="comment_locality">

View File

@ -93,3 +93,4 @@
// background: blue;
}

View File

@ -1,22 +1,34 @@
<mat-card>
<mat-card-content>
<div fxLayout="row" *ngFor="let master of pdMasterData">
<div fxFlex="100" align="right">
<button mat-raised-button class="mr-1 mb-1" color="primary" style="cursor: not-allowed !important;">
<strong> {{master.vendor_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.vendor_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.vendor_status | titlecase}}</strong>
</button>
<button *ngIf="roleAccessDetails.trigger && currentPDStatus==pdStatusCheck.DRAFT" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdMaster(master)" matTooltipPosition="above" matTooltip="Edit PD Master"><mat-icon>edit</mat-icon></button>
<button *ngIf="roleAccessDetails.trigger && currentPDStatus==pdStatusCheck.DRAFT" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Trigger" matTooltipPosition="above" (click)="directTriggerPD(mandatoryFieldsValidations,master)"><mat-icon>flash_on</mat-icon></button>
<button *ngIf="roleAccessDetails.reports && master.pd_type_name && currentPDStatus==pdStatusCheck.QC_COMPLETED" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Report" matTooltipPosition="above" (click)="getPDIDReport(viewID)"><mat-icon>ballot</mat-icon></button>
<span><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button></span>
</div>
</div>
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="30" fxFlex.xl="30" *ngFor="let master of pdMasterData">
<mat-card style="min-width: 80%;max-width: 100%;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;margin-top:60px;">
<mat-card style="min-width: 80%;max-width: 100%;box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;">
<mat-card-content style="background-color: whitesmoke;padding:0px !important;height: 245px !important;">
<mat-list role="list" style="padding-top: 0px !important;">
<mat-list-item role="listitem" style="background-color:#e00201;height:48px !important;">
<div fxFlex="row">
<div fxFlex="100">
<div fxFlex="row">
<div fxFlex="100" align="center" *ngIf="master.pd_type_name" style="color:#fff;">
<i class="fa-1x fa fa-check-circle"></i><small style="margin-left: 2%; font-size: inherit">{{master.pd_type_name}}</small>
</div>
</div>
</div>
</div>
</mat-list-item>
<mat-list-item role="listitem" style="height:48px !important;">
<mat-list-item role="listitem" style="height:auto !important;">
<div fxFlex="row">
<div fxFlex="100">
<div fxFlex="30" align="left">
@ -31,7 +43,7 @@
</mat-list-item>
<mat-list-item role="listitem" style="height:auto !important;">
<mat-list-item role="listitem" style="height:60px !important;">
<div fxFlex="row">
<div fxFlex="100">
<div fxFlex="50" align="left" *ngIf="master.lender_applicant_id">
@ -118,21 +130,11 @@
</mat-card>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="60" fxFlex.lg="70" fxFlex.xl="70" class="content-data" *ngFor="let master of pdMasterData">
<div fxLayout="row">
<div fxFlex="100" align="right">
<button mat-raised-button class="mr-1 mb-1" color="primary" style="cursor: not-allowed !important;">
<strong> {{master.vendor_status==pdStatusCheck.QC_COMPLETED ? 'QC Completed' : master.vendor_status==pdStatusCheck.ADD_ON_PENDING ? 'Addon Pending' : master.vendor_status | titlecase}}</strong>
</button>
<button *ngIf="roleAccessDetails.trigger && currentPDStatus==pdStatusCheck.DRAFT" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" (click)="editPdMaster(master)" matTooltipPosition="above" matTooltip="Edit PD Master"><mat-icon>edit</mat-icon></button>
<button *ngIf="roleAccessDetails.trigger && currentPDStatus==pdStatusCheck.DRAFT" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Trigger" matTooltipPosition="above" (click)="directTriggerPD(mandatoryFieldsValidations,master)"><mat-icon>flash_on</mat-icon></button>
<button *ngIf="roleAccessDetails.reports && master.pd_type_name && currentPDStatus==pdStatusCheck.QC_COMPLETED" mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="PD Report" matTooltipPosition="above" (click)="getPDIDReport(viewID)"><mat-icon>ballot</mat-icon></button>
<span><button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above" (click)="loadPdListCompoent()"><mat-icon>close</mat-icon></button></span>
</div>
</div>
<!-- <hr/> -->
<div fxLayout="row wrap">
<div fxFlex="50" *ngFor="let addresses of master.addresses;">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" *ngFor="let addresses of master.addresses;">
<mat-card style="box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;border-radius: 5px !important;border-bottom:1px solid #e00201 !important;" *ngIf="addresses.pincode">
<mat-card-title class="headerdesign" style="margin:0px !important;padding: 0px !important;height: 95px !important;">
<!-- this is for set primary address of the PD actions-->
@ -244,7 +246,7 @@
</mat-card>
</div>
<div fxFlex="50" *ngIf="master.remarks">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50" *ngIf="master.remarks">
<mat-card style="box-shadow: 0 5px 11px 0 rgba(0,0,0,.18), 0 4px 15px 0 rgba(0,0,0,.15) !important;border-radius: 5px !important;border-bottom:1px solid #e00201 !important;">
<mat-card-header>
<mat-card-title style="color:#e00201;">Remarks</mat-card-title>
@ -259,7 +261,7 @@
</div>
<div fxLayout="row">
<div fxFlex="100">
<mat-card fxFlex="100" 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 *ngIf="VendorRoleID != 22" fxFlex="100" class="p-2" style="box-shadow: 0 0 1px rgba(0,0,0,.18), 0 0 1px rgba(0,0,0,.15) !important">
<div class="mat-button-div" style="text-align: right;">
<button *ngIf="VendorRoleID != 22 && master.is_qc_enabled == '1'" mat-raised-button color="primary" class="mr-1 mb-1 hover-icon" type="button" matTooltip="QC COMPLETE" matTooltipPosition="above" (click)="onClickQCCompleted(master)" [disabled]="master.vendor_status != 'COMPLETED'">QC COMPLETE</button>
</div>
@ -284,26 +286,31 @@
</div>
</mat-card-header>
<mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant">
<mat-list *ngFor="let applicant of pdApplicantData">
<mat-list-item style="height:68px !important;">
<p><span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-user-o" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
&nbsp;{{applicant.applicant_name}}
</span> &nbsp;&nbsp;&nbsp;
<span *ngIf="applicant.mobile_no != '' && (applicant.mobile_no != null || applicant.mobile_no != undefined) " class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
&nbsp;{{applicant.mobile_no}}
</span> &nbsp;&nbsp;&nbsp;
<span *ngIf="applicant.landline != '' && (applicant.landline != 'null-null'|| applicant.landline != undefined-undefined) && (applicant.landline != null || applicant.landline != undefined) " class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
&nbsp;{{applicant.landline}}
</span>
<span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">( Applicant )</span>
<ng-template #codetails><span> {{applicant.relation_name}} </span></ng-template>
</p>
</mat-list-item>
</mat-list>
<mat-card-content *ngIf="pdApplicantData.length>0; else noApplicant" style="padding: 0px !important;">
<mat-card *ngFor="let applicant of pdApplicantData" style="padding: 6px;border-radius: 5px;border: 2px solid #00BCD4;margin-bottom: 10px;">
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="20.33" fxFlex.xl="20.33">
<span *ngIf="applicant.applicant_name!=null" class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-user-o" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
&nbsp;{{applicant.applicant_name}}
</span>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="20.33" fxFlex.xl="20.33">
<span *ngIf="applicant.mobile_no != '' && (applicant.mobile_no != null || applicant.mobile_no != undefined) " class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
&nbsp;{{applicant.mobile_no}}
</span>
</div>
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="35.33" fxFlex.xl="35.33">
<span *ngIf="applicant.landline != '' && (applicant.landline != 'null-null'|| applicant.landline != undefined-undefined) && (applicant.landline != null || applicant.landline != undefined) " class="mb-2 text-center hover-icon">
<i class="fa-1x fa fa-phone" style="width: 37px;padding: 8px 9px 8px 9px;border-bottom: 2px solid red;"></i>
&nbsp;{{applicant.landline}}
</span>
<span *ngIf="applicant.applicant_type=='1';else codetails" style="font-size:12px;">( Applicant )</span>
<ng-template #codetails><span> {{applicant.relation_name}} </span></ng-template>
</div>
</div>
</mat-card>
</mat-card-content>
<ng-template #noApplicant>
<mat-card-content>
@ -401,7 +408,20 @@
<mat-tab>
<ng-template mat-tab-label>FI History</ng-template>
<div *ngIf="masterPdLogsData.length>0; else nohistory">
<mat-list class="m-gap p-gap" *ngFor="let master of masterPdLogsData">
<div fxLayout="row wrap" *ngFor="let master of masterPdLogsData">
<div [ngClass]="master.meta_data ? 'metaDataStyle' : '' " class="m-gap p-gap" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<div style="font-size:15px;">
<span style="color:#908f8f">{{master.time}}&nbsp;</span>
<span style="color:#908f8f"> <i> {{master.user}} </i> </span><br> <span>{{master.log}}</span>
<div *ngIf="master.meta_data && master.meta_data.length>0">
<div *ngFor="let metadata of master.meta_data" style="color:#908f8f">
<i>{{metadata.display_name}} </i> : <span>{{metadata.display_value}}</span><br>
</div>
</div>
</div>
</div>
</div>
<!-- <mat-list class="m-gap p-gap" *ngFor="let master of masterPdLogsData">
<mat-list-item [ngClass]="master.meta_data ? 'metaDataStyle' : '' ">
<span style="font-size:15px;"><span style="color:#908f8f">{{master.time}}&nbsp;</span>
<span style="color:#908f8f"> <i> {{master.user}} </i> </span><br> <span>{{master.log}}</span>
@ -414,7 +434,7 @@
</mat-list-item>
</mat-list>
</mat-list> -->
</div>
<ng-template #nohistory>
<mat-card-content>

0
ng6-seed/src/assets/images/PD_Genie_TM.jpg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 190 KiB

0
ng6-seed/src/assets/images/PD_Genie_TM1.jpg Normal file → Executable file
View File

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 113 KiB

View File

@ -195,7 +195,7 @@
@media(max-width:991px) {
.body-container {
padding: 1rem;
padding: 0rem;
}
html {
font-size: 14px;
@ -335,7 +335,7 @@
text-align: center;
box-sizing: content-box!important;
-ms-flex-direction: column!important;
flex-direction: column!important, ;
flex-direction: column!important;
height: 42px;
}
.navigation>.mat-list-item>.mat-list-item-content>a>span:not(.menu-badge):not(.menu-caret) {
@ -356,7 +356,7 @@
visibility: visible;
}
.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;
}