completed functionality of time card module

timecard
umasoodch 6 years ago
parent 167973cedb
commit e01c73a092

@ -24,7 +24,7 @@
</ion-text> </ion-text>
</div> </div>
<!-- Child Pages --> <!-- Child Pages -->
<ion-list [hidden]="selectedMenu != i" *ngIf="menuItem.PROMPT != 'Time And Attendance'"> <ion-list [hidden]="selectedMenu != i">
<ion-item lines="none" class="childItem" *ngFor="let subPage of menuItem.children;let i2=index" text-wrap <ion-item lines="none" class="childItem" *ngFor="let subPage of menuItem.children;let i2=index" text-wrap
(click)="openPage(subPage)"> (click)="openPage(subPage)">
<ion-row> <ion-row>
@ -36,7 +36,7 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-icon [name]="selectedMenu == i? 'ios-arrow-down' : 'ios-arrow-forward'" <ion-icon [name]="selectedMenu == i? 'ios-arrow-down' : 'ios-arrow-forward'"
*ngIf="menuItem.children && menuItem.MENU_ENTRY_TYPE=='MENU' && menuItem.PROMPT != 'Time And Attendance'" slot="end" class="arrow-down"></ion-icon> *ngIf="menuItem.children && menuItem.MENU_ENTRY_TYPE=='MENU'" slot="end" class="arrow-down"></ion-icon>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
openPage(page, index) { openPage(page, index) {
// Reset the content nav to have just this page // Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario // we wouldn't want the back button to show in this scenario
if (page.children.length == 0 || page.PROMPT == 'Time And Attendance') { if (page.children.length == 0) {
this.goToRequest(page); this.goToRequest(page);
} else { } else {
if (this.selectedMenu == 0) { if (this.selectedMenu == 0) {
@ -55,10 +55,9 @@ export class HomeComponent implements OnInit {
if (menuEntry.REQUEST_TYPE =='PAYSLIP'){ if (menuEntry.REQUEST_TYPE =='PAYSLIP'){
this.cs.openPayslipPage(); this.cs.openPayslipPage();
} }
if (menuEntry.PROMPT == 'Time And Attendance'){ if (menuEntry.REQUEST_TYPE === 'TIME_CARD') {
this.cs.openTimeCardPage(); this.cs.openTimeCardPage();
} }
} }
} }

@ -1072,7 +1072,7 @@ export class CommonService {
this.nav.navigateForward(["/payslip/home"]); this.nav.navigateForward(["/payslip/home"]);
} }
public openTimeCardPage() { public openTimeCardPage() {
this.nav.navigateForward(["/time-card/home"]); this.nav.navigateForward(["/time-card/time-card-details"]);
} }
public openEarningsPage() { public openEarningsPage() {
this.nav.navigateForward(["/payslip/Earnings"]); this.nav.navigateForward(["/payslip/Earnings"]);
@ -1084,6 +1084,10 @@ export class CommonService {
this.nav.navigateForward(["/authentication/confirmLogin"]); this.nav.navigateForward(["/authentication/confirmLogin"]);
} }
public navigatePage(path) {
this.nav.navigateForward([path]);
}
public reload(url: string, from: string) { public reload(url: string, from: string) {
console.log("force reload called from:" + from); console.log("force reload called from:" + from);
// window.location.reload(); // window.location.reload();

@ -1,23 +1,28 @@
<ion-header> <ion-header>
<ion-toolbar class="header-toolbar-new"> <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-title color="light" >Time and Attendance</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div *ngFor="let timeCard of timeCardOptions ; let i = index"> <div class="time-card-home-container">
<ion-card (click)="openDetailPage(i)"> <ion-card
(click)="openDetailPage(timeCard.pageLink)"
*ngFor="let timeCard of timeCardOptions ; let i = index">
<ion-card-content> <ion-card-content>
<ion-grid class="" > <ion-grid>
<ion-row class=""> <ion-row>
<ion-col size="4" class="time-card-image"> <ion-col [size]="4" class="time-card-image">
<img class="" <img src="../assets/imgs/time-card/{{timeCard.imageName}}">
src="../assets/imgs/time-card/{{timeCard.imageName}}">
</ion-col> </ion-col>
<ion-col size="6" class="time-card-details"> <ion-col [size]="6" class="time-card-details">
<h1 class="time-card-heading">{{timeCard.heading}}</h1> <h1 class="time-card-heading">{{timeCard.heading}}</h1>
<span class="time-card-description">{{timeCard.description}}</span> <span class="time-card-description">{{timeCard.description}}</span>
</ion-col> </ion-col>
<ion-col size="2"> <ion-col [size]="2">
<img class="time-card-rightIcon" <img class="time-card-rightIcon"
src="../assets/imgs/time-card/ArrowRight.png"> src="../assets/imgs/time-card/ArrowRight.png">
</ion-col> </ion-col>

@ -12,7 +12,7 @@ ion-card-content {
ion-card { ion-card {
box-shadow: none !important; box-shadow: none !important;
background-color: white; background-color: white;
margin: 10px 30px; margin-bottom: 15px;
} }
ion-header { ion-header {
background: #f2f2f3; background: #f2f2f3;
@ -22,6 +22,11 @@ ion-title{
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
font-size: 18px; font-size: 18px;
} }
.time-card-home-container{
margin-right: 10px;
margin-left: 10px;
margin-top: 20px
}
.header-toolbar-new{ .header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%); --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px; border-bottom-right-radius: 30px;

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NavController } from '@ionic/angular'; import { CommonService } from 'src/app/hmg-common/services/common/common.service';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: './home.component.html', templateUrl: './home.component.html',
@ -34,11 +35,11 @@ export class HomeComponent implements OnInit {
} }
]; ];
constructor(public nav: NavController) {} constructor(public common: CommonService) {}
ngOnInit() {} ngOnInit() {}
public openDetailPage() { public openDetailPage(path) {
this.nav.navigateForward(['/time-card/time-card-details']); this.common.navigatePage(path);
} }
} }

@ -1,51 +1,61 @@
<ion-content> <ion-content>
<p> <div class="date-container">
select-period works! <ion-row class="ion-justify-content-center">
</p> <ion-col [size]="11">
<p> <ion-item>
select-period works! <div class="date-time-icon date-primary"></div>
</p> <ion-label>Date From</ion-label>
<p> <ion-datetime
select-period works! [placeholder]="Select"
</p> display-format="DD/MM/YYYY"
<p> [min]="1900"
select-period works! [max]="2100"
</p> [(ngModel)]="selectFromDate"
<p> doneText="Done"
select-period works! cancelText="Cancel"
</p> ></ion-datetime>
<p> </ion-item>
select-period works! </ion-col>
</p> <ion-col [size]="11">
<p> <ion-item>
select-period works! <div class="date-time-icon date-primary"></div>
</p> <ion-label>Date To</ion-label>
<p> <ion-datetime
select-period works! [placeholder]="Select"
</p> display-format="DD/MM/YYYY"
<p> [min]="1900"
select-period works! [max]="2100"
</p> [(ngModel)]="selectToDate"
<p> doneText="Done"
select-period works! cancelText="Cancel"
</p> ></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</div>
<p> <div class="filters-container">
select-period works! <span
</p> *ngFor="let filter of filtersArray; let i = index"
<p> [ngClass]="{'selected': filter.active == true,'notSelected': filter.active == false }"
select-period works! class="filter-tag-button"
</p> (click)="changeFiltersSelection(i)">
<p> {{filter.name}}
select-period works! </span>
</p> </div>
<p>
select-period works! <ion-list>
</p> <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> </ion-content>
<div class="footer-modal-button">
<button ion-button (click)="dismiss()">
Select Period
</button>
</div>

@ -10,3 +10,21 @@
background: white; background: white;
line-height: 2; 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;
}

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular'; import { ModalController } 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({ @Component({
selector: 'app-select-period', selector: 'app-select-period',
@ -7,14 +9,91 @@ import { ModalController } from '@ionic/angular';
styleUrls: ['./select-period.component.scss'], styleUrls: ['./select-period.component.scss'],
}) })
export class SelectPeriodComponent implements OnInit { export class SelectPeriodComponent implements OnInit {
public shiftTypesArray: any = [];
public selectFromDate: any;
public selectToDate: any;
public selectedShiftType: any;
constructor(public modalController: ModalController) { } public filtersArray: any = [
{
name: 'Excess',
active: false,
},
{
name: 'Timeback',
active: false,
},
{
name: 'Comp Off',
active: false,
},
{
name: 'Non scheduled',
active: false,
},
{
name: 'Late In',
active: false,
},
{
name: 'Early Out',
active: false,
},
{
name: 'Shortage',
active: false,
},
{
name: 'Missing Swipe',
active: false,
},
{
name: 'Work On Break',
active: false,
},
{
name: 'Analyzed',
active: false,
},
{
name: 'Approved Timeback',
active: false,
},
];
constructor(
public modalController: ModalController,
public common: CommonService,
public timeCardService: TimeCardService) { }
ngOnInit() {} ngOnInit() {
this.getShiftTypes();
}
public dismiss() { public dismissModal() {
const selectedFilters: any = [];
for (const filter of this.filtersArray) {
if (filter.active) {
selectedFilters.push(filter);
}
}
this.modalController.dismiss({ this.modalController.dismiss({
dismissed: true dismissed: true,
selectedFiltersArray: selectedFilters,
selectedShiftType: this.selectedShiftType,
selectFromDate: this.selectFromDate,
selectToDate: this.selectToDate
});
}
public changeFiltersSelection(i: any) {
this.filtersArray[i].active = !this.filtersArray[i].active;
}
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_SELECTED_EMPLOYEE_NUMBER: string;
public P_MENU_TYPE: string; public P_MENU_TYPE: string;
public P_SELECTED_RESP_ID: number; public P_SELECTED_RESP_ID: number;
public P_SCHEDULE_DATE_FROM: DateTimeInput; public P_SCHEDULE_DATE_FROM: string;
public P_SCHEDULE_DATE_TO: DateTimeInput; public P_SCHEDULE_DATE_TO: string;
public P_EXCESS_FLAG: string; public P_EXCESS_FLAG: string;
public P_TIMEBACK_FLAG: string; public P_TIMEBACK_FLAG: string;
public P_COMP_OFF_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 { export class GetSwipesRequest extends Request {
public P_SELECTED_EMPLOYEE_NUMBER: string; public P_SELECTED_EMPLOYEE_NUMBER: string;
public P_SCHEDULE_DATE: DateTimeInput; public P_SCHEDULE_DATE: string;
public P_PAGE_NUM: number; public P_PAGE_NUM: number;
public P_PAGE_LIMIT: number; public P_PAGE_LIMIT: number;
} }

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

@ -0,0 +1,118 @@
<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 && selectedShift.origin === 'shiftDetails'">
<ion-card *ngFor="let shiftData of shiftDetailsData;">
<ion-card-content>
<h2 class="card-summary-heading">Days</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'">
No results Found
</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.GetDayHoursTypeDetailsList;
}
});
}
}

