swipe component between profile/home and profile/edit and change the design

zohaib-huawei-q2
enadhilal 5 years ago
parent d086e9ebff
commit 3787a18560

@ -189,7 +189,7 @@ export class AppComponent implements OnInit {
} }
public profile() { public profile() {
this.cs.openEditProfile(); this.cs.openProfile();
this.menu.toggle(); this.menu.toggle();
} }

@ -30,4 +30,9 @@
} }
.start-badge{ .start-badge{
right:16px; right:16px;
}
.my-custom-modal-css .modal-wrapper {
width: 90%;
height: 55%;
} }

@ -1,121 +1,153 @@
<app-generic-header <app-generic-header
showBack="true" showBack="true"
[headerText]="'userProfile,title' | translate"> [headerText]="'userProfile, title' | translate">
</app-generic-header> </app-generic-header>
<ion-content class="colorBG"> <ion-content class="colorBG">
<div class="header-div"> <div class="header-div">
<!-- <ion-buttons slot="start"> <div class="centerDiv homeBox">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons> -->
<!-- <p class="proTitles">{{ts.trPK('userProfile','title')}}</p> -->
<div>
<div class="centerDiv homeBox"> <div class="centerDiv homeBox">
<!-- <div class="profileDiv"> --> <!-- <div class="profileDiv"> -->
<img class="profileImg" [src]="user_image"> <img class="profileImg" [src]="imageSrc">
</div> </div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> --> <!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
<div *ngIf="personalInfo"> <div *ngIf="personalInfo">
<p class="empName">{{User_name_Emp}}</p> <p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p>
<p class="empJob"> {{User_Job_name}}</p>
</div> </div>
</div> </div>
</div>
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<ion-grid *ngIf="personalInfo" style="position: relative; display: block; z-index: 5;"> <button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
<div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'" style="background: #0B4775; border-radius: 20px;"> <!-- <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> -->
<ion-row> <img (click)="ChangeImage();" class="changeIcon" src="../assets/imgs/edit-image.svg">
<ion-col> </button>
<label style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
{{ 'general, appreciate-service' | translate}}
</label>
</ion-col>
</ion-row>
<ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<div class="verticalLine"></div>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<div class="verticalLine"></div>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
</ion-col>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div> </div>
</ion-grid>
</div> <!-- end header-div -->
<div>
<div class="list"> <!-- <ion-card *ngIf="personalInfo"> -->
<ion-list class="list-ios">
<div class="p"> <!-- <ion-card-header class="boxHdr">
<p>{{ts.trPK('userProfile','Years of Services')}}</p> <div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</div>
</div> </ion-card-header> -->
<!-- <ion-card-content> -->
<div *ngIf="personalInfo">
<ion-grid>
<div class="profileGrid">
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col class="line">
<ion-row>
<label class="lebl">
{{ts.trPK('userProfile','empNo')}}</label></ion-row>
<ion-row > <label
class="rowBolds">{{personalInfo.EMPLOYEE_NUMBER}}</label> </ion-row>
</ion-col>
<ion-col>
<ion-row> <label class="lebl">{{ts.trPK('userProfile','category')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label> </ion-row>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','address')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds"></label>
</ion-row>
</ion-col>
</ion-row>
<ion-item class="itemline" (click)="openEditprofile()"> <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-col>
<img style= "height: 22px !important;" src="../assets/imgs/profile_icon.png" item-left> <ion-row>
</ion-thumbnail> <label class="lebl">{{ts.trPK('general','mobile')}}</label>
</ion-row>
<ion-label class="profile"> <ion-row>
{{ts.trPK('userProfile','edit-profile')}} <label class="rowBolds">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</label>
</ion-label> </ion-row>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon> </ion-col>
</ion-item> </ion-row>
<ion-item class="itemlins" (click)="openPerormance()"> <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-thumbnail slot="start" class="menu-thumb"> <ion-col>
<ion-icon style= "width: 23px; height: 24px !important;" name="speedometer" item-left></ion-icon> <ion-row>
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
</ion-thumbnail> </ion-row>
<ion-label class="profile"> <ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label>
{{ts.trPK('userProfile','performance-evaluation')}} </ion-row>
</ion-label> </ion-col>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon> </ion-row>
</ion-item>
</ion-list> <ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
</div> <ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','job')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.JOB_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','payrol')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.PAYROLL_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','orgEmail')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','position')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.POSITION_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','grade')}} </label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.GRADE_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
<!-- </ion-card-content> -->
<!-- </ion-card> -->
</div>
</ion-content> </ion-content>

