< app-generic-header showBack = "true" [ headerText ] = " ' userProfile , title ' | translate " >
< / app-generic-header >
< ion-content class = "colorBG" * ngIf = "personalInfo" >
< div class = "header-background-style-card" >
< / div >
< div [ ngClass ] = " direction = = ' ltr ' ? ' result-graph ' : ' result-graph-ar ' " style = "margin-top: -50px;" >
< div [ ngClass ] = " direction = = ' ltr ' ? ' changeImgBtn ' : ' changeImgBtn-ar ' " ( click ) = " updateImageProfile ( ) " >
<!-- <button ion - button icon - only menuToggle class="menubutton" (click)="updateImageProfile()"> -->
< img style = "margin: 0px 5px;" class = "changeIcon" src = "../assets/imgs/edit_icon.png" >
<!-- </button> -->
< / div >
< div class = "user-info" >
< div class = "user-image-container" >
< div [ ngClass ] = " direction = = ' ltr ' ? ' user-image ' : ' user-image-ar ' " >
< 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 >
< div style = "margin-top: 25px;" >
< h1 class = "name" > {{personalInfo.EMPLOYEE_NAME}}< / h1 >
< span class = "email" > {{personalInfo.EMPLOYEE_EMAIL_ADDRESS}}< / span >
< / div >
< div >
< ion-row style = "margin-top: 11px;" >
< ion-col [ size ] = " 6 " >
< p class = "subTitle" > {{ts.trPK('userProfile','role')}}< / p >
< span class = "boldText" > {{jobName}}< / span >
< / ion-col >
< ion-col [ size ] = " 6 " style = "border-left: 1px solid rgb(221 221 221);" >
< p class = "subTitle" style = "line-height: 8px !important;" > {{ts.trPK('userProfile','empNo')}}< / p >
< span class = "boldText" > {{personalInfo.EMPLOYEE_NUMBER}}< / span >
< / ion-col >
< / ion-row >
< / div >
< / div >
< div class = "user-actions" >
< ion-row class = "ion-justify-content-center" >
< ion-col [ size ] = " 3 " ( click ) = " selectedSegment ( ' personal ' ) " >
< div class = "action-button col-button" >
< img * ngIf = "!personalInfoSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/info@2x.png" >
< img * ngIf = "personalInfoSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/info-a@2x.png" >
< span class = "btnTitle" > {{ts.trPK('general','personal-info')}}< / span >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " ( click ) = " selectedSegment ( ' basic ' ) " >
< div class = "action-button col-button" >
< img * ngIf = "!basicDetailsSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/basic-detail@2x.png" >
< img * ngIf = "basicDetailsSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/basic-detail@21.png" >
< span class = "btnTitle" > {{ts.trPK('general','basic-details')}}< / span >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " ( click ) = " selectedSegment ( ' address ' ) " >
< div class = "action-button col-button" >
< img * ngIf = "!addressSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/main-address@2x.png" >
< img * ngIf = "addressSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/main address-a@2x.png" >
< span class = "btnTitle" > {{ts.trPK('userProfile','contact-details')}} < / span >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " ( click ) = " selectedSegment ( ' family ' ) " >
< div class = "action-button col-button" >
< img * ngIf = "!familyMemberSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/family.svg" >
< img * ngIf = "familyMemberSegment" style = "width: 40px;" src = "../assets/imgs/profile-icons/family-g.svg" >
< span class = "btnTitle" > {{ts.trPK('userProfile','family-members')}}< / span >
< / div >
< / ion-col >
< / ion-row >
< / div >
< ion-grid [ ngClass ] = " direction = == ' ltr ' ? ' grid-card ' : ' grid-card-ar ' " >
< div [ ngClass ] = " direction = = ' ltr ' ? ' gridService-en ' : ' gridService-ar ' "
style="background: #2B353E; border-radius: 0px 0px 10px 10px;">
< ion-row >
< ion-col >
< label
style="font-size: 11px; color: white; margin: 10px 0px 0px 0px; display: block; text-align: center;font-family: var(--fontFamilyPoppins-SemiBold, inherit);">
{{ 'general, appreciate-service' | translate}}
< / label >
< / ion-col >
< / ion-row >
< ion-row [ ngClass ] = " direction = = ' ltr ' ? ' service-row-en ' : ' service-row-ar ' " >
< ion-col [ size ] = " 4 " [ ngClass ] = " direction = = ' ltr ' ? ' columns ' : ' columns-ar ' " >
< ion-grid >
< ion-row >
< 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 [ size ] = " 4 " [ ngClass ] = " direction = = ' ltr ' ? ' columns ' : ' columns-ar ' " >
< ion-grid >
< ion-row >
< 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 [ size ] = " 4 " [ ngClass ] = " direction = = ' ltr ' ? ' columns ' : ' columns-ar ' " >
< ion-grid >
< ion-row >
< 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-grid >
< / ion-col >
< / ion-row >
< / div >
< / ion-grid >
< / div >
< br > < br >
< div style = "display: flex; justify-content: center;" >
< div [ ngClass ] = ' profileProgress > 0 & & profileProgress >= 25 ? "profile-green":"profile-gray"'>< / div >
< div [ ngClass ] = ' profileProgress > = 25 & & profileProgress >= 50 ? "profile-green":"profile-gray"'>< / div >
< div [ ngClass ] = ' profileProgress > = 50 & & profileProgress >= 75? "profile-green":"profile-gray"'>< / div >
< div [ ngClass ] = ' profileProgress > = 85 ? "profile-green":"profile-gray"'>< / div >
< / div >
< div style = "margin-left: 20px; margin-top: 5px; font-size: 13px;" > {{ts.trPK('userProfile','profile-compitation')}} {{profileProgress}}%< / div >
< div * ngIf = "familyMemberSegment" style = "margin-left: 20px; margin-top: 5px; font-size: 13px;" > Add or update information about your beneficarie of dependants < br >
Note: People you enter here become dependants or beneficiaries only after you complete benefits enrollment< / div >
< ion-card * ngIf = "personalInfoSegment" [ ngClass ] = " direction = == ' ltr ' ? ' card-size-info-en ' : ' card-size-info-ar ' " >
< ion-card-content >
< ion-label >
< h1 [ ngClass ] = " direction = == ' ltr ' ? ' Profileheader-label-text-form ' : ' Profileheader-label-text-form-ar ' " > {{ts.trPK('userProfile','personal-informaion')}}< / h1 >
< / ion-label >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','category')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{personalInfo.EMPLOYMENT_CATEGORY_MEANING}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','phone-no')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{personalInfo.EMPLOYEE_MOBILE_NUMBER}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','busG')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{personalInfo.BUSINESS_GROUP_NAME}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','payrol')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{personalInfo.PAYROLL_NAME}}< / h3 >
< br >
< / ion-card-content >
< / ion-card >
< ion-card * ngIf = "basicDetailsSegment" [ ngClass ] = " direction = == ' ltr ' ? ' card-size-info-en ' : ' card-size-info-ar ' " >
< ion-card-content * ngIf = "!editBasic && employeeBasicDetails" >
< ion-grid >
< ion-row style = "width: 113%;" >
< ion-col size = "10" >
< ion-label >
< h1 [ ngClass ] = " direction = == ' ltr ' ? ' header-label-text-form ' : ' header-label-text-form-ar ' " > {{ts.trPK('general','basic-details')}}< / h1 >
< / ion-label >
< / ion-col >
< ion-col size = "2" * ngIf = "basicDetailsSubMenu && basicDetailsSubMenu.UPDATE_BUTTON === 'Y'" >
< img style = "width: 18px;height: 18px;" src = "../assets/imgs/profile-icons/editing@2x.png"
(click)="allowEdit('basic')">
< / ion-col >
< ion-col size = "2" * ngIf = "basicDetailsSubMenu && basicDetailsSubMenu.ADD_BUTTON === 'Y'" >
< ion-icon class = "add-icon-styling" name = "add" > < / ion-icon >
< / ion-col >
< / ion-row >
< / ion-grid >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('general','full-name')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{fullName}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('general','marital-status')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{maritalStatus}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('general','birth_date')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{birthDate}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('general','civil-identity-number')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{civilIdentityNumber}}< / h3 >
< br >
< / ion-card-content >
< / ion-card >
< ion-card * ngIf = "addressSegment" [ ngClass ] = " direction = == ' ltr ' ? ' card-size-info-en ' : ' card-size-info-ar ' " >
< ion-card-content * ngIf = "!editAddress && employeeAdress" >
< ion-grid >
< ion-row style = "width: 113%;" >
< ion-col size = "10" >
< ion-label >
< h1 [ ngClass ] = " direction = == ' ltr ' ? ' header-label-text-form ' : ' header-label-text-form-ar ' " > {{ts.trPK('userProfile','phone-no')}}< / h1 >
< / ion-label >
< / ion-col >
< ion-col size = "2" * ngIf = "addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" ( click ) = " allowEdit ( ' address ' ) " >
< img style = "width: 18px; height: 18px;" src = "../assets/imgs/profile-icons/editing@2x.png" >
< / ion-col >
< ion-col size = "2" * ngIf = "addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" ( click ) = " allowEdit ( ' address ' ) " >
< ion-icon class = "add-icon-styling" name = "add" > < / ion-icon >
< / ion-col >
< / ion-row >
< / ion-grid >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('general','mobile')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > 0567845661< / h3 >
< br >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','work')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > 4922< / h3 >
< br >
< / ion-card-content >
< / ion-card >
< ion-card * ngIf = "addressSegment" [ ngClass ] = " direction = == ' ltr ' ? ' card-size-info-en ' : ' card-size-info-ar ' " >
< ion-card-content * ngIf = "!editAddress && employeeAdress" >
< ion-grid >
< ion-row style = "width: 113%;" >
< ion-col size = "10" >
< ion-label >
< h1 [ ngClass ] = " direction = == ' ltr ' ? ' header-label-text-form ' : ' header-label-text-form-ar ' " > {{ts.trPK('general','main-address')}}< / h1 >
< / ion-label >
< / ion-col >
< ion-col size = "2" * ngIf = "addressSubMenu && addressSubMenu.UPDATE_BUTTON === 'Y'" ( click ) = " allowEdit ( ' address ' ) " >
< img style = "width: 18px; height: 18px;" src = "../assets/imgs/profile-icons/editing@2x.png" >
< / ion-col >
< ion-col size = "2" * ngIf = "addressSubMenu && addressSubMenu.ADD_BUTTON === 'Y'" ( click ) = " allowEdit ( ' address ' ) " >
< ion-icon class = "add-icon-styling" name = "add" > < / ion-icon >
< / ion-col >
< / ion-row >
< / ion-grid >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','address')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{address}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','street')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{street}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','area')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{area}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','p-o-box')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{poBox}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','city')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{city}}< / h3 >
< br >
< ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' type-label-text-form ' : ' type-label-text-form-ar ' " > {{ts.trPK('userProfile','postal-code')}}< / h3 >
< / ion-label >
< h3 [ ngClass ] = " direction = == ' ltr ' ? ' result-label-text-form ' : ' result-label-text-form-ar ' " > {{postalCode}}< / h3 >
< br >
< / ion-card-content >
< / ion-card >
<!-- <ion - card *ngIf="familyMemberSegment" [ngClass]="direction === 'ltr'? 'card - size - info - en': 'card - size - info - ar' ">
< ion-card-content >
< ion-grid >
< ion-row >
< ion-col size = '5' >
< h2 style = "font-weight: bold; padding-top: 15px;" > ENAD, Hilal< / h2 >
< / ion-col >
< ion-col size = '3' offset = '2' >
< div class = 'family-member-button' >
< ion-icon style = "width: 20px;" name = "create" > < / ion-icon >
< p > update< / p >
< / div >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col size = '5' >
< ion-label > < p style = "font-weight: bold;" > Father< / p > < / ion-label >
< / ion-col >
< ion-col size = '3' offset = '2' >
< div class = 'family-member-button' >
< ion-icon name = "trash" style = "width: 20px; height: 20px; color: #CA3332;" > < / ion-icon >
< p style = "color: #CA3332;" > Remove< / p >
< / div >
< / ion-col >
< / ion-row >
< / ion-grid >
< / ion-card-content >
< / ion-card > -->
< div * ngIf = "familyMemberSegment" >
< br >
< div * ngFor = 'let data of familyMemberData' style = "background: white; border-radius: 20px; margin-left: 15px; margin-right: 15px; margin-bottom: 15px;" >
< ion-grid >
< ion-row >
< ion-col size = '4' >
< h2 style = "font-weight: bold; font-size: 17px;" > {{data.name}}< / h2 >
< / ion-col >
< ion-col size = '5' offset = '3' >
< div class = 'family-member-button' style = "height: 32px !important;" >
< ion-icon style = "width: 20px;" name = "create" > < / ion-icon >
< p > update< / p >
< / div >
< / ion-col >
< / ion-row >
< ion-row >
< ion-col size = '4' >
< ion-label > < p style = "font-weight: bold; font-size: 17px;" > {{data.relation}}< / p > < / ion-label >
< / ion-col >
< ion-col size = '5' offset = '3' >
< div class = 'family-member-button' style = "height: 32px !important;" >
< ion-icon name = "trash" style = "width: 20px; height: 20px; color: #CA3332;" > < / ion-icon >
< p style = "color: #CA3332;" > Remove< / p >
< / div >
< / ion-col >
< / ion-row >
< / ion-grid >
< / div >
< / div >
<!-- <ion - footer *ngIf="editBasic||editAddress">
< ion-grid >
< ion-row >
< ion-col >
< ion-button style = "--background: #CB3332; background: white; width: 100%;" ( click ) = " disableEdit ( 1 ) " > Cancel
< / ion-button >
< / ion-col >
< ion-col >
< ion-button style = "--background: #20A169; background: white; width: 100%;" ( click ) = " presentModal ( ) " > Update< / ion-button >
< / ion-col >
< / ion-row >
< / ion-grid >
< / ion-footer > -->
<!-- <ion - card - content>
< ion-grid >
< ion-row >
< ion-col >
< ion-button ( click ) = " presentModal ( ) " class = "add" > Update
< / ion-button >
< / ion-col >
< ion-col >
< ion-button class = "update" ( click ) = " openAddAddress ( ) " > Add< / ion-button >
< / ion-col >
< / ion-row >
< / ion-grid >
< / ion-card-content > -->
< / ion-content >