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/hmg-common/ui/circle-calendar/circle-calendar.component.ts

476 lines
15 KiB
TypeScript

import { Component, OnInit, Output, Input, ViewChild, ElementRef, EventEmitter } from '@angular/core';
import { TimeSlot } from './time.slot';
import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
import { ModalController } from '@ionic/angular';
import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component';
import { MenuResponse } from '../../services/menu/models/menu-response';
import * as moment from 'moment';
import { CommonService } from '../../services/common/common.service';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';
@Component({
selector: 'app-circle-calendar',
templateUrl: './circle-calendar.component.html',
styleUrls: ['./circle-calendar.component.scss']
})
export class CircleCalendarComponent implements OnInit {
@Input() eventsdateDayOff: any = [];
@Input() eventsdateAttend: any = [];
@Input() eventsdateAbsent: any = [];
@Output() monthTitle = new EventEmitter();
@Output() currentYear = new EventEmitter();
/////////////////////////////////TIME AND DATE VALUES///////////////////////////////
public monthName: any;
public yearDate: any;
public selEmp: string;
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
public menuType: any;
public dayAndHoursPageNumber = 1;
public selectedFilters: any = {};
public selectedShiftFilter: any;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public selectedShift: any;
public shiftDetailsData: any = [];
public swipeDetailsData: any = [];
public arrOfAllList: any = [];
///////////////////////////////END//////////////////////////////////////////////////
eventsdata: any = [];
calendarModes = [
{ key: 'month', value: 'Month' },
{ key: 'week', value: 'Week' },
{ key: 'day', value: 'Day' },
];
public calendar = {
mode: this.calendarModes[0].key,
currentDate: new Date(),
currentAvailableAppoDate: new Date(),
dateFormatter: {
formatMonthViewDayHeader: (date: Date) => {
return this.getHeaderDay(date);
}
}
}
public currentAvailableAppoDate: any;
public eventsInput: any = [];
public events: TimeSlot[] = [];
public selectedTime: string;
public selectedDate: string;
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
public lockSwipeToPrev: any = true;
public currentDate: any;
public selectedDateObject: any;
public currentDateToSwipe: any;
public activeMonth: any;
isFirst: boolean;
arrFutrueDays: any;
eventsdateFutrue: any;
detailData: any;
constructor(
public sharedData: SharedDataService,
public mod: ModalController,
public common: CommonService,
public timeCardService: TimeCardService) { }
@ViewChild("slider") slides: ElementRef;
ngOnInit() {
this.isFirst = false;
this.reRenderCalendar();
console.log("1")
}
ngAfterViewInit() {
setTimeout(() => {
this.reRenderCalendar();
}, 1000);
console.log("2")
}
// ngOnChanges(){
// console.log("3")
// }
getHeaderDay(date: any) {
return this.weekDaysEnSort[date.getDay()];
}
reRenderCalendar() {
this.renderDate(this.eventsdateAbsent, 'absent');
this.renderDate(this.eventsdateAttend, 'present');
this.renderDate(this.eventsdateDayOff, 'dayoff');
}
dayClicked(data: any): void {
if (data.isPast) {
this.eventsInput = [];
this.selectedTime = null;
} else {
// At least one slot
if (data.events.length > 0) {
this.selectedDate = this.getDateISO(data.selectedTime);
//TODO replace later later
for (let i = 0; i < data.events.length; i++) {
}
this.presentTimeSlots(data.events, data.selectedTime);
this.currentDate = this.getHeaderDate(data.selectedTime);
} else {
this.eventsInput = [];
this.selectedTime = null;
}
//}
}
}
async presentTimeSlots(events: TimeSlot[], date: Date) {
this.eventsInput = [];
let index = 1;
for (let event of events) {
// event.end = this.cs.getKSATimeZone(event.end);
this.eventsInput.push({
name: 'radio' + index,
type: 'radio',
label: event.isoTime.substring(0, event.isoTime.length - 3),
value: event,
checked: index === 1
});
if (index == 1) {
this.selectedTime = event.isoTime;
this.selectedDateObject = new Date(event.end);
}
++index;
}
}
public getDateISO(date: Date): string {
return (
date.getFullYear().toString() +
"-" +
this.trailerZero(date.getMonth() + 1) +
"-" +
this.trailerZero(date.getDate())
);
}
onCurrentDateChanged(event) {
console.log("onCurrentDateChanged");
if (this.isFirst) {
const today = new Date();
this.currentDateToSwipe = event;
if (this.calendar.mode === 'month') {
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
this.lockSwipeToPrev = true;
} else {
this.lockSwipeToPrev = false;
}
}
this.activeMonth = this.getHeaderMonth(event);
this.currentDate = this.getHeaderDate(event);
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
let dateData = this.currentDate.toString()
dateData = dateData.split(" ")
this.getDayHoursTypeDetails(dateData[2], dateData[3]);
this.reRenderCalendar();
} else {
const today = new Date();
this.currentDateToSwipe = event;
if (this.calendar.mode === 'month') {
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
this.lockSwipeToPrev = true;
} else {
this.lockSwipeToPrev = false;
}
}
this.activeMonth = this.getHeaderMonth(event);
this.currentDate = this.getHeaderDate(event);
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
this.isFirst = true;
}
}
getHeaderDate(date: any) {
return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
}
private trailerZero(value: number): string {
const str = value.toString();
return str.length > 1 ? str : "" + str;
}
getHeaderMonth(date: any) {
return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
}
public getMonthName(value: number): string {
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";
}
}
public async dateModal(todayDate, shiftDetails) {
const modal = await this.mod.create({
component: DateInfoModalComponent,
showBackdrop: true,
backdropDismiss: true,
componentProps: {
TODAYDATE: todayDate,
SHIFTDETAILS: shiftDetails
}
});
modal.cssClass = "calendar-modal";
await modal.present();
}
public renderDate(arrayDays, cssClass) {
const td = document.querySelectorAll(".swiper-slide-active .monthview-datetable td:not(.text-muted)");
arrayDays.forEach(dateObj => {
const date = dateObj.startTime;
td.forEach(element => {
// tslint:disable-next-line: triple-equals
if (date.getDate() == element.textContent.trim()) {
element.classList.add(cssClass);
}
});
});
}
onDayClicked(x) {
// this.dateModal(this.currentDate);
let fullDate;
let arrOfFullDate;
for (let i = 0; i < this.arrOfAllList.length; i++) {
fullDate = this.arrOfAllList[i].SCHEDULE_DATE.split(" ")
if (this.common.convertISODateToJsonDate(fullDate[0]) == this.common.convertISODateToJsonDate(this.getDateISO(x.selectedTime))) {
arrOfFullDate = fullDate[0].split("/")
this.showDetails(this.arrOfAllList, fullDate[0]);
// console.log(arrOfFullDate[2])
// this.getDayHoursTypeDetails(this.getMonthName(parseInt(arrOfFullDate[0])),parseInt(arrOfFullDate[2]),true, fullDate[0])
} else {
console.log("NOT match");
}
}
}
getScheduleShiftDetails(RTP_ID) {
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
console.log(GetShiftDetailRequestObject);
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
this.dateModal(this.detailData,result);
}
});
}
getSwipesDetails() {
const GetSwipesRequestObject = new GetSwipesRequest();
GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE);
GetSwipesRequestObject.P_PAGE_NUM = 1;
GetSwipesRequestObject.P_PAGE_LIMIT = 10;
this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.swipeDetailsData = result.GetSwipesList;
}
});
}
/////////////////////////this function should be in common service/////////////////////////
public getDayHoursTypeDetails(month, year) {
this.monthTitle.emit(month);
this.currentYear.emit(year);
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
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);
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
dayAndHoursReqObj.SearchMonth = this.monthName;
dayAndHoursReqObj.SearchYear = this.yearDate;
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
dayAndHoursReqObj.P_PAGE_LIMIT = 100;
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.arrOfAllList = result.GetDayHoursTypeDetailsList;
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'calendarDateValue');
// this.common.openTimeCardPage();
}
});
}
showDetails(allData, date){
let fullDate;
for (let i = 0; i < allData.length; i++) {
fullDate = allData[i].SCHEDULE_DATE.split(" ")
if(fullDate[0] == date){
this.detailData = allData[i]
console.log("date details:")
console.log(this.detailData);
this.getScheduleShiftDetails(this.detailData.RTP_ID);
}
}
}
countAllAttendDays(allDays) {
this.eventsdateDayOff = [];
this.eventsdateAttend = [];
this.eventsdateAbsent = [];
this.arrDaysOff = [];
this.arrDaysAttendance = [];
this.arrDaysAbsent = [];
this.eventsdateFutrue = [];
this.arrFutrueDays = [];
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),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && !allDays[i].REMARKS) {
//attendace
this.arrDaysAttendance.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && allDays[i].REMARKS) {
//absent
this.arrDaysAbsent.push(
{
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
allDay: false
}
);
} else {
this.arrFutrueDays.push(
{
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: "09:00:00",
allDay: false
}
);
}
}
// this.common.sharedService.setSharedData(this.arrDaysOff,'calendarDayOffDateValue');
// this.common.sharedService.setSharedData(this.arrDaysAttendance,'calendarAttendanceDateValue');
// this.common.sharedService.setSharedData( this.arrDaysAbsent,'calendarDaysAbsentDateValue');
this.eventsdateDayOff = this.arrDaysOff;
this.eventsdateAttend = this.arrDaysAttendance;
this.eventsdateAbsent = this.arrDaysAbsent;
this.eventsdateFutrue = this.arrFutrueDays;
this.reRenderCalendar();
}
}