|
|
|
|
@ -9,6 +9,7 @@ import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-
|
|
|
|
|
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
|
|
|
|
|
import * as moment from 'moment';
|
|
|
|
|
import { getDate } from 'date-fns';
|
|
|
|
|
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'app-time-card-details',
|
|
|
|
|
@ -16,13 +17,31 @@ import { getDate } from 'date-fns';
|
|
|
|
|
styleUrls: ['./time-card-details.component.scss'],
|
|
|
|
|
})
|
|
|
|
|
export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
slideView: any;
|
|
|
|
|
sliderOne: any;
|
|
|
|
|
@ViewChild('slides') slides: IonSlides;
|
|
|
|
|
@ViewChild('slideWithNav') slideWithNav: IonSlides;
|
|
|
|
|
slideOptsOne = {
|
|
|
|
|
initialSlide: 0,
|
|
|
|
|
slidesPerView: 1,
|
|
|
|
|
autoplay: true
|
|
|
|
|
};
|
|
|
|
|
month: any;
|
|
|
|
|
year: any;
|
|
|
|
|
preMonth: number;
|
|
|
|
|
nextMonth: any;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
constructor(
|
|
|
|
|
public timeCardService: TimeCardService,
|
|
|
|
|
public common: CommonService,
|
|
|
|
|
public modalController: ModalController,
|
|
|
|
|
public sharedData: SharedDataService
|
|
|
|
|
public sharedData: SharedDataService,
|
|
|
|
|
public ts: TranslatorService
|
|
|
|
|
) { }
|
|
|
|
|
@ViewChild('sliderRef') protected sliderRef: IonSlides;
|
|
|
|
|
|
|
|
|
|
public activeSegment: any = 'time-card-summary';
|
|
|
|
|
public showMore: any = true;
|
|
|
|
|
public menuType: any;
|
|
|
|
|
@ -45,17 +64,15 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
public yearDate: any;
|
|
|
|
|
public absentDays: number;
|
|
|
|
|
public attendedDays: number;
|
|
|
|
|
public futrueDays: number =0;
|
|
|
|
|
public totalAttendancePrecentage: number = 0;
|
|
|
|
|
public futrueDays = 0;
|
|
|
|
|
public totalAttendancePrecentage = 0;
|
|
|
|
|
public arrDaysAttendance: any = [];
|
|
|
|
|
public arrDaysAbsent: any = [];
|
|
|
|
|
public arrDaysOff: any = [];
|
|
|
|
|
public monthTitle: string = moment().format('MMMM');
|
|
|
|
|
public yearTitle: string;
|
|
|
|
|
public isChange: boolean = false;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public isChange = false;
|
|
|
|
|
public activeMonth: any;
|
|
|
|
|
public options = {
|
|
|
|
|
|
|
|
|
|
cutoutPercentage: 80,
|
|
|
|
|
@ -90,34 +107,60 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
this.arrDaysOff = this.common.sharedService.getSharedData('calendarDayOffDateValue',false);
|
|
|
|
|
this.arrDaysAttendance = this.common.sharedService.getSharedData('calendarAttendanceDateValue',false);
|
|
|
|
|
this.arrDaysAbsent = this.common.sharedService.getSharedData('calendarDaysAbsentDateValue',false);
|
|
|
|
|
this.getTimeCardSummaryDetails();
|
|
|
|
|
this.getDayHoursTypeDetails();
|
|
|
|
|
this.nextMonth = new Date().getMonth() + 2;
|
|
|
|
|
this.preMonth = new Date().getMonth() - 2;
|
|
|
|
|
if (this.preMonth < 0) {
|
|
|
|
|
this.preMonth = this.preMonth * - 1;
|
|
|
|
|
} else {
|
|
|
|
|
this.preMonth = this.preMonth * - 1;
|
|
|
|
|
}
|
|
|
|
|
this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
calendarConfig(month?, year?) {
|
|
|
|
|
|
|
|
|
|
console.log('ngOnInit');
|
|
|
|
|
this.month = month;
|
|
|
|
|
this.year = year;
|
|
|
|
|
this.arrDaysOff = this.common.sharedService.getSharedData('calendarDayOffDateValue', false);
|
|
|
|
|
this.arrDaysAttendance = this.common.sharedService.getSharedData('calendarAttendanceDateValue', false);
|
|
|
|
|
this.arrDaysAbsent = this.common.sharedService.getSharedData('calendarDaysAbsentDateValue', false);
|
|
|
|
|
this.getTimeCardSummaryDetails(month, year);
|
|
|
|
|
this.getDayHoursTypeDetails(month, year);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public segmentChanged(event: any) {
|
|
|
|
|
console.log('segmentChanged');
|
|
|
|
|
this.activeSegment = event.detail.value;
|
|
|
|
|
if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) {
|
|
|
|
|
this.getDayHoursTypeDetails();
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
this.rightIconActive = true;
|
|
|
|
|
this.leftIconActive = false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public toggleButton() {
|
|
|
|
|
console.log('toggleButton');
|
|
|
|
|
|
|
|
|
|
this.showMore = !this.showMore;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public getDayHoursTypeDetails() {
|
|
|
|
|
public getDayHoursTypeDetails(month?, year?) {
|
|
|
|
|
console.log('getDayHoursTypeDetails');
|
|
|
|
|
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
|
|
|
|
|
// this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
|
|
|
|
|
// this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ');
|
|
|
|
|
this.monthName = moment().format('MMMM');
|
|
|
|
|
this.yearDate = moment().format('YYYY');
|
|
|
|
|
this.monthName = month; // moment().format('MMMM');
|
|
|
|
|
this.yearDate = year; // moment().format('YYYY');
|
|
|
|
|
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
|
|
|
|
|
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
|
|
|
|
|
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
|
|
|
|
|
@ -151,7 +194,7 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
|
|
|
|
|
if (this.common.validResponse(result)) {
|
|
|
|
|
console.log(result.GetDayHoursTypeDetailsList);
|
|
|
|
|
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList,'RTP_IDs')
|
|
|
|
|
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs');
|
|
|
|
|
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
|
|
|
|
|
this.loadMoreDateHoursData = false;
|
|
|
|
|
const daysDataLength = result.GetDayHoursTypeDetailsList.length;
|
|
|
|
|
@ -176,39 +219,47 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
// isoTime:"09:00:00",
|
|
|
|
|
// allDay: false
|
|
|
|
|
countAllAttendDays(allDays) {
|
|
|
|
|
console.log('countAllAttendDays');
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < allDays.length; i++) {
|
|
|
|
|
if (allDays[i].DAY_TYPE == "Off") {
|
|
|
|
|
//offDay
|
|
|
|
|
this.arrDaysOff.push({startTime:new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
if (allDays[i].DAY_TYPE === 'Off') {
|
|
|
|
|
// offDay
|
|
|
|
|
this.arrDaysOff.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
endTime: new Date(allDays[i].SCHEDULE_DATE)});
|
|
|
|
|
} else if (allDays[i].DAY_TYPE == "SCHEDULED") {
|
|
|
|
|
//attendace
|
|
|
|
|
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
} else if (allDays[i].DAY_TYPE === 'SCHEDULED') {
|
|
|
|
|
// attendace
|
|
|
|
|
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
endTime: new Date(allDays[i].SCHEDULE_DATE)});
|
|
|
|
|
} else {
|
|
|
|
|
//absent
|
|
|
|
|
// absent
|
|
|
|
|
this.arrDaysAbsent.push(
|
|
|
|
|
{startTime: new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
{startTime: new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
endTime: new Date(allDays[i].SCHEDULE_DATE),
|
|
|
|
|
isoTime: "09:00:00",
|
|
|
|
|
isoTime: '09:00:00',
|
|
|
|
|
allDay: false
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public getTimeCardSummaryDetails() {
|
|
|
|
|
public getTimeCardSummaryDetails(month?, year?) {
|
|
|
|
|
console.log('getTimeCardSummaryDetails');
|
|
|
|
|
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
|
|
|
|
|
if(this.isChange){
|
|
|
|
|
this.monthName = this.monthTitle;
|
|
|
|
|
this.yearDate = this.yearTitle;
|
|
|
|
|
}else{
|
|
|
|
|
this.monthName = moment().format('MMMM');
|
|
|
|
|
this.yearDate = moment().format('YYYY');
|
|
|
|
|
if (this.isChange) {
|
|
|
|
|
// this.monthName = this.monthTitle;
|
|
|
|
|
// this.yearDate = this.yearTitle;
|
|
|
|
|
this.monthName = month;
|
|
|
|
|
console.log('' + this.monthName);
|
|
|
|
|
this.yearDate = year;
|
|
|
|
|
console.log('' + this.yearDate);
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
this.monthName = month; // moment().format('MMMM');
|
|
|
|
|
this.yearDate = year; // moment().format('YYYY');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
|
|
|
|
|
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
|
|
|
|
|
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
|
|
|
|
|
@ -240,16 +291,27 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
if (this.common.validResponse(result)) {
|
|
|
|
|
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
|
|
|
|
|
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
|
|
|
|
|
// console.log("absent: "+ this.absentDays);
|
|
|
|
|
|
|
|
|
|
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
|
|
|
|
|
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS
|
|
|
|
|
// console.log("attendedDays: "+ this.attendedDays);
|
|
|
|
|
|
|
|
|
|
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
|
|
|
|
|
this.options = {
|
|
|
|
|
cutoutPercentage: 80,
|
|
|
|
|
tooltips: { enabled: false },
|
|
|
|
|
legend: { display: false }
|
|
|
|
|
};
|
|
|
|
|
if(this.absentDays ==0 && this.attendedDays ==0){
|
|
|
|
|
if (this.absentDays === 0 && this.attendedDays === 0) {
|
|
|
|
|
this.futrueDays = this.totalAttendancePrecentage;
|
|
|
|
|
}
|
|
|
|
|
//////////////////////////////////////////////
|
|
|
|
|
// console.log("absent: "+ this.absentDays);
|
|
|
|
|
// console.log("attend: "+ this.attendedDays);
|
|
|
|
|
// console.log("future"+ this.futrueDays);
|
|
|
|
|
// in chart "this.futrueDays"
|
|
|
|
|
// in calender "this.futrueDays == white"
|
|
|
|
|
// timecard sumery return not match data with GET_DAY_HOURS_TYPE_DETAILS
|
|
|
|
|
this.data = {
|
|
|
|
|
datasets: [
|
|
|
|
|
{
|
|
|
|
|
@ -296,6 +358,7 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
slideChanged(ev: any) {
|
|
|
|
|
console.log('slideChanged');
|
|
|
|
|
const prom1 = this.sliderRef.isBeginning();
|
|
|
|
|
const prom2 = this.sliderRef.isEnd();
|
|
|
|
|
|
|
|
|
|
@ -312,6 +375,8 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
showShiftDetails(origin: string) {
|
|
|
|
|
console.log('showShiftDetails');
|
|
|
|
|
|
|
|
|
|
this.sliderRef.getActiveIndex().then((index: number) => {
|
|
|
|
|
this.selectedShift = this.dayHoursData[index];
|
|
|
|
|
this.selectedShift.origin = origin;
|
|
|
|
|
@ -320,29 +385,134 @@ export class TimeCardDetailsComponent implements OnInit {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/////////////////////////////////////////////////// here
|
|
|
|
|
// slideNext(object, slideView) {
|
|
|
|
|
// 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;
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// slidePrev(object, slideView) {
|
|
|
|
|
// this.sliderRef.slidePrev();
|
|
|
|
|
// }
|
|
|
|
|
/////////////////////////////////
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
nextSlide() {
|
|
|
|
|
if (this.loadMoreDateHoursData && this.loadMore) {
|
|
|
|
|
this.dayAndHoursPageNumber++;
|
|
|
|
|
this.getDayHoursTypeDetails();
|
|
|
|
|
let currentYear = new Date().getFullYear();
|
|
|
|
|
if (this.nextMonth > 12) {
|
|
|
|
|
currentYear = currentYear + 1;
|
|
|
|
|
this.nextMonth = 1;
|
|
|
|
|
}
|
|
|
|
|
this.sliderRef.slideNext();
|
|
|
|
|
this.sliderRef.getActiveIndex().then((index: number) => {
|
|
|
|
|
if (index === (this.dayHoursData.length - 1)) {
|
|
|
|
|
this.loadMoreDateHoursData = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
this.calendarConfig(this.getMonthName(this.nextMonth) , currentYear);
|
|
|
|
|
this.nextMonth = this.nextMonth + 1;
|
|
|
|
|
this.preMonth = this.preMonth + 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
previousSlide() {
|
|
|
|
|
this.sliderRef.slidePrev();
|
|
|
|
|
let currentYear = new Date().getFullYear();
|
|
|
|
|
if (this.preMonth === 0) {
|
|
|
|
|
currentYear = currentYear - 1;
|
|
|
|
|
this.preMonth = 12;
|
|
|
|
|
}
|
|
|
|
|
this.calendarConfig(this.getMonthName(this.preMonth) , currentYear);
|
|
|
|
|
this.preMonth = this.preMonth - 1;
|
|
|
|
|
this.nextMonth = this.nextMonth - 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changeMonthTitle(title){
|
|
|
|
|
|
|
|
|
|
changeMonthTitle(title) {
|
|
|
|
|
console.log('changeMonthTitle');
|
|
|
|
|
this.monthTitle = title;
|
|
|
|
|
this.isChange = true;
|
|
|
|
|
this.getTimeCardSummaryDetails();
|
|
|
|
|
}
|
|
|
|
|
changeYear(year){
|
|
|
|
|
changeYear(year) {
|
|
|
|
|
console.log('changeYear');
|
|
|
|
|
|
|
|
|
|
this.yearTitle = year;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
///////////////////////////////////////////////////////////////////////// here
|
|
|
|
|
getHeaderMonth(date: any) {
|
|
|
|
|
|
|
|
|
|
return this.getMonthName(date.getMonth() + 1) + ' ' + date.getFullYear();
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public getMonthName(value: any): any {
|
|
|
|
|
switch (value) {
|
|
|
|
|
case 1:
|
|
|
|
|
return 'January';
|
|
|
|
|
case 2:
|
|
|
|
|
return 'February';
|
|
|
|
|
case 3:
|
|
|
|
|
return 'March';
|
|
|
|
|
case 4:
|
|
|
|
|
return 'April';
|
|
|
|
|
case 5:
|
|
|
|
|
return 'May';
|
|
|
|
|
case 6:
|
|
|
|
|
return 'June';
|
|
|
|
|
case 7:
|
|
|
|
|
return 'July';
|
|
|
|
|
case 8:
|
|
|
|
|
return 'August';
|
|
|
|
|
case 9 :
|
|
|
|
|
return 'September';
|
|
|
|
|
case 10:
|
|
|
|
|
return 'October';
|
|
|
|
|
case 11:
|
|
|
|
|
return 'November';
|
|
|
|
|
case 12:
|
|
|
|
|
return 'December';
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// getHeaderMonth(date: any) {
|
|
|
|
|
// if (monthName = "December") {
|
|
|
|
|
// }
|
|
|
|
|
// return monthName;
|
|
|
|
|
// else
|
|
|
|
|
// return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
// public getMonthName(value: any): any {
|
|
|
|
|
// switch (value) {
|
|
|
|
|
// case "Januray":
|
|
|
|
|
// return "February";
|
|
|
|
|
// case "February":
|
|
|
|
|
// return "March";
|
|
|
|
|
// case "March":
|
|
|
|
|
// return "April";
|
|
|
|
|
// case "April":
|
|
|
|
|
// return "May";
|
|
|
|
|
// case "May":
|
|
|
|
|
// return "June";
|
|
|
|
|
// case "June":
|
|
|
|
|
// return "July";
|
|
|
|
|
// case "July":
|
|
|
|
|
// return "August";
|
|
|
|
|
// case "August":
|
|
|
|
|
// return "September" ;
|
|
|
|
|
// case "September" :
|
|
|
|
|
// return "October";
|
|
|
|
|
// case "October":
|
|
|
|
|
// return "November";
|
|
|
|
|
// case "November":
|
|
|
|
|
// return "December";
|
|
|
|
|
// case "December":
|
|
|
|
|
// return "January";
|
|
|
|
|
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
}
|
|
|
|
|
|