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/absence/home/home.component.html

259 lines
11 KiB
HTML

<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">
<button class="headerBtn" (click)="AccrualBalances()">
<img class="headerImg" src="../assets/imgs/accubalance.png">
</button>
</ion-buttons> -->
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<!-- colorBG -->
<div class="contentEit" style="background: #f3f1f1;">
<div class="header-div">
<!-- <ion-buttons slot="end">
<button class="headerBtn" (click)="AccrualBalances()">
<img class="headerImg" src="../assets/imgs/accubalance.png">
</button>
</ion-buttons> -->
<!-- <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> -->
</div>
<div class="">
<div >
<ion-grid class="headerGrid">
<div style="color: black;">
<div class="result-graph">
<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"
(ionChange)="getAccrualBalance()"></ion-datetime>
<ion-icon class="iconCalendar" ios="ios-calendar" md="md-calendar"></ion-icon>
<!-- </ion-item> -->
</div>
<div style=" border-bottom: 1px solid #a7a4a4; margin-bottom: 12px;
margin-top: -10px; margin-right: -9px;"></div>
<div class="result-text-container">
<h2>{{totalnumber}}</h2>
<!-- <h2>{{accrualNet + accrualUsed + accrualYearly}}</h2> -->
<span>{{ts.trPK('absenceList','totalNumber')}}</span>
</div>
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 82%;
bottom: 128px;
color: black;
background-color: #DDB017;
width: 13%;
height: 6px;">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label>
</ion-row>
<ion-row>
<label class="green-amount">{{accrualNet}}</label>
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 59%;
bottom: 131px;
color: black;
background-color: #094875;
width: 13%;
height: 6px;">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualUsed')}}</label>
</ion-row>
<ion-row>
<label class="blue-amount" for="">{{accrualUsed}}</label>
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 82%;
bottom: 80px;
color: black;
background-color: #CB3232;
width: 13%;
height: 6px;">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualYearly')}}</label>
</ion-row>
<ion-row>
<label class="blue-amount" for="">{{accrualYearly}}</label>
</ion-row>
</ion-col>
</div>
<!-- <div style="position: relative;
left: 59%;
bottom: 73px;
color: black;
background-color: #094875;
width: 16%;
height: 6px;">
<ion-col>
<ion-row>
<label class="blue-label">text</label>
</ion-row>
<ion-row> -->
<!-- <label class="blue-amount" for="">{{getleaveAccrualBalance.ACCRUAL_YEARLY_ENTITLEMENT}}</label> -->
<!-- </ion-row>
</ion-col>
</div> -->
</div>
</ion-grid>
</div>
</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:#094875;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:#094875;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:#094875;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:#094875;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:#094875;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:#094875;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:#094875;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:#094875;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>
<ion-icon class="addClass" name="add" (click)="createAbsence()"></ion-icon>
</div>
</ion-content>
<!-- <ion-footer>
<div class="centerDiv">
7 years ago
<ion-button color="customnavy" class="gridBtn" (click)="createAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
</div>
</ion-footer> -->