completed functionality of time card module

MOE_DEV_NEW_TEMPORARY_DESIGN
umasoodch 6 years ago
parent 167973cedb
commit e01c73a092

@ -24,7 +24,7 @@
</ion-text>
</div>
<!-- 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
(click)="openPage(subPage)">
<ion-row>
@ -36,7 +36,7 @@
</ion-col>
</ion-row>
<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-list>
</ion-content>

@ -29,7 +29,7 @@ export class HomeComponent implements OnInit {
openPage(page, index) {
// Reset the content nav to have just this page
// 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);
} else {
if (this.selectedMenu == 0) {
@ -55,10 +55,9 @@ export class HomeComponent implements OnInit {
if (menuEntry.REQUEST_TYPE =='PAYSLIP'){
this.cs.openPayslipPage();
}
if (menuEntry.PROMPT == 'Time And Attendance'){
if (menuEntry.REQUEST_TYPE === 'TIME_CARD') {
this.cs.openTimeCardPage();
}
}
}

@ -1072,7 +1072,7 @@ export class CommonService {
this.nav.navigateForward(["/payslip/home"]);
}
public openTimeCardPage() {
this.nav.navigateForward(["/time-card/home"]);
this.nav.navigateForward(["/time-card/time-card-details"]);
}
public openEarningsPage() {
this.nav.navigateForward(["/payslip/Earnings"]);
@ -1084,6 +1084,10 @@ export class CommonService {
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,23 +1,28 @@
<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 *ngFor="let timeCard of timeCardOptions ; let i = index">
<ion-card (click)="openDetailPage(i)">
<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 class="" >
<ion-row class="">
<ion-col size="4" class="time-card-image">
<img class=""
src="../assets/imgs/time-card/{{timeCard.imageName}}">
<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">
<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">
<ion-col [size]="2">
<img class="time-card-rightIcon"
src="../assets/imgs/time-card/ArrowRight.png">
</ion-col>

@ -12,7 +12,7 @@ ion-card-content {
ion-card {
box-shadow: none !important;
background-color: white;
margin: 10px 30px;
margin-bottom: 15px;
}
ion-header {
background: #f2f2f3;
@ -22,6 +22,11 @@ ion-title{
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;

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

@ -1,51 +1,61 @@
<ion-content>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<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)]="selectFromDate"
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)]="selectToDate"
doneText="Done"
cancelText="Cancel"
></ion-datetime>
</ion-item>
</ion-col>
</ion-row>
</div>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<p>
select-period works!
</p>
<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>
<div class="footer-modal-button">
<button ion-button (click)="dismiss()">
Select Period
</button>
</div>

@ -9,4 +9,22 @@
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;
}

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
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({
selector: 'app-select-period',
@ -7,14 +9,91 @@ import { ModalController } from '@ionic/angular';
styleUrls: ['./select-period.component.scss'],
})
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({
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_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;

@ -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-toolbar class="header-toolbar-new">
<ion-title color="light" >My Time Card</ion-title>
</ion-toolbar>
</ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></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)"
@ -20,390 +22,392 @@
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-button>
</ion-segment>
<div class="ion-padding" *ngIf="activeSegment === 'time-card-summary'">
<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">
245
</ion-col>
</ion-row>
<ion-row>
<ion-col size="8">
Schedule Days
</ion-col>
<ion-col size="4">
156
</ion-col>
</ion-row>
<ion-row>
<ion-col size="8">
Off days
</ion-col>
<ion-col size="4">
79
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="8">
Attended Days
</ion-col>
<ion-col size="4">
163
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="8">
Absent Days
</ion-col>
<ion-col size="4">
0
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="8">
Non Schedule Days
</ion-col>
<ion-col size="4">
0
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="8">
Not Analyzed Days
</ion-col>
<ion-col size="4">
3
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<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 class="">
<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 class="">
<ion-col size="6">
Regular
</ion-col>
<ion-col size="3">
245
</ion-col>
<ion-col size="3">
235
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Planned OT
</ion-col>
<ion-col size="3">
156
</ion-col>
<ion-col size="3">
156
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
On Call
</ion-col>
<ion-col size="3">
79
</ion-col>
<ion-col size="3">
79
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Excess
</ion-col>
<ion-col size="3">
10
</ion-col>
<ion-col size="3">
10
</ion-col>
</ion-row>
<ion-row class="">
<ion-col size="6">
Time Back
</ion-col>
<ion-col size="3">
163
</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>
<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'" class="time-card-details">
<div *ngIf="activeSegment === 'time-card-details' && dayHoursData" class="time-card-details">
<ion-slides #sliderRef (ionSlideDidChange)="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">
<ion-col [size]="12" class="time-card-details-heading-two">
<h2>Today's time card details</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="2">
<!-- <ion-row>
<ion-col [size]="2">
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeIn.png"></span>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Swipe In:</span>
</ion-col>
<ion-col size="4">
<ion-col [size]="4">
06:57
</ion-col>
</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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Swipe Out:</span>
</ion-col>
<ion-col size="4">
<ion-col [size]="4">
05:05
</ion-col>
</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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Total Hours:</span>
</ion-col>
<ion-col size="4">
<ion-col [size]="4">
03:39
</ion-col>
</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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Time Back:</span>
</ion-col>
<ion-col size="4">
03:39
<ion-col [size]="4">
{{dayHours.TIMEBACK_HRS}}
</ion-col>
</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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Remarks:</span>
</ion-col>
<ion-col size="4">
Off Shift
<ion-col [size]="4" style="font-size: 12px;">
{{dayHours.REMARKS}}
</ion-col>
</ion-row>
<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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Shift Hours:</span>
</ion-col>
<ion-col size="4">
09:00
<ion-col [size]="4">
{{dayHours.SCHEDULED_HRS}}
</ion-col>
</ion-row>
<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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Excess Time:</span>
</ion-col>
<ion-col size="4">
00:08
<ion-col [size]="4">
{{dayHours.EXCESS_HRS}}
</ion-col>
</ion-row>
<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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Planned OT:</span>
</ion-col>
<ion-col size="4">
03:00
<ion-col [size]="4">
{{dayHours.PLANNED_OT_HRS}}
</ion-col>
</ion-row>
<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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Late In:</span>
</ion-col>
<ion-col size="4">
00:00
<ion-col [size]="4">
{{dayHours.LATE_IN_HRS}}
</ion-col>
</ion-row>
<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>
</ion-col>
<ion-col size="6">
<ion-col [size]="6">
<span>Early Out:</span>
</ion-col>
<ion-col size="4">
00:00
<ion-col [size]="4">
{{dayHours.EARLY_OUT_HRS}}
</ion-col>
</ion-row>
</ion-grid>
<div class="show-more-less" (click)="toggleButton()">
<span>More Details</span>
<ion-icon slot="icon-only" name="ios-arrow-down"></ion-icon>
</div>
</div>
</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>
</ion-content>
<div class="footer-modal-button">
<div *ngIf="activeSegment === 'time-card-details'" class="footer-modal-button">
<button ion-button (click)="openSelectPeriodModal()">
Select Period
</button>

@ -1,5 +1,6 @@
ion-header{
overflow: hidden;
background: #f2f2f3;
}
ion-content{
--ion-background-color: #f2f2f3;
@ -15,17 +16,14 @@ ion-card {
margin: 10px -15px;
margin-bottom: 20px;
}
ion-header {
background: #f2f2f3;
}
ion-title{
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
text-align: center;
font-family: WorkSans-Bold;
font-size: 18px;
margin-right: 35px;
}
// ion-label {
// color: #A3D077 !important;
// }
.header-toolbar-new{
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
border-bottom-right-radius: 30px;
@ -105,12 +103,16 @@ ion-title{
margin-top: -5px;
margin-left: 10px;
}
.show-more-less{
.dayhours-button-container{
width: 100%;
background: #606061;
text-align: center;
/* margin: 10px; */
padding-top: 20px;
padding-right: 5px;
padding-left: 5px;
}
.dayhours-button{
width: 50%;
height: 35px;
font-size: 15px;
}
/////////////////////////////////////
@ -125,4 +127,7 @@ ion-title{
font-size: 20px;
background: white;
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 { GetShiftTypeResponse } from '../service/models/get-shift-type.response';
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 { 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',
@ -11,34 +15,86 @@ import { SelectPeriodComponent } from '../select-period/select-period.component'
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 = 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(
public timeCardService: TimeCardService,
public cs: CommonService,
public modalController: ModalController
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService,
) { }
ngOnInit() {
// this.getShiftType();
this.getTimeCardSummaryDetails();
}
public segmentChanged(event: any) {
this.activeSegment = event.detail.value;
if (this.activeSegment === 'time-card-details' && !this.dayHoursData) {
this.getDayHoursTypeDetails();
}
}
public toggleButton() {
this.showMore = !this.showMore;
}
public getShiftType() {
this.timeCardService.getShiftType().subscribe((result: GetShiftTypeResponse) => {
if (this.cs.validResponse(result)) {
console.log('umar' + result);
}
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 = 1;
dayAndHoursReqObj.P_PAGE_LIMIT = 10;
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.dayHoursData = result.GetDayHoursTypeDetailsList;
}
});
}
public toggleButton() {
this.showMore = !this.showMore;
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);
this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
console.log(this.timeCardSummaryData);
}
});
}
async openSelectPeriodModal() {
@ -46,6 +102,27 @@ export class TimeCardDetailsComponent implements OnInit {
component: SelectPeriodComponent,
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();
}
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 { HomeComponent } from './home/home.component';
import { SelectPeriodComponent } from './select-period/select-period.component';
import { ShiftDetailsComponent } from './shift-details/shift-details.component';
const routes: Routes = [
{
@ -22,6 +23,10 @@ const routes: Routes = [
{
path: 'time-card-details',
component: TimeCardDetailsComponent
},
{
path: 'shift-details',
component: ShiftDetailsComponent
}
]
}
@ -38,7 +43,8 @@ const routes: Routes = [
TimeCardPage,
HomeComponent,
TimeCardDetailsComponent,
SelectPeriodComponent
SelectPeriodComponent,
ShiftDetailsComponent
],
entryComponents: [
SelectPeriodComponent

@ -852,24 +852,3 @@ color: var(--dark);
// left: 0;
// 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