|
|
|
|
@ -24,59 +24,80 @@
|
|
|
|
|
<img src="../assets/imgs/profile.svg">
|
|
|
|
|
</a> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 18px;">
|
|
|
|
|
<h1>{{employee.EMPLOYEE_NAME}}</h1>
|
|
|
|
|
<span>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
|
|
|
|
|
<div style="margin-top: 25px;">
|
|
|
|
|
<h1 class="name">{{employee.EMPLOYEE_NAME}}</h1>
|
|
|
|
|
<span class="email">{{employee.EMPLOYEE_EMAIL_ADDRESS}}</span>
|
|
|
|
|
<!-- <span>{{employee.JOB_NAME}}</span> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div >
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-row style="margin-top: 11px;">
|
|
|
|
|
<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>
|
|
|
|
|
<p class="subTitle">{{ts.trPK('userProfile','role')}}</p>
|
|
|
|
|
<span class="Boldtext">{{employee.JOB_NAME}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<p style="font-size: 12px; color: rgb(128, 124, 124);">{{ts.trPK('userProfile','empNo')}}</p>
|
|
|
|
|
<p class="subTitle">{{ts.trPK('userProfile','empNo')}}</p>
|
|
|
|
|
<span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div >
|
|
|
|
|
<ion-row>
|
|
|
|
|
<div class="btnDiv">
|
|
|
|
|
|
|
|
|
|
<ion-segment
|
|
|
|
|
(ionChange)="segmentChanged($event)"
|
|
|
|
|
[value]="activeSegment">
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="About"
|
|
|
|
|
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<!-- <ion-label> Team Members</ion-label> -->
|
|
|
|
|
<img class="imgSize" src="../assets/imgs/profile.svg">
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<span class="btnTitle">{{ts.trPK('myTeam','profile-details')}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="create-request"
|
|
|
|
|
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<img (click)="getMenuEntries(employee)" class="imgSize" src="../assets/imgs/create-req.svg">
|
|
|
|
|
<!-- <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label> -->
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col (click)="getMenuEntries(employee)"> <span class="btnTitle">{{ts.trPK('vacation-rule','create-request')}}</span></ion-col>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="Attendance"
|
|
|
|
|
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
|
|
|
|
|
<!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
|
|
|
|
|
<img class="imgSize" src="../assets/imgs/view-attendance.svg">
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col> <span class="btnTitle">{{ts.trPK('myTeam','view-attendence')}} </span></ion-col>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="TeamMembers"
|
|
|
|
|
[ngClass]="activeSegment == 'TeamMembers' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
|
|
|
|
|
<img class="imgSize" src="../assets/imgs/team-members.svg">
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col><span class="btnTitle">{{ts.trPK('myTeam','team-members')}}</span></ion-col>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-segment>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-actions">
|
|
|
|
|
<!-- <div class="user-actions">
|
|
|
|
|
<ion-row class="ion-justify-content-center">
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
@ -98,8 +119,8 @@
|
|
|
|
|
<span>{{ts.trPK('myTeam','team-members')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <div class="user-actions">
|
|
|
|
|
<ion-row class="ion-justify-content-center">
|
|
|
|
|
@ -200,20 +221,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div *ngIf="showAttendence" class="result-graph-attendence">
|
|
|
|
|
<div >
|
|
|
|
|
<ion-row style="margin-top: 8px; margin-left: 12px;">
|
|
|
|
|
<div style="margin-top: 8px;position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;">
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="4" style="text-align: end;">
|
|
|
|
|
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
|
|
|
|
|
<label class="stats" >{{ts.trPK('attendance-tracking','view-days')}}</label>
|
|
|
|
|
<label [ngClass]="direction == 'en' ? 'stats':'stats-ar' " >{{ts.trPK('attendance-tracking','view-days')}}</label>
|
|
|
|
|
<img src="../assets/imgs/view-days.svg">
|
|
|
|
|
</button>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
@ -326,20 +346,19 @@
|
|
|
|
|
|
|
|
|
|
<div *ngIf="!showAttendence">
|
|
|
|
|
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
|
|
|
|
|
<div>
|
|
|
|
|
<ion-row style="margin-top: 8px; margin-left: 12px;">
|
|
|
|
|
<div style="margin-top: 8px;position: relative;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;">
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="4" style="text-align: end;">
|
|
|
|
|
<button (click)="showCalender()" [ngClass]="direction == 'en' ? 'statsIcon':'statsIcon-ar' " >
|
|
|
|
|
<label class="stats" >{{ts.trPK('attendance-tracking','view-stats')}}</label>
|
|
|
|
|
<label [ngClass]="direction == 'en' ? 'stats':'stats-ar' " >{{ts.trPK('attendance-tracking','view-stats')}}</label>
|
|
|
|
|
<img src="../assets/imgs/view-stats.svg">
|
|
|
|
|
</button>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
@ -398,14 +417,18 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div *ngIf="activeSegment === 'TeamMembers'">
|
|
|
|
|
<div style="margin-top: -23px;">
|
|
|
|
|
<div class="MyTeamdiv">
|
|
|
|
|
<div class="MyTeamtext" >{{ts.trPK('myTeam','my-team-members')}}</div>
|
|
|
|
|
<div class="numberEmp">{{EmployeeTotal}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div style="margin-top: -23px;">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
|
|
|
|
|
<ion-col> <div [ngClass]="direction == 'en' ? 'number':'number-ar' ">
|
|
|
|
|
<p class="numberEmp">{{EmployeeTotal}}</p></div></ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
|
|
|
|
|
<ion-row no-padding>
|
|
|
|
|
<ion-col [size]="3" class="search-dropdown" no-padding>
|
|
|
|
|
@ -458,43 +481,43 @@
|
|
|
|
|
<p>{{employee.EMPLOYEE_NUMBER}}</p>
|
|
|
|
|
</ion-col> -->
|
|
|
|
|
<ion-col>
|
|
|
|
|
<p style="font-size: 16px; font-family: WorkSans-Bold; margin-top: 15px;">{{ts.trPK('userProfile','profile-details')}}</p>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'profile':'profile-ar' " >{{ts.trPK('userProfile','profile-details')}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','category')}}</h2>
|
|
|
|
|
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' " >{{ts.trPK('userProfile','category')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' " >{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','address')}}</h2>
|
|
|
|
|
<p>{{employee.LOCATION_NAME}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','address')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' " style="line-height: 19px !important;">{{employee.LOCATION_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','phone-no')}}</h2>
|
|
|
|
|
<p>{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','phone-no')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','busG')}}</h2>
|
|
|
|
|
<p>{{employee.ORGANIZATION_NAME}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','busG')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.ORGANIZATION_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','job')}}</h2>
|
|
|
|
|
<p>{{employee.JOB_NAME}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','job')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.JOB_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','payrol')}}</h2>
|
|
|
|
|
<p>{{employee.PAYROLL_NAME}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','payrol')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.PAYROLL_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<!-- <ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','orgEmail')}}</h2>
|
|
|
|
|
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
|
|
|
|
|
</ion-col> -->
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','position')}}</h2>
|
|
|
|
|
<p>{{employee.POSITION_NAME}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','position')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.POSITION_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12" style="border-bottom: none;">
|
|
|
|
|
<h2>{{ts.trPK('userProfile','grade')}}</h2>
|
|
|
|
|
<p>{{employee.GRADE_NAME}}</p>
|
|
|
|
|
<h2 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','grade')}}</h2>
|
|
|
|
|
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{employee.GRADE_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|