@ -1,216 +1,130 @@
ion-col.colBold, ion-col.colBold > label{
font-weight:bold;
}
.colorBG{
.list-ios { --background: #f0efef;
// margin-left: 0; }
// margin-right: 0; .header-div{
// margin-top: 32px; text-transform: capitalize;
// margin-bottom: 32px; background: #269DB8;
// background: var(--ion-item-background,var(--ion-background-color,#fff)); display: block;
margin-left: 0; position: relative;
margin-right: 0; height: 160px;
margin-top: -15px; margin-bottom: 60px;
margin-bottom: 32px;
border: 1px solid #d8d8d8;
background: var(--ion-item-background, var(--ion-background-color, #fff));
border-radius: 10px;
padding-top: 60px;
} }
.header-toolbar-new{ // .profileCont{
--background: #269DB8; // background-color: #d9d7d7 !important;
.menubutton {
background: #f0ecec;
min-height: 39px;
width: 35px !important;
height: 20px;
border-radius: 50%;
} }
.colorBG{
--background: #f0efef; .changeIcon{
} /* background: #c1c1c1; */
.header-div{ width: 21px;
text-transform: capitalize; /* height: 26px; */
background: #269DB8; border-radius: 50% !important;
display: block;
position: relative; position: relative;
height: 113px; color: #7f8c8d;
margin-bottom: 60px; height: 35px;
}
}
.changeImgBtn{
position: absolute;
top: 80%;
left: 65%;
}
.changeImgBtn-ar{
position: absolute;
top: 80%;
left: 66%;
}
.profileImg{ .profileImg{
width: 160px; width: 160px;
height: 160px; height: 160px;
display: -webkit-inline-box; display: -webkit-inline-box;
display: inline-flex; display: inline-flex;
overflow: hidden; overflow: hidden;
/* background: transparent; */ // background: transparent;
border-radius: 78% !important; border-radius: 69% !important;
position: relative; position: relative;
top: 34px; top: 34px;
// background: white; // background: white;
background: transparent; background: transparent;
margin-left: -3px; }
.Text {
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
color: black;
font-size: 16px;
margin-top: 34px;
text-align: center;
} }
.proTitles { .line{
margin: 0;
padding: 0; padding-top: 0px !important;
font-size: 16px; /* margin-bottom: 0px; */
text-align: center; /* margin: 0px; */
font-weight: bolder; border-right: 1px #c5c2c2 solid !important;
color: white; line-height: 10px !important;
margin-top: -33px;
}
.Text {
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
color: black;
font-size: 16px;
margin-top: 34px;
margin-bottom: 10px;
text-align: center;
}
ion-thumbnail.menu-thumb{
width:20px;
height:20px;
// margin-top: 5px !important;
}
.profile{
color: black !important;
// font-weight: bolder !important;
}
.gridService-en{
margin-top: 87px;
border-radius: 10px;
margin-bottom: -49px;
margin-left: 30px;
margin-right: 30px;
}
.gridService-ar{
margin-top: 87px;
border-radius: 10px;
margin-bottom: -49px;
margin-left: 17px;
margin-right: 17px;
}
.columns{
// margin: 10px;
// background: #0B4775;
// border-radius: 27px;
// padding-left: 30px;
// padding-right: 6px;
// padding-top: 19px;
// padding-bottom: 26px;
}
.columns-ar{
// margin: 10px;
// background: #0B4775;
// border-radius: 27px;
// padding-left: 7px;
// padding-right: 3px;
// padding-top: 19px;
// padding-bottom: 26px;
}
.service{
font-size: 28px;
// font-weight: bolder;
color: white;
letter-spacing: 1px;
font-weight: bold;
}
.services{
font-size: 12px;
color: white;
}
.service-ar{
font-size: 28px;
color: white;
letter-spacing: 1px;
font-weight: bold;
margin-right: 26px;
}
.services-ar{
font-size: 20px;
color: white;
margin-right: 25px;
}
.list{
margin-left: 14px;
margin-right: 14px;
border-radius: 10px;
// background: white;
border:#bebbbb !important;
padding: 2px;
}
.p{
color: black !important;
font-size: medium;
text-align: center;
border-bottom: rgb(190, 187, 187) solid 1px;
}
.itemline{
border-bottom: rgb(190, 187, 187) solid 1px;
}
.itemlins{
border-bottom: rgb(190, 187, 187) solid 1px;
margin-bottom: 209px;
}
.proTitles {
margin: 0;
padding: 0;
font-size: 16px;
text-align: center;
font-weight: bolder;
color: white;
margin-top: -33px;
}
.profileGrid{
border: #bebbbb solid 1px;
border-radius: 9px;
padding: 0px;
margin-top: 54px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
color: black;
// font-weight: bold;
background: white;
}
.empName {
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
color: black;
font-size: 16px;
margin-top: 38px;
}
.empJob{
margin: 0;
padding: 0;
text-align: center;
color: black;
font-size: 16px;
margin-top: 4px;
}
.arrow{
width: 20px;
height: 22px !important;
}
.arrow-ar{
float: left;
font-size: 25px;
color: grey;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.verticalLine {
width:1%;
height:50px;
background:white;
margin-top: 100%;
// margin-left: 10%;
} }
.service-row-en{
width: 79%;
margin: -12px 0px 0px 35px;
.lebl{
color: black;
font-size: 14px !important;
font-weight: bold !important;
padding-top: 9px;
padding-left: 5px;
} }
.service-row-ar{ .rowBolds{
width: 95%; color: black !important;
margin: -12px 0px 35px 0px; font-size: 14px !important;
/* padding: 6px !important; */
padding-bottom: 9px;
padding-left: 5px;
padding-top: 4px;
} }

@ -1,14 +1,11 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Platform, Events, MenuController } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
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 { PerformanceAppraisalResponse } from 'src/app/hmg-common/services/dashbored/performance-appraisal.response'; import { Events } from '@ionic/angular';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
// import { DomSanitizer } from '@angular/platform-browser';
@Component({ @Component({
@ -17,47 +14,35 @@ import { DomSanitizer } from '@angular/platform-browser';
styleUrls: ['./edit-profile.component.scss'], styleUrls: ['./edit-profile.component.scss'],
}) })
export class EditProfileComponent implements OnInit { export class EditProfileComponent implements OnInit {
User_name_Emp: string = '';
User_Job_name: string;
public direction: string;
private menu: MenuController;
setImage:any;
// imageSrc: any = "../assets/imgs/profile.png";
user_image: any = '../assets/imgs/profile.png';
personalInfo: any; personalInfo: any;
appraisalArr :any =[]; setImage:any;
public performanceData: any=[]; imageSrc: any = '../assets/imgs/profile.png';
public static PERFORMANCE_DATA = 'perAppData'; public direction: string;
// user_image: any = "../assets/imgs/profile.png";
constructor( constructor(
public ts: TranslatorService, public ts: TranslatorService,
public cs: CommonService, public cs: CommonService,
public authService: AuthenticationService, public authService: AuthenticationService,
public DS :DashboredService, private events: Events,
public sharedData: SharedDataService,
public events: Events,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
// private events: Events,
// private sanitizer: DomSanitizer,
)
{
this.direction = TranslatorService.getCurrentDirection();
this.events.subscribe('img-change', displayImg => {
console.log('app compont: '+displayImg);
this.user_image = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,'+displayImg);
});
) {
this.direction = TranslatorService.getCurrentDirection();
this.events.subscribe('img-change', displayImg => {
// alert("1 - profile home : "+displayImg);
//this.user_image = "data:image/png;base64"+displayImg;
this.setImage = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,'+displayImg);
this.imageSrc = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,'+displayImg);
});
} }
ngOnInit() { ngOnInit() {
this.getProfile(); this.getProfile();
} }
getProfile() { getProfile() {
console.log('getProfile'); console.log('getProfile');
this.authService this.authService
@ -65,60 +50,27 @@ export class EditProfileComponent implements OnInit {
.subscribe((user: AuthenticatedUser) => { .subscribe((user: AuthenticatedUser) => {
if (user) { if (user) {
this.personalInfo = user; this.personalInfo = user;
this.User_name_Emp=this.personalInfo.EMPLOYEE_NAME;
this.User_Job_name=this.personalInfo.JOB_NAME;
if(this.cs.getUpdateImage().status){
this.user_image =this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,'+this.cs.getUpdateImage().img);
}else{
this.user_image = user.EMPLOYEE_IMAGE
? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE
: '../assets/imgs/profile.png';
}
console.log('name: '+ this.personalInfo.EMPLOYEE_NAME); console.log('name: '+ this.personalInfo.EMPLOYEE_NAME);
console.log('user name: '+ user.EMPLOYEE_NAME); console.log('user name: '+ user.EMPLOYEE_NAME);
console.log('name: '+ this.personalInfo.JOB_NAME);
console.log('job name: '+ user.JOB_NAME);
}}); if(this.cs.getUpdateImage().status){
} // this.imageSrc = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+this.cs.getUpdateImage().img);
this.imageSrc =this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,'+this.cs.getUpdateImage().img);
openEditprofile(){ }else{
this.cs.openProfile(); this.imageSrc = user.EMPLOYEE_IMAGE
} ? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE
: this.imageSrc;
openPerormance(){ console.log('2-'+user);
this.showPerformanceAppraisal(); }
}
showPerformanceAppraisal(){
this.DS.getPerformanceAppraisal(()=>{
this.showPerformanceAppraisal();
}).subscribe((result: PerformanceAppraisalResponse) => {
this.handlePerformanceAppraisalResult(result);
});
}
private handlePerformanceAppraisalResult(result){
if (this.cs.validResponse(result)) {
if (this.cs.hasData(result.GetPerformanceAppraisalList)) {
this.appraisalArr =result.GetPerformanceAppraisalList;
this.performanceData=[];
for(let i=0;i<this.appraisalArr.length;i++){
this.performanceData.push({name:this.appraisalArr[i].APPRAISAL_YEAR,value :parseInt(this.appraisalArr[i].APPRAISAL_SCORE).toFixed()});
} }
console.log('PerformanceAppraisalResponse'); else {
this.sharedData.setSharedData(this.performanceData, PerformanceAppraisalResponse.PERFORMANCE_DATA); console.log('3-'+user);
//localStorage.setItem("performanceData", this.performanceData) }
this.cs.openPerformanceevaluation(); });
}else{ }
let msg: string = this.ts.trPK("userProfile", "no-appraisal");
this.cs.presentAlert(msg);
}
public ChangeImage() {
this.cs.openChangeImagePage();
} }
} }
}

@ -1,153 +1,539 @@
<app-generic-header <app-generic-header showBack="true" [headerText]="'userProfile,title' | translate">
showBack="true"
[headerText]="'userProfile, title' | translate">
</app-generic-header> </app-generic-header>
<ion-content class="colorBG"> <ion-content class="colorBG">
<div class="header-div"> <div class="header-background-style-card">
<div class="centerDiv homeBox"> </div>
<div class="centerDiv homeBox"> <div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;">
<!-- <div class="profileDiv"> --> <div class="user-info">
<img class="profileImg" [src]="imageSrc"> <div class="user-image-container">
</div> <div class="user-image">
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> --> <img [ngClass]="direction == 'ltr'? 'img':'img-ar' "
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> --> [src]="personalInfo?.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
<div *ngIf="personalInfo"> alt="Team Member Image" />
<p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p> </div>
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton">
<img class="changeIcon" src="../assets/imgs/edit-image.svg">
</button>
</div>
</div>
<div style="margin-top: 18px;">
<h1>{{User_name_Emp}}</h1>
<span>{{personalInfo?.EMPLOYEE_EMAIL_ADDRESS}}</span>
</div>
<div>
<ion-row>
<ion-col style="border-right: 1px solid rgb(221 221 221);">
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','role')}}</p>
<span class="Boldtext">{{personalInfo?.JOB_NAME}}</span>
</ion-col>
<ion-col>
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{personalInfo?.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div> </div>
</div> </div>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'"> <ion-col [size]="4" (click)="selectedSegment('personal')">
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()"> <div class="action-button col-button">
<!-- <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> --> <img style="width: 50px;" src="../assets/imgs/check_padding.png">
<img (click)="ChangeImage();" class="changeIcon" src="../assets/imgs/edit-image.svg"> <span>{{ts.trPK('general','personal-info')}}</span>
</button> </div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('basic')">
<div class="action-button col-button">
<img style="width: 50px;" src="../assets/imgs/check_padding.png">
<span>{{ts.trPK('general','basic-details')}}</span>
</div>
</ion-col>
<ion-col [size]="4" (click)="selectedSegment('address')">
<div class="action-button col-button">
<img style="width: 50px;" src="../assets/imgs/check_padding.png">
<span>{{ts.trPK('userProfile','address')}} </span>
</div>
</ion-col>
</ion-row>
</div> </div>
<ion-grid *ngIf="personalInfo" [ngClass]="direction === 'ltr'? 'grid-card':'grid-card-ar' ">
</div> <!-- end header-div --> <div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'"
<div> style="background: #002948; border-radius: 0px 0px 10px 10px;">
<ion-row>
<!-- <ion-card *ngIf="personalInfo"> --> <ion-col>
<label
<!-- <ion-card-header class="boxHdr"> style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
<div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</div> {{ 'general, appreciate-service' | translate}}
</ion-card-header> --> </label>
<!-- <ion-card-content> --> </ion-col>
<div *ngIf="personalInfo"> </ion-row>
<ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'">
<ion-grid> <ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<div class="profileGrid"> <ion-grid>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col class="line">
<ion-row> <ion-row>
<label class="lebl"> <ion-col class="text-years">
{{ts.trPK('userProfile','empNo')}}</label></ion-row> <label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}
<ion-row > <label {{ts.trPK('userProfile','years')}}</label>
class="rowBolds">{{personalInfo.EMPLOYEE_NUMBER}}</label> </ion-row> <!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label> -->
</ion-col> </ion-col>
<ion-col>
<ion-row> <label class="lebl">{{ts.trPK('userProfile','category')}}</label>
</ion-row> </ion-row>
</ion-grid>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row> <ion-row>
<label class="rowBolds">{{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}</label> </ion-row> <ion-col class="text-years">
</ion-col> <label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}
</ion-row> {{ts.trPK('userProfile','months')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label> -->
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> </ion-col>
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','address')}}</label>
</ion-row> </ion-row>
</ion-grid>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row> <ion-row>
<label class="rowBolds"></label> <ion-col class="text-years">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}
{{ts.trPK('absenceList','days')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label> -->
</ion-col>
</ion-row> </ion-row>
</ion-col> </ion-grid>
</ion-row> </ion-col>
</ion-row>
</div>
</ion-grid>
</div>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> <br>
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('general','mobile')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.EMPLOYEE_MOBILE_NUMBER}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> <ion-card *ngIf="personalInfoSegment">
<ion-col> <ion-card-content>
<ion-row> <ion-label>
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label> <h1 style="color: black;">{{ts.trPK('userProfile','personal-informaion')}}</h1>
</ion-row> </ion-label>
<ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label> <br>
</ion-row> <ion-label>
</ion-col> <h3>{{ts.trPK('userProfile','category')}}</h3>
</ion-row> </ion-label>
<h3 style="font-weight: bold;">part-time</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','address')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">DR.Sulaiman Alhabib Medical Group</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','phone-no')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">0567845661</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','busG')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">CORP Cloud Solutions</h3>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','payrol')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Cloud Solutions Payroll</h3>
<br>
</ion-card-content>
</ion-card>
<ion-card *ngIf="basicDetailsSegment">
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> <ion-card-content *ngIf="!editBasic">
<ion-col> <ion-grid>
<ion-row> <ion-row>
<label class="lebl">{{ts.trPK('userProfile','job')}}</label> <ion-col size="10">
</ion-row> <ion-label>
<ion-row> <h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
<label class="rowBolds">{{personalInfo.JOB_NAME}}</label> </ion-label>
</ion-row> </ion-col>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> <ion-col size="2">
<ion-col> <img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
<ion-row> (click)="allowEdit(1)">
<label class="lebl">{{ts.trPK('userProfile','payrol')}}</label> </ion-col>
</ion-row> </ion-row>
<ion-row> </ion-grid>
<label class="rowBolds">{{personalInfo.PAYROLL_NAME}}</label> <br>
</ion-row> <ion-label>
</ion-col> <h3>{{ts.trPK('general','full-name')}}</h3>
</ion-row> </ion-label>
<h3 style="font-weight: bold;">ENAD HILAL NASSER MOHAMMED</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','marital-status')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Married</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','birth_date')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">01-FEB-1991</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','civil-identity-number')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">2093486013</h3>
<br>
</ion-card-content>
<ion-card-content *ngIf="editBasic">
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> <ion-label>
<ion-col> <h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
<ion-row> </ion-label>
<label class="lebl">{{ts.trPK('userProfile','orgEmail')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;"> <ion-label>
<ion-col> <h3>{{ts.trPK('general','effective-date')}}</h3>
<ion-row> </ion-label>
<label class="lebl">{{ts.trPK('userProfile','position')}}</label>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.POSITION_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-row> <ion-label>MMMM</ion-label>
<ion-col> <ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
<ion-row> </ion-item>
<label class="lebl">{{ts.trPK('userProfile','grade')}} </label> <br>
</ion-row>
<ion-row>
<label class="rowBolds">{{personalInfo.GRADE_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
</div> <ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','title')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="mr">Mr</ion-select-option>
<ion-select-option value="ms">Miss</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','family-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','preferred-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','previous-family-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','father-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','grand-father-name')}}</ion-label>
<ion-input class="login-input" required type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','arabic-first-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','arabic-father-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','arabic-grand-father-name')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content *ngIf="editBasic">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','other')}}</h1>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','gender')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="m">Male</ion-select-option>
<ion-select-option value="f">Female</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','marital-status')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="s">Singal</ion-select-option>
<ion-select-option value="m">Married</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','nationality')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="mr">Mr</ion-select-option>
<ion-select-option value="ms">Miss</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','religion')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="i">Islam</ion-select-option>
<ion-select-option value="o">Other</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','education-level')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="u">University</ion-select-option>
<ion-select-option value="o">other</ion-select-option>
</ion-select>
</ion-item>
<br>
</ion-card-content>
</ion-card>
<ion-card *ngIf="addressSegment">
<ion-card-content *ngIf="!editAddress">
<ion-grid>
<ion-row>
<ion-col size="10">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','main-address')}}</h1>
</ion-label>
</ion-col>
<ion-col size="2">
<img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
(click)="allowEdit(2)">
</ion-col>
</ion-row>
</ion-grid> </ion-grid>
<br>
<ion-label>
<h3>{{ts.trPK('general','address')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Riyadh</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','street')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">-</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','area')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">-</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','p-o-box')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">22617</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','city')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">Riyadh</h3>
<br>
<ion-label>
<h3>{{ts.trPK('general','postal-code')}}</h3>
</ion-label>
<h3 style="font-weight: bold;">11416</h3>
<br>
</ion-card-content>
<ion-card-content *ngIf="editAddress">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','address')}}</h1>
</ion-label>
<ion-label>
<h3>{{ts.trPK('general','effective-date')}}</h3>
</ion-label>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>MMMM</ion-label>
<ion-datetime displayFormat="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label>{{ts.trPK('general','nationality')}}</ion-label>
<ion-select placeholder="Select One">
<ion-select-option value="mr">Mr</ion-select-option>
<ion-select-option value="ms">Miss</ion-select-option>
</ion-select>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','address')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','street')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','area')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','p-o-box')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','city')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
<br>
<ion-item lines="none" class="item-input-login" style="--background: white">
<ion-label position="floating">{{ts.trPK('userProfile','postal-code')}}</ion-label>
<ion-input class="login-input" type="text"></ion-input>
</ion-item>
</ion-card-content>
</ion-card>
<!-- <div class="header-div">
<div>
<div class="centerDiv homeBox">
<img class="profileImg" [src]="user_image">
</div>
<div *ngIf="personalInfo">
<p class="empName">{{User_name_Emp}}</p>
<p class="empJob"> {{User_Job_name}}</p>
</div>
</div> </div>
<!-- </ion-card-content> --> </div>
<!-- </ion-card> -->
</div> <ion-grid *ngIf="personalInfo" style="position: relative; display: block; z-index: 5;">
<div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'" style="background: #0B4775; border-radius: 20px;">
<ion-row>
<ion-col>
<label style="font-size: 12px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-weight: bold;">
{{ 'general, appreciate-service' | translate}}
</label>
</ion-col>
</ion-row>
<ion-row [ngClass]=" direction == 'ltr' ? 'service-row-en' : 'service-row-ar'">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<div class="verticalLine"></div>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<div class="verticalLine"></div>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<ion-row style="text-align:center">
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
</ion-col>
<ion-col>
<label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
</ion-grid>
<div class="list">
<ion-list class="list-ios">
<div class="p">
<p>{{ts.trPK('userProfile','Years of Services')}}</p>
</div>
<ion-item class="itemline" (click)="openEditprofile()">
<ion-thumbnail slot="start" class="menu-thumb">
<img style= "height: 22px !important;" src="../assets/imgs/profile_icon.png" item-left>
</ion-thumbnail>
<ion-label class="profile">
{{ts.trPK('userProfile','edit-profile')}}
</ion-label>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item>
<ion-item class="itemlins" (click)="openPerormance()">
<ion-thumbnail slot="start" class="menu-thumb">
<ion-icon style= "width: 23px; height: 24px !important;" name="speedometer" item-left></ion-icon>
</ion-thumbnail>
<ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}}
</ion-label>
<ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item>
</ion-list>
</div> -->
<ion-footer *ngIf="editBasic||editAddress">
<ion-grid>
<ion-row>
<ion-col>
<ion-button style="--background: #f44336; background: white; width: 100%;" (click)="disableEdit(1)">Cancel
</ion-button>
</ion-col>
<ion-col>
<ion-button style="--background: #46da59; background: white; width: 100%;" (click)="presentModal()">Update</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
</ion-content> </ion-content>

File diff suppressed because it is too large Load Diff

@ -1,45 +1,68 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Platform, Events, MenuController, ModalController } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service'; import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
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 { Events } from '@ionic/angular'; import { PerformanceAppraisalResponse } from 'src/app/hmg-common/services/dashbored/performance-appraisal.response';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { EditDetailProfileComponent } from '../modal/edit-detail-profile/edit-detail-profile.component';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: './home.component.html', templateUrl: './home.component.html',
styleUrls: ['./home.component.scss'] styleUrls: ['./home.component.scss']
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
personalInfo: any;
setImage:any;
imageSrc: any = '../assets/imgs/profile.png'; User_name_Emp: string = '';
User_Job_name: string;
public direction: string; public direction: string;
// user_image: any = "../assets/imgs/profile.png"; private menu: MenuController;
setImage: any;
// imageSrc: any = "../assets/imgs/profile.png";
user_image: any = '../assets/imgs/profile.png';
personalInfo: any;
appraisalArr: any = [];
public performanceData: any = [];
public static PERFORMANCE_DATA = 'perAppData';
public personalInfoSegment = true;
public basicDetailsSegment = false;
public addressSegment = false;
public editBasic = false;
public editAddress = false;
constructor( constructor(
public ts: TranslatorService, public ts: TranslatorService,
public cs: CommonService, public cs: CommonService,
public authService: AuthenticationService, public authService: AuthenticationService,
private events: Events, public DS: DashboredService,
public sharedData: SharedDataService,
public events: Events,
private sanitizer: DomSanitizer, private sanitizer: DomSanitizer,
public modalController: ModalController
// private events: Events,
// private sanitizer: DomSanitizer,
) { ) {
this.direction = TranslatorService.getCurrentDirection(); this.direction = TranslatorService.getCurrentDirection();
this.events.subscribe('img-change', displayImg => { this.events.subscribe('img-change', displayImg => {
// alert("1 - profile home : "+displayImg); console.log('app compont: ' + displayImg);
//this.user_image = "data:image/png;base64"+displayImg; this.user_image = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,' + displayImg);
this.setImage = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,'+displayImg);
this.imageSrc = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,'+displayImg);
}); });
} }
ngOnInit() { ngOnInit() {
this.getProfile(); this.getProfile();
} }
getProfile() { getProfile() {
console.log('getProfile'); console.log('getProfile');
this.authService this.authService
@ -47,28 +70,122 @@ export class HomeComponent implements OnInit {
.subscribe((user: AuthenticatedUser) => { .subscribe((user: AuthenticatedUser) => {
if (user) { if (user) {
this.personalInfo = user; this.personalInfo = user;
console.log('name: '+ this.personalInfo.EMPLOYEE_NAME); this.User_name_Emp = this.personalInfo.EMPLOYEE_NAME;
console.log('user name: '+ user.EMPLOYEE_NAME); this.User_Job_name = this.personalInfo.JOB_NAME;
if (this.cs.getUpdateImage().status) {
if(this.cs.getUpdateImage().status){ this.user_image = this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,' + this.cs.getUpdateImage().img);
// this.imageSrc = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+this.cs.getUpdateImage().img); } else {
this.imageSrc =this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,'+this.cs.getUpdateImage().img); this.user_image = user.EMPLOYEE_IMAGE
}else{ ? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE
this.imageSrc = user.EMPLOYEE_IMAGE : '../assets/imgs/profile.png';
? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE }
: this.imageSrc; console.log(user);
console.log('2-'+user); console.log(this.personalInfo);
} console.log('name: ' + this.personalInfo.EMPLOYEE_NAME);
} console.log('user name: ' + user.EMPLOYEE_NAME);
else { console.log('name: ' + this.personalInfo.JOB_NAME);
console.log('3-'+user); console.log('job name: ' + user.JOB_NAME);
} }
}); });
} }
openEditprofile() {
this.cs.openProfile();
}
openPerormance() {
this.showPerformanceAppraisal();
}
showPerformanceAppraisal() {
this.DS.getPerformanceAppraisal(() => {
this.showPerformanceAppraisal();
}).subscribe((result: PerformanceAppraisalResponse) => {
this.handlePerformanceAppraisalResult(result);
public ChangeImage() { });
this.cs.openChangeImagePage(); }
private handlePerformanceAppraisalResult(result) {
if (this.cs.validResponse(result)) {
if (this.cs.hasData(result.GetPerformanceAppraisalList)) {
this.appraisalArr = result.GetPerformanceAppraisalList;
this.performanceData = [];
for (let i = 0; i < this.appraisalArr.length; i++) {
this.performanceData.push({ name: this.appraisalArr[i].APPRAISAL_YEAR, value: parseInt(this.appraisalArr[i].APPRAISAL_SCORE).toFixed() });
}
console.log('PerformanceAppraisalResponse');
this.sharedData.setSharedData(this.performanceData, PerformanceAppraisalResponse.PERFORMANCE_DATA);
//localStorage.setItem("performanceData", this.performanceData)
this.cs.openPerformanceevaluation();
} else {
let msg: string = this.ts.trPK("userProfile", "no-appraisal");
this.cs.presentAlert(msg);
}
}
}
selectedSegment(segmentData){
switch (segmentData){
case "personal":
this.personalInfoSegment = true;
this.basicDetailsSegment = false;
this.addressSegment = false;
this.editBasic = false;
this.editAddress = false;
break;
case "basic":
this.personalInfoSegment = false;
this.basicDetailsSegment = true;
this.addressSegment = false;
this.editBasic = false;
this.editAddress = false;
break;
case "address":
this.personalInfoSegment = false;
this.basicDetailsSegment = false;
this.addressSegment = true;
this.editBasic = false;
this.editAddress = false;
break;
}
}
allowEdit(allowVal){
switch(allowVal){
case 1:
this.editBasic = true;
break;
case 2:
this.editAddress = true;
break;
}
}
disableEdit(disableVal){
switch(disableVal){
case 1:
this.editBasic = false;
break;
case 2:
this.editAddress = false;
break;
}
}
async presentModal() {
const modal = await this.modalController.create({
component: EditDetailProfileComponent,
cssClass: 'my-custom-modal-css'
});
return await modal.present();
} }
} }

