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-toolbar class="header-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons [navigate] = "false" (backClick)="goback()"></nav-buttons>
|
||||
<ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="modalFlag" (click)="dismiss()"></ion-icon>
|
||||
</ion-buttons>
|
||||
<ion-title color="light" >{{headerTitle}}</ion-title>
|
||||
<!-- <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>
|
||||
<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>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<div class="centerDiv">
|
||||
<ion-button color="customnavy" (click)="getMenuEntries(employee)">{{ts.trPK('myTeam','requestFor')}}
|
||||
{{employee.EMPLOYEE_NAME}}</ion-button>
|
||||
</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 *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>
|
||||
</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-toolbar class="header-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons backLink="/home" *ngIf="!isSearch"></nav-buttons>
|
||||
<ion-icon class="search-icons" color="light" name="arrow-back" *ngIf="isSearch" (click)="dismiss()"></ion-icon>
|
||||
</ion-buttons>
|
||||
<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 class="header-toolbar-new">
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons backLink="/home"></nav-buttons>
|
||||
</ion-buttons>
|
||||
<ion-title>MY TEAM</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
</ion-header>
|
||||
<ion-content padding>
|
||||
<ion-list *ngIf="isSearch">
|
||||
<ion-item>
|
||||
<ion-label>{{ts.trPK('general','search')}} </ion-label>
|
||||
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
|
||||
[(ngModel)]="searchKeySelect">
|
||||
<ion-select-option value="1" selected="true" selected>{{ts.trPK('searchForReplacment','name')}}</ion-select-option>
|
||||
<ion-select-option value="2">{{ts.trPK('searchForReplacment','userName')}} </ion-select-option>
|
||||
<ion-select-option value="3">{{ts.trPK('searchForReplacment','email')}} </ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<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-content>
|
||||
<div class="contentBg">
|
||||
<div class="result-graph">
|
||||
<div class="request-heading">
|
||||
<span>Today's Attendance</span>
|
||||
</div>
|
||||
<div class="result-text-container">
|
||||
<h2>43</h2>
|
||||
<span>TOTAL <br> TEAM MEMBERS</span>
|
||||
</div>
|
||||
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
||||
</div>
|
||||
|
||||
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll> -->
|
||||
<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>
|
||||
<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)">
|
||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</div>
|
||||
|
||||
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
|
||||
<ion-infinite-scroll-content></ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll> -->
|
||||
|
||||
</ion-content>
|
||||
<ion-footer *ngIf="isSearch">
|
||||
<div class="centerDiv">
|
||||
<ion-button color="customnavy" (click)="getEmpSubordinate()">{{ts.trPK('general','search')}} </ion-button>
|
||||
</div>
|
||||
</ion-footer>
|
||||
</ion-content>
|
||||
@ -1,6 +1,143 @@
|
||||
.search-icons{font-size:.7cm}
|
||||
.badge{
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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