completed functionality of time card module
parent
167973cedb
commit
e01c73a092
@ -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>
|
|
||||||
<p>
|
|
||||||
select-period works!
|
|
||||||
</p>
|
|
||||||
</ion-content>
|
|
||||||
<div class="footer-modal-button">
|
|
||||||
<button ion-button (click)="dismiss()">
|
|
||||||
Select Period
|
|
||||||
</button>
|
|
||||||
</div>
|
</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,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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue