absence page

production
Sultan Khan 6 years ago
parent a3d58d4b1c
commit 628cc89189

@ -4,11 +4,11 @@ import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { AbsenceListService } from "./service/service.service";
import { IonicModule } from '@ionic/angular';
import { SubmitAbsenceService } from './service/submit.absence.service';
import { AbsencePage } from './absence.page';
import { DatePicker } from '@ionic-native/date-picker/ngx';
import { HomeComponent } from './home/home.component';
import { SubmitAbsenceComponent } from './submit-absence/submit-absence.component';
const routes: Routes = [
{
path: '',
@ -17,6 +17,10 @@ const routes: Routes = [
{
path: 'home',
component: HomeComponent
},
{
path: 'submit-absence',
component: SubmitAbsenceComponent
}
]
}
@ -29,7 +33,7 @@ const routes: Routes = [
IonicModule,
RouterModule.forChild(routes)
],
providers:[AbsenceListService],
declarations: [AbsencePage, HomeComponent]
providers:[AbsenceListService, SubmitAbsenceService, DatePicker],
declarations: [AbsencePage, HomeComponent, SubmitAbsenceComponent]
})
export class AbsencePageModule {}

@ -2,7 +2,7 @@
<ion-toolbar class="header-toolbar">
<ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack"></ion-back-button>
<ion-back-button color="light" class="btnBack" defaultHref=""></ion-back-button>
</ion-buttons>
<ion-buttons slot="end">
<button class="headerBtn" (click)="AccrualBalances()">
@ -111,6 +111,6 @@
</ion-content>
<ion-footer>
<div class="centerDiv">
<ion-button color="customnavy" class="gridBtn" (click)="CreateAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
<ion-button color="customnavy" class="gridBtn" (click)="createAbsence()">{{ts.trPK('absenceList','createAbs')}}</ion-button>
</div>
</ion-footer>

@ -1,16 +1,19 @@
import { Component, OnInit } from "@angular/core";
import { Component, OnInit, ViewChild } from "@angular/core";
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { MenuResponse } from "src/app/hmg-common/services/menu/models/menu-response";
import { MenuService } from "src/app/hmg-common/services/menu/menuservice.service";
import { AbsenceAttahcmentResponse } from "../models/abs.attach.response";
import { AbsenceListService } from "../service/service.service";
import { IonInfiniteScroll } from "@ionic/angular";
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"]
})
export class HomeComponent implements OnInit {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
P_PAGE_NUM: number;
P_PAGE_LIMIT: number;
GetAbsenceTransactionList: any;
@ -26,17 +29,19 @@ export class HomeComponent implements OnInit {
) {}
ngOnInit() {
this.P_PAGE_LIMIT = 50;
this.P_PAGE_NUM = 1;
this.selMenu = this.common.sharedService.getSharedData(
MenuResponse.SHARED_DATA,
true
false
);
this.selEmp = this.common.sharedService.getSharedData(
MenuResponse.SHARED_SEL_EMP,
true
false
);
this.respID = this.common.sharedService.getSharedData(
MenuResponse.SHARED_SEL_RESP_ID,
true
false
);
this.getAbsenceTransaction();
}
@ -124,22 +129,25 @@ export class HomeComponent implements OnInit {
this.IsReachEnd = false;
}
this.GetAbsenceTransactionList.push(vr);
// this.pro.GetVacationRulesList.push(vr);
});
} else {
this.IsReachEnd = true;
}
}
//this.P_PAGE_NUM++;
if (infiniteScroll) infiniteScroll.complete();
// console.log(resFlag);
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
},
Error => console.log(Error),
() => infiniteScroll.complete()
() => this.infiniteScroll.complete()
);
} else {
if (infiniteScroll) infiniteScroll.complete();
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
}
createAbsence() {
this.common.openSubmitAbsencePage();
}
}

