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

150 lines
5.1 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 = [];
@Input() normalDays: any = [];
@Input() dayHoursTypeDetailsList: any = [];
@Input() currentDateParent: string;
@Output() monthTitle = new EventEmitter();
@Output() currentYear = new EventEmitter();
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 = [];
eventsdata: any = [];
public calendar = {
mode: 'month'
};
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;
public isFirst = false;
public selectedIndexData: any;
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.reRenderCalendar();
console.log(this.currentDateParent);
}
// tslint:disable-next-line: use-life-cycle-interface
ngAfterViewInit() {
setTimeout(() => {
this.reRenderCalendar();
}, 1000);
}
reRenderCalendar() {
this.renderDate(this.eventsdateAbsent, 'absent');
this.renderDate(this.eventsdateAttend, 'present');
this.renderDate(this.eventsdateDayOff, 'dayoff');
this.renderDate(this.normalDays, 'scheduleDay');
}
public async dateModal(shiftDetails) {
const modal = await this.mod.create({
component: DateInfoModalComponent,
showBackdrop: true,
backdropDismiss: true,
componentProps: {
TODAYDATE: this.selectedIndexData,
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(event) {
if (this.isFirst) {
console.log(event.selectedTime.getDate());
const selectedIndex = event.selectedTime.getDate();
this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1];
if (this.selectedIndexData.present) {
const rtpID = this.selectedIndexData.RTP_ID;
this.getScheduleShiftDetails(rtpID);
}
} else {
this.isFirst = true;
}
}
getScheduleShiftDetails(RTP_ID) {
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = RTP_ID;
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
if (this.common.validResponse(result)) {
console.log(result);
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
this.dateModal(result);
}
});
}
}