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() {
this.cs.openEditProfile();
this.cs.openProfile();
this.menu.toggle();
}

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

@ -1,121 +1,153 @@
<app-generic-header
showBack="true"
[headerText]="'userProfile,title' | translate">
[headerText]="'userProfile, title' | translate">
</app-generic-header>
<ion-content class="colorBG">
<div class="header-div">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons> -->
<!-- <p class="proTitles">{{ts.trPK('userProfile','title')}}</p> -->
<div>
<div class="centerDiv homeBox">
<div class="centerDiv homeBox">
<!-- <div class="profileDiv"> -->
<img class="profileImg" [src]="user_image">
<img class="profileImg" [src]="imageSrc">
</div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
<div *ngIf="personalInfo">
<p class="empName">{{User_name_Emp}}</p>
<p class="empJob"> {{User_Job_name}}</p>
<p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p>
</div>
</div>
</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 [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
<!-- <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> -->
<img (click)="ChangeImage();" class="changeIcon" src="../assets/imgs/edit-image.svg">
</button>
</div>
</ion-grid>
</div> <!-- end header-div -->
<div>
<div class="list">
<ion-list class="list-ios">
<div class="p">
<p>{{ts.trPK('userProfile','Years of Services')}}</p>
</div>
<!-- <ion-card *ngIf="personalInfo"> -->
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</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-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-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<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-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
</ion-row>
<ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_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','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>

@ -1,216 +1,130 @@
ion-col.colBold, ion-col.colBold > label{
font-weight:bold;
}
.list-ios {
// margin-left: 0;
// margin-right: 0;
// margin-top: 32px;
// margin-bottom: 32px;
// background: var(--ion-item-background,var(--ion-background-color,#fff));
margin-left: 0;
margin-right: 0;
margin-top: -15px;
margin-bottom: 32px;
border: 1px solid #d8d8d8;
background: var(--ion-item-background, var(--ion-background-color, #fff));
border-radius: 10px;
padding-top: 60px;
.colorBG{
--background: #f0efef;
}
.header-div{
text-transform: capitalize;
background: #269DB8;
display: block;
position: relative;
height: 160px;
margin-bottom: 60px;
}
.header-toolbar-new{
--background: #269DB8;
// .profileCont{
// background-color: #d9d7d7 !important;
.menubutton {
background: #f0ecec;
min-height: 39px;
width: 35px !important;
height: 20px;
border-radius: 50%;
}
.colorBG{
--background: #f0efef;
}
.header-div{
text-transform: capitalize;
background: #269DB8;
display: block;
.changeIcon{
/* background: #c1c1c1; */
width: 21px;
/* height: 26px; */
border-radius: 50% !important;
position: relative;
height: 113px;
margin-bottom: 60px;
}
color: #7f8c8d;
height: 35px;
}
.changeImgBtn{
position: absolute;
top: 80%;
left: 65%;
}
.changeImgBtn-ar{
position: absolute;
top: 80%;
left: 66%;
}
.profileImg{
width: 160px;
height: 160px;
display: -webkit-inline-box;
display: inline-flex;
overflow: hidden;
/* background: transparent; */
border-radius: 78% !important;
position: relative;
top: 34px;
// background: white;
background: transparent;
margin-left: -3px;
height: 160px;
display: -webkit-inline-box;
display: inline-flex;
overflow: hidden;
// background: transparent;
border-radius: 69% !important;
position: relative;
top: 34px;
// background: white;
background: transparent;
}
.Text {
margin: 0;
padding: 0;
text-align: center;
font-weight: bolder;
color: black;
font-size: 16px;
margin-top: 34px;
text-align: center;
}
.proTitles {
margin: 0;
padding: 0;
font-size: 16px;
text-align: center;
font-weight: bolder;
color: white;
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;
.line{
padding-top: 0px !important;
/* margin-bottom: 0px; */
/* margin: 0px; */
border-right: 1px #c5c2c2 solid !important;
line-height: 10px !important;
}
.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{
width: 95%;
margin: -12px 0px 35px 0px;
.rowBolds{
color: black !important;
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 { Platform, Events, MenuController } from '@ionic/angular';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
import { 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 { Events } from '@ionic/angular';
import { DomSanitizer } from '@angular/platform-browser';
// import { DomSanitizer } from '@angular/platform-browser';
@Component({
@ -17,47 +14,35 @@ import { DomSanitizer } from '@angular/platform-browser';
styleUrls: ['./edit-profile.component.scss'],
})
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;
appraisalArr :any =[];
public performanceData: any=[];
public static PERFORMANCE_DATA = 'perAppData';
setImage:any;
imageSrc: any = '../assets/imgs/profile.png';
public direction: string;
// user_image: any = "../assets/imgs/profile.png";
constructor(
public ts: TranslatorService,
public cs: CommonService,
public authService: AuthenticationService,
public DS :DashboredService,
public sharedData: SharedDataService,
public events: Events,
private events: Events,
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() {
this.getProfile();
this.getProfile();
}
getProfile() {
console.log('getProfile');
this.authService
@ -65,60 +50,27 @@ export class EditProfileComponent implements OnInit {
.subscribe((user: AuthenticatedUser) => {
if (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('user name: '+ user.EMPLOYEE_NAME);
console.log('name: '+ this.personalInfo.JOB_NAME);
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);
});
}
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()});
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);
}else{
this.imageSrc = user.EMPLOYEE_IMAGE
? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE
: this.imageSrc;
console.log('2-'+user);
}
}
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);
else {
console.log('3-'+user);
}
});
}
}
public ChangeImage() {
this.cs.openChangeImagePage();
}
}
}

