Merge branch 'MOHEMM-Q2-DEV' into enad-Q1

MOHEMM-SFH-COLORS
enadhilal 5 years ago
commit 512465964d

@ -3,15 +3,21 @@
[headerText]="'submitAbsence, submitAbsence' | translate">
</app-generic-header>
<ion-content padding>
<ion-item class='dynamicField'>
<content padding>
<div [ngClass]=" direction === 'en' ? 'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
<label class="label" position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','absenceType')}} </label>
<select class="label-Select" (ionChange)="calcDay()" [(ngModel)]="absenceType" (ionChange)="onTypeAbsenceChange()" required>
<option value= "{{item.ABSENCE_ATTENDANCE_TYPE_ID}}" *ngFor="let item of absenceTypeList; let i=index;">{{item.ABSENCE_ATTENDANCE_TYPE_NAME}} </option>
</select>
</div>
<!-- <ion-item class='dynamicField'>
<ion-label position='floating' 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>
<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-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-item class='dynamicField'>
<ion-label position='floating' class="colBold requiredClass">{{ts.trPK('submitAbsence','startDate')}} </ion-label>
@ -52,7 +58,7 @@
</ion-item>
<div id="dynamic-abs-container" >
</div>
</ion-content>
</content>
<ion-footer>
<div class="centerDiv">
<ion-button class="confirmEitOkButton" (click)="validateAbcenseTransaction()">{{ts.trPK('general','next')}}</ion-button>

@ -21,3 +21,94 @@
}
.label-Select{
color: var(--dark);
font-size: 15px;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
padding: 1px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
// margin-left: 20px;
margin-left: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
:root[dir="ltr"]{
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-right: 20px;
}
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-left: 20px;
}
}
.label{
font-size: 16px;
// margin-left: 15px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/* font-size: inherit; */
// text-overflow: ellipsis;
// white-space: nowrap;
white-space: normal;
// padding-top: 10px;
padding: 5px 0px;
padding-left: 10px !important;
margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}
.Field-en{
border-radius: 30px;
border: 1px solid #a2a5a6!important;
margin-bottom: 20px;
padding-left: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}
.Field-ar{
border-radius: 30px;
border: 1px solid #a2a5a6!important;
margin-bottom: 20px;
padding-right: 20px !important;
padding-top: 6px !important;
color: #999999 !important;
}

@ -45,6 +45,15 @@
</ion-label>
</ion-item>
<ion-item [hidden]="TeamFlag!='true'" (click)="openMyRequestPage()">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 14px !important;" src="../assets/imgs/my_team_icon.png" item-left>
</ion-thumbnail>
<ion-label class="profile">
HR REQUEST
</ion-label>
</ion-item>
<!-- <ion-item (click)="openChangePassword()"> -->
<ion-item (click)="openChangePassword()">

