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

116 lines
5.2 KiB
HTML

<ion-header >
<ion-toolbar class="header-toolbar">
<ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack"></ion-back-button>
</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 padding>
<div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" >
<ion-row>
<img class="empty-data" src="../assets/imgs/noData.png"/>
</ion-row>
<h4> {{ts.trPK('general','noData')}}</h4>
</div>
<div *ngIf="GetAbsenceTransactionList && GetAbsenceTransactionList.length > 0 ">
<ion-card *ngFor="let item of GetAbsenceTransactionList; let i=index;">
<ion-card-header class="boxHdr">
<div class="hrTitle">{{ts.trPK('absenceList','absHeader')}}</div>
<button ion-button *ngIf="item.ATTACHMENT_EXIST=='Y'" (click)="AttachmentDocuments(item.ABSENCE_ATTENDANCE_ID)">
<img class="imgSize" src="../assets/imgs/attachment.png"></button>
</ion-card-header>
<ion-card-content>
<ion-grid>
<div>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','startDate')}} </label>
</ion-col>
<ion-col>
<label for=""> {{item.START_DATE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','endDate')}}</label>
</ion-col>
<ion-col>
<label for=""> {{item.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','absenceType')}} </label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_TYPE}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_CATEGORY}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','days')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_DAYS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','hours')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_HOURS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.APPROVAL_STATUS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_STATUS}}</label>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
<ion-footer>
<div class="centerDiv">
<ion-button color="customnavy" class="gridBtn" (click)="CreateAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
</div>
</ion-footer>