@ -9,17 +9,101 @@
< ion-content >
< div class = "contentBg" >
< div class = "result-graph" style = "padding-top: 12px;" >
< div class = "result-graph" >
< div class = "user-info" >
< div class = "user-image-container" >
< div >
< img style = "height: 18px; margin-left: 23px;" src = "../assets/imgs/fav.svg" >
<!-- <ion - col><img src="../assets/imgs/fav filled.svg"></ion - col> -->
< / div >
< 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 style = "margin-right: 16px;" slot = "end" >
< a [ ngClass ] = " employee . EMPLOYEE_MOBILE_NUMBER = = ' ' ? ' disable-phone action-button-icon ' : ' action-button-icon ' " href = "tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}" > < / a >
< img src = "../assets/imgs/call-o.svg" > < / div >
<!-- <a [ngClass]="employee.EMPLOYEE_MOBILE_NUMBER == '' ? 'disable - phone action - button - icon' : 'action - button - icon'" href="tel:{{employee.EMPLOYEE_MOBILE_NUMBER}}">
< img src = "../assets/imgs/profile.svg" >
< / a > -->
< / div >
< div style = "margin-top: 18px;" >
< h1 > {{employee.EMPLOYEE_NAME}}< / h1 >
< span > {{employee.JOB_NAME}}< / span >
< span > {{employee.EMPLOYEE_EMAIL_ADDRESS}}< / span >
<!-- <span>{{employee.JOB_NAME}}</span> -->
< / div >
< div >
< ion-row >
< 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 >
< 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 >
< span class = "Boldtext" > {{employee.EMPLOYEE_NUMBER}}< / span >
< / ion-col >
< / ion-row >
< / div >
< / div >
< div class = "user-actions" >
< div >
< ion-row >
< ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
< 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
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-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-segment-button
value="Team Members"
[ngClass]="activeSegment == 'Team Members' ? '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-segment >
< / ion-row >
< / div >
< div class = "user-actions" >
< ion-row class = "ion-justify-content-center" >
< ion-col [ size ] = " 3 " >
< div class = "action-button col-button" >
< span > {{ts.trPK('myTeam','profile-details')}}< / span >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " ( click ) = " getMenuEntries ( employee ) " >
< div class = "action-button col-button" >
< span > {{ts.trPK('vacation-rule','create-request')}}< / span >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " >
< div class = "action-button col-button" >
< span > {{ts.trPK('myTeam','view-attendence')}} < / span >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " >
< div class = "action-button col-button" >
< span > {{ts.trPK('myTeam','team-members')}}< / span >
< / div >
< / ion-col >
< / ion-row >
< / div >
<!-- <div class="user - actions">
< ion-row class = "ion-justify-content-center" >
< ion-col [ size ] = " 4 " >
< div class = "action-button col-button" >
@ -46,10 +130,10 @@
< / div >
< / ion-col >
< / ion-row >
< / div >
< / div > -->
< / div >
< div class = "segments-container" >
<!-- <div class="user - actions" >
< ion-segment
(ionChange)="segmentChanged($event)"
[value]="activeSegment">
@ -57,36 +141,49 @@
value="Attendance"
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
< ion-label > {{ts.trPK('attendance','attendance')}}< / ion-label >
< img src = "../assets/imgs/days.svg" >
< / ion-segment-button >
< ion-segment-button
value="Team Members"
[ngClass]="[activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment', empSubordinate.length === 0 ? 'disable-phone': '']">
< ion-label > {{ts.trPK('myTeam','team-members')}}< / ion-label >
< img src = "../assets/imgs/days.svg" >
< / ion-segment-button >
< ion-segment-button
value="About"
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
< ion-label > {{ts.trPK('general','about')}}< / ion-label >
< ion-label > Team Members< / ion-label >
< img src = "../assets/imgs/profile.svg" >
< / ion-segment-button >
< ion-segment-button
value="create-request"
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
< img src = "../assets/imgs/create_request_icon.png" >
< ion-label > {{ts.trPK('vacation-rule','create-request')}}< / ion-label >
< / ion-segment-button >
< / ion-segment >
< / div >
< / div > -->
<!-- <div *ngIf="activeSegment === 'create - request'">
< / div > -->
< div * ngIf = "activeSegment === 'Attendance'" >
< div >
< p style = "margin-bottom: 1px;" >
< 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 > {{ts.trPK('myTeam','check-in')}}< / span >
< 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 > {{ts.trPK('myTeam','check-out')}}< / span >
< 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 >
@ -98,16 +195,54 @@
< / div >
< / ion-col >
< / ion-row >
<!-- <ion - row *ngIf="attendanceTrackingList.stats == '' || attendanceTrackingList.stats == '' "> Hello </ion - row>
< / div > -->
< / div >
< div * ngIf = "showAttendence" class = "result-graph-attendence" >
< div >
< ion-row style = "margin-top: 8px; margin-left: 12px;" >
< ion-col [ size ] = " 8 " >
< span class = "attendence-text" > {{ts.trPK('attendance','monthly-attendance-calendar')}}< / span >
< / ion-col >
< ion-col [ size ] = " 4 " >
< ion-row >
< button ( click ) = " showCalender ( ) " style = "background: white; margin-left: 15px;" >
< label class = "stats" > {{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" >
< 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 >
<!--
< ion-row * ngIf = "direction == 'en'" >
< ion-col [ size ] = " 2 " style = "text-align: left;" >
< ion-icon class = "activeArrow" ios = "ios-arrow-dropleft-circle" md = "md-arrow-dropleft-circle" ( click ) = " previousSlide ( ) " > < / ion-icon >
< / ion-col >
< ion-col [ size ] = " 8 " style = "text-align: center;" >
< span class = "month-year-span" > {{month}} {{year}}< / span >
< span class = "month-year-span" > {{month}} < / span >
< / ion-col >
< ion-col [ size ] = " 2 " style = "text-align: right;" >
< ion-icon * ngIf = "currentMonthName !== month" [ ngClass ] = " currentMonthName = == month ? ' disabledArrow ' : ' activeArrow ' " ios = "ios-arrow-dropright-circle" md = "md-arrow-dropright-circle" ( click ) = " nextSlide ( ) " > < / ion-icon >
@ -119,72 +254,137 @@
< ion-icon class = "activeArrow" ios = "ios-arrow-dropright-circle" md = "md-arrow-dropright-circle" ( click ) = " previousSlide ( ) " > < / ion-icon >
< / ion-col >
< ion-col [ size ] = " 8 " style = "text-align: center;" >
< span class = "month-year-span" > {{year}} {{month}}< / span >
< span class = "month-year-span" > {{month}}< / span >
< / ion-col >
< ion-col [ size ] = " 2 " style = "text-align: left;" >
< ion-icon * ngIf = "currentMonthName !== month" [ ngClass ] = " currentMonthName = == month ? ' disabledArrow ' : ' activeArrow ' " ios = "ios-arrow-dropleft-circle" md = "md-arrow-dropleft-circle" ( click ) = " nextSlide ( ) " > < / ion-icon >
< / ion-col >
< / ion-row >
< / ion-row > -->
< / div >
< / div >
< div class = "result-graph" >
< div >
< span [ ngClass ] = " direction = = ' en ' ? ' request-heading ' : ' request-heading-ar ' " > {{ts.trPK('myTeam','attendance-statistics')}}< / span >
< / div >
< div style = "position: relative;" >
< div class = "label-container" >
< div class = "green-label-container" >
< span class = "span-one" > {{ts.trPK('attendance','present')}}< / span >
< span class = "span-two" > {{attendedDays}}< / span >
< 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 >
< div class = "blue-label-container" >
< span class = "span-one" > {{ts.trPK('attendance','absent')}}< / span >
< span class = "span-two" > {{absentDays}}< / span >
< / 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;" >
< 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 class = "graph-container" >
< div class = "result-text-container" >
< h2 > {{totalAttendancePrecentage}}< / h2 >
< span > {{ts.trPK('absenceList','days')}}< / span >
< / div >
< p-chart class = "today-graph" type = "doughnut" [ data ] = " data " [ options ] = " options " > < / p-chart >
< p-chart class = "today-graph" 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 >
< ion-row style = "margin-top: 8px; margin-left: 12px;" >
< ion-col [ size ] = " 8 " >
< span class = "attendence-text" > {{ts.trPK('attendance','monthly-attendance-calendar')}}< / span >
< / ion-col >
< ion-col [ size ] = " 4 " >
< ion-row >
< button ( click ) = " showCalender ( ) " style = "background: white; margin-left: 15px; margin-top: 6px;" >
< label class = "stats" > {{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" >
< 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 >
< ion-row class = "attendance-summary" >
< ion-col [ size ] = " 3 " >
< div class = "attendance-information" >
< span > {{ts.trPK('attendance-tracking','schedule')}}< / span >
< h2 > {{timeCardSummaryData.SCHEDULE_DAYS}}< / h2 >
< / div >
< / ion-col >
< ion-col [ size ] = " 3 " >
< 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 >
<!-- <ion - row *ngIf="direction == 'en'">
< ion-col [ size ] = " 2 " style = "text-align: left;" >
< ion-icon class = "activeArrow" ios = "ios-arrow-dropleft-circle" md = "md-arrow-dropleft-circle" ( click ) = " previousSlide ( ) " > < / ion-icon >
< / ion-col >
< ion-col [ size ] = " 8 " style = "text-align: center;" >
< span class = "month-year-span" > {{month}} < / span >
< / ion-col >
< ion-col [ size ] = " 2 " style = "text-align: right;" >
< ion-icon * ngIf = "currentMonthName !== month" [ ngClass ] = " currentMonthName = == month ? ' disabledArrow ' : ' activeArrow ' " ios = "ios-arrow-dropright-circle" md = "md-arrow-dropright-circle" ( click ) = " nextSlide ( ) " > < / ion-icon >
< / ion-col >
< / ion-row >
< div * ngIf = "showData" [ ngClass ] = " direction = = ' en ' ? ' calendar-container ' : ' calendar-container-ar ' " >
< span > {{ts.trPK('attendance','monthly-attendance-calendar')}}< / span >
< ion-row * ngIf = "direction == 'ar'" >
< ion-col [ size ] = " 2 " style = "text-align: right;" >
< ion-icon class = "activeArrow" ios = "ios-arrow-dropright-circle" md = "md-arrow-dropright-circle" ( click ) = " previousSlide ( ) " > < / ion-icon >
< / ion-col >
< ion-col [ size ] = " 8 " style = "text-align: center;" >
< span class = "month-year-span" > {{month}}< / span >
< / ion-col >
< ion-col [ size ] = " 2 " style = "text-align: left;" >
< ion-icon * ngIf = "currentMonthName !== month" [ ngClass ] = " currentMonthName = == month ? ' disabledArrow ' : ' activeArrow ' " ios = "ios-arrow-dropleft-circle" md = "md-arrow-dropleft-circle" ( click ) = " nextSlide ( ) " > < / ion-icon >
< / ion-col >
< / ion-row > -->
< / div >
< / div >
< app-circle-calendar
[currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
@ -192,11 +392,18 @@
(currentYear)=changeYear($event)>
< / app-circle-calendar >
< / div >
< / div >
< / div >
< div * ngIf = "activeSegment === 'Team Members'" >
< div style = "margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;" >
< div style = "margin-top: -23px;" >
< ion-row >
< ion-col > < p class = "text" > {{ts.trPK('myTeam','my-team-members')}}< / p > < / ion-col >
< ion-col > < div class = "number" > < p class = "numberEmp" > {{EmpTotal}}< / p > < / div > < / ion-col >
< / ion-row >
< / 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 >
< ion-select okText = "{{ts.trPK('general','ok')}}" cancelText = "{{ts.trPK('general','cancel')}}"
@ -214,16 +421,16 @@
< ion-icon style = "margin-top: 10px;font-size: 20px;" class = "search-icons" color = "light" name = "search" > < / ion-icon >
< / ion-col >
< / ion-row >
< / div >
< / div > -->
< div * ngIf = "isSearch" >
<!-- <div *ngIf="isSearch" >
< ion-row class = "search-container" >
< ion-col style = "float: left;" size = [6] ( click ) = " clearSearchTwo ( ) " >
< span style = "margin-left: 5px;" > {{ts.trPK('work-list','clear-search')}}< / span >
< ion-icon name = "close" > < / ion-icon >
< / ion-col >
< / ion-row >
< / div >
< / div > -->
< ng-container * ngFor = "let subordinate of empSubordinate;let i=index" >
< app-employee-information
@ -234,6 +441,7 @@
(onGetDetails)="getDetails(i)">
< / app-employee-information >
< / ng-container >
< ion-infinite-scroll ( ionInfinite ) = " doInfinite ( $ event ) " >
< ion-infinite-scroll-content > < / ion-infinite-scroll-content >
@ -241,12 +449,15 @@
< / div >
< div class = "employee-information-indetail" * ngIf = "activeSegment === 'About'" >
< ion-row >
< ion-col [ size ] = " 6 " [ ngStyle ] = " direction = = ' en ' ? { ' border-right ' : ' 1px solid # ccc ' } : { ' border-left ' : ' 1px solid # ccc ' } " >
< ion-row style = " padding-left: 13px;" >
<!-- <ion - col [size]="6" [ngStyle]="direction == 'en' ? {'border - right': '1px solid #ccc'} : {'border - left': '1px solid #ccc'}" >
< h2 > {{ts.trPK('userProfile','empNo')}}< / h2 >
< 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 >
< / ion-col >
< ion-col [ size ] = " 6 " >
< ion-col [ size ] = " 12 " >
< h2 > {{ts.trPK('userProfile','category')}}< / h2 >
< p > {{employee.EMPLOYMENT_CATEGORY_MEANING}}< / p >
< / ion-col >
@ -270,10 +481,10 @@
< h2 > {{ts.trPK('userProfile','payrol')}}< / h2 >
< p > {{employee.PAYROLL_NAME}}< / p >
< / ion-col >
< ion-col [ size ] = " 12 " >
<!-- <ion - col [size]="12" >
< h2 > {{ts.trPK('userProfile','orgEmail')}}< / h2 >
< p > {{employee.EMPLOYEE_EMAIL_ADDRESS}}< / p >
< / ion-col >
< / ion-col > -->
< ion-col [ size ] = " 12 " >
< h2 > {{ts.trPK('userProfile','position')}}< / h2 >
< p > {{employee.POSITION_NAME}}< / p >