fixing delegate itg

MOHEMM-SFH-COLORS
enadhilal 4 years ago
parent 5fbaed162b
commit b9f691e76f

@ -106,6 +106,7 @@ export class WorkListMainItgComponent implements OnInit {
this.segmentsArray = [this.segmentsArray[1], this.segmentsArray[2], this.segmentsArray[0]];
this.segmentData = [this.segmentData[1], this.segmentData[0]];
this.workList = this.request_details.WFHistory.reverse();
this.common.sharedService.setSharedData(this.workList, 'workflow-user');
// this.workList = this.request_details.WFHistory;
this.options = this.request_details.AllowedActions;
this.activeSegment = this.segmentsArray[0].name;
@ -506,12 +507,14 @@ export class WorkListMainItgComponent implements OnInit {
modal.cssClass = 'replaceRoll-modal';
modal.onDidDismiss()
.then((data) => {
this.replcamentID = data.data.empData.USER_NAME;
this.commentText = data.data.comments;
if (actionNumber === 3) {
this.actionService(3, this.commentText);
} else if (actionNumber === 4) {
this.actionService(4);
if(data.data.empData){
this.replcamentID = data.data.empData.USER_NAME ? data.data.empData.USER_NAME : data.data.empData.EmployeeID;
this.commentText = data.data.comments ? data.data.comments: null;
if (actionNumber === 3) {
this.actionService(3, this.commentText);
} else if (actionNumber === 4) {
this.actionService(4);
}
}
});

@ -1,19 +1,19 @@
<ion-header>
<ion-toolbar style="--background: #269DB8;">
<!-- <nav-buttons></nav-buttons> -->
<ion-title color="light">{{ 'vacation-rule, search-employee' | translate}}</ion-title>
<ion-buttons slot="primary">
<ion-button style="background: none !important;" (click)="closePage()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div style="padding: 0 10px;" [innerHTML]='"vacation-rule, replacement-employee-tip" | translate'></div>
<!-- <ion-item lines="none">
<ion-toolbar>
<!-- <nav-buttons></nav-buttons> -->
<ion-title>{{ 'worklistMain, delegate' | translate}}</ion-title>
<ion-buttons slot="primary">
<ion-button style="background: none !important;" (click)="closePage()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content padding>
<!-- <div style="padding: 0 10px;" [innerHTML]='"vacation-rule, replacement-employee-tip" | translate'></div> -->
<!-- <ion-item lines="none">
<ion-label class="boldTxtNav">{{'vacation-rule, search-by' | translate}}</ion-label>
<ion-select okText='{{"general, ok" | translate }}' cancelText='{{"general, cancel" | translate }}'
[(ngModel)]="searchKeySelect">
@ -32,8 +32,8 @@
<ion-list>
<ion-list-header>
<ion-list>
<!-- <ion-list-header>
<ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
</ion-list-header>
<ion-radio-group [(ngModel)]="searchKeySelect">
@ -58,20 +58,62 @@
</ion-radio-group>
</ion-radio-group> -->
<ion-list-header>
<ion-label class="boldTxtNav">{{'replacementRoll, searchBy' | translate}}</ion-label>
</ion-list-header>
<ion-radio-group [(ngModel)]="searchKeySelect" (ionChange)="onChangeSelect($event)">
<ion-row class="top-radio-row" style="display: flex;">
<ion-item lines='none'>
<ion-radio mode="md" value="1" checked></ion-radio>
<ion-label class="radio-label">
<p class="textSearchType">{{'replacementRoll, workflow' | translate}}</p>
</ion-label>
</ion-item>
<ion-item lines='none'>
<ion-radio mode="md" value="4"></ion-radio>
<ion-label class="radio-label">
<p class="textSearchType">{{'replacementRoll, favorite' | translate}}</p>
</ion-label>
</ion-item>
<ion-item lines='none'>
<ion-radio mode="md" value="2"></ion-radio>
<ion-label class="radio-label">
<p class="textSearchType">{{'replacementRoll, employee-id' | translate}}</p>
</ion-label>
</ion-item>
<ion-item lines='none'>
<ion-radio mode="md" value="3"></ion-radio>
<ion-label class="radio-label">
<p class="textSearchType">{{'replacementRoll, employee-email' | translate}}</p>
</ion-label>
</ion-item>
<ion-item lines='none'>
<ion-radio mode="md" value="5"></ion-radio>
<ion-label class="radio-label">
<p class="textSearchType">{{'replacementRoll, employee-name' | translate}}</p>
</ion-label>
</ion-item>
</ion-row>
</ion-radio-group>
<ion-item lines="none" class="search-box">
<ion-item lines="none" class="search-box" *ngIf='!isFilter'>
<ion-input (ionInput)="onChangeInput()" [ngClass]="direction == 'en'? 'filterInput':'filterInput-ar'" [(ngModel)]="searchKey" [placeholder]='getPlaceHolder()' clearInput="true"></ion-input>
<ion-input (ionInput)="onChangeInput()" [ngClass]="direction == 'en'? 'filterInput':'filterInput-ar'"
[(ngModel)]="searchKey" [placeholder]='getPlaceHolder()' clearInput="true"></ion-input>
</ion-item>
<div *ngIf="isFilter && !userSelected">
<ion-searchbar class="filterClass" mode='md' (ionInput)="filterList($event)" placeholder="Filter">
</ion-searchbar>
</div>
</ion-list>
<!-- <ion-item>
<!-- <ion-item>
<ion-list [(ngModel)]="selEmp" *ngIf="ReplacementList">
<ion-item *ngFor="let employee of ReplacementList;let i=index;">
<ion-label><span class="boldTxt">{{employee.EMPLOYEE_DISPLAY_NAME}}</span> <br>{{employee.USER_NAME}}<br>
@ -81,7 +123,7 @@
</ion-list>
</ion-item> -->
<!-- <ion-list>
<!-- <ion-list>
<ion-radio-group mode="md" [(ngModel)]="selEmp" *ngIf="ReplacementList">
<ion-item *ngFor="let employee of ReplacementList;let i=index;">
<ion-label><span class="boldTxt">{{employee.EMPLOYEE_DISPLAY_NAME}}</span> <br>{{employee.USER_NAME}}<br>
@ -91,85 +133,114 @@
</ion-radio-group>
</ion-list> -->
<div *ngIf="!userSelected">
<div *ngIf="ReplacementList.length>0" class="uk-margin">
<div *ngIf="ReplacementList.length>0" class="uk-margin">
{{'replacementRoll, search-result' | translate}}
</div>
<br/>
<br />
<!-- <ion-item lines="none"> -->
<div class="square-container" >
<div *ngFor="let employee of ReplacementList;let i=index;" class="square">
<div class="profileImageDiv">
<!-- <img class="profileImage" src="../assets/imgs/profile.png"> -->
<div class="square-container">
<div *ngFor="let employee of ReplacementList;let i=index;" class="square">
<div class="profileImageDiv">
<!-- <img class="profileImage" src="../assets/imgs/profile.png"> -->
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null || employee.EMPLOYEE_IMAGE == ''" class="empImgeRep" src="../assets/imgs/profile.png">
<ion-label class="employee-details">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null || employee.EMPLOYEE_IMAGE == ''" class="empImgeRep"
src="../assets/imgs/profile.png">
<ion-label class="employee-details">
<span (click)="select(employee,i)">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
<!-- <br>{{employee.USER_NAME}}<br>
<span (click)="select(employee,i)">{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
<!-- <br>{{employee.USER_NAME}}<br>
{{employee.EMAIL_ADDRESS}} -->
</ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'" (click)="setFavorite(employee)">
<img src="assets/imgs/fav.svg" />
</div>
</div>
</ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'" (click)="setFavorite(employee)">
<img src="assets/imgs/fav.svg" />
</div>
</div>
<!-- <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> -->
</div>
</div>
<!--
</div>
</ion-item> -->
</div>
<div [hidden]="isAnswer==true" *ngIf="favoriteUserList.length> 0 && !userSelected && ReplacementList.length ==0 && searchKeySelect == '4'">
<!-- related list -->
<div [hidden]="isAnswer==true"
*ngIf="relatedList.length> 0 && !userSelected && ReplacementList.length ==0 && searchKeySelect == '1'">
<div class="uk-margin">
{{'replacementRoll, favorite' | translate}}
{{'replacementRoll, related' | translate}}
</div>
<div class="square-container uk-padding" >
<div (click)="select(employee,i)" *ngFor="let employee of favoriteUserList;let i=index;" class="square">
<div class="profileImageDiv">
<div class="square-container uk-padding">
<div (click)="select(employee,i)" *ngFor="let employee of relatedList;let i=index;" class="square">
<div class="profileImageDiv">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep" [src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">
<ion-label class="employee-details">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">
<ion-label class="employee-details">
<span>{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
<span>{{employee.Name}}</span>
</ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'">
<img src="assets/imgs/fav filled.svg" />
</div>
</div>
</div>
</ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'">
<img src="assets/imgs/fav filled.svg" />
</div>
</div>
</div>
</div>
</div>
</div>
<div [hidden]="isAnswer==true"
*ngIf="favoriteUserList.length> 0 && !userSelected && ReplacementList.length ==0 && searchKeySelect == '4'">
<div class="uk-margin">
{{'replacementRoll, favorite' | translate}}
</div>
<div *ngIf='messageSuccess' class="succssfullMSG">
<ion-col size="12">
<ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
</ion-col>
<ion-col size="12"> <div style="font-size: 30px !important"> Transaction Successful </div> </ion-col>
<div class="square-container uk-padding">
<div (click)="select(employee,i)" *ngFor="let employee of favoriteUserList;let i=index;" class="square">
<div class="profileImageDiv">
<img *ngIf="employee.EMPLOYEE_IMAGE" class="empImgeRep"
[src]="'data:image/png;base64,'+employee.EMPLOYEE_IMAGE">
<img *ngIf="employee.EMPLOYEE_IMAGE == null" class="empImgeRep" src="../assets/imgs/profile.png">
<ion-label class="employee-details">
<span>{{employee.EMPLOYEE_DISPLAY_NAME}}</span>
</ion-label>
<div [ngClass]="direction == 'en' ? 'star-fav' : 'star-fav-left'">
<img src="assets/imgs/fav filled.svg" />
</div>
</div>
</div>
</div>
</div>
<div *ngIf='messageSuccess' class="succssfullMSG">
<ion-col size="12">
<ion-icon class="succssfullIcon" name="checkmark"></ion-icon>
</ion-col>
<ion-col size="12">
<div style="font-size: 30px !important"> Transaction Successful </div>
</ion-col>
</div>
</ion-content>
<ion-footer>
<ion-footer *ngIf="isAnswer== false && userSelected ==true">
<div class="noteInput" *ngIf="isAnswer== false && userSelected ==true">
<div class="noteInput">
<!-- <ion-label class="boldTxtNav" padding>{{"replacementRoll, enterNote" | translate}}
<!-- <ion-label class="boldTxtNav" padding>{{"replacementRoll, enterNote" | translate}}
</ion-label> -->
<ion-item>
<ion-textarea [(ngModel)]="userNote" [placeholder]="'replacementRoll, enterNote' | translate"></ion-textarea>
</ion-item>
</div>
<br/>
<ion-item>
<ion-textarea [(ngModel)]="userNote" [placeholder]="'replacementRoll, enterNote' | translate"></ion-textarea>
</ion-item>
</div>
<br />
<!-- <div class="centerDiv">
<ion-button *ngIf="userSelected ==true" class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px; --background: transparent; " ion-button (click)="submitAction()">
{{'general, submit' | translate}}</ion-button>
@ -181,9 +252,13 @@
<ion-footer *ngIf="userSelected ==true">
<div class="centerDiv">
<ion-button (click)="closePage()" class="footer-button" color="customnavy">{{'general, save' | translate}}
</ion-button>
</div>
</ion-footer>
<ion-footer>
<div class="centerDiv" *ngIf="userSelected ==true">
<ion-button (click)="closePage()" class="footer-button" color="customnavy">{{'general, save' | translate}}
</ion-button>
</div>
<div class="centerDiv">
<ion-button (click)="closeFunction()" class="footer-button" color="customnavy">{{'general, close' | translate}}
</ion-button>
</div>
</ion-footer>

@ -65,3 +65,216 @@
.top-radio-row{
font-size: 12px;
}
button.item-button.button.button-md.button-clear.button-clear-md {
background-color: transparent;
}
.footer-button {
background: #dbdbdb;
border-radius: 10px;
color: black;
--background: transparent;
font-weight: bold;
width: 75%;
}
// ion-item {
// margin-top: 5%;
// margin-right: 7%;
// width: 100%;
// }
.ionItem{
border: #e4e4e4 solid;
/* margin: 6px; */
/* padding: 11px; */
height: 85px;
width: 164px;
border-radius: 5px;
text-align: center;
}
.profileImageDiv{
z-index: 3;
position: relative;
top: 0;
}
.profileImage{
width:60px !important;
}
.activated{
border: #209a83 0.02cm solid ;
}
.deactivated{ border: #e4e4e4 0.02cm solid;
}
.repContentDiv{
text-align: center;
width: 85%;
font-size: 14px;
border: #e4e4e4 solid;
border-radius: 5px;
padding: 20px 8px 8px 8px;
margin-top: -9px;
margin-right: -35px
}
.selIEmpDiv{
text-align: right;
margin-bottom: -26px;
margin-right: 0px;
z-index: 3;
position: relative;
top: 0;
}
.selIEmpImage{
width:22px !important
}
.noteInput{
border: solid var(--gray) 1px;
border-radius: 15px;
margin: 8px 17px 0px 17px;
padding: 10px 2px 10px 2px;
}
.filterInput{
border: solid var(--gray) 1px;
border-radius: 21px;
padding-left: 10px !important;
}
.filterInput-ar{
// border: solid var(--gray) 1px;
// border-radius: 21px;
// padding-left: 10px !important;
border: solid var(--gray) 1px;
border-radius: 21px;
// width:250px
// padding-left: 145px !important;
//margin-left: 123px;
// padding-right: 129px;
//margin-right: -136px;
}
.filterBtn{
background: var(--newgreen);
--background: var (--newgreen);
border-radius: 50%;
height: 60px;
width: 60px;
}
.filterBtn-ar{
// background: var(--newgreen);
// --background: var (--newgreen);
// border-radius: 50%;
// height: 60px;
// width: 60px;
background: var(--newgreen);
--background: var (--newgreen);
border-radius: 50%;
height: 60px;
width: 60px;
margin-left: -183px;
margin-right: 260px;
}
*{
box-sizing: border-box;
}
.square-container{
// padding: 8px;
width:100%;
}
.square{
// width:calc(100% / 2);
width:100%;
float:left;
position: relative;
// padding-bottom: calc(100% / 2);
}
.square .content{
width: calc(100% - 16px) !important;
height: calc(100% - 16px) !important;
margin: 8px;
padding: 16px;
// position: absolute;
color: white;
border-radius: 9px;
text-align: center;
min-height: 92px;
// background-color: #0095ff;
// box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
}
.disabledButton{
opacity:.5;
}
.radio-label{
font-size: 9px;
margin: 4px;
position: relative;
bottom: 4px;
}
ion-radio{
--color-checked: #269db8;
}
.center{text-align: center;padding: 5px;}
.boldTxtNav{
font-weight: bold;
padding: 5px;
}
.employee-details{
display:inline-block;
margin: 10px;
text-overflow: ellipsis;
white-space: nowrap;
width: 70%;
}
.empImgeRep{
display: inline-block;
height: 40px;
width: 40px;
}
.star-fav{
float: right;
margin: 15px 0px 0px 0px;
}
.uk-margin{margin: 15px 15px 0px 15px;
font-weight: bold;
clear: both;
position: relative;
top: 10px;}
.uk-padding{ padding: 20px;}
.uk-padding .employee-details{
bottom: 10px;
position: relative;}
.star-fav-left{
float: left;
margin: 10px 5px;
}
.top-radio-row{
font-size: 12px;
display: block;
padding-bottom: 25px;
padding-top: 15px;
}
.textSearchType{
padding-top: 8px;
font-size: 12px;
}

@ -33,9 +33,12 @@ export class WorkListReplacementItgComponent implements OnInit {
userSelected: any;
active: any;
isAnswer: boolean = false;
favoriteUserList: [] = [];
favoriteUserList = [];
userNote: any;
isFilter = true;
relatedList = [];
public direction = '';
arr = [];
constructor(public vacationRuleService: VacationRuleServiceService,
public ts: TranslatorService,
public cs: CommonService,
@ -46,6 +49,18 @@ export class WorkListReplacementItgComponent implements OnInit {
ngOnInit() {
this.getFavruite();
if(!this.relatedList || this.relatedList.length === 0 || this.relatedList === undefined){
this.arr = this.cs.sharedService.getSharedData('workflow-user', false);
var lookupObject = {};
for(var i in this.arr) {
lookupObject[this.arr[i]['Name']] = this.arr[i];
}
console.log(lookupObject);
for(i in lookupObject) {
this.relatedList.push(lookupObject[i]);
}
}
}
SearchReplacementList() {
@ -145,12 +160,27 @@ export class WorkListReplacementItgComponent implements OnInit {
}
}
closeFunction(){
this.modalController.dismiss({
'dismissed': true,
// comments: this.userNote
});
}
onChangeSelect(select) {
console.log(select.detail.value);
let selectValue = select.detail.value;
if (selectValue == "1" || selectValue == "2" || selectValue == "3") {
if (selectValue == "1") {
this.listOfRealted = this.relatedList;
this.isSelect = true;
this.isFilter = true;
} else if(selectValue == "4" ){
this.listOfFav = this.favoriteUserList;
this.isFilter = true;
} else if(selectValue === '2' || selectValue === '3' || selectValue === '5'){
this.isSelect = true;
this.isFilter = false;
}
else {
this.isSelect = false;
@ -170,11 +200,12 @@ export class WorkListReplacementItgComponent implements OnInit {
}, 3000);
}
select(selectEmp, index) {
console.log(selectEmp.EMPLOYEE_DISPLAY_NAME);
console.log(selectEmp);
this.selEmp = selectEmp
this.userSelected = true;
this.active = index;
this.searchKey = selectEmp.EMPLOYEE_DISPLAY_NAME ? selectEmp.EMPLOYEE_DISPLAY_NAME : selectEmp.NAME;
this.searchKey = selectEmp.EMPLOYEE_DISPLAY_NAME ? selectEmp.EMPLOYEE_DISPLAY_NAME : selectEmp.Name;
console.log(this.searchKey)
//this.closePage();
}
@ -244,4 +275,32 @@ export class WorkListReplacementItgComponent implements OnInit {
}
})
}
listOfRealted = [];
listOfFav = []
filterList(event){
console.log(this.relatedList);
console.log(this.favoriteUserList);
const val = event.target.value;
if(this.searchKeySelect === '1'){
if(val === '') {
this.relatedList = this.listOfRealted;
} else {
this.relatedList = this.listOfRealted.filter((item) => {
return (item.Name.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
} else if(this.searchKeySelect ==='4') {
if(val === '') {
this.favoriteUserList = this.listOfFav;
} else {
this.favoriteUserList = this.listOfFav.filter((item) => {
return (item.EMPLOYEE_DISPLAY_NAME.toLowerCase().indexOf(val.toLowerCase()) > -1);
});
}
}else{
return;
}
}
}

Loading…
Cancel
Save