fixed attendance and calendar issues

myteam
umasoodch 6 years ago
parent 98eae4cc7f
commit d26cea9024

@ -17,11 +17,6 @@ import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-re
styleUrls: ['./circle-calendar.component.scss'] styleUrls: ['./circle-calendar.component.scss']
}) })
export class CircleCalendarComponent implements OnInit { export class CircleCalendarComponent implements OnInit {
@Input() eventsdateDayOff: any = [];
@Input() eventsdateAttend: any = [];
@Input() eventsdateAbsent: any = [];
@Input() normalDays: any = [];
@Input() dayHoursTypeDetailsList: any = []; @Input() dayHoursTypeDetailsList: any = [];
@Input() currentDateParent: string; @Input() currentDateParent: string;
@Output() monthTitle = new EventEmitter(); @Output() monthTitle = new EventEmitter();
@ -86,10 +81,7 @@ export class CircleCalendarComponent implements OnInit {
} }
reRenderCalendar() { reRenderCalendar() {
this.renderDate(this.eventsdateAbsent, 'absent'); this.renderDate(this.dayHoursTypeDetailsList);
this.renderDate(this.eventsdateAttend, 'present');
this.renderDate(this.eventsdateDayOff, 'dayoff');
this.renderDate(this.normalDays, 'scheduleDay');
} }
public async dateModal(shiftDetails) { public async dateModal(shiftDetails) {
@ -106,14 +98,23 @@ export class CircleCalendarComponent implements OnInit {
await modal.present(); await modal.present();
} }
public renderDate(arrayDays, cssClass) { public renderDate(arrayDays) {
const td = document.querySelectorAll('.swiper-slide-active .monthview-datetable td:not(.text-muted)'); const td = document.querySelectorAll('.swiper-slide-active .monthview-datetable td:not(.text-muted)');
arrayDays.forEach(dateObj => { arrayDays.forEach(dateObj => {
const date = dateObj.startTime; const date = dateObj.customScheduleDate;
td.forEach(element => { td.forEach(element => {
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
if (date.getDate() == element.textContent.trim()) { if (date.getDate() == element.textContent.trim() && dateObj.customPresent === true) {
element.classList.add(cssClass); element.classList.add('present');
// tslint:disable-next-line: triple-equals
} else if (date.getDate() == element.textContent.trim() && dateObj.customAbsent === true) {
element.classList.add('absent');
// tslint:disable-next-line: triple-equals
} else if (date.getDate() == element.textContent.trim() && dateObj.customDaysOff === true) {
element.classList.add('dayoff');
// tslint:disable-next-line: triple-equals
} else if (date.getDate() == element.textContent.trim() && dateObj.customSchedule === true) {
element.classList.add('scheduleDay');
} }
}); });
}); });
@ -124,7 +125,7 @@ export class CircleCalendarComponent implements OnInit {
console.log(event.selectedTime.getDate()); console.log(event.selectedTime.getDate());
const selectedIndex = event.selectedTime.getDate(); const selectedIndex = event.selectedTime.getDate();
this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1]; this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1];
if (this.selectedIndexData.present) { if (this.selectedIndexData.customPresent) {
const rtpID = this.selectedIndexData.RTP_ID; const rtpID = this.selectedIndexData.RTP_ID;
this.getScheduleShiftDetails(rtpID); this.getScheduleShiftDetails(rtpID);
} }

@ -78,7 +78,7 @@ height: 360px !important;
margin-bottom: -13px !important; margin-bottom: -13px !important;
color: black !important; color: black !important;
font-weight: bold !important; font-weight: bold !important;
font-size: 15px !important; font-size: 14px !important;
margin-top: 8px; margin-top: 8px;
text-align: center; text-align: center;
display: block; display: block;

@ -1,6 +1,6 @@
<div class="team-member-container"> <div class="team-member-container">
<ion-row> <ion-row>
<ion-col [size]="3"> <ion-col [size]="3" (click)="getDetails()">
<div class="user-image-container"> <div class="user-image-container">
<div class="user-image"> <div class="user-image">
<img [src]="employeeImage" alt="Team Member Image"/> <img [src]="employeeImage" alt="Team Member Image"/>
@ -9,11 +9,11 @@
</ion-col> </ion-col>
<ion-col [size]="9" style="padding: 8px 5px 0px;margin-top: 14px;"> <ion-col [size]="9" style="padding: 8px 5px 0px;margin-top: 14px;">
<div> <div>
<span class="employee-name"> <span class="employee-name" (click)="getDetails()">
<h2 class="name">{{name}}</h2> <h2 class="name">{{name}}</h2>
<span class="title">{{title}}</span> <span class="title">{{title}}</span>
</span> </span>
<a class="image-container" href="tel:{{employeePhoneNumber}}"> <a [ngClass]="employeePhoneNumber == '' ? 'disable-phone image-container' : 'image-container'" href="tel:{{employeePhoneNumber}}">
<img src="../assets/imgs/green_call_icon.png" > <img src="../assets/imgs/green_call_icon.png" >
</a> </a>
</div> </div>

@ -1,4 +1,4 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
@Component({ @Component({
selector: 'app-employee-information', selector: 'app-employee-information',
@ -12,10 +12,15 @@ export class EmployeeInformationComponent implements OnInit {
@Input() title: string; @Input() title: string;
@Input() employeeImage: string; @Input() employeeImage: string;
@Input() employeePhoneNumber: string; @Input() employeePhoneNumber: string;
// tslint:disable-next-line: no-output-on-prefix
@Output() onGetDetails = new EventEmitter();
constructor() { } constructor() { }
ngOnInit() {} ngOnInit() {}
getDetails() {
this.onGetDetails.emit();
}
} }

@ -23,7 +23,7 @@
<ion-row class="ion-justify-content-center"> <ion-row class="ion-justify-content-center">
<ion-col [size]="4"> <ion-col [size]="4">
<div class="action-button col-button"> <div class="action-button col-button">
<a class="action-button-icon" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}"> <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/call_icon.png"> <img src="../assets/imgs/call_icon.png">
</a> </a>
<span>Call</span> <span>Call</span>
@ -174,12 +174,8 @@
<div *ngIf="showData" class="calendar-container"> <div *ngIf="showData" class="calendar-container">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span> <span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<app-circle-calendar <app-circle-calendar
[eventsdateAttend]='arrDaysAttendance'
[eventsdateAbsent]='arrDaysAbsent'
[eventsdateDayOff]='arrDaysOff'
[currentDateParent]="currentDate" [currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList" [dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
[normalDays]="normalDays"
(monthTitle)='changeMonthTitle($event)' (monthTitle)='changeMonthTitle($event)'
(currentYear)=changeYear($event)> (currentYear)=changeYear($event)>
</app-circle-calendar> </app-circle-calendar>
@ -223,7 +219,7 @@
[title]="subordinate.POSITION_NAME" [title]="subordinate.POSITION_NAME"
[employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" [employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
[employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER" [employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
(click)="getDetails(i)"> (onGetDetails)="getDetails(i)">
</app-employee-information> </app-employee-information>
</ng-container> </ng-container>

@ -54,10 +54,6 @@ export class DetailsComponent implements OnInit {
public attendedDays: number; public attendedDays: number;
public futrueDays = 0; public futrueDays = 0;
public totalAttendancePrecentage = 0; public totalAttendancePrecentage = 0;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public normalDays: any = [];
public monthTitle: string = moment().format('MMMM'); public monthTitle: string = moment().format('MMMM');
public yearTitle: string; public yearTitle: string;
public activeMonth: any; public activeMonth: any;
@ -120,7 +116,6 @@ export class DetailsComponent implements OnInit {
public segmentChanged(event: any) { public segmentChanged(event: any) {
this.activeSegment = event.detail.value; this.activeSegment = event.detail.value;
if (this.activeSegment === 'Attendance') { if (this.activeSegment === 'Attendance') {
this.normalDays = [];
this.initAttendance(); this.initAttendance();
} }
} }
@ -137,9 +132,6 @@ export class DetailsComponent implements OnInit {
} }
calendarConfig(month?, year?) { calendarConfig(month?, year?) {
this.arrDaysOff = [];
this.arrDaysAttendance = [];
this.arrDaysAbsent = [];
this.month = month; this.month = month;
this.year = year; this.year = year;
this.getTimeCardSummaryDetails(month, year); this.getTimeCardSummaryDetails(month, year);
@ -169,14 +161,12 @@ export class DetailsComponent implements OnInit {
console.log(result.GetDayHoursTypeDetailsList); 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.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.dayHoursTypeDetailsList = result.GetDayHoursTypeDetailsList;
} }
}); });
} }
nextSlide() { nextSlide() {
this.normalDays = [];
if (this.currentMonthName !== this.month) { if (this.currentMonthName !== this.month) {
this.showData = false; this.showData = false;
if (this.nextMonth > 12) { if (this.nextMonth > 12) {
@ -191,7 +181,6 @@ export class DetailsComponent implements OnInit {
} }
previousSlide() { previousSlide() {
this.normalDays = [];
this.showData = false; this.showData = false;
if (this.preMonth === 0) { if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1; this.currentYear = this.currentYear - 1;
@ -219,48 +208,35 @@ export class DetailsComponent implements OnInit {
for (let i = 0; i < allDays.length; i++) { for (let i = 0; i < allDays.length; i++) {
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
if (allDays[i].ATTENDED_FLAG == 'Y') { if (allDays[i].ATTENDED_FLAG == 'Y') {
allDays[i].present = true; allDays[i].customPresent = true;
allDays[i].absent = false; allDays[i].customAbsent = false;
allDays[i].daysOff = false; allDays[i].customDaysOff = false;
allDays[i].schedule = false; allDays[i].customSchedule = false;
this.arrDaysAttendance.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') { } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') {
allDays[i].present = false; allDays[i].customPresent = false;
allDays[i].absent = true; allDays[i].customAbsent = true;
allDays[i].daysOff = false; allDays[i].customDaysOff = false;
allDays[i].schedule = false; allDays[i].customSchedule = false;
this.arrDaysAbsent.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
});
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') { } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') {
allDays[i].present = false; allDays[i].customPresent = false;
allDays[i].absent = false; allDays[i].customAbsent = false;
allDays[i].daysOff = true; allDays[i].customDaysOff = true;
allDays[i].schedule = false; allDays[i].customSchedule = false;
this.arrDaysOff.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else { } else {
allDays[i].present = false; allDays[i].customPresent = false;
allDays[i].absent = false; allDays[i].customAbsent = false;
allDays[i].daysOff = false; allDays[i].customDaysOff = false;
allDays[i].schedule = true; allDays[i].customSchedule = true;
this.normalDays.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} }
} }
this.showData = true; this.showData = true;
this.dayHoursTypeDetailsList = allDays;
} }
public getTimeCardSummaryDetails(month?, year?) { public getTimeCardSummaryDetails(month?, year?) {

@ -69,7 +69,7 @@
[title]="subordinate.POSITION_NAME" [title]="subordinate.POSITION_NAME"
[employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" [employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
[employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER" [employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
(click)="getDetails(i)"> (onGetDetails)="getDetails(i)">
</app-employee-information> </app-employee-information>
</ng-container> </ng-container>

@ -84,12 +84,8 @@
<div *ngIf="showData" class="calendar-container"> <div *ngIf="showData" class="calendar-container">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span> <span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<app-circle-calendar <app-circle-calendar
[eventsdateAttend]='arrDaysAttendance'
[eventsdateAbsent]='arrDaysAbsent'
[eventsdateDayOff]='arrDaysOff'
[currentDateParent]="currentDate" [currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList" [dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
[normalDays]="normalDays"
(monthTitle)='changeMonthTitle($event)' (monthTitle)='changeMonthTitle($event)'
(currentYear)=changeYear($event)> (currentYear)=changeYear($event)>
</app-circle-calendar> </app-circle-calendar>

@ -53,9 +53,6 @@ export class TimeCardDetailsComponent implements OnInit {
public attendedDays: number; public attendedDays: number;
public futrueDays = 0; public futrueDays = 0;
public totalAttendancePrecentage = 0; public totalAttendancePrecentage = 0;
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public monthTitle: string = moment().format('MMMM'); public monthTitle: string = moment().format('MMMM');
public yearTitle: string; public yearTitle: string;
public isChange = false; public isChange = false;
@ -64,7 +61,6 @@ export class TimeCardDetailsComponent implements OnInit {
public showData = false; public showData = false;
public currentYear = new Date().getFullYear(); public currentYear = new Date().getFullYear();
public dayHoursTypeDetailsList = []; public dayHoursTypeDetailsList = [];
public normalDays: any = [];
public currentDate = new Date(); public currentDate = new Date();
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
@ -81,9 +77,6 @@ export class TimeCardDetailsComponent implements OnInit {
} }
calendarConfig(month?, year?) { calendarConfig(month?, year?) {
this.arrDaysOff = [];
this.arrDaysAttendance = [];
this.arrDaysAbsent = [];
this.month = month; this.month = month;
this.year = year; this.year = year;
this.getTimeCardSummaryDetails(month, year); this.getTimeCardSummaryDetails(month, year);
@ -113,7 +106,6 @@ export class TimeCardDetailsComponent implements OnInit {
console.log(result.GetDayHoursTypeDetailsList); 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.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.dayHoursTypeDetailsList = result.GetDayHoursTypeDetailsList;
} }
}); });
@ -124,48 +116,35 @@ export class TimeCardDetailsComponent implements OnInit {
for (let i = 0; i < allDays.length; i++) { for (let i = 0; i < allDays.length; i++) {
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
if (allDays[i].ATTENDED_FLAG == 'Y') { if (allDays[i].ATTENDED_FLAG == 'Y') {
allDays[i].present = true; allDays[i].customPresent = true;
allDays[i].absent = false; allDays[i].customAbsent = false;
allDays[i].daysOff = false; allDays[i].customDaysOff = false;
allDays[i].schedule = false; allDays[i].customSchedule = false;
this.arrDaysAttendance.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') { } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') {
allDays[i].present = false; allDays[i].customPresent = false;
allDays[i].absent = true; allDays[i].customAbsent = true;
allDays[i].daysOff = false; allDays[i].customDaysOff = false;
allDays[i].schedule = false; allDays[i].customSchedule = false;
this.arrDaysAbsent.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
});
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') { } else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') {
allDays[i].present = false; allDays[i].customPresent = false;
allDays[i].absent = false; allDays[i].customAbsent = false;
allDays[i].daysOff = true; allDays[i].customDaysOff = true;
allDays[i].schedule = false; allDays[i].customSchedule = false;
this.arrDaysOff.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else { } else {
allDays[i].present = false; allDays[i].customPresent = false;
allDays[i].absent = false; allDays[i].customAbsent = false;
allDays[i].daysOff = false; allDays[i].customDaysOff = false;
allDays[i].schedule = true; allDays[i].customSchedule = true;
this.normalDays.push({ allDays[i].customScheduleDate = new Date(allDays[i].SCHEDULE_DATE);
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} }
} }
this.showData = true; this.showData = true;
this.dayHoursTypeDetailsList = allDays;
} }
public getTimeCardSummaryDetails(month?, year?) { public getTimeCardSummaryDetails(month?, year?) {
@ -214,7 +193,6 @@ export class TimeCardDetailsComponent implements OnInit {
} }
nextSlide() { nextSlide() {
this.normalDays = [];
if (this.currentMonthName !== this.month) { if (this.currentMonthName !== this.month) {
this.showData = false; this.showData = false;
if (this.nextMonth > 12) { if (this.nextMonth > 12) {
@ -229,7 +207,6 @@ export class TimeCardDetailsComponent implements OnInit {
} }
previousSlide() { previousSlide() {
this.normalDays = [];
this.showData = false; this.showData = false;
if (this.preMonth === 0) { if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1; this.currentYear = this.currentYear - 1;

@ -1284,7 +1284,7 @@ border:0px
} }
.calendar-modal { .calendar-modal {
--height: 13cm !important; --height: 13.5cm !important;
--width: 88% !important; --width: 88% !important;
--border-radius: 0.4cm; --border-radius: 0.4cm;
} }
@ -1409,6 +1409,11 @@ table.monthview-datetable th small {
border-radius: 20px !important; border-radius: 20px !important;
} }
.disable-phone {
pointer-events: none;
opacity: .3;
}
// .replaceRoll-modal { // .replaceRoll-modal {
// padding: 30% 1% !important; // padding: 30% 1% !important;

Loading…
Cancel
Save