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.
236 lines
11 KiB
HTML
236 lines
11 KiB
HTML
<!-- <ion-header >
|
|
<ion-toolbar class="header-toolbar-new">
|
|
<ion-title color="light">{{ts.trPK('home','leave-balance')}}</ion-title>
|
|
<ion-buttons slot="start">
|
|
<nav-buttons></nav-buttons>
|
|
</ion-buttons> -->
|
|
<!-- <ion-buttons slot="end">
|
|
<button class="headerBtn" (click)="AccrualBalances()">
|
|
<img class="headerImg" src="../assets/imgs/accubalance.png">
|
|
</button>
|
|
</ion-buttons> -->
|
|
<!-- </ion-toolbar>
|
|
</ion-header> -->
|
|
|
|
<app-generic-header
|
|
showBack="true"
|
|
[headerText]="'home,leave-balance' | translate">
|
|
</app-generic-header>
|
|
|
|
|
|
<ion-content class="colorBG">
|
|
<!-- colorBG -->
|
|
<div class="contentEit" style="background: #f3f1f1;">
|
|
<div class="header-div">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div>
|
|
<ion-grid class="headerGrid">
|
|
<div >
|
|
<ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY"
|
|
placeholder="DD MMMM YYYY" cancelText="{{ts.trPK('general','cancel')}}"
|
|
doneText="{{ts.trPK('general','done')}}" (ionChange)="getAccrualBalance()"></ion-datetime>
|
|
<ion-icon class="iconCalendar" ios="ios-calendar" md="md-calendar"></ion-icon>
|
|
</div>
|
|
<div style="position: relative;">
|
|
<!-- <div [ngClass]=" direction == 'ltr' ? 'subTitle' : 'subTitle-ar'" >{{ts.trPK('absenceList','AccrualUsed')}} </div> -->
|
|
<div class="label-container">
|
|
<ion-row [ngClass]=" direction == 'ltr' ? 'green-label-container' : 'green-label-container-ar'" >
|
|
<label class="current-label"> </label>
|
|
<span [ngClass]=" direction == 'ltr' ? 'span-one' : 'span-one-ar'" >{{ts.trPK('absenceList','currentBalance')}}</span>
|
|
<span class="span-two">{{accrualNet}}</span>
|
|
</ion-row>
|
|
<!-- <div [ngClass]=" direction == 'ltr' ? 'yearLabel' : 'yearLabel-ar'">2021</div> -->
|
|
</div>
|
|
<!-- <div class="label-container">
|
|
<ion-row [ngClass]=" direction == 'ltr' ? 'black-label-container' : 'black-label-container-ar'" >
|
|
<label class="current-label-container"> </label>
|
|
<span [ngClass]=" direction == 'ltr' ? 'black-span1' : 'black-span1-ar'" >{{ts.trPK('absenceList','currentBalance')}}</span>
|
|
<span class="black-span2">{{accrualNet}}</span>
|
|
</ion-row>
|
|
<div [ngClass]=" direction == 'ltr' ? 'yearLabel' : 'yearLabel-ar'" > {{ts.trPK('absenceList','PreviousYears')}}</div>
|
|
</div> -->
|
|
<div class="label-container">
|
|
<ion-row [ngClass]=" direction == 'ltr' ? 'black-label-container' : 'black-label-container-ar'" >
|
|
<label class="used-label-container"> </label>
|
|
<span [ngClass]=" direction == 'ltr' ? 'red-span1' : 'red-span1-ar'" >{{ts.trPK('absenceList','usedBalance')}}</span>
|
|
<span class="red-span2">{{accrualUsed}}</span>
|
|
</ion-row>
|
|
</div>
|
|
<div class="graph-container">
|
|
<p-chart [ngClass]=" direction == 'ltr' ? 'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options" ></p-chart>
|
|
</div>
|
|
</div>
|
|
</ion-grid>
|
|
|
|
<!-- <ion-grid class="headerGrid">
|
|
|
|
<div style="color: black;">
|
|
|
|
<div class="result-graph">
|
|
<div >
|
|
|
|
<ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY"
|
|
placeholder="DD MMMM YYYY" cancelText="{{ts.trPK('general','cancel')}}"
|
|
doneText="{{ts.trPK('general','done')}}" (ionChange)="getAccrualBalance()"></ion-datetime>
|
|
|
|
<ion-icon class="iconCalendar" ios="ios-calendar" md="md-calendar"></ion-icon>
|
|
|
|
</div>
|
|
<div style=" border-bottom: 1px solid #a7a4a4; margin-bottom: 12px;
|
|
margin-top: -10px; margin-right: -9px;"></div>
|
|
|
|
<div class="result-text-container">
|
|
|
|
</div>
|
|
|
|
|
|
<p-chart #chart [ngClass]=" direction == 'ltr' ? 'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
|
|
|
|
</div>
|
|
<div [ngClass]=" direction == 'ltr' ? 'div-green' : 'div-green-ar'">
|
|
<ion-col>
|
|
<ion-row>
|
|
<label class="green-label">{{ts.trPK('absenceList','currentBalance')}}</label>
|
|
</ion-row>
|
|
<ion-row>
|
|
<label class="green-amount">{{accrualNet}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</div>
|
|
<div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'">
|
|
<ion-col>
|
|
<ion-row>
|
|
<label class="red-label">{{ts.trPK('absenceList','usedBalance')}}</label>
|
|
</ion-row>
|
|
<ion-row>
|
|
|
|
<label class="red-amount" for="">{{accrualUsed}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</div>
|
|
|
|
</div>
|
|
</ion-grid> -->
|
|
|
|
</div>
|
|
|
|
|
|
<!-- /////////////////////////////////////////////////////////up -->
|
|
|
|
<!-- <ion-content padding> -->
|
|
|
|
<div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" >
|
|
<ion-row>
|
|
<img class="empty-data" src="../assets/imgs/box.png"/>
|
|
|
|
|
|
</ion-row>
|
|
<h4> {{ts.trPK('general','noData')}}</h4>
|
|
</div>
|
|
|
|
<div *ngIf="GetAbsenceTransactionList && GetAbsenceTransactionList.length > 0 ">
|
|
<div *ngFor="let item of GetAbsenceTransactionList; let i=index;">
|
|
|
|
<!-- <ion-card-header class="boxHdr">
|
|
<div class="hrTitle">{{ts.trPK('absenceList','absHeader')}}</div>
|
|
|
|
<img class="imgSize" src="../assets/imgs/attachment.png" *ngIf="item.ATTACHMENT_EXIST=='Y'" (click)="AttachmentDocuments(item.ABSENCE_ATTENDANCE_ID)">
|
|
</ion-card-header> -->
|
|
|
|
<ion-grid class="grids">
|
|
<div>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','startDate')}} </label>
|
|
<br>
|
|
<label class="label" style="color:black;" for=""> {{item.START_DATE}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','endDate')}}</label>
|
|
<br>
|
|
<label class="label" style="color:black;" for=""> {{item.END_DATE}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceType')}} </label>
|
|
<br>
|
|
<label class="label" style="color:black;" for="">{{item.ABSENCE_TYPE}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
|
|
<br>
|
|
<label class="label" style="color:black;" for="">{{item.ABSENCE_CATEGORY}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','days')}}</label>
|
|
<br>
|
|
<label class="label" style="color:black;" for="">{{item.ABSENCE_DAYS}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" class="label" for="">{{ts.trPK('absenceList','hours')}}</label>
|
|
<br>
|
|
<label class="label" style="color:black;" for="">{{item.ABSENCE_HOURS}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
|
|
<br>
|
|
<label class="label" style="color:black;" for="">{{item.APPROVAL_STATUS}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col class="colBold">
|
|
<label style="color:#29B5BF;font-weight: bold;" for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
|
|
<br>
|
|
<label class="label" style="color:black;" for="">{{item.ABSENCE_STATUS}}</label>
|
|
<br>
|
|
<hr style="background-color: grey;height: 1px">
|
|
</ion-col>
|
|
</ion-row>
|
|
</div>
|
|
</ion-grid>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
|
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
|
</ion-infinite-scroll>
|
|
|
|
|
|
</div>
|
|
</ion-content>
|
|
<ion-icon class="addClass" name="add" (click)="createAbsence()"></ion-icon>
|
|
<!-- <ion-footer>
|
|
<div class="centerDiv">
|
|
<ion-button color="customnavy" class="gridBtn" (click)="createAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
|
|
</div>
|
|
</ion-footer> --> |