You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
mohemmionic5/Mohem/src/app/payslip/home/home.component.html

327 lines
13 KiB
HTML

<app-generic-header
showBack="true"
[headerText]="'payslip,monthly-payslip' | translate">
</app-generic-header>
<ion-content class="colorBG">
<div class="header-div">
<!-- <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>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
<div class="">
<div >
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
<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]=" {'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>
<p class="label" *ngIf="direction==='en'"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
<p class="label" *ngIf="direction==='ar'"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(23,17) }}</b></p>
</ion-col>
<ion-col>
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
<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-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">
</ion-icon>
</button>
</ion-col>
<ion-col>
<p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
</ion-col>
<ion-col>
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
</button>
</ion-col>
</ion-row> -->
</div>
<ion-slides [options]="slideOptsOne" #slideWithNav>
<ion-slide >
<ion-grid class="headerGrid">
<ion-row >
<label class="date" for="">{{showPaySlip.PERIOD_START_DATE}}</label>
<label class="label" for="">{{showPaySlip.PERIOD_END_DATE}}</label>
</ion-row>
<div style="color: black;">
<!-- <ngx-gauge
*ngFor="let s of showPaySlip"
[type]="gaugeType"
[value]="gaugeValue"
[label]="gaugeLabel">
</ngx-gauge> -->
<div [ngClass]="direction == 'en'? 'result-graph':'result-graph-ar'">
<!-- <div class="request-heading">
<span>Open Request Analysis</span>
</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 [ngClass]="direction == 'en'? 'today-graph':'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div [ngClass]=" direction == 'en' ? 'div-green':'div-green-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
</ion-row>
<ion-row>
<label class="green-amount">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
</ion-row>
</ion-col>
</div>
<div [ngClass]=" direction == 'en' ? 'div-blue' : 'div-blue-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>
</ion-row>
<ion-row>
<label class="blue-amount" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
</ion-row>
</ion-col>
</div>
</div>
</ion-grid>
</ion-slide>
</ion-slides>
</div>
</div>
<!-- <p>Summary of Payment</p> -->
<div *ngIf="GetSummaryOfPaymentList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
<ion-grid class="grids">
<ion-row class="bgcolor">
<ion-col class="colPayslip">
<label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
</ion-col>
<ion-col class="colPayslip">
<label class="label">%</label>
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{ts.trPK('payslip','amount')}}
</label>
</ion-col>
</ion-row>
<ion-row class="rowtable" >
<ion-col class="colPayslip">
<label class="label" for=""> {{ts.trPK('payslip','deductions')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}</label>
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row class="rowtable">
<ion-col class="colPayslip">
<label class="label" for="">{{ts.trPK('payslip','earnings')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}</label>
</ion-col>
<ion-col class="colPayslips" >
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row class="rowtable">
<ion-col class="colPayslip">
<label class="label-bold" for="">{{ts.trPK('payslip','pay-Amount')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label class="label-bold" for="">{{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}</label>
</ion-col>
<ion-col class="colPayslips">
<label class="label-bold" for="">{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div *ngIf="GetEarningsList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
<ion-grid class="grids">
<ion-row class="bgcolor">
<ion-col class="colPayslip">
<label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{ts.trPK('payslip','amount')}}
</label>
</ion-col>
</ion-row>
<ion-row class="rowtable" *ngFor="let list of GetEarningsList" >
<ion-col class="colPayslip">
<label class="label" for="">{{list.ELEMENT_NAME}}</label>
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{list.AMOUNT}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<div *ngIf="GetDeductionsList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
<ion-grid class="grids">
<ion-row class="bgcolor">
<ion-col class="colPayslip">
<label class="label" for="">{{ts.trPK('payslip','particular')}} </label>
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{ts.trPK('payslip','amount')}}
</label>
</ion-col>
</ion-row>
<ion-row class="rowtable" *ngFor="let list of GetDeductionsList" >
<ion-col class="colPayslip">
<label class="label" for="">{{list.ELEMENT_NAME}}</label>
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{list.AMOUNT}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<!-- ///////////////////////////////////// -->
<div *ngIf="GetPaymentInformationList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
<div *ngIf="GetPaymentInformationList !=''">
<div *ngFor="let paymentInfo of GetPaymentInformationList">
<ion-grid class="grids" >
<ion-row class="rowtables">
<ion-col class="colPayslips">
<ion-row class="col">
<label class="label" for=""> {{ts.trPK('payslip','payment-method')}} </label>
</ion-row>
<ion-row>
<label class="label" for="">{{paymentInfo.PAYMENT_METHOD_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="rowtable">
<ion-col class="colPayslip">
<ion-row class="col">
<label class="label" for="">{{ts.trPK('payslip','bank-name')}} </label>
</ion-row>
<ion-row >
<label class="label" for="">{{paymentInfo.BANK_NAME}}</label>
</ion-row>
</ion-col>
<ion-col class="colPayslips">
<ion-row class="col">
<label class="label" for="">{{ts.trPK('payslip','branch-name')}}
</label>
</ion-row>
<ion-row >
<label class="label" for="">{{paymentInfo.BRANCH_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row class="rowtable">
<ion-col class="colPayslip">
<ion-row class="col">
<label class="label" for="">{{ts.trPK('payslip','account-no')}}
</label>
</ion-row>
<ion-row >
<label class="label" for="">{{paymentInfo.ACCOUNT_NUMBER}}</label>
</ion-row>
</ion-col>
<ion-col class="colPayslips">
<ion-row class="col">
<label class="label" for="">{{ts.trPK('payslip','amount')}}
</label>
</ion-row>
<ion-row >
<label class="label" for="">{{paymentInfo.AMOUNT}}</label>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</div>
</ion-content>