@ -1,153 +1,539 @@
<app-generic-header
showBack="true"
[headerText]="'userProfile, title' | translate">
<app-generic-header showBack="true" [headerText]="'userProfile,title' | translate">
</app-generic-header>
<ion-content class="colorBG">
<div class="header-div">
<div class="centerDiv homeBox">
<div class="centerDiv homeBox">
<!-- <div class="profileDiv"> -->
<img class="profileImg" [src]="imageSrc">
</div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
<!-- <div class="Text">{{personalInfo.EMPLOYEE_NAME}}</div> -->
<div *ngIf="personalInfo">
<p class="Text">{{personalInfo.EMPLOYEE_NAME}}</p>
<div class="header-background-style-card">
</div>
<div [ngClass]="direction == 'ltr' ? 'result-graph' : 'result-graph-ar'" style="margin-top: -50px;">
<div class="user-info">
<div class="user-image-container">
<div class="user-image">
<img [ngClass]="direction == 'ltr'? 'img':'img-ar' "
[src]="personalInfo?.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+personalInfo.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
alt="Team Member Image" />
</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 [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
<!-- <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> -->
<img (click)="ChangeImage();" class="changeIcon" src="../assets/imgs/edit-image.svg">
</button>
<div class="user-actions">
<ion-row class="ion-justify-content-center">
<ion-col [size]="4" (click)="selectedSegment('personal')">
<div class="action-button col-button">
<img style="width: 50px;" src="../assets/imgs/check_padding.png">
<span>{{ts.trPK('general','personal-info')}}</span>
</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> <!-- end header-div -->
<div>
<!-- <ion-card *ngIf="personalInfo"> -->
<!-- <ion-card-header class="boxHdr">
<div class="hrTitle">{{personalInfo.EMPLOYEE_NAME}}</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-grid *ngIf="personalInfo" [ngClass]="direction === 'ltr'? 'grid-card':'grid-card-ar' ">
<div [ngClass]=" direction == 'ltr' ? 'gridService-en' : 'gridService-ar'"
style="background: #002948; border-radius: 0px 0px 10px 10px;">
<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>
<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-col class="text-years">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}
{{ts.trPK('userProfile','years')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label> -->
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<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-col class="text-years">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}
{{ts.trPK('userProfile','months')}}</label>
<!-- <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label> -->
</ion-col>
</ion-row>
</ion-grid>
</ion-col>
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<ion-grid>
<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-col>
</ion-row>
</ion-grid>
</ion-col>
</ion-row>
</div>
</ion-grid>
</div>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<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>
<br>
<ion-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<ion-col>
<ion-row>
<label class="lebl">{{ts.trPK('userProfile','busG')}}</label>
</ion-row>
<ion-row> <label class="rowBolds">{{personalInfo.BUSINESS_GROUP_NAME}}</label>
</ion-row>
</ion-col>
</ion-row>
<ion-card *ngIf="personalInfoSegment">
<ion-card-content>
<ion-label>
<h1 style="color: black;">{{ts.trPK('userProfile','personal-informaion')}}</h1>
</ion-label>
<br>
<ion-label>
<h3>{{ts.trPK('userProfile','category')}}</h3>
</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-row style="border-bottom: rgb(190, 187, 187) solid 1px;">
<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-card *ngIf="basicDetailsSegment">
<ion-card-content *ngIf="!editBasic">
<ion-grid>
<ion-row>
<ion-col size="10">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
</ion-label>
</ion-col>
<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-col size="2">
<img style="width: 70%;border: 1px solid;border-radius: 15px;" src="../assets/imgs/edit_icon.png"
(click)="allowEdit(1)">
</ion-col>
</ion-row>
</ion-grid>
<br>
<ion-label>
<h3>{{ts.trPK('general','full-name')}}</h3>
</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-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-card-content *ngIf="editBasic">
<ion-label>
<h1 style="color: black;">{{ts.trPK('general','basic-details')}}</h1>
</ion-label>
<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-label>
<h3>{{ts.trPK('general','effective-date')}}</h3>
</ion-label>
<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>
<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>
</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>
<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>
<!-- </ion-card-content> -->
<!-- </ion-card> -->
</div>
</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>

File diff suppressed because it is too large Load Diff

@ -1,45 +1,68 @@
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 { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { AuthenticatedUser } from 'src/app/hmg-common/services/authentication/models/authenticated-user';
import { 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 { EditDetailProfileComponent } from '../modal/edit-detail-profile/edit-detail-profile.component';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
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;
// 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(
public ts: TranslatorService,
public cs: CommonService,
public authService: AuthenticationService,
private events: Events,
public DS: DashboredService,
public sharedData: SharedDataService,
public events: Events,
private sanitizer: DomSanitizer,
public modalController: ModalController
// private events: Events,
// private sanitizer: DomSanitizer,
) {
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);
console.log('app compont: ' + displayImg);
this.user_image = this.sanitizer.bypassSecurityTrustUrl('data:Image/*;base64,' + displayImg);
});
}
ngOnInit() {
this.getProfile();
}
getProfile() {
console.log('getProfile');
this.authService
@ -47,28 +70,122 @@ export class HomeComponent implements OnInit {
.subscribe((user: AuthenticatedUser) => {
if (user) {
this.personalInfo = user;
console.log('name: '+ this.personalInfo.EMPLOYEE_NAME);
console.log('user name: '+ user.EMPLOYEE_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);
}else{
this.imageSrc = user.EMPLOYEE_IMAGE
? 'data:image/png;base64,' + user.EMPLOYEE_IMAGE
: this.imageSrc;
console.log('2-'+user);
}
}
else {
console.log('3-'+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(user);
console.log(this.personalInfo);
console.log('name: ' + this.personalInfo.EMPLOYEE_NAME);
console.log('user name: ' + user.EMPLOYEE_NAME);
console.log('name: ' + this.personalInfo.JOB_NAME);
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 {PerformanceEvaluationComponent} from './performance-evaluation/performance-evaluation.component'
import { from } from 'rxjs';
import { EditDetailProfileComponent } from './modal/edit-detail-profile/edit-detail-profile.component';
const routes: Routes = [
{
@ -70,9 +71,9 @@ const routes: Routes = [
IonicModule,
HmgCommonModule,
NgxChartsModule,
RouterModule.forChild(routes)
],
declarations: [ProfilePage , HomeComponent,ProfileImageComponent,EditProfileComponent,PerformanceEvaluationComponent]
declarations: [ProfilePage ,EditDetailProfileComponent, HomeComponent,ProfileImageComponent,EditProfileComponent,PerformanceEvaluationComponent],
entryComponents:[EditDetailProfileComponent]
})
export class ProfilePageModule {}

@ -361,6 +361,10 @@
"en": "Nationality",
"ar": "الجنسية"
},
"religion":{
"en":"Religion",
"ar":"الديانة"
},
"empty": {
"en": "Sorry no data avaiable",
"ar": "لا يوجد بيانات"
@ -427,7 +431,7 @@
},
"other": {
"en": "Other",
"ar": "أخري"
"ar": "أخرى"
},
"provide-missing": {
"en": "Please provide required information",
@ -956,6 +960,50 @@
"appreciate-service": {
"en": "We appreciate you for completing the service of",
"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": {
@ -1242,6 +1290,62 @@
"successChange": {
"en": "Profile Photo changed successfully ",
"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": {

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

Loading…
Cancel
Save