|
|
|
|
@ -45,15 +45,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div >
|
|
|
|
|
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<ion-row *ngIf="direction == 'ltr'">
|
|
|
|
|
<div class="header">
|
|
|
|
|
|
|
|
|
|
<!-- <ion-row *ngIf="direction == 'ltr'">-->
|
|
|
|
|
<ion-row >
|
|
|
|
|
<ion-col>
|
|
|
|
|
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
|
|
|
</ion-icon>
|
|
|
|
|
<!-- <ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
|
|
|
</ion-icon> -->
|
|
|
|
|
|
|
|
|
|
<ion-icon
|
|
|
|
|
[ngClass]=" {'disabledArrow-ar' : payslipIndex === GetPayslipList.length-1 && direction != 'en',
|
|
|
|
|
'disabledArrow' : payslipIndex === GetPayslipList.length-1 && direction === 'en' ,
|
|
|
|
|
'activeArrow-ar' : payslipIndex != GetPayslipList.length-1 && direction != 'en' ,
|
|
|
|
|
'activeArrow' : payslipIndex != GetPayslipList.length-1 && direction === 'en' }"
|
|
|
|
|
|
|
|
|
|
ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
|
|
|
</ion-icon>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <ion-icon [ngClass]="{'disabledArrow-ar' : direction != 'en' ,'disabledArrow' : direction == 'en'}" class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
|
|
|
</ion-icon> -->
|
|
|
|
|
</button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
@ -61,13 +76,26 @@
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
|
|
|
|
</ion-icon>
|
|
|
|
|
<ion-icon
|
|
|
|
|
|
|
|
|
|
[ngClass]=" {
|
|
|
|
|
'activeArrow-ar' : payslipIndex != 0 && direction != 'en' ,
|
|
|
|
|
'activeArrow' : payslipIndex != 0 && direction === 'en' ,
|
|
|
|
|
'disabledArrow-ar' : payslipIndex == 0 && direction != 'en',
|
|
|
|
|
'disabledArrow' : payslipIndex == 0 && direction === 'en'
|
|
|
|
|
}"
|
|
|
|
|
|
|
|
|
|
ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
|
|
|
|
</ion-icon>
|
|
|
|
|
|
|
|
|
|
<!-- <ion-icon [ngClass]="{'disabledArrow' : payslipIndex === 0 , 'activeArrow' : payslipIndex != 0 , 'disabledArrow-ar' : direction != 'en' ,'disabledArrow' : direction == 'en'}" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
|
|
|
|
|
|
|
|
|
</ion-icon> -->
|
|
|
|
|
</button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row *ngIf="direction == 'rtl'">
|
|
|
|
|
<!-- <ion-row *ngIf="direction == 'rtl'">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
|
|
|
|
@ -83,7 +111,7 @@
|
|
|
|
|
</ion-icon>
|
|
|
|
|
</button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-row> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -111,18 +139,15 @@
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
<div [ngClass]="direction == 'en'? 'result-text-container':'result-text-container-ar'">
|
|
|
|
|
|
|
|
|
|
<h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
|
|
|
|
|
|
|
|
|
|
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
|
|
|
|
|
<span>{{ts.trPK('payslip','total')}} <br> {{ts.trPK('payslip','salary')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div [ngClass]=" direction == 'ltr' ? 'div-green-ar' : 'div-green'">
|
|
|
|
|
<div [ngClass]=" direction == 'en' ? 'div-green':'div-green-ar'">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
|
|
|
|
|
@ -132,7 +157,7 @@
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</div>
|
|
|
|
|
<div [ngClass]=" direction == 'ltr' ? 'div-blue-ar' : 'div-blue'">
|
|
|
|
|
<div [ngClass]=" direction == 'en' ? 'div-blue' : 'div-blue-ar'">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>
|
|
|
|
|
@ -179,9 +204,7 @@
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col class="colPayslips">
|
|
|
|
|
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|