@ -0,0 +1,39 @@
<ion-content padding>
<ion-label padding>
<h2 style=" font-weight: bold; color: black; font-size: 20px;">
{{ts.trPK('general','type-of-change')}}</h2>
</ion-label>
<ion-list>
<ion-radio-group value="1">
<ion-item lines="none">
<ion-label >
<h3 style="color: black; font-size: 20px; white-space: break-spaces !important">{{ts.trPK('general','correct-or-complete')}}</h3></ion-label>
<ion-radio slot="start" color="secondary" mode='md' value="1"></ion-radio>
</ion-item>
<ion-item lines="none">
<ion-label>
<h3 style="color: black; font-size: 20px; white-space: break-spaces !important">{{ts.trPK('general','new-info')}}</h3>
</ion-label>
<ion-radio slot="start" color="secondary" mode='md' value="2"></ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
<ion-footer>
<ion-grid>
<ion-row>
<ion-col>
<ion-button style=" width: 90%; background: white; --background: #b4b4b4">{{ts.trPK('userProfile','cancel-text')}}</ion-button>
</ion-col>
<ion-col>
<ion-button style=" width: 90%; background: white; --background: #269db8">{{ts.trPK('general','next')}}</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
</ion-content>

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

@ -0,0 +1,30 @@
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
@Component({
selector: 'app-edit-detail-profile',
templateUrl: './edit-detail-profile.component.html',
styleUrls: ['./edit-detail-profile.component.scss'],
})
export class EditDetailProfileComponent implements OnInit {
constructor(
public modalController: ModalController,
public ts: TranslatorService,
) { }
colorRadio = "#269db8"
ngOnInit() {}
dismiss() {
// using the injected ModalController this page
// can "dismiss" itself and optionally pass back data
this.modalController.dismiss({
'dismissed': true
});
}
}

