my team new design componentes created
parent
5208584999
commit
6eeca7479d
@ -0,0 +1,26 @@
|
|||||||
|
<div class="team-member-container">
|
||||||
|
<ion-row>
|
||||||
|
<ion-col [size]="3">
|
||||||
|
<div class="user-image-container present">
|
||||||
|
<div class="user-image">
|
||||||
|
<img [src]="employeeImage" alt="Team Member Image"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="9" style="padding: 8px 15px 0;">
|
||||||
|
<div>
|
||||||
|
<span class="employee-name">
|
||||||
|
<h2 class="name">{{name}}</h2>
|
||||||
|
<span class="title">{{title}}</span>
|
||||||
|
</span>
|
||||||
|
<span class="image-container">
|
||||||
|
<img src="../assets/imgs/green_call_icon.png" >
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="swipe-information">
|
||||||
|
<span class="check-in"><strong>Check-In:</strong> {{checkIn}}</span>
|
||||||
|
<span><strong>Check-Out:</strong> {{checkOut}}</span>
|
||||||
|
</div>
|
||||||
|
</ion-col>
|
||||||
|
</ion-row>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
.team-member-container{
|
||||||
|
background: white;
|
||||||
|
border-radius: 100px 20px 20px 100px;
|
||||||
|
margin-top: 15px;
|
||||||
|
font-family: WorkSans-Regular;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-image-container{
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
&:before{
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid white;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: red;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
&.present:before{
|
||||||
|
background-color: green !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-image{
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 80px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 0px auto 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.employee-name{
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
.name{
|
||||||
|
font-size: 18px;
|
||||||
|
color: black;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-size: 15px;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image-container{
|
||||||
|
width: 20%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.swipe-information{
|
||||||
|
color: #888;
|
||||||
|
font-size: 12px;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
padding-top: 6px;
|
||||||
|
margin-top: 6px;
|
||||||
|
.check-in {
|
||||||
|
font-size: 12px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { EmployeeInformationComponent } from './employee-information.component';
|
||||||
|
|
||||||
|
describe('EmployeeInformationComponent', () => {
|
||||||
|
let component: EmployeeInformationComponent;
|
||||||
|
let fixture: ComponentFixture<EmployeeInformationComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ EmployeeInformationComponent ],
|
||||||
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(EmployeeInformationComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import { Component, OnInit, Input } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-employee-information',
|
||||||
|
templateUrl: './employee-information.component.html',
|
||||||
|
styleUrls: ['./employee-information.component.scss'],
|
||||||
|
})
|
||||||
|
export class EmployeeInformationComponent implements OnInit {
|
||||||
|
|
||||||
|
public userImage: any = '../assets/imgs/profile.png';
|
||||||
|
@Input() name: string;
|
||||||
|
@Input() title: string;
|
||||||
|
@Input() employeeImage: string;
|
||||||
|
@Input() checkIn: string;
|
||||||
|
@Input() checkOut: string;
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit() {}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,158 +1,102 @@
|
|||||||
|
<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-header>
|
<ion-content>
|
||||||
<ion-toolbar class="header-toolbar">
|
<div class="contentBg">
|
||||||
<ion-buttons slot="start">
|
<div class="result-graph">
|
||||||
<nav-buttons [navigate] = "false" (backClick)="goback()"></nav-buttons>
|
<div class="user-info">
|
||||||
<ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="modalFlag" (click)="dismiss()"></ion-icon>
|
<div class="user-image-container present">
|
||||||
</ion-buttons>
|
<div class="user-image">
|
||||||
<ion-title color="light" >{{headerTitle}}</ion-title>
|
<img [src]="userImage" alt="Team Member Image"/>
|
||||||
<!-- <ion-buttons slot="end">
|
|
||||||
<button ion-button icon-only class="btnBack" *ngIf="isSpecialist == false" (click)="goToSubordinate();">
|
|
||||||
<ion-icon class="search-icons" color="light" name="search"></ion-icon>
|
|
||||||
</button>
|
|
||||||
</ion-buttons> -->
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header>
|
|
||||||
<ion-content padding>
|
|
||||||
<div *ngIf="employee">
|
|
||||||
<ion-card>
|
|
||||||
|
|
||||||
<ion-card-header class="boxHdr">
|
|
||||||
<div class="hrTitle">{{employee.EMPLOYEE_NAME}}</div>
|
|
||||||
</ion-card-header>
|
|
||||||
<ion-card-content>
|
|
||||||
<div>
|
|
||||||
<div class="centerDiv profileDiv">
|
|
||||||
<!-- <p class="TxtPlace boldTxt">{{User_name_Emp}}</p> -->
|
|
||||||
<ion-img class="profileImg"
|
|
||||||
[src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
|
|
||||||
</ion-img>
|
|
||||||
</div>
|
|
||||||
<ion-grid class="profile-grid">
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','empNo')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.EMPLOYEE_NUMBER}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<!-- <ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{"userProfile.name" | translate}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.EMPLOYEE_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row> -->
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','busG')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.BUSINESS_GROUP_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','job')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.JOB_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','locName')}} </label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.LOCATION_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','payrol')}} </label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.PAYROLL_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','orgEmail')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.EMPLOYEE_EMAIL_ADDRESS}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','orgName')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.ORGANIZATION_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','position')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.POSITION_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','grade')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.GRADE_NAME}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<ion-row>
|
|
||||||
<ion-col class="colBold" col-5>
|
|
||||||
<label>{{ts.trPK('userProfile','category')}}</label>
|
|
||||||
</ion-col>
|
|
||||||
<ion-col col-7>
|
|
||||||
<label>{{employee.EMPLOYMENT_CATEGORY_MEANING}}</label>
|
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
<!-- <ion-row (click)="getMenuEntries(employee);">
|
|
||||||
<ion-col col-7> -->
|
|
||||||
<!-- <label for="">Request for {{employee.EMPLOYEE_NAME}}</label> -->
|
|
||||||
<!-- </ion-col>
|
|
||||||
</ion-row> -->
|
|
||||||
</ion-grid>
|
|
||||||
</div>
|
</div>
|
||||||
</ion-card-content>
|
</div>
|
||||||
</ion-card>
|
<h1>Rohit Shety</h1>
|
||||||
<div class="centerDiv">
|
<span>Graphic Designer</span>
|
||||||
<ion-button color="customnavy" (click)="getMenuEntries(employee)">{{ts.trPK('myTeam','requestFor')}}
|
</div>
|
||||||
{{employee.EMPLOYEE_NAME}}</ion-button>
|
<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>
|
|
||||||
<div *ngIf="isSpecialist == false" >
|
|
||||||
<ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
|
|
||||||
<ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
|
|
||||||
<ion-avatar slot="start">
|
|
||||||
<!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
|
|
||||||
<img
|
|
||||||
[src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
|
|
||||||
</ion-avatar>
|
|
||||||
<p class="boldTxt">{{subordinate.EMPLOYEE_NAME}}</p>
|
|
||||||
<p>{{subordinate.POSITION_NAME}}</p>
|
|
||||||
<ion-badge slot="end">{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
<ion-infinite-scroll threshold="100px" (ionInfinite)="doInfinite($event)">
|
|
||||||
<ion-infinite-scroll-content
|
|
||||||
loadingSpinner="bubbles"
|
|
||||||
loadingText="Loading more data...">
|
|
||||||
</ion-infinite-scroll-content>
|
|
||||||
</ion-infinite-scroll>
|
|
||||||
</div>
|
</div>
|
||||||
</ion-content>
|
|
||||||
|
<div class="emplyee-information-indetail">
|
||||||
|
<ion-row>
|
||||||
|
<ion-col [size]="6">
|
||||||
|
<h2>Employee</h2>
|
||||||
|
<p>197400</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="6">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</p>
|
||||||
|
</ion-col>
|
||||||
|
<ion-col [size]="12">
|
||||||
|
<h2>Category</h2>
|
||||||
|
<p>Permanent</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>
|
||||||
@ -1 +1,114 @@
|
|||||||
.search-icons{font-size:.7cm}
|
ion-content {
|
||||||
|
--ion-background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
ion-title{
|
||||||
|
color: white;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
text-align: center;
|
||||||
|
left: 15%;
|
||||||
|
right: 15%;
|
||||||
|
font-size: 0.42cm;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.contentBg{
|
||||||
|
padding: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBg:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: #22c6b3;
|
||||||
|
height: 140px;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.result-graph {
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
.user-image-container{
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
&:before{
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid white;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: red;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
&.present:before{
|
||||||
|
background-color: green !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-image{
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 80px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 0px auto 6px;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: WorkSans-Bold;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
span{
|
||||||
|
font-size: 14px;
|
||||||
|
display: block;
|
||||||
|
color: #888
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$actionBtnSize : 36px;
|
||||||
|
.user-actions{
|
||||||
|
text-align: center;
|
||||||
|
.action-button{
|
||||||
|
font-size: 11px;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #888;
|
||||||
|
.action-button-icon{
|
||||||
|
width: $actionBtnSize;
|
||||||
|
height: $actionBtnSize;
|
||||||
|
border-radius: $actionBtnSize;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: block;
|
||||||
|
background-color: #22c6b3;
|
||||||
|
line-height: $actionBtnSize;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
img{
|
||||||
|
margin: 0 auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emplyee-information-indetail{
|
||||||
|
background: white;
|
||||||
|
margin-top: 50px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
@ -1,76 +1,73 @@
|
|||||||
<!-- <ion-header>
|
|
||||||
<ion-toolbar class="header-toolbar">
|
|
||||||
<div slot="start">
|
|
||||||
<nav-buttons></nav-buttons>
|
|
||||||
<ion-title color="light">{{headerTitle}}</ion-title>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<ion-button style="background: none !important;" *ngIf="!isSearch" (click)="goToSubordinate()">
|
|
||||||
<ion-icon slot="icon-only" name="search"></ion-icon>
|
|
||||||
</ion-button>
|
|
||||||
</ion-buttons>
|
|
||||||
|
|
||||||
</ion-toolbar>
|
|
||||||
</ion-header> -->
|
|
||||||
|
|
||||||
<ion-header>
|
<ion-header>
|
||||||
<ion-toolbar class="header-toolbar">
|
<ion-toolbar class="header-toolbar-new">
|
||||||
<ion-buttons slot="start">
|
<ion-buttons slot="start">
|
||||||
<nav-buttons backLink="/home" *ngIf="!isSearch"></nav-buttons>
|
<nav-buttons backLink="/home"></nav-buttons>
|
||||||
<ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="isSearch" (click)="dismiss()"></ion-icon>
|
</ion-buttons>
|
||||||
</ion-buttons>
|
<ion-title>MY TEAM</ion-title>
|
||||||
<ion-title color="light" >{{headerTitle}}</ion-title>
|
|
||||||
<ion-buttons slot="end">
|
|
||||||
<button ion-button icon-only class="btnBack" *ngIf="!isSearch" (click)="goToSubordinate();">
|
|
||||||
<ion-icon class="search-icons" color="light" name="search"></ion-icon>
|
|
||||||
</button>
|
|
||||||
</ion-buttons>
|
|
||||||
|
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
</ion-header>
|
<ion-content>
|
||||||
<ion-content padding>
|
<div class="contentBg">
|
||||||
<ion-list *ngIf="isSearch">
|
<div class="result-graph">
|
||||||
<ion-item>
|
<div class="request-heading">
|
||||||
<ion-label>{{ts.trPK('general','search')}} </ion-label>
|
<span>Today's Attendance</span>
|
||||||
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
|
</div>
|
||||||
[(ngModel)]="searchKeySelect">
|
<div class="result-text-container">
|
||||||
<ion-select-option value="1" selected="true" selected>{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
|
<h2>43</h2>
|
||||||
<ion-select-option value="2">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
|
<span>TOTAL <br> TEAM MEMBERS</span>
|
||||||
<ion-select-option value="3">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
|
</div>
|
||||||
</ion-select>
|
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
||||||
</ion-item>
|
</div>
|
||||||
<ion-item>
|
|
||||||
<ion-input [(ngModel)]="searchKey" placeholder="{{ts.trPK('general','enter')}}"></ion-input>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
|
||||||
<!-- <div> -->
|
|
||||||
<ion-list no-lines *ngIf="empSubordinate && empSubordinate.length>0">
|
|
||||||
<ion-item no-border *ngFor="let subordinate of empSubordinate;let i=index" (click)="getDetails(i);">
|
|
||||||
<ion-avatar slot="start">
|
|
||||||
<!-- <img *ngIf="subordinate.EMPLOYEE_IMAGE" src="data:image/*;base64,{{ subordinate.EMPLOYEE_IMAGE}}"> -->
|
|
||||||
<img [src]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'">
|
|
||||||
</ion-avatar>
|
|
||||||
<p class="boldTxt">{{subordinate.EMPLOYEE_NAME}}</p>
|
|
||||||
<p>{{subordinate.POSITION_NAME}}</p>
|
|
||||||
<ion-badge slot="end" class="badge">{{subordinate.NUM_OF_SUBORDINATES}}</ion-badge>
|
|
||||||
</ion-item>
|
|
||||||
</ion-list>
|
|
||||||
<!-- </div> -->
|
|
||||||
|
|
||||||
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
<ion-row class="filters-row">
|
||||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
<ion-slides [options]="slideOptsOne">
|
||||||
</ion-infinite-scroll> -->
|
<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>
|
||||||
|
<ion-icon style="margin-top: 10px;font-size: 20px;" class="search-icons" color="light" name="search"></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="-">
|
||||||
|
</app-employee-information>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
</div>
|
||||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
|
||||||
</ion-infinite-scroll>
|
|
||||||
|
|
||||||
|
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
||||||
|
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
||||||
|
</ion-infinite-scroll> -->
|
||||||
|
|
||||||
</ion-content>
|
</ion-content>
|
||||||
<ion-footer *ngIf="isSearch">
|
|
||||||
<div class="centerDiv">
|
|
||||||
<ion-button color="customnavy" (click)="getEmpSubordinate()">{{ts.trPK('general','search')}} </ion-button>
|
|
||||||
</div>
|
|
||||||
</ion-footer>
|
|
||||||
@ -1,6 +1,143 @@
|
|||||||
.search-icons{font-size:.7cm}
|
ion-title{
|
||||||
.badge{
|
color: white;
|
||||||
padding: 10px;
|
position: absolute;
|
||||||
border-radius: 50%;
|
top: 0;
|
||||||
width: 50px;
|
text-align: center;
|
||||||
}
|
left: 15%;
|
||||||
|
right: 15%;
|
||||||
|
font-size: 0.42cm;
|
||||||
|
font-weight: bold;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBg{
|
||||||
|
padding: 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentBg:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
background: #22c6b3;
|
||||||
|
height: 140px;
|
||||||
|
width: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
ion-content {
|
||||||
|
--ion-background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
.request-heading {
|
||||||
|
span {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
padding-top: 8px;
|
||||||
|
font-family: workSans-Regular;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-graph {
|
||||||
|
position: relative;
|
||||||
|
background: white;
|
||||||
|
margin-top: 20px;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.result-text-container {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
h2 {
|
||||||
|
font-size: 38px;
|
||||||
|
font-family: WorkSans-Bold;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 36px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
width: 125px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: workSans-Regular;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.today-graph {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 4cm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-container {
|
||||||
|
margin: 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.filters-row {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
margin-top: 15px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
ion-input {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search-dropdown{
|
||||||
|
background: #22c6b3;
|
||||||
|
ion-select {
|
||||||
|
.select-text{
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
.select-icon{
|
||||||
|
.select-icon-inner{
|
||||||
|
opacity: 1;
|
||||||
|
color: white;
|
||||||
|
margin-top: -1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.input-container{
|
||||||
|
background: white;
|
||||||
|
ion-input{
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-image-container{
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
&:before{
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid white;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: red;
|
||||||
|
z-index: 9;
|
||||||
|
}
|
||||||
|
&.present:before{
|
||||||
|
background-color: green !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-image{
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 80px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin: 0px auto 6px;
|
||||||
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 354 B |
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
Binary file not shown.
|
After Width: | Height: | Size: 569 B |
Binary file not shown.
|
After Width: | Height: | Size: 391 B |
Loading…
Reference in New Issue