@ -0,0 +1,66 @@
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 { Observable } from 'rxjs';
import {AbsenceTransaction} from '../models/absence.transaction'
@Injectable()
export class SubmitAbsenceService {
public static submitAbsence='Services/ERP.svc/REST/SUBMIT_ABSENCE_TRANSACTION';
public static getAbsDffStructure='Services/ERP.svc/REST/GET_ABSENCE_DFF_STRUCTURE';
public static getAbsenceTypes='Services/ERP.svc/REST/GET_ABSENCE_ATTENDANCE_TYPES';
public static getCalc='Services/ERP.svc/REST/CALCULATE_ABSENCE_DURATION';
public static validateAbsence='Services/ERP.svc/REST/VALIDATE_ABSENCE_TRANSACTION';
public static getSetValue='Services/ERP.svc/REST/GET_VALUE_SET_VALUES';
public static getDefaultValue='Services/ERP.svc/REST/GET_DEFAULT_VALUE';
public static resubmitAbsence='Services/ERP.svc/REST/RESUBMIT_ABSENCE_TRANSACTION'
constructor(
public api: ConnectorService,
public authService: AuthenticationService,
) { }
public submitAbsence(absence: any, onError?: any, errorLabel?: string): Observable<any> {
const request = absence;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.submitAbsence, request, onError, errorLabel);
}
public getAbsenceDffStructure(absence: any, onError?: any, errorLabel?: string): Observable<any> {
const request = absence;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.getAbsDffStructure, request, onError, errorLabel);
}
public getAbsenceType(absence: any, onError?: any, errorLabel?: string): Observable<any> {
const request = absence;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.getAbsenceTypes, request, onError, errorLabel);
}
public getCalc(absence: any, onError?: any, errorLabel?: string): Observable<any> {
const request = absence;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.getCalc, request, onError, errorLabel);
}
public validateAbsenceTransaction (validateAbsReq: any, onError?: any, errorLabel?: string): Observable<any> {
const request = validateAbsReq;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.validateAbsence, request, onError, errorLabel);
}
public getSetValue(SetValueReq: any, onError?: any, errorLabel?: string): Observable<any> {
const request = SetValueReq;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.getSetValue, request, onError, errorLabel);
}
public getDefaultValue(DefaultValueReq: any, onError?: any, errorLabel?: string): Observable<any> {
const request = DefaultValueReq;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.getDefaultValue, request, onError, errorLabel);
}
public resubmitAbsence(absence: any, onError?: any, errorLabel?: string): Observable<any> {
const request = absence;
this.authService.authenticateRequest(request);
return this.api.post(SubmitAbsenceService.resubmitAbsence, request, onError, errorLabel);
}
}

