edit ticketbalance &absense home &payslip header

accural-balance
Fatimah.Alshammari 6 years ago
parent 08c8ea71b1
commit c1e72539de

@ -1,20 +1,21 @@
<!-- <ion-header >
<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
<ion-buttons slot="end">
<!-- <ion-buttons slot="end">
<button class="headerBtn" (click)="AccrualBalances()">
<img class="headerImg" src="../assets/imgs/accubalance.png">
</button>
</ion-buttons>
</ion-buttons> -->
</ion-toolbar>
</ion-header> -->
</ion-header>
<ion-content class="colorBG">
<ion-content >
<!-- colorBG -->
<div class="contentEit" style="background: #f3f1f1;">
<div class="header-div">
<!-- <ion-buttons slot="end">
@ -22,10 +23,12 @@
<img class="headerImg" src="../assets/imgs/accubalance.png">
</button>
</ion-buttons> -->
<ion-buttons slot="start">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<p class="Title">{{ts.trPK('absenceList','absenceList')}}</p>
<p class="Title">{{ts.trPK('absenceList','absenceList')}}</p> -->
</div>
@ -39,7 +42,7 @@
<div style="color: black;">
<div class="result-graph">
<div>
<div >
<!-- <ion-item> -->
<!-- <ion-label class="datelabel">{{request.P_EFFECTIVE_DATE}}</ion-label> -->
<ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY" placeholder="DD MMMM YYYY"
@ -51,9 +54,11 @@
margin-top: -10px; margin-right: -9px;"></div>
<div class="result-text-container">
<!-- <h2>10</h2> -->
<h2>{{accrualNet + accrualUsed + accrualYearly}}</h2>
<h2>{{totalnumber}}</h2>
<!-- <h2>{{accrualNet + accrualUsed + accrualYearly}}</h2> -->
<span>{{ts.trPK('absenceList','totalNumber')}}</span>
@ -139,7 +144,7 @@
<!-- /////////////////////////////////////////////////////////up -->
<ion-content padding>
<!-- <ion-content padding> -->
<div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" >
<ion-row>
@ -245,7 +250,7 @@
<ion-icon class="addClass" name="add" (click)="createAbsence()"></ion-icon>
</div>
</ion-content>
<!-- <ion-footer>
<div class="centerDiv">

