completed time card module

master
umasoodch 6 years ago
parent e01c73a092
commit 976961e9ee

@ -11,7 +11,7 @@
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="selectFromDate"
[(ngModel)]="dateFrom"
doneText="Done"
cancelText="Cancel"
></ion-datetime>
@ -26,7 +26,7 @@
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="selectToDate"
[(ngModel)]="dateTo"
doneText="Done"
cancelText="Cancel"
></ion-datetime>

@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { ModalController, NavParams } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
@ -10,83 +10,111 @@ import { TimeCardService } from 'src/app/time-card/service/time-card.service';
})
export class SelectPeriodComponent implements OnInit {
public shiftTypesArray: any = [];
public selectFromDate: any;
public selectToDate: any;
public dateFrom: any;
public dateTo: any;
public selectedShiftType: any;
public filtersArray: any = [
{
name: 'Excess',
active: false,
key: 'P_EXCESS_FLAG',
value: ''
},
{
name: 'Timeback',
active: false,
key: 'P_TIMEBACK_FLAG',
value: ''
},
{
name: 'Comp Off',
active: false,
key: 'P_COMP_OFF_FLAG',
value: ''
},
{
name: 'Non scheduled',
active: false,
key: 'P_NON_SCHEDULED_FLAG',
value: ''
},
{
name: 'Late In',
active: false,
key: 'P_LATE_IN_FLAG',
value: ''
},
{
name: 'Early Out',
active: false,
key: 'P_EARLY_OUT_FLAG',
value: ''
},
{
name: 'Shortage',
active: false,
key: 'P_SHORTAGE_FLAG',
value: ''
},
{
name: 'Missing Swipe',
active: false,
key: 'P_MISSING_SWIPE_FLAG',
value: ''
},
{
name: 'Work On Break',
active: false,
key: 'P_ACTUAL_WOB_SEC',
value: ''
},
{
name: 'Analyzed',
active: false,
key: 'P_ANALAYZED_FLAG',
value: ''
},
{
name: 'Approved Timeback',
active: false,
key: 'P_APPR_TIMEBACK_FLAG',
value: ''
},
];
constructor(
public modalController: ModalController,
public common: CommonService,
public timeCardService: TimeCardService) { }
public timeCardService: TimeCardService,
public navParams: NavParams) { }
ngOnInit() {
this.getShiftTypes();
this.dateFrom = this.navParams.get('dateFrom');
this.dateTo = this.navParams.get('dateTo');
}
public dismissModal() {
const selectedFilters: any = [];
const selectedFilters: any = {};
for (const filter of this.filtersArray) {
if (filter.active) {
selectedFilters.push(filter);
}
selectedFilters[filter.key] = filter;
}
this.modalController.dismiss({
dismissed: true,
selectedFiltersArray: selectedFilters,
keySelectedFilters: selectedFilters,
selectedShiftType: this.selectedShiftType,
selectFromDate: this.selectFromDate,
selectToDate: this.selectToDate
dateFrom: this.dateFrom,
dateTo: this.dateTo
});
}
public changeFiltersSelection(i: any) {
this.filtersArray[i].active = !this.filtersArray[i].active;
if (this.filtersArray[i].active) {
this.filtersArray[i].value = 'Y';
} else {
this.filtersArray[i].value = '';
}
}
public getShiftTypes() {

@ -8,10 +8,11 @@
</ion-header>
<ion-content>
<div class="ion-padding shift-container" *ngIf="shiftDetailsData && selectedShift.origin === 'shiftDetails'">
<div class="ion-padding shift-container" *ngIf="shiftDetailsData.length > 0 && selectedShift.origin === 'shiftDetails'">
<ion-card *ngFor="let shiftData of shiftDetailsData;">
<ion-card-content>
<h2 class="card-summary-heading">Days</h2>
<h2 class="card-summary-heading">Shift details</h2>
<h2 class="card-summary-heading">{{ shiftData.SCHEDULE_DATE | date }}</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="8">
@ -113,6 +114,78 @@
</div>
<div class="ion-padding shift-container" *ngIf="swipeDetailsData && selectedShift.origin === 'shiftSwipes'">
No results Found
<ion-card *ngFor="let swipeData of swipeDetailsData;">
<ion-card-content>
<h2 class="card-summary-heading">Employee Swipe(s)</h2>
<h2 class="card-summary-heading">{{ swipeData.SCHEDULE_DATE | date }}</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="8">
Swipe Date
</ion-col>
<ion-col [size]="4">
{{swipeData.SWIPE_DATE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Swipe Time
</ion-col>
<ion-col [size]="4">
{{swipeData.SWIPE_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Swipe Status
</ion-col>
<ion-col [size]="4">
{{swipeData.SWIPE_STATUS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Machine Location
</ion-col>
<ion-col [size]="4">
{{swipeData.MACHINE_LOCATION}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Unit Number
</ion-col>
<ion-col [size]="4">
{{swipeData.UNIT_NUMBER}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Unit Name
</ion-col>
<ion-col [size]="4">
{{swipeData.UNIT_NAME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Exclude
</ion-col>
<ion-col [size]="4">
{{swipeData.EXCLUDE_FLAG}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Error Message
</ion-col>
<ion-col [size]="4">
{{swipeData.RETURN_MESSAGE}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
</ion-content>

@ -14,8 +14,8 @@ import * as moment from 'moment';
})
export class ShiftDetailsComponent implements OnInit {
public selectedShift: any;
public shiftDetailsData: any;
public swipeDetailsData: any;
public shiftDetailsData: any = [];
public swipeDetailsData: any = [];
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
@ -54,7 +54,7 @@ export class ShiftDetailsComponent implements OnInit {
this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
// this.swipeDetailsData = result.GetDayHoursTypeDetailsList;
this.swipeDetailsData = result.GetSwipesList;
}
});
}

@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
<ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button>
</ion-buttons>
<ion-title color="light" >My Time Card</ion-title>
</ion-toolbar>
@ -266,51 +266,16 @@
</ion-card>
</div>
<div *ngIf="activeSegment === 'time-card-details' && dayHoursData" class="time-card-details">
<ion-slides #sliderRef (ionSlideDidChange)="slideChanged($event)" class="fadeIn">
<div *ngIf="activeSegment === 'time-card-details' && dayHoursData.length > 0" class="time-card-details">
<ion-slides #sliderRef (ionSlideWillChange)="slideChanged($event)" class="fadeIn">
<ion-slide *ngFor="let dayHours of dayHoursData; let i = index">
<ion-grid>
<ion-row style="text-align: center;">
<ion-col [size]="12" class="time-card-details-heading-two">
<h2>Today's time card details</h2>
<h2>{{ dayHours.SCHEDULE_DATE | date }}</h2>
<h2>Time card details</h2>
</ion-col>
</ion-row>
<!-- <ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeIn.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Swipe In:</span>
</ion-col>
<ion-col [size]="4">
06:57
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeOut.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Swipe Out:</span>
</ion-col>
<ion-col [size]="4">
05:05
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TotalHours.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Total Hours:</span>
</ion-col>
<ion-col [size]="4">
03:39
</ion-col>
</ion-row> -->
<ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TimeBackIcon.png"></span>
@ -402,11 +367,17 @@
<button class="dayhours-button" (click)="showShiftDetails('shiftDetails')">Shift details</button>
<button class="dayhours-button" (click)="showShiftDetails('shiftSwipes')">Swipes</button>
</div>
</div>
</div>
<div class="right-slider-icon" *ngIf="activeSegment === 'time-card-details'">
<img *ngIf="rightIconActive && dayHoursData.length > 1" (click)="nextSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 18.png">
<img *ngIf="!rightIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 20.png">
</div>
<div class="left-slider-icon" *ngIf="activeSegment === 'time-card-details'">
<img *ngIf="leftIconActive && dayHoursData.length > 1" (click)="previousSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 19.png">
<img *ngIf="!leftIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 21.png">
</div>
</ion-content>
<div *ngIf="activeSegment === 'time-card-details'" class="footer-modal-button">
<button ion-button (click)="openSelectPeriodModal()">
Select Period

@ -85,7 +85,7 @@ ion-title{
.time-card-details {
background: white;
margin-top: 15px;
margin: 20px;
border-radius: 5px;
}
@ -113,6 +113,8 @@ ion-title{
width: 50%;
height: 35px;
font-size: 15px;
color: white;
background: #606161;
}
/////////////////////////////////////
@ -131,3 +133,22 @@ ion-title{
display: block;
}
////////////////////////////
.right-slider-icon{
float: right;
height: 100%;
width: 15%;
position: fixed;
right: -5%;
top: 31%;
}
.left-slider-icon{
width: 15%;
position: fixed;
top: 32%;
left: -4%;
height: 100%;
}

@ -24,14 +24,21 @@ export class TimeCardDetailsComponent implements OnInit {
public dateTo: any = new Date();
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
public timeCardSummaryData: any;
public dayHoursData: any;
public timeCardSummaryData: any = [];
public dayHoursData: any = [];
public selectedShift: any;
public rightIconActive = false;
public leftIconActive = false;
public loadMore = false;
public dayAndHoursPageNumber = 1;
public selectedFilters: any = {};
public selectedShiftFilter: any;
public loadMoreDateHoursData = false;
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService,
public sharedData: SharedDataService
) { }
ngOnInit() {
@ -40,8 +47,11 @@ export class TimeCardDetailsComponent implements OnInit {
public segmentChanged(event: any) {
this.activeSegment = event.detail.value;
if (this.activeSegment === 'time-card-details' && !this.dayHoursData) {
if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) {
this.getDayHoursTypeDetails();
} else {
this.rightIconActive = true;
this.leftIconActive = false;
}
}
@ -63,12 +73,39 @@ export class TimeCardDetailsComponent implements OnInit {
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
dayAndHoursReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom);
dayAndHoursReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo);
dayAndHoursReqObj.P_PAGE_NUM = 1;
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
dayAndHoursReqObj.P_PAGE_LIMIT = 10;
if (Object.keys(this.selectedFilters).length !== 0) {
dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter;
dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.dayHoursData = result.GetDayHoursTypeDetailsList;
this.loadMoreDateHoursData = false;
const daysDataLength = result.GetDayHoursTypeDetailsList.length;
this.loadMore = daysDataLength === 10 ? true : false;
if (this.dayAndHoursPageNumber > 1 && daysDataLength !== 0) {
this.rightIconActive = true;
this.dayHoursData = this.dayHoursData.concat(result.GetDayHoursTypeDetailsList);
setTimeout(() => {
this.nextSlide();
}, 1000);
} else if (this.dayAndHoursPageNumber === 1 && daysDataLength <= 10 && daysDataLength !== 0) {
this.rightIconActive = true;
this.dayHoursData = result.GetDayHoursTypeDetailsList;
}
}
});
@ -89,10 +126,23 @@ export class TimeCardDetailsComponent implements OnInit {
timeCardSummaryReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom);
timeCardSummaryReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo);
if (Object.keys(this.selectedFilters).length !== 0) {
timeCardSummaryReqObj.P_SHT_TYPE = this.selectedShiftFilter;
timeCardSummaryReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
timeCardSummaryReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
timeCardSummaryReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
timeCardSummaryReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
timeCardSummaryReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
timeCardSummaryReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
timeCardSummaryReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
timeCardSummaryReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
timeCardSummaryReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
timeCardSummaryReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
timeCardSummaryReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
console.log(this.timeCardSummaryData);
}
});
}
@ -100,29 +150,72 @@ export class TimeCardDetailsComponent implements OnInit {
async openSelectPeriodModal() {
const modal = await this.modalController.create({
component: SelectPeriodComponent,
cssClass: 'select-period-custom-modal'
cssClass: 'select-period-custom-modal',
componentProps: {
dateFrom : this.dateFrom,
dateTo : this.dateTo
}
});
modal.onDidDismiss().then(result => {
console.log(result);
this.dateFrom = result.data.selectFromDate;
this.dateTo = result.data.selectToDate;
console.log(result.data);
this.loadMore = false;
this.rightIconActive = false;
this.leftIconActive = false;
this.dayHoursData = [];
this.timeCardSummaryData = [];
this.dayAndHoursPageNumber = 1;
this.loadMoreDateHoursData = false;
this.dateFrom = result.data.dateFrom;
this.dateTo = result.data.dateTo;
this.selectedFilters = result.data.keySelectedFilters;
this.selectedShiftFilter = result.data.selectedShiftType;
if (this.dateFrom && this.dateTo) {
this.getDayHoursTypeDetails();
this.getTimeCardSummaryDetails();
}
});
return await modal.present();
}
slideChanged(ev: any) {}
slideChanged(ev: any) {
const prom1 = this.sliderRef.isBeginning();
const prom2 = this.sliderRef.isEnd();
Promise.all([prom1, prom2]).then((data) => {
data[0] ? this.leftIconActive = false : this.leftIconActive = true;
if (data[1]) {
if (!this.loadMore) {
this.rightIconActive = false;
}
} else {
this.rightIconActive = true;
}
});
}
showShiftDetails(origin: string) {
this.sliderRef.getActiveIndex().then((index: number) => {
console.log(index);
this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin;
console.log(this.selectedShift);
this.sharedData.setSharedData(this.selectedShift, 'selectedShift');
this.common.navigatePage('/time-card/shift-details');
});
}
nextSlide() {
if (this.loadMoreDateHoursData && this.loadMore) {
this.dayAndHoursPageNumber++;
this.getDayHoursTypeDetails();
}
this.sliderRef.slideNext();
this.sliderRef.getActiveIndex().then((index: number) => {
if (index === (this.dayHoursData.length - 1)) {
this.loadMoreDateHoursData = true;
}
});
}
previousSlide() {
this.sliderRef.slidePrev();
}
}

Loading…
Cancel
Save