fixed merged issues with master-newdesign

MOE_DEV_NEW_TEMPORARY_DESIGN
umasoodch 6 years ago
commit bf317e7274

@ -109,7 +109,7 @@
<ion-item style="padding-left: 4%;" *ngFor="let employee of approversList">
<div class="timeline-item" slot="start">
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImge"

@ -21,6 +21,7 @@ import { SubmitAbsenceModalComponent } from '../submit-absence-modal/submit-abse
styleUrls: ["./absence-confirm.component.scss"]
})
export class AbsenceConfirmComponent implements OnInit {
direction:string;
P_TransactionID: number;
approversList: ApproversList;
selEmp: string = "";
@ -51,7 +52,7 @@ export class AbsenceConfirmComponent implements OnInit {
public WorklistAttachService: WorklistAttachService
) {
this.isSubmitBtnClicked = false;
this.direction = TranslatorService.getCurrentLanguageName()
// this.isResubmitAbs = this.navParams.get("isResubmit");
if (this.isResubmitAbs) {
this.P_TransactionID = this.common.sharedService.getSharedData(

@ -1,6 +1,6 @@
<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
<ion-title color="light">{{ts.trPK('home','leave-balance')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
@ -55,26 +55,20 @@
<div class="result-text-container">
<h2>{{totalnumber}}</h2>
<!-- <h2>{{totalnumber}}</h2> -->
<!-- <h2>{{accrualNet + accrualUsed + accrualYearly}}</h2> -->
<span>{{ts.trPK('absenceList','totalNumber')}}</span>
<!-- <span>{{ts.trPK('absenceList','totalNumber')}}</span> -->
</div>
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart #chart [ngClass]=" direction == 'ltr' ? 'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 82%;
bottom: 128px;
color: black;
background-color: #DDB017;
width: 13%;
height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-green' : 'div-green-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label>
@ -84,13 +78,7 @@
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 59%;
bottom: 131px;
color: black;
background-color: #094875;
width: 13%;
height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualUsed')}}</label>
@ -101,13 +89,7 @@
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 82%;
bottom: 80px;
color: black;
background-color: #CB3232;
width: 13%;
height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-orng' : 'div-orng-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualYearly')}}</label>

@ -15,7 +15,7 @@
right: 8%;
position: fixed;
color: white;
bottom: 20%;
bottom: 5%;
border-radius: 50%;
z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
@ -137,6 +137,17 @@
// padding-top: 29px;
margin-left: -70px !important;
}
.today-graph-ar{
display: block !important;
height: 196px;
width: 385px;
padding-left: 51px;
/* margin-left: -70px !important; */
font-size: 14px;
margin-left: -48px;
margin-right: 63px;
margin-bottom: -30px;
}
.headerGrid{
background-color: white !important;
@ -215,4 +226,65 @@ margin-top: -13px;
left: 0;
top: 0px;
z-index: 1;
}
}
.div-green{
position: relative;
left: 82%;
bottom: 128px;
color: black;
background-color: #1FA269;
width: 13%;
height: 6px;
}
.div-green-ar{
position: relative;
bottom: 59px;
color: black;
background-color: #1FA269;
width: 13%;
height: 6px;
right: 9px;
}
.div-red-ar{
position: relative;
bottom: 131px;
color: black;
background-color: #CB3232;
// background-color: #094875;
// background-color: #DDB017;
width: 13%;
height: 6px;
right: 78px;
}
.div-red{
position: relative;
left: 59%;
bottom: 131px;
color: black;
background-color: #CB3232;
// background-color: #094875;
width: 13%;
height: 6px;
}
.div-orng{
position: relative;
left: 82%;
bottom: 80px;
color: black;
// background-color: #CB3232;
background-color: #DDB017;
width: 13%;
height: 6px;
}
.div-orng-ar{
position: relative;
bottom: 139px;
color: black;
// background-color: #CB3232;
background-color: #DDB017;
width: 13%;
height: 6px;
right: 10px;
}

@ -39,6 +39,7 @@ export class HomeComponent implements OnInit {
ACCRUAL_USED_ENTITLEMENT: any;
ACCRUAL_YEARLY_ENTITLEMENT: any;
totalnumber: any;
public direction: string;
public options = {
cutoutPercentage: 80,
@ -56,6 +57,7 @@ export class HomeComponent implements OnInit {
public accrualService: AccrualService,
public authService: AuthenticationService
) {
this.direction = TranslatorService.getCurrentDirection();
// this.userData =this.common.sharedService.getSharedData(AuthenticatedUser.SHARED_DATA,false);
}
@ -107,10 +109,10 @@ export class HomeComponent implements OnInit {
this.data = {
// labels: ['earingTotal', 'deductionTotal'],
datasets: [
{ data: [this.accrualNet,this.accrualUsed,this.accrualYearly],
{ data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
backgroundColor: [
'#DDB017',
'#094875',
'#1FA269',
'#DDB017',
'#CB3232',],
borderWidth: 2
}
@ -262,11 +264,11 @@ createAbsence() {
this.data = {
// labels: ['earingTotal', 'deductionTotal'],
datasets: [
{ data: [this.accrualNet,this.accrualUsed,this.accrualYearly],
{ data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
backgroundColor: [
'#DDB017',
'#094875',
'#CB3232',],
'#1FA269',
'#DDB017',
'#CB3232',],
borderWidth: 2
}
]

@ -10,21 +10,21 @@
</ion-col> -->
<h2><div class="Header">Confirmation</div></h2>
<h2><div class="Header">{{'eit,confirmation' | translate}}</div></h2>
<div>
<div *ngIf="submitAbsAttachmentList.length==0" class="labelcheck" lines="none" style="text-align: center;">
No Attachment
{{'eit,no-attachment' | translate}}
</div>
<div *ngIf="absComments==''" class="labelcheck" style="text-align: center;margin-bottom: 5px;padding-bottom: 16px;">
No Note
{{'eit,no-note' | translate}}
</div>
</div>
<ion-footer style="border-top: 2px solid grey !important;">
<ion-row class="rowBtn">
<ion-label class="labelRadio">Are you sure you want to submit</ion-label>
<ion-label class="labelRadio">{{'eit,submit' | translate}}</ion-label>
<ion-button class="submitOkButton" (click)="OkBtnModal()"> {{ts.trPK('general','ok')}}
</ion-button>
</ion-row>

@ -12,15 +12,19 @@
</div>
<div style="border-bottom: rgb(190, 186, 186) solid 1px;" >
<div *ngIf='direction==="ltr"' style="border-bottom: rgb(190, 186, 186) solid 1px;" >
<img class="mohemmLogo" src="../assets/imgs/menu_mohemm_logo.png" ></div>
<hr>
<div *ngIf='direction ==="rtl"' style="border-bottom: rgb(190, 186, 186) solid 1px;" >
<img class="mohemmLogo-ar" src="../assets/imgs/menu_mohemm_logo.png" ></div>
<hr>
</div>
<div class="centerDiv homeBox" (click)="openPersonalInfo()">
<div class="profileDiv">
<div [ngClass]="direction==='ltr'? 'profileDiv':'profileDiv-ar'">
<!-- <ion-img class="profileImg" src="{{user_image}}"></ion-img> -->
<img class="profileImg" [src]="user_image">
<p class="TxtPlace">{{User_name_Emp}}</p>
@ -62,7 +66,7 @@
</div> -->
<div style="border-bottom: rgb(190, 187, 187) solid 1px;" >
<button class="logout" ion-button (click)="logout();" > {{ts.trPK('home','logout')}}</button>
<button [ngClass]="direction ==='ltr'? 'logout':'logout-ar'" ion-button (click)="logout();" > {{ts.trPK('home','logout')}}</button>
</div>

@ -17,6 +17,16 @@ header
margin-top: -24px !important;
margin-bottom: 11px;
}
.mohemmLogo-ar{
max-width: 46% !important;
border: 0 !important;
margin-right: 70px !important;
margin-top: -24px !important;
margin-bottom: 11px;
}
.closeIcon{
height: 10px !important;
@ -84,6 +94,22 @@ padding: 6px 24px;
}
.logout-ar{
background-color: #22C6B3;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin-right: 95px !important;
margin-top: 15px !important;
margin-bottom: 20px !important;
border-radius: 30px;
height: 26px;
padding: 6px 24px;
}
.menuImg{
width: 105px !important;
height: 105px !important;

@ -0,0 +1,25 @@
import { Request } from 'src/app/hmg-common/services/models/request';
export class attendanceSwipeScannerRequest extends Request{
public static SHARED_DATA = 'attendanceSwipeScanner-request';
public P_USER_NAME:string;
public P_PASSWORD: string;
public UserName: string;
public CompanyID:number;
public BranchID: number;
public UID:string;
public Latitude:number;
public Longitude:number;
public QRValue: string;
public MemberID:number;
public EmployeeID: number;
public IPAdress: string;
public UserID: string;
}

@ -0,0 +1,20 @@
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { ConnectorService } from "src/app/hmg-common/services/connector/connector.service";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { attendanceSwipeScannerRequest } from '../models/attendanceSwipe.Request';
@Injectable({
providedIn: "root"
})
export class AttendanceService {
public AttendanceSwipeURL : string ='Services/SWP.svc/REST/AuthenticateAndSwipeUser';
constructor(
public con: ConnectorService,
public authService: AuthenticationService
) {}
public attendanceSwipeScanner(attendanceSwipeScanner: attendanceSwipeScannerRequest, onError?: any, errorLabel?: string): Observable<any> {
const request = attendanceSwipeScanner;
this.authService.authenticateRequest(request);
return this.con.post(this.AttendanceSwipeURL,request,onError,errorLabel);
}
}

@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'changePassword,changePassword' | translate}}</ion-title>
</ion-toolbar>

@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'login,forgot-password' | translate}}</ion-title>
</ion-toolbar>

@ -1,7 +1,7 @@
<ion-header *ngIf="!accessFromOutSide">
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'login,verify-login' | translate}}</ion-title>
</ion-toolbar>

@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'login,forgot-password' | translate}}</ion-title>
</ion-toolbar>

@ -62,10 +62,10 @@
<a (click)="signUp()">{{ts.trPK('login','signup')}}</a>
</div>
<div class="gridDiv" aria-disabled="true">
<!-- <button disabled class="gridBtn" ion-button (click)="changeLanguage()" [ngClass]="{'active':this.currentLang ==1}">English</button>
<button disabled class="gridBtn arTxt" ion-button (click)="changeLanguage()" [ngClass]="{'active':this.currentLang ==2}">عربي</button> -->
<button disabled class="gridBtn" ion-button (click)="changeLanguage()" style="background: #dcdcdc !important;color: #ccc6c6 !important;margin: 1px;width: 49%">English</button>
<button disabled class="gridBtn arTxt" ion-button (click)="changeLanguage()" style="background: #dcdcdc !important;color: #ccc6c6 !important;margin: 1px;width: 49%">عربي</button>
<button class="gridBtn" ion-button (click)="changeLanguage()" [ngClass]="{'active':this.currentLang ==1}">English</button>
<button class="gridBtn arTxt" ion-button (click)="changeLanguage()" [ngClass]="{'active':this.currentLang ==2}">عربي</button>
<!-- <button class="gridBtn" ion-button (click)="changeLanguage()" style="background: #dcdcdc !important;color: #ccc6c6 !important;margin: 1px;width: 49%">English</button>
<button class="gridBtn arTxt" ion-button (click)="changeLanguage()" style="background: #dcdcdc !important;color: #ccc6c6 !important;margin: 1px;width: 49%">عربي</button> -->
</div>

@ -1,7 +1,7 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" ></ion-back-button>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<ion-title color="light" > {{'verificationcode,verificationcode' | translate}}</ion-title>
</ion-toolbar>

@ -23,6 +23,7 @@ ion-label {
padding-left: 10px;
}
.header-toolbar-new{
--background: #22c6b3;
}

@ -104,7 +104,7 @@
<ion-item style="padding-left: 4%;" *ngFor="let employee of approversList">
<div class="timeline-item" slot="start">
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImge"

@ -60,9 +60,11 @@ export class ConfirmAddEitComponent implements OnInit {
TransactionID: any;
indexLastObj: any = 0;
filterAllowedType: any = ['application/pdf', 'image/jpeg', 'image/png', 'text/plain', 'image/jpg', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'];
direction: string;
constructor(public modalController: ModalController, public cs: CommonService, private ts: TranslatorService, private eitService: EitService) {
this.direction = TranslatorService.getCurrentLanguageName()
this.isSubmitBtnClicked = false;
this.eitRequest = new EitRequest();
}

@ -1,12 +1,13 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{headerTitle}}</ion-title>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
<ion-title style="color: white;">{{headerTitle}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="">
<div class="contentEit">
<!-- class="colorBG" -->
<div class="content" [hidden]="functionName!='HMG_TKT_NEW_EIT_SS'">
@ -26,7 +27,7 @@
<div class="light-dote"></div>
<!-- </ion-col>
<ion-col> -->
<label class="light-label">{{ts.trPK('absenceList','adult')}}</label>
<label [ngClass]="direction == 'en' ? 'light-label':'light-label-ar' ">{{ts.trPK('absenceList','adult')}}</label>
</ion-col>
<ion-col class="col" size="4">
<div class="blue-dote"></div>
@ -38,7 +39,7 @@
<div class="green-dote"></div>
<!-- </ion-col>
<ion-col> -->
<label class="green-label">{{ts.trPK('absenceList','infants')}} </label>
<label [ngClass]="direction == 'en'? 'green-label':'green-label-ar'">{{ts.trPK('absenceList','infants')}} </label>
</ion-col>
</ion-row>
@ -54,7 +55,7 @@
<div class="gridService">
<ion-row>
<ion-col class="columns">
<div class="adult-dote"></div>
<div [class]="direction =='en'? 'adult-dote':'adult-dote-ar'"></div>
<label>{{ts.trPK('absenceList','adult')}}</label>
<br>
<br>
@ -62,7 +63,7 @@
<br> <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
</ion-col>
<ion-col class="columns">
<div class="child-dote"></div>
<div [ngClass]="direction == 'en'? 'child-dote' :'child-dote-ar'"></div>
<label>{{ts.trPK('absenceList','child')}} </label>
<br>
<br>
@ -71,7 +72,7 @@
<br> <label class="services">{{ts.trPK('absenceList','tickets')}}</label>
</ion-col>
<ion-col class="columns">
<div class="infants-dote"></div>
<div [ngClass]="direction == 'en'? 'infants-dote': 'infants-dote-ar'"></div>
<label>{{ts.trPK('absenceList','infants')}} </label>
<br>
<br>
@ -131,7 +132,7 @@
<div>
<ion-row>
<ion-col class="colBold">
<label for="">{{"confirmAddEit.status" | translate}}</label>
<label for="">{{'confirmAddEit , status' | translate}}</label>
</ion-col>
<ion-col>
<label for="">{{eitAddedObj.status}}</label>
@ -220,11 +221,11 @@
</div>
</div>
<ion-icon class="addClass" name="add" (click)="addEITRrq()"></ion-icon>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<ion-icon class="addClass" name="add" (click)="addEITRrq()"></ion-icon>
</div>
</ion-content>

@ -63,17 +63,28 @@ h4 {
.addClass{
background-color: #094875;
width: 80px;
height: 80px;
right: 8%;
position: fixed;
color: white;
bottom: 20%;
border-radius: 50%;
z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
-moz-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
width: 80px;
height: 80px;
right: 8%;
position: fixed;
color: white;
bottom: 5%;
border-radius: 50%;
z-index: 999;
-webkit-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
-moz-box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
box-shadow: 2px -1px 13px 0px rgba(0,0,0,0.59);
}
.contentEit:before {
position: absolute;
content: "";
// background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
.hrClass{
@ -160,6 +171,11 @@ z-index: 1;
margin-left: 7px !important;
margin-right: 42px;
}
.green-label-ar{
font-size: 15px !important;
margin-left: 7px !important;
margin-right: 15px;
}
.blue-label{
font-size: 15px !important;
margin-left: 7px !important;
@ -170,6 +186,11 @@ z-index: 1;
margin-left: 7px !important;
margin-right: -26px;
}
.light-label-ar{
font-size: 15px !important;
margin-right: 7px !important;
margin-left: -26px;
}
.light-dote{
background-color: #3CB9D5;
@ -241,6 +262,16 @@ z-index: 1;
margin-left: -17px;
margin-right: 5px;
}
.adult-dote-ar{
background-color: #3CB9D5;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 0px;
margin-left: 5px;
}
.child-dote{
background-color: #22C6B3;
@ -251,6 +282,15 @@ z-index: 1;
margin-left: -17px;
margin-right: 5px;
}
.child-dote-ar{
background-color: #22C6B3;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 1px;
margin-left: 5px;
}
.infants-dote{
background-color: #1FA269;
width: 15px;
@ -261,4 +301,14 @@ z-index: 1;
margin-right: 5px;
// margin-bottom: 6px;
}
.infants-dote-ar{
background-color: #1FA269;
width: 15px;
height: 15px;
border-radius: 50% !important;
display: inline-block;
margin-right: 1px;
margin-left: 5px;
}

@ -52,10 +52,12 @@ export class EitListComponent implements OnInit {
gaugeType = "full";
accrualBalancesList: any;
common: any;
direction: string;
// gaugeValue = 11.200;
// gaugeLabel = "";
constructor(private cs: CommonService, private EITService: EitService, private ts: TranslatorService, private modalCtrl: ModalController) {
this.direction = TranslatorService.getCurrentLanguageName()
this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.selEmp = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
this.respID = this.cs.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);

@ -2,6 +2,7 @@
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{headerTitle}}</ion-title>
<ion-buttons slot="start">
<!-- <ion-buttons [ngClass]="direction == 'rtl'? 'icon-right' : 'icon-left' "> -->
<nav-buttons backLink=""></nav-buttons>
</ion-buttons>
</ion-toolbar>
@ -24,7 +25,7 @@
<ion-label>
<b text-wrap>{{menuItem.PROMPT}}</b>
<ion-icon style="float: right;font-size: 25px;color: grey;" name="arrow-forward"></ion-icon>
<ion-icon [ngClass]='direction == "en"? "span-arrow-en":"span-arrow-ar"' name="arrow-forward"></ion-icon>
</ion-label>
@ -36,7 +37,7 @@
<!-- <ion-row>
<ion-col size="10" class="menu-name"><span ion-text color="color2">&nbsp;{{subPage.PROMPT}} </span> -->
<ion-label><span ion-text color="color2">&nbsp;{{subPage.PROMPT}} </span>
<ion-icon style="float: right;font-size: 25px;color: grey;" name="arrow-forward"></ion-icon>
<ion-icon [ngClass]='direction == "en"? "span-arrow-en":"span-arrow-ar"' name="arrow-forward"></ion-icon>
</ion-label>
<!-- </ion-col>
</ion-row> -->

@ -66,3 +66,17 @@ ion-icon::before {
// border-bottom: 1px solid #dedede;
// }
.span-arrow-en{
float: right;
font-size: 25px;
color: grey;
transform: rotate(0deg);
}
.span-arrow-ar{
float: left;
font-size: 25px;
color: grey;
transform: rotate(180deg);
}

@ -16,9 +16,11 @@ export class HomeComponent implements OnInit {
selMenu: MenuResponse = new MenuResponse();
// Selected Side Menu
selectedMenu: any;
direction: string;
pageType :string;
constructor(private cs: CommonService, private ts: TranslatorService) {
this.direction = TranslatorService.getCurrentLanguageName()
this.menu = this.cs.sharedService.getSharedData('menuEntries', false);
this.pageType = this.cs.sharedService.getSharedData('homemenuentries', false);
this.selMenu = this.cs.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);

@ -10,21 +10,21 @@
</ion-col> -->
<h2><div class="Header">Confirmation</div></h2>
<h2><div class="Header">{{'eit,confirmation' | translate}}</div></h2>
<div>
<div *ngIf="submitAttachmentList.length==0" class="labelcheck" lines="none" style="text-align: center;">
No Attachment
{{'eit,no-attachment' | translate}}
</div>
<div *ngIf="eitComments==''" class="labelcheck" style="text-align: center;margin-bottom: 5px;padding-bottom: 16px;">
No Note
{{'eit,no-note' | translate}}
</div>
</div>
<ion-footer style="border-top: 1px solid grey !important;">
<ion-row class="rowBtn">
<ion-label class="labelRadio">Are you sure you want to submit</ion-label>
<ion-label class="labelRadio">{{'eit,submit' | translate}}</ion-label>
<ion-button class="submitOkButton" (click)="OkBtnModal()"> {{ts.trPK('general','ok')}}
</ion-button>
</ion-row>

@ -3,3 +3,5 @@
<span *ngIf="text != 'All'" class="number-span" [ngStyle]="active === true ? {'color': '#ffffff'} : {}">{{value}}</span>
<span class="text-span" [ngStyle]="active === true ? {'color': '#ffffff'} : {}">{{text}}</span>
</div>

@ -8,9 +8,9 @@
<div class="result-graph">
<div class="result-text-container">
<h2 class="percentage">{{percentage}}</h2>
<span>Completed <br><br><br><br></span>
<span>{{ts.trPK('attendance','completed')}}<br><br><br><br></span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart [ngClass]="direction == 'ltr'? 'today-graph':'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</ion-col>
@ -35,7 +35,9 @@
</ion-col>
</ion-row>
<ion-row class="gridrow">
<ion-col [size]="6" style="border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;">
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
@ -50,7 +52,7 @@
</ion-col>
<ion-col [size]="6" style="border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;">
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-in')}}</p>
@ -65,13 +67,12 @@
</ion-row>
</ion-col>
<ion-col [size]="6" style="border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;">
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-row>
</ion-col>
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
<ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row>
<ion-row class="rowlabel">
@ -79,7 +80,7 @@
</ion-row>
</ion-col>
<ion-col [size]="6" style="border-right: 1px solid #ccc;">
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
<ion-row class="rowlabel">
<p>{{ts.trPK('attendance-tracking','shortage')}}</p>

@ -23,12 +23,57 @@
}
}
.result-text-container-ar {
padding: 0;
margin: 0;
position: absolute;
left: 38%;
top: 67%;
display: block;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
h2 {
font-size: 25px;
// font-family: WorkSans-Bold;
font-weight: bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
color: rgb(163, 163, 163) !important;
}
}
.today-graph{
display: block;
height: 127px;
width: 270px;
margin-left: -60px;
}
.today-graph-ar{
display: block;
height: 127px;
width: 270px;
/* margin-left: -61px; */
margin-right: -18px;
}
.amountlabel{
color: black !important;
font-weight: bold !important;
@ -54,10 +99,13 @@ height: 360px !important;
}
.liftcol{
// padding-top: 1px !important;
// padding-bottom: 1px !important;
border-right: 1px solid rgb(163, 163, 163) !important;
}
.liftcol-ar{
border-left: 1px solid rgb(163, 163, 163) !important;
}
.rightcol{
@ -74,6 +122,12 @@ height: 360px !important;
border-radius: 10px;
margin-bottom:10px;
}
.div-ar{
border: 1px solid #a3a3a3 !important;
border-radius: 9px;
width: 264%;
margin-right: -302px;
}
.p0{
margin-bottom: -13px !important;
color: black !important;
@ -114,8 +168,23 @@ height: 360px !important;
display: block;
width: 100%;
}
.p4{
margin-bottom: 56px !important;
.p2-ar{ font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
margin-right: 33px;
}
.p3-ar{ /* margin-bottom: -72px !important; */
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
margin-right: 27px;
}
.p4{ margin-bottom: 56px !important;
margin-top: -26px !important;
color: black !important;
}
@ -137,4 +206,19 @@ height: 360px !important;
.slider-container {
padding-bottom: 20px;
}
}
.col{
border-bottom: 1px solid rgb(204, 204, 204);
border-right: 1px solid rgb(204, 204, 204);
flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
}
.col-ar{
border-bottom: 1px solid rgb(204, 204, 204);
border-left: 1px solid rgb(204, 204, 204);
flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
max-width: calc(calc(6 / var(--ion-grid-columns, 12)) * 100%);
}

@ -36,7 +36,7 @@ export class DateInfoModalComponent implements OnInit {
nameMonth: any;
nameDay: any;
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public direction: string;
public options = {
cutoutPercentage: 85,
tooltips: { enabled: false },
@ -52,7 +52,9 @@ export class DateInfoModalComponent implements OnInit {
public modalController: ModalController,
public navParams: NavParams,
public ts: TranslatorService
) { }
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {
console.log(this.TODAYDATE);

@ -1,7 +1,11 @@
<div feedback class="custom-button">
<div class="iconBox">
<img *ngIf="title != 'My Team' && title != 'Vacation Rule'" [src]="'data:image/png;base64,'+icon" class="icon">
<img *ngIf="title == 'My Team' || title == 'Vacation Rule'" [src]="icon" class="icon">
<img *ngIf="title != 'My Team' && title != 'Vacation Rule' && title != 'فريقي' && title != 'قواعد الإجازات' " [src]="'data:image/png;base64,'+icon" class="icon">
<!-- <img *ngIf="title == 'My Team' || title == 'Vacation Rule'" [src]="icon" class="icon"> -->
<img *ngIf="title == 'My Team' || title == 'فريقي' " [src]="myTeamIcon" class="icon">
<img *ngIf="title == 'Vacation Rule' || title == 'قواعد الإجازات'" [src]="vacationRuleIcon" class="icon">
</div>
<div class="titleBox">
<p class="pClass">{{title}}</p>

@ -17,6 +17,9 @@ export class ServicesButtonComponent implements OnInit {
@Input() disabled = false;
public direction: string;
public style: any;
public myTeamIcon="assets/icon/new-design/leave_balance.png";
public vacationRuleIcon="assets/icon/new-design/vacation_rules_icon.png"
constructor(
public ts: TranslatorService
) {}

@ -1,9 +1,11 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="true" [enableBack]="false" [navigate]="false"></nav-buttons>
<ion-title>DASHBOARD</ion-title>
<div class="profile-image-container" (click)="openProfilePage()">
<img [src]="userImage"/>
<ion-title>{{'home,dashboard' | translate}}</ion-title>
<div slot = "start" class="profile-image-container" (click)="openProfilePage()">
</div>
<div slot="end">
<img class="profile-image" [src]="userImage"/>
</div>
</ion-toolbar>
</ion-header>
@ -27,10 +29,10 @@
<ion-row class="attendance-module" *ngIf="i == 1">
<ion-col [size]="8">
<h3>Monthly Attendance</h3>
<span>View your Monthly Time Sheet</span>
<ion-button (click)="openTimeCard()">
View Detail
<h3>{{'home,monthly-attendance' | translate}}</h3>
<span>{{'home,monthly-time-sheet-view' | translate}}</span>
<ion-button (click)="openTimeCard()">
{{'home,view-detail' | translate}}
</ion-button>
</ion-col>
<ion-col [size]="4">
@ -52,8 +54,8 @@
<ion-slide *ngIf="i == 2">
<app-services-button
(click)="Vacation_Rule()"
title="Vacation Rule"
icon="assets/icon/new-design/vacation_rules_icon.png">
[title]="vacationRuleTitle"
>
</app-services-button>
</ion-slide>
</ion-slides>
@ -61,7 +63,7 @@
</ion-grid>
<div class="fixed-shift-timer" *ngIf="isCheckedIn" (click)="openattentracking()">
<span class="subTitle">Time Left Today</span>
<span class="subTitle"> {{'home,time-left' | translate}} </span>
<circle-progress
[backgroundColor]= "'#094875'"
[percent]="percent"

@ -9,22 +9,30 @@ ion-row {
.profile-image-container{
position: relative;
z-index: 999;
img {
width: 32px;
float: right;
margin-top: -42px;
border-radius: 20px;
height: 32px;
margin-right: 4px;
}
// img {
// width: 32px;
// float: right;
// // margin-top: -42px;
// border-radius: 20px;
// height: 32px;
// // margin-right: 4px;
// }
}
.profile-image{
width: 32px;
float: right;
// margin-top: -42px;
border-radius: 20px;
height: 32px;
// margin-right: 4px;
}
ion-title{
color: white;
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
left: 4%;
right: 4%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;

@ -59,7 +59,7 @@ export class HomePage implements OnInit {
missingSwipeRequestObject: any;
public statsButtons = [
{
title: 'Work List',
title: this.ts.trPK('home','worklist'),
statsValue: 0,
icon: 'assets/icon/new-design/work_list.png',
link: '1'
@ -71,19 +71,19 @@ export class HomePage implements OnInit {
// link: ''
// },
{
title: 'Missing Swipes',
title: this.ts.trPK('home','missing-swipes'),
statsValue: 0,
icon: 'assets/icon/new-design/missing_swipe.png',
link: '2'
},
{
title: 'Leave Balance',
title: this.ts.trPK('home','leave-balance'),
statsValue: 0,
icon: 'assets/icon/new-design/leave_balance.png',
link: '3'
},
{
title: 'Ticket Balance',
title: this.ts.trPK('absenceList','tickets-balance'),
statsValue: 0,
icon: 'assets/icon/new-design/ticket_balance.png',
link: '4'
@ -114,6 +114,11 @@ export class HomePage implements OnInit {
public menuType: any;
accrualBalancesList: any;
public countAllNotification = 0;
myTeamTitle: string;
vacationRuleTitle: string;
public myTeamIcon: string;
public vacationRuleIcon: string;
direction: string;
public isPostNoLoad = true;
constructor(
@ -146,6 +151,16 @@ export class HomePage implements OnInit {
}
ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName();
// this.getUserDetails();
// this.getCount();
// this.events.subscribe('getNotCount', badge => {
// this.notBadge = badge;
// });
this.myTeamTitle= this.ts.trPK('myTeam','myTeam-header');
this.vacationRuleTitle = this.ts.trPK('vacation-rule','vacationRule');
// this.myTeamIcon="assets/icon/new-design/leave_balance.png";
// this.vacationRuleIcon="assets/icon/new-design/vacation_rules_icon.png"
this.common.startLoading();
this.menu.enable(true);
// this.getUserDetails();
@ -609,6 +624,7 @@ getSubordinatesAttStatus() {
}
openPage(subMenu) {
console.log(subMenu);
let selMenu: MenuResponse = new MenuResponse();
selMenu = this.common.sharedService.getSharedData(
MenuResponse.SHARED_DATA,

@ -1,9 +1,10 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('myTeam','myTeam-header')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
<!-- <nav-buttons backLink="/home"></nav-buttons> -->
<nav-buttons></nav-buttons>
</ion-buttons>
<ion-title>{{ts.trPK('myTeam','myTeam-header')}}</ion-title>
</ion-toolbar>
</ion-header>
@ -57,7 +58,7 @@
<div *ngIf="isSearch">
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] (click)="clearSearch()">
<span style="margin-left: 5px;">Clear Search</span>
<span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
</ion-row>

@ -3,13 +3,14 @@ ion-title{
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
left: 4%;
right: 4%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
}
.contentBg{
padding: 0px 20px;
}

@ -3,7 +3,7 @@
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
</ion-buttons>
<ion-title>WORK LIST</ion-title>
<ion-title>{{ts.trPK('home','worklist')}}</ion-title>
</ion-toolbar>
</ion-header>
@ -11,15 +11,15 @@
<div class="contentBg">
<div class="result-graph">
<div class="request-heading">
<span>Open Request Analysis</span>
<span>{{ts.trPK('work-list','open-analysis')}}</span>
</div>
<div class="result-text-container" [ngStyle]="showChart === false ? {'visibility': 'hidden'} : {}">
<span *ngIf="selectedFilter === 'ALL'">{{newWorkListResponse.length + ITGCount}} of </span>
<span *ngIf="selectedFilter === 'ALL'">{{newWorkListResponse.length + ITGCount}} {{ts.trPK('work-list','of')}} </span>
<span *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse.length}} of </span>
<h2 *ngIf="!showSearchButton">{{totalRequestCount}}</h2>
<h2 *ngIf="showSearchButton && newWorkListResponse.length > 0 && itemType === ''">{{newWorkListResponse[0].NO_OF_ROWS + ITGCount}}</h2>
<h2 *ngIf="showSearchButton && newWorkListResponse.length > 0 && selectedFilter !== 'ALL' && itemType !== ''">{{newWorkListResponse[0].NO_OF_ROWS}}</h2>
<span>TOTAL <br> OPEN REQUEST</span>
<span>{{ts.trPK('work-list','total')}} <br> {{ts.trPK('work-list','open-reqest')}}</span>
</div>
<p-chart *ngIf="!showChart" class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart *ngIf="showChart" class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
@ -41,16 +41,16 @@
<ion-row class="search-container">
<ion-col style="float: left;" size=[6] *ngIf="showSearchButton" (click)="clearSearch()">
<span style="margin-left: 5px;">Clear Search</span>
<span style="margin-left: 5px;">{{ts.trPK('work-list','clear-search')}}</span>
<ion-icon name="close" ></ion-icon>
</ion-col>
<ion-col style="float: right;" size=[6] (click)="openSearchModal()" *ngIf="selectedFilter === 'ALL'">
<ion-icon name="search" ></ion-icon>
<span>Advanced Search</span>
<span>{{ts.trPK('work-list','advanced-search')}}</span>
</ion-col>
</ion-row>
<ion-row *ngIf='selectedFilter === "ITG"'>
<ion-row *ngIf='selectedFilter === "ITG"' class="filters-row">
<ion-col>
<ion-slides>
<ion-slide class='slideCss' *ngFor="let segment of ITGSegment">
@ -63,29 +63,43 @@
</ion-row>
<div style="position: relative;">
<div [ngClass]="showFormattedData.length > 0 ? 'work-list-container' : ''" *ngIf='selectedFilter != "ITG"'>
<div [ngClass]="showFormattedData.length > 0 && direction == 'en'? 'work-list-container' : 'work-list-container-ar'" *ngIf='selectedFilter != "ITG"'>
<div *ngFor="let formattedData of showFormattedData; let i = index">
<span class="date-span">{{formattedData.date}}</span>
<span [ngClass]="direction == 'en'? 'date-span':'date-span-ar'">{{formattedData.date}}</span>
<div class="date-data" *ngFor="let workList of formattedData.data; let j = index">
<p (click)="openNotificationDetail(workList)">{{workList.SUBJECT}}</p>
</div>
</div>
</div>
</div>
<div [ngClass]="showFormattedData.length > 0 ? 'work-list-container' : ''" *ngIf="selectedFilter == 'ITG'" >
<div *ngFor='let segmentInfo of ITGItem[0]; let i= index' (click)='openITG(segmentInfo)'>
<span class="date-span">{{segmentInfo.ModifiedDate |date}}</span>
<div class="date-data">
<p>{{segmentInfo.Title}}</p>
</div>
<div [ngClass]="showFormattedData.length > 0 ? 'work-list-container' : ''" *ngIf="selectedFilter == 'ITG'" >
<!-- <div *ngFor='let segmentInfo of ITGItem[0]; let i= index' (click)='openITG(segmentInfo)'> -->
<div *ngFor='let segmentInfo of ITGItem[0]; let i= index' >
<div *ngIf="activeSegment !== 'All'" (click)='openITG(segmentInfo)'>
<span class="date-span">{{segmentInfo.ModifiedDate |date}}</span>
<div class="date-data">
<p>{{segmentInfo.Title}}</p>
</div>
</div>
<div *ngIf="activeSegment == 'All'" >
<div *ngFor="let data of segmentInfo" (click)="openITGAll(data.ID, data.ItemID)">
<span class="date-span">{{data.ModifiedDate | date}}</span>
<div class="date-data">
<p>{{data.Title}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="no-data-available" *ngIf="showFormattedData.length === 0">
<span>{{ts.trPK('work-list','No-data-available')}}</span>
</div>
</div>
<div class="no-data-available" *ngIf="showFormattedData.length === 0">
<span>No Data Available</span>
</div>
</div>
<!-- </div> -->
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="selectedFilter === 'ALL' || itemType !== ''">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>

@ -1,421 +1,459 @@
.bar-stable {
background-color: var(--cusgray) !important;
}
.tabs{
background-color: var(--cusgray) !important;
}
.icon-size-lg {
font-size: 40px;
}
/*Timeline*/
.pos-absolute-right {
position: absolute;
right: 8px;
}
.timelineMain {
position: relative;
margin: 15px 0 0 0;
}
.timelineMain:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1.5%;
height: 99%;
background: #e4e4e4;
z-index: 1;
/* margin-left: -10px; */
/* z-index: 1; */
}
.timelineMain .timelineMain-thumb {
border-radius: 500px;
width: 50px;
z-index: 2;
position: absolute;
// :root[dir="ltr"]{
// left: 37px;
// }
// :root[dir="rtl"]{
// right: 37px;
// }
width: 50px;
float: right;
top: 0px;
}
.timelineMain .timelineMain-thumb.timelineMain-icon {
height: 50px;
// text-align: center;
// color: white;
// border: 5px solid #CBD0D3;
transform: scale(0.3);
}
.bar-stable {
background-color: var(--cusgray) !important;
}
.tabs{
background-color: var(--cusgray) !important;
}
.icon-size-lg {
font-size: 40px;
}
/*Timeline*/
.pos-absolute-right {
position: absolute;
right: 8px;
}
.timelineMain {
position: relative;
margin: 15px 0 0 0;
}
.timelineMain:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1.5%;
height: 99%;
background: #e4e4e4;
z-index: 1;
/* margin-left: -10px; */
/* z-index: 1; */
}
.timelineMain .timelineMain-thumb {
border-radius: 500px;
width: 50px;
z-index: 2;
.timelineMain .timelineMain-item {
width: 50px;
}
.timelineMain .timelineMain-stats {
position: relative;
font-size: 12px;
color: var(--darkgray);
}
.divider-title {
background: #e4e4e4;
padding: 5px 15px;
}
.color-red {
color: var(--danger) !important;
}
.bg-color-dot {
// background-color: #ff3b30 !important;
background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
}
.notification-list{
background: none;
ion-item{
// margin-top: 5px;
// margin-bottom: 5px;
background-color: transparent;
.item-date{
width: 100%;
font-size: 16px;
font-weight: bold;
text-align: start;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 12%;
}
ion-label , [item-end]{
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// left: 37px;
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// right: 37px;
// margin-right: 10px;
// }
width: 50px;
float: right;
top: 0px;
}
.timelineMain .timelineMain-thumb.timelineMain-icon {
height: 50px;
// text-align: center;
// color: white;
// border: 5px solid #CBD0D3;
transform: scale(0.3);
}
.timelineMain .timelineMain-item {
width: 50px;
}
.timelineMain .timelineMain-stats {
position: relative;
font-size: 12px;
color: var(--darkgray);
}
.divider-title {
background: #e4e4e4;
padding: 5px 15px;
}
.color-red {
color: var(--danger) !important;
}
.bg-color-dot {
// background-color: #ff3b30 !important;
background: var(--primary);
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: -webkit-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
background: linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
}
.notification-list{
background: none;
ion-item{
// margin-top: 5px;
// margin-bottom: 5px;
background-color: transparent;
.item-date{
width: 100%;
font-size: 16px;
font-weight: bold;
text-align: start;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 12%;
}
ion-label , [item-end]{
white-space: normal;
font-size: 14px;
padding-top: 15%;
// :root[dir="ltr"]{
// margin-left: 10px;
// }
// :root[dir="rtl"]{
// margin-right: 10px;
// }
}
}
}
}
.input-wrapper {
--flex:none;
--flex:none;
}
ion-input ,ion-datetime{
border-bottom: #dedede 1px solid;
border-bottom: #dedede 1px solid;
}
.left {
--background: #f0efef;
.timelineMain:before{
left: 21px;
--background: #f0efef;
.timelineMain:before{
left: 21px;
}
.notification-list ion-item{
padding-left: 3px;
margin-left: -12%;
}
.timelineMain-thumb{
left: 9%;
top: 30%;
}
}
.right {
--background: #f0efef;
.timelineMain:before{
right: 62px;
}
.notification-list ion-item{
padding-left: 3px;
margin-left: -12%;
padding-right: 3px;
}
.timelineMain-thumb{
left: 9%;
top: 30%;
right: 37px;
}
}
.right {
--background: #f0efef;
.timelineMain:before{
right: 62px;
}
.notification-list ion-item{
padding-right: 3px;
}
.timelineMain-thumb{
right: 37px;
}
}
.menuList{
margin-left: -40px;
height: 160%;
padding-top: 370%;
}
.colorBG{
--background: #f0efef;
}
margin-left: -40px;
height: 160%;
padding-top: 370%;
}
.colorBG{
--background: #f0efef;
}
.menuListCol{
padding-left: 50px;
margin-left: -33px;
padding-left: 50px;
margin-left: -33px;
}
.menuListItem{
padding-top: 9%;
margin: -20%;
padding-left: 13%;
padding-top: 9%;
margin: -20%;
padding-left: 13%;
}
.menuListBtn{
width: 100%;
background: white;
--background: white;
width: 100%;
background: white;
--background: white;
}
.activeTabMenu{
--background: #ff726f;
--background: #ff726f;
}
.notifincationList{
margin-left: 5%;
margin-top: 6%;
margin-left: 5%;
margin-top: 6%;
}
.itemListNotification{
padding-bottom: 18px;
padding-bottom: 18px;
}
.footerSearchBtn{
padding: 0px !important;
background: #f0efef !important;
padding: 0px !important;
background: #f0efef !important;
}
.viewAndSearch{
margin-bottom: 13px;
margin-bottom: 13px;
}
.toSearchBtn{
margin-top: 4%;
margin-top: 4%;
}
.emptyItem{
white-space: normal;
padding-left: 10%;
white-space: normal;
padding-left: 10%;
}
///////////////////////////////////////////NEW DESIGN/////////////////////////////////////
.profile-image-container{
position: relative;
z-index: 999;
img {
width: 32px;
float: right;
border-radius: 20px;
height: 32px;
margin-right: 10px;
}
position: relative;
z-index: 999;
img {
width: 32px;
float: right;
border-radius: 20px;
height: 32px;
margin-right: 10px;
}
}
ion-title{
color: white;
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
color: white;
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
}
.contentBg:before {
position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
ion-content {
--ion-background-color: whitesmoke;
--ion-background-color: whitesmoke;
}
.request-heading {
span {
text-align: center;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
}
span {
text-align: center;
display: block;
padding-top: 8px;
font-family: workSans-Regular;
}
}
.result-graph {
position: relative;
background: white;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
position: relative;
background: white;
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 50%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 38px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
}
.today-graph {
width: 100%;
max-height: 4cm;
}
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
}
}
.today-graph {
width: 100%;
max-height: 4cm;
}
.swiper-container {
margin: 0 !important;
width: 100% !important;
}
.swiper-container {
margin: 0 !important;
width: 100% !important;
}
.filters-row {
margin-top: 10px;
margin-left: 20px;
margin-top: 10px;
margin-left: 20px;
}
.work-list-container {
position: relative;
padding-left: 60px;
clear: both;
min-height: 200px;
margin-bottom: 80px;
padding-top: 15px;
}
.work-list-container:before{
content: "";
position: absolute;
height: 100%;
width: 4px;
left: 30px;
top: 15px;
background-color: #dddddd;
}
.work-list-container-ar {
position: relative;
padding-left: 60px;
clear: both;
min-height: 200px;
margin-bottom: 80px;
padding-top: 15px;
}
.work-list-container:before{
}
.work-list-container-ar:before{
content: "";
position: absolute;
height: 100%;
width: 4px;
left: 30px;
top: 15px;
right: 6px;
background-color: #dddddd;
}
}
.search-container{
margin-top: 15px;
display: block;
padding: 0 20px;
position: relative;
z-index: 99;
ion-col{
background: white;
border-radius: 12px;
padding-right: 10px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 12px;
vertical-align: middle;
}
margin-top: 15px;
display: block;
padding: 0 20px;
position: relative;
z-index: 99;
ion-col{
background: white;
border-radius: 12px;
padding-right: 10px;
flex: none;
ion-icon{
margin-right: 3px;
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
span{
font-size: 12px;
vertical-align: middle;
}
}
}
.date-span {
position: relative;
display: block;
margin-bottom: 10px;
position: relative;
display: block;
margin-bottom: 10px;
}
.date-span:before{
content: "";
position: absolute;
left: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #38c9b3;
top: 1px;
content: "";
position: absolute;
left: -35px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #38c9b3;
top: 1px;
}
.date-data{
background-color: white;
padding: 1px;
border-radius: 20px;
font-family: WorkSans-Regular;
padding-left: 15px;
margin-right: 20px;
margin-bottom: 15px;
p{
font-size: 14px;
.date-span-ar{
position: relative;
display: block;
margin-bottom: 10px;
/* margin-top: 10px; */
margin-right: 30px;
}
.date-span-ar:before{
content: "";
position: absolute;
right: -29px;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #38c9b3;
top: 1px;
}
.date-data{
background-color: white;
padding: 1px;
border-radius: 20px;
font-family: WorkSans-Regular;
padding-left: 15px;
margin-right: 20px;
margin-bottom: 15px;
p{
font-size: 14px;
}
}
.no-data-available {
background: white;
font-family: WorkSans-Regular;
padding: 30px;
position: absolute;
left: 85px;
top: 50px;
background: white;
font-family: WorkSans-Regular;
padding: 30px;
position: absolute;
left: 85px;
top: 50px;
}
.disable-filter {
pointer-events: none;
opacity: .3;
pointer-events: none;
opacity: .3;
}
.total-result {
margin-top: 55px;
padding-left: 20px;
color: #888;
font-size: 15px;
margin-top: 55px;
padding-left: 20px;
color: #888;
font-size: 15px;
}
.text-span{
font-size: 14px;
color: #888;
background-color: white;
width: 93%;
height: 30px;
border: 1px solid;
border-radius: 15px;
font-size: 14px;
color: #888;
background-color: white;
width: 93%;
height: 30px;
border: 1px solid;
border-radius: 15px;
}
.text-span-active{
font-size: 14px;
color: #888;
background-color:#22c6b3;
width: 93%;
height: 30px;
border: 1px solid;
border-radius: 15px;
font-size: 14px;
color: #888;
background-color:#22c6b3;
width: 93%;
height: 30px;
border: 1px solid;
border-radius: 15px;
}
.slideCss{
width: 200px !important;
}
width: 200px !important;
}

@ -23,6 +23,8 @@ export class HomeComponent implements OnInit {
public static ALL_REQUEST = 'all_request';
public static NOTIFICATION_DATA = 'notification_data';
public static NOTIFICATION_ARR = 'notification_arr';
public static NAMES_ALL_iTEMS = 'names-all-items';
public static IS_ALL_NAME = 'is_all_names';
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
private WorkListObj: WorkListRequest;
WorkListResObj: any;
@ -47,12 +49,14 @@ export class HomeComponent implements OnInit {
public noData = false;
public isITG = false;
public isSearch = false;
public direction = 'ltr';
// public direction = 'ltr';
public direction: string;
public ITGCount = 0;
public ITGSegment: {name: string, code: any, data: any, style: boolean} [] = [];
public ITGSegment: { name: string, code: any, data: any, style: boolean, names?: any }[] = [];
public ITGAllItem: any = [];
public selectedITGToActive = false;
public ITGItem: any = [];
public ITGAllItems: any = [];
public activeSegment: any;
public currentActiveIndex = 0;
@ -80,17 +84,17 @@ export class HomeComponent implements OnInit {
};
public data = {
datasets: [
{
data: [0, 0, 0, 0, 0],
backgroundColor: [
'#18a169',
'#38c9b3',
'#114475',
'#3cb9d5',
'#cc3232'
],
borderWidth: 5
}]
{
data: [0, 0, 0, 0, 0],
backgroundColor: [
'#18a169',
'#38c9b3',
'#114475',
'#3cb9d5',
'#cc3232'
],
borderWidth: 5
}]
};
public filters = [
{
@ -165,17 +169,14 @@ export class HomeComponent implements OnInit {
this.WorkListObj.P_PAGE_LIMIT = 50;
}
ionViewDidEnter() {
console.log("ionViewDidEnter");
// this.direction = TranslatorService.getCurrentDirection();
this.worklistNotifications = this.common.sharedService.getSharedData('worklistNotifications', false);
console.log('ionViewDidEnter');
// this.direction = TranslatorService.getCurrentDirection();
this.worklistNotifications = this.common.sharedService.getSharedData('worklistNotifications', false);
}
ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName();
this.worklistNotifications = this.common.sharedService.getSharedData('worklistNotifications', false);
this.common.startLoading();
this.openNotificationsDashboard();
@ -243,15 +244,15 @@ export class HomeComponent implements OnInit {
disableFilters() {
for (const filter of this.filters) {
if (filter.key === this.itemType) {
filter.disable = false;
filter.active = true;
this.selectedFilter = filter.name;
filter.disable = false;
filter.active = true;
this.selectedFilter = filter.name;
} else if (this.itemType === '') {
filter.disable = false;
filter.active = false;
} else {
filter.disable = true;
filter.active = false;
filter.disable = true;
filter.active = false;
}
}
if (this.itemType === '') {
@ -475,54 +476,66 @@ export class HomeComponent implements OnInit {
}
doInfinite(infiniteScroll) {
if (!this.isReachEnd && this.selectedFilter !== 'ITG') {
this.WorklistService.getWorkList(this.WorkListObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.handleWorkListResult(result.GetWorkList);
}
});
} else {
if (this.infiniteScroll) {
this.infiniteScroll.complete();
if (!this.isReachEnd && this.selectedFilter !== 'ITG') {
this.WorklistService.getWorkList(this.WorkListObj).subscribe((result) => {
if (this.common.validResponse(result)) {
this.handleWorkListResult(result.GetWorkList);
}
});
} else {
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
}
Count() {
this.workListService.getITGCount('', '', this.isPostNoLoad)
.subscribe((result: any) => {
for (let i = 0; i < result.RequestType.length; i++) {
this.ITGSegment[i] = {
name: result.RequestType[i].RequestTypeName,
code: result.RequestType[i].RequestTypeCode,
data: result.RequestType[i].RequestDetails,
style: false
};
}
this.setActive(this.ITGSegment[0].code);
});
const datas = [];
const names = [];
this.ITGSegment[0] = {
name: 'All',
code: 'All',
data: null,
style: false
};
this.workListService.getITGCount()
.subscribe((result: any) => {
for (let i = 1; i < result.RequestType.length; i++) {
this.ITGSegment[i] = {
name: result.RequestType[i].RequestTypeName,
code: result.RequestType[i].RequestTypeCode,
data: result.RequestType[i].RequestDetails,
style: false
};
datas[i] = result.RequestType[i].RequestDetails;
names[i] = result.RequestType[i].RequestTypeCode;
}
this.ITGSegment[0].data = datas;
this.ITGSegment[0].names = names;
this.setActive(this.ITGSegment[0].code);
});
}
Details() {
this.workListService.getITGDetails('', '', this.isPostNoLoad)
.subscribe((result: any) => {
this.ITGCount = result.TotalCount;
this.totalRequestCount = this.totalRequestCount + result.TotalCount;
this.filters[5].value = result.TotalCount;
});
this.workListService.getITGDetails()
.subscribe((result: any) => {
this.totalRequestCount = this.totalRequestCount + result.TotalCount;
this.filters[5].value = result.TotalCount;
});
}
ITGNotification() {
this.isAll = false;
this.isPR = false;
this.isPO = false;
this.isMR = false;
this.isHR = false;
this.isITG = true;
// this.Details();
this.isAll = false;
this.isPR = false;
this.isPO = false;
this.isMR = false;
this.isHR = false;
this.isITG = true;
}
searchBtn() {
this.isSearch = !this.isSearch;
this.isSearch = !this.isSearch;
}
setActive(selectedSegment) {
@ -539,13 +552,38 @@ export class HomeComponent implements OnInit {
this.ITGSegment[i].style = false;
}
}
console.log(this.ITGSegment);
}
openITG(segmentInfo) {
openITG(segmentInfo, name?) {
if (name) {
this.common.sharedService.setSharedData(name, HomeComponent.REQUSET_NAME);
this.common.sharedService.setSharedData(this.ITGSegment, HomeComponent.NAMES_ALL_iTEMS);
this.common.sharedService.setSharedData(true, HomeComponent.IS_ALL_NAME);
} else {
this.common.sharedService.setSharedData(this.activeSegment, HomeComponent.REQUSET_NAME);
this.common.sharedService.setSharedData(false, HomeComponent.IS_ALL_NAME);
}
this.common.sharedService.setSharedData(segmentInfo, HomeComponent.REQUSET_INFO);
this.common.sharedService.setSharedData(this.activeSegment, HomeComponent.REQUSET_NAME);
this.common.sharedService.setSharedData(this.ITGItem, HomeComponent.ALL_REQUEST);
this.common.openWorklistITGPage();
}
openITGAll(id, item) {
let count = 0;
let ITEM: any;
let NAME: any;
for (let i = 1; i < this.ITGSegment.length; i++) {
// tslint:disable-next-line: prefer-for-of
for (let j = 0; j < this.ITGSegment[i].data.length; j++) {
if (this.ITGSegment[i].data[j].ID === id && this.ITGSegment[i].data[j].ItemID === item) {
ITEM = this.ITGSegment[i].data[j];
NAME = this.ITGSegment[i].code;
count++;
}
}
}
this.openITG(ITEM, NAME);
}
}

@ -75,7 +75,7 @@
</button>
<div
[ngClass]="{'bg-blue-dot' : approvalInfo.Action === 'Submit', 'bg-green-dot':approvalInfo.Action === 'Approved', 'bg-red-dot':approvalInfo.Action === 'Rejected', 'bg-gray-dot':approvalInfo.Action === 'Pending', 'bg-gray-dot':approvalInfo.Action === ''}"
class="timeline-thumb timeline-icon">
[class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
</div>
<p style="margin-left: -20%; font-size: 12px !important;">{{approvalInfo.Action}}</p>
</div>

@ -26,6 +26,8 @@ export class WorkListMainItgComponent implements OnInit {
public request_info: any;
public request_name: any;
public all_request: any;
public all_request_names: any;
public is_all_items_sents: any;
public request = new itgRequest();
public activeSegment: any = "info";
public request_details: any;
@ -49,6 +51,8 @@ export class WorkListMainItgComponent implements OnInit {
public ExchangeServerSelected: any;
public ExchangeServerDBSelected: any;
public actionBTN: { name: string, image: string, isAvailable: boolean }[] = [];
index2: number;
direction: string;
constructor(
public common: CommonService,
public ts: TranslatorService,
@ -56,9 +60,12 @@ export class WorkListMainItgComponent implements OnInit {
public modalCtrl: ModalController) { }
ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName()
this.request_info = this.common.sharedService.getSharedData(HomeComponent.REQUSET_INFO);
this.request_name = this.common.sharedService.getSharedData(HomeComponent.REQUSET_NAME);
this.all_request = this.common.sharedService.getSharedData(HomeComponent.ALL_REQUEST);
this.all_request_names = this.common.sharedService.getSharedData(HomeComponent.NAMES_ALL_iTEMS);
this.is_all_items_sents = this.common.sharedService.getSharedData(HomeComponent.IS_ALL_NAME);
this.all_request = this.all_request[0];
this.changeITGForm(this.request_info, this.request_name);
}
@ -76,10 +83,9 @@ export class WorkListMainItgComponent implements OnInit {
this.workListService.getITGFormDetails(this.request).subscribe((result: any) => {
this.request_details = result.ITGRequest;
this.grantInfo = result.ITGRequest.GrantFields;
let count = 0;
for (let i = 0; i < result.ITGRequest.FieldGoups.length; i++) {
this.segmentsArray[i] = { name: result.ITGRequest.FieldGoups[i].Title, number: i };
this.segmentData[i] = { name: result.ITGRequest.FieldGoups[i].Title, data: result.ITGRequest.FieldGoups[i].Fields}
this.segmentData[i] = { name: result.ITGRequest.FieldGoups[i].Title, data: result.ITGRequest.FieldGoups[i].Fields }
}
this.segmentsArray[this.segmentsArray.length] = { name: 'Approval Level', number: this.segmentsArray.length }
this.workList = this.request_details.WFHistory;
@ -87,7 +93,9 @@ export class WorkListMainItgComponent implements OnInit {
this.activeSegment = this.segmentsArray[0].name;
for (let i = 0; i < this.options.length; i++) {
this.imageURL(this.options[i].Action);
this.actionBTN[i] = { name: this.options[i].Action, image: this.imageURL(this.options[i].Action), isAvailable: this.options[i].IsAvailable }
this.actionBTN[i] = {
name: this.options[i].Action, image: this.imageURL(this.options[i].Action), isAvailable: this.options[i].IsAvailable
};
}
if (this.grantInfo) {
@ -134,20 +142,44 @@ export class WorkListMainItgComponent implements OnInit {
}
skip() {
for (let i = 0; i < this.all_request.length; i++) { // search for the request that clicked on all request
if (this.request_info.ID == this.all_request[i].ID) { // check if the ID for the request is found.
this.index = i + 1;
if (this.index !== this.all_request.length) { // check if its last one to redirecte to home otherwise to next request.
this.clearDataArray();
this.changeITGForm(this.all_request[this.index], this.request_name);
break;
if (this.is_all_items_sents) {
for (let i = 1; i < this.all_request_names.length; i++) {
for (let j = 0; j < this.all_request_names[i].data.length; j++) {
if (this.request_info.ID === this.all_request_names[i].data[j].ID
&& this.request_info.ItemID === this.all_request_names[i].data[j].ItemID) {
this.index2 = j + 1;
this.index = i + 1;
if (this.all_request_names[i].data.length !== this.index2) {// if there is another request with same type
this.clearDataArray();
this.changeITGForm(this.all_request_names[i].data[this.index2], this.all_request_names[i].code);
return false;
} else if (this.index !== this.all_request_names.length) { // if there is another deffernet type.
this.clearDataArray();
this.changeITGForm(this.all_request_names[this.index].data[j], this.all_request_names[this.index].code);
return false;
}
} else if (this.index === this.all_request_names.length) { //if its the end request redirecte to worklist home
this.common.openNotificationPage();
return false;
}
}
}
} else {
for (let i = 0; i < this.all_request.length; i++) { // search for the request that clicked on all request
if (this.request_info.ID == this.all_request[i].ID) { // check if the ID for the request is found.
this.index = i + 1;
if (this.index !== this.all_request.length) { // check if its last one to redirecte to home otherwise to next request.
this.clearDataArray();
this.changeITGForm(this.all_request[this.index], this.request_name);
break
} else {
this.common.openNotificationPage();
break
}
} else {
this.common.openNotificationPage();
break;
break
}
} else {
this.common.openNotificationPage();
break;
}
}
}

@ -1,6 +1,6 @@
<ion-content>
<div class="search-header" (click)="dismissModal()">
<h2>Advanced Search</h2>
<h2>{{ts.trPK('general','sadvanced-search')}}</h2>
<ion-icon slot="icon-only" name="md-close"></ion-icon>
</div>
@ -46,8 +46,8 @@
</div>
<ion-item lines="none">
<ion-label class="enable-overflow">Item Type</ion-label>
<ion-select class="custom-width" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
<ion-label>{{ts.trPK('vacation-rule','itemType')}}</ion-label>
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
[(ngModel)]="itemType">
<ion-select-option value="HRSSA">HR</ion-select-option>
<ion-select-option value="POAPPRV">PO</ion-select-option>
@ -57,7 +57,7 @@
</ion-item>
<div class="search-button" (click)="search()">
<span>SEARCH</span>
<span>{{ts.trPK('searchForReplacment','search')}}</span>
</div>
</div>
</ion-content>

@ -456,7 +456,7 @@
</button>
</div> -->
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge" src="../assets/imgs/profile.png">

@ -99,6 +99,7 @@ export class WorklistMainMRComponent implements OnInit {
approveDis: boolean = false;
rejectDis: boolean = false;
requestDis: boolean = false;
direction: string;
@ -113,7 +114,7 @@ export class WorklistMainMRComponent implements OnInit {
private modalCtrl: ModalController,
public worklistService: WorklistService
) {
this.direction = TranslatorService.getCurrentLanguageName()
//this.getPassNotificationDetails = this.common.sharedService.getSharedData('passNotificationInfo');
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;

@ -594,7 +594,7 @@
</button>
</div> -->
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge" [src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge" src="../assets/imgs/profile.png"> </div>
</div>

@ -115,6 +115,7 @@ export class WorklistMainPoComponent implements OnInit {
approveDis: boolean = false;
rejectDis: boolean = false;
requestDis: boolean = false;
direction: string;
constructor(
@ -128,6 +129,7 @@ export class WorklistMainPoComponent implements OnInit {
private modalCtrl: ModalController,
public worklistService: WorklistService,
) {
this.direction = TranslatorService.getCurrentLanguageName()
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;
this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;

@ -307,7 +307,7 @@
</button>
</div> -->
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge"

@ -100,6 +100,7 @@ export class WorklistMainPRComponent implements OnInit {
approveDis: boolean;
rejectDis: boolean;
requestDis: boolean;
direction: string;
constructor(
@ -113,7 +114,7 @@ export class WorklistMainPRComponent implements OnInit {
private modalCtrl: ModalController,
public worklistService: WorklistService
) {
this.direction = TranslatorService.getCurrentLanguageName()
//this.getPassNotificationDetails = this.common.sharedService.getSharedData('passNotificationInfo');
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;

@ -337,7 +337,7 @@
<ion-item *ngFor="let actionHistory of actionHistoryRes">
<div class="timeline-item" slot="start">
<div class="timeline-thumb timeline-icon">
<div [class]="direction == 'en'? 'timeline-thumb-en timeline-icon': 'timeline-thumb-ar timeline-icon'">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE" class="empImge"
[src]="'data:image/png;base64,'+actionHistory.EMPLOYEE_IMAGE">
<img *ngIf="actionHistory.EMPLOYEE_IMAGE == null" class="empImge"

@ -94,6 +94,7 @@ export class WorklistMainComponent implements OnInit {
rejectDis: boolean = false;
requestDis: boolean = false;
moreDisabled: boolean = true;
direction: string;
constructor(
public worklistService: WorklistService,
@ -110,6 +111,7 @@ export class WorklistMainComponent implements OnInit {
) {
this.direction = TranslatorService.getCurrentLanguageName()
this.WorkListActionHistoryObj = new WorkListActionHistoryRequest();
this.WorkListActionHistoryObj.P_PAGE_NUM = this.P_PAGE_NUM;
this.WorkListActionHistoryObj.P_PAGE_LIMIT = this.P_PAGE_LIMIT;

@ -38,7 +38,7 @@
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
<div>
<ion-row>
<ion-row *ngIf="direction == 'ltr'">
<ion-col>
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
@ -47,19 +47,32 @@
</ion-col>
<ion-col>
<p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
<!-- <label class="label" for="">{{showPaySlip.PAYSLIP_CHOICE}}</label> -->
<!-- <label class="p" for="">{{showPaySlip.PERIOD_NAME}}</label> -->
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
</ion-col>
<ion-col>
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
</button>
</ion-col>
</ion-row>
<ion-row *ngIf="direction == 'rtl'">
<ion-col>
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
</button>
</ion-col>
<ion-col>
<p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
</ion-col>
<ion-col>
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
</button>
</ion-col>
</ion-row>
</div>
@ -78,7 +91,7 @@
[value]="gaugeValue"
[label]="gaugeLabel">
</ngx-gauge> -->
<div class="result-graph">
<div [ngClass]="direction == 'en'? 'result-graph':'result-graph-ar'">
<!-- <div class="request-heading">
@ -86,7 +99,7 @@
</div> -->
<div class="result-text-container">
<div [ngClass]="direction == 'en'? 'result-text-container':'result-text-container-ar'">
<h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
@ -98,12 +111,7 @@
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-green' : 'div-green-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
@ -113,12 +121,7 @@
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-blue' : 'div-blue-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>
@ -138,9 +141,9 @@
<!-- <p>Summary of Payment</p> -->
<div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
<div *ngIf="GetSummaryOfPaymentList !=''">
<div *ngIf="GetSummaryOfPaymentList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','summary-payment')}} </div>
<ion-grid class="grids">
<ion-row class="bgcolor">
<ion-col class="colPayslip">
@ -201,8 +204,8 @@
</ion-grid>
</div>
<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
<div *ngIf="GetEarningsList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','earnings')}} </div>
<ion-grid class="grids">
<ion-row class="bgcolor">
<ion-col class="colPayslip">
@ -224,8 +227,8 @@
</ion-grid>
</div>
<div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
<div *ngIf="GetDeductionsList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','deductions')}} </div>
<ion-grid class="grids">
<ion-row class="bgcolor">
<ion-col class="colPayslip">
@ -247,14 +250,9 @@
</ion-grid>
</div>
<!-- ///////////////////////////////////// -->
<!-- <ion-item style="margin: 10px;border-radius: 5px;">
<ion-label>choose payslip</ion-label>
<ion-select (ionChange)="showInfo($event)" okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}" [(ngModel)]="choosePayslip">
<ion-select-option value="{{i}}" selected="{{(i==0).toString()}}" *ngFor="let options of GetPayslipList; let i=index">{{options.PAYSLIP_CHOICE}} </ion-select-option>
</ion-select>
</ion-item> -->
<div *ngIf="GetPaymentInformationList !=''">
<div class="hrTitle"> {{ts.trPK('payslip','payment-information')}} </div>
<div *ngIf="GetPaymentInformationList !=''">
<div *ngFor="let paymentInfo of GetPaymentInformationList">
@ -314,4 +312,5 @@
</ion-grid>
</div>
</div>
</div>
</ion-content>

@ -117,6 +117,15 @@
--background: transparent !important;
}
.activeArrow-ar{
height: 26px;
width: 26px;
color: white;
background: transparent !important;
--background: transparent !important;
margin-right: 25px;
}
.slidbtn{
background: transparent;
@ -131,12 +140,27 @@
background: transparent !important;
--background: transparent !important;
}
.disabledArrow-ar{
height: 26px;
width: 26px;
color: #908d8d;
background: transparent !important;
--background: transparent !important;
margin-right: 3px;
margin-left: -124px;
}
.result-graph{
font-size: 14px;
margin-left: -48px;
margin-right: 3px;
}
.result-graph-ar{
font-size: 14px;
margin-right: -48px;
margin-left: 3px;
}
.headerGrid{
background-color: white !important;
border: 1px solid #cac8c8 !important;
@ -150,6 +174,37 @@
padding-right: 21px;
}
.result-text-container-ar {
padding: 0;
margin: 0;
position: absolute;
left: 54%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 25px;
font-family: WorkSans-Bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 15px;
font-family: workSans-Regular;
}
}
.result-text-container {
padding: 0;
margin: 0;
@ -267,4 +322,36 @@ margin-top: -13px;
margin-left: 58px;
margin-bottom: 12px;
padding-right: 5px;
}
.div-green{
position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;
}
.div-green-ar{
position: relative;
// left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;
}
.div-blue{
position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;
}
.div-blue-ar{
position: relative;
// left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;
}

@ -42,6 +42,7 @@ export class HomeComponent implements OnInit {
sliderOne: any;
payslipIndex :any;
data:any;
public direction: string;
@ViewChild('slides') slides: IonSlides;
@ViewChild('slideWithNav') slideWithNav: IonSlides;
@ViewChild('chart') chart: UIChart;
@ -57,6 +58,7 @@ export class HomeComponent implements OnInit {
tooltips: { enabled: false },
legend: { display: false }};
gaugeType = "full";
// gaugeValue = 11.200;
// gaugeLabel = "";
@ -70,10 +72,13 @@ export class HomeComponent implements OnInit {
public cs: CommonService,
) {}
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {
this.direction = TranslatorService.getCurrentLanguageName()
// this.selEmp = this.common.sharedService.getSharedData(
// MenuResponse.SHARED_SEL_EMP,
// false

@ -1,7 +1,7 @@
<ion-content class="colorBG">
<div class="header-div">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
</ion-buttons>
<p class="proTitles">{{ts.trPK('userProfile','title')}}</p>
@ -26,16 +26,16 @@
<div class="gridService">
<ion-row>
<ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_YEARS}}</label>
<br> <label class="services">YEARS</label>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
<br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
</ion-col>
<ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_MONTHS}}</label>
<br> <label class="services">MONTHS</label>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
<br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>
</ion-col>
<ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_DAYS}}</label>
<br> <label class="services">DAYS</label>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
<br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
</ion-col>
</ion-row>
@ -47,7 +47,7 @@
<div class="list">
<ion-list class="list-ios">
<div class="p">
<p>Years of Services</p>
<p>{{ts.trPK('userProfile','Years of Services')}}</p>
</div>
<ion-item class="itemline" (click)="openEditprofile()">
@ -58,7 +58,7 @@
<ion-label class="profile">
{{ts.trPK('userProfile','edit-profile')}}
</ion-label>
<ion-icon style= "width: 20px; height: 22px !important;" name="arrow-forward" item-right></ion-icon>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item>
<ion-item class="itemlins" (click)="openPerormance()">
@ -69,7 +69,7 @@
<ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}}
</ion-label>
<ion-icon style= "width: 20px; height: 22px !important;" name="arrow-forward" item-right></ion-icon>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item>
</ion-list>

@ -106,6 +106,18 @@
font-size: 12px;
color: white;
}
.service-ar{
font-size: 28px;
color: white;
letter-spacing: 1px;
font-weight: bold;
margin-right: 26px;
}
.services-ar{
font-size: 14px;
color: white;
margin-right: 25px;
}
.list{
margin-left: 14px;
@ -150,4 +162,14 @@
margin-top: 4px;
}
.arrow{
width: 20px;
height: 22px !important;
}
.arrow-ar{
float: left;
font-size: 25px;
color: grey;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

@ -21,7 +21,7 @@ export class EditProfileComponent implements OnInit {
User_name_Emp: string = "";
User_Job_name: string;
public direction: string;
private menu: MenuController;
setImage:any;
// imageSrc: any = "../assets/imgs/profile.png";
@ -44,6 +44,7 @@ export class EditProfileComponent implements OnInit {
)
{
this.direction = TranslatorService.getCurrentDirection();
this.events.subscribe("img-change", displayImg => {
console.log("app compont: "+displayImg);
this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
@ -107,7 +108,7 @@ private handlePerformanceAppraisalResult(result){
this.performanceData=[];
for(let i=0;i<this.appraisalArr.length;i++){
this.performanceData.push({name:this.appraisalArr[i].APPRAISAL_YEAR,value :this.appraisalArr[i].APPRAISAL_SCORE});
this.performanceData.push({name:this.appraisalArr[i].APPRAISAL_YEAR,value :parseInt(this.appraisalArr[i].APPRAISAL_SCORE).toFixed()});
}
console.log("PerformanceAppraisalResponse");
this.sharedData.setSharedData(this.performanceData, PerformanceAppraisalResponse.PERFORMANCE_DATA);

@ -10,13 +10,21 @@
</div>
</ion-header> -->
<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('userProfile','title')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="header-div">
<ion-buttons slot="start">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<p class="proTitles">{{ts.trPK('userProfile','title')}}</p>
<p class="proTitles">{{ts.trPK('userProfile','title')}}</p> -->
<!-- <div class="centerDiv profileDiv"> -->
<div class="centerDiv homeBox">
@ -32,7 +40,7 @@
</div>
<div class="changeImgBtn">
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
<ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon>
</button>

@ -50,6 +50,11 @@ ion-col.colBold, ion-col.colBold > label{
top: 80%;
left: 65%;
}
.changeImgBtn-ar{
position: absolute;
top: 80%;
left: 74%;
}
.profileImg{
width: 160px;
height: 160px;

@ -14,6 +14,7 @@ export class HomeComponent implements OnInit {
personalInfo: any;
setImage:any;
imageSrc: any = "../assets/imgs/profile.png";
public direction: string;
// user_image: any = "../assets/imgs/profile.png";
constructor(
public ts: TranslatorService,
@ -24,7 +25,7 @@ export class HomeComponent implements OnInit {
) {
this.direction = TranslatorService.getCurrentDirection();
this.events.subscribe("img-change", displayImg => {
// alert("1 - profile home : "+displayImg);
//this.user_image = "data:image/png;base64"+displayImg;

@ -1,12 +1,22 @@
<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('userProfile','performance')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<div class="header-div">
<ion-buttons slot="start">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons>
<p class="proTitles">{{ts.trPK('userProfile','performance')}}</p>
<p class="proTitles">{{ts.trPK('userProfile','performance')}}</p> -->
<div class="profilediv">
<img class="profileImg" [src]="user_image">
<!-- <img class="profileImg" [src]="user_image"> -->
</div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
@ -15,12 +25,12 @@
<ion-grid>
<div class="grid">
<ion-row>
<p class="Text">Performance Evaluation</p>
<div class="gauge">
<p [ngClass]=" direction == 'ltr' ? 'Text' : 'Text-ar'">{{ts.trPK('userProfile','performance-evaluation')}}</p>
<div [ngClass]=" direction == 'ltr' ? 'gauge' : 'gauge-ar'" >
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"
<!-- [showText]="showText" -->
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"
[angleSpan]="240" [startAngle]="-120" [bigSegments]="5"
[smallSegments]="10" (select)="onSelect($event)">
</ngx-charts-gauge>
@ -55,11 +65,11 @@
<ion-col *ngFor="let data of performanceData ;let i = index" [ngClass]="length % 2 != 0 && i == length - 1 ? 'rightgrid' : 'leftgrid'" >
<div class="performancecolor" [style.background]="data.color"></div>
<br>
<label class="label"> Your Performance In </label>
<label class="label"> {{data.name}} </label>
<label [ngClass]=" direction == 'ltr' ? 'label' : 'label-ar'"> {{ts.trPK('userProfile','your-performance')}} </label>
<label [ngClass]=" direction == 'ltr' ? 'label' : 'label-ar'"> {{data.name}} </label>
<br>
<label class="labelvalue"> {{data.value}} </label>
<label class="percentage"> %</label>
<label [ngClass]=" direction == 'ltr' ? 'labelvalue' : 'labelvalue-ar'"> {{data.value}} </label>
<label [ngClass]=" direction == 'ltr' ? 'percentage' : 'percentage-ar'"> %</label>
</ion-col>
</ion-row>
</div>

@ -76,6 +76,19 @@
text-align: center;
margin-left: 74px;
}
.Text-ar{
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
color: black;
font-size: 16px;
margin-top: 5px;
margin-bottom: 10px;
text-align: center;
margin-right: 131px;
}
.leftgrid{
margin-left: 10px;
@ -120,19 +133,37 @@
margin-top: -7px !important;
font-weight: bold !important;
}
.label-ar{
font-size: 15px !important;
margin-top: -7px !important;
font-weight: bold !important;
}
.labelvalue{
font-size: 28px !important;
font-size: 25px !important;
font-weight: bold !important;
margin-top: 7px !important;
margin-left: 72px !important;
margin-left: 90px !important;
}
.labelvalue-ar{
font-size: 24px !important;
font-weight: bold !important;
/* margin-top: 7px !important; */
margin-right: 19px !important;
}
.percentage{
font-size: 15px !important;
font-size: 19px !important;
margin-top: 15px !important;
}
.percentage-ar{
font-size: 19px !important;
margin-right: -54px;
}
.gauge{
transform: translate(-24px, -65px);
@ -140,5 +171,11 @@
margin-top: -20px;
}
.gauge-ar{
transform: translate(-24px, -65px);
margin-bottom: -187px;
margin-top: -20px;
margin-right: -56px;
}

@ -19,56 +19,61 @@ import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/mo
export class PerformanceEvaluationComponent implements OnInit {
personalInfo: any;
user_image: any = "../assets/imgs/profile.png";
setImage:any;
setImage: any;
view: any = [380, 450];
public performanceData: any=[];
public performanceData: any = [];
public length;
public direction: string;
// public showText:boolean =false;
constructor( public ts: TranslatorService,
constructor(public ts: TranslatorService,
public cs: CommonService,
public DS :DashboredService,
public DS: DashboredService,
public authService: AuthenticationService,
// private events: Events,
// private sanitizer: DomSanitizer,
) {
// this.events.subscribe("img-change", displayImg => {
// console.log("app compont: "+displayImg);
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
// });
}
// private events: Events,
// private sanitizer: DomSanitizer,
) {
this.direction = TranslatorService.getCurrentDirection();
// this.events.subscribe("img-change", displayImg => {
// console.log("app compont: "+displayImg);
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
// });
}
colorScheme = {
domain: ['#22C6B3', '#094875', '#3CB9D5', '#1FA269', '#0D155E']
};
colorScheme = {
domain: ['#22C6B3', '#094875','#3CB9D5','#1FA269','#0D155E']
};
ngOnInit() {
this.getProfile();
this.performanceData = this.cs.sharedService.getSharedData(
PerformanceAppraisalResponse.PERFORMANCE_DATA,
true
);
console.log(this.performanceData.length);
//i % 2 == 0
this.length=this.performanceData.length;
//i % 2 == 0
this.length = this.performanceData.length;
for(let i=0;i<this.performanceData.length;i++){
this.performanceData[i].color =this.colorScheme.domain[i];
console.log( i+" : "+this.performanceData[i].name)
for (let i = 0; i < this.performanceData.length; i++) {
this.performanceData[i].color = this.colorScheme.domain[i];
console.log(i + " : " + this.performanceData[i].name)
}
console.log( this.performanceData[0].color)
}
console.log(this.performanceData[0].color)
}
ngAfterViewInit() {
document.querySelector("svg .gauge.chart > text").remove();
}
getProfile() {
console.log("getProfile");
@ -78,11 +83,12 @@ export class PerformanceEvaluationComponent implements OnInit {
if (user) {
this.personalInfo = user;
this.user_image = user.EMPLOYEE_IMAGE
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
: "../assets/imgs/profile.png";
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
: "../assets/imgs/profile.png";
}
});
}
}});
}
}

@ -1,9 +1,11 @@
<ion-header>
<ion-toolbar class="header-toolbar">
<ion-toolbar class="header-toolbar-new">
<ion-title color="light" > {{ts.trPK('userProfile','changepicture')}}</ion-title>
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
<nav-buttons></nav-buttons>
<!-- <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> -->
</ion-buttons>
<ion-title color="light" > {{ts.trPK('userProfile','changepicture')}}</ion-title>
<ion-buttons slot="end">
<button style="color: white !important;" class="headerBtn" *ngIf="saveChange != ''" (click)="updateImageProfile();" >
{{ts.trPK('general','save')}}

@ -8,7 +8,9 @@
// background: transparent;
// border-radius: 50% !important;
// }
.header-toolbar-new{
--background: #22c6b3;
}
.imgCircle{
// width: 90px;

@ -1,9 +1,11 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title>{{ts.trPK('home','monthly-attendance')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
<!-- <nav-buttons backLink="/home"></nav-buttons> -->
<nav-buttons></nav-buttons>
</ion-buttons>
<ion-title>MONTHLY ATTENDANCE</ion-title>
</ion-toolbar>
</ion-header>
@ -12,7 +14,7 @@
<div>
<div class="header">
<div>
<ion-row>
<ion-row *ngIf="direction == 'ltr'">
<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>
@ -23,12 +25,24 @@
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
<ion-row *ngIf="direction == 'rtl'">
<ion-col [size]="2" style="text-align: left;">
<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}} {{year}}</span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon [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>
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','attendance-statistics')}}</span>
<div >
<span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar' ">{{ts.trPK('myTeam','attendance-statistics')}}</span>
</div>
<div style="position: relative;">
<div class="label-container">
@ -81,7 +95,7 @@
</ion-col>
</ion-row>
<div *ngIf="showData" class="calendar-container">
<div *ngIf="showData" [ngClass]="direction == 'ltr' ? 'calendar-container':'calendar-container-ar' ">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<app-circle-calendar
[currentDateParent]="currentDate"

@ -495,8 +495,8 @@ ion-title{
position: absolute;
top: 0;
text-align: center;
left: 15%;
right: 15%;
// left: 15%;
// right: 15%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;
@ -719,6 +719,7 @@ $actionBtnSize : 36px;
color: gray;
}
.result-graph {
position: relative;
background: white;
@ -729,14 +730,22 @@ $actionBtnSize : 36px;
margin-bottom: 10px;
}
.request-heading {
span {
// span {
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
// }
}
.request-heading-ar{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 215px;
}
.result-text-container {
padding: 0;
margin: 0;
@ -901,6 +910,19 @@ $actionBtnSize : 36px;
margin-left: 10px;
}
}
.calendar-container-ar{
background: white;
margin-bottom: 100px;
margin-top: 20px;
border-radius: 20px;
span{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 196px;
}
}

@ -21,13 +21,17 @@ export class TimeCardDetailsComponent implements OnInit {
year: any;
preMonth: number;
nextMonth: any;
public direction: string;
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService,
public ts: TranslatorService
) { }
) {
this.direction = TranslatorService.getCurrentDirection();
console.log(this.direction);
}
public showMore: any = true;
public menuType: any;

@ -1,7 +1,9 @@
import { UiElement } from "./ui-element";
import { TranslatorService } from '../hmg-common/services/translator/translator.service';
export class SelectInput extends UiElement {
public direction: string;
constructor(
private label: string,
private elementId: string,
@ -11,25 +13,49 @@ export class SelectInput extends UiElement {
private hidden: string,
private required: string) {
super(elementId, containerId, '');
this.direction = TranslatorService.getCurrentLanguageName();
this.createElement(this.getTemplate());
}
public getTemplate() {
let template :string = "";
let requiredClass: string = "";
if (this.required == 'Y')
requiredClass = "requiredClass"
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 dynamicField' 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> ";
// const template =
// "<div class='custom-text-area-element dynamicField' style='"+this.hidden+"'>" +
// " <label class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
// " <select [ngClass]= direction == 'en'? 'daynamicForm-Select' : 'ardaynamicForm-Select' id='" + this.elementId + "' "+this.disabled+">"+
// "<option value='"+this.value+"' >"+this.value+"</option>"+
// "</select>"+
// "</div> ";
if(this.direction == 'en'){
template =
"<div class='custom-text-area-element dynamicField' 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> ";
}
else{
template =
"<div class='custom-text-area-element dynamicField' style='"+this.hidden+"'>" +
" <label class='ardaynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
" <select class='ardaynamicForm-Select' id='" + this.elementId + "' "+this.disabled+">"+
"<option value='"+this.value+"' >"+this.value+"</option>"+
"</select>"+
"</div> ";
}
//[ngClass]=\"{\'daynamicForm-Select\': !ar,\'daynamicForm-Selects\':ar}\
// [ngClass]= direction == 'en'? 'daynamicForm-Select' : 'daynamicForm-Selects'
// [ngClass]=" direction === 'rtl' ? 'daynamicForm-Selects' : 'daynamicForm-Select'"
// class='daynamicForm-Select' id='" + this.elementId + "'
// "<ion-item style='" + this.hidden + "'>" +

@ -1,6 +1,8 @@
import { UiElement } from "./ui-element";
// import { TranslatorService } from '../hmg-common/services/translator/translator.service';
export class TimeInput extends UiElement {
// public direction: string;
constructor(
private label: string,
private elementId: string,
@ -10,6 +12,7 @@ export class TimeInput extends UiElement {
private hidden: string,
private required: string) {
super(elementId, containerId, '');
// this.direction = TranslatorService.getCurrentLanguageName();
this.createElement(this.getTemplate());
}
@ -21,6 +24,7 @@ export class TimeInput extends UiElement {
public getTemplate() {
let requiredClass: string = "";
let disaledClass = "";
if (this.required == 'Y')
@ -31,11 +35,12 @@ export class TimeInput extends UiElement {
this.formatDate();
}
const template =
"<div class='custom-text-area-element dynamicField' style='"+this.hidden+"'>" +
"<div class='custom-text-area-element' style='"+this.hidden+"'>" +
" <label class='daynamicForm-Label "+requiredClass+"' id='title' >" + this.label + "</label>" +
// " <input class='daynamicForm-DateTime' type='time' id='" + this.elementId + "' value='" + this.value + "' "+this.disabled+" />"+
" <div class='daynamicForm-DateTime "+disaledClass+"' id='" + this.elementId + "' data-dtvalue='" + this.value + "' "+this.disabled+">"+this.value+"</div>"+
"</div> ";
// "<ion-item>" +
// " <ion-label style='font-size: medium !important;' id='title' >" + this.label + "</ion-label>" +

@ -1,11 +1,11 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<!-- <nav-buttons></nav-buttons> -->
<ion-title color="light">{{ 'vacation-rule, vacationRule' | translate}}</ion-title>
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
<!-- <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> -->
<nav-buttons></nav-buttons>
</ion-buttons>
<ion-title color="light">{{ 'vacation-rule, vacationRule' | translate}}</ion-title>
</ion-toolbar>
</ion-header>

@ -1,9 +1,11 @@
<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ 'vacation-rule, vacation-type' | translate}}</ion-title>
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/vacation-rule/home" ></ion-back-button>
<!-- <ion-back-button color="light" class="btnBack" defaultHref="/vacation-rule/home" ></ion-back-button> -->
<nav-buttons></nav-buttons>
</ion-buttons>
<ion-title color="light">{{ 'vacation-rule, vacation-type' | translate}}</ion-title>
</ion-toolbar>
</ion-header>

@ -888,6 +888,23 @@
"en": "Work List",
"ar": "قائمة العمل"
},
"pending-request":{
"en":"Penading Request",
"ar":"طلبات قيد الانتظار"
},
"missing-swipes":{
"en":"Missing Swipes",
"ar":"البصمات المفقوده"
},
"leave-balance":{
"en":"Leave Balance",
"ar":"رصيد الاجزات"
},
"":{
"en":"",
"ar":""
},
"possitionAlert": {
"en": "The app could not access your location. Make sure that the location service is enabled from your device settings",
"ar": "تعذر على التطبيق الوصول إلى موقعك. تأكد من تفعيل خدمة الموقع من إعدادات جهازك"
@ -923,6 +940,52 @@
"account-info": {
"en": "Would you like to login with current username?",
"ar": "هل ترغب في تسجيل الدخول باسم المستخدم الحالي؟"
},
"monthly-attendance":{
"en":"Monthly Attendance",
"ar":"الحضور الشهري"
},
"monthly-time-sheet-view":{
"en":"View your Monthly Time Sheet",
"ar":"عرض حضورك الشهري لساعات العمل"
},
"view-detail":{
"en":"View Detail",
"ar":"عرض التفاصيل"
},
"time-left":{
"en":"Time Left Today",
"ar":"باقي الوقت لليوم"
}
},
"work-list":{
"open-analysis":{
"en":"Open Request Analysis",
"ar":"فتح تحليل الطلب"
},
"total":{
"en":"Total",
"ar":"المجموع"
},
"open-reqest":{
"en":"OPEN REQUEST",
"ar":"الطلبات المفتوحه"
},
"clear-search":{
"en":"Clear Search",
"ar":"مسح البحث"
},
"of":{
"en":"of",
"ar":"من"
},
"advanced-search":{
"en":"Advanced Search",
"ar":"بحث متقدم"
},
"No-data-available":{
"en":"No Data Available",
"ar":"لا يوجد بيانات"
}
},
"userProfile": {
@ -942,6 +1005,10 @@
"en": "Performance",
"ar": "الاداء"
},
"your-performance": {
"en": "Your Performance In",
"ar": "ادائك في"
},
"changepicture":{
"en":"Change Picture",
"ar":"تغيير الصوره"
@ -978,6 +1045,18 @@
"en": "Employee Name",
"ar": "اسم الموظف "
},
"years": {
"en": "Years",
"ar": "سنوات "
},
"years-of-services": {
"en": " Years of Services",
"ar": "سنوات الخبره"
},
"months": {
"en": "Months",
"ar": "اشهر "
},
"orgName": {
"en": "Organization Name",
"ar": "اسم المنشأة"
@ -1054,6 +1133,10 @@
"ar": "تقويم الحضور الشهري",
"en": "Monthly Attendance Calendar"
},
"completed": {
"ar": "منجز",
"en": "Completed"
},
"present": {
"ar": "حضور",
"en": "Present"
@ -1226,12 +1309,12 @@
},
"confirm-msg-success": {
"en" :"Are you sure, you want to Apply for Vacation Rule?",
"ar" :"Are you sure, you want to Apply for Vacation Rule?"
"ar" :" تريد التقديم على قواعد الاجازات ؟, هل انت متأكد"
},
"update-msg-success": {
"en" :"Are you sure, you want to Update this Vacation Rule?",
"ar" :"Are you sure, you want to Update this Vacation Rule?"
"ar" :"تريد تحديث قواعد الاجازات ؟, هل انت متأكد"
}
},
@ -1354,7 +1437,7 @@
},
"todayAttendance": {
"en": "Today's Attendance",
"ar": "Today's Attendance"
"ar": "حضور اليوم"
},
"checkIn": {
"en": "Check-In",
@ -1370,7 +1453,7 @@
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "Attendance Statistics"
"ar": "احصائيات الحضور"
},
"myTeam-header": {
"en": "My Team",
@ -1378,11 +1461,11 @@
},
"total": {
"en": "TOTAL",
"ar": "TOTAL"
"ar": "المجموع"
},
"team-members": {
"en": "TEAM MEMBERS",
"ar": "TEAM MEMBERS"
"ar": "اعضاء الفريق"
}
},
"searchForReplacment": {
@ -1463,6 +1546,22 @@
"deleteAttach": {
"en": "Attachment deleted successfully",
"ar": "تحديث"
},
"confirmation":{
"en":"Confirmation",
"ar":"تاكيد"
},
"no-attachment":{
"en":"No Attachment",
"ar":"لا يوجد مرفقات"
},
"no-note":{
"en":"No Note",
"ar":"لا يوجد ملاحظات"
},
"submit":{
"en":"Are you sure you want to submit?",
"ar":"هل انت متاكد من ارسال الطلب؟"
}
},
"submitAbsence": {
@ -2270,11 +2369,11 @@
},
"deductions-key":{
"en": "DED",
"ar":" "
"ar":" المستقطع"
},
"earnings-key":{
"en": "NET",
"ar":" "
"ar":"المكتسب "
},
"particular":{
"en": "Particular",
@ -2301,7 +2400,7 @@
"attendance-tracking": {
"title":{
"en": "Mark Attendance",
"ar":"Mark Attendance "
"ar":"علامة الحضور "
},
"check-in":{
"en": "Check In",

@ -42,6 +42,9 @@ ion-label{
.profileDiv{
margin: 5px auto !important;
}
.profileDiv-ar{
margin: 16px auto !important;
}
.full-modal{
--height:100%;
--width:100%;
@ -576,6 +579,37 @@ ion-col.colBold,ion-col.colBold>label{
}
}
.ardaynamicForm-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;
margin-right: 12px !important;
:root[dir="ltr"]{
font-family: var(--fontFamilySemiBoldEN) !important;
}
:root[dir="rtl"]{
font-family: var(--fontFamilyIOSAR) !important;
font-weight: bold;
}
}
img.flipImg{
:root[dir="rtl"]{
-webkit-transform: scaleX(-1);
@ -646,6 +680,7 @@ img.flipImg{
box-shadow: none;
-webkit-box-shadow:none;
-moz-box-shadow: none;
margin-bottom: 8px;
}
.daynamicForm-DateTime:after{
width: 0;
@ -683,7 +718,55 @@ img.flipImg{
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
margin-left: 20px;
// 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;
}
}
.ardaynamicForm-Select{
color: var(--dark);
font-size: 15px;
// background: url(http://i62.tinypic.com/15xvbd5.png) no-repeat 96% 0;
// background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), -webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(0, 0, 0, 0.12)), color-stop(50%, rgba(0, 0, 0, 0.12)));
// background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=), linear-gradient(to top, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.12) 50%);
// background-size: 96% 0;
// background-repeat: no-repeat;
border: none;
font-weight: 400;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
width: 80%;
padding: 6px 0px;
background-color: var(--light);
border-bottom: var(--cusgray) solid 1px;
border-radius: 0px;
margin-right: 34px;
margin-top: -10px;
// -webkit-appearance: none;
// -moz-appearance: none;
@ -712,6 +795,7 @@ img.flipImg{
}
}
.daynamicForm-Select:after{
width: 0;
height: 0;

@ -186,7 +186,24 @@ ion-label.labelValue.sc-ion-label-md-h.sc-ion-label-md-s.md.hydrated
/* z-index: 1; */
}
.timeline .timeline-thumb {
.timeline-en .timeline-thumb {
border-radius: 500px;
width: 70px !important;
z-index: 2;
position: absolute;
left: 0px;
// :root[dir="ltr"]{
// left: 37px;
// }
// :root[dir="rtl"]{
// right: 37px;
// }
float: right;
top: 9px;
}
.timeline-ar .timeline-thumb {
border-radius: 500px;
width: 70px !important;

Loading…
Cancel
Save