finish absence history page

accural-balance
Mohamed Mekawy 6 years ago
parent 69db29931f
commit 721066c859

@ -1,5 +1,5 @@
<ion-header >
<ion-toolbar class="header-toolbar">
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
@ -25,92 +25,104 @@
</div>
<div *ngIf="GetAbsenceTransactionList && GetAbsenceTransactionList.length > 0 ">
<ion-card *ngFor="let item of GetAbsenceTransactionList; let i=index;">
<div *ngFor="let item of GetAbsenceTransactionList; let i=index;">
<ion-card-header class="boxHdr">
<!-- <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-card-content>
<ion-grid>
</ion-card-header> -->
<ion-grid class="grids">
<div>
<ion-row>
<ion-col class="colBold">
<label for="">{{ts.trPK('absenceList','startDate')}} </label>
</ion-col>
<ion-col>
<label for=""> {{item.START_DATE}}</label>
<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 for="">{{ts.trPK('absenceList','endDate')}}</label>
</ion-col>
<ion-col>
<label for=""> {{item.END_DATE}}</label>
</ion-col>
<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 for="">{{ts.trPK('absenceList','absenceType')}} </label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_TYPE}}</label>
<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 for="">{{ts.trPK('absenceList','absenceCategory')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_CATEGORY}}</label>
<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 for="">{{ts.trPK('absenceList','days')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_DAYS}}</label>
<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 for="">{{ts.trPK('absenceList','hours')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_HOURS}}</label>
<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 for="">{{ts.trPK('absenceList','approvalStatus')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.APPROVAL_STATUS}}</label>
<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 for="">{{ts.trPK('absenceList','absenceStatus')}}</label>
</ion-col>
<ion-col>
<label for="">{{item.ABSENCE_STATUS}}</label>
<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>
</ion-card-content>
</ion-card>
</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>
</ion-content>
<ion-footer>
<!-- <ion-footer>
<div class="centerDiv">
<ion-button color="customnavy" class="gridBtn" (click)="createAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
</div>
</ion-footer>
</ion-footer> -->

@ -7,3 +7,73 @@
height:20px;
width:20px;
}
.addClass{
background-color: #094875;
width: 80px;
height: 80px;
right: 8%;
position: fixed;
color: white;
bottom: 20%;
border-radius: 50%;
z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
-moz-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
}
.grids{
border-radius: 20px !important;
background: white;
padding-left: 1px;
padding-right: 1px;
margin: 13px;
padding-top: 0px;
padding-bottom: 3px;
padding-left: 13px;
padding-right: 13px;
border: 1px solid #cac8c8;
margin-bottom: 10% !important;
}
.bgcolor {
color: white;
border-top-right-radius: 19px;
border-top-left-radius: 15px;
padding-top: 1;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
/* border-radius: 12px !important; */
background: #094875;
border-bottom: 1px solid #a7a4a4;
border-top: 1px solid #cac8c8;
margin-left: -13px;
margin-right: -13px;
}
.header-div {
background-color: #22C6B3;
text-transform: capitalize;
height: 160px;
position: relative;
display: block;
margin-bottom: -28px;
}
.header-toolbar-new{
--background: #22c6b3;
}
.hrClass{
border-width: 0;
box-sizing: content-box;
border-bottom: 1px solid #e6e6e6;
background: #fff !important;
height: 1px;
}

Loading…
Cancel
Save