@ -178,6 +178,11 @@ export class AppComponent implements OnInit {
this.cs.openMyTeamPage();
}
public openMyRequestPage() {
this.cs.openMyRequestPage();
this.menu.toggle();
}
public profile() {
this.cs.openEditProfile();
this.menu.toggle();

@ -110,6 +110,7 @@ import { ChartModule } from 'primeng/chart';
import { GenericHeaderComponent } from './ui/generic-header/generic-header.component';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { AttendanceOptionsComponent } from '../home/attendance-options/attendance-options.component';
import { CardCalendarComponent } from './ui/card-calendar/card-calendar.component';
@NgModule({
imports: [
@ -192,7 +193,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc
DateInfoModalComponent,
Modal,
GenericHeaderComponent,
AttendanceOptionsComponent
AttendanceOptionsComponent,
CardCalendarComponent
],
exports: [
FabButtonComponent,
@ -262,7 +264,8 @@ import { AttendanceOptionsComponent } from '../home/attendance-options/attendanc
FileUploadModule,
Modal,
GenericHeaderComponent,
AttendanceOptionsComponent
AttendanceOptionsComponent,
CardCalendarComponent
],
providers: [
AttendScanService,

@ -1118,6 +1118,13 @@ public getMonthNameAr(value: number): string {
public openMyTeamDetailPage() {
this.nav.navigateForward(['/my-team/details']);
}
public openMyRequestPage() {
this.nav.navigateForward(['/my-team/my-request']);
}
public openHRRequestPage() {
this.nav.navigateForward(['/my-team/hr-request']);
}
public openPage(link: string) {
this.nav.navigateForward([link]);

@ -27,13 +27,13 @@ export class ConnectorService {
public static retryTimes = 0;
public static timeOut = 120 * 1000;
public static host = 'https://uat.hmgwebservices.com/';
//public static host = 'https://hmgwebservices.com/';
// public static host = 'https://uat.hmgwebservices.com/';
public static host = 'https://hmgwebservices.com/';
constructor(public httpClient: HttpClient,
public cs: CommonService,
private events: Events,
public ts: TranslatorService) { }
public cs: CommonService,
private events: Events,
public ts: TranslatorService) {}
public post(
service: string,
@ -98,18 +98,18 @@ export class ConnectorService {
public postNoLoad(service: string, data: any, onError: any, errorLabel?: string): Observable<any> {
return this.httpClient
.post<any>(
.post<any>(
ConnectorService.host + service,
data,
ConnectorService.httpOptions)
.pipe(
timeout(ConnectorService.timeOut),
retry(ConnectorService.retryTimes),
tap((res) => {
this.handleResponse(res, onError, errorLabel, true);
}, (error) => {
this.handleError(error, onError, errorLabel, true);
}));
.pipe(
timeout(ConnectorService.timeOut),
retry(ConnectorService.retryTimes),
tap((res) => {
this.handleResponse(res, onError, errorLabel, true);
}, (error) => {
this.handleError(error, onError, errorLabel, true);
}));
}
// absolute url connection
@ -198,23 +198,23 @@ export class ConnectorService {
let deviceToken = localStorage.getItem('deviceToken');
const requestGetLoginInfo = {
DeviceType: this.cs.getDeviceType(),
DeviceToken: deviceToken
DeviceType: this.cs.getDeviceType(),
DeviceToken: deviceToken
};
this.getLoginInfo(requestGetLoginInfo, () => { }, this.ts.trPK('general', 'ok')).subscribe(res => {
this.getLoginInfo(requestGetLoginInfo, () => {}, this.ts.trPK('general', 'ok')).subscribe(res => {
if (this.cs.validResponse(res)) {
if (res.Mohemm_GetMobileLoginInfoList.length > 0) {
this.cs.sharedService.setSharedData(res.Mohemm_GetMobileLoginInfoList[0], 'imei-user-data');
const user = true;
this.events.publish('user', user);
this.cs.openLogin();
} else {
const user = false;
this.events.publish('user', user);
this.cs.openLogin();
}
} else { }
if (res.Mohemm_GetMobileLoginInfoList.length > 0) {
this.cs.sharedService.setSharedData(res.Mohemm_GetMobileLoginInfoList[0], 'imei-user-data');
const user = true;
this.events.publish('user', user);
this.cs.openLogin();
} else {
const user = false;
this.events.publish('user', user);
this.cs.openLogin();
}
} else {}
});
}
@ -257,7 +257,7 @@ export class ConnectorService {
this.cs.stopLoading();
this.cs.presentAcceptDialog(result.ErrorEndUserMessage, () => {
console.log("presentAcceptDialog");
this.cs.sharedService.clearAll();
this.cs.sharedService.clearAll();
// this.cs.openLogin();
this.getLastLoginInfo();
});

@ -0,0 +1,6 @@
<div class="main-container" [ngStyle]="active === true ? {'color': color} : {}">
<div class="main-container-radius" [ngStyle]="active === true ? {'color': '#ffffff'} : {'color': color}"></div>
<span class="text-span" [ngStyle]="active === true ? {'color': '#269DB8'} : {}">{{text}}</span>
</div>

@ -0,0 +1,20 @@
.main-container{
width: 47px;
position: relative;
margin-left: 9px;
}
.main-container-radius{
position: absolute;
width: 30px;
}
.number-span{
display: block;
}
.text-span{
font-size: 13px;
}

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

@ -0,0 +1,18 @@
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-card-calendar',
templateUrl: './card-calendar.component.html',
styleUrls: ['./card-calendar.component.scss'],
})
export class CardCalendarComponent implements OnInit {
@Input() text: string;
@Input() active: boolean;
@Input() color: string;
constructor() { }
ngOnInit() {}
}

@ -14,7 +14,8 @@
<span class="title">{{title}}</span>
</span>
<a [ngClass]="employeePhoneNumber == '' ? 'disable-phone image-container' : 'image-container'" href="tel:{{employeePhoneNumber}}">
<img src="../assets/imgs/green_call_icon.png" >
<!-- <img src="../assets/imgs/green_call_icon.png" > -->
<img src="../assets/imgs/call.svg" >
</a>
</div>
<!-- <div class="swipe-information">

@ -1,16 +1,26 @@
.team-member-container{
// background: white;
// border-radius: 100px 20px 20px 100px;
// margin-top: 15px;
// font-family: WorkSans-Regular;
// border: 1px solid #ccc;
// border-radius: 15px;
// padding-bottom: 8px;
background: white;
border-radius: 100px 20px 20px 100px;
margin-top: 15px;
/* margin-top: 2px; */
font-family: WorkSans-Regular;
border: 1px solid #ccc;
border-radius: 15px;
padding-bottom: 8px;
margin-bottom: 7px;
}
.user-image-container{
position: relative;
width: 70px;
height: 70px;
display: block;
margin: 0 auto;
// .user-image-container{
// position: relative;
// width: 70px;
// height: 70px;
// display: block;
// margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
@ -26,19 +36,24 @@
// &.present:before{
// background-color: green !important;
// }
}
// }
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
// overflow: hidden;
// position: relative;
// display: block;
// width: 100%;
// height: 100%;
// border-radius: 80px;
// border: 1px solid #ccc;
// margin: 0px auto 6px;
img {
width: 100%;
max-height: 100%;
// width: 100%;
// max-height: 100%;
width: 74%;
max-height: 74%;
margin-top: 4px;
margin-left: 6px;
}
}
@ -48,11 +63,14 @@
.name{
font-size: 16px;
color: black;
margin: 0;
// margin: 0;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-left: -10px;
margin-top: -5px;
font-family: 'WorkSans-Bold';
}
.title{
font-size: 13px;
@ -62,6 +80,9 @@
white-space: nowrap;
overflow: hidden;
display: block;
margin-left: -10px;
margin-top: -6px;
color: black;
}
}
.image-container{

@ -9,17 +9,101 @@
<ion-content>
<div class="contentBg">
<div class="result-graph" style="padding-top: 12px;">
<div class="result-graph" >
<div class="user-info">
<div class="user-image-container">
<div>
<img style="height: 18px; margin-left: 23px;" src="../assets/imgs/fav.svg">
<!-- <ion-col><img src="../assets/imgs/fav filled.svg"></ion-col> -->
</div>
<div class="user-image">
<img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
<div style="margin-right: 16px;" slot="end" >
<a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}"></a>
<img src="../assets/imgs/call-o.svg"></div>
<!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/profile.svg">
</a> -->
</div>
<div style="margin-top: 18px;">
<h1>{{employee.EMPLOYEE_NAME}}</h1>
<span>{{employee.JOB_NAME}}</span>
<span>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
<!-- <span>{{employee.JOB_NAME}}</span> -->
</div>
<div >
<ion-row>
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{employee.JOB_NAME}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div>
</div>
<div class="user-actions">
<div >
<ion-row>
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label> Team Members</ion-label> -->
<img class="imgSize" src="../assets/imgs/profile.svg">
</ion-segment-button>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img (click)="getMenuEntries(employee)" class="imgSize" src="../assets/imgs/create-req.svg">
<!-- <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label> -->
</ion-segment-button>
<ion-segment-button
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/view-attendance.svg">
</ion-segment-button>
<ion-segment-button
value="Team Members"
[ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
<!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
<img class="imgSize" src="../assets/imgs/team-members.svg">
</ion-segment-button>
</ion-segment>
</ion-row>
</div>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="3">
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','profile-details')}}</span>
</div>
</ion-col>
<ion-col [size]="3" (click)="getMenuEntries(employee)">
<div class="action-button col-button">
<span>{{ts.trPK('vacation-rule','create-request')}}</span>
</div>
</ion-col>
<ion-col [size]="3" >
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','view-attendence')}} </span>
</div>
</ion-col>
<ion-col [size]="3" >
<div class="action-button col-button">
<span>{{ts.trPK('myTeam','team-members')}}</span>
</div>
</ion-col>
</ion-row>
</div>
<!-- <div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="4">
<div class="action-button col-button">
@ -46,10 +130,10 @@
</div>
</ion-col>
</ion-row>
</div>
</div> -->
</div>
<div class="segments-container">
<!-- <div class="user-actions">
<ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
@ -57,36 +141,49 @@
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
<ion-label>{{ts.trPK('attendance','attendance')}}</ion-label>
<img src="../assets/imgs/days.svg">
</ion-segment-button>
<ion-segment-button
value="Team Members"
[ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']">
<ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label>
<img src="../assets/imgs/days.svg">
</ion-segment-button>
<ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
<ion-label> {{ts.trPK('general','about')}}</ion-label>
<ion-label> Team Members</ion-label>
<img src="../assets/imgs/profile.svg">
</ion-segment-button>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img src="../assets/imgs/create_request_icon.png">
<ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label>
</ion-segment-button>
</ion-segment>
</div>
</div> -->
<!-- <div *ngIf="activeSegment === 'create-request'">
</div> -->
<div *ngIf="activeSegment === 'Attendance'">
<div>
<p style="margin-bottom: 1px;">
<div class="attendence">
<p class="attendence-text">
{{ts.trPK('myTeam','todayAttendance')}}
</p>
<ion-row style="margin: 0 -5px;">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','check-in')}}</span>
<span style="color: green; ">{{ts.trPK('myTeam','check-in')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','check-out')}}</span>
<span style="color: red; ">{{ts.trPK('myTeam','check-out')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div>
@ -98,16 +195,54 @@
</div>
</ion-col>
</ion-row>
<!-- <ion-row *ngIf="attendanceTrackingList.stats == '' || attendanceTrackingList.stats == '' "> Hello </ion-row>
</div> -->
</div>
<div *ngIf="showAttendence" class="result-graph-attendence">
<div >
<ion-row style="margin-top: 8px; margin-left: 12px;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-days')}}</label>
<img src="../assets/imgs/view-days.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
<!--
<ion-row *ngIf="direction == 'en'">
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} {{year}}</span>
<span class="month-year-span">{{month}} </span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
@ -119,72 +254,137 @@
<ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{year}} {{month}}</span>
<span class="month-year-span">{{month}}</span>
</ion-col>
<ion-col [size]="2" style="text-align: left;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
</ion-row> -->
</div>
</div>
<div class="result-graph">
<div>
<span [ngClass]="direction == 'en' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
</div>
<div style="position: relative;">
<div class="label-container">
<div class="green-label-container">
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
<div>
<ion-row class="attendance-summary">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="2">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
</div>
<div class="blue-label-container">
<span class="span-one">{{ts.trPK('attendance','absent')}}</span>
<span class="span-two">{{absentDays}}</span>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData.NOT_ANALYZED_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
</div>
<div style="position: relative;">
<div class="label-container">
<ion-row>
<label class="green-label-container"> </label>
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</ion-row>
</div>
<div class="label-container">
<ion-row>
<label class="blue-label-container"> </label>
<span class="spa-one">{{ts.trPK('attendance','absent')}}</span>
<span class="spa-two">{{absentDays}}</span>
</ion-row>
</div>
<div class="graph-container">
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options" ></p-chart>
</div>
</div>
</div>
<!-- //////////////////////////////////CALENDAR/////////////////////////////////////////////////////// -->
<div *ngIf="!showAttendence">
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<div>
<ion-row style="margin-top: 8px; margin-left: 12px;">
<ion-col [size]="8">
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
</ion-col>
<ion-col [size]="4">
<ion-row>
<button (click)="showCalender()" style="background: white; margin-left: 15px; margin-top: 6px;">
<label class="stats" >{{ts.trPK('attendance-tracking','view-stats')}}</label>
<img src="../assets/imgs/view-stats.svg">
</button>
</ion-row>
</ion-col>
</ion-row>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
<ion-row class="attendance-summary">
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData.NOT_ANALYZED_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
<!-- <ion-row *ngIf="direction == 'en'">
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} </span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<ion-row *ngIf="direction == 'ar'">
<ion-col [size]="2" style="text-align: right;">
<ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}}</span>
</ion-col>
<ion-col [size]="2" style="text-align: left;">
<ion-icon *ngIf="currentMonthName !== month" [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row> -->
</div>
</div>
<app-circle-calendar
[currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
@ -192,11 +392,18 @@
(currentYear)=changeYear($event)>
</app-circle-calendar>
</div>
</div>
</div>
<div *ngIf="activeSegment === 'Team Members'">
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<div style="margin-top: -23px;">
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div class="number"><p class="numberEmp">{{EmpTotal}}</p></div></ion-col>
</ion-row>
</div>
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
@ -214,16 +421,16 @@
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div>
</div> -->
<div *ngIf="isSearch">
<!-- <div *ngIf="isSearch">
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
<span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
</ion-row>
</div>
</div> -->
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
<app-employee-information
@ -234,6 +441,7 @@
(onGetDetails)="getDetails(i)">
</app-employee-information>
</ng-container>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
@ -241,12 +449,15 @@
</div>
<div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
<ion-row>
<ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}">
<ion-row style=" padding-left: 13px;">
<!-- <ion-col [size]="6" [ngStyle]="direction == 'en' ? {'border-right': '1px solid #ccc'} : {'border-left': '1px solid #ccc'}">
<h2>{{ts.trPK('userProfile','empNo')}}</h2>
<p>{{employee.EMPLOYEE_NUMBER}}</p>
</ion-col> -->
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col>
<ion-col [size]="6">
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
</ion-col>
@ -270,10 +481,10 @@
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{employee.PAYROLL_NAME}}</p>
</ion-col>
<ion-col [size]="12">
<!-- <ion-col [size]="12">
<h2>{{ts.trPK('userProfile','orgEmail')}}</h2>
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
</ion-col>
</ion-col> -->
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{employee.POSITION_NAME}}</p>

@ -32,11 +32,19 @@ ion-title{
text-align: center;
margin-bottom: 15px;
.user-image-container{
position: relative;
width: 80px;
height: 80px;
display: block;
margin: 0 auto;
position: relative;
width: 100%;
height: 24px;
justify-content: space-between;
display: flex;
margin: 0 auto;
align-items: center;
}
// position: relative;
// width: 80px;
// height: 80px;
// display: block;
// margin: 0 auto;
// &:before{
// position: absolute;
// content: "";
@ -53,16 +61,27 @@ ion-title{
// background-color: green !important;
// }
}
@media screen and (min-width: 1px) and (max-width:767px){
.user-image{
overflow: hidden;
position: relative;
display: block;
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
margin: 0px auto 6px;
}
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
/* border: 1px solid #ccc; */
margin-top: -125px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.user-image{
position: relative;
display: block;
width: 30%;
height: 100%;
border-radius: 80px;
margin-bottom: 371px;
}}
h1{
margin: 0;
padding: 0;
@ -71,18 +90,20 @@ ion-title{
margin-bottom: 4px;
}
span{
font-size: 14px;
font-size: 11px;
display: block;
color: #888
// color: #888
}
}
$actionBtnSize : 36px;
.user-actions{
text-align: center;
.action-button{
font-size: 11px;
white-space: nowrap;
color: #888;
font-weight: bold;
// white-space: nowrap;
// color: #888;
.action-button-icon{
width: $actionBtnSize;
height: $actionBtnSize;
@ -104,19 +125,24 @@ ion-title{
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
padding: 15px;
border-bottom: 1px solid #ccc;
// border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
font-family: WorkSans-Bold;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
}
p{
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
}
}
@ -128,28 +154,80 @@ ion-title{
color: black;
}
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
@media screen and (min-width: 1px) and (max-width:767px){
.active-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
height: 30% !important;
min-height: 36px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background-color: #269DB8;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.active-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #269DB8 !important;
padding-left: 17px;}}
@media screen and (min-width: 1px) and (max-width:767px){
.normal-Segment {
width: 11%;
max-width: 11%;
min-width: 11%;
height: 30% !important;
min-height: 36px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 22px;
margin-left: 22px;
background: #414040 !important;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.normal-Segment{
width: 11%;
max-width: 11%;
min-width: 11%;
height: 56% !important;
min-height: 68px;
padding-right: -10px;
border-radius: 50% !important;
margin-right: 62px;
margin-left: 45px;
background: #414040 !important;
padding-left: 17px;}}
@media screen and (min-width: 1px) and (max-width:767px){
.imgSize{
position: absolute;
/* right: 15px; */
top: 0;
bottom: 0;
left: 7px;
margin: auto;
height: 18px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.imgSize{position: absolute;
top: 0;
bottom: 0;
left: 9px;
margin: auto;
height: 28px;}}
.colum-container{
padding: 15px;
border-bottom: 1px solid #ccc;
@ -207,7 +285,8 @@ ion-title{
/////////////////////////////////////////////////////// Attendance ///////////////////////
.header{
margin-top: 20px;
// margin-top: 20px;
margin-top: 1px;
}
.slidPrev{
@ -244,14 +323,47 @@ ion-title{
/* margin-left: 136px; */
margin-right: -251px;
}
@media screen and (min-width: 1px) and (max-width:767px){
.result-graph {
position: relative;
background: white;
margin-top: 20px;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 56px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 89px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 114px !important;
}}
.result-graph-attendence {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #ccc;
}
.request-heading {
@ -273,7 +385,7 @@ ion-title{
padding: 0;
margin: 0;
position: absolute;
left: 50%;
left: 85%;
top: 50%;
display: block;
text-align: center;
@ -293,8 +405,12 @@ ion-title{
}
}
.today-graph {
width: 100%;
// width: 100%;
max-height: 4cm;
display: block;
height: 132px;
width: 264px;
margin-left: 154px;
}
.green-label{
@ -359,7 +475,10 @@ ion-title{
.attendance-information{
background: white;
border-radius: 20px;
padding: 10px;
padding: 9px;
font-weight: bolder;
// border-right: 1px solid rgb(221, 221, 221);
@media screen and (min-width: 300px) and (max-width:359px) {
h2{
padding: 0;
@ -369,45 +488,100 @@ ion-title{
span{
font-size: 9px;
}
}
@media screen and (min-width: 360px) {
h2{
padding: 0;
margin: 0;
font-size: 18px;
font-size: 14px;
}
span{
font-size: 11px;
margin-bottom: 3px;
}
}
}
.month-year-span{
font-size: 20px;
font-family: WorkSans-Bold;
font-size: 16px;
// font-family: WorkSans-Bold;
font-weight: bold;
}
.green-label-container{
border-top: 5px solid #269DB8;
padding: 1px 0px;
margin: 15px 0px
// border-top: 5px solid #269DB8;
// padding: 1px 0px;
// margin: 15px 0px
width: 12px;
height: 12px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
}
.blue-label-container{
border-top: 5px solid #292F42;
padding: 1px 0px;
margin: 15px 0px
// border-top: 5px solid #292F42;
// padding: 1px 0px;
// margin: 15px 0px
width: 12px;
height: 12px;
padding-right: -10px;
border-radius: 100%;
background-color: #292F42;
margin-top: 30px;
}
.span-one{
// display: block;
// font-size: 12px;
// color: black;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: -2px;
font-weight: bold;
}
.span-two{
// display: block;
// font-size: 22px;
display: block;
font-size: 22px;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: -2px;
font-weight: bold;
font-family: WorkSans-Bold;
}
.spa-one{
// display: block;
// font-size: 12px;
// color: black;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: 28px;
font-weight: bold;
}
.spa-two{
// display: block;
// font-size: 22px;
display: block;
font-size: 12px;
color: black;
margin-left: 6px;
margin-top: 28px;
font-weight: bold;
font-family: WorkSans-Bold;
}
.graph-container{
margin-left: -50px;
@ -416,10 +590,12 @@ ion-title{
}
.label-container{
position: absolute;
width: 20%;
right: 30px;
// width: 20%;
// right: 30px;
top: 50%;
margin-top: -60px;
margin-top: -27px;
left: 20px;
}
.attendance-summary .attendance-information {
span{
@ -428,8 +604,10 @@ ion-title{
line-height: 14px;
}
h2{
text-align: right;
font-family: WorkSans-Bold;
// text-align: right;
// font-family: WorkSans-Bold;
font-weight: bolder;
font-size: 13px;
}
}
@ -437,8 +615,10 @@ ion-title{
.calendar-container{
background: white;
margin-bottom: 100px;
margin-top: 20px;
margin-top: 10px;
border-radius: 20px;
border: 1px solid #ccc;
padding-bottom: 25px;
span{
text-align: left;
display: block;
@ -462,4 +642,76 @@ ion-title{
}
.Boldtext{
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.attendence{
position: relative;
background: white;
border-radius: 20px;
border: 1px solid #ccc;
}
.attendence-text{
margin-bottom: 1px;
margin-left: 10px;
font-family: WorkSans-Bold;
font-size: 16px;
}
.stats{
color: #289DB8; font-size: 9px;
margin-right: 5px;
font-family: 'WorkSans-Bold';
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
}
.number{
width: 20px;
height: 20px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 26px;
}
.numberEmp{
color: white;
font-size: 13px;
font-weight: bolder;
margin-left: 6px;
}
.slider-container{
padding-bottom: 20px;
}
.filters-row {
margin-top: 10px;
margin-left: 20px;
}
.disable-filter {
pointer-events: none;
opacity: .3;
}

@ -57,7 +57,8 @@ export class DetailsComponent implements OnInit {
public yearTitle: string;
public activeMonth: any;
public currentMonthName = '';
public showAttendence = false;
public showData = false;
public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = [];
@ -67,6 +68,7 @@ export class DetailsComponent implements OnInit {
year: any;
preMonth: number;
nextMonth: any;
currentMonth: any;
public direction: string;
public options = {
cutoutPercentage: 80,
@ -85,8 +87,128 @@ export class DetailsComponent implements OnInit {
// tslint:disable-next-line: max-line-length
public monthsNameArray = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
public monthIndex = new Date().getMonth() + 1;
public EmpTotal = [];
public selectedFilter = '';
public itemType = '';
public monthNo : any;
public filters = [
{
// value: '',
name: 'JAN',
active: true,
color: '#0a0a0a',
key: 'January',
monthNo: 1,
disable: false
},
{
// value: '',
name: 'FEB',
active: false,
color: '#0a0a0a',
key: 'February',
monthNo: 2,
disable: false
},
{
// value: '',
name: 'MAR',
active: false,
color: '#0a0a0a',
key: 'March',
monthNo: 3,
disable: false
},
{
// value: '',
name: 'APRIL',
active: false,
color: '#0a0a0a',
key: 'April',
monthNo: 4,
disable: false
},
{
// value: '',
name: 'MAY',
active: false,
color: '#0a0a0a',
key: 'May',
monthNo: 5,
disable: false
},
{
// value: '',
name: 'JUN',
active: false,
color: '#0a0a0a',
key: 'June',
monthNo: 6,
disable: false
},
{
// value: '',
name: 'JUL',
active: false,
color: '#0a0a0a',
key: 'July',
monthNo: 7,
disable: false
},
{
// value: '',
name: 'AUG',
active: false,
color: '#0a0a0a',
key: 'Augest',
monthNo: 8,
disable: false
},
{
// value: '',
name: 'SEP',
active: false,
color: '#0a0a0a',
key: 'September',
monthNo: 9,
disable: false
},
{
// value: '',
name: 'NOV',
active: false,
color: '#0a0a0a',
key: 'November',
monthNo: 10,
disable: false
},
{
// value: '',
name: 'OCT',
active: false,
color: '#0a0a0a',
key: 'October',
monthNo: 11,
disable: false
},
{
// value: '',
name: 'DEC',
active: false,
color: '#0a0a0a',
key: 'December',
monthNo: 12,
disable: false
}
];
public slideOptsOne = {
slidesPerView: 7,
spaceBetween: 1
};
constructor(
public timeCardService: TimeCardService,
public menuService: MenuService,
@ -106,6 +228,8 @@ export class DetailsComponent implements OnInit {
this.showAttendanceTracking();
// tslint:disable-next-line: max-line-length
this.currentMonthName = this.direction === 'en' ? this.common.getMonthName(this.monthIndex) : this.common.getMonthNameAr(this.monthIndex);
this.getSuborinatesAttStatus();
}
showAttendanceTracking() {
@ -130,6 +254,7 @@ export class DetailsComponent implements OnInit {
}
}
initAttendance() {
this.data = {};
// tslint:disable-next-line: max-line-length
@ -176,6 +301,17 @@ export class DetailsComponent implements OnInit {
});
}
monthCardSliders(monthNo){
console.log(monthNo+"__________________")
// this.common.startLoading();
// this.showData = false;
// this.currentMonth = this.nextMonth - 1;
// this.currentDate = new Date(this.currentYear, (this.preMonth + 1), 1);
this.calendarConfig(this.getMonthName(this.monthNo) , this.currentYear);
console.log("next month =" + this.nextMonth );
console.log(" Month Name =" + this.currentMonthName);
}
nextSlide() {
if (this.currentMonthName !== this.month) {
@ -189,6 +325,7 @@ export class DetailsComponent implements OnInit {
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
}
}
@ -276,15 +413,24 @@ export class DetailsComponent implements OnInit {
this.totalAttendancePrecentage = this.absentDays + this.attendedDays;
if (this.totalAttendancePrecentage > 0) {
this.data = {
// labels: ['Apsent', 'Present'],
datasets: [
{
label: "# of Votes",
data: [this.absentDays, this.attendedDays],
backgroundColor: [
'#269DB8',
'black',
'#269DB8'
],
borderWidth: 2
}]
borderWidth: 1,
// cutoutPrecentage:20 ,
}],
labels: [
'Apsent',
'Present'
]
};
}
}
@ -546,4 +692,75 @@ doInfinite(infiniteScroll) {
this.showEmailInput = true;
}
}
showCalender(){
if(this.showAttendence){
this.showAttendence = false
}else{
this.showAttendence = true
}
}
getSuborinatesAttStatus(){
const request = {
// VersionID:2.8,
// Channel:37,
// LanguageID:2,
// MobileType:"android",
// P_SESSION_ID:1142449920,
// MobileNumber:"0508079569",
// TokenID:"VHR_Token",
// P_USER_NAME:"111209",
// UserName:"111209",
// P_EMAIL_ADDRESS:"Faisal.AlQurashi@cloudsolutions.com.sa",
SearchMonth:"January",
SearchYear:2021
};
// this.myTeamService.getSuborinatesAttStatus().subscribe((result: any) =>
this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleRespondSuborinatesAttStatusResult(result);
})
}
handleRespondSuborinatesAttStatusResult(result){
// this.EmpTotal = result.GetSubordinatesAttdStatusList.length;
this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
console.log("total no "+this.EmpTotal)
}
activeFilter(index: number) {
console.log(this.filters);
if (this.currentActiveIndex !== index) {
this.previousActiveIndex = this.currentActiveIndex;
this.currentActiveIndex = index;
this.filters[this.previousActiveIndex].active = false;
this.filters[this.currentActiveIndex].active = true;
this.selectedFilter = this.filters[this.currentActiveIndex].key;
}
}
disableFilters() {
for (const filter of this.filters) {
if (filter.key === this.itemType) {
filter.disable = false;
filter.active = true;
// filter.value = this.nextMonth - 1;
this.selectedFilter = filter.name;
} else if (this.itemType === '') {
filter.disable = false;
filter.active = false;
} else {
filter.disable = true;
filter.active = false;
}
}
if (this.itemType === '') {
this.filters[0].active = true;
}
}
}

@ -7,7 +7,54 @@
<ion-content>
<div class="contentBg">
<div class="result-graph">
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','search-by')}}</span>
</div>
<div>
<ion-row class="custom-radio">
<!-- <ion-col [size]="3" class="search-dropdown" no-padding> -->
<ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" class="radio-list">
<ion-radio value="Name" [checked]="this.searchKeySelect === 'Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','name')}}</ion-radio>
<ion-label class="text-label" >{{ts.trPK('searchForReplacment','name')}}</ion-label>
<ion-radio value="User Name" [checked]="this.searchKeySelect === 'User Name'" [color]="myColor" >{{ts.trPK('searchForReplacment','userName')}}</ion-radio>
<ion-label class="text-label">{{ts.trPK('searchForReplacment','userName')}}</ion-label>
<ion-radio value="Email" [checked]="this.searchKeySelect === 'Email'" [color]="myColor" >{{ts.trPK('searchForReplacment','email')}}</ion-radio>
<ion-label class="text-label">{{ts.trPK('searchForReplacment','email')}}</ion-label>
</ion-radio-group>
</ion-row>
<!-- <ion-row>
<ion-input placeholder="Search by" class="search-label"[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)" ></ion-input>
</ion-row> -->
<ion-row>
<ion-col class="search-label">
<ion-input *ngIf="showEmailInput" placeholder="Search by Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name or Username" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
</ion-row>
</div>
<!-- <div class="result-text-container">
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div> -->
</div>
<div>
<ion-row>
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
<ion-col> <div class="number"><p class="numberEmp">{{EmpTotal}}</p></div></ion-col>
</ion-row>
</div>
<!-- <div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','team-stats')}}</span>
</div>
@ -17,7 +64,7 @@
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div> -->
<!-- <ion-row class="filters-row">
<ion-slides [options]="slideOptsOne">
@ -33,7 +80,7 @@
</ion-slides>
</ion-row> -->
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
@ -44,14 +91,17 @@
</ion-select>
</ion-col>
<ion-col [size]="7" class="input-container" no-padding>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="{{ts.trPK('general','search')}}" [(ngModel)]="searchNameOrUserName"></ion-input>
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
</ion-col>
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployee()">
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
</ion-col>
</ion-row>
</div>
</div> -->
<div *ngIf="isSearch">
<ion-row class="search-container">
@ -77,5 +127,9 @@
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
</ion-content>

@ -30,20 +30,37 @@ ion-content {
}
.request-heading {
span {
text-align: center;
// text-align: center;
// display: block;
// padding-top: 8px;
// font-family: workSans-Regular;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
padding-left: 15px;
font-weight: bold;
font-size: 12px;
margin-top: 9px;
}
}
.search-label{
border: 1px solid #ccc;
margin-left: 15px;
margin-right: 15px;
border-radius: 22px;
margin-top: 24px;
font-size: 11px;
color: rgb(143, 141, 141);
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
padding-bottom: 35px;
border-radius: 20px;
z-index: 1;
border: 1px solid #ccc;
}
.result-text-container {
padding: 0;
@ -139,7 +156,7 @@ ion-content {
width: 100%;
height: 100%;
border-radius: 80px;
border: 1px solid #ccc;
border: 1px solid rgb(170, 169, 169);
margin: 0px auto 6px;
}
@ -162,3 +179,64 @@ ion-content {
}
}
}
// .myClass .toggle-icon {
// background-color: purple; // this changes the background, ie the grey stripe.
// .toggle-inner {
// background-color: yellow; // this changes the backgroundcolor of the toggle dot.
// }
// }
.text-label{
--color: black !important;
font-size: 13px;
margin-left: 15px;
margin-right: 18px;
}
.radio-list{
background: white;
margin-left: 18px;
/* margin-right: 10px; */
margin-top: 12px;
}
// .selected .radio-icon {
// border-color: #0064D9;
// color: red;
// }
.radio-icon{
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;}
}
.text{
font-size: 16px;
font-weight: bolder;
font-family: 'WorkSans-Bold';
margin-top: 27px;
}
.number{
width: 20px;
height: 20px;
padding-right: -10px;
border-radius: 100%;
background-color: #269DB8;
z-index: 9;
margin-top: 26px;
}
.numberEmp{
color: white;
font-size: 13px;
font-weight: bolder;
margin-left: 6px;
}

@ -7,6 +7,7 @@ import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-respo
import { MyTeamService } from '../service/my-team.service';
import { ModalController, IonInfiniteScroll } from '@ionic/angular';
import { DetailsComponent } from '../details/details.component';
import { Body } from '@angular/http/src/body';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
@ -28,6 +29,8 @@ export class HomeComponent implements OnInit {
public selEmpNo: any;
public totalEmployees = 0;
public pageFirstVisit = false;
myColor: string = 'secondary';
public EmpTotal = [];
public options = {
cutoutPercentage: 80,
@ -95,7 +98,13 @@ export class HomeComponent implements OnInit {
ngOnInit() {
this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR);
this.setIntitial();
this.getSuborinatesAttStatus();
}
toggleColor() {
this.myColor = 'secondary';
// this.myColor = '#269DB8'
}
// activeFilter(index: number) {
// this.previousActiveIndex = this.currentActiveIndex;
@ -228,4 +237,36 @@ export class HomeComponent implements OnInit {
this.showEmailInput = true;
}
}
getSuborinatesAttStatus(){
const request = {
// VersionID:2.8,
// Channel:37,
// LanguageID:2,
// MobileType:"android",
// P_SESSION_ID:1142449920,
// MobileNumber:"0508079569",
// TokenID:"VHR_Token",
// P_USER_NAME:"111209",
// UserName:"111209",
// P_EMAIL_ADDRESS:"Faisal.AlQurashi@cloudsolutions.com.sa",
SearchMonth:"January",
SearchYear:2021
};
// this.myTeamService.getSuborinatesAttStatus().subscribe((result: any) =>
this.myTeamService.getSuborinatesAttStatus(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleRespondSuborinatesAttStatusResult(result);
})
}
handleRespondSuborinatesAttStatusResult(result){
// this.EmpTotal = result.GetSubordinatesAttdStatusList.length;
this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
console.log("total no "+this.EmpTotal)
}
}

@ -0,0 +1,195 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
</ion-buttons>
<ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','HR-request')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngIf="!showRequestDetails" class="contentBg">
<div class="result-graph" >
<div class="user-info">
<div class="user-image-container">
<div class="user-image">
<img class="img" [src]="EmpImg ? 'data:image/png;base64,'+ EmpImg : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
</div>
<div style="margin-top: 18px;">
<span class="Nametext">{{EmpName}}</span>
<p style=" font-size: 12px; color: rgb(128, 124, 124);">{{EmpEmail}}</p>
<!-- <span>{{EmpJob}}</span> -->
</div>
<div >
<ion-row>
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{EmpJob}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{EmpNum}}</span>
</ion-col>
</ion-row>
</div>
</div>
</div>
<div class="employee-information-indetail">
<ion-row style="padding-left: 13px;">
<ion-col>
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','category')}}</h2>
<p>{{EmpCatMeaning}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','address')}}</h2>
<p>{{EmpLocation}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','phone-no')}}</h2>
<p>{{EmpMobile}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','busG')}}</h2>
<p>{{EmpOrgName}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','job')}}</h2>
<p>{{EmpJob}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
<p>{{EmpPayrol}}</p>
</ion-col>
<ion-col [size]="12">
<h2>{{ts.trPK('userProfile','position')}}</h2>
<p>{{EmpPosition}}</p>
</ion-col>
<ion-col [size]="12" style="border-bottom: none;">
<h2>{{ts.trPK('userProfile','grade')}}</h2>
<p>{{EmpGRADENAME}}</p>
</ion-col>
</ion-row>
</div>
<div>
<ion-button class="sendCodeBtn" (click)="createRequest()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
</div>
</div>
<!-- ///////////////////////////////////////////////////////////////////next page -->
<!-- <div>
<div class="verify-code">
<ion-row style=" margin-left: 9px; margin-bottom: 13px;">
<ion-col style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','code-sent')}}</ion-col>
<ion-col class="Boldtext"> {{EmpMobile}}</ion-col>
</ion-row>
<ion-row dir="ltr">
<ion-col [size]="12">
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()" #ref autofocus="true">
</ion-input>
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
<ion-input type="tel" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}"
inputmode="tel" (ionInput)="goToNextInput($event)" (ionChange)="onChange()"></ion-input>
</ion-col>
</ion-row>
</div>
<div>
<ion-button class="sendVerifyBtn" (click)="VerifyCode()" >{{ts.trPK('userProfile','verify-code')}}</ion-button>
</div>
</div> -->
<!-- ///////////////////////////////////////////////////////////////////next page -->
<div *ngIf="showRequestDetails" class="result-serviceType">
<div class="request-heading">
<span>{{ts.trPK('userProfile','ServiceType')}}</span>
</div>
<div>
<ion-row class="custom-radio">
<ion-radio-group (ionChange)="showSelectedField($event)" class="radio-list">
<ion-radio value="HR Services" [color]="myColor">HR Services</ion-radio>
<ion-label class="text-label" >HR Services</ion-label>
<ion-radio value="Complaints" [color]="myColor" >Complaints</ion-radio>
<ion-label class="text-label">Complaints</ion-label>
<ion-radio value="Inquiry" [color]="myColor" >Inquiry</ion-radio>
<ion-label class="text-label">Inquiry</ion-label>
</ion-radio-group>
</ion-row>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','DeptName')}}</span>
</div>
<div class="filed">
<label class="selectLabel">Select Department</label>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','RelatedSection')}}</span>
</div>
<div class="filed">
<label class="selectLabel">Select Section</label>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','RelatedTopic')}}</span>
</div>
<div class="filed">
<label class="selectLabel">Select Topic</label>
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','SupportingDocument')}}</span>
</div>
<div style="margin-left: 15px; margin-top: 12px;">
<img (click)="uploadDocument()" src="../assets/imgs/add-photo.svg">
</div>
<div class="request-heading">
<span>{{ts.trPK('userProfile','Description')}}</span>
</div>
<div class="filedDesc">
<label class="labelDesc">Description</label>
</div>
<ion-row style="margin-left: 5px;">
<div class="cancelRequest">
<ion-button (click)="cancelRequest()">Cancel
</ion-button>
</div>
<div class="submitRequest">
<ion-button (click)="submitRequest()">Submit
</ion-button>
</div>
</ion-row>
</div>
</ion-content>

@ -0,0 +1,328 @@
.header-toolbar-new{
--background: #269DB8;
}
.contentBg{
padding: 0px 20px;
}
.contentBg:before {
position: absolute;
content: "";
background: #269DB8;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
@media screen and (min-width: 1px) and (max-width:767px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 56px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.result-graph {
position: relative;
background: white;
// margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
margin-top: 89px;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 114px !important;
}}
.user-info{
text-align: center;
margin-bottom: 3px;
.user-image-container{
position: relative;
width: 100%;
height: 24px;
justify-content: space-between;
display: flex;
margin: 0 auto;
align-items: center;
}}
.Boldtext{
font-size: 13px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.Nametext{
font-size: 15px;
font-family: WorkSans-Bold;
color: black !important;
display: block !important;
// line-height: 0px !important;
}
.employee-information-indetail{
background: white;
margin-top: 15px;
border-radius: 20px;
margin-bottom: 15px;
border-radius: 20px;
border: 1px solid #ccc;
ion-col{
padding: 15px;
// border-bottom: 1px solid #ccc;
}
h2{
font-size: 13px;
// font-family: WorkSans-Bold;
margin: 0;
font-weight: bold;
color: rgb(128, 124, 124);
}
p{
font-size: 13px;
margin: 0;
font-family: WorkSans-Bold;
// margin-bottom: 10px;
}
}
@media screen and (min-width: 1px) and (max-width:767px){
.user-image{
position: relative;
display: block;
width: 95%;
height: 100%;
border-radius: 80px;
/* border: 1px solid #ccc; */
margin-top: -125px;
}}
@media screen and (min-width: 768px) and (max-width:1024px){
.user-image{
position: relative;
display: block;
width: 95%;
height: 100%;
border-radius: 80px;
margin-bottom: 371px;
}}
.img{
width: 100px;
height: 100px;
display: inline-flex;
overflow: hidden;
background: transparent;
border-radius: 70% !important;
position: relative;
top: 3px;
}
.sendCodeBtn{
--background: #269DB8;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-left: 5px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
/* padding: 6px 24px; */
font-size: 15px;
width: 322px;
}
.verify-code{
position: relative;
background: white;
border-radius: 20px;
z-index: 1;
border-radius: 20px;
border: 1px solid #ccc;
padding: 21px 3px 34px 14px;
margin: 25px 22px 2px 22px;
}
// .sms_code{
// margin: 0px;
// text-align: center;
// }
ion-input {
margin: 0 5px;
text-align: center;
line-height: 0;
font-size: 32px;
//border: solid 1px #ccc;
border: 1px solid #ccc !important;
//box-shadow: 0 0 5px #ccc inset;
outline: none;
width: 20%;
transition: all .2s ease-in-out;
border-radius: 3px;
display: inline-block;
&:focus {
border-color:var(--ion-color-secondary) !important;
box-shadow: 0 0 5px var(--ion-color-secondary) !important;
}
&::selection {
background: transparent;
}
}
.sendVerifyBtn{
--background: #269DB8;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
font-size: 15px;
width: 322px;
margin-left: 22px;
}
.custom-radio .radio-icon {
margin: 0px;
border-radius: 50%;
border-width: var(--border-width);
border-style: var(--border-style);
border-color: #dcdcdc;
margin-top: 6px !important;
border-color: #d8d4d4 !important;
margin-bottom: 18px;}
.text-label{
color: black !important;
font-size: 10px;
margin-left: 15px;
margin-right: 18px;
font-family: 'WorkSans-Bold';
}
.radio-list{
background: white;
margin-left: 18px;
/* margin-right: 10px; */
margin-top: 12px;
}
.result-serviceType{
position: relative;
background: white;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
border-radius: 20px;
border: 1px solid #ccc;
padding-top: 12px;
margin: 25px 22px 2px 22px;
padding-bottom: 241px;
}
.request-heading {
span {
display: block;
padding-top: 8px;
padding-left: 15px;
/* font-weight: bold; */
font-size: 14px;
font-family: 'WorkSans-Bold';
}
}
.filed{
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
margin: 10px;
padding-left: 11px !important;
padding-top: 6px !important;
color: #636161;
padding-bottom: 15px;
}
.filedDesc{
border-radius: 30px;
border: 1px solid #d3d5d5 !important;
margin: 10px;
padding-left: 11px !important;
padding-top: 6px !important;
color: #636161;
padding-bottom: 110px;
}
.labelDesc{
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
font-weight: bold;
color: #adabab;
}
.selectLabel{
display: block;
padding-top: 8px;
padding-left: 15px;
font-size: 14px;
/* font-family: 'WorkSans-Bold'; */
font-weight: bold;
color: black;
}
.cancelRequest{
padding: 10px 0px 10px 10px;
ion-button{
border-radius: 7px;
padding: 12px 25px 12px 25px;
background: #d00a0a;
--background: transparent;
--box-shadow: none !important;
height: auto;
min-height: inherit;
font-size: 16px;
font-weight: bold;
}
}
.submitRequest{
padding: 10px 10px 10px 1px;
ion-button{
border-radius: 7px;
padding: 12px 25px 12px 25px;
background: #19a163;
--background: transparent;
--box-shadow: none !important;
height: auto;
min-height: inherit;
font-size: 16px;
font-weight: bold;
}}

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

@ -0,0 +1,131 @@
import { Component, OnInit } from '@angular/core';
import { Platform, Events, MenuController } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { MyTeamService } from '../service/my-team.service';
import { Location } from '@angular/common';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { LoginModel } from 'src/app/authentication/models/LoginModel';
import { SendActivationByType } from 'src/app/authentication/models/sendActivationByType';
@Component({
selector: 'app-hr-request',
templateUrl: './hr-request.component.html',
styleUrls: ['./hr-request.component.scss'],
})
export class HRRequestComponent implements OnInit {
public EmpName : string;
public EmpNum : string;
public EmpGroup : string;
public EmpMobile : string;
public EmpJob : string;
public EmpOrgName : string;
public EmpPayrol : string;
public EmpPosition : string;
public EmpEmail: string;
public EmpCatMeaning:string;
public EmpGRADENAME : string;
public EmpLocation : string;
public EmpImg : string;
public userImage: any = '../assets/imgs/profile.png';
public loginData = new LoginModel();
public searchKeySelect = 'Complaints';
myColor: string = 'secondary';
public showRequestDetails = false;
public direction: string;
constructor(
public ts: TranslatorService,
public cs: CommonService,
public authService: AuthenticationService,
public sharedData: SharedDataService,
public events: Events,
public myTeamService: MyTeamService,
private location: Location,
private menu: MenuController,
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {
this.getUserInformation();
}
goback() {
this.location.back();
}
getUserInformation(){
const request = {
P_SELECTED_EMPLOYEE_NUMBER:"121816",
P_SELECTED_RESP_ID:-999,
P_PAGE_NUM:1,
P_PAGE_LIMIT:1
};
this.myTeamService.getUserInfo(request, ()=> {} , this.ts.trPK('general', 'retry')).subscribe((result)=>
{
this.handleUserInfoResult(result);
})
}
handleUserInfoResult(result){
this.EmpName = result.MemberInformationList[0].EMPLOYEE_NAME;
console.log("____________" + this.EmpName);
this.EmpNum = result.MemberInformationList[0].EMPLOYEE_NUMBER;
this.EmpGroup = result.MemberInformationList[0].BUSINESS_GROUP_NAME;
this.EmpMobile = result.MemberInformationList[0].EMPLOYEE_MOBILE_NUMBER;
this.EmpJob = result.MemberInformationList[0].JOB_NAME;
this.EmpOrgName = result.MemberInformationList[0].ORGANIZATION_NAME;
this.EmpPayrol = result.MemberInformationList[0].PAYROLL_NAME;
this.EmpPosition = result.MemberInformationList[0].POSITION_NAME;
this.EmpEmail = result.MemberInformationList[0].EMPLOYEE_EMAIL_ADDRESS;
this.EmpCatMeaning = result.MemberInformationList[0].EMPLOYMENT_CATEGORY_MEANING;
this.EmpGRADENAME = result.MemberInformationList[0].GRADE_NAME;
this.EmpLocation = result.MemberInformationList[0].LOCATION_NAME;
this.EmpImg = result.MemberInformationList[0].EMPLOYEE_IMAGE
// console.log("total no "+this.EmpTotal)
}
// public sendActivationCode() {
// }
// VerifyCode(){
// }
createRequest(){
if(this.showRequestDetails){
this.showRequestDetails = false
}else{
this.showRequestDetails = true
}}
public cancelRequest() {
this.cs.openMyRequestPage();
this.menu.toggle();
}
submitRequest(){
}
uploadDocument(){
}
}

@ -0,0 +1,22 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<nav-buttons (backClick)="goback()" [navigate]="false"></nav-buttons>
</ion-buttons>
<ion-title style=" color:white; text-align: center;">{{ts.trPK('userProfile','MyHR-request')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div>
<ion-row [ngClass]="direction == 'en' ? 'empty-en':'empty-ar' ">{{ts.trPK('general','empty')}}</ion-row>
</div>
</ion-content>
<ion-footer>
<div>
<ion-button class="sendCodeBtn" (click)="openHRRequestPage()" >{{ts.trPK('userProfile','createHR-Request')}}</ion-button>
</div>
</ion-footer>

@ -0,0 +1,33 @@
.sendCodeBtn{
--background: #269DB8;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-left: 23px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
/* border-radius: 4px; */
height: 26px;
/* padding: 6px 24px; */
font-size: 15px;
width: 322px;
}
.empty-en{
color: black;
text-align: center;
font-size: 15px;
font-family: WorkSans-Bold;
margin: 50px 0px 0px 100px;
}
.empty-ar{
color: black;
text-align: center;
font-size: 15px;
font-family: WorkSans-Bold;
margin: 50px 100px 0px 0px;
}

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

@ -0,0 +1,46 @@
import { Component, OnInit } from '@angular/core';
import { Platform, Events, MenuController } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { MyTeamService } from '../service/my-team.service';
import { Location } from '@angular/common';
@Component({
selector: 'app-my-request',
templateUrl: './my-request.component.html',
styleUrls: ['./my-request.component.scss'],
})
export class MyRequestComponent implements OnInit {
public direction : String;
constructor(
public ts: TranslatorService,
public cs: CommonService,
public authService: AuthenticationService,
public sharedData: SharedDataService,
public events: Events,
public myTeamService: MyTeamService,
private location: Location,
private menu: MenuController,
) {
this.direction = TranslatorService.getCurrentLanguageName();
}
ngOnInit() {}
goback() {
this.location.back();
}
public openHRRequestPage() {
this.cs.openHRRequestPage();
this.menu.toggle();
}
}

@ -8,6 +8,9 @@ import { IonicModule } from '@ionic/angular';
import { MyTeamPage } from './my-team.page';
import { HmgCommonModule } from '../hmg-common/hmg-common.module';
import {MyRequestComponent} from './my-request/my-request.component';
import {HRRequestComponent} from './/hr-request/hr-request.component';
const routes: Routes = [
{
@ -24,7 +27,16 @@ const routes: Routes = [
{
path: 'details-2',
component: DetailsComponent
},
{
path: 'my-request',
component: MyRequestComponent
},
{
path: 'hr-request',
component: HRRequestComponent
}
]
}
];
@ -37,6 +49,6 @@ const routes: Routes = [
IonicModule,
RouterModule.forChild(routes)
],
declarations: [MyTeamPage,HomeComponent,DetailsComponent]
declarations: [MyTeamPage,HomeComponent,DetailsComponent,MyRequestComponent,HRRequestComponent]
})
export class MyTeamPageModule {}

@ -7,6 +7,8 @@ import { AuthenticationService } from "src/app/hmg-common/services/authenticatio
export class MyTeamService {
public static EMPLOYEE_SHARED_DATA = 'employee';
public static getMyTeam = 'Services/ERP.svc/REST/GET_EMPLOYEE_SUBORDINATES';
public static getSuborinateStatus = 'Services/ERP.svc/REST/GET_SUBORDINATES_ATTD_STATUS';
public static getUserInfo ='Services/ERP.svc/REST/Get_UserInformation';
constructor(
public con: ConnectorService,
private authService: AuthenticationService
@ -16,4 +18,18 @@ export class MyTeamService {
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getMyTeam, request, onError, errorLabel);
}
public getSuborinatesAttStatus(absence: any, onError?: any, errorLabel?: string){
const request = absence;
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getSuborinateStatus, request, onError, errorLabel);
}
public getUserInfo(absence: any, onError?: any, errorLabel?: string){
const request = absence;
this.authService.authenticateRequest(request);
return this.con.post(MyTeamService.getUserInfo, request, onError, errorLabel);
}
}

@ -30,16 +30,15 @@
<label class="stepHeaderLebal">{{ 'vacation-rule, apply-for-vacation-rule' | translate}} </label><br>
<label class="stepHeaderLebal"> {{ 'vacation-rule, step-1' | translate}}</label>
</div>
<ion-item class="selectItem">
<ion-label>{{'vacation-rule, itemType' | translate}}</ion-label>
<ion-select mode="ios" okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
[(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required>
<ion-select-option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
*ngFor="let x of ruleTypeList; let i=index;">
{{x.ITEM_TYPE_DISPLAY_NAME}} </ion-select-option>
</ion-select>
</ion-item>
<!-- //// okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'/// -->
<div class="selectItem">
<label class="label">{{'vacation-rule, itemType' | translate}}</label>
<select class="label-Select" [(ngModel)]="index" (ionChange)="vacationRuleSel($event)" required>
<option [selected]="x.ITEM_TYPE_DISPLAY_NAME" value="{{i}}"
*ngFor="let x of ruleTypeList; let i=index;">
{{x.ITEM_TYPE_DISPLAY_NAME}} </option>
</select>
</div>
</ion-row>

@ -162,3 +162,72 @@ color: black !important;
// .cusprogressbar li.active:before {
// background-color: #209a83;
// }
.label-Select{
color: var(--dark);
font-size: 15px;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
// padding: 1px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
// margin-left: 20px;
margin-left: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
text-indent: 1px;
// text-overflow: '';
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
:root[dir="ltr"]{
background-image: linear-gradient(45deg, transparent 50%, #999 50%), linear-gradient(135deg, #999 50%, transparent 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(100% - 14px) calc(1em + 2px), calc(100% - 8px) calc(1em + 2px), 100% 0;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-right: 20px;
}
:root[dir="rtl"]{
background-image: linear-gradient(-135deg, #999 50%, transparent 50%),linear-gradient(-45deg, transparent 50%, #999 50%), linear-gradient(to right, #ffffff, #ffffff);
background-position: calc(1em - 10px) calc(100% - 8px), calc(1em - 4px) calc(100% - 8px), 0 100%;
background-size: 6px 6px, 6px 6px, 2.9em 2.9em;
background-repeat: no-repeat;
padding-left: 20px;
}
}
.label{
font-size: 16px;
// margin-left: 15px;
color: #a2a5a6 !important;
display: block;
overflow: hidden;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
white-space: normal;
// padding-top: 10px;
// padding: 5px 0px;
padding-left: 10px !important;
margin: 10px auto;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 237 KiB

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
<g id="Group_7231" data-name="Group 7231" transform="translate(-111.351 -245.557)">
<circle id="Ellipse_152" data-name="Ellipse 152" cx="15" cy="15" r="15" transform="translate(111.351 245.557)" fill="#1fa169"/>
<path id="Path_13" data-name="Path 13" d="M11.706,9.111c-.791-.676-1.593-1.086-2.375-.411l-.466.408c-.341.3-.976,1.681-3.429-1.141S4.443,4.71,4.785,4.416l.469-.409c.777-.677.484-1.529-.077-2.406L4.839,1.07C4.276.2,3.663-.38,2.884.3L2.463.664A3.952,3.952,0,0,0,.922,3.279C.641,5.138,1.528,7.266,3.559,9.6s4.014,3.51,5.895,3.489a3.962,3.962,0,0,0,2.8-1.161l.422-.368c.777-.675.294-1.363-.5-2.041Z" transform="translate(119.204 254.187)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 769 B

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="19.572" height="21" viewBox="0 0 19.572 21">
<g id="phone-receiver-silhouette" transform="translate(-0.872 0)">
<path id="Path_13" data-name="Path 13" d="M18.252,14.616c-1.269-1.085-2.556-1.742-3.809-.659l-.748.655c-.547.475-1.565,2.7-5.5-1.831S6.6,7.556,7.149,7.085L7.9,6.429c1.246-1.086.776-2.453-.123-3.86l-.543-.852C6.332.313,5.349-.609,4.1.475l-.675.59A6.339,6.339,0,0,0,.953,5.26C.5,8.242,1.924,11.656,5.182,15.4s6.439,5.63,9.456,5.6a6.356,6.356,0,0,0,4.5-1.862l.678-.591c1.246-1.083.472-2.186-.8-3.274Z" transform="translate(0 0)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 622 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.876" height="17.876" viewBox="0 0 17.876 17.876">
<g id="new-page" transform="translate(-1 -1)">
<path id="Path_14" data-name="Path 14" d="M20.7,7H7.6a.6.6,0,0,0-.6.6V20.7a.6.6,0,0,0,.6.6H20.7a.6.6,0,0,0,.6-.6V7.6A.6.6,0,0,0,20.7,7Zm-2.979,7.746H14.746v2.979H13.554V14.746H10.575V13.554h2.979V10.575h1.192v2.979h2.979Z" transform="translate(-2.425 -2.425)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M15.3,3.383V1.6a.6.6,0,0,0-.6-.6H1.6a.6.6,0,0,0-.6.6V14.7a.6.6,0,0,0,.6.6H3.383V5.171A1.788,1.788,0,0,1,5.171,3.383Z" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 619 B

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="17.876" height="17.876" viewBox="0 0 17.876 17.876">
<g id="new-page" transform="translate(-1 -1)">
<path id="Path_14" data-name="Path 14" d="M20.7,7H7.6a.6.6,0,0,0-.6.6V20.7a.6.6,0,0,0,.6.6H20.7a.6.6,0,0,0,.6-.6V7.6A.6.6,0,0,0,20.7,7Zm-2.979,7.746H14.746v2.979H13.554V14.746H10.575V13.554h2.979V10.575h1.192v2.979h2.979Z" transform="translate(-2.425 -2.425)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M15.3,3.383V1.6a.6.6,0,0,0-.6-.6H1.6a.6.6,0,0,0-.6.6V14.7a.6.6,0,0,0,.6.6H3.383V5.171A1.788,1.788,0,0,1,5.171,3.383Z" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 619 B

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="15.663" height="17.821" viewBox="0 0 15.663 17.821">
<g id="user_19_" data-name="user (19)" transform="translate(-31)">
<g id="Group_7233" data-name="Group 7233" transform="translate(34.133)">
<g id="Group_7232" data-name="Group 7232">
<path id="Path_16" data-name="Path 16" d="M125.7,0a4.7,4.7,0,1,0,4.7,4.7A4.7,4.7,0,0,0,125.7,0Z" transform="translate(-121)" fill="#fff"/>
</g>
</g>
<g id="Group_7235" data-name="Group 7235" transform="translate(31 10.442)">
<g id="Group_7234" data-name="Group 7234">
<path id="Path_17" data-name="Path 17" d="M44.678,302.026a6.7,6.7,0,0,0-4.8-2.026H37.787a6.7,6.7,0,0,0-4.8,2.026A6.848,6.848,0,0,0,31,306.857a.522.522,0,0,0,.522.522H46.141a.522.522,0,0,0,.522-.522A6.848,6.848,0,0,0,44.678,302.026Z" transform="translate(-31 -300)" fill="#fff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 912 B

@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.515" height="19.099" viewBox="0 0 22.515 19.099">
<g id="group_2_" data-name="group (2)" transform="translate(0 -38.84)">
<g id="Group_7238" data-name="Group 7238" transform="translate(17.523 49.151)">
<g id="Group_7237" data-name="Group 7237" transform="translate(0 0)">
<path id="Path_23" data-name="Path 23" d="M400.235,273.32h-1.741a4.53,4.53,0,0,1,.274,1.557v6.581a1.94,1.94,0,0,1-.112.65h2.879a1.952,1.952,0,0,0,1.95-1.95V276.57A3.254,3.254,0,0,0,400.235,273.32Z" transform="translate(-398.494 -273.32)" fill="#fff"/>
</g>
</g>
<g id="Group_7240" data-name="Group 7240" transform="translate(0 49.151)">
<g id="Group_7239" data-name="Group 7239">
<path id="Path_24" data-name="Path 24" d="M4.717,274.878a4.529,4.529,0,0,1,.274-1.557H3.25A3.254,3.254,0,0,0,0,276.571v3.587a1.952,1.952,0,0,0,1.95,1.95H4.829a1.941,1.941,0,0,1-.112-.65Z" transform="translate(0 -273.321)" fill="#fff"/>
</g>
</g>
<g id="Group_7242" data-name="Group 7242" transform="translate(6.017 47.458)">
<g id="Group_7241" data-name="Group 7241" transform="translate(0 0)">
<path id="Path_25" data-name="Path 25" d="M144.06,234.815h-3.981a3.254,3.254,0,0,0-3.25,3.25v6.581a.65.65,0,0,0,.65.65h9.181a.65.65,0,0,0,.65-.65v-6.581A3.254,3.254,0,0,0,144.06,234.815Z" transform="translate(-136.829 -234.815)" fill="#fff"/>
</g>
</g>
<g id="Group_7244" data-name="Group 7244" transform="translate(7.349 38.84)">
<g id="Group_7243" data-name="Group 7243" transform="translate(0 0)">
<path id="Path_26" data-name="Path 26" d="M171.023,38.84a3.908,3.908,0,1,0,3.909,3.909A3.913,3.913,0,0,0,171.023,38.84Z" transform="translate(-167.114 -38.84)" fill="#fff"/>
</g>
</g>
<g id="Group_7246" data-name="Group 7246" transform="translate(1.471 42.483)">
<g id="Group_7245" data-name="Group 7245" transform="translate(0 0)">
<path id="Path_27" data-name="Path 27" d="M36.366,121.689a2.922,2.922,0,1,0,2.923,2.923A2.926,2.926,0,0,0,36.366,121.689Z" transform="translate(-33.443 -121.689)" fill="#fff"/>
</g>
</g>
<g id="Group_7248" data-name="Group 7248" transform="translate(15.198 42.483)">
<g id="Group_7247" data-name="Group 7247" transform="translate(0 0)">
<path id="Path_28" data-name="Path 28" d="M348.53,121.689a2.923,2.923,0,1,0,2.923,2.923A2.926,2.926,0,0,0,348.53,121.689Z" transform="translate(-345.607 -121.689)" fill="#fff"/>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.339" height="14.601" viewBox="0 0 12.339 14.601">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,38.632a.993.993,0,0,0,.993.993H18.656a.993.993,0,0,0,.993-.993V30.71H7.31Zm8.545-5.813h1.61v1.61h-1.61Zm0,2.737h1.61v1.61h-1.61Zm-3.179-2.737h1.608v1.61H12.675Zm0,2.737h1.608v1.61H12.675ZM9.492,32.818H11.1v1.61H9.492Zm0,2.737H11.1v1.61H9.492Z" transform="translate(0 -23.523)" fill="#259cb8"/>
<path id="Path_19" data-name="Path 19" d="M54.275,4.755a.175.175,0,0,0,.175-.175v-2.9a.175.175,0,1,0-.35,0v2.9A.175.175,0,0,0,54.275,4.755Z" transform="translate(-37.681)" fill="#259cb8"/>
<path id="Path_20" data-name="Path 20" d="M18.656,9.4H17.114v1.542a.528.528,0,1,1-1.055,0V9.4H10.9v1.542a.528.528,0,1,1-1.053,0V9.4H8.3a1,1,0,0,0-.993.993V13.2H19.649V10.393a1,1,0,0,0-.993-.993Z" transform="translate(0 -6.362)" fill="#259cb8"/>
<path id="Path_21" data-name="Path 21" d="M22.275,4.824a.175.175,0,0,0,.177-.175v-2.9a.177.177,0,0,0-.352,0v2.9a.175.175,0,0,0,.175.175Z" transform="translate(-11.911 -0.069)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,6 @@
<svg id="data-management_1_" data-name="data-management (1)" xmlns="http://www.w3.org/2000/svg" width="14.455" height="14.455" viewBox="0 0 14.455 14.455">
<path id="Path_209" data-name="Path 209" d="M271.424,0H271V6.8h6.8V6.381A6.408,6.408,0,0,0,271.424,0Z" transform="translate(-263.349)" fill="#259cb8"/>
<path id="Path_210" data-name="Path 210" d="M78.084,276.2a6.32,6.32,0,0,0,10.529-4.775V271h-5.33Z" transform="translate(-75.879 -263.349)" fill="#259cb8"/>
<path id="Path_211" data-name="Path 211" d="M98.924,61H98.5a6.31,6.31,0,0,0-3.7,1.2l4.128,4.128Z" transform="translate(-92.12 -59.278)" fill="#259cb8"/>
<path id="Path_212" data-name="Path 212" d="M2.021,122.787a6.25,6.25,0,0,0-.415,8.784l4.6-4.6Z" transform="translate(0 -119.32)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 778 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.567" height="19.604" viewBox="0 0 16.567 19.604">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,41.346a1.333,1.333,0,0,0,1.333,1.333h13.9a1.333,1.333,0,0,0,1.333-1.333V30.71H7.31Zm11.472-7.805h2.162V35.7H18.782Zm0,3.675h2.162v2.162H18.782Zm-4.268-3.675h2.159V35.7H14.514Zm0,3.675h2.159v2.162H14.514ZM10.24,33.541H12.4V35.7H10.24Zm0,3.675H12.4v2.162H10.24Z" transform="translate(0 -21.575)" fill="#fff"/>
<path id="Path_19" data-name="Path 19" d="M54.335,5.87a.235.235,0,0,0,.235-.235v-3.9a.235.235,0,0,0-.47,0v3.9a.235.235,0,0,0,.235.235Z" transform="translate(-34.56)" fill="#fff"/>
<path id="Path_20" data-name="Path 20" d="M22.544,9.4h-2.07v2.07a.708.708,0,0,1-1.417,0V9.4H12.127v2.07a.708.708,0,1,1-1.414,0V9.4H8.643A1.336,1.336,0,0,0,7.31,10.733V14.5H23.877V10.733A1.336,1.336,0,0,0,22.544,9.4Z" transform="translate(0 -5.835)" fill="#fff"/>
<path id="Path_21" data-name="Path 21" d="M22.335,5.933a.235.235,0,0,0,.238-.235V1.8a.238.238,0,0,0-.473,0V5.7a.235.235,0,0,0,.235.235Z" transform="translate(-10.924 -0.063)" fill="#fff"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12.339" height="14.601" viewBox="0 0 12.339 14.601">
<g id="calendar_26_" data-name="calendar (26)" transform="translate(-7.31 -1.5)">
<path id="Path_18" data-name="Path 18" d="M7.31,38.632a.993.993,0,0,0,.993.993H18.656a.993.993,0,0,0,.993-.993V30.71H7.31Zm8.545-5.813h1.61v1.61h-1.61Zm0,2.737h1.61v1.61h-1.61Zm-3.179-2.737h1.608v1.61H12.675Zm0,2.737h1.608v1.61H12.675ZM9.492,32.818H11.1v1.61H9.492Zm0,2.737H11.1v1.61H9.492Z" transform="translate(0 -23.523)" fill="#259cb8"/>
<path id="Path_19" data-name="Path 19" d="M54.275,4.755a.175.175,0,0,0,.175-.175v-2.9a.175.175,0,1,0-.35,0v2.9A.175.175,0,0,0,54.275,4.755Z" transform="translate(-37.681)" fill="#259cb8"/>
<path id="Path_20" data-name="Path 20" d="M18.656,9.4H17.114v1.542a.528.528,0,1,1-1.055,0V9.4H10.9v1.542a.528.528,0,1,1-1.053,0V9.4H8.3a1,1,0,0,0-.993.993V13.2H19.649V10.393a1,1,0,0,0-.993-.993Z" transform="translate(0 -6.362)" fill="#259cb8"/>
<path id="Path_21" data-name="Path 21" d="M22.275,4.824a.175.175,0,0,0,.177-.175v-2.9a.177.177,0,0,0-.352,0v2.9a.175.175,0,0,0,.175.175Z" transform="translate(-11.911 -0.069)" fill="#259cb8"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,6 @@
<svg id="data-management_1_" data-name="data-management (1)" xmlns="http://www.w3.org/2000/svg" width="14.455" height="14.455" viewBox="0 0 14.455 14.455">
<path id="Path_209" data-name="Path 209" d="M271.424,0H271V6.8h6.8V6.381A6.408,6.408,0,0,0,271.424,0Z" transform="translate(-263.349)" fill="#259cb8"/>
<path id="Path_210" data-name="Path 210" d="M78.084,276.2a6.32,6.32,0,0,0,10.529-4.775V271h-5.33Z" transform="translate(-75.879 -263.349)" fill="#259cb8"/>
<path id="Path_211" data-name="Path 211" d="M98.924,61H98.5a6.31,6.31,0,0,0-3.7,1.2l4.128,4.128Z" transform="translate(-92.12 -59.278)" fill="#259cb8"/>
<path id="Path_212" data-name="Path 212" d="M2.021,122.787a6.25,6.25,0,0,0-.415,8.784l4.6-4.6Z" transform="translate(0 -119.32)" fill="#259cb8"/>
</svg>

After

Width:  |  Height:  |  Size: 778 B

@ -1075,6 +1075,10 @@
"en": "My Profile",
"ar": "معلوماتي"
},
"profile-details": {
"en": "Profile Details",
"ar": "تفاصيل الملف الشخصي"
},
"edit-profile": {
"en": "Edit Profile",
"ar": "تعديل المعلومات"
@ -1123,6 +1127,10 @@
"en": "Employee Detail",
"ar": "بيانات الموظف"
},
"role": {
"en": "Role",
"ar": "Role"
},
"address": {
"en": "Address",
"ar": "العنوان"
@ -1225,7 +1233,7 @@
},
"monthly-attendance-calendar": {
"ar": "سجل الحضور الشهري",
"en": "Monthly Attendance Calendar"
"en": "Monthly Attendance"
},
"completed": {
"ar": "منجز",
@ -1575,6 +1583,10 @@
"en": "Late",
"ar": "التأخير"
},
"search-by": {
"en": "Search By",
"ar": "البحث بواسطة"
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "احصائيات الحضور"
@ -1588,7 +1600,19 @@
"ar": "عدد"
},
"team-members": {
"en": "TEAM MEMBERS",
"en": "Team Members",
"ar": " اعضاء الفريق"
},
"view-attendence": {
"en": "View Attendance",
"ar": " عرض الحضور"
},
"profile-details": {
"en": "Profile Detailes",
"ar": " الملف الشخصي"
},
"my-team-members": {
"en": "My Team Members",
"ar": " اعضاء الفريق"
},
"team-stats": {
@ -2808,7 +2832,7 @@
"ar": "ساعات التقصير"
},
"schedule": {
"en": "Schedule",
"en": "Scheduled Days",
"ar": "ايام العمل"
},
"off-days": {
@ -2819,6 +2843,14 @@
"en": "Non Analyzed",
"ar": "لايوجد تحليل"
},
"view-days": {
"en": "View Days",
"ar": "عرض الأيام"
},
"view-stats": {
"en": "View Stats",
"ar": "عرض الأحصائيات"
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "احصائيات الحضور"

@ -24,4 +24,5 @@
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
}

Loading…
Cancel
Save