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.
sfh-mohemm/Mohem/src/app/my-team/details/details.component.html

327 lines
14 KiB
HTML

<app-generic-header
showBack="true"
backLink="/my-team/home"
[headerText]="'userProfile, emp-detail' | translate">
</app-generic-header>
<ion-content>
<div class="contentBg">
<div class="result-graph" >
<div class="user-info">
<div class="user-image-container">
<div (click)="setFavorite(employee)">
<img *ngIf="!isFavorite" [ngClass]="direction == 'en' ? 'favIcon':'favIcon-ar' " src="../assets/imgs/fav.svg">
<img *ngIf="isFavorite" [ngClass]="direction == 'en' ? 'favIcon':'favIcon-ar' " src="../assets/imgs/favFilled.svg">
</div>
<div class="user-image">
<img class="img" [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
<div [ngClass]="direction == 'en' ? 'call':'call-ar' " slot="end" >
<a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable-phone action-button-icon' : 'action-button-icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
<img src="../assets/imgs/call-o.svg">
</a>
</div>
</div>
<div style="margin-top: 25px;">
<h1 class="name">{{employee.EMPLOYEE_NAME}}</h1>
<span class="email">{{employee.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: 12px !important;">{{ts.trPK('userProfile','empNo')}}</p>
<span class="Boldtext">{{employee.EMPLOYEE_NUMBER}}</span>
</ion-col>
</ion-row>
</div>
</div>
<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'">
<img class="imgSize" src="../assets/imgs/profile.svg">
</ion-segment-button>
</ion-col>
<ion-col>
<span class="btnTitle">{{ts.trPK('myTeam','profile-details')}}</span>
</ion-col>
</ion-col>
<ion-col style="pointer-events: none; opacity: .4;" [size]="3" (click)="getMenuEntries(employee)">
<ion-col>
<ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
<img class="imgSize" src="../assets/imgs/create-req.svg">
</ion-segment-button>
</ion-col>
<ion-col > <span class="btnTitle">{{ts.trPK('vacation-rule','create-request')}}</span></ion-col>
</ion-col>
<ion-col [size]="3">
<ion-col>
<ion-segment-button
value="TeamMembers"
[ngClass]="activeSegment == 'TeamMembers' ? 'active-Segment' : 'normal-Segment'">
<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>
</div>
</div>
<div *ngIf="activeSegment === 'Attendance'">
<div class="attendence">
<p class="attendence-text">
{{ts.trPK('myTeam','todayAttendance')}}
</p>
<ion-row style="margin: 0 -5px;">
<ion-col [size]="4">
<div class="attendance-information">
<span style="color: green; ">{{ts.trPK('myTeam','check-in')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span style="color: red; ">{{ts.trPK('myTeam','check-out')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','late')}}</span>
<h2>{{attendanceTrackingList.P_LATE_IN_HOURS | slice:0:-3}} </h2>
</div>
</ion-col>
</ion-row>
</div>
<div *ngIf="showAttendence" class="result-graph-attendence">
<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" style="text-align: end;">
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
<label [ngClass]="direction == 'en' ? 'stats':'stats-ar' " >{{ts.trPK('attendance-tracking','view-days')}}</label>
<img src="../assets/imgs/view-days.svg">
</button>
</ion-col>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
</div>
</div>
<div>
<ion-row class="attendance-summary">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData?.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="2">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData?.OFF_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData?.NOT_ANALYZED_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData?.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
</div>
<div style=" position: relative;
display: flex;
justify-content: space-between;">
<div>
<div class="label-container">
<ion-row>
<label class="green-label-container"> </label>
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</ion-row>
</div>
<div class="label-container">
<ion-row>
<label class="blue-label-container"> </label>
<span class="spa-one">{{ts.trPK('attendance','absent')}}</span>
<span class="spa-two">{{absentDays}}</span>
</ion-row>
</div>
</div>
<div [ngClass]="direction == 'en' ? 'graph-container':'graph-container-ar' " >
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
<p-chart [ngClass]="direction == 'en' ? 'today-graph':'today-graph-ar' " type="doughnut" [data]="data" [options]="options" ></p-chart>
</div>
</div>
</div>
<!-- //////////////////////////////////CALENDAR/////////////////////////////////////////////////////// -->
<div *ngIf="!showAttendence">
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
<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" style="text-align: end;">
<button (click)="showCalender()" [ngClass]="direction == 'en' ? 'statsIcon':'statsIcon-ar' " >
<label [ngClass]="direction == 'en' ? 'stats':'stats-ar' " >{{ts.trPK('attendance-tracking','view-stats')}}</label>
<img src="../assets/imgs/view-stats.svg">
</button>
</ion-col>
</div>
<div class="header">
<div>
<div>
<ion-row >
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
<app-card-calendar
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-calendar>
</ion-slide>
</ion-slides>
</ion-row>
</div>
</div>
</div>
<app-circle-calendar
[currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
(monthTitle)='changeMonthTitle($event)'
(currentYear)=changeYear($event)>
</app-circle-calendar>
</div>
</div>
</div>
<div *ngIf="activeSegment === 'TeamMembers'">
<div class="MyTeamdiv">
<div class="MyTeamtext" >{{ts.trPK('myTeam','my-team-members')}}</div>
<div [ngClass]="direction == 'en' ? 'numberEmp':'numberEmp-ar' " >{{EmployeeTotal}}</div>
</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'"
[employeePhoneNumber]="subordinate.EMPLOYEE_MOBILE_NUMBER"
(onGetDetails)="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 style=" padding-left: 13px;">
<ion-col>
<p [ngClass]="direction == 'en' ? 'profile':'profile-ar' " >{{ts.trPK('userProfile','profile-details')}}</p>
</ion-col>
<ion-col [size]="12">
<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 [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 [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 [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 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','job')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{jobName}}</p>
</ion-col>
<ion-col [size]="12">
<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 [ngClass]="direction == 'en' ? 'label1':'label1-ar' ">{{ts.trPK('userProfile','position')}}</h2>
<p [ngClass]="direction == 'en' ? 'label2':'label2-ar' ">{{jobName}}</p>
</ion-col>
<ion-col [size]="12" style="border-bottom: none;">
<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>
</div>
</ion-content>