@ -15,6 +15,7 @@ import {EditProfileComponent} from './edit-profile/edit-profile.component';
import {ProfileImageComponent} from './profile-image/profile-image.component' import {ProfileImageComponent} from './profile-image/profile-image.component'
import {PerformanceEvaluationComponent} from './performance-evaluation/performance-evaluation.component' import {PerformanceEvaluationComponent} from './performance-evaluation/performance-evaluation.component'
import { from } from 'rxjs'; import { from } from 'rxjs';
import { EditDetailProfileComponent } from './modal/edit-detail-profile/edit-detail-profile.component';
const routes: Routes = [ const routes: Routes = [
{ {
@ -70,9 +71,9 @@ const routes: Routes = [
IonicModule, IonicModule,
HmgCommonModule, HmgCommonModule,
NgxChartsModule, NgxChartsModule,
RouterModule.forChild(routes) RouterModule.forChild(routes)
], ],
declarations: [ProfilePage , HomeComponent,ProfileImageComponent,EditProfileComponent,PerformanceEvaluationComponent] declarations: [ProfilePage ,EditDetailProfileComponent, HomeComponent,ProfileImageComponent,EditProfileComponent,PerformanceEvaluationComponent],
entryComponents:[EditDetailProfileComponent]
}) })
export class ProfilePageModule {} export class ProfilePageModule {}