@ -144,9 +144,9 @@
border-radius: 20px !important;
padding-top: 28px;
padding-bottom: 14px;
margin-left: 9px;
margin-left: 13px;
margin-right: 13px;
margin-top: -94px;
margin-top: -136px;
margin-bottom: 10px;
}
@ -159,7 +159,7 @@
margin: 0;
position: absolute;
left: 31%;
top: 26%;
top: 23%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
@ -204,4 +204,15 @@ margin-top: -13px;
font-size: 17px;
font-family: WorkSans-Bold;
margin-top: -4px;
}
.contentEit:before {
position: absolute;
content: "";
// background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}

@ -97,7 +97,8 @@ export class HomeComponent implements OnInit {
this.accrualNet = this.leaveAccrualBalance.ACCRUAL_NET_ENTITLEMENT;
this.accrualUsed = this.leaveAccrualBalance.ACCRUAL_USED_ENTITLEMENT;
this.accrualYearly = this.leaveAccrualBalance.ACCRUAL_YEARLY_ENTITLEMENT;
this.totalnumber= this.accrualNet + this.accrualUsed + this.accrualYearly;
this.totalnumber= this.totalnumber.toFixed(3);
this.request = this.common.sharedService.getSharedData('leaveAccrualBalanceDate', false);
console.log("this.request" + this.request.P_EFFECTIVE_DATE);
this.effectiveDate = this.request.P_EFFECTIVE_DATE;
@ -254,7 +255,8 @@ createAbsence() {
this.accrualNet = this.balance[0].ACCRUAL_NET_ENTITLEMENT;
this.accrualUsed = this.balance[0].ACCRUAL_USED_ENTITLEMENT;
this.accrualYearly = this.balance[0].ACCRUAL_YEARLY_ENTITLEMENT;
this.totalnumber= this.accrualNet + this.accrualUsed + this.accrualYearly;
this.totalnumber= this.totalnumber.toFixed(3);
this.data = {
// labels: ['earingTotal', 'deductionTotal'],
datasets: [

@ -1,15 +1,16 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
<ion-title>{{headerTitle}}</ion-title>
<ion-title style="color: white;">{{headerTitle}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<ion-content>
<div class="content" style="background: #f3f1f1;">
<!-- class="colorBG" -->
<div class="" [hidden]="functionName!='HMG_TKT_NEW_EIT_SS'">
<ion-grid class="headerGrid" style="padding-top: 30%;">
<ion-grid class="headerGrid">
<p class="title">{{ts.trPK('absenceList','tickets-balance')}}</p>
<div style="color: black;">
@ -224,6 +225,7 @@
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</div>
</ion-content>
<ion-footer>
@ -233,4 +235,5 @@
<!-- <ion-button class="footer-button" color="customnavy" ion-button (click)="addEITRrq()">
{{'general, add' | translate}}</ion-button> -->
</div>
</ion-footer>

@ -85,6 +85,17 @@ h4 {
}
////////////////////////////////
.content:before {
position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
.colorBG{
--background: #f0efef;
@ -99,7 +110,7 @@ h4 {
.title{
text-align: center;
color: black;
margin-top: -10px;
margin-top: 5px;
font-size: 17px;
}
.today-graph{
@ -111,22 +122,37 @@ h4 {
}
.headerGrid{
// background-color: white !important;
// border: 1px solid #cac8c8 !important;
// border-radius: 20px !important;
// padding-top: 28px;
// padding-bottom: 53px;
// margin-left: 9px;
// margin-right: 13px;
// margin-top: -94px;
// margin-bottom: 10px;
background-color: white !important;
border: 1px solid #cac8c8 !important;
border-radius: 20px !important;
padding-top: 28px;
/* padding-top: 28px; */
padding-bottom: 53px;
margin-left: 9px;
padding-top: -30px;
margin-left: 13px;
margin-right: 13px;
margin-top: -94px;
/* margin-top: -86px; */
margin-bottom: 10px;
position: relative;
z-index: 1;
border-radius: 20px;
margin-top: 17px;
}
.result-graph{
font-size: 14px;
margin-left: -48px;
margin-right: 3px;
margin-bottom: -30px;
}
.green-label{

@ -44,7 +44,6 @@ export class EitListComponent implements OnInit {
accrualNetInfants: any;
accrualUNetChild: any;
accrualNetAdult: any;
public options = {
cutoutPercentage: 80,
@ -81,6 +80,7 @@ export class EitListComponent implements OnInit {
this.accrualNetAdult = this.accrualBalancesList[1].ACCRUAL_NET_ENTITLEMENT;
this.accrualUNetChild = this.accrualBalancesList[2].ACCRUAL_NET_ENTITLEMENT;
this. accrualNetInfants= this.accrualBalancesList[3].ACCRUAL_NET_ENTITLEMENT;
this.data = {
// labels: ['earingTotal', 'deductionTotal'],
datasets: [

@ -1,7 +1,6 @@
<!--
<ion-header>
<!-- <ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
@ -9,17 +8,25 @@
<ion-title color="light" >{{ts.trPK('payslip','title')}}</ion-title>
</ion-toolbar>
</ion-header> -->
<ion-header>
<ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
<ion-title style="color: white;">{{ts.trPK('payslip','monthly-payslip')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="header-div">
<ion-buttons slot="start">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<p class="Title">{{ts.trPK('payslip','monthly-payslip')}}</p>
<div class="Imgdiv">
<img class="Imgsrc">
</div>
</div> -->
</div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->

@ -58,19 +58,20 @@
color: var(--red);
}
.header-toolbar-new{
--background: #22c6b3;
}
.colorBG{
--background: #f0efef;
}
.header-div {
background-color: #22C6B3;
text-transform: capitalize;
height: 180px;
position: relative;
display: block;
margin-bottom: -28px;
background-color: #22C6B3;
text-transform: capitalize;
height: 119px;
position: relative;
display: block;
margin-bottom: -28px;
}
.Title{
text-align: center;
@ -142,8 +143,8 @@
border-radius: 20px !important;
padding-top: 13px;
padding-bottom: 14px;
margin-left: 30px;
margin-right: 32px;
margin-left: 26px;
margin-right: 28px;
margin-top: -2px;
margin-bottom: 10px;
padding-right: 21px;
@ -214,7 +215,7 @@ margin-top: -13px;
.header{
margin-top: -126px;
margin-top: -119px;
}
.bgcolor {

Loading…
Cancel
Save