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.
mohemm_srca/Mohem/src/app/payslip/home/home.component.html

392 lines
16 KiB
HTML

<ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title color="light" >{{ts.trPK('payslip','title')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<ion-item style="margin: 10px;border-radius: 5px;">
<ion-label>choose payslip</ion-label>
<ion-select (ionChange)="showInfo($event)" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="choosePayslip">
<ion-select-option value="{{i}}" selected="{{(i==0).toString()}}" *ngFor="let options of GetPayslipList; let i=index">{{options.PAYSLIP_CHOICE}} </ion-select-option>
</ion-select>
</ion-item>
<!-- <ion-list *ngIf="showPaySlip !=''" >
<ion-item>
<ion-row><ion-label>PERIOD NAME</ion-label><ion-label>{{showPaySlip.PERIOD_NAME}}</ion-label></ion-row>
<ion-row><ion-label>PERIOD START DATE</ion-label><ion-label>{{showPaySlip.PERIOD_START_DATE}}</ion-label> </ion-row>
<ion-row> <ion-label>PERIOD END DATE</ion-label><ion-label>{{showPaySlip.PERIOD_END_DATE}}</ion-label> </ion-row>
</ion-item>
</ion-list> -->
<div *ngIf="showPaySlip !=''">
<accordin-custom >
<accordin-tab-custom [header]="'payslip,payroll-info' | translate " >
<!-- special results -->
<!-- <ion-card >
<ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('payslip','payroll-info')}} </div>
</ion-card-header>
<ion-card-content> -->
<div *ngIf="showPaySlip !=''">
<ion-grid class="">
<ion-row class="">
<ion-col class="">
<label for=""> {{ts.trPK('payslip','peroid-name')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{showPaySlip.PERIOD_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','start-date')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{showPaySlip.PERIOD_START_DATE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','end-date')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{showPaySlip.PERIOD_END_DATE}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<empty-data *ngIf="showPaySlip.length <= 0 "></empty-data>
<!-- </ion-card-content>
</ion-card> -->
</accordin-tab-custom>
</accordin-custom>
<!-- <ion-card *ngIf="showPaySlip !=''">
<ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('payslip','payroll-info')}} </div>
</ion-card-header>
<ion-card-content>
<div>
<ion-grid>
<ion-row>
<ion-col class="colBold">
<label for=""> {{ts.trPK('payslip','peroid-name')}}
</label>
</ion-col>
<ion-col>
<label for="">{{showPaySlip.PERIOD_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('payslip','start-date')}}
</label>
</ion-col>
<ion-col>
<label for="">{{showPaySlip.PERIOD_START_DATE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('payslip','end-date')}}
</label>
</ion-col>
<ion-col>
<label for="">{{showPaySlip.PERIOD_END_DATE}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-card-content>
</ion-card> -->
<accordin-custom >
<accordin-tab-custom [header]="'payslip,summary-payment' | translate" >
<!-- <ion-card *ngIf="GetSummaryOfPaymentList !='' " >
<ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
</ion-card-header>
<ion-card-content> -->
<div *ngIf="GetSummaryOfPaymentList !=''">
<ion-grid>
<ion-row >
<ion-col class="">
<label for=""> {{ts.trPK('payslip','deductions-Amount')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','deductions-percentage')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_PERCENTAGE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','earings-Amount')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','earings-percentage')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetSummaryOfPaymentList.TOTAL_EARNINGS_PERCENTAGE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','pay-Amount')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','pay-percentage')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetSummaryOfPaymentList.TOTAL_PAY_PERCENTAGE}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<empty-data *ngIf="GetSummaryOfPaymentList.length <= 0 "></empty-data>
<!-- </ion-card-content>
</ion-card> -->
</accordin-tab-custom>
</accordin-custom >
<accordin-custom >
<accordin-tab-custom [header]="'payslip,earnings' | translate" [subHeadergreen]=true [subHeader]="earingTotal" >
<!-- <ion-card *ngIf="GetEarningsList !='' " >
<ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('payslip','total')}} </div>
</ion-card-header>
<ion-card-content> -->
<div *ngIf="GetEarningsList !=''">
<ion-grid>
<ion-row *ngFor="let list of GetEarningsList" >
<ion-col class="">
<label for="">{{list.ELEMENT_NAME}}</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{list.AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="earingTotH">
<label style="font-size: 20px !important" for="">{{ts.trPK('payslip','total')}}</label>
</ion-col>
<ion-col col-6 class="earingTotG">
<label style="font-size: 20px !important" for="">{{earingTotal}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<empty-data *ngIf="GetEarningsList.length <= 0 "></empty-data>
<!-- </ion-card-content>
</ion-card> -->
<!-- <ion-infinite-scroll (ionInfinite)="doInfiniteEarning($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> -->
</accordin-tab-custom>
</accordin-custom >
<!-- <accordin-custom *ngIf="GetDeductionsList !=''"> -->
<accordin-custom >
<accordin-tab-custom [header]="'payslip,deductions' | translate" [subHeadergreen]=false [subHeader]="deductionTotal" >
<!-- <ion-card *ngIf="GetDeductionsList !='' " >
<ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
</ion-card-header>
<ion-card-content>
colBold -->
<div *ngIf="GetDeductionsList !=''">
<ion-grid>
<ion-row *ngFor="let list of GetDeductionsList" >
<ion-col class="">
<label for="">{{list.ELEMENT_NAME}}</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{list.AMOUNT}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6 class="earingTotH">
<label style="font-size: 20px !important" for="">{{ts.trPK('payslip','total')}}</label>
</ion-col>
<ion-col col-6 class="earingTotR">
<label style="font-size: 20px !important" for="">{{deductionTotal}}</label>
</ion-col >
</ion-row>
</ion-grid>
</div>
<empty-data *ngIf="GetDeductionsList.length <= 0 "></empty-data>
<!-- </ion-card-content>
</ion-card> -->
<!-- <ion-infinite-scroll (ionInfinite)="doInfiniteDeduction($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> -->
</accordin-tab-custom>
</accordin-custom >
<accordin-custom >
<accordin-tab-custom [header]="'payslip,payment-information' | translate" >
<!-- <ion-card *ngIf="GetPaymentInformationList !='' " >
<ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
</ion-card-header>
<ion-card-content> -->
<div *ngIf="GetPaymentInformationList !=''">
<ion-grid>
<ion-row >
<ion-col class="">
<label for=""> {{ts.trPK('payslip','payment-method')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetPaymentInformationList.PAYMENT_METHOD_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','bank-name')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetPaymentInformationList.BANK_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','branch-name')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetPaymentInformationList.BRANCH_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','account-no')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetPaymentInformationList.ACCOUNT_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="">
<label for="">{{ts.trPK('payslip','amount')}}
</label>
</ion-col>
<ion-col class="colPayslip">
<label for="">{{GetPaymentInformationList.AMOUNT}}</label>
</ion-col>
</ion-row>
</ion-grid>
</div>
<empty-data *ngIf="GetPaymentInformationList.length <= 0 "></empty-data>
<!-- </ion-card-content>
</ion-card> -->
</accordin-tab-custom>
</accordin-custom >
</div>
<!-- <ion-row *ngIf="showPaySlip !=''" style="text-align: center;">
<ion-col class="greenTxt" col-6>
<button ion-button block class="notColBtn" (click)="openEarings()">
<p>{{ts.trPK('payslip','earnings')}}</p>
<ion-img class="serviceItemImg" src="../assets/imgs/details.png"></ion-img>
</button>
</ion-col>
<ion-col class="greenTxt" col-6>
<button ion-button block class="notColBtn" (click)="openDeductions()">
<p>{{ts.trPK('payslip','deductions')}}</p>
<ion-img class="serviceItemImg" src="../assets/imgs/details.png"></ion-img>
</button>
</ion-col>
</ion-row> -->
</ion-content>