fixing search bar in my team

enad-Q1
enadhilal 5 years ago
parent a0ad116530
commit b42d72bd81

@ -38,7 +38,7 @@
</ion-row> --> </ion-row> -->
<ion-row> <ion-row>
<ion-col > <ion-col >
<div (ionChange)="searchEmployee()" class="search-label"> <div (ionChange)="searchEmployee($event)" class="search-label">
<ion-input *ngIf="showEmailInput" placeholder="Search by Email" [(ngModel)]="searchEmail" pattern="email" ></ion-input> <ion-input *ngIf="showEmailInput" placeholder="Search by Email" [(ngModel)]="searchEmail" pattern="email" ></ion-input>
<ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name" [(ngModel)]="searchNameOrUserName" ></ion-input> <ion-input *ngIf="showUserNameOrNameInput" placeholder ="Search by Name" [(ngModel)]="searchNameOrUserName" ></ion-input>
<ion-input *ngIf="showUserNameInput" placeholder ="Search by Username" [(ngModel)]="searchUserName" ></ion-input> <ion-input *ngIf="showUserNameInput" placeholder ="Search by Username" [(ngModel)]="searchUserName" ></ion-input>

@ -10,6 +10,11 @@ ion-title{
height: 100%; height: 100%;
} }
@media only screen and (max-width: 360px) {
.contentBg{
padding: 0px 15px !important;
}
}
.contentBg{ .contentBg{
padding: 0px 20px; padding: 0px 20px;
@ -176,8 +181,14 @@ ion-content {
.search-container{ .search-container{
// margin-top: 15px; // margin-top: 15px;
margin-top: -35px; // margin-top: -35px;
margin-left: 262px; // margin-left: 262px;
width: 30px;
height: 30px;
position: absolute;
top: 45px;
right: 38px;
z-index: 999999;
ion-col{ ion-col{
// background: white; // background: white;
// border-radius: 12px; // border-radius: 12px;
@ -203,6 +214,19 @@ ion-content {
// } // }
// } // }
@media only screen and (max-width: 375px) {
.text-label{
margin-left: 6px !important;
}
}
@media only screen and (max-width: 320px) {
.text-label{
margin-left: 2px !important;
}
}
.text-label{ .text-label{
// --color: black !important; // --color: black !important;
// font-size: 13px; // font-size: 13px;

@ -89,6 +89,7 @@ export class HomeComponent implements OnInit {
public showEmailInput = false; public showEmailInput = false;
public showUserNameOrNameInput = true; public showUserNameOrNameInput = true;
public showUserNameInput = false; public showUserNameInput = false;
arrList: any[];
constructor( constructor(
public ts: TranslatorService, public ts: TranslatorService,
@ -133,10 +134,33 @@ export class HomeComponent implements OnInit {
} }
} }
searchEmployee() { searchEmployee(event) {
this.isSearch = true; // this.isSearch = true;
this.empSubordinate = []; // this.empSubordinate = [];
this.getEmpSubordinate(); // this.getEmpSubordinate();
const val = event.target.value;
console.log(this.searchKeySelect)
if (val === '') {
this.empSubordinate = this.arrList;
this.isSearch = false;
}
if(this.searchKeySelect === 'Name'){
this.empSubordinate = this.arrList.filter((item) => {
this.isSearch = true;
return (item.EMPLOYEE_NAME.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
} else if(this.searchKeySelect === 'User Name'){
this.empSubordinate = this.arrList.filter((item) => {
this.isSearch = true;
return (item.EMPLOYEE_NUMBER.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
} else if(this.searchKeySelect === 'Email'){
this.empSubordinate = this.arrList.filter((item) => {
this.isSearch = true;
return (item.EMPLOYEE_EMAIL_ADDRESS.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
} }
getEmpSubordinate() { getEmpSubordinate() {
@ -199,6 +223,7 @@ export class HomeComponent implements OnInit {
} else { } else {
this.empSubordinate = []; this.empSubordinate = [];
} }
this.arrList = this.empSubordinate;
} }
doInfinite(infiniteScroll) { doInfinite(infiniteScroll) {
@ -218,13 +243,18 @@ export class HomeComponent implements OnInit {
clearSearch() { clearSearch() {
this.isSearch = false; this.isSearch = false;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM = 1; this.empSubordinate = this.arrList;
this.empSubordinate = [];
this.isReachEnd = false;
this.searchNameOrUserName = ''; this.searchNameOrUserName = '';
this.searchUserName = ''; this.searchUserName = '';
this.searchEmail = ''; this.searchEmail = '';
this.getEmpSubordinate(); // this.isSearch = false;
// this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM = 1;
// this.empSubordinate = [];
// this.isReachEnd = false;
// this.searchNameOrUserName = '';
// this.searchUserName = '';
// this.searchEmail = '';
// this.getEmpSubordinate();
} }
getDetails(index) { getDetails(index) {
@ -274,4 +304,13 @@ export class HomeComponent implements OnInit {
// this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES; // this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
// console.log("total no "+this.EmpTotal) // console.log("total no "+this.EmpTotal)
// } // }
filterList(event) {
const val = event.target.value;
if (val === '') {
this.arrList = this.empSubordinate;
}
this.arrList = this.empSubordinate.filter((item) => {
return (item.title_EN.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
} }

Loading…
Cancel
Save