You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
300 lines
13 KiB
HTML
300 lines
13 KiB
HTML
<ion-header>
|
|
<ion-toolbar class="header-toolbar-new">
|
|
<ion-buttons slot="start">
|
|
<nav-buttons (backClick)="goback()" [navigate]="false"></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]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
|
|
</div>
|
|
</div>
|
|
<h1>{{employee.EMPLOYEE_NAME}}</h1>
|
|
<span>{{employee.JOB_NAME}}</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" (click)="getMenuEntries(employee)">
|
|
<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" style="opacity:0.3;">
|
|
<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 *ngIf="activeSegment === 'Attendance'">
|
|
<div class="">
|
|
<div class="header">
|
|
<div class="slider">
|
|
<ion-row>
|
|
<ion-col>
|
|
<button ion-button icon-start class="slidPrev" (click)="previousSlide()">
|
|
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
</ion-icon>
|
|
</button>
|
|
</ion-col>
|
|
<ion-col>
|
|
<p style="position: absolute; left: 27%; bottom: 0%; font-family: WorkSans-Bold;">{{month}}</p>
|
|
</ion-col>
|
|
<ion-col>
|
|
<p style="position: absolute; left: 25%; bottom: 0%; font-family: WorkSans-Bold;">{{year}}</p>
|
|
</ion-col>
|
|
<ion-col>
|
|
<button ion-button icon-end class="slidNext" (click)="nextSlide()">
|
|
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle"></ion-icon>
|
|
</button>
|
|
</ion-col>
|
|
</ion-row>
|
|
</div>
|
|
|
|
<ion-slides >
|
|
<ion-slide >
|
|
<ion-grid class="headerGrid">
|
|
<div style="color: black;">
|
|
<div class="result-graph" style='margin-top:0;'>
|
|
<div class="request-heading">
|
|
<span> {{ts.trPK('attendance-tracking','attendance-statistics')}}</span>
|
|
</div>
|
|
<div class="result-text-container">
|
|
<h2>{{totalAttendancePrecentage}}</h2>
|
|
<p>{{ts.trPK('absenceList','days')}}</p>
|
|
</div>
|
|
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
|
</div>
|
|
<div style="position: absolute;
|
|
left: 70%;
|
|
top: 35%;
|
|
color: black;
|
|
background-color: #22c6b3;
|
|
width: 20%; height: 6px;z-index:99">
|
|
<ion-col>
|
|
<ion-row>
|
|
<label class="green-label">{{ts.trPK('attendance','present')}}</label>
|
|
</ion-row>
|
|
<ion-row>
|
|
<label class="green-amount">{{attendedDays}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</div>
|
|
<div style="position: absolute;
|
|
left: 70%;
|
|
top: 65%;
|
|
color: black;
|
|
background-color: #094875;
|
|
width: 20%; height: 6px;z-index:99">
|
|
<ion-col>
|
|
<ion-row>
|
|
<label class="blue-label">{{ts.trPK('attendance','absent')}}</label>
|
|
</ion-row>
|
|
<ion-row>
|
|
<label class="blue-amount" for="">{{absentDays}}</label>
|
|
</ion-row>
|
|
</ion-col>
|
|
</div>
|
|
</div>
|
|
</ion-grid>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col [size]='3'>
|
|
<div class="labelGrid">
|
|
<label>{{ts.trPK('attendance-tracking','schedule')}}</label>
|
|
<h2 *ngIf ="timeCardSummaryData">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
|
|
<h2 *ngIf ="!timeCardSummaryData">0</h2>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col [size]='3'>
|
|
<div class="labelGrid">
|
|
<label>{{ts.trPK('attendance-tracking','off-days')}}</label>
|
|
<h2 *ngIf ="timeCardSummaryData">{{timeCardSummaryData.OFF_DAYS}}</h2>
|
|
<h2 *ngIf ="!timeCardSummaryData">0</h2>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col [size]='3'>
|
|
<div class="labelGrid">
|
|
<label>{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
|
|
<h2 *ngIf ="timeCardSummaryData" >{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
|
|
<h2 *ngIf ="!timeCardSummaryData">0</h2>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col [size]='3'>
|
|
<div class="labelGrid">
|
|
<label>{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
|
|
<h2 *ngIf ="timeCardSummaryData" >{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
|
|
<h2 *ngIf ="!timeCardSummaryData">0</h2>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|
|
|
|
<div>
|
|
<ion-grid class="bodyGrid" *ngIf="showData">
|
|
<p style="font-weight: bold; font-size: 17px;"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</p>
|
|
<app-circle-calendar [eventsdateAttend]='arrDaysAttendance' [eventsdateAbsent]='arrDaysAbsent' [eventsdateDayOff]='arrDaysOff' (monthTitle)='changeMonthTitle($event)' (currentYear)=changeYear($event)></app-circle-calendar>
|
|
</ion-grid>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="activeSegment === 'Team Members'">
|
|
<ion-row class="filters-row">
|
|
<ion-slides [options]="slideOptsOne">
|
|
<ion-slide *ngFor="let filter of filters; let i=index">
|
|
<app-card-filter
|
|
[value]="filter.value"
|
|
[text]="filter.name"
|
|
[color]="filter.color"
|
|
[active]="filter.active"
|
|
(click)="activeFilter(i)"
|
|
></app-card-filter>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
</ion-row>
|
|
|
|
<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>
|
|
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
|
|
[(ngModel)]="searchKeySelect" (ionChange)="showSelectedField($event)">
|
|
<ion-select-option value="Name" selected="true">{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
|
|
<ion-select-option value="User Name">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
|
|
<ion-select-option value="Email">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
|
|
</ion-select>
|
|
</ion-col>
|
|
<ion-col [size]="7" class="input-container" no-padding>
|
|
<ion-input *ngIf="showEmailInput" placeholder="Employee Email" [(ngModel)]="searchEmail" pattern="email"></ion-input>
|
|
<ion-input *ngIf="showUserNameOrNameInput" placeholder="Search" [(ngModel)]="searchNameOrUserName"></ion-input>
|
|
</ion-col>
|
|
<ion-col [size]="2" style="background: #ccc;text-align: center;" no-padding (click)="searchEmployeeTwo()">
|
|
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></ion-icon>
|
|
</ion-col>
|
|
</ion-row>
|
|
</div>
|
|
|
|
<div *ngIf="isSearch">
|
|
<ion-row class="search-container">
|
|
<ion-col style="float: left;" size=[6] (click)="clearSearchTwo()">
|
|
<span style="margin-left: 5px;">Clear Search</span>
|
|
<ion-icon name="close" ></ion-icon>
|
|
</ion-col>
|
|
</ion-row>
|
|
</div>
|
|
|
|
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
|
|
<app-employee-information
|
|
[name]="subordinate.EMPLOYEE_NAME"
|
|
[title]="subordinate.POSITION_NAME"
|
|
[employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
|
|
checkIn="08:15"
|
|
checkOut="-"
|
|
(click)="getDetails(i)">
|
|
</app-employee-information>
|
|
</ng-container>
|
|
|
|
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
|
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
|
</ion-infinite-scroll>
|
|
</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" style="border-bottom: none;">
|
|
<h2>Grade</h2>
|
|
<p>{{employee.GRADE_NAME}}</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ion-content> |