fixing search bar in my team

MOHEMM-SFH-COLORS
enadhilal 4 years ago
parent a0ad116530
commit b42d72bd81

@ -38,7 +38,7 @@
</ion-row> -->
<ion-row>
<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="showUserNameOrNameInput" placeholder ="Search by Name" [(ngModel)]="searchNameOrUserName" ></ion-input>
<ion-input *ngIf="showUserNameInput" placeholder ="Search by Username" [(ngModel)]="searchUserName" ></ion-input>

@ -10,6 +10,11 @@ ion-title{
height: 100%;
}
@media only screen and (max-width: 360px) {
.contentBg{
padding: 0px 15px !important;
}
}
.contentBg{
padding: 0px 20px;
@ -176,8 +181,14 @@ ion-content {
.search-container{
// margin-top: 15px;
margin-top: -35px;
margin-left: 262px;
// margin-top: -35px;
// margin-left: 262px;
width: 30px;
height: 30px;
position: absolute;
top: 45px;
right: 38px;
z-index: 999999;
ion-col{
// background: white;
// 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{
// --color: black !important;
// font-size: 13px;

@ -89,6 +89,7 @@ export class HomeComponent implements OnInit {
public showEmailInput = false;
public showUserNameOrNameInput = true;
public showUserNameInput = false;
arrList: any[];
constructor(
public ts: TranslatorService,
@ -133,10 +134,33 @@ export class HomeComponent implements OnInit {
}
}
searchEmployee() {
this.isSearch = true;
this.empSubordinate = [];
this.getEmpSubordinate();
searchEmployee(event) {
// this.isSearch = true;
// this.empSubordinate = [];
// 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() {
@ -199,6 +223,7 @@ export class HomeComponent implements OnInit {
} else {
this.empSubordinate = [];
}
this.arrList = this.empSubordinate;
}
doInfinite(infiniteScroll) {
@ -218,13 +243,18 @@ export class HomeComponent implements OnInit {
clearSearch() {
this.isSearch = false;
this.getEmployeeSubordinatesRequestObject.P_PAGE_NUM = 1;
this.empSubordinate = [];
this.isReachEnd = false;
this.empSubordinate = this.arrList;
this.searchNameOrUserName = '';
this.searchUserName = '';
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) {
@ -274,4 +304,13 @@ export class HomeComponent implements OnInit {
// this.EmpTotal = result.GetSubordinatesAttdStatusList[0].NUMBER_OF_EMPLOYEES;
// 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