Merge remote-tracking branch 'origin/timecard' into new-time-card

master
Mohamed Mekawy 6 years ago
commit a09bac4b6e

@ -21,7 +21,6 @@
<div [ngClass]="{'selectedDiv': selectedMenu == i,'notSelected': selectedMenu != i }">
<ion-text>
<b>{{menuItem.PROMPT}}</b>
</ion-text>
</div>
<!-- Child Pages -->
@ -30,7 +29,7 @@
(click)="openPage(subPage)">
<ion-row>
<ion-col size="12" class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}}</span>
</ion-col>
</ion-col>
</ion-row>
</ion-item>
</ion-list>

@ -55,6 +55,9 @@ export class HomeComponent implements OnInit {
if (menuEntry.REQUEST_TYPE === 'PAYSLIP'){
this.cs.openPayslipPage();
}
if (menuEntry.REQUEST_TYPE === 'TIME_CARD') {
this.cs.openTimeCardPage();
}
}
}

@ -1178,6 +1178,9 @@ public getMonthNameAr(value: number): string {
public openPayslipPage() {
this.nav.navigateForward(["/payslip/home"]);
}
public openTimeCardPage() {
this.nav.navigateForward(["/time-card/time-card-details"]);
}
public openEarningsPage() {
this.nav.navigateForward(["/payslip/Earnings"]);
}
@ -1188,6 +1191,10 @@ public getMonthNameAr(value: number): string {
this.nav.navigateForward(["/authentication/confirmLogin"]);
}
public navigatePage(path) {
this.nav.navigateForward([path]);
}
public reload(url: string, from: string) {
console.log("force reload called from:" + from);
// window.location.reload();

@ -1,3 +1,34 @@
<p>
home works!
</p>
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
</ion-buttons>
<ion-title color="light" >Time and Attendance</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="time-card-home-container">
<ion-card
(click)="openDetailPage(timeCard.pageLink)"
*ngFor="let timeCard of timeCardOptions ; let i = index">
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col [size]="4" class="time-card-image">
<img src="../assets/imgs/time-card/{{timeCard.imageName}}">
</ion-col>
<ion-col [size]="6" class="time-card-details">
<h1 class="time-card-heading">{{timeCard.heading}}</h1>
<span class="time-card-description">{{timeCard.description}}</span>
</ion-col>
<ion-col [size]="2">
<img class="time-card-rightIcon"
src="../assets/imgs/time-card/ArrowRight.png">
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
</ion-content>

@ -0,0 +1,59 @@
ion-header{
overflow: hidden;
}
ion-content{
--ion-background-color: #f2f2f3;
}
ion-card-content {
padding: 0px;
}
ion-card {
box-shadow: none !important;
background-color: white;
margin-bottom: 15px;
}
ion-header {
background: #f2f2f3;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
}
.time-card-home-container{
margin-right: 10px;
margin-left: 10px;
margin-top: 20px
}
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.time-card-image{
padding: 10px;
}
.time-card-details{
padding: 0px;
margin-top: 25px;
line-height: 10px;
}
.time-card-heading{
font-weight: bold;
font-size: 13px;
color: #666666;
font-family: WorkSans-Bold;
}
.time-card-description{
font-size: 10px;
}
.time-card-rightIcon{
padding: 8px;
margin-top: 18px;
}

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
@Component({
selector: 'app-home',
@ -7,8 +8,38 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
constructor() { }
public timeCardOptions: any = [
{
imageName: 'MyTimeCard.png',
heading: 'My Time Card',
description: 'View your attendance records.',
pageLink: '/time-card/time-card-details'
},
{
imageName: 'Timeback.png',
heading: 'Time Back',
description: 'View and use your extra work time.',
pageLink: '/time-card/home'
},
{
imageName: 'MissingSwipe.png',
heading: 'Missing Swipe',
description: 'Resolve swipe and attendance records',
pageLink: '/time-card/home'
},
{
imageName: 'WorkOnBreak.png',
heading: 'Work on Break',
description: 'Record your work time in during break.',
pageLink: '/time-card/home'
}
];
constructor(public common: CommonService) {}
ngOnInit() {}
public openDetailPage(path) {
this.common.navigatePage(path);
}
}

@ -0,0 +1,61 @@
<ion-content>
<div class="date-container">
<ion-row class="ion-justify-content-center">
<ion-col [size]="11">
<ion-item>
<div class="date-time-icon date-primary"></div>
<ion-label>Date From</ion-label>
<ion-datetime
[placeholder]="Select"
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="dateFrom"
doneText="Done"
cancelText="Cancel"
></ion-datetime>
</ion-item>
</ion-col>
<ion-col [size]="11">
<ion-item>
<div class="date-time-icon date-primary"></div>
<ion-label>Date To</ion-label>
<ion-datetime
[placeholder]="Select"
display-format="DD/MM/YYYY"
[min]="1900"
[max]="2100"
[(ngModel)]="dateTo"
doneText="Done"
cancelText="Cancel"
></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</div>
<div class="filters-container">
<span
*ngFor="let filter of filtersArray; let i = index"
[ngClass]="{'selected': filter.active == true,'notSelected': filter.active == false }"
class="filter-tag-button"
(click)="changeFiltersSelection(i)">
{{filter.name}}
</span>
</div>
<ion-list>
<ion-radio-group [(ngModel)]="selectedShiftType">
<ion-list-header>
Shift type
</ion-list-header>
<ion-item *ngFor="let shift of shiftTypesArray">
<ion-label>{{shift.SHT_TYPE_DESC}}</ion-label>
<ion-radio value="{{shift.SHT_TYPE}}"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-button (click)="dismissModal()">Search</ion-button>
</ion-content>

@ -0,0 +1,30 @@
.footer-modal-button{
position: absolute;
bottom: 0;
color: white;
width: 100%;
text-align: center;
}
.footer-modal-button button{
font-size: 20px;
background: white;
line-height: 2;
}
.filters-container{
display: inline-block;
text-align: center;
margin-top: 10px;
}
.filter-tag-button{
display: inline-block;
border-radius: 5px;
border: 2px solid #A3D077;
color: #606161;
text-align: center;
font-size: 18px;
padding: 5px;
margin: 5px;
}
.filters-container .selected {
background-color: #d4f0e4;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SelectPeriodComponent } from './select-period.component';
describe('SelectPeriodComponent', () => {
let component: SelectPeriodComponent;
let fixture: ComponentFixture<SelectPeriodComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ SelectPeriodComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SelectPeriodComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,128 @@
import { Component, OnInit } from '@angular/core';
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';
@Component({
selector: 'app-select-period',
templateUrl: './select-period.component.html',
styleUrls: ['./select-period.component.scss'],
})
export class SelectPeriodComponent implements OnInit {
public shiftTypesArray: 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 navParams: NavParams) { }
ngOnInit() {
this.getShiftTypes();
this.dateFrom = this.navParams.get('dateFrom');
this.dateTo = this.navParams.get('dateTo');
}
public dismissModal() {
const selectedFilters: any = {};
for (const filter of this.filtersArray) {
selectedFilters[filter.key] = filter;
}
this.modalController.dismiss({
dismissed: true,
keySelectedFilters: selectedFilters,
selectedShiftType: this.selectedShiftType,
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() {
this.timeCardService.getShiftType().subscribe((result) => {
if (this.common.validResponse(result)) {
this.shiftTypesArray = result.GetShiftTypesList;
}
});
}
}

@ -5,8 +5,8 @@ export class GetDayAndHoursDetailsRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_MENU_TYPE: string;
public P_SELECTED_RESP_ID: number;
public P_SCHEDULE_DATE_FROM: DateTimeInput;
public P_SCHEDULE_DATE_TO: DateTimeInput;
public P_SCHEDULE_DATE_FROM: string;
public P_SCHEDULE_DATE_TO: string;
public P_EXCESS_FLAG: string;
public P_TIMEBACK_FLAG: string;
public P_COMP_OFF_FLAG: string;

@ -3,7 +3,7 @@ import { DateTimeInput } from "src/app/uI-elements/date-time.input";
export class GetSwipesRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_SCHEDULE_DATE: DateTimeInput;
public P_SCHEDULE_DATE: string;
public P_PAGE_NUM: number;
public P_PAGE_LIMIT: number;
}

@ -5,8 +5,8 @@ export class GetTimeCardSummaryRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_MENU_TYPE: string;
public P_SELECTED_RESP_ID: number;
public P_SCHEDULE_DATE_FROM: DateTimeInput;
public P_SCHEDULE_DATE_TO: DateTimeInput;
public P_SCHEDULE_DATE_FROM: string;
public P_SCHEDULE_DATE_TO: string;
public P_EXCESS_FLAG: string;
public P_TIMEBACK_FLAG: string;
public P_COMP_OFF_FLAG: string;

@ -1,27 +1,27 @@
import { Injectable } from "@angular/core";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { ConnectorService } from "src/app/hmg-common/services/connector/connector.service";
import { Request } from "src/app/hmg-common/services/models/request";
import { Injectable } from '@angular/core';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { ConnectorService } from 'src/app/hmg-common/services/connector/connector.service';
import { Request } from 'src/app/hmg-common/services/models/request';
import { Observable } from "rxjs";
import { GetShiftTypeResponse } from "./models/get-shift-type.response";
import { GetDayAndHoursDetailsResponse } from "./models/get-day-hours-type-details.response";
import { GetTimeCardSummaryResponse } from "./models/get-time-card-summary.response";
import { GetShiftDetailResponse } from "./models/get-shift-detail.response";
import { GetSwipesResponse } from "./models/get-swipes-response";
import { Observable } from 'rxjs';
import { GetShiftTypeResponse } from './models/get-shift-type.response';
import { GetDayAndHoursDetailsResponse } from './models/get-day-hours-type-details.response';
import { GetTimeCardSummaryResponse } from './models/get-time-card-summary.response';
import { GetShiftDetailResponse } from './models/get-shift-detail.response';
import { GetSwipesResponse } from './models/get-swipes-response';
@Injectable({
providedIn: "root"
providedIn: 'root'
})
export class TimeCardService {
public static getShiftTypeUrl = "Services/ERP.svc/REST/GET_SHIFT_TYPES";
public static getShiftTypeUrl = 'Services/ERP.svc/REST/GET_SHIFT_TYPES';
public static getTimeCardSummaryUrl =
"Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY";
'Services/ERP.svc/REST/GET_TIME_CARD_SUMMARY';
public static getDayHourDetailsUrl =
"Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS";
'Services/ERP.svc/REST/GET_DAY_HOURS_TYPE_DETAILS';
public static getShiftDetailUrl =
"Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS";
public static getSwipeUrl = "Services/ERP.svc/REST/GET_SWIPES";
'Services/ERP.svc/REST/GET_SCHEDULE_SHIFTS_DETAILS';
public static getSwipeUrl = 'Services/ERP.svc/REST/GET_SWIPES';
constructor(
public con: ConnectorService,

@ -0,0 +1,191 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
</ion-buttons>
<ion-title color="light" >Shift Details</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<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">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">
Shift type
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_TYPE_DESC}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Shift
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_NAME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Break
</ion-col>
<ion-col [size]="4">
{{shiftData.BREAK_NAME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Work On Break
</ion-col>
<ion-col [size]="4">
{{shiftData.ACTUAL_WOB_HRS}}
</ion-col>
</ion-row>
<ion-row>
<h2 class="card-summary-heading">Actual Swipe(s)</h2>
</ion-row>
<ion-row>
<ion-col [size]="8">
Start
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_ACTUAL_START_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
End
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_ACTUAL_END_TIME}}
</ion-col>
</ion-row>
<ion-row>
<h2 class="card-summary-heading">Approved Swipe(s)</h2>
</ion-row>
<ion-row>
<ion-col [size]="8">
Start
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_START_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Start Reason
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_START_REASON_DESC}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
End
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_END_TIME}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
End Reason
</ion-col>
<ion-col [size]="4">
{{shiftData.APPROVED_END_REASON_DESC}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Actual Hours
</ion-col>
<ion-col [size]="4">
{{shiftData.SHT_ACTUAL_HRS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<div class="ion-padding shift-container" *ngIf="swipeDetailsData && selectedShift.origin === 'shiftSwipes'">
<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>

@ -0,0 +1,30 @@
ion-header{
overflow: hidden;
background: #f2f2f3;
}
ion-content{
--ion-background-color: #f2f2f3;
}
ion-card-content {
padding: 0px;
}
ion-card {
box-shadow: none !important;
background-color: white;
margin: 10px;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
margin-right: 45px;
}
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}

@ -0,0 +1,27 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ShiftDetailsComponent } from './shift-details.component';
describe('ShiftDetailsComponent', () => {
let component: ShiftDetailsComponent;
let fixture: ComponentFixture<ShiftDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ShiftDetailsComponent ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ShiftDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

@ -0,0 +1,62 @@
import { Component, OnInit } from '@angular/core';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.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';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import * as moment from 'moment';
@Component({
selector: 'app-shift-details',
templateUrl: './shift-details.component.html',
styleUrls: ['./shift-details.component.scss'],
})
export class ShiftDetailsComponent implements OnInit {
public selectedShift: any;
public shiftDetailsData: any = [];
public swipeDetailsData: any = [];
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public sharedData: SharedDataService) { }
ngOnInit() {
this.selectedShift = this.sharedData.getSharedData('selectedShift', false);
console.log(this.selectedShift);
if (this.selectedShift.origin === 'shiftDetails') {
this.getScheduleShiftDetails();
} else if (this.selectedShift.origin === 'shiftSwipes') {
this.getSwipesDetails();
}
}
getScheduleShiftDetails() {
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.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;
}
});
}
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;
}
});
}
}

@ -1,3 +1,387 @@
<p>
time-card-details works!
</p>
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<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>
</ion-header>
<ion-content>
<div class="time-card-details-container">
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment"
style="font-family: WorkSans-Bold;margin-top: 10px;">
<ion-segment-button
value="time-card-details"
[ngClass]="activeSegment == 'time-card-details' ? 'active-Segment' : 'normal-Segment'" >
<ion-label>Time Card Details</ion-label>
</ion-segment-button>
<ion-segment-button
value="time-card-summary"
[ngClass]="activeSegment == 'time-card-summary' ? 'active-Segment' : 'normal-Segment'">
<ion-label>Time Card Summary</ion-label>
</ion-segment-button>
</ion-segment>
<div class="ion-padding" *ngIf="activeSegment === 'time-card-summary' && timeCardSummaryData">
<ion-card>
<ion-card-content>
<h2 class="card-summary-heading">Days</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="8">
Period Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.PERIOD_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Schedule Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.SCHEDULE_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Off days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.OFF_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Attended Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.ATTENDED_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Absent Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.ABSENT_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Non Schedule Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.NON_SCHEDULE_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Not Analyzed Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.NOT_ANALYZED_DAYS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="6" class="card-summary-heading-hours">
Hours
</ion-col>
<ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
Actual
</ion-col>
<ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
Schedule
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Regular
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.ACTUAL_HRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Planned OT
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.PLANNED_OTHRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_PLANNED_OT_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
On Call
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.ON_CALL_HRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_ON_CALL_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Excess
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.EXCESS_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Time Back
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIMEBACK_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Approved Time Back
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIMEBACK_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Time Back Balance
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIME_BACK_BALANCE}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Late In
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.LATE_IN_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Early Out
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.EARLY_OUT_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<h2 class="card-summary-heading">Leaves & Holidays</h2>
<ion-grid style="line-height: 10px;">
<ion-row>
<ion-col [size]="7">
Half-Day Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.HALF_DAY_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Unauthorized Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Business Trip
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.BUSINESS_TRIP}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Sick Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.SICK_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Paid Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.PAID_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Unpaid Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.UNPAID_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Puclic Holiday
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.PUBLIC_HOLIDAY}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<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>{{ 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/TimeBackIcon.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Time Back:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.TIMEBACK_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Remarks.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Remarks:</span>
</ion-col>
<ion-col [size]="4" style="font-size: 12px;">
{{dayHours.REMARKS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Shift Hours.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Shift Hours:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.SCHEDULED_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/ExcessTime.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Excess Time:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.EXCESS_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/PlannedOT.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Planned OT:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.PLANNED_OT_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/LateIn.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Late In:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.LATE_IN_HRS}}
</ion-col>
</ion-row>
<ion-row [hidden]="showMore == false">
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/EarlyOut.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Early Out:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.EARLY_OUT_HRS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
<div class="dayhours-button-container">
<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
</button>
</div>

@ -0,0 +1,154 @@
ion-header{
overflow: hidden;
background: #f2f2f3;
}
ion-content{
--ion-background-color: #f2f2f3;
}
ion-card-content {
padding: 0px;
}
ion-card {
box-shadow: none !important;
background-color: white;
margin: 10px -15px;
margin-bottom: 20px;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
margin-right: 35px;
}
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
border-bottom-left-radius: 30px;
}
.active-Segment {
border-radius: 5px !important;
font-size: 0.3cm !important;
background: white !important;
color: #fff !important;
font-weight: bold !important;
border: 1px solid white !important;
text-transform: none;
--color-checked: none;
}
.active-Segment ion-label{
// color: #A3D077 !important;
color: #11975F !important;
font-size: 11px;
}
.normal-Segment ion-label{
// color: #A3D077 !important;
color: white !important;
font-size: 11px;
}
.normal-Segment {
border-radius: 5px !important;
font-size: 0.3cm !important;
background: #A3D077 !important;
color: #fff !important;
font-weight: bold !important;
border: 1px solid white !important;
text-transform: none;
--color-checked: none;
}
.time-card-details-container{
margin-right: 20px;
margin-left: 20px;
}
.card-summary-heading{
margin-left: 10px;
margin-top: 12px;
color: #606161;
font-family: WorkSans-Bold;
}
.card-summary-heading-hours{
color: #606161;
font-family: WorkSans-Bold;
}
.card-summary-heading-hours-extended-heading{
color: #D3D3D3;
font-family: WorkSans-Bold;
}
/////////////////////////////////
.time-card-details {
background: white;
margin: 20px;
border-radius: 5px;
}
.time-card-details-heading-two {
color: #606161;
font-family: WorkSans-Bold;
}
.time-card-details-heading-two h2 {
margin-top: 15px;
font-size: 15px;
}
.time-card-span img{
height: 30px;
margin-top: -5px;
margin-left: 10px;
}
.dayhours-button-container{
width: 100%;
padding-right: 5px;
padding-left: 5px;
}
.dayhours-button{
width: 50%;
height: 35px;
font-size: 15px;
color: white;
background: #606161;
}
/////////////////////////////////////
.footer-modal-button{
position: absolute;
bottom: 0;
color: white;
width: 100%;
text-align: center;
}
.footer-modal-button button{
font-size: 20px;
background: white;
line-height: 2;
margin: -42px auto 0;
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%;
}

@ -1,4 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { ModalController, IonSlides } from '@ionic/angular';
import { SelectPeriodComponent } from '../select-period/select-period.component';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-time-card-summary.request';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import * as moment from 'moment';
@Component({
selector: 'app-time-card-details',
@ -6,9 +15,207 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./time-card-details.component.scss'],
})
export class TimeCardDetailsComponent implements OnInit {
@ViewChild('sliderRef') protected sliderRef: IonSlides;
public activeSegment: any = 'time-card-summary';
public showMore: any = true;
public menuType: any;
public selEmp: string;
public dateFrom: any = new Date();
public dateTo: any = new Date();
public selMenu: MenuResponse = new MenuResponse();
public respID: number;
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
) { }
constructor() { }
ngOnInit() {
this.getTimeCardSummaryDetails();
}
ngOnInit() {}
public segmentChanged(event: any) {
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() {
this.showMore = !this.showMore;
}
public 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.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.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom);
dayAndHoursReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo);
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.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;
}
}
});
}
public getTimeCardSummaryDetails() {
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ');
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;
timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
timeCardSummaryReqObj.P_MENU_TYPE = this.menuType;
timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID;
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];
}
});
}
async openSelectPeriodModal() {
const modal = await this.modalController.create({
component: SelectPeriodComponent,
cssClass: 'select-period-custom-modal',
componentProps: {
dateFrom : this.dateFrom,
dateTo : this.dateTo
}
});
modal.onDidDismiss().then(result => {
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) {
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) => {
this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin;
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();
}
}

@ -8,6 +8,8 @@ import { IonicModule } from '@ionic/angular';
import { TimeCardPage } from './time-card.page';
import { TimeCardDetailsComponent } from './time-card-details/time-card-details.component';
import { HomeComponent } from './home/home.component';
import { SelectPeriodComponent } from './select-period/select-period.component';
import { ShiftDetailsComponent } from './shift-details/shift-details.component';
const routes: Routes = [
{
@ -21,6 +23,10 @@ const routes: Routes = [
{
path: 'time-card-details',
component: TimeCardDetailsComponent
},
{
path: 'shift-details',
component: ShiftDetailsComponent
}
]
}
@ -36,7 +42,12 @@ const routes: Routes = [
declarations: [
TimeCardPage,
HomeComponent,
TimeCardDetailsComponent
]
TimeCardDetailsComponent,
SelectPeriodComponent,
ShiftDetailsComponent
],
entryComponents: [
SelectPeriodComponent
],
})
export class TimeCardPageModule {}

Binary file not shown.

After

Width:  |  Height:  |  Size: 698 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 720 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 673 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 557 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 914 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 556 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 833 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 447 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 653 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 682 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 658 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 618 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Loading…
Cancel
Save