@ -1,11 +1,13 @@
<ion-header> <ion-header>
<ion-toolbar class="header-toolbar-new"> <ion-toolbar class="header-toolbar-new">
<ion-title color="light" >My Time Card</ion-title> <ion-buttons slot="start">
</ion-toolbar> <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-header> </ion-buttons>
<ion-title color="light" >My Time Card</ion-title>
</ion-toolbar>
</ion-header>
<ion-content> <ion-content>
<div class="time-card-details-container"> <div class="time-card-details-container">
<ion-segment <ion-segment
(ionChange)="segmentChanged($event)" (ionChange)="segmentChanged($event)"
@ -20,390 +22,392 @@
value="time-card-summary" value="time-card-summary"
[ngClass]="activeSegment == 'time-card-summary' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'time-card-summary' ? 'active-Segment' : 'normal-Segment'">
<ion-label>Time Card Summary</ion-label> <ion-label>Time Card Summary</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<div class="ion-padding" *ngIf="activeSegment === 'time-card-summary'"> <div class="ion-padding" *ngIf="activeSegment === 'time-card-summary' && timeCardSummaryData">
<ion-card> <ion-card>
<ion-card-content> <ion-card-content>
<h2 class="card-summary-heading">Days</h2> <h2 class="card-summary-heading">Days</h2>
<ion-grid style="line-height: 10px;"> <ion-grid style="line-height: 10px;">
<ion-row> <ion-row>
<ion-col size="8"> <ion-col [size]="8">
Period Days Period Days
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
245 {{timeCardSummaryData.PERIOD_DAYS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col size="8"> <ion-col [size]="8">
Schedule Days Schedule Days
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
156 {{timeCardSummaryData.SCHEDULE_DAYS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col size="8"> <ion-col [size]="8">
Off days Off days
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
79 {{timeCardSummaryData.OFF_DAYS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row class=""> <ion-row>
<ion-col size="8"> <ion-col [size]="8">
Attended Days Attended Days
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
163 {{timeCardSummaryData.ATTENDED_DAYS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row class=""> <ion-row>
<ion-col size="8"> <ion-col [size]="8">
Absent Days Absent Days
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
0 {{timeCardSummaryData.ABSENT_DAYS}}
</ion-col> </ion-col>
</ion-row> </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-row class=""> <ion-card>
<ion-col size="8"> <ion-card-content>
Non Schedule Days <ion-grid style="line-height: 10px;">
</ion-col> <ion-row>
<ion-col size="4"> <ion-col [size]="6" class="card-summary-heading-hours">
0 Hours
</ion-col> </ion-col>
</ion-row> <ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
<ion-row class=""> Actual
<ion-col size="8"> </ion-col>
Not Analyzed Days <ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
</ion-col> Schedule
<ion-col size="4"> </ion-col>
3 </ion-row>
</ion-col> <ion-row>
</ion-row> <ion-col [size]="6">
</ion-grid> Regular
</ion-card-content> </ion-col>
</ion-card> <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>
<ion-card-content> <ion-card-content>
<ion-grid style="line-height: 10px;"> <h2 class="card-summary-heading">Leaves & Holidays</h2>
<ion-row class=""> <ion-grid style="line-height: 10px;">
<ion-col size="6" class="card-summary-heading-hours"> <ion-row>
Hours <ion-col [size]="7">
</ion-col> Half-Day Leave
<ion-col size="3" class="card-summary-heading-hours-extended-heading"> </ion-col>
Actual <ion-col [size]="5">
</ion-col> {{timeCardSummaryData.HALF_DAY_LEAVE}}
<ion-col size="3" class="card-summary-heading-hours-extended-heading"> </ion-col>
Schedule </ion-row>
</ion-col> <ion-row>
</ion-row> <ion-col [size]="7">
<ion-row class=""> Unauthorized Leave
<ion-col size="6"> </ion-col>
Regular <ion-col [size]="5">
</ion-col> {{timeCardSummaryData.UNAUTHORIZED_LEAVE}}
<ion-col size="3"> </ion-col>
245 </ion-row>
</ion-col> <ion-row>
<ion-col size="3"> <ion-col>
235 Business Trip
</ion-col> </ion-col>
</ion-row> <ion-col [size]="5">
<ion-row class=""> {{timeCardSummaryData.BUSINESS_TRIP}}
<ion-col size="6"> </ion-col>
Planned OT </ion-row>
</ion-col> <ion-row>
<ion-col size="3"> <ion-col [size]="7">
156 Sick Leave
</ion-col> </ion-col>
<ion-col size="3"> <ion-col [size]="5">
156 {{timeCardSummaryData.SICK_LEAVE}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row class=""> <ion-row>
<ion-col size="6"> <ion-col [size]="7">
On Call Paid Leave
</ion-col> </ion-col>
<ion-col size="3"> <ion-col [size]="5">
79 {{timeCardSummaryData.PAID_LEAVE}}
</ion-col> </ion-col>
<ion-col size="3"> </ion-row>
79 <ion-row>
</ion-col> <ion-col [size]="7">
</ion-row> Unpaid Leave
<ion-row class=""> </ion-col>
<ion-col size="6"> <ion-col [size]="5">
Excess {{timeCardSummaryData.UNPAID_LEAVE}}
</ion-col> </ion-col>
<ion-col size="3"> </ion-row>
10 <ion-row>
</ion-col> <ion-col [size]="7">
<ion-col size="3"> Puclic Holiday
10 </ion-col>
</ion-col> <ion-col [size]="5">
</ion-row> {{timeCardSummaryData.PUBLIC_HOLIDAY}}
<ion-row class=""> </ion-col>
<ion-col size="6"> </ion-row>
Time Back </ion-grid>
</ion-col> </ion-card-content>
<ion-col size="3"> </ion-card>
163 </div>
</ion-col>
<ion-col size="3">
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Approved Time Back
</ion-col>
<ion-col size="3">
0
</ion-col>
<ion-col size="3">
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Time Back Balance
</ion-col>
<ion-col size="3">
0
</ion-col>
<ion-col size="3">
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Late In
</ion-col>
<ion-col size="3">
00:06
</ion-col>
<ion-col size="3">
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Early Out
</ion-col>
<ion-col size="3">
00:03
</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 class="">
<ion-col size="7">
Half-Day Leave
</ion-col>
<ion-col size="5">
245
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="7">
Unauthorized Leave
</ion-col>
<ion-col size="5">
156
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="7">
Business Trip
</ion-col>
<ion-col size="5">
79
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="7">
Sick Leave
</ion-col>
<ion-col size="5">
163
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="7">
Paid Leave
</ion-col>
<ion-col size="5">
0
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="7">
Unpaid Leave
</ion-col>
<ion-col size="5">
0
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="7">
Puclic Holiday
</ion-col>
<ion-col size="5">
3
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div> <div *ngIf="activeSegment === 'time-card-details' && dayHoursData" class="time-card-details">
<ion-slides #sliderRef (ionSlideDidChange)="slideChanged($event)" class="fadeIn">
<div *ngIf="activeSegment === 'time-card-details'" class="time-card-details"> <ion-slide *ngFor="let dayHours of dayHoursData; let i = index">
<ion-grid> <ion-grid>
<ion-row style="text-align: center;"> <ion-row style="text-align: center;">
<ion-col size="12" class="time-card-details-heading-two"> <ion-col [size]="12" class="time-card-details-heading-two">
<h2>Today's time card details</h2> <h2>Today's time card details</h2>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <!-- <ion-row>
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeIn.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeIn.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Swipe In:</span> <span>Swipe In:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
06:57 06:57
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeOut.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeOut.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Swipe Out:</span> <span>Swipe Out:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
05:05 05:05
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TotalHours.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/TotalHours.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Total Hours:</span> <span>Total Hours:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
03:39 03:39
</ion-col> </ion-col>
</ion-row> </ion-row> -->
<ion-row> <ion-row>
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TimeBackIcon.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/TimeBackIcon.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Time Back:</span> <span>Time Back:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
03:39 {{dayHours.TIMEBACK_HRS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Remarks.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/Remarks.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Remarks:</span> <span>Remarks:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4" style="font-size: 12px;">
Off Shift {{dayHours.REMARKS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row [hidden]="showMore == false"> <ion-row [hidden]="showMore == false">
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Shift Hours.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/Shift Hours.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Shift Hours:</span> <span>Shift Hours:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
09:00 {{dayHours.SCHEDULED_HRS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row [hidden]="showMore == false"> <ion-row [hidden]="showMore == false">
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/ExcessTime.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/ExcessTime.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Excess Time:</span> <span>Excess Time:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
00:08 {{dayHours.EXCESS_HRS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row [hidden]="showMore == false"> <ion-row [hidden]="showMore == false">
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/PlannedOT.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/PlannedOT.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Planned OT:</span> <span>Planned OT:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
03:00 {{dayHours.PLANNED_OT_HRS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row [hidden]="showMore == false"> <ion-row [hidden]="showMore == false">
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/LateIn.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/LateIn.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Late In:</span> <span>Late In:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
00:00 {{dayHours.LATE_IN_HRS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row [hidden]="showMore == false"> <ion-row [hidden]="showMore == false">
<ion-col size="2"> <ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/EarlyOut.png"></span> <span class="time-card-span"><img class="" src="../assets/imgs/time-card/EarlyOut.png"></span>
</ion-col> </ion-col>
<ion-col size="6"> <ion-col [size]="6">
<span>Early Out:</span> <span>Early Out:</span>
</ion-col> </ion-col>
<ion-col size="4"> <ion-col [size]="4">
00:00 {{dayHours.EARLY_OUT_HRS}}
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
<div class="show-more-less" (click)="toggleButton()"> </ion-slide>
<span>More Details</span>
<ion-icon slot="icon-only" name="ios-arrow-down"></ion-icon> </ion-slides>
</div> <div class="dayhours-button-container">
</div> <button class="dayhours-button" (click)="showShiftDetails('shiftDetails')">Shift details</button>
<button class="dayhours-button" (click)="showShiftDetails('shiftSwipes')">Swipes</button>
</div>
</div>
</div> </div>
</ion-content> </ion-content>
<div class="footer-modal-button">
<div *ngIf="activeSegment === 'time-card-details'" class="footer-modal-button">
<button ion-button (click)="openSelectPeriodModal()"> <button ion-button (click)="openSelectPeriodModal()">
Select Period Select Period
</button> </button>

@ -1,5 +1,6 @@
ion-header{ ion-header{
overflow: hidden; overflow: hidden;
background: #f2f2f3;
} }
ion-content{ ion-content{
--ion-background-color: #f2f2f3; --ion-background-color: #f2f2f3;
@ -15,17 +16,14 @@ ion-card {
margin: 10px -15px; margin: 10px -15px;
margin-bottom: 20px; margin-bottom: 20px;
} }
ion-header {
background: #f2f2f3;
}
ion-title{ ion-title{
text-align: center; text-align: center;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
font-size: 18px; font-size: 18px;
margin-right: 35px;
} }
// ion-label {
// color: #A3D077 !important;
// }
.header-toolbar-new{ .header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%); --background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px; border-bottom-right-radius: 30px;
@ -105,12 +103,16 @@ ion-title{
margin-top: -5px; margin-top: -5px;
margin-left: 10px; margin-left: 10px;
} }
.show-more-less{ .dayhours-button-container{
width: 100%; width: 100%;
background: #606061; padding-right: 5px;
text-align: center; padding-left: 5px;
/* margin: 10px; */ }
padding-top: 20px;
.dayhours-button{
width: 50%;
height: 35px;
font-size: 15px;
} }
///////////////////////////////////// /////////////////////////////////////
@ -125,4 +127,7 @@ ion-title{
font-size: 20px; font-size: 20px;
background: white; background: white;
line-height: 2; line-height: 2;
margin: -42px auto 0;
display: block;
} }

@ -1,9 +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 { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { GetShiftTypeResponse } from '../service/models/get-shift-type.response';
import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { ModalController } from '@ionic/angular'; 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 { 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({ @Component({
selector: 'app-time-card-details', selector: 'app-time-card-details',
@ -11,34 +15,86 @@ import { SelectPeriodComponent } from '../select-period/select-period.component'
styleUrls: ['./time-card-details.component.scss'], styleUrls: ['./time-card-details.component.scss'],
}) })
export class TimeCardDetailsComponent implements OnInit { export class TimeCardDetailsComponent implements OnInit {
@ViewChild('sliderRef') protected sliderRef: IonSlides;
public activeSegment: any = 'time-card-summary'; public activeSegment: any = 'time-card-summary';
public showMore: any = false; 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;
constructor( constructor(
public timeCardService: TimeCardService, public timeCardService: TimeCardService,
public cs: CommonService, public common: CommonService,
public modalController: ModalController public modalController: ModalController,
public sharedData: SharedDataService,
) { } ) { }
ngOnInit() { ngOnInit() {
// this.getShiftType(); this.getTimeCardSummaryDetails();
} }
public segmentChanged(event: any) { public segmentChanged(event: any) {
this.activeSegment = event.detail.value; this.activeSegment = event.detail.value;
if (this.activeSegment === 'time-card-details' && !this.dayHoursData) {
this.getDayHoursTypeDetails();
}
}
public toggleButton() {
this.showMore = !this.showMore;
} }
public getShiftType() { public getDayHoursTypeDetails() {
this.timeCardService.getShiftType().subscribe((result: GetShiftTypeResponse) => { const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
if (this.cs.validResponse(result)) { this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
console.log('umar' + result); 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 = 1;
dayAndHoursReqObj.P_PAGE_LIMIT = 10;
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.dayHoursData = result.GetDayHoursTypeDetailsList;
}
}); });
} }
public toggleButton() { public getTimeCardSummaryDetails() {
this.showMore = !this.showMore; 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);
this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
console.log(this.timeCardSummaryData);
}
});
} }
async openSelectPeriodModal() { async openSelectPeriodModal() {
@ -46,6 +102,27 @@ export class TimeCardDetailsComponent implements OnInit {
component: SelectPeriodComponent, component: SelectPeriodComponent,
cssClass: 'select-period-custom-modal' cssClass: 'select-period-custom-modal'
}); });
modal.onDidDismiss().then(result => {
console.log(result);
this.dateFrom = result.data.selectFromDate;
this.dateTo = result.data.selectToDate;
if (this.dateFrom && this.dateTo) {
this.getDayHoursTypeDetails();
}
});
return await modal.present(); return await modal.present();
} }
slideChanged(ev: any) {}
showShiftDetails(origin: string) {
this.sliderRef.getActiveIndex().then((index: number) => {
console.log(index);
this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin;
console.log(this.selectedShift);
this.sharedData.setSharedData(this.selectedShift, 'selectedShift');
this.common.navigatePage('/time-card/shift-details');
});
}
} }

@ -9,6 +9,7 @@ import { TimeCardPage } from './time-card.page';
import { TimeCardDetailsComponent } from './time-card-details/time-card-details.component'; import { TimeCardDetailsComponent } from './time-card-details/time-card-details.component';
import { HomeComponent } from './home/home.component'; import { HomeComponent } from './home/home.component';
import { SelectPeriodComponent } from './select-period/select-period.component'; import { SelectPeriodComponent } from './select-period/select-period.component';
import { ShiftDetailsComponent } from './shift-details/shift-details.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -22,6 +23,10 @@ const routes: Routes = [
{ {
path: 'time-card-details', path: 'time-card-details',
component: TimeCardDetailsComponent component: TimeCardDetailsComponent
},
{
path: 'shift-details',
component: ShiftDetailsComponent
} }
] ]
} }
@ -38,7 +43,8 @@ const routes: Routes = [
TimeCardPage, TimeCardPage,
HomeComponent, HomeComponent,
TimeCardDetailsComponent, TimeCardDetailsComponent,
SelectPeriodComponent SelectPeriodComponent,
ShiftDetailsComponent
], ],
entryComponents: [ entryComponents: [
SelectPeriodComponent SelectPeriodComponent

@ -852,24 +852,3 @@ color: var(--dark);
// left: 0; // left: 0;
// width: 100%; // width: 100%;
// } // }
.select-period-custom-modal{
margin-top: 120%;
margin-right: 5%;
margin-left: 5%;
border-radius: 10px;
}
// .select-period-custom-modal{
// --height: auto;
// .modal-wrapper{
// width: 90vw;
// .ion-page {
// position: relative;
// contain: content;
// max-height: 90vh;
// .ion-content {
// overflow: auto;
// }
// }
// }
// }
Loading…
Cancel
Save