+
+
+
+
+
-
-
-
- {{ts.trPK('myTeam','requestFor')}}
- {{employee.EMPLOYEE_NAME}}
+
+
Rohit Shety
+
Graphic Designer
+
+
-
-
-
0">
-
-
-
-
-
- {{subordinate.EMPLOYEE_NAME}}
- {{subordinate.POSITION_NAME}}
- {{subordinate.NUM_OF_SUBORDINATES}}
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Mohem/src/app/my-team/details/details.component.scss b/Mohem/src/app/my-team/details/details.component.scss
index 5b22677a..89216018 100644
--- a/Mohem/src/app/my-team/details/details.component.scss
+++ b/Mohem/src/app/my-team/details/details.component.scss
@@ -1 +1,114 @@
-.search-icons{font-size:.7cm}
\ No newline at end of file
+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;
+}
\ No newline at end of file
diff --git a/Mohem/src/app/my-team/details/details.component.ts b/Mohem/src/app/my-team/details/details.component.ts
index 25693833..60173f23 100644
--- a/Mohem/src/app/my-team/details/details.component.ts
+++ b/Mohem/src/app/my-team/details/details.component.ts
@@ -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?){
diff --git a/Mohem/src/app/my-team/home/home.component.html b/Mohem/src/app/my-team/home/home.component.html
index bb64c178..0fbd79b2 100644
--- a/Mohem/src/app/my-team/home/home.component.html
+++ b/Mohem/src/app/my-team/home/home.component.html
@@ -1,76 +1,73 @@
-
-
-
-
-
-
-
- {{ts.trPK('general','search')}}
-
- {{ts.trPK('searchForReplacment','name')}}
- {{ts.trPK('searchForReplacment','userName')}}
- {{ts.trPK('searchForReplacment','email')}}
-
-
-
-
-
-
-
- 0">
-
-
-
-
-
- {{subordinate.EMPLOYEE_NAME}}
- {{subordinate.POSITION_NAME}}
- {{subordinate.NUM_OF_SUBORDINATES}}
-
-
-
+
+
+
+
+ Today's Attendance
+
+
+
43
+ TOTAL
TEAM MEMBERS
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ts.trPK('searchForReplacment','name')}}
+ {{ts.trPK('searchForReplacment','userName')}}
+ {{ts.trPK('searchForReplacment','email')}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
-
-
-
- {{ts.trPK('general','search')}}
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Mohem/src/app/my-team/home/home.component.scss b/Mohem/src/app/my-team/home/home.component.scss
index d24aa6cf..2e2e8b19 100644
--- a/Mohem/src/app/my-team/home/home.component.scss
+++ b/Mohem/src/app/my-team/home/home.component.scss
@@ -1,6 +1,143 @@
-.search-icons{font-size:.7cm}
-.badge{
- padding: 10px;
- border-radius: 50%;
- width: 50px;
-}
\ No newline at end of file
+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;
+}
diff --git a/Mohem/src/app/my-team/home/home.component.ts b/Mohem/src/app/my-team/home/home.component.ts
index c0f8c7e8..c07ec4e9 100644
--- a/Mohem/src/app/my-team/home/home.component.ts
+++ b/Mohem/src/app/my-team/home/home.component.ts
@@ -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;
+ }
}
-
}
diff --git a/Mohem/src/assets/imgs/call_icon.png b/Mohem/src/assets/imgs/call_icon.png
new file mode 100644
index 00000000..b7f0e83d
Binary files /dev/null and b/Mohem/src/assets/imgs/call_icon.png differ
diff --git a/Mohem/src/assets/imgs/create_request_icon.png b/Mohem/src/assets/imgs/create_request_icon.png
new file mode 100644
index 00000000..b6da2a40
Binary files /dev/null and b/Mohem/src/assets/imgs/create_request_icon.png differ
diff --git a/Mohem/src/assets/imgs/green_call_icon.png b/Mohem/src/assets/imgs/green_call_icon.png
new file mode 100644
index 00000000..13768143
Binary files /dev/null and b/Mohem/src/assets/imgs/green_call_icon.png differ
diff --git a/Mohem/src/assets/imgs/message_icon.png b/Mohem/src/assets/imgs/message_icon.png
new file mode 100644
index 00000000..956dd4a0
Binary files /dev/null and b/Mohem/src/assets/imgs/message_icon.png differ
diff --git a/Mohem/src/theme/styles.scss b/Mohem/src/theme/styles.scss
index bc7eb10a..4c90cfc0 100644
--- a/Mohem/src/theme/styles.scss
+++ b/Mohem/src/theme/styles.scss
@@ -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;
+// }
+// }
+// }
+// }