|
|
|
|
<ion-header>
|
|
|
|
|
<ion-toolbar class="header-toolbar-new">
|
|
|
|
|
<ion-buttons slot="start">
|
|
|
|
|
<nav-buttons backLink="/home"></nav-buttons>
|
|
|
|
|
</ion-buttons>
|
|
|
|
|
<ion-title>EMPLOYEE DETAIL</ion-title>
|
|
|
|
|
</ion-toolbar>
|
|
|
|
|
</ion-header>
|
|
|
|
|
|
|
|
|
|
<ion-content>
|
|
|
|
|
<div class="contentBg">
|
|
|
|
|
<div class="result-graph">
|
|
|
|
|
<div class="user-info">
|
|
|
|
|
<div class="user-image-container present">
|
|
|
|
|
<div class="user-image">
|
|
|
|
|
<img [src]="userImage" alt="Team Member Image"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h1>Rohit Shety</h1>
|
|
|
|
|
<span>Graphic Designer</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-actions">
|
|
|
|
|
<ion-row class="ion-justify-content-center">
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span class="action-button-icon">
|
|
|
|
|
<img src="../assets/imgs/call_icon.png">
|
|
|
|
|
</span>
|
|
|
|
|
<span>Call</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span class="action-button-icon">
|
|
|
|
|
<img src="../assets/imgs/create_request_icon.png">
|
|
|
|
|
</span>
|
|
|
|
|
<span>Create Request</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span class="action-button-icon">
|
|
|
|
|
<img src="../assets/imgs/message_icon.png">
|
|
|
|
|
</span>
|
|
|
|
|
<span>Message</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="segments-container">
|
|
|
|
|
<ion-segment
|
|
|
|
|
(ionChange)="segmentChanged($event)"
|
|
|
|
|
[value]="activeSegment">
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="Attendance"
|
|
|
|
|
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
|
|
|
|
|
<ion-label>Attendance</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="Team Members"
|
|
|
|
|
[ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<ion-label>Team Members</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="About"
|
|
|
|
|
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<ion-label>About</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-segment>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="employee-information-indetail" *ngIf="activeSegment === 'About'">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6" style="border-right: 1px solid #ccc;">
|
|
|
|
|
<h2>Employee ID</h2>
|
|
|
|
|
<p>{{employee.EMPLOYEE_NUMBER}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<h2>Category</h2>
|
|
|
|
|
<p>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Address</h2>
|
|
|
|
|
<p>{{employee.LOCATION_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Phone Number</h2>
|
|
|
|
|
<p>{{employee.EMPLOYEE_MOBILE_NUMBER}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Business Group</h2>
|
|
|
|
|
<p>{{employee.ORGANIZATION_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Job</h2>
|
|
|
|
|
<p>{{employee.JOB_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Payroll</h2>
|
|
|
|
|
<p>{{employee.PAYROLL_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Organization Email Address</h2>
|
|
|
|
|
<p>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Position</h2>
|
|
|
|
|
<p>{{employee.POSITION_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="12">
|
|
|
|
|
<h2>Grade</h2>
|
|
|
|
|
<p>{{employee.GRADE_NAME}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <ion-infinite-scroll *ngIf="selectedFilter === 'ALL'" (ionInfinite)="doInfinite($event)">
|
|
|
|
|
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
|
|
|
|
</ion-infinite-scroll> -->
|
|
|
|
|
|
|
|
|
|
</ion-content>
|