@ -0,0 +1,60 @@
<ion-header >
<ion-toolbar class="header-toolbar">
<ion-title color="light"> {{ts.trPK('submitAbsence','submitAbsence')}}</ion-title>
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref=""></ion-back-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-item>
<ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </ion-label>
<ion-select (ionChange)="calcDay()" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required>
<!-- let item of AbsenceType; let i=index; -->
<ion-select-option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
<ion-datetime (ionChange)="calcDay()" [(ngModel)]="startDate" min="1900" max="2100" displayFormat="MMM/DD/YYYY" placeholder="MM/DD/YYYY" required></ion-datetime>
</ion-item>
<ion-item *ngIf="hoursOrDay!='D'">
<ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','startTime')}} </ion-label>
<ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" required></ion-datetime>
</ion-item>
<ion-item>
<ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','endDate')}}</ion-label>
<ion-datetime (ionChange)="calcDay()" [(ngModel)]="endDate" min="1900" max="2100" displayFormat="MMM/DD/YYYY" placeholder="MM/DD/YYYY" required ></ion-datetime>
</ion-item>
<ion-item *ngIf="hoursOrDay!='D'">
<ion-label class="colBold requiredClass">{{ts.trPK('submitAbsence','endTime')}}</ion-label>
<ion-datetime displayFormat="HH:mm" [(ngModel)]="endTime" required></ion-datetime>
</ion-item>
<ion-item>
<ion-label class="colBold" >{{ts.trPK('submitAbsence','totalDays')}} </ion-label>
<ion-label end style="text-align: center;">{{totalDays}}</ion-label>
</ion-item>
<ion-item>
<ion-input placeholder="{{ts.trPK('searchForReplacment','searchForReplacment')}}" type="text" [(ngModel)]="employeeSel">
</ion-input>
<button ion-button class="search-button" icon-only (click)="SearchReplacment()" clear type="button" item-end >
<ion-icon name="search" ></ion-icon>
</button>
</ion-item>
<ion-item>
<ion-label class="colBold">{{ts.trPK('submitAbsence','comments')}}</ion-label>
<ion-textarea [(ngModel)]="absComments"></ion-textarea>
</ion-item>
<div id="dynamic-abs-container" >
</div>
</ion-content>
<ion-footer>
<div class="centerDiv">
<ion-button color="customnavy" (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button>
</div>
</ion-footer>

@ -0,0 +1,5 @@
.search-button{
background: transparent;
font-size: 25px;
color: #7F8C8D;
}

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

@ -3,7 +3,7 @@
<ion-grid class="customGrid">
<ion-row>
<ion-col class="colPad">
<ion-img class="centerDiv" src="../assets/imgs/CS.png"></ion-img>
<img class="centerDiv" src="../assets/imgs/CS.png" />
</ion-col>
</ion-row>
<ion-row>

@ -35,9 +35,14 @@ ion-col.colPad.col {
padding-top: 20px;
}
ion-img {
width: 170px;
height: 170px;
img.centerDiv {
width: 180px;
height: 140px;
contain: strict;
min-width: 20px;
min-height: 20px;
display: block;
margin-top: 30px;
background: var(--light);
}

File diff suppressed because it is too large Load Diff

@ -33,7 +33,7 @@
<div>
<ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
<ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
<ion-avatar item-start>
<ion-avatar slot="start">
<!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
<img [src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
</ion-avatar>

@ -45,7 +45,7 @@ export class DateTimeInput extends UiElement {
"<ion-item>" +
" <ion-label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
// " <div class='daynamicForm-DateTime " + disaledClass + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
"<ion-datetime displayFormat='DD/MM/YYYY' value=" + this.value + " id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
"<ion-datetime displayFormat='DD/MM/YYYY' value='" + this.value + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
// " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
// " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
// " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+

@ -41,7 +41,7 @@ export class DateInput extends UiElement {
"<ion-item>" +
" <ion-label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</ion-label>" +
// " <div class='daynamicForm-DateTime " + disaledClass + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + ">" + this.value + "</div>" +
"<ion-datetime displayFormat='DD/MM/YYYY' value=" + this.value + " id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
"<ion-datetime displayFormat='DD/MM/YYYY' value='" + this.value + "' id='" + this.elementId + "' data-dtvalue='" + this.value + "' " + this.disabled + "></ion-datetime>" +
// " <input class='daynamicForm-DateTime' type='text' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" (click)='showDateTimePicker()'/>"+
// " <input class='daynamicForm-DateTime' type='date' id='" + this.elementId + "' value='" + dateValue+ "' "+this.disabled+" />"+
// " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "Time' value='" + timeValue + "' "+this.disabled+" />"+

@ -23,19 +23,19 @@ export class SelectInput extends UiElement {
if (this.disabled == "N") { this.disabled = "disabled" } else { this.disabled = "" }
if (this.hidden == "N") { this.hidden = "display:none;" } else { this.hidden = "" }
const template =
// "<div class='custom-text-area-element' style='" + this.hidden + "'>" +
// "<label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</label>" +
// "<select class='daynamicForm-Select' id='" + this.elementId + "' " + this.disabled + ">" +
// "<option value='" + this.value + "' >" + this.value + "</option>" +
// "</select>" +
// "</div> ";
"<div class='custom-text-area-element' style='" + this.hidden + "'>" +
"<label class='daynamicForm-Label " + requiredClass + "' id='title' >" + this.label + "</label>" +
"<select class='daynamicForm-Select' id='" + this.elementId + "' " + this.disabled + ">" +
"<option value='" + this.value + "' >" + this.value + "</option>" +
"</select>" +
"</div> ";
"<ion-item style='" + this.hidden + "'>" +
"<ion-label id='title' >" + this.label + "</ion-label>" +
"<ion-select id='" + this.elementId + "' " + this.disabled + ">" +
"<ion-select-option value='" + this.value + "' >" + this.value + "</ion-select-option>" +
"</ion-select>" +
"</ion-item> ";
// "<ion-item style='" + this.hidden + "'>" +
// "<ion-label id='title' >" + this.label + "</ion-label>" +
// "<ion-select id='" + this.elementId + "' " + this.disabled + ">" +
// "</ion-select>" +
// "</ion-item> ";
return template;
}

@ -297,6 +297,10 @@
"en": "Done successfully",
"ar": "تم بنجاح"
},
"next":{
"en":"Next",
"ar":"التالي"
},
"other": {
"en": "Other",
"ar": "أخري"
@ -1073,5 +1077,78 @@
"en": "My Requests",
"ar": "طلباتي"
}
},
"submitAbsence": {
"submitAbsence": {
"en":"Submit Absence",
"ar":"رفع إجازة"
},
"absenceStatus": {
"en": "Absence Status:",
"ar":"حالة الإجازة:"
},
"absenceType": {
"en": "Absence Type",
"ar":"نوع الإجازة"
},
"duration": {
"en": "Duration:",
"ar":"المدة:"
},
"startDate": {
"en": "Start Date",
"ar": "تاريخ البداية"
},
"startTime": {
"en":"Start Time",
"ar":"وقت البداية"
},
"endDate": {
"en": "End Date",
"ar":"تاريخ النهاية"
},
"endTime": {
"en":"End Time",
"ar": "وقت النهاية"
},
"totalDays": {
"en":"Total Days:",
"ar":"مجموع الأيام:"
},
"calculateDays": {
"en":"Calculate Days",
"ar":"حساب الأيام"
},
"search": {
"en":"Search",
"ar": "بحث"
},
"expectedReturnToWork": {
"en":"Expected Return to work",
"ar":"العودة المتوقعة إلى العمل"
},
"comments": {
"en":"Comments",
"ar": "ملاحظات"
},
"clear": {
"en": "Clear",
"ar":"إزالة"
},
"enterSDate": {
"en":"Please select the start date",
"ar":"ادخل تاريخ البداية"
},
"enterEDate": {
"en":"Please select the end date",
"ar":"ادخل تاريخ النهاية"
},
"selAbsType": {
"en":"Please select absence type",
"ar":"اختر نوع الإجازة"
}
}
}

@ -514,8 +514,8 @@ img.flipImg{
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
-webkit-appearance: none;
-moz-appearance: none;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
@ -556,7 +556,7 @@ img.flipImg{
:root[dir="rtl"]{
left: 5px;
}
content: "";
z-index: 98;
}
@ -745,4 +745,4 @@ color: var(--dark);
margin-top: 0.42cm;
width:100%;
margin-left: 0.4cm;
}
}

Loading…
Cancel
Save