add digital ID and fixed worklist issues.

enad-Q1-HMG
enadhilal 5 years ago
parent 9247af4cc2
commit 4bccdd5f28

@ -120,6 +120,8 @@ export class AppComponent implements OnInit {
this.events.subscribe('setMenu', () => { this.events.subscribe('setMenu', () => {
const user = this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => { const user = this.authService.loadAuthenticatedUser().subscribe((user: AuthenticatedUser) => {
if (user) { if (user) {
console.log(user);
localStorage.setItem("digitalIDUser", JSON.stringify(user));
this.digitalIDUser = user//JSON.stringify(user); this.digitalIDUser = user//JSON.stringify(user);
this.companyUrl = user.CompanyImageURL ? user.CompanyImageURL : '../assets/imgs/CSLogo.png'; this.companyUrl = user.CompanyImageURL ? user.CompanyImageURL : '../assets/imgs/CSLogo.png';
this.companyDesc = user.CompanyImageDescription ? user.CompanyImageDescription : 'Powered By Cloud Solutions'; this.companyDesc = user.CompanyImageDescription ? user.CompanyImageDescription : 'Powered By Cloud Solutions';

@ -63,12 +63,5 @@
</ng-container> </ng-container>
</ion-row> </ion-row>
<page-trailer [small]="true"></page-trailer> <page-trailer [small]="true"></page-trailer>
</ion-grid> </ion-grid>
<!-- <ion-button *ngIf="userInfo" class="button-digital-id" (click)="openDigitalId()">
<p style="color: black;">{{ts.trPK('general','digital-id')}}</p>
<img [ngClass]=" direction === 'en' ? 'digital-id-en' : 'digital-id-ar'" src="../assets/imgs/ID_ico.png">
</ion-button> -->
</ion-content> </ion-content>

@ -1,6 +1,6 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import {ButtonSettings} from 'src/app/hmg-common/ui/button/models/button-settingsl'; import { ButtonSettings } from 'src/app/hmg-common/ui/button/models/button-settingsl';
import {TranslatorService} from 'src/app/hmg-common/services/translator/translator.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { LoginRequest } from 'src/app/hmg-common/services/authentication/models/login.request'; import { LoginRequest } from 'src/app/hmg-common/services/authentication/models/login.request';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service'; import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
@ -50,7 +50,7 @@ export class ConfirmLoginComponent implements OnInit {
private iosLink: string; private iosLink: string;
private androidLink: string; private androidLink: string;
public isNFCAvailable = false; public isNFCAvailable = false;
direction:string; direction: string;
userInfo: any; userInfo: any;
constructor( constructor(
@ -63,19 +63,19 @@ export class ConfirmLoginComponent implements OnInit {
public platform: Platform, public platform: Platform,
public modalController: ModalController, public modalController: ModalController,
private nfc: NFC private nfc: NFC
) { ) {
this.loginData = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false); this.loginData = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false);
this.deviceToken = this.cs.sharedService.getSharedData(AuthenticationService.DEVICE_TOKEN, false); this.deviceToken = this.cs.sharedService.getSharedData(AuthenticationService.DEVICE_TOKEN, false);
// if device token undefind // if device token undefind
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
if (this.deviceToken == undefined) { if (this.deviceToken == undefined) {
this.deviceToken = localStorage.getItem('deviceToken'); this.deviceToken = localStorage.getItem('deviceToken');
} }
this.lastLogin = this.cs.sharedService.getSharedData(AuthenticationService.LAST_LOGIN, false); this.lastLogin = this.cs.sharedService.getSharedData(AuthenticationService.LAST_LOGIN, false);
this.username = localStorage.getItem('user'); this.username = localStorage.getItem('user');
this.password = localStorage.getItem('password'); this.password = localStorage.getItem('password');
this.empname = localStorage.getItem('emp-name'); this.empname = localStorage.getItem('emp-name');
} }
ngOnInit() { ngOnInit() {
@ -125,7 +125,7 @@ export class ConfirmLoginComponent implements OnInit {
icon: 'assets/icon/login/101.png', icon: 'assets/icon/login/101.png',
settings: new ButtonSettings(true, true, true, true), settings: new ButtonSettings(true, true, true, true),
value: 3, value: 3,
disabled: this.isFaceorFinger === 'face' ? false : true, disabled: this.isFaceorFinger === 'face' ? false : true,
visible: this.onlySMSBox, visible: this.onlySMSBox,
buttonClass: 'buttonClassWhite', buttonClass: 'buttonClassWhite',
pClass: 'pClassMyFileIconBlack', pClass: 'pClassMyFileIconBlack',
@ -161,16 +161,16 @@ export class ConfirmLoginComponent implements OnInit {
switch (el.value) { switch (el.value) {
case 1: case 1:
console.log(el.value); console.log(el.value);
localStorage.setItem("login-type",el.value); localStorage.setItem("login-type", el.value);
console.log("login-type: "+ localStorage.getItem("login-type")) console.log("login-type: " + localStorage.getItem("login-type"))
if(this.FFloginType == 3 || this.FFloginType == 2 ){ if (this.FFloginType == 3 || this.FFloginType == 2) {
this.cs.setActiveTypeLogin(el.value); this.cs.setActiveTypeLogin(el.value);
}else{ } else {
this.cs.setActiveTypeLogin(0); this.cs.setActiveTypeLogin(0);
} }
this.loginWithSMS(el); this.loginWithSMS(el);
break; break;
case 2: case 2:
@ -183,15 +183,15 @@ export class ConfirmLoginComponent implements OnInit {
break; break;
case 4: case 4:
console.log(el.value); console.log(el.value);
localStorage.setItem("login-type",el.value); localStorage.setItem("login-type", el.value);
if(this.FFloginType == 3 || this.FFloginType == 2 ){ if (this.FFloginType == 3 || this.FFloginType == 2) {
this.cs.setActiveTypeLogin(el.value); this.cs.setActiveTypeLogin(el.value);
}else{ } else {
this.cs.setActiveTypeLogin(0); this.cs.setActiveTypeLogin(0);
} }
this.loginWithWhatsapp(el); this.loginWithWhatsapp(el);
break; break;
default: default:
@ -203,46 +203,46 @@ export class ConfirmLoginComponent implements OnInit {
loginWithSMS(el) { loginWithSMS(el) {
if (!el.disabled) { if (!el.disabled) {
if (this.loginData.LogInTokenID) { if (this.loginData.LogInTokenID) {
this.sendActivationCode(1); this.sendActivationCode(1);
} else { } else {
// this.checkUserAuthentication(1); // this.checkUserAuthentication(1);
// this.checkUserAuthentication();** // this.checkUserAuthentication();**
} }
} }
} }
loginWithWhatsapp(el) { loginWithWhatsapp(el) {
if (!el.disabled) { if (!el.disabled) {
if (this.loginData.LogInTokenID) { if (this.loginData.LogInTokenID) {
this.sendActivationCode(2); this.sendActivationCode(2);
} else { } else {
// this.checkUserAuthentication(2); // this.checkUserAuthentication(2);
} }
} }
} }
public sendActivationCode(type: number) { public sendActivationCode(type: number) {
const request = new SendActivationByType(); const request = new SendActivationByType();
this.authService.setPublicFields(request); this.authService.setPublicFields(request);
request.OTP_SendType = type; request.OTP_SendType = type;
request.MobileNumber = this.loginData.MobileNumber; request.MobileNumber = this.loginData.MobileNumber;
request.IsMobileFingerPrint =0; request.IsMobileFingerPrint = 0;
request.P_USER_NAME=this.loginData.P_USER_NAME; request.P_USER_NAME = this.loginData.P_USER_NAME;
request.LogInTokenID =this.loginData.LogInTokenID; request.LogInTokenID = this.loginData.LogInTokenID;
request.P_LEGISLATION_CODE =this.loginData.P_LEGISLATION_CODE;//"SA"; request.P_LEGISLATION_CODE = this.loginData.P_LEGISLATION_CODE;//"SA";
// request.VersionID ="2.0"; // request.VersionID ="2.0";
// request.LanguageID = imeiData && imeiData.PreferredLanguage || request.LanguageID; // request.LanguageID = imeiData && imeiData.PreferredLanguage || request.LanguageID;
this.authService this.authService
@ -259,7 +259,7 @@ export class ConfirmLoginComponent implements OnInit {
.subscribe((result: any) => { .subscribe((result: any) => {
if (result.isSMSSent) { if (result.isSMSSent) {
// tslint:disable-next-line: max-line-length // tslint:disable-next-line: max-line-length
this.cs.sharedService.setSharedData({MobileNumber: this.loginData.MobileNumber, loginType: this.selectedOption}, SMSCheckRequest.SHARED_DATA); this.cs.sharedService.setSharedData({ MobileNumber: this.loginData.MobileNumber, loginType: this.selectedOption }, SMSCheckRequest.SHARED_DATA);
this.cs.openSMSPage(); this.cs.openSMSPage();
} }
}); });
@ -293,7 +293,7 @@ export class ConfirmLoginComponent implements OnInit {
private presentBiometricDialog() { private presentBiometricDialog() {
this.faio.show({ this.faio.show({
title: 'Biometric Authetnciation', // (Android Only) | optional | Default: "<APP_NAME> Biometric Sign On" title: 'Biometric Authetnciation', // (Android Only) | optional | Default: "<APP_NAME> Biometric Sign On"
subtitle: 'Coolest Plugin ever' , // (Android Only) | optional | Default: null subtitle: 'Coolest Plugin ever', // (Android Only) | optional | Default: null
description: this.ts.trPK('general', 'auth-please'), // optional | Default: null description: this.ts.trPK('general', 'auth-please'), // optional | Default: null
fallbackButtonTitle: this.ts.trPK('general', 'use-pin'), // optional | When disableBackup is false defaults to "Use Pin". fallbackButtonTitle: this.ts.trPK('general', 'use-pin'), // optional | When disableBackup is false defaults to "Use Pin".
disableBackup: true, // optional | default: false disableBackup: true, // optional | default: false
@ -302,39 +302,39 @@ export class ConfirmLoginComponent implements OnInit {
// disableBackup: true, // Only for Android(optional) // disableBackup: true, // Only for Android(optional)
// localizedFallbackTitle: this.ts.trPK("general", "use-pin"), // Only for iOS // localizedFallbackTitle: this.ts.trPK("general", "use-pin"), // Only for iOS
// localizedReason: this.ts.trPK("general", "auth-please") // Only for iOS // localizedReason: this.ts.trPK("general", "auth-please") // Only for iOS
}).then((result: any) => { }).then((result: any) => {
const request = { const request = {
DeviceType: this.cs.getDeviceType(), DeviceType: this.cs.getDeviceType(),
DeviceToken: this.deviceToken DeviceToken: this.deviceToken
}; };
// this.authService.setPublicFields(request); // this.authService.setPublicFields(request);
// request.MobileNumber = this.loginData.MobileNumber; // request.MobileNumber = this.loginData.MobileNumber;
// request.P_USER_NAME=this.loginData.P_USER_NAME; // request.P_USER_NAME=this.loginData.P_USER_NAME;
// request.UserName=this.loginData.P_USER_NAME; // request.UserName=this.loginData.P_USER_NAME;
// request.LogInTokenID =this.loginData.LogInTokenID; // request.LogInTokenID =this.loginData.LogInTokenID;
// request.CompanyID =1;//cs=1 , HMG=2 // request.CompanyID =1;//cs=1 , HMG=2
this.getMobileInfo(request); this.getMobileInfo(request);
}).catch((error: any) => { }).catch((error: any) => {
console.log(error); console.log(error);
}); });
} }
private getMobileInfo(request: any) { private getMobileInfo(request: any) {
this.authService.getLoginInfo(request, () => { }, this.ts.trPK('general', 'ok')).subscribe((result: GetLoginInfoResponse) => { this.authService.getLoginInfo(request, () => { }, this.ts.trPK('general', 'ok')).subscribe((result: GetLoginInfoResponse) => {
if (result.Mohemm_GetMobileLoginInfoList.length > 0) { if (result.Mohemm_GetMobileLoginInfoList.length > 0) {
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
if ( result.Mohemm_GetMobileLoginInfoList[0].LoginType == 2 || result.Mohemm_GetMobileLoginInfoList[0].LoginType == 3) { if (result.Mohemm_GetMobileLoginInfoList[0].LoginType == 2 || result.Mohemm_GetMobileLoginInfoList[0].LoginType == 3) {
this.loginTokenID = result.LogInTokenID; this.loginTokenID = result.LogInTokenID;
this.checkSMS(); this.checkSMS();
} else {
this.onlySMSBox = false;
this.button();
}
} else { } else {
this.onlySMSBox = false; this.onlySMSBox = false;
this.button(); this.button();
} }
}); } else {
this.onlySMSBox = false;
this.button();
}
});
} }
@ -363,7 +363,7 @@ export class ConfirmLoginComponent implements OnInit {
request.P_USER_NAME = data.P_USER_NAME; request.P_USER_NAME = data.P_USER_NAME;
request.MobileNumber = data.MobileNumber; request.MobileNumber = data.MobileNumber;
request.IsDeviceNFC = this.isNFCAvailable; request.IsDeviceNFC = this.isNFCAvailable;
this.authService.checkSMS(request, () => {}, this.ts.trPK('general', 'ok')) this.authService.checkSMS(request, () => { }, this.ts.trPK('general', 'ok'))
.subscribe((result: SMSCheckResponse) => { .subscribe((result: SMSCheckResponse) => {
if (this.cs.validResponse(result)) { if (this.cs.validResponse(result)) {
@ -375,7 +375,7 @@ export class ConfirmLoginComponent implements OnInit {
this.authService.setAuthenticatedUser(result).subscribe(() => { this.authService.setAuthenticatedUser(result).subscribe(() => {
localStorage.setItem('emp-name', result.MemberInformationList[0].EMPLOYEE_NAME); localStorage.setItem('emp-name', result.MemberInformationList[0].EMPLOYEE_NAME);
this.user_name = result.MemberInformationList[0].EMPLOYEE_NAME; this.user_name = result.MemberInformationList[0].EMPLOYEE_NAME;
const currDateTime = moment().format('MMM DD , YYYY HH:mm'); const currDateTime = moment().format('MMM DD , YYYY HH:mm');
localStorage.setItem('login-at', currDateTime); localStorage.setItem('login-at', currDateTime);
if (this.platform.is('cordova')) { if (this.platform.is('cordova')) {
this.insertMobileLogin(); this.insertMobileLogin();
@ -401,91 +401,104 @@ export class ConfirmLoginComponent implements OnInit {
request.EmployeeName = this.user_name; request.EmployeeName = this.user_name;
this.authService.insertMobileLoginInfo(request, () => { }, this.ts.trPK('general', 'ok'), this.isPostNoLoad) this.authService.insertMobileLoginInfo(request, () => { }, this.ts.trPK('general', 'ok'), this.isPostNoLoad)
.subscribe((result: any) => { .subscribe((result: any) => {
console.log('successful insertMobileLoginInfo' ); console.log('successful insertMobileLoginInfo');
}); });
} }
// do silent login // do silent login
private checkUserAuthentication() { private checkUserAuthentication() {
this.cs.startLoading(); this.cs.startLoading();
const request = new LoginRequest(); const request = new LoginRequest();
request.P_USER_NAME = this.username; request.P_USER_NAME = this.username;
request.P_LANGUAGE = 'US'; // this.language; request.P_LANGUAGE = 'US'; // this.language;
request.P_PASSWORD = this.password; request.P_PASSWORD = this.password;
this.authService this.authService
.login(request, () => { .login(request, () => {
console.log('error here'); console.log('error here');
}, this.ts.trPK('general', 'ok')) }, this.ts.trPK('general', 'ok'))
.subscribe((result: CheckUserAuthenticationResponse) => { .subscribe((result: CheckUserAuthenticationResponse) => {
console.log('success'); console.log('success');
this.cs.stopLoading(); this.cs.stopLoading();
if (this.cs.validResponse(result)) { if (this.cs.validResponse(result)) {
this.loginData = new LoginModel(); this.loginData = new LoginModel();
this.loginData.LogInTokenID = result.LogInTokenID; this.loginData.LogInTokenID = result.LogInTokenID;
this.loginData.MobileNumber = result.MemberLoginList.P_MOBILE_NUMBER; this.loginData.MobileNumber = result.MemberLoginList.P_MOBILE_NUMBER;
this.loginData.P_USER_NAME = this.username; this.loginData.P_USER_NAME = this.username;
this.loginData.EmployeeName = this.user_name; this.loginData.EmployeeName = this.user_name;
this.sharedData.setSharedData(this.loginData, AuthenticationService.LOGIN_DATA); this.sharedData.setSharedData(this.loginData, AuthenticationService.LOGIN_DATA);
this.cs.sharedService.setSharedData(this.loginData.P_USER_NAME, LoginRequest.SHARED_DATA); this.cs.sharedService.setSharedData(this.loginData.P_USER_NAME, LoginRequest.SHARED_DATA);
this.confirm(this.loginType); this.confirm(this.loginType);
} else { } else {
if (result.IsPasswordExpired) { if (result.IsPasswordExpired) {
// alert("dont forget to handelpresentPasswordExpiredDialog() "); // alert("dont forget to handelpresentPasswordExpiredDialog() ");
// this.presentPasswordExpiredDialog(); ***** // this.presentPasswordExpiredDialog(); *****
}
} }
}
}); });
} }
private handleAppUpdate(result) { private handleAppUpdate(result) {
this.iosLink = result.IOSLink; this.iosLink = result.IOSLink;
this.androidLink = result.AndroidLink; this.androidLink = result.AndroidLink;
if (this.platform.is('android')) { if (this.platform.is('android')) {
if (this.androidLink) { if (this.androidLink) {
window.open(this.androidLink, '_system'); window.open(this.androidLink, '_system');
} }
} else if (this.platform.is('ios')) { } else if (this.platform.is('ios')) {
if (this.iosLink) { if (this.iosLink) {
window.open(this.iosLink, '_system'); window.open(this.iosLink, '_system');
} }
}
} }
}
public checkAppUpdated() {
this.authService.checkApplicationVersion(() => {}).subscribe((result: CheckAppVersionResponse) => {
// tslint:disable-next-line: triple-equals
if (result.MessageStatus == 2 && result.ErrorType == 4) {
this.cs.presentAcceptDialog(result.ErrorEndUserMessage, () => {
this.handleAppUpdate(result);
});
// tslint:disable-next-line: triple-equals
} else if (result.MessageStatus == 1) {
this.checkUserAuthentication();
}
});
}
checkAccess(el: any) { public checkAppUpdated() {
const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false); this.authService.checkApplicationVersion(() => { }).subscribe((result: CheckAppVersionResponse) => {
this.loginType = el;
if (this.accessFromOutSide) {
this.checkAppUpdated();
} else {
// tslint:disable-next-line: triple-equals // tslint:disable-next-line: triple-equals
if (!data == undefined ) { if (result.MessageStatus == 2 && result.ErrorType == 4) {
this.confirm(this.loginType); this.cs.presentAcceptDialog(result.ErrorEndUserMessage, () => {
} else { this.handleAppUpdate(result);
});
// tslint:disable-next-line: triple-equals
} else if (result.MessageStatus == 1) {
this.checkUserAuthentication();
}
});
}
checkAccess(el: any, isDigitalID = false, buttonType?) {
const data = this.sharedData.getSharedData(AuthenticationService.LOGIN_DATA, false);
if (isDigitalID) {
this.button();
this.checkButtonType(buttonType);
}
else {
console.log(data);
this.loginType = el;
if (this.accessFromOutSide) {
this.checkAppUpdated(); this.checkAppUpdated();
} else {
// tslint:disable-next-line: triple-equals
if (!data == undefined) {
this.confirm(this.loginType);
} else {
this.checkAppUpdated();
}
}
} }
} }
}
async openDigitalId() { checkButtonType(typeNumber) {
const modal = await this.modalController.create({ let buttonSelected;
component: DigitalIdComponent, this.buttons.forEach(element => {
cssClass: 'digital-id-modal-css' element.forEach(elementValue => {
}); if(typeNumber === elementValue.value){
return await modal.present(); buttonSelected = elementValue;
} }
});
});
this.sharedData.setSharedData(true, "loginWithDigitalIDButton");
this.loginType = buttonSelected;
this.checkAppUpdated();
}
} }

@ -1,4 +1,4 @@
<ion-content dir="ltr"> <ion-content *ngIf="userInfo.CompanyMainCompany == 'CS'" dir="ltr">
<img *ngIf="userInfo.PAYROLL_CODE === 'CS' " style="width: 100%; max-width: 100%;" src="../assets/imgs/IDTOP.png"> <img *ngIf="userInfo.PAYROLL_CODE === 'CS' " style="width: 100%; max-width: 100%;" src="../assets/imgs/IDTOP.png">
<img *ngIf="userInfo.PAYROLL_CODE !== 'CS' " style="width: 100%; max-width: 100%;" src="../assets/imgs/IDTOP_HMG.png.png"> <img *ngIf="userInfo.PAYROLL_CODE !== 'CS' " style="width: 100%; max-width: 100%;" src="../assets/imgs/IDTOP_HMG.png.png">
<ion-grid> <ion-grid>
@ -27,9 +27,45 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>
<ion-content *ngIf="userInfo.CompanyMainCompany != 'CS'" dir="ltr">
<ion-grid>
<ion-row>
<ion-col size="3"></ion-col>
<ion-col size="9" *ngIf="userInfo.EMPLOYEE_IMAGE != null" padding>
<img *ngIf="userInfo.EMPLOYEE_IMAGE != null" [src]="'data:image/png;base64,'+userInfo.EMPLOYEE_IMAGE" style="width: 60%; height: 100%; border: 3px solid black;">
<img *ngIf="userInfo.EMPLOYEE_IMAGE == null" src="../assets/imgs/profilePic.png" style="width: 60%; height: 100%; border: 3px solid black;">
</ion-col>
</ion-row>
<ion-row style="padding: 0%;">
<ion-col style="text-align: center;font-weight: bold;font-family: 'WorkSans-Bold'; padding: 0%;">
<p style="font-size: 20px; padding: 0%;">{{userInfo.EMPLOYEE_NUMBER}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col style="text-align: center;font-weight: bold;font-family: 'WorkSans-Bold'; padding: 0%;">
<p style="font-size: 20px; padding: 0%;">{{userInfo.EMPLOYEE_DISPLAY_NAME}}</p>
</ion-col>
</ion-row>
<ion-row style="padding: 0%;">
<ion-col style="text-align: center;font-weight: bold;font-family: 'WorkSans-Bold'; padding: 0%;">
<p style="font-size: 15px; padding: 0%;">{{userInfo.JOB_NAME}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<img *ngIf="userInfo.CompanyImageURL" style="width: 90%; max-width: 100%; margin-left: 6%;" [src]="userInfo.CompanyBadge">
<img *ngIf="!userInfo.CompanyImageURL" style="width: 50%; max-width: 100%; margin-left: 16%;" src="../assets/imgs/HMG_LOGO.png">
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<img style="width: 50%; max-width: 100%; margin-left: 25%;" [src]="userInfo.EmployeeQR">
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-footer> <ion-footer>
<div class="centerDiv" style="margin-top: 20px !important;"> <div class="centerDiv" style="margin-top: 20px !important;">

@ -16,6 +16,9 @@ export class DigitalIdComponent implements OnInit {
) { } ) { }
ngOnInit() { ngOnInit() {
if(JSON.parse(localStorage.getItem('digitalIDUser'))){
this.userInfo = JSON.parse(localStorage.getItem('digitalIDUser'));
}
console.log(this.userInfo); console.log(this.userInfo);
} }

@ -134,7 +134,7 @@ export class AuthenticationService {
mobileType = 'android'; mobileType = 'android';
} }
request.VersionID = 2.8; request.VersionID = 2.8;
request.Channel = 31; request.Channel = 33;
request.LanguageID = TranslatorService.getCurrentLanguageCode(); request.LanguageID = TranslatorService.getCurrentLanguageCode();
request.MobileType = mobileType; request.MobileType = mobileType;
@ -209,7 +209,7 @@ export class AuthenticationService {
public login(request: LoginRequest, onError: any, errorLabel: string): Observable<Response> { public login(request: LoginRequest, onError: any, errorLabel: string): Observable<Response> {
this.setPublicFields(request); this.setPublicFields(request);
request.P_APP_VERSION="CS"; request.P_APP_VERSION="HMG";
return this.con.post(AuthenticationService.login, request, onError, errorLabel); return this.con.post(AuthenticationService.login, request, onError, errorLabel);
} }
@ -336,6 +336,8 @@ export class AuthenticationService {
user.TokenID = result.TokenID; user.TokenID = result.TokenID;
user.CompanyImageDescription=result.CompanyImageDescription; user.CompanyImageDescription=result.CompanyImageDescription;
user.CompanyImageURL=result.CompanyImageURL; user.CompanyImageURL=result.CompanyImageURL;
user.CompanyBadge = result.CompanyBadge;
user.CompanyMainCompany = result.CompanyMainCompany;
user.LogInTokenID = this.cs.sharedService.getSharedData( user.LogInTokenID = this.cs.sharedService.getSharedData(
AuthenticationService.LOGIN_DATA, AuthenticationService.LOGIN_DATA,
false false
@ -464,7 +466,7 @@ export class AuthenticationService {
public checkUserAuthentication(request: CheckUserAuthenticationRequest, onError: any, errorLabel: string) public checkUserAuthentication(request: CheckUserAuthenticationRequest, onError: any, errorLabel: string)
: Observable<CheckUserAuthenticationResponse> { : Observable<CheckUserAuthenticationResponse> {
this.setPublicFields(request); this.setPublicFields(request);
request.P_APP_VERSION="CS"; request.P_APP_VERSION="HMG";
return this.con.post(AuthenticationService.userChecking, request, onError, errorLabel); return this.con.post(AuthenticationService.userChecking, request, onError, errorLabel);
} }

@ -78,6 +78,8 @@ MobileNumber:string;
LogInTokenID:string; LogInTokenID:string;
CompanyImageDescription: string; CompanyImageDescription: string;
CompanyImageURL: string; CompanyImageURL: string;
CompanyMainCompany: string;
CompanyBadge: string;
SERVICE_DAYS:Number; SERVICE_DAYS:Number;
SERVICE_MONTHS:Number; SERVICE_MONTHS:Number;
SERVICE_YEARS:Number; SERVICE_YEARS:Number;

@ -15,6 +15,8 @@ export class SMSCheckResponse extends Response {
public LogInTokenID : string; public LogInTokenID : string;
public CompanyImageDescription:string; public CompanyImageDescription:string;
public CompanyImageURL:string; public CompanyImageURL:string;
public CompanyMainCompany: string;
public CompanyBadge: string;
public EMPLOYEE_MOBILE_NUMBER:string; public EMPLOYEE_MOBILE_NUMBER:string;
public EMPLOYEE_NAME:string; public EMPLOYEE_NAME:string;
public Mohemm_Wifi_SSID:string; public Mohemm_Wifi_SSID:string;

@ -49,13 +49,17 @@
</app-button> </app-button>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row>
<ion-col>
<ion-button *ngIf="userInfo" class="button-digital-id" (click)="testLogin()">
<p style="color: black;">{{ts.trPK('general','digital-id')}}</p>
<img [ngClass]=" direction === 'en' ? 'digital-id-en' : 'digital-id-ar'" src="../assets/imgs/ID_ico.png">
</ion-button>
</ion-col>
</ion-row>
</ion-grid> </ion-grid>
</ion-content> </ion-content>
<ion-footer class="welcome-footer"> <ion-footer class="welcome-footer">
<ion-row class="ion-justify-content-center " *ngIf="user"> <ion-row class="ion-justify-content-center " *ngIf="user">
<ion-col [size]="12"> <ion-col [size]="12">

@ -66,3 +66,31 @@
.text1 { .text1 {
line-height: 1.5; line-height: 1.5;
} }
.button-digital-id{
--background: white !important;
background: white !important;
white-space: normal;
color: white;
text-transform: capitalize;
min-height: 1.0cm;
--border-radius: 33px !important;
border-radius: 33px !important;
--min-height: 1.6cm !important;
width: 325px;
border: 1px solid black;
}
.digital-id-en{
color: black;
position: absolute;
right: 25px;
width: 10%;
}
.digital-id-ar{
color: black;
position: absolute;
left: 25px;
width: 10%;
}

@ -14,8 +14,9 @@ import { ConfirmLoginComponent } from 'src/app/authentication/confirm-login/conf
import * as moment from 'moment' import * as moment from 'moment'
import { ButtonSettings } from '../button/models/button-settingsl'; import { ButtonSettings } from '../button/models/button-settingsl';
import { Events } from '@ionic/angular'; import { Events, ModalController } from '@ionic/angular';
import { SharedDataService } from '../../services/shared-data-service/shared-data.service'; import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
import { DigitalIdComponent } from "src/app/authentication/digital-id/digital-id.component";
@Component({ @Component({
selector: "welcome-login", selector: "welcome-login",
@ -72,6 +73,7 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
logintype: any; logintype: any;
lastLoginDate: string; lastLoginDate: string;
user_name: string; user_name: string;
userInfo: any;
constructor( constructor(
public ts: TranslatorService, public ts: TranslatorService,
@ -79,6 +81,7 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
public authservice: AuthenticationService, public authservice: AuthenticationService,
public events: Events, public events: Events,
public sharedData: SharedDataService, public sharedData: SharedDataService,
public modalController: ModalController,
) { } ) { }
ngOnInit() { ngOnInit() {
@ -97,6 +100,7 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
this.empname= localStorage.getItem("emp-name"); this.empname= localStorage.getItem("emp-name");
this.logintype= localStorage.getItem("login-type"); this.logintype= localStorage.getItem("login-type");
this.lastLoginDate= localStorage.getItem("login-at"); this.lastLoginDate= localStorage.getItem("login-at");
this.userInfo = JSON.parse(localStorage.getItem('digitalIDUser'));
@ -220,6 +224,21 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
this.loginWithUser.emit(); this.loginWithUser.emit();
} }
testLogin(){
let x = {
title: 'login,verify-with-whatsapp',
url: null,
icon: 'assets/icon/login/104.png',
settings: new ButtonSettings(true, true, true, true),
value: 4,
visible: true,
buttonClass: 'buttonClassWhite',
pClass: 'pClassMyFileIconBlack',
class: 'nationalIdIcon',
};
this.confimLogin.checkAccess(this.logintype, true, this.logintype);
}
// getDate(date: string) { // getDate(date: string) {
@ -234,4 +253,13 @@ export class WelcomeComponent implements OnInit, AfterViewInit, OnDestroy {
return time; return time;
} }
async openDigitalId() {
const modal = await this.modalController.create({
component: DigitalIdComponent,
cssClass: 'digital-id-modal-css'
});
return await modal.present();
}
} }

@ -1,7 +1,7 @@
import { EitService } from './../eit/services/eit.service'; import { EitService } from './../eit/services/eit.service';
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { Platform, MenuController, Events, ActionSheetController } from '@ionic/angular'; import { Platform, MenuController, Events, ActionSheetController, ModalController } from '@ionic/angular';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service'; import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user'; import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
import { MenuService } from 'src/app/hmg-common/services/menu/menuservice.service'; import { MenuService } from 'src/app/hmg-common/services/menu/menuservice.service';
@ -38,6 +38,7 @@ import { isThisISOWeek } from 'date-fns';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx'; import { BackgroundGeolocation } from '@ionic-native/background-geolocation/ngx';
import { NFC, Ndef} from "@ionic-native/nfc/ngx" import { NFC, Ndef} from "@ionic-native/nfc/ngx"
import { DigitalIdComponent } from '../authentication/digital-id/digital-id.component';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
@ -156,6 +157,7 @@ export class HomePage implements OnInit {
public router: Router, public router: Router,
private platform: Platform, private platform: Platform,
public backgroundGeolocation: BackgroundGeolocation, public backgroundGeolocation: BackgroundGeolocation,
public modalController: ModalController,
private nfc: NFC private nfc: NFC
) { ) {
this.events.subscribe('img-change', displayImg => { this.events.subscribe('img-change', displayImg => {
@ -166,6 +168,7 @@ export class HomePage implements OnInit {
} }
ngOnInit() { ngOnInit() {
let openDigitalIDCard = this.sharedData.getSharedData("loginWithDigitalIDButton", true);
this.platform.backButton.subscribeWithPriority(9999, () => { this.platform.backButton.subscribeWithPriority(9999, () => {
if (this.router.isActive('/home', true)) { if (this.router.isActive('/home', true)) {
this.common.openHome(); this.common.openHome();
@ -179,6 +182,10 @@ export class HomePage implements OnInit {
this.events.subscribe('getNotCount', badge => { this.events.subscribe('getNotCount', badge => {
this.notBadge = badge; this.notBadge = badge;
}); });
if(openDigitalIDCard === true){
console.log("DONE");
this.openDigitalId();
}
} }
ionViewWillEnter() { ionViewWillEnter() {
@ -767,4 +774,12 @@ public showAttendanceOptions() {
this.openPage(this.ticketRequestObject); this.openPage(this.ticketRequestObject);
} }
} }
async openDigitalId() {
const modal = await this.modalController.create({
component: DigitalIdComponent,
cssClass: 'digital-id-modal-css'
});
return await modal.present();
}
} }

@ -284,19 +284,21 @@
<ion-tabs> <ion-tabs>
<ion-tab-bar class="tabBar" slot="bottom" style="overflow-x: scroll;"> <ion-tab-bar class="tabBar" slot="bottom" style="overflow-x: scroll;" style="height: 100% !important;">
<!-- <ion-tab-button *ngFor='let action of actionBTN' [hidden]="action.isAvailable" > --> <!-- <ion-tab-button *ngFor='let action of actionBTN' [hidden]="action.isAvailable" > -->
<ion-tab-button *ngFor='let action of actionBTN; let i=index' [hidden]='!action.isAvailable' <ion-tab-button *ngFor='let action of actionBTN; let i=index' [hidden]='!action.isAvailable'
(click)="selectAtion(action.name)" [ngClass]="i === 0 ? 'tabs-margin' : ''"> (click)="selectAtion(action.name)" [ngClass]="i === 0 ? 'tabs-margin' : ''">
<img [src]="action.image"> <img [src]="action.image">
<ion-label style="font-size: 12px;">{{action.name}}</ion-label> <ion-label style="font-size: 12px; white-space: pre-wrap !important;" *ngIf="action.name !== 'RequestInformation'">{{action.name}}</ion-label>
<ion-label style="font-size: 12px; white-space: pre-wrap !important;" *ngIf="action.name === 'RequestInformation'">Request Information</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button (click)="skip()"> <ion-tab-button (click)="skip()">
<img src="../assets/imgs/action-skip.png"> <img src="../assets/imgs/mohemm-action/Skip.png">
<ion-label style="font-size: 12px;">Skip</ion-label> <ion-label style="font-size: 12px;">Skip</ion-label>
</ion-tab-button> </ion-tab-button>

@ -144,22 +144,22 @@ export class WorkListMainItgComponent implements OnInit {
imageURL(actionName) { imageURL(actionName) {
if (actionName == "Approve") { if (actionName == "Approve") {
return "../assets/imgs/action-approve.png" return "../assets/imgs/mohemm-action/Approve.png"
} }
if (actionName == "Reject") { if (actionName == "Reject") {
return "../assets/imgs/action-reject.png" return "../assets/imgs/mohemm-action/Reject.png"
} }
if (actionName == "RequestInformation") { if (actionName == "RequestInformation") {
return "../assets/imgs/action-info.png" return "../assets/imgs/mohemm-action/info.png"
} }
if (actionName == "Grant") { if (actionName == "Grant") {
return "../assets/imgs/action-info.png" return "../assets/imgs/mohemm-action/info.png"
} }
if (actionName == "Delegate") { if (actionName == "Delegate") {
return "../assets/imgs/action-info.png" return "../assets/imgs/mohemm-action/info.png"
} }
if (actionName == "Answer") { if (actionName == "Answer") {
return "../assets/imgs/action-info.png" return "../assets/imgs/mohemm-action/info.png"
} }
} }

@ -12,26 +12,26 @@
class="ion-segment-all"> class="ion-segment-all">
<ion-segment-button value="item-req" <ion-segment-button value="info"
[ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label margin-left">{{'worklistMain , itemReq'| translate}}</ion-label> <ion-label class="no-padding-label margin-left">{{'worklistMain , info'| translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="action-history" <ion-segment-button value="item-req"
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label"> {{'worklistMain, action' | translate}}</ion-label> <ion-label class="no-padding-label">{{'worklistMain , itemReq'| translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'"> <ion-segment-button value="action-history" [ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label"> <ion-label class="no-padding-label">
{{'worklistMain, attach-file' | translate}} {{'worklistMain, action' | translate}}
</ion-label> </ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="info" [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'"> <ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label"> {{'worklistMain , info'| translate}}</ion-label> <ion-label class="no-padding-label">{{'worklistMain, attach-file' | translate}} </ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -39,6 +39,163 @@
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)"> <ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card class="cardContent" style="width: 90% !important;">
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
</ion-card-header> -->
<ion-card-content>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<!-- <ion-row>
</ion-row> -->
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col *ngIf=" getPassNotificationDetails.RESPONDER == '' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
<!-- <ion-row *ngIf=" getPassNotificationDetails.RESPONDER != '' ">
</ion-row> -->
<ion-row>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','subject')}} </label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.SUBJECT}} </label>
</ion-col>
</ion-row>
<!-- notificationBodyRes -->
<div *ngFor="let header of PRHeader">
<ion-row
*ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
<!-- *ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'"> -->
<ion-col>
<label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}} </label>
<br />
<label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
</ion-col>
</ion-row>
</div>
<br />
<ion-grid>
<div>
<ion-row style="text-align: center !important">
<ion-col *ngIf="totalH">
<div class="colItemReq" style="text-align: center !important">{{totalH}}</div>
<div class="labelTotal">{{valueH}}</div>
</ion-col>
<ion-col *ngIf="taxH ">
<div class="colItemReq" style="text-align: center !important">{{taxH}}</div>
<div class="labelTotal">{{taxvalueH}}</div>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-grid>
<button ion-button *ngIf="!IsReachEnd" class="itemHISBtn" (click)="loadMoreNotificationBody()">
{{ 'general, load-more' | translate}}
</button>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
<ion-slide> <ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'"> <ng-container *ngIf="activeSegment === 'item-req'">
<!-- <ion-card class="cardContent"> <!-- <ion-card class="cardContent">
@ -408,162 +565,6 @@
</ng-container> </ng-container>
</ion-slide> </ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card class="cardContent" style="width: 90% !important;">
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle"> {{ts.trPK('worklistMain','info')}} </div>
</ion-card-header> -->
<ion-card-content>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<!-- <ion-row>
</ion-row> -->
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col *ngIf=" getPassNotificationDetails.RESPONDER == '' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
<!-- <ion-row *ngIf=" getPassNotificationDetails.RESPONDER != '' ">
</ion-row> -->
<ion-row>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','subject')}} </label>
<br />
<!-- </ion-col>
<ion-col> -->
<label for="">{{getPassNotificationDetails.SUBJECT}} </label>
</ion-col>
</ion-row>
<!-- notificationBodyRes -->
<div *ngFor="let header of PRHeader">
<ion-row
*ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
<!-- *ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'"> -->
<ion-col>
<label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}} </label>
<br />
<label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
</ion-col>
</ion-row>
</div>
<br />
<ion-grid>
<div>
<ion-row style="text-align: center !important">
<ion-col *ngIf="totalH">
<div class="colItemReq" style="text-align: center !important">{{totalH}}</div>
<div class="labelTotal">{{valueH}}</div>
</ion-col>
<ion-col *ngIf="taxH ">
<div class="colItemReq" style="text-align: center !important">{{taxH}}</div>
<div class="labelTotal">{{taxvalueH}}</div>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-grid>
<button ion-button *ngIf="!IsReachEnd" class="itemHISBtn" (click)="loadMoreNotificationBody()">
{{ 'general, load-more' | translate}}
</button>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
</ion-slides> </ion-slides>
@ -648,40 +649,40 @@
<ion-tabs> <ion-tabs>
<ion-tab-bar class="tabBar" slot="bottom"> <ion-tab-bar class="tabBar" slot="bottom" style="height: 100% !important;">
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')"> <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<ion-label style="white-space: nowrap"> {{approve_label}}</ion-label> <ion-label class = "action-btn"> {{approve_label}}</ion-label>
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')"> <ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{close_label}}</ion-label> <ion-label class = "action-btn"> {{close_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')"> <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')">
<img src="../assets/imgs/action-reject.png"> <img src="../assets/imgs/mohemm-action/Reject.png">
<ion-label style="white-space: nowrap"> {{reject_label}}</ion-label> <ion-label class = "action-btn"> {{reject_label}}</ion-label>
<!-- <ion-label> {{'worklistMain, reject' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, reject' | translate}}</ion-label> -->
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')"> <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/action-info.png"> <img src="../assets/imgs/mohemm-action/info.png">
<ion-label style="white-space: nowrap"> {{reqInfo_label}}</ion-label> <ion-label class = "action-btn"> {{reqInfo_label}}</ion-label>
<!-- <ion-label> {{'worklistMain, request' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, request' | translate}}</ion-label> -->
</ion-tab-button> </ion-tab-button>
<ion-tab-button (click)="nextNotfification()"> <ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/action-skip.png"> <img src="../assets/imgs/mohemm-action/Skip.png">
<ion-label> {{'worklistMain, skip' | translate}}</ion-label> <ion-label> {{'worklistMain, skip' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()"> <ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/action-more.png"> <img src="../assets/imgs/mohemm-action/More.png">
<ion-label> {{'worklistMain, more' | translate}}</ion-label> <ion-label> {{'worklistMain, more' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>

@ -110,5 +110,33 @@
} }
.margin-left { .margin-left {
margin-left: 30px; margin-left: 0px;
} }
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.action-btn {
white-space: pre-wrap;
font-size: 12px;
}

@ -93,7 +93,7 @@ export class WorklistMainMRComponent implements OnInit {
confirmMsg: string; confirmMsg: string;
delMsg: string; delMsg: string;
closeMsg: string; closeMsg: string;
activeSegment: any = 'item-req'; activeSegment: any = 'info';
lines_note_limit: any = 24; lines_note_limit: any = 24;
orgNote: string; orgNote: string;
truncating: boolean; truncating: boolean;
@ -148,46 +148,42 @@ export class WorklistMainMRComponent implements OnInit {
public segmentChanged(event: any) { public segmentChanged(event: any) {
this.activeSegment = event.detail.value; this.activeSegment = event.detail.value;
if(this.activeSegment === 'item-req') if(this.activeSegment === 'info')
{ {
this.slides.slideTo(0); this.slides.slideTo(0);
} }
else if(this.activeSegment === 'action-history') else if(this.activeSegment === 'item-req')
{ {
this.slides.slideTo(1); this.slides.slideTo(1);
} }
else if(this.activeSegment === 'attach') else if(this.activeSegment === 'action-history')
{ {
this.slides.slideTo(2); this.slides.slideTo(2);
} }
else if(this.activeSegment === 'info') else if(this.activeSegment === 'attach')
{ {
this.slides.slideTo(3); this.slides.slideTo(3);
} }
console.log(" event.detail.value: " + event.detail.value);
} }
public slideChanged(event: any) { public slideChanged(event: any) {
this.slides.getActiveIndex().then(index => { this.slides.getActiveIndex().then(index => {
console.log(index);
console.log(event);
if(index === 0) if(index === 0)
{ {
this.activeSegment = 'item-req'; this.activeSegment = 'info';
} }
else if(index === 1) else if(index === 1)
{ {
this.activeSegment = 'action-history'; this.activeSegment = 'item-req';
} }
else if(index === 2) else if(index === 2)
{ {
this.activeSegment = 'attach'; this.activeSegment = 'action-history';
} }
else if(index === 3) else if(index === 3)
{ {
this.activeSegment = 'info'; this.activeSegment = 'attach';
} }
console.log(this.activeSegment);
}); });
} }

@ -536,36 +536,36 @@
<ion-tabs> <ion-tabs>
<ion-tab-bar class="tabBar" slot="bottom"> <ion-tab-bar class="tabBar" slot="bottom" style="height: 100% !important;">
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')"> <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<ion-label style="white-space: nowrap"> {{approve_label}}</ion-label> <ion-label class = "action-btn"> {{approve_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')"> <ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<ion-label style="white-space: nowrap"> {{close_label}}</ion-label> <ion-label class = "action-btn"> {{close_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECT')"> <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECT')">
<img src="../assets/imgs/action-reject.png"> <img src="../assets/imgs/mohemm-action/Reject.png">
<ion-label style="white-space: nowrap"> {{reject_label}}</ion-label> <ion-label class = "action-btn"> {{reject_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')"> <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/action-info.png"> <img src="../assets/imgs/mohemm-action/info.png">
<ion-label style="white-space: nowrap"> {{reqInfo_label}}</ion-label> <ion-label class = "action-btn"> {{reqInfo_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button (click)="nextNotfification()"> <ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/action-skip.png"> <img src="../assets/imgs/mohemm-action/Skip.png">
<ion-label> {{'worklistMain, skip' | translate}}</ion-label> <ion-label class = "action-btn"> {{'worklistMain, skip' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()"> <ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/action-more.png"> <img src="../assets/imgs/mohemm-action/More.png">
<ion-label> {{'worklistMain, more' | translate}}</ion-label> <ion-label class = "action-btn"> {{'worklistMain, more' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>

@ -113,5 +113,32 @@
} }
.margin-left { .margin-left {
margin-left: 30px; margin-left: 0px;
} }
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.action-btn {
white-space: pre-wrap;
font-size: 12px;
}

@ -10,10 +10,16 @@
<ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)" [value]="activeSegment" <ion-segment mode="md" color="secondary" (ionChange)="segmentChanged($event)" [value]="activeSegment"
class="ion-segment-all"> class="ion-segment-all">
<ion-segment-button value="item-req" <ion-segment-button value="info"
[ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label margin-left">{{'worklistMain, info'| translate}}</ion-label>
</ion-segment-button>
<ion-segment-button checked value="item-req"
[ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label margin-left"> {{'worklistMain, itemReq'| translate}} </ion-label> <ion-label class="no-padding-label"> {{'worklistMain, itemReq'| translate}} </ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="action-history" <ion-segment-button value="action-history"
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label"> {{'worklistMain, action' | translate}} </ion-label> <ion-label class="no-padding-label"> {{'worklistMain, action' | translate}} </ion-label>
@ -25,24 +31,120 @@
</ion-label> </ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button checked value="info"
[ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="no-padding-label"> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button>
</ion-segment> </ion-segment>
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)"> <ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}
</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card class="cardContent" style="width: 90% !important;">
<ion-card-content>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col>
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col>
<label class="colItemReq"
for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
<div *ngFor="let header of PRHeader">
<ion-row
*ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
<ion-col>
<label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}}
</label>
<br />
<label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
</ion-col>
</ion-row>
</div>
<br />
<ion-grid>
<div>
<ion-row style="text-align: center !important">
<ion-col *ngIf="totalH">
<div class="colItemReq"
style="text-align: center !important">{{totalH}}</div>
<div class="">{{valueH}}</div>
</ion-col>
<ion-col *ngIf="taxH ">
<div class="colItemReq"
style="text-align: center !important">{{taxH}}</div>
<div class="">{{taxvalueH}}</div>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-grid>
<button *ngIf="!IsReachEnd" ion-button class="itemHISBtn"
(click)="loadMoreNotificationBody()">
{{ 'general, load-more' | translate}}
</button>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
<ion-slide> <ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'"> <ng-container *ngIf="activeSegment === 'item-req'">
<div [hidden]="PRLines && PRLines.length > 0"> <div [hidden]="PRLines && PRLines.length > 0">
<p>{{ 'general, empty' | translate}}</p> <p>{{ 'general, empty' | translate}}</p>
</div> </div>
<accordin-custom> <accordin-custom style="width: 90%;">
<accordin-tab-custom *ngFor="let Lines of PRLines; let i=index;" [header]="Lines.DESCRIPTION" [show]="i === 0 ? true: false"> <accordin-tab-custom *ngFor="let Lines of PRLines; let i=index;" [header]="Lines.DESCRIPTION"
<div class="itemReqDiv" style="width: 100% !important;"> [show]="i === 0 ? true: false">
<div class="itemReqDiv" style="width: 100% !important;">
<ion-row class="rowBorder"> <ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' " class="colItems"> <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' "
class="colItems">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','cost-center')}} <label class="colItemReq" for="">{{ts.trPK('worklistMain','cost-center')}}
</label> </label>
<br /> <br />
@ -55,7 +157,8 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row class="rowBorder"> <ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' " class="colItems "> <ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' "
class="colItems ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','unit')}} </label> <label class="colItemReq" for="">{{ts.trPK('worklistMain','unit')}} </label>
<br /> <br />
<ion-label class="labelValue" for="">{{Lines.UOM}} </ion-label> <ion-label class="labelValue" for="">{{Lines.UOM}} </ion-label>
@ -68,7 +171,8 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row class="rowBorder"> <ion-row class="rowBorder">
<ion-col class="colItems" [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' "> <ion-col class="colItems"
[ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('payslip','amount')}} ({{ 'general, sar' | <label class="colItemReq" for="">{{ts.trPK('payslip','amount')}} ({{ 'general, sar' |
translate}})</label> translate}})</label>
<br /> <br />
@ -156,122 +260,30 @@
</ion-slide> </ion-slide>
<ion-slide> <ion-slide>
<ng-container *ngIf="activeSegment === 'attach'"> <ng-container *ngIf="activeSegment === 'attach'">
<ion-card class="cardContent" style="width: 100% !important;"> <ion-card class="cardContent" style="width: 100% !important;">
<ion-card-content> <ion-card-content>
<div class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0"> <div class="noDataDiv" [hidden]="attachmentRes && attachmentRes.length > 0">
<p>{{ 'general, notAttch' | translate}}</p> <p>{{ 'general, notAttch' | translate}}</p>
</div> </div>
<div *ngIf="attachmentRes && attachmentRes.length > 0 "> <div *ngIf="attachmentRes && attachmentRes.length > 0 ">
<ion-grid> <ion-grid>
<ion-item class="itemAttch" *ngFor="let attachList of attachmentRes ; let i=index;"> <ion-item class="itemAttch" *ngFor="let attachList of attachmentRes ; let i=index;">
<ion-label style="color: black !important"> <ion-label style="color: black !important">
{{i+1}}. {{attachList.FILE_NAME}} </ion-label> {{i+1}}. {{attachList.FILE_NAME}} </ion-label>
<button float-end class="attachImgBtn" <button float-end class="attachImgBtn"
(click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)"> (click)="OpenAttachFiles(attachList.FILE_DATA,attachList.FILE_CONTENT_TYPE)">
<img class="attachImg" src="../assets/imgs/view.png"> <img class="attachImg" src="../assets/imgs/view.png">
</button> </button>
</ion-item> </ion-item>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ng-container>
</ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card class="cardContent" style="width: 90% !important;">
<ion-card-content>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
<div *ngFor="let header of PRHeader">
<ion-row
*ngIf="header.HDR_ATTRIBUTE_NAME != 'Requisition Total' && header.HDR_ATTRIBUTE_NAME != 'Non-Recoverable Tax'">
<ion-col>
<label class="colItemReq" for="">{{header.HDR_ATTRIBUTE_NAME}} </label>
<br />
<label for="">{{header.HDR_ATTRIBUTE_VALUE}} </label>
</ion-col>
</ion-row>
</div>
<br />
<ion-grid>
<div>
<ion-row style="text-align: center !important">
<ion-col *ngIf="totalH">
<div class="colItemReq" style="text-align: center !important">{{totalH}}</div>
<div class="">{{valueH}}</div>
</ion-col>
<ion-col *ngIf="taxH ">
<div class="colItemReq" style="text-align: center !important">{{taxH}}</div>
<div class="">{{taxvalueH}}</div>
</ion-col>
</ion-row>
</div>
</ion-grid>
</ion-grid> </ion-grid>
<button *ngIf="!IsReachEnd" ion-button class="itemHISBtn" (click)="loadMoreNotificationBody()"> </div>
{{ 'general, load-more' | translate}} </ion-card-content>
</button> </ion-card>
</ion-card-content> </ng-container>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
@ -356,45 +368,45 @@
<ion-tabs> <ion-tabs>
<ion-tab-bar class="tabBar" slot="bottom"> <ion-tab-bar class="tabBar" slot="bottom" style="height: 100% !important;">
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')"> <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{approve_label}}</ion-label> <ion-label class = "action-btn"> {{approve_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')"> <ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{close_label}}</ion-label> <ion-label class = "action-btn"> {{close_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECT')"> <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECT')">
<img src="../assets/imgs/action-reject.png"> <img src="../assets/imgs/mohemm-action/Reject.png">
<!-- <ion-label> {{'worklistMain, reject' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, reject' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{reject_label}}</ion-label> <ion-label class = "action-btn"> {{reject_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')"> <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/action-info.png"> <img src="../assets/imgs/mohemm-action/info.png">
<!-- <ion-label> {{'worklistMain, request' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, request' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{reqInfo_label}}</ion-label> <ion-label class = "action-btn"> {{reqInfo_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button (click)="nextNotfification()"> <ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/action-skip.png"> <img src="../assets/imgs/mohemm-action/Skip.png">
<ion-label> {{'worklistMain, skip' | translate}}</ion-label> <ion-label class = "action-btn"> {{'worklistMain, skip' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()"> <ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/action-more.png"> <img src="../assets/imgs/mohemm-action/More.png">
<ion-label> {{'worklistMain, more' | translate}}</ion-label> <ion-label style="white-space: nowrap !important;"> {{'worklistMain, more' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
</ion-tab-bar> </ion-tab-bar>
</ion-tabs> </ion-tabs>

@ -110,5 +110,32 @@
} }
.margin-left { .margin-left {
margin-left: 30px; margin-left: 0px;
} }
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.action-btn {
white-space: pre-wrap;
font-size: 12px;
}

@ -102,7 +102,7 @@ export class WorklistMainPRComponent implements OnInit {
demoeAttach: any = []; demoeAttach: any = [];
notiActionBtnMore: any = []; notiActionBtnMore: any = [];
messageSuccess: boolean = false; messageSuccess: boolean = false;
activeSegment: any = 'item-req'; activeSegment: any = 'info';
approveDis: boolean; approveDis: boolean;
rejectDis: boolean; rejectDis: boolean;
requestDis: boolean; requestDis: boolean;
@ -145,19 +145,19 @@ export class WorklistMainPRComponent implements OnInit {
public segmentChanged(event: any) { public segmentChanged(event: any) {
this.activeSegment = event.detail.value; this.activeSegment = event.detail.value;
if(this.activeSegment === 'item-req') if(this.activeSegment === 'info')
{ {
this.slides.slideTo(0); this.slides.slideTo(0);
} }
else if(this.activeSegment === 'action-history') else if(this.activeSegment === 'item-req')
{ {
this.slides.slideTo(1); this.slides.slideTo(1);
} }
else if(this.activeSegment === 'attach') else if(this.activeSegment === 'action-history')
{ {
this.slides.slideTo(2); this.slides.slideTo(2);
} }
else if(this.activeSegment === 'info') else if(this.activeSegment === 'attach')
{ {
this.slides.slideTo(3); this.slides.slideTo(3);
} }
@ -170,19 +170,19 @@ export class WorklistMainPRComponent implements OnInit {
console.log(event); console.log(event);
if(index === 0) if(index === 0)
{ {
this.activeSegment = 'item-req'; this.activeSegment = 'info';
} }
else if(index === 1) else if(index === 1)
{ {
this.activeSegment = 'action-history'; this.activeSegment = 'item-req';
} }
else if(index === 2) else if(index === 2)
{ {
this.activeSegment = 'attach'; this.activeSegment = 'action-history';
} }
else if(index === 3) else if(index === 3)
{ {
this.activeSegment = 'info'; this.activeSegment = 'attach';
} }
console.log(this.activeSegment); console.log(this.activeSegment);
}); });

@ -10,24 +10,25 @@
class="ion-segment-all"> class="ion-segment-all">
<ion-segment-button value="info"
[ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button>
<ion-segment-button value="item-req" <ion-segment-button value="item-req"
[ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'item-req' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, details-emp'| translate}}</ion-label> <ion-label class="padding-zero"> {{'worklistMain, details-emp'| translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="action-history" <ion-segment-button value="action-history"
[ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'"> [ngClass]="activeSegment == 'action-history' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, action' | translate}}</ion-label> <ion-label class="padding-zero"> {{'worklistMain, action' | translate}}</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="attach" <ion-segment-button value="attach" [ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
[ngClass]="activeSegment == 'attach' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, attach-file' | translate}}</ion-label> <ion-label class="padding-zero"> {{'worklistMain, attach-file' | translate}}</ion-label>
</ion-segment-button>
<ion-segment-button value="info" [ngClass]="activeSegment == 'info' ? 'active-Segment' : 'normal-Segment'">
<ion-label class="padding-zero"> {{'worklistMain, info'| translate}} </ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -35,172 +36,244 @@
<ion-slides #slides (ionSlideDidChange)="slideChanged($event)"> <ion-slides #slides (ionSlideDidChange)="slideChanged($event)">
<ion-slide> <ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'"> <ng-container *ngIf="activeSegment === 'info'">
<ion-grid> <ion-grid>
<ion-row> <ion-row>
<ion-col> <ion-col>
<ion-card class="cardContent"> <div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
<ion-card-content> </ion-col>
<div> </ion-row>
<ion-grid style="text-align: left">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder"> <ion-row>
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' "> <ion-col>
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}} <div *ngIf="notificationBodyRes?.length > 0 ">
</label> <ion-card *ngFor="let item of notificationBodyRes;let i=index; " style="width: 91%;">
<br /> <ion-card-content *ngIf="item.Collection_Notification.length > 0">
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label> <div>
</ion-col> <ion-row *ngIf=" item.Collection_Notification.DISPLAY_FLAG != 'N' ">
<ion-col class=""> <ion-col class="rowBorder"
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}} *ngFor="let notificationBody of item.Collection_Notification;" size="6"
</label> [hidden]="notificationBody.DISPLAY_FLAG == 'N'">
<br /> <label class="colItemReq" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br /> <br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label> <label for="">{{notificationBody.SEGMENT_VALUE_DSP}}</label>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </div>
</ion-card-content>
</ion-card>
</div>
<div style="margin: 10px;font-weight: bold; "
*ngIf="subordinatesleaveList != undefined && subordinatesleaveList?.length > 0">
{{ts.trPK('worklistMain','employee-on-leave')}}
</div>
<ion-item lines="none" [ngClass]=" direction === 'en' ? 'subOrdinateList' :'subOrdinateList-Ar' "
*ngFor="let List of subordinatesleaveList;">
<ion-grid [ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
<div [ngClass]=" direction === 'en' ? 'subOrdinateDiv' :'subOrdinateDiv-Ar' ">
<img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
[src]="'data:image/png;base64,'+List.EMPLOYEE_IMAGE">
<img *ngIf="List.EMPLOYEE_IMAGE == null" class="empImgeSub"
src="../assets/imgs/profile.png">
</div> </div>
</ion-card-content> <ion-row class="rowHeader "
</ion-card> [ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar' ">
<ion-col size="9">
<label style="font-weight: bold; " class="label" for="">{{List.EMPLOYEE_NAME}}
</label>
<br />
<label class="label" for="">{{List.POSITION_TITLE}} </label><br />
</ion-col>
<ion-col class="status" size="3">
<label class="label" style="font-size: 11px;" for="label">{{List.STATUS}}</label>
</ion-col>
</ion-row>
<br />
<ion-row [ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar'">
<ion-col>
<label class="label" for=""> {{ts.trPK('worklistMain','from')}}</label><br />
<label class="label" for="">{{List.DATE_START |date}}</label>
</ion-col>
<ion-col>
<label class="label" for="">{{ts.trPK('worklistMain','to')}}</label><br />
<label class="label" for="">{{List.DATE_END | date}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row>
<ion-col>
<ion-card *ngIf="submitterInfoRes?.length > 0 ">
<ion-card-content [ngClass] = " direction === 'en' ? 'cardAlignTextEn' : 'cardAlignTextAr'">
<div style="font-weight: bold;" class="hrTitle">
{{'userProfile, emp-detail' | translate}}</div>
<div *ngFor="let submitterInfo of submitterInfoRes">
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, empNo' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, name' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, grade' | translate}}</label>
<br />
<label for="">{{submitterInfo.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job_cate' | translate}}</label>
<br />
<label for="">{{submitterInfo.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, category' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, emp-email' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, org-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, loc-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.LOCATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, branch-payrol' | translate}}</label>
<br />
<label for="">{{submitterInfo.PAYROLL_NAME}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid> </ion-grid>
</ng-container> </ng-container>
</ion-slide> </ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'item-req'">
<ion-grid style="width: 1px;">
<ion-row>
<ion-col>
<ion-card class="cardContent">
<ion-card-content>
<div>
<ion-grid style="text-align: left;">
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for=""> {{ts.trPK('worklistMain','from')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.FROM_USER}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','to')}}
</label>
<br />
<label for=""> {{getPassNotificationDetails.TO_USER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','sent')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.BEGIN_DATE}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','closed')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.END_DATE}}</label>
</ion-col>
</ion-row>
<ion-row class="">
<ion-col [ngClass]=" direction === 'en' ? 'colBorder' :'colBorder-ar' ">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','id')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.NOTIFICATION_ID}}</label>
</ion-col>
<ion-col class="">
<label class="colItemReq" for="">{{ts.trPK('worklistMain','responder')}}
</label>
<br />
<label for="">{{getPassNotificationDetails.RESPONDER}} </label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-card *ngIf="submitterInfoRes?.length > 0 ">
<ion-card-content [ngClass] = " direction === 'en' ? 'cardAlignTextEn' : 'cardAlignTextAr'">
<div style="font-weight: bold;" class="hrTitle">
{{'userProfile, emp-detail' | translate}}</div>
<div *ngFor="let submitterInfo of submitterInfoRes">
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, empNo' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NUMBER}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq" for="">{{'userProfile, name' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.POSITION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'userProfile, grade' | translate}}</label>
<br />
<label for="">{{submitterInfo.GRADE_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, job_cate' | translate}}</label>
<br />
<label for="">{{submitterInfo.JOB_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, category' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYMENT_CATEGORY_MEANING}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, emp-email' | translate}}</label>
<br />
<label for="">{{submitterInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, org-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.ORGANIZATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row class="rowBorder submitterInfo">
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, loc-name' | translate}}</label>
<br />
<label for="">{{submitterInfo.LOCATION_NAME}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label class="colItemReq"
for="">{{'worklistMain, branch-payrol' | translate}}</label>
<br />
<label for="">{{submitterInfo.PAYROLL_NAME}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
<ion-slide> <ion-slide>
<ng-container *ngIf="activeSegment === 'action-history'"> <ng-container *ngIf="activeSegment === 'action-history'">
@ -306,78 +379,6 @@
</ion-card> </ion-card>
</ng-container> </ng-container>
</ion-slide> </ion-slide>
<ion-slide>
<ng-container *ngIf="activeSegment === 'info'">
<ion-grid>
<ion-row>
<ion-col>
<div *ngIf="pInformation && pInformation != '' " class="tipsPadding">{{pInformation}}</div>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<div *ngIf="notificationBodyRes?.length > 0 ">
<ion-card *ngFor="let item of notificationBodyRes;let i=index; " style="width: 91%;">
<ion-card-content *ngIf="item.Collection_Notification.length > 0">
<div>
<ion-row *ngIf=" item.Collection_Notification.DISPLAY_FLAG != 'N' ">
<ion-col class="rowBorder"
*ngFor="let notificationBody of item.Collection_Notification;" size="6"
[hidden]="notificationBody.DISPLAY_FLAG == 'N'">
<label class="colItemReq" for="">{{notificationBody.SEGMENT_PROMPT}}</label>
<br />
<label for="">{{notificationBody.SEGMENT_VALUE_DSP}}</label>
</ion-col>
</ion-row>
</div>
</ion-card-content>
</ion-card>
</div>
<div style="margin: 10px;font-weight: bold; "
*ngIf="subordinatesleaveList != undefined && subordinatesleaveList?.length > 0">
{{ts.trPK('worklistMain','employee-on-leave')}}
</div>
<ion-item lines="none" [ngClass]=" direction === 'en' ? 'subOrdinateList' :'subOrdinateList-Ar' "
*ngFor="let List of subordinatesleaveList;">
<ion-grid [ngClass]=" direction === 'en' ? 'gridSubordinates' :'gridSubordinates-Ar' ">
<div [ngClass]=" direction === 'en' ? 'subOrdinateDiv' :'subOrdinateDiv-Ar' ">
<img *ngIf="List.EMPLOYEE_IMAGE" class="empImgeSub"
[src]="'data:image/png;base64,'+List.EMPLOYEE_IMAGE">
<img *ngIf="List.EMPLOYEE_IMAGE == null" class="empImgeSub"
src="../assets/imgs/profile.png">
</div>
<ion-row class="rowHeader "
[ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar' ">
<ion-col size="9">
<label style="font-weight: bold; " class="label" for="">{{List.EMPLOYEE_NAME}}
</label>
<br />
<label class="label" for="">{{List.POSITION_TITLE}} </label><br />
</ion-col>
<ion-col class="status" size="3">
<label class="label" style="font-size: 11px;" for="label">{{List.STATUS}}</label>
</ion-col>
</ion-row>
<br />
<ion-row [ngClass]=" direction === 'en' ? 'subOrdinateRow' :'subOrdinateRow-Ar'">
<ion-col>
<label class="label" for=""> {{ts.trPK('worklistMain','from')}}</label><br />
<label class="label" for="">{{List.DATE_START |date}}</label>
</ion-col>
<ion-col>
<label class="label" for="">{{ts.trPK('worklistMain','to')}}</label><br />
<label class="label" for="">{{List.DATE_END | date}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ng-container>
</ion-slide>
</ion-slides> </ion-slides>
<ion-row> <ion-row>
@ -438,41 +439,41 @@
<ion-tabs> <ion-tabs>
<ion-tab-bar class="tabBar" slot="bottom"> <ion-tab-bar class="tabBar" slot="bottom" style="height: 100% !important;">
<ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')"> <ion-tab-button *ngIf="approveDis" (click)="actionButton('APPROVED')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{approve_label}}</ion-label> <ion-label class = "action-btn"> {{approve_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')"> <ion-tab-button *ngIf="closeDis" (click)="actionButton('CLOSE')">
<img src="../assets/imgs/action-approve.png"> <img src="../assets/imgs/mohemm-action/Approve.png">
<!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> --> <!-- <ion-label> {{'worklistMain, approve' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{close_label}}</ion-label> <ion-label class = "action-btn"> {{close_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')"> <ion-tab-button *ngIf="rejectDis" (click)="actionButton('REJECTED')">
<img src="../assets/imgs/action-reject.png"> <img src="../assets/imgs/mohemm-action/Reject.png">
<!-- <ion-label > {{'worklistMain, reject' | translate}}</ion-label> --> <!-- <ion-label > {{'worklistMain, reject' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{reject_label}}</ion-label> <ion-label class = "action-btn"> {{reject_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')"> <ion-tab-button *ngIf="requestDis" (click)="actionButton('REQUEST_INFO')">
<img src="../assets/imgs/action-info.png"> <img src="../assets/imgs/mohemm-action/info.png">
<!-- <ion-label > {{'worklistMain, request' | translate}}</ion-label> --> <!-- <ion-label > {{'worklistMain, request' | translate}}</ion-label> -->
<ion-label style="white-space: nowrap"> {{reqInfo_label}}</ion-label> <ion-label class = "action-btn"> {{reqInfo_label}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button (click)="nextNotfification()"> <ion-tab-button (click)="nextNotfification()">
<img src="../assets/imgs/action-skip.png"> <img src="../assets/imgs/mohemm-action/Skip.png">
<ion-label> {{'worklistMain, skip' | translate}}</ion-label> <ion-label class = "action-btn"> {{'worklistMain, skip' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>
<ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()"> <ion-tab-button [disabled]="moreDisabled" (click)="openMoreActions()">
<img src="../assets/imgs/action-more.png"> <img src="../assets/imgs/mohemm-action/More.png">
<ion-label> {{'worklistMain, more' | translate}}</ion-label> <ion-label class = "action-btn"> {{'worklistMain, more' | translate}}</ion-label>
</ion-tab-button> </ion-tab-button>

@ -303,3 +303,30 @@ ion-card{
.padding-zero { .padding-zero {
padding: 0px !important; padding: 0px !important;
} }
.active-Segment {
font-size: 0.3cm !important;
background: #269DB8 !important;
text-transform: none;
--color-checked: none;
border-radius: 100px;
border:0;
}
.active-Segment ion-label{
font-size: 11px;
color: white !important;
}
.normal-Segment ion-label{
color: black !important;
font-size: 11px;
}
.normal-Segment {
font-size: 0.3cm !important;
text-transform: none;
--color-checked: none;
border: 0;
}
.action-btn {
white-space: pre-wrap;
font-size: 12px;
}

@ -76,7 +76,7 @@ export class WorklistMainComponent implements OnInit {
P_PAGE_NUM: number = 1; P_PAGE_NUM: number = 1;
P_PAGE_LIMIT: number = 100; P_PAGE_LIMIT: number = 100;
notificationCount: any; notificationCount: any;
activeSegment: any = 'item-req'; activeSegment: any = 'info';
lines_note_limit: any = 24; lines_note_limit: any = 24;
attachmentRes: any = []; attachmentRes: any = [];
private WorkListActionHistoryObj: WorkListActionHistoryRequest; private WorkListActionHistoryObj: WorkListActionHistoryRequest;
@ -143,19 +143,19 @@ export class WorklistMainComponent implements OnInit {
public segmentChanged(event: any) { public segmentChanged(event: any) {
this.activeSegment = event.detail.value; this.activeSegment = event.detail.value;
if(this.activeSegment === 'item-req') if(this.activeSegment === 'info')
{ {
this.slides.slideTo(0); this.slides.slideTo(0);
} }
else if(this.activeSegment === 'action-history') else if(this.activeSegment === 'item-req' )
{ {
this.slides.slideTo(1); this.slides.slideTo(1);
} }
else if(this.activeSegment === 'attach') else if(this.activeSegment === 'action-history')
{ {
this.slides.slideTo(2); this.slides.slideTo(2);
} }
else if(this.activeSegment === 'info') else if(this.activeSegment === 'attach')
{ {
this.slides.slideTo(3); this.slides.slideTo(3);
} }
@ -168,19 +168,19 @@ export class WorklistMainComponent implements OnInit {
console.log(event); console.log(event);
if(index === 0) if(index === 0)
{ {
this.activeSegment = 'item-req'; this.activeSegment = 'info';
} }
else if(index === 1) else if(index === 1)
{ {
this.activeSegment = 'action-history'; this.activeSegment = 'item-req';
} }
else if(index === 2) else if(index === 2)
{ {
this.activeSegment = 'attach'; this.activeSegment = 'action-history';
} }
else if(index === 3) else if(index === 3)
{ {
this.activeSegment = 'info'; this.activeSegment = 'attach';
} }
console.log(this.activeSegment); console.log(this.activeSegment);
}); });

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 836 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 848 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 914 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 880 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 888 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Loading…
Cancel
Save