@ -361,6 +361,10 @@
"en": "Nationality", "en": "Nationality",
"ar": "الجنسية" "ar": "الجنسية"
}, },
"religion":{
"en":"Religion",
"ar":"الديانة"
},
"empty": { "empty": {
"en": "Sorry no data avaiable", "en": "Sorry no data avaiable",
"ar": "لا يوجد بيانات" "ar": "لا يوجد بيانات"
@ -427,7 +431,7 @@
}, },
"other": { "other": {
"en": "Other", "en": "Other",
"ar": "أخري" "ar": "أخرى"
}, },
"provide-missing": { "provide-missing": {
"en": "Please provide required information", "en": "Please provide required information",
@ -956,6 +960,50 @@
"appreciate-service": { "appreciate-service": {
"en": "We appreciate you for completing the service of", "en": "We appreciate you for completing the service of",
"ar": "نحن نقدر لك استكمال خدمة" "ar": "نحن نقدر لك استكمال خدمة"
},
"basic-details":{
"en":"Basic Details",
"ar":"المعلومات الاساسية"
},
"full-name":{
"en":"Full Name",
"ar":"الاسم كامل"
},
"marital-status":{
"en":"Marital Status",
"ar":"الاحالة الاجتماعية"
},
"civil-identity-number":{
"en":"Civil identity number",
"ar":"رقم الهوية المدنية"
},
"effective-date":{
"en":"Effective Date",
"ar":"تاريخ الفعالية "
},
"gender":{
"en":"Gender",
"ar":"النوع"
},
"education-level":{
"en":"Education Level",
"ar":"المستوى التعليمي"
},
"main-address":{
"en":"Main Address",
"ar":"العنوان الرئيسي"
},
"correct-or-complete":{
"en":"correct or complete the current details",
"ar":"تعديل او اكمال التفاصيل الحالية"
},
"new-info":{
"en":"enter new Information because of a real change to the current details (e.g because of a change in marital status)",
"ar":"أدخل معلومات جديدة بسبب تغيير حقيقي في التفاصيل الحالية (على سبيل المثال بسبب تغيير في الحالة الاجتماعية)"
},
"type-of-change":{
"en":" Select the type of change you want to make.",
"ar":" حدد نوع التغيير الذي تريد القيام به."
} }
}, },
"home": { "home": {
@ -1242,6 +1290,62 @@
"successChange": { "successChange": {
"en": "Profile Photo changed successfully ", "en": "Profile Photo changed successfully ",
"ar": "تم تغيير الصورة الشخصية بنجاح" "ar": "تم تغيير الصورة الشخصية بنجاح"
},
"personal-informaion":{
"en":"Personal Informaion",
"ar":"المعلومات الشخصية"
},
"family-name":{
"en":"Family Name",
"ar":"اسم العائلة"
},
"preferred-name":{
"en":"Preferred Name",
"ar":"الاسم المفضل"
},
"previous-family-name":{
"en":"Previous Family Name",
"ar":"اسم العائلة السابق"
},
"father-name":{
"en":"Father Name<",
"ar":"اسم الاب"
},
"grand-father-name":{
"en":"GrandFather Name",
"ar":"اسم الجد"
},
"arabic-first-name":{
"en":"Arabic First Name",
"ar":"الاسم الاول بالعربي"
},
"arabic-father-name":{
"en":"Arabic Father Name",
"ar":"اسم الاب بالعربي"
},
"arabic-grand-father-name":{
"en":"Arabic GrandFather Name",
"ar":"اسم الجد بالعربي"
},
"street":{
"en":"Street",
"ar":"شارع"
},
"area":{
"en":"Area",
"ar":"المنطقة"
},
"p-o-box":{
"en":"P.O Box",
"ar":"صندوق البريد"
},
"city":{
"en":"City",
"ar":"المدينة"
},
"postal-code":{
"en":"Postal Code",
"ar":"الرمز البريدي"
} }
}, },
"changePassword": { "changePassword": {

@ -1584,4 +1584,4 @@ ion-segment-button {
background: #fff; background: #fff;
width: 75%; width: 75%;
margin: auto; margin: auto;
} }

Loading…
Cancel
Save