my team new design componentes created

master
umasoodch 6 years ago
parent 5208584999
commit 6eeca7479d

@ -111,7 +111,8 @@ import { AttendScanService } from './services/attend-services/attend-scan.servic
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { NgCircleProgressModule } from 'ng-circle-progress';
import {ChartModule} from 'primeng/chart';
import { CardFilterComponent} from './ui/card-filter/card-filter.component';
import { CardFilterComponent } from './ui/card-filter/card-filter.component';
import { EmployeeInformationComponent } from './ui/employee-information/employee-information.component';
@NgModule({
imports: [
@ -186,7 +187,8 @@ import { CardFilterComponent} from './ui/card-filter/card-filter.component';
StatsButtonComponent,
ServicesButtonComponent,
ConfirmLoginComponent,
CardFilterComponent
CardFilterComponent,
EmployeeInformationComponent
],
exports: [
FabButtonComponent,
@ -247,7 +249,8 @@ import { CardFilterComponent} from './ui/card-filter/card-filter.component';
ConfirmLoginComponent,
NgCircleProgressModule,
ChartModule,
CardFilterComponent
CardFilterComponent,
EmployeeInformationComponent
],
providers: [
AttendScanService,

@ -29,4 +29,5 @@
.text-span{
font-size: 14px;
color: #888;
margin: -1px;
}

@ -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() {}
}

@ -23,6 +23,19 @@
</ion-slides>
</ion-row>
<ion-row *ngFor="let item of menuList; let i=index">
<ng-container *ngIf="item.MENU_TYPE === 'M'">
<ion-col [size]="12">
<ion-label>{{item.MENU_NAME}}</ion-label>
</ion-col>
<app-services-button
(click)="openMyTeamPage()"
[title]="item.MENU_NAME"
icon="assets/icon/new-design/leave_balance.png">
</app-services-button>
</ng-container>
</ion-row>
<ion-row *ngFor="let menuItem of menuEntries; let i=index">
<ion-row class="attendance-module" *ngIf="i == 1">

@ -352,6 +352,10 @@ export class HomePage implements OnInit {
// }
}
openMyTeamPage() {
this.common.openMyTeamPage();
}
getMenuEntries(item) {
const request: any = {};
let selEmpNo: string = null;

@ -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;
}

@ -30,6 +30,7 @@ export class DetailsComponent implements OnInit {
selMenu: MenuResponse = new MenuResponse();
public opendEmployees :any=[];
public headerTitle: string = "";
public userImage: any = '../assets/imgs/profile.png';
constructor(
public menuService: MenuService,
public common: CommonService,
@ -42,7 +43,7 @@ export class DetailsComponent implements OnInit {
console.log("Constuctor called");
}
ngOnInit() {
this.intializeMemberDetail();
// this.intializeMemberDetail();
}
intializeMemberDetail(userID?){

@ -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;
}

@ -1,32 +1,87 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { Location } from "@angular/common";
import { TranslatorService } from "src/app/hmg-common/services/translator/translator.service";
import { CommonService } from "src/app/hmg-common/services/common/common.service";
import { AuthenticationService } from "src/app/hmg-common/services/authentication/authentication.service";
import { MenuResponse } from "src/app/hmg-common/services/menu/models/menu-response";
import { MyTeamService } from "../service/my-team.service";
import { ModalController, IonInfiniteScroll } from "@ionic/angular";
import { Component, OnInit, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
import { AuthenticationService } from 'src/app/hmg-common/services/authentication/authentication.service';
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
import { MyTeamService } from '../service/my-team.service';
import { ModalController, IonInfiniteScroll } from '@ionic/angular';
import { DetailsComponent } from '../details/details.component';
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styleUrls: ["./home.component.scss"]
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
pageNum: number = 1;
pageLimit: number = 50;
empSubordinate: any;
employee: any;
public headerTitle: string = "";
IsReachEnd: boolean = false;
searchKey: any;
public isSearch: boolean = false;
public searchKeySelect: any;
infiniteRequest: any;
selMenu: any;
selEmpNo: any;
public pageNum = 1;
public pageLimit = 5;
public empSubordinate = [];
public employee: any;
public isReachEnd = false;
public searchKey: any;
public isSearch = false;
public searchKeySelect = 'Name';
public getEmployeeSubordinatesRequestObject: any;
public selMenu: any;
public selEmpNo: any;
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
public data = {
datasets: [
{
data: [30, 30, 40],
backgroundColor: [
'#18a169',
'#38c9b3',
'#114475',
],
borderWidth: 5
}]
};
public filters = [
{
value: 0,
name: 'All',
active: true,
color: '#124375'
},
{
value: 0,
name: 'Present',
active: false,
color: '#18a169'
},
{
value: 0,
name: 'Absent',
active: false,
color: '#38c9b3'
},
{
value: 0,
name: 'Late',
active: false,
color: '#114475'
}
];
public slideOptsOne = {
slidesPerView: 4,
spaceBetween: 10
};
public previousActiveIndex = 0;
public currentActiveIndex = 0;
public searchNameOrUserName = '';
public searchEmail = '';
public showEmailInput = false;
public showUserNameOrNameInput = true;
constructor(
public ts: TranslatorService,
public authService: AuthenticationService,
@ -37,64 +92,42 @@ export class HomeComponent implements OnInit {
) {}
ngOnInit() {
this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR);
// this.common.sharedService.setSharedData( [], DetailsComponent.opendEmployeesARR);
this.setIntitial();
}
activeFilter(index: number) {
this.previousActiveIndex = this.currentActiveIndex;
this.currentActiveIndex = index;
this.filters[this.previousActiveIndex].active = false;
this.filters[this.currentActiveIndex].active = true;
}
goback() {
this.location.back();
}
getData() {}
setIntitial() {
this.selMenu = this.common.sharedService.getSharedData(
MenuResponse.SHARED_DATA,
false
);
this.headerTitle = this.selMenu.List_Menu.MENU_NAME;
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
this.selEmpNo = this.selMenu.userid;
this.isSearch = this.selMenu.search ? this.selMenu.search : this.isSearch;
// this.isSearch=this.navParams.get("isSearch")?this.navParams.get("isSearch") : false;
if (!this.isSearch) this.getEmpSubordinate();
if (!this.isSearch) {
this.getEmpSubordinate();
}
}
searchEmployee() {
// this.isSearch = true;
// this.getEmpSubordinate();
}
getEmpSubordinate() {
console.log("getEmpSubordinate my team home");
this.pageNum = 1;
this.IsReachEnd = false;
let searchEmpNum = "";
let searchEmpName = "";
let searchEmpEmail = "";
if (this.searchKey) {
switch (this.searchKeySelect) {
case "1": {
searchEmpName = this.searchKey;
searchEmpNum = "";
searchEmpEmail = "";
this.isReachEnd = false;
const searchEmpNum = (this.searchKeySelect === 'User Name') ? this.searchNameOrUserName : '';
const searchEmpName = (this.searchKeySelect === 'Name') ? this.searchNameOrUserName : '';
const searchEmpEmail = (this.searchKeySelect === 'Email') ? this.searchEmail : '';
break;
}
case "2": {
searchEmpNum = this.searchKey;
searchEmpName = "";
searchEmpEmail = "";
break;
}
case "3": {
searchEmpEmail = this.searchKey;
searchEmpNum = "";
searchEmpName = "";
break;
}
default: {
searchEmpNum = "";
searchEmpName = "";
searchEmpEmail = "";
break;
}
}
} else {
searchEmpNum = "";
searchEmpName = "";
searchEmpEmail = "";
}
if (this.isSearch) {
this.selEmpNo = null;
}
@ -107,10 +140,8 @@ export class HomeComponent implements OnInit {
P_PAGE_NUM: this.pageNum,
P_PAGE_LIMIT: this.pageLimit
};
this.infiniteRequest = body;
this.myTeamService
.getEmployeeSubordinates(body)
.subscribe((result: any) => {
this.getEmployeeSubordinatesRequestObject = body;
this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => {
this.handleEmpResult(result);
});
}
@ -118,16 +149,15 @@ export class HomeComponent implements OnInit {
handleEmpResult(result) {
if (this.common.validResponse(result)) {
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
this.empSubordinate = result.GetEmployeeSubordinatesList;
this.infiniteRequest.P_PAGE_NUM++;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM++;
const lastItemIndex = this.empSubordinate.length - 1;
if (result.GetEmployeeSubordinatesList[lastItemIndex]) {
const lastitem = result.GetEmployeeSubordinatesList[lastItemIndex];
if (lastitem.NO_OF_ROWS == lastitem.ROW_NUM) {
this.IsReachEnd = true;
if (lastitem.NO_OF_ROWS === lastitem.ROW_NUM) {
this.isReachEnd = true;
} else {
this.IsReachEnd = false;
this.isReachEnd = false;
}
}
} else {
@ -136,143 +166,53 @@ export class HomeComponent implements OnInit {
}
}
doInfinite1(infiniteScroll) {
console.log("test");
if (!this.IsReachEnd && this.infiniteRequest) {
console.log("not ReachEnd");
this.infiniteRequest.P_PAGE_NUM = this.pageNum;
this.myTeamService
.getEmployeeSubordinates(this.infiniteRequest)
.subscribe(
(result: any) => {
if (this.common.validResponse(result)) {
this.pageNum++;
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
result.GetEmployeeSubordinatesList.forEach(vr => {
if (vr.ROW_NUM == vr.NO_OF_ROWS) {
this.IsReachEnd = true;
} else {
this.IsReachEnd = false;
}
this.empSubordinate.push(vr);
// this.pro.GetVacationRulesList.push(vr);
});
} else {
this.IsReachEnd = true;
}
}
//this.P_PAGE_NUM++;
if (infiniteScroll) {
infiniteScroll.complete();
}
// console.log(resFlag);
},
Error => console.log(Error),
() => infiniteScroll.complete()
);
} else {
if (infiniteScroll) {
infiniteScroll.complete();
}
}
}
doInfinite(infiniteScroll) {
//this.pageNum= this.pageNum + 1;
console.log("test doInfinite");
if (!this.IsReachEnd) {
console.log("test doInfinite not ReachEnd");
this.myTeamService
.getEmployeeSubordinates(this.infiniteRequest).subscribe(
(result: any) => {
if (!this.isReachEnd) {
this.myTeamService.getEmployeeSubordinates(this.getEmployeeSubordinatesRequestObject).subscribe((result: any) => {
if (this.common.validResponse(result)) {
this.infiniteRequest.P_PAGE_NUM++;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM++;
if (this.common.hasData(result.GetEmployeeSubordinatesList)) {
result.GetEmployeeSubordinatesList.forEach(element => {
if (element.ROW_NUM == element.NO_OF_ROWS) {
this.IsReachEnd = true;
if (element.ROW_NUM === element.NO_OF_ROWS) {
this.isReachEnd = true;
} else {
this.IsReachEnd = false;
this.isReachEnd = false;
}
this.empSubordinate.push(element);
});
} // if list length >0
else {
this.IsReachEnd = true;
} else {
this.isReachEnd = true;
}
} // if response == 1
//this.pageNum++;
}
this.infiniteScroll.complete();
}
);
} else {
if (this.infiniteScroll)
if (this.infiniteScroll) {
this.infiniteScroll.complete();
}
}
} //end infiniteScroll
}
getDetails(index) {
this.common.sharedService.setSharedData(
this.empSubordinate[index],
MyTeamService.EMPLOYEE_SHARED_DATA
);
this.common.sharedService.setSharedData(
this.selMenu,
MenuResponse.SHARED_DATA
);
this.close().then(() => {
this.common.openMyTeamDetails();
});
//this.modalController.dismiss();
//this.navCtrl.push("MyTeamPage",{employee:this.empSubordinate[index]});
}
public async close() {
const modal = await this.modalController.getTop();
if (modal) {
modal.dismiss();
}
}
toggleSearch() {
this.isSearch = !this.isSearch;
this.common.sharedService.setSharedData(this.empSubordinate[index], MyTeamService.EMPLOYEE_SHARED_DATA);
this.common.sharedService.setSharedData(this.selMenu, MenuResponse.SHARED_DATA);
// this.close().then(() => {
// this.common.openMyTeamDetails();
// });
}
goToSubordinate() {
//this.navCtrl.push("MySubordinatePage",{isSearch:true});
//this.getEmpSubordinate();
this.presentModal();
// this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: HomeComponent,
keyboardClose: true,
animated: false,
componentProps: { isSearch: true }
});
modal.cssClass="full-modal";
let dismissed = modal.onDidDismiss();
dismissed.then(() => {
this.isSearch = false;
});
return await modal.present();
}
dismiss() {
this.modalController.dismiss({
dismissed: true
});
showSelectedField(value: any) {
if (this.searchKeySelect === 'User Name' || this.searchKeySelect === 'User Name') {
this.showEmailInput = false;
this.showUserNameOrNameInput = true;
} else if (this.searchKeySelect === 'Email') {
this.showUserNameOrNameInput = false;
this.showEmailInput = true;
}
}
}

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

@ -1004,3 +1004,22 @@ border:0px
.header-toolbar-new{
--background: #22c6b3;
}
// .select-text{
// --margin-left: -10px;
// margin-left:0;
// }
// .search-dropdown{
// background: #22c6b3;
// ion-select {
// .select-text{
// margin-left: -10px;
// }
// .select-icon{
// .select-icon-inner{
// opacity: 1;
// color: white;
// margin-top: -1px;
// }
// }
// }
// }

Loading